/* landing.css — layout and components for the landing page only.
   Every color comes from tokens.css (decision 0008); a literal color in this
   file is a bug. Both themes work by construction because only tokens vary. */

/* The landing does not load style.css, so it needs its own reset — without it
   every padded box on this page sizes by content-box while the trainer and
   guide size by border-box. Found by measuring a 1px element that came back
   33px wide. */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
/* The landing does not load style.css, so IT must paint the ground — a body
   with no explicit token background borrows the browser's canvas, and on a
   dark OS that meant dark components floating on a white page (bugs.md). */
body.landing{background:var(--bg);color:var(--ink);
  font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;
  display:block;height:auto;margin:0}
.landing ::selection{background:var(--accent);color:#fff}
.landing :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
/* Keyboard users land on the nav's five links before any content; this gives
   them one keystroke past it. Visible only while focused.
   Hidden by clip-path, NOT by left:-9999px — body sets overflow-x:clip, which
   clips an off-screen element out of existence, and Chrome refuses to focus
   what it does not render, so the off-screen version was unreachable. */
.skip{position:absolute;top:0;left:0;z-index:200;width:1px;height:1px;overflow:hidden;
      clip-path:inset(50%);white-space:nowrap;
      background:var(--accent);color:#fff;padding:10px 16px;
      border-radius:0 0 8px 0;font:600 14px var(--sans);text-decoration:none}
.skip:focus{width:auto;height:auto;clip-path:none;overflow:visible}
.jp{font-family:var(--jp)}

.eyebrow{display:flex;align-items:center;gap:10px;font:600 11px/1 var(--sans);
         letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--accent);border-radius:2px}

/* ============ nav ============ */
.lnav{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 86%, transparent);
     backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
     border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.lnav.scrolled{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font:700 17px var(--mono);letter-spacing:-.02em;
       color:var(--ink);text-decoration:none}
.mark{width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;
      display:inline-flex;align-items:center;justify-content:center;
      font:600 17px var(--jp);flex:none}
.nav-links{display:flex;gap:4px;margin-right:auto}
.nav-links a{font:500 13.5px var(--sans);color:var(--dim);padding:8px 12px;border-radius:7px;
             text-decoration:none;transition:color .15s,background .15s}
.nav-links a:hover{color:var(--ink);background:var(--hover)}
.lang{display:flex;border:1px solid var(--line);border-radius:8px;padding:2px;font:600 12px var(--mono)}
.lang button{padding:5px 10px;border-radius:6px;color:var(--mute);background:none;border:0;cursor:pointer;font:inherit}
.lang button[aria-pressed="true"]{background:var(--panel2);color:var(--ink)}
.themebtn{width:36px;height:36px;border:1px solid var(--line);border-radius:8px;color:var(--dim);
       background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
       font-size:15px;transition:color .15s,border-color .15s}
.themebtn:hover{color:var(--ink);border-color:var(--line2)}
.lbtn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:600 14px var(--sans);
     padding:9px 18px;border-radius:8px;border:1px solid var(--line2);color:var(--ink);
     background:none;cursor:pointer;text-decoration:none;
     transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
.lbtn:hover{transform:translateY(-1px);border-color:var(--mute)}
.lbtn.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.lbtn.solid:hover{box-shadow:0 6px 24px var(--accent-soft)}
.lbtn.big{padding:13px 26px;font-size:15px;border-radius:10px}

/* ============ hero ============ */
.hero{padding-top:88px;padding-bottom:96px;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start}
/* The forced break keeps Master on its own line; when the Hindi title1 span is
   empty the break disappears with it. */
