/* intro.css — the entry page. Inherits the palette from style.css. */

/* style.css pins html/body to height:100% for the app's flex column layout.
   The intro is a long scrolling document, and that cap would confine the sticky
   header to the first viewport — so release it here. */
html:has(.introbody), .introbody{height:auto;min-height:100%}
.introbody{display:block;background:var(--bg)}

/* ---- header ---- */
.ihead{
  position:sticky;top:0;z-index:30;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:10px 22px;
}
.ibrand{display:flex;align-items:center;gap:10px;font-size:14.5px}
.ibrand .logo{width:32px;height:32px;border-radius:8px;font-size:18px}
.ilinks{margin-left:auto;display:flex;align-items:center;gap:20px}
.ilinks a{color:var(--dim);text-decoration:none;font-size:13.5px;white-space:nowrap}
.ilinks a:hover{color:var(--ink)}
.ilinks a.btn{color:#fff;text-decoration:none}

.iwrap{max-width:920px;margin:0 auto;padding:0 22px 60px}

/* ---- hero ---- */
.hero{padding:64px 0 52px;text-align:center;border-bottom:1px solid var(--line)}
.jpmark{
  font:400 62px/1 var(--jp);color:var(--accent);letter-spacing:6px;margin-bottom:22px;
}
.hero h1{font-size:38px;line-height:1.22;letter-spacing:-.8px;margin:0 0 18px;font-weight:680}
.hero .sub{max-width:640px;margin:0 auto;color:var(--dim);font-size:16px;line-height:1.62}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btn.big{padding:13px 26px;font-size:15px;text-decoration:none;display:inline-block}
a.btn{text-decoration:none}
.resume{margin-top:20px;font-size:13.5px;color:var(--dim);min-height:20px}
.resume b{color:var(--good)}

/* ---- sections ---- */
.sect{padding:54px 0;border-bottom:1px solid var(--line)}
.sect:last-child{border-bottom:0}
.eyebrow{
  display:inline-block;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--accent);font-weight:650;margin-bottom:10px;
}
.sect h2{font-size:29px;letter-spacing:-.5px;margin:0 0 16px;font-weight:680}
.sect h3{
  font-size:13px;text-transform:uppercase;letter-spacing:.9px;color:var(--dim);
  margin:42px 0 12px;font-weight:650;
}
.sect h4{font-size:18px;margin:0 0 9px;letter-spacing:-.2px}
.lead{color:var(--dim);font-size:15.5px;line-height:1.68;max-width:74ch;margin:0 0 8px}
.lead.small{font-size:14.5px}
.lead b,.fact b{color:var(--ink)}

/* ---- three scripts ---- */
.cards3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:16px}
.scard{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:18px;border-top-width:3px}
.scard.k-hira{border-top-color:var(--accent2)}
.scard.k-kata{border-top-color:var(--warn)}
.scard.k-kanji{border-top-color:var(--accent)}
.sc-name{font:600 21px/1.2 var(--jp);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.sc-name span{font:600 12px/1 -apple-system,sans-serif;color:var(--dim);letter-spacing:.5px;text-transform:uppercase}
.sc-count{font-size:12px;color:var(--dim);margin:5px 0 10px}
.scard p{font-size:13.5px;line-height:1.6;color:var(--dim);margin:0 0 12px}
.sc-ex{font:400 19px/1.5 var(--jp);color:var(--ink);border-top:1px solid var(--line);padding-top:10px}

/* ---- romaji callout ---- */
.romaji{
  background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--good);
  border-radius:13px;padding:20px 22px;margin-top:14px;
}
.rj-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.rj-head b{font-size:19px;letter-spacing:-.2px}
.rj-head span{font:400 13px var(--jp);color:var(--dim)}
.romaji p{font-size:14px;line-height:1.68;color:var(--dim);margin:0 0 11px;max-width:74ch}
.romaji p:last-child{margin-bottom:0}
.romaji b{color:var(--ink)}
.romaji em{color:var(--ink);font-style:italic}
.mono{
  font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel2);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--accent2);
}
.rj-warn{border-left:3px solid var(--warn);padding-left:13px}
.rj-warn b{color:var(--warn)}
.rj-note{border-top:1px solid var(--line);padding-top:11px;font-size:13px!important}

