/* pages/trainer/path.css — the revised Today path, rail cards and library detail.
   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. */
/* =====================================================================
   App-shell restyle (UX Pilot direction) — content components.
   Colors are tokens only (decision 0008).
   ===================================================================== */

/* Today: hero header + stat cards + path/rail grid */
.dayhead h2{font-size:26px;letter-spacing:-.4px;font-weight:800}
.dh-kicker{letter-spacing:.18em;font-size:11px}
.tstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 22px}
.tstat{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:13px 17px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .12s;
}
.tstat span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);order:-1;text-align:left}
.tstat b{font:800 18px var(--display);font-variant-numeric:tabular-nums}
.tstat b small{font-size:11px;color:var(--dim);font-weight:500}

.todaygrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:4px}
.pathhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.pathhead h3{margin:0;text-transform:none;letter-spacing:-.1px;font-size:16px;font-weight:700;color:var(--ink)}
.pathhead span{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pstep{
  display:flex;gap:15px;width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;margin-bottom:11px;transition:border-color .12s;
}
.pstep:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--line))}
.pstep:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.pstep.cur{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow:0 0 20px var(--accent-soft);
}
.pstep.dim{opacity:.66;background:color-mix(in srgb, var(--panel) 55%, transparent)}
.pstep .pico{
  width:42px;height:42px;border-radius:12px;flex:none;
  background:var(--hover);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.pstep.cur .pico{background:var(--accent-soft);border-color:color-mix(in srgb, var(--accent) 30%, var(--line));color:var(--accent)}
.pstep b{font-size:14px}
.pchip{
  background:var(--accent);color:#fff;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;border-radius:4px;padding:2px 7px;margin-left:9px;vertical-align:1px;
}
.pstep .pdesc{color:var(--dim);font-size:12.5px;line-height:1.55;margin-top:3px}
.pmeta{display:flex;gap:15px;margin-top:8px;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pmeta .ok{color:var(--good)}

.railcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:15px}
.railk{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.railcard .card,.railcard .wgoal-note{background:none;border:0;padding:0;margin:0}
.tipcard{
  background:linear-gradient(135deg,var(--accent),var(--h1));color:#fff;
  border-radius:18px;padding:18px;font-size:12px;line-height:1.6;
}
.tipcard b{display:block;font-size:13px;margin-bottom:5px}
.tipcard .wgoal-note{color:#fff;border:0;background:none;padding:0;margin:0;font-size:12px}
.tipcard .wgoal-note b{display:inline;font-size:inherit}
@media(max-width:760px){.todaygrid{grid-template-columns:minmax(0,1fr)}.tstats{grid-template-columns:minmax(0,1fr)}}

/* Library: airy tiles, section microline, clean side detail */
.libline{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:4px 0 14px}
.kcell{border-radius:13px;border-color:transparent;padding:13px 5px 10px}
.kcell:hover{border-color:var(--line2)}
.kcell.known{border-color:var(--good)}
.kcell.sel{border-color:var(--accent);background:var(--accent-soft)}
/* The library restyle's small-caps voice for the romaji caption — scoped to
   the kana/kanji grid (#137). .kgrid, not .libgrid: below 900px viewLibrary
   returns the grids without the .libgrid wrapper, and every .kcell sits
   directly inside a .kgrid at both widths. Size and colour deliberately
   absent: the shared base in cards.css (11px, var(--dim)) is the readable
   floor this rule once silently trampled by re-declaring the bare selector
   later in load order. */
.kgrid .kcell .r{letter-spacing:.1em;text-transform:uppercase}
.kgrid .kcell .r[lang="hi"]{text-transform:none;letter-spacing:0}

.ldetail{text-align:center;padding:4px 2px}
.ld-chip{
  display:inline-block;background:var(--accent);color:#fff;border-radius:6px;
  padding:3px 10px;font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
}
.ld-char{font:400 62px/1.15 var(--jp);margin-top:14px}
.ld-read{font-size:15.5px;font-weight:700;margin-top:8px}
.ld-meta{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.ld-k{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:22px 0 9px;text-align:left}
.ld-usage{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:13px 14px;text-align:left;
}
.ld-usage .uw{font:600 16px var(--jp)}
.ld-usage .ur{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.ld-usage .um{font-size:12px;color:var(--dim);margin-top:2px}
.ld-note{font-size:12px;color:var(--dim);line-height:1.55;background:var(--hover);border-radius:11px;padding:11px 13px;margin-top:14px;text-align:left}
.ld-add{
  display:block;width:100%;margin-top:20px;background:none;
  border:1px solid var(--accent);color:var(--accent);border-radius:11px;
  padding:11px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}
.ld-add:hover{background:var(--accent-soft)}
.ld-close{margin-top:8px}

/* microlabel case: Devanagari has no uppercase — give it weight instead */
:root[lang="hi"] .sx-k,:root[lang="hi"] .railk,:root[lang="hi"] .pathhead span,
:root[lang="hi"] .pmeta,:root[lang="hi"] .tstat span,:root[lang="hi"] .ld-k,
:root[lang="hi"] .ld-meta,:root[lang="hi"] .ld-chip,:root[lang="hi"] .pchip,
:root[lang="hi"] .goalcard .gc-k,:root[lang="hi"] .libline,:root[lang="hi"] .ld-usage .ur{
  letter-spacing:.02em;font-size:11px;
}

@media (prefers-reduced-motion:reduce){
  .pstep,.tstat{transition:none}
}
/* Devanagari is never uppercased (#60): the goal card's caption. */
:root[lang="hi"] .gc-k{text-transform:none;letter-spacing:0}