h1 span:empty + .h1br{display:none}
.kana-row{font:400 15px var(--jp);color:var(--accent);letter-spacing:.4em;margin-bottom:14px;opacity:.9}
.landing h1{font:600 clamp(33px,4.4vw,55px)/1.16 var(--mono);letter-spacing:-.03em;text-wrap:balance;margin:0}
.landing h1 em{font-style:normal;color:var(--accent-deep)}
.sub{color:var(--dim);font-size:17px;max-width:33em;margin:22px 0 30px}
.sub b{font-weight:600;color:var(--ink)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.ghost-link{font:600 14px var(--sans);color:var(--dim);padding:13px 8px;text-decoration:none;transition:color .15s}
.ghost-link:hover{color:var(--ink)}
.proof{display:flex;gap:28px;margin-top:42px;flex-wrap:wrap;padding:0;list-style:none}
.proof div{font:600 15px var(--mono)}
.proof span[data-i18n]{display:block;font:400 12px var(--sans);color:var(--mute);margin-top:2px}

/* Two-column hero: the card's top edge sits on the kana row's text line, per
   design review — the 14px offsets the row's font leading. */
@media (min-width:961px){ .drill{margin-top:14px} }

/* ---- drill widget ---- */
.drill{background:var(--card);border:1px solid var(--line2);border-radius:14px;overflow:hidden;
       box-shadow:0 24px 80px var(--shadow1)}
.dr-top{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.dots{display:flex;gap:6px}
.dots i{width:11px;height:11px;border-radius:50%;opacity:.55}
.dots i:nth-child(1){background:var(--bad)}
.dots i:nth-child(2){background:var(--warn)}
.dots i:nth-child(3){background:var(--good)}
.dr-tabs{display:flex;gap:2px;margin-left:4px}
.dr-tab{font:500 12.5px var(--mono);color:var(--mute);padding:6px 12px;border-radius:7px;
        background:none;border:0;cursor:pointer;transition:color .15s,background .15s}
.dr-tab:hover{color:var(--dim)}
.dr-tab[aria-pressed="true"]{color:var(--ink);background:var(--hover)}
.streak{margin-left:auto;font:600 12px var(--mono);color:var(--accent-deep);border:1px solid var(--accent-soft);
        padding:5px 12px;border-radius:99px;white-space:nowrap}
.dr-body{padding:34px 28px 26px;min-height:330px;display:flex;flex-direction:column;align-items:center;text-align:center}
.glyph{font:400 74px/1.15 var(--jp);margin-bottom:6px}
.dr-prompt{font:500 12.5px var(--mono);color:var(--mute);letter-spacing:.05em;margin-bottom:20px}
.dr-input{display:flex;align-items:center;gap:10px;width:min(300px,100%)}
.dr-input input{flex:1;background:var(--bg);border:1px solid var(--line2);border-radius:9px;
                color:var(--ink);font:500 16px var(--mono);padding:11px 14px;text-align:center;outline:none;min-width:0;
                transition:border-color .15s}
.dr-input input:focus{border-color:var(--accent)}
.dr-check{font:600 13px var(--mono);color:var(--accent-deep);border:1px solid var(--accent-soft);
       background:none;cursor:pointer;padding:11px 18px;border-radius:9px;transition:background .15s,transform .15s}
.dr-check:hover{background:var(--accent-soft);transform:translateY(-1px)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(340px,100%)}
.choice{font:500 14px var(--sans);border:1px solid var(--line2);border-radius:9px;padding:11px;
        background:none;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.choice:hover{border-color:var(--accent)}
.choice.right{border-color:var(--good-deep);color:var(--good-deep);background:var(--good-tint)}
.choice.wrong{border-color:var(--bad-deep);color:var(--bad-deep);background:var(--bad-tint)}
.verdict{min-height:26px;margin-top:18px;font:500 14px var(--sans)}
.verdict.ok{color:var(--good-deep);font-weight:600}
.verdict.no{color:var(--bad-deep)}
.gradebar{display:flex;gap:10px;margin-top:14px;opacity:0;pointer-events:none;transition:opacity .2s}
.gradebar.on{opacity:1;pointer-events:auto}
.grade{font:600 13px var(--mono);border:1px solid var(--line2);border-radius:9px;padding:9px 16px;
       background:none;cursor:pointer;transition:transform .15s,border-color .15s}
.grade:hover{transform:translateY(-1px)}
.grade small{display:block;font:400 11px var(--mono);color:var(--mute);margin-top:1px}
.grade.g0{color:var(--bad-deep)} .grade.g2{color:var(--good-deep)}
.dr-foot{border-top:1px solid var(--line);background:var(--panel);padding:10px 18px;
         font:500 11.5px var(--mono);color:var(--mute)}

/* ============ sections ============ */
.landing section{padding:92px 0;border-top:1px solid var(--line)}
.landing h2{font:600 clamp(24px,3vw,34px)/1.2 var(--mono);letter-spacing:-.02em;margin:0 0 10px}
.lede{color:var(--dim);max-width:42em;margin-bottom:42px}

/* ---- paths ---- */
.sets{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.set{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;
     display:block;text-decoration:none;color:var(--ink);transition:transform .18s,border-color .18s}
.set:hover{transform:translateY(-3px);border-color:var(--accent)}
.set .g{font:400 30px/1 var(--jp);margin-bottom:12px;color:var(--accent-deep)}
.set h3{font:600 15px var(--sans);margin:0 0 3px}
.set .cnt{font:600 12.5px var(--mono);color:var(--dim);margin-bottom:10px}
.set p.d{font-size:12.5px;color:var(--mute);line-height:1.55;margin:0}

/* ---- trainer ---- */
.tr-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.feat{list-style:none;display:grid;gap:16px;margin:0 0 30px;padding:0}
.feat li{display:flex;gap:14px;color:var(--dim);font-size:15px;line-height:1.6}
.feat li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--accent);flex:none;margin-top:9px}
.today-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;
       box-shadow:0 18px 60px var(--shadow1)}
.today-card .th{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.today-card .th b{font:600 14px var(--sans)}
.today-card .th span{font:500 12px var(--mono);color:var(--mute);margin-left:auto}
.tbar{height:6px;border-radius:99px;background:var(--panel2);overflow:hidden;margin-bottom:18px}
.tbar i{display:block;height:100%;width:38%;background:var(--accent);border-radius:99px}
.stage-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-top:1px solid var(--line);font-size:14px}
.stage-row:first-of-type{border-top:0}
.stage-row .n{font:600 12px var(--mono);color:var(--mute);width:18px}
.stage-row b{font-weight:600}
.stage-row span{color:var(--mute);font-size:12.5px}
.stage-row .st{margin-left:auto;font:600 12px var(--mono);white-space:nowrap}
.stage-row .st.done{color:var(--good-deep)}
.stage-row .st.next{color:var(--accent-deep)}
.stage-row .st.wait{color:var(--mute)}

/* ---- streaks ---- */
.lb-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:stretch}
.lcard{background:var(--panel);border:1px solid var(--line);border-radius:12px}
.lb-head{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.lb-head b{font:600 13.5px var(--sans)}
.lb-teaser{position:relative;padding:8px 0 14px}
.sk-row{display:grid;grid-template-columns:52px 44px 1fr 90px 70px;gap:14px;align-items:center;padding:13px 18px}
.sk{height:12px;border-radius:6px;background:var(--panel2);position:relative;overflow:hidden}
.sk.rk{width:26px} .sk.av{width:26px;height:26px;border-radius:8px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
           background:linear-gradient(90deg,transparent,var(--shimmer),transparent);
           animation:shimmer 1.8s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.lb-pill{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
         background:linear-gradient(180deg,transparent,color-mix(in srgb, var(--bg) 60%, transparent) 30%,color-mix(in srgb, var(--bg) 88%, transparent))}
.lb-pill div{background:var(--panel);border:1px solid var(--line2);border-radius:12px;
             padding:18px 26px;text-align:center;box-shadow:0 16px 50px var(--shadow1);max-width:320px}
.lb-pill b{font:600 15px var(--mono);display:block;margin-bottom:4px}
.lb-pill span{font:400 12.5px var(--sans);color:var(--dim)}
.stat-stack{display:grid;gap:14px;align-content:start}
.truth{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.tile .v{font:600 20px/1.25 var(--mono);letter-spacing:-.02em;color:var(--accent-deep)}
.tile .l{font:400 12.5px var(--sans);color:var(--mute);margin-top:6px;line-height:1.5}

/* charts (filled by viz.js in phase 5) */
.hm-card,.spark-card{padding:18px}
.hm-title{display:flex;align-items:baseline;margin-bottom:14px}
.hm-title b{font:600 13px var(--sans)}
.hm-legend{margin-left:auto;display:flex;align-items:center;gap:4px;font:400 10.5px var(--sans);color:var(--mute)}
.hm-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;background:var(--cell)}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px}
.heat i{width:100%;aspect-ratio:1;border-radius:2.5px;background:var(--cell)}
.heat i:hover{outline:1px solid var(--accent)}
.l0{background:var(--h0)!important}.l1{background:var(--h1)!important}
.l2{background:var(--h2)!important}.l3{background:var(--h3)!important}.l4{background:var(--h4)!important}
.spark-card b{font:600 13px var(--sans)}
.spark-card svg{width:100%;height:60px;margin-top:10px;display:block}
.sp-line{stroke:var(--accent);fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sp-area{fill:var(--accent);opacity:.1}
.sp-dot{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.viz-tip{position:fixed;z-index:99;pointer-events:none;background:var(--panel2);border:1px solid var(--line2);
         border-radius:7px;padding:6px 10px;font:500 12px var(--mono);color:var(--ink);
         box-shadow:0 8px 30px var(--shadow1);opacity:0;transition:opacity .12s}
.viz-tip.on{opacity:1}

/* ---- jlpt ---- */
.jlpt-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;max-width:760px}
.jlpt-card summary{list-style:none;display:flex;align-items:center;gap:14px;padding:20px 22px;cursor:pointer}
.jlpt-card summary::-webkit-details-marker{display:none}
.jlpt-card summary .chev{font:600 13px var(--mono);color:var(--accent-deep);transition:transform .2s}
.jlpt-card[open] summary .chev{transform:rotate(90deg)}
.jlpt-card summary b{font:600 15px var(--sans)}
.jlpt-card summary span{color:var(--mute);font-size:13px}
.jlpt-card summary .hintlbl{margin-left:auto;font:600 11px var(--mono);color:var(--mute);letter-spacing:.06em}
.jlpt-body{border-top:1px solid var(--line);padding:20px 22px;font-size:14px;color:var(--dim)}
.jlpt-body table{width:100%;border-collapse:collapse;margin:6px 0 18px}
.jlpt-body th{font:600 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute);
              text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--line)}