/* ---- glossary ---- */
.glos{display:grid;gap:14px;margin-top:18px}
.ggroup{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:18px 20px}
.ggroup h4{
  font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);
  margin:0 0 14px;font-weight:650;
}
.gnote{font-size:13.5px;line-height:1.62;color:var(--dim);margin:-4px 0 14px;max-width:74ch}
.ggroup dl{
  margin:0;display:grid;grid-template-columns:minmax(150px,220px) 1fr;
  gap:12px 22px;align-items:baseline;
}
.ggroup dt{font-size:14.5px;font-weight:650;color:var(--ink)}
.ggroup dt span{
  display:block;font:400 12.5px var(--jp);color:var(--dim);font-weight:400;margin-top:2px;
}
.ggroup dd{margin:0;font-size:13.5px;line-height:1.66;color:var(--dim)}
.ggroup dd b{color:var(--ink)}
.ggroup dd em{color:var(--ink);font-style:italic}
.ggroup dd .jp{color:var(--ink);font-size:14.5px}
.ggroup dd .jp b{color:var(--accent)}
/* full-width rows for the longer "here's the catch" entries */
.ggroup dt.wide{grid-column:1 / -1;color:var(--accent2);font-size:13.5px;
  border-top:1px solid var(--line);padding-top:13px;margin-top:2px}
.ggroup dd.wide{grid-column:1 / -1;margin-top:-4px}
.ggroup dt+dd{padding-bottom:2px}

@media (max-width:720px){
  .ggroup dl{grid-template-columns:1fr;gap:4px 0}
  .ggroup dt{margin-top:14px}
  .ggroup dt:first-child{margin-top:0}
  .ggroup dt span{display:inline;margin-left:7px}
  .ggroup dt.wide,.ggroup dd.wide{grid-column:auto}
  .ggroup dd.wide{margin-top:0}
}

/* ---- sentence breakdown ---- */
.sentence{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:26px 18px;margin-top:14px;
}
.tok{
  font:400 34px/1.35 var(--jp);background:none;border:0;border-bottom:3px solid transparent;
  color:var(--ink);cursor:pointer;padding:2px 4px;border-radius:5px 5px 0 0;transition:background .12s;
}
.tok:hover{background:var(--panel2)}
.tok.kanji{border-bottom-color:var(--accent)}
.tok.hira{border-bottom-color:var(--accent2)}
.tok.kata{border-bottom-color:var(--warn)}
.tok.mixed{border-bottom-color:var(--good)}
.tok.punct{cursor:default;border:0}
.tok.on{background:var(--panel2)}
.legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--dim)}
.legend span{display:flex;align-items:center;gap:5px}
.sw{width:11px;height:3px;border-radius:2px;display:inline-block}
.sw.kanji{background:var(--accent)} .sw.hira{background:var(--accent2)}
.sw.kata{background:var(--warn)}    .sw.mixed{background:var(--good)}

.tokbox{
  background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:15px 18px;
  margin-top:12px;min-height:78px;
}
.tb-hint{color:var(--dim);font-size:13.5px;text-align:center;padding:8px 0}
.tb-word{font:400 26px/1.2 var(--jp)}
.tb-read{font:400 14px var(--jp);color:var(--accent2);margin-top:3px}
.tb-role{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.6px;
  background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:2px 10px;
  color:var(--dim);margin:8px 0 6px}
.tb-desc{font-size:13.5px;color:var(--dim);line-height:1.6}

/* ---- word order ---- */
.wordorder{display:grid;gap:10px;margin-top:20px}
.wo{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:13px 16px}
.wo-lang{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);margin-bottom:6px}
.wo-line{display:block;font-size:18px;line-height:1.5}
.wo-line.jp{font-family:var(--jp)}
.wo-line em{color:var(--accent);font-style:normal;font-weight:650}
.wo-note{display:block;font-size:12px;color:var(--dim);margin-top:6px}
.wo-note em{color:var(--accent);font-style:normal}

/* ---- fact grid ---- */
.facts{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:14px}
.fact{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 11px 11px 0;padding:13px 16px;font-size:13.5px;line-height:1.62;color:var(--dim);
}
.fact em{color:var(--ink);font-style:italic}
.fact u{text-decoration:none;color:var(--accent2)}
.facts.two{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.facts.two .fact{border-left-color:var(--accent2)}

/* ---- JLPT ladder ---- */
.ladder{display:flex;flex-direction:column-reverse;gap:7px;margin-top:16px}
.rung{
  display:flex;align-items:baseline;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:12px 16px;
}
.rung b{font-size:16px;width:34px;flex:none;color:var(--dim)}
.rung span{font-size:13.5px;color:var(--dim);flex:1}
.rung i{font-size:11px;color:var(--accent);font-style:normal;text-transform:uppercase;letter-spacing:.7px}
.rung.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.rung.on b{color:var(--accent)}
.rung.on span{color:var(--ink)}
table.tbl.exam{margin-top:12px}
.sect .note{margin-top:18px}

/* ---- stepper ---- */
.stepper{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-top:20px;overflow:hidden}
.stepbar{height:3px;background:var(--panel2)}
.stepbar>i{display:block;height:100%;background:var(--accent);width:16.6%;transition:width .25s}
.step{padding:24px 24px 6px}
.stepnum{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);font-weight:650;margin-bottom:8px}
.step p{font-size:14px;line-height:1.68;color:var(--dim);margin:0 0 14px;max-width:70ch}
.step p b{color:var(--ink)}
.step p.warn{border-left:3px solid var(--warn);padding-left:13px}
.step p.warn b{color:var(--warn)}
.stepnav{display:flex;align-items:center;gap:14px;padding:14px 24px 18px;border-top:1px solid var(--line);margin-top:14px}
.dots{display:flex;gap:6px;flex:1;justify-content:center}
.dots i{width:7px;height:7px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);cursor:pointer}
.dots i.on{background:var(--accent);border-color:var(--accent)}

