/* pages/trainer/views.css — verdicts and grade bar, syllabus library, plan & progress.
   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. */
/* The verdict on a typed answer. Border colour used to be the only signal,
   which is invisible at a glance and unavailable to anyone who cannot
   distinguish the two hues — so the wording carries the meaning and the
   colour only reinforces it. */
.verdict{margin-top:12px;font-size:15px;line-height:1.4}
.verdict.ok{color:var(--good);font-weight:600}
.verdict.no{color:var(--bad)}

/* The interval preview on grade buttons: the consequence of the choice,
   visible at the moment of choosing. */
.gradebar .ivl{display:block;font-size:11px;font-weight:400;opacity:.85;margin-top:1px}

/* Keyboard hints assume a keyboard. On touch devices the digits read as part
   of the label — "Again 1" looks like a difficulty score — so they only render
   where hovering (i.e. a pointer) exists. */
@media (hover: none) and (pointer: coarse){ kbd{display:none} }

/* ---- Today (issue #104, revised): the classic stacked overview, minus the
   big tracker cards and the stage grid — their three numbers live on in one
   compact clickable row. Colors are tokens only (decision 0008). ---- */
.tstats{display:flex;gap:10px;margin:16px 0 2px;flex-wrap:wrap}
.tstat{
  display:flex;align-items:baseline;gap:8px;background:var(--panel);
  border:1px solid var(--line);border-radius:99px;padding:7px 16px;
  cursor:pointer;font:inherit;color:var(--ink);transition:border-color .12s;
}
.tstat:hover{border-color:var(--line2)}
.tstat:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.tstat b{font:700 14px var(--display);font-variant-numeric:tabular-nums}
.tstat b small{font-size:11px;color:var(--dim);font-weight:500}
.tstat span{font-size:12px;color:var(--dim)}
:root[lang="hi"] .tstat span{font-size:12.5px}
@media (prefers-reduced-motion:reduce){.tstat{transition:none}}

/* ---- syllabus library (4-tab nav): pills and the master-detail split.
   Colors are tokens only (decision 0008). ---- */
.libpills{
  display:flex;gap:4px;background:var(--panel2);border:1px solid var(--line);
  border-radius:11px;padding:4px;margin-bottom:12px;width:fit-content;
  max-width:100%;overflow-x:auto;scrollbar-width:none;
}
.libpills::-webkit-scrollbar{display:none}
.libpill{
  background:none;border:1px solid transparent;border-radius:8px;
  padding:7px 13px;font-size:12.5px;font-weight:550;color:var(--dim);
  cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px;
}
.libpill:hover{color:var(--ink)}
.libpill.on{background:var(--panel);border-color:var(--line2);color:var(--ink)}
.libpill .jp{font-size:14px}
.libpill i{font:600 11.5px var(--display);font-style:normal;color:var(--dim)}
.libpill:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

.libgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.libside{position:sticky;top:110px}
.libempty{
  border:1px dashed var(--line);border-radius:12px;padding:34px 20px;
  text-align:center;color:var(--dim);font-size:13px;
}
.libcard{text-align:center}
.libcard .z-actions{justify-content:center}

/* ---- plan & progress: intent beside reality, stacked when narrow ---- */
.ppgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}
.ppcol{min-width:0}
@media(max-width:980px){.ppgrid{grid-template-columns:minmax(0,1fr)}}

/* mission-control top: plan+roadmap beside progress+activity */
/* Two columns of equal height (the grid stretches them). Inside each, the
   summary card keeps its natural height and the card below it grows, so the
   columns finish level without forcing all four to one size — the shape the
   design sets out. */
.pptop{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;margin:18px 0 30px;align-items:stretch;
}
.ppstack{display:flex;flex-direction:column;gap:16px;min-width:0}
.ppstack>.railcard{margin-bottom:0}
/* :not(:first-child) — a lone card (no plan yet, so no plan card) would
   otherwise stretch the whole column height around its own short content. */
.ppstack>.railcard:last-child:not(:first-child){flex:1}
@media(max-width:760px){.pptop{grid-template-columns:minmax(0,1fr)}}
.ppct{font:800 22px var(--display);color:var(--accent);font-variant-numeric:tabular-nums}
.railk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.railk-row .railk{margin-bottom:0}
.ppplan{border-color:color-mix(in srgb, var(--accent) 40%, var(--line));box-shadow:0 0 20px var(--accent-soft)}
.ppbar-row{display:flex;align-items:center;gap:12px}
.ppbar-row b{font:800 13px var(--display);font-variant-numeric:tabular-nums}
/* The track is --line, not --panel2: on a --panel card the latter is nearly
   the same value, so an untouched pillar showed no bar at all. */
.ppbar{flex:1;height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.ppbar i{display:block;height:100%;background:var(--accent);border-radius:3px}

/* 30-day activity: one slot per day, value filled from the bottom, so an
   empty history reads as an empty chart instead of blank card. */
.ppdays{display:flex;gap:3px;align-items:flex-end;height:64px}
.ppday{flex:1;height:100%;background:var(--line);border-radius:2px;display:flex;align-items:flex-end;overflow:hidden}
.ppday i{display:block;width:100%;background:var(--accent);border-radius:2px}
.pp-sub{font-size:12px;color:var(--dim);margin-top:9px}
/* NOT .linkish — that class is dialog.css's, worn by the sign-in dialog and
   the bug reporter. style.css loads after it, so redefining the name here
   repainted their links. */
.pp-sub a,.pplink{color:var(--accent);text-decoration:none;font-weight:600}
.pp-sub a:hover,.pplink:hover{text-decoration:underline}
.pplink{background:none;border:0;padding:0;font-size:inherit;font-family:inherit;cursor:pointer}
.pplink:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

/* the expanded section: a way back, then that subject alone */
.ppback{margin-bottom:14px}
.ppexp-h{font-size:26px;font-weight:800;letter-spacing:-.4px;margin-bottom:14px}
.pp-chips{font-size:11px;color:var(--dim);font-weight:600;white-space:nowrap}
.pprow{margin-bottom:11px}
.pprow:last-child{margin-bottom:0}
.pprow-t{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-bottom:5px}
.pprow-t b{font:600 11.5px var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.msrow2p{display:flex;gap:13px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--panel2);font-size:13px;color:var(--dim)}
.msrow2p:last-of-type{border-bottom:0}
.msrow2p .msnum{width:20px;flex:none;font-size:15px}
.msrow2p .mslbl{flex:1;min-width:0}
.msrow2p .msdate{font:600 10.5px var(--display);color:var(--mute);white-space:nowrap}
.msrow2p.done{color:var(--good)}
.msrow2p.done .msnum{color:var(--good)}
.msrow2p.now{color:var(--ink);font-weight:650}
.msrow2p.now .msnum{color:var(--accent)}
.msrow2p:not(.done):not(.now){opacity:.55}
/* the undated preview shown before a plan is locked */
.msrow2p.undated{opacity:.5}
.msrow2p.undated .msdate{color:var(--mute)}