.jlpt-body td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.jlpt-body td.m{font:500 13px var(--mono);color:var(--dim)}
.jlpt-body p{margin:0 0 12px;line-height:1.7}
.jlpt-body b{color:var(--ink)}
.jlpt-body a{color:var(--accent-deep);font-weight:600;text-decoration:none}

/* ---- basics ---- */
/* The rows cap their own width; the section keeps the shared 1120px wrap so
   its left edge lines up with every other section (it used to re-center). */
.basics-wrap .b-link{max-width:760px}
.b-link{display:flex;align-items:baseline;gap:16px;padding:18px 4px;border-top:1px solid var(--line);
        text-decoration:none;color:var(--ink);transition:background .15s}
.b-link:last-of-type{border-bottom:1px solid var(--line)}
.b-link:hover{background:var(--hover)}
.b-link b{font:600 15px var(--sans);white-space:nowrap}
.b-link span{color:var(--mute);font-size:13.5px}
.b-link .arr{margin-left:auto;color:var(--accent-deep);font-weight:700}

/* ---- band / footer ---- */
.band{padding:100px 0}
.band h2{font-size:clamp(26px,3.4vw,40px);margin:14px 0 26px;max-width:22em}
.band h2 em{font-style:normal;color:var(--accent-deep)}
.lfoot{border-top:1px solid var(--line);padding:34px 0 44px;color:var(--mute);font-size:13px}
.lfoot .fwrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.lfoot a{color:var(--mute);text-decoration:none} .lfoot a:hover{color:var(--dim)}
.lfoot .rt{margin-left:auto;font-family:var(--mono);font-size:11.5px}