/* ---- little UI mocks inside the stepper ---- */
.mock{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:16px;margin-bottom:16px}
.m-cap{font-size:12px;color:var(--dim);margin:10px 0 0!important}
.m-tiles{display:flex;gap:9px;flex-wrap:wrap}
.m-tile{flex:1;min-width:88px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.m-tile b{display:block;font-size:21px;line-height:1.15}
.m-tile span{font-size:11px;color:var(--dim)}
.m-btn{display:inline-block;margin-top:11px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:9px 17px;border-radius:9px}
.m-grades{display:flex;gap:7px;flex-wrap:wrap}
.m-grades span{
  flex:1;min-width:76px;text-align:center;border-radius:8px;padding:8px 6px;color:#fff;
  font-size:12.5px;font-weight:600;
}
.m-grades i{display:block;font-style:normal;font-size:10.5px;font-weight:400;opacity:.85;margin-top:2px}
.m-grades .g0{background:var(--bad)} .m-grades .g1{background:var(--warn)}
.m-grades .g2{background:var(--accent2)} .m-grades .g3{background:var(--good)}
.m-card{text-align:center;padding:12px 0}
.m-big{font:400 46px/1.1 var(--jp)}
.m-hint{font-size:12px;color:var(--dim);margin:8px 0}
.m-input{
  display:inline-block;font:400 18px var(--jp);background:var(--panel2);border:1px solid var(--accent);
  border-radius:8px;padding:7px 30px;color:var(--ink);
}
.m-row{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;font-size:13px;color:var(--dim);padding:7px 0}
.m-row+.m-row{border-top:1px solid var(--line)}
.m-row.sub{font-size:12px}
.m-jp{font-family:var(--jp);font-size:17px;color:var(--ink)}
.m-rd{font-family:var(--jp);font-size:13px;color:var(--accent2)}
.m-pill{margin-left:auto;font-size:11px;border:1px solid var(--line);border-radius:99px;padding:2px 9px}
.m-q{font:400 20px var(--jp);text-align:center;padding:6px 0 14px}
.m-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.m-opts span{
  text-align:center;font-family:var(--jp);font-size:16px;padding:8px 0;border-radius:8px;
  background:var(--panel);border:1px solid var(--line);color:var(--dim);
}
.m-opts span.ok{background:var(--good);border-color:var(--good);color:#04240f;font-weight:700}
.m-chart{display:flex;align-items:flex-end;gap:4px;height:62px}
.m-chart i{flex:1;background:var(--good);border-radius:2px 2px 0 0}

/* ---- final ---- */
.final{text-align:center;padding-top:56px}
.final .lead{margin:0 auto 4px}
.finenote{font-size:12px;color:var(--dim);margin-top:16px}

/* ---- footer ---- */
.ifoot{
  border-top:1px solid var(--line);background:var(--panel);padding:14px 22px;
  display:flex;gap:18px;align-items:center;font-size:12.5px;color:var(--dim);
}
.ifoot a{color:var(--accent2);text-decoration:none}
.ifoot a:hover{text-decoration:underline}

@media (max-width:640px){
  .ihead{padding:10px 14px;gap:10px}
  .ilinks{gap:12px}
  .ilinks a:not(.btn){display:none}
  .iwrap{padding:0 14px 40px}
  .hero{padding:44px 0 38px}
  .hero h1{font-size:27px}
  .hero h1 br{display:none}
  .jpmark{font-size:46px}
  .sect h2{font-size:23px}
  .tok{font-size:27px}
  .step{padding:20px 16px 4px}
  .stepnav{padding:12px 16px 16px}
  .m-opts{grid-template-columns:repeat(2,1fr)}
}

/* Header controls on the intro page, matching the trainer. The account is a
   property of the person, not of the page, so both entry points show it. */
.ilinks .langpick{
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:5px 8px;font-size:12.5px;font-family:inherit;cursor:pointer;
}
.ilinks #acctBtn.in{border-color:var(--good);color:var(--good)}
@media (max-width:640px){
  .ilinks #langPick{display:inline-block}
  .ilinks #acctBtn{display:inline-block}
}