/* pages/guide/base.css — guide header, hero, sections, scripts, romaji, glossary.
   Split from the pre-#149 monolith — rule ORDER preserved; see docs/architecture.md
   ("CSS layers") for the load-order contract each page's <head> follows. */
/* 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(--header-line, transparent);
  display:flex;align-items:center;gap:16px;padding:10px 22px;
}
/* Now an <a> on the guide pages, so it needs the link defaults cleared —
   the class already carried the layout. */
/* The guide's brand is the shared one now — components/brand.css (#147). */
.ilinks{margin-left:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
.ilinks a{color:var(--dim);text-decoration:none;font-size:13.5px;white-space:nowrap;
           padding-block:4px;margin-block:-4px} /* 21px visual, 29px hit box (#138) */
.ilinks a:hover{color:var(--ink)}
.ilinks a.btn{color:#fff;text-decoration:none}
/* #320: at 320px the header panel (lantern · language chip · account) is
   wider than the viewport on its own, so wrapping the row was not enough —
   the page scrolled sideways by ~30px. The panel may wrap too, and the
   header gives back some of its side padding. Scoped to this shell; the
   landing and the trainer draw their own headers. */
@media (max-width:400px){
  /* Three rows of header on a 640px-tall phone is a third of the screen;
     pinned, it would follow the reader down every page. It scrolls. */
  .ihead{padding:10px 14px;gap:10px;position:static}
  .ilinks{gap:12px}
  .ilinks .top-right-panel{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
}

.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 var(--display);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}