/* ---- responsive ---- */
@media (max-width:960px){
  .hero{grid-template-columns:1fr;padding-top:56px;padding-bottom:68px;gap:44px}
  .sets{grid-template-columns:repeat(2,1fr)}
  .lb-grid,.tr-grid{grid-template-columns:1fr}
}
@media (max-width:860px){ .nav-links{display:none} }
@media (max-width:520px){
  .nav-in{gap:12px}
  .dots{display:none}
  .dr-top{gap:10px}
  .streak{padding:4px 9px;font-size:11px}
}
@media (max-width:560px){
  .sets{grid-template-columns:1fr}
  .truth{grid-template-columns:1fr}
  .landing section{padding:68px 0}
  .sk-row{grid-template-columns:40px 34px 1fr 60px}
  .sk-row .sk:nth-child(5){display:none}
  .b-link{flex-wrap:wrap}
  .b-link span{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .landing *,.landing *::before,.landing *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---- print ------------------------------------------------------------
   Someone printing this page wants the words, not the furniture: the sticky
   nav would repeat on every sheet, and the drill and charts are interactive
   surfaces that say nothing on paper. */
@media print{
  .lnav,.skip,.drill,.lb-teaser,.hm-card,.spark-card,.themebtn,.lang{display:none}
  .landing section{padding:24px 0;border-top:1px solid #ccc;break-inside:avoid}
  .hero{display:block;padding:0 0 24px}
  .lb-grid,.tr-grid,.sets{display:block}
  .set,.tile,.today-card{break-inside:avoid;margin-bottom:12px}
  .lbtn{border:1px solid #999}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}

/* Real leaderboard rows, in the card the skeleton teaser occupied. */
.lb-rows{list-style:none;margin:0;padding:6px 0}
.lb-row{display:flex;align-items:center;gap:12px;padding:9px 14px;font-size:14px}
.lb-row+.lb-row{border-top:1px solid var(--line)}
.lb-rank{flex:none;width:22px;text-align:right;font-family:var(--mono,ui-monospace,monospace);
  color:var(--mute);font-size:12.5px}
.lb-row:nth-child(-n+3) .lb-rank{color:var(--accent);font-weight:700}
.lb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.lb-days{flex:none;font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;color:var(--dim)}