/* academy.css — placeholder surface for the [&] Academy.
   Tokens are the atlas's (docs/shell-atlas.css) so this prototype reads as part of the stack
   rather than a separate design. Dark is the default; light is the same palette inverted. */

:root{
  --ink:#0A0E14; --ink2:#0C111A; --panel:#10151F; --panel2:#0D1320; --line:#1E2632; --line2:#28303E;
  --text:#C6D2E1; --read:#D7DEEA; --dim:#727E92; --faint:#4C5566;
  --hi:#eef4fa; --shadow:rgba(0,0,0,.5);
  --accent:#5CC8E8; --accentdim:#3a8aa3;
  --live:#46D08A; --alpha:#5CC8E8; --spec:#F2B24C; --draft:#9B8CF0; --veto:#FF5C7A;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --read-f:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --w:1180px;
}
:root[data-theme="light"]{
  --ink:#F6F8FB; --ink2:#FFFFFF; --panel:#FFFFFF; --panel2:#EEF2F7; --line:#E0E6EE; --line2:#CFD8E3;
  --text:#2C3540; --read:#1E2730; --dim:#5C6776; --faint:#9AA5B3;
  --hi:#10161E; --shadow:rgba(15,30,50,.16);
  --accent:#1683B4; --accentdim:#8FBdd4;
  --live:#1FA463; --alpha:#1683B4; --spec:#B07415; --draft:#6D5BD0; --veto:#D63862;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--text);
  font-family:var(--disp); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--w); margin:0 auto; padding:0 24px}

/* ---- honest-status chips -------------------------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:3px; border:1px solid; white-space:nowrap;
}
.chip::before{content:''; width:5px; height:5px; border-radius:50%; background:currentColor}
.chip.live{color:var(--live); border-color:color-mix(in srgb,var(--live) 40%,transparent); background:color-mix(in srgb,var(--live) 10%,transparent)}
.chip.mock{color:var(--draft); border-color:color-mix(in srgb,var(--draft) 40%,transparent); background:color-mix(in srgb,var(--draft) 10%,transparent)}
.chip.spec{color:var(--spec); border-color:color-mix(in srgb,var(--spec) 40%,transparent); background:color-mix(in srgb,var(--spec) 10%,transparent)}
.chip.blocked{color:var(--veto); border-color:color-mix(in srgb,var(--veto) 40%,transparent); background:color-mix(in srgb,var(--veto) 10%,transparent)}

/* ---- evidence grammar ------------------------------------------------------------------
   Status is carried by a persistent edge stripe on every panel and step, not by a chip on
   every one. Fourteen chips on a page stops reading as honesty and starts reading as noise —
   the semantics are worth keeping, the repetition is not. Chips now appear only where the
   state is genuinely surprising (a mock that contains real data, a real engine shown with fake
   values, a blocker) and carry a phrase rather than restating the colour.

   The stripe vocabulary is shared with the Runefort room tiles on practice.html, so the same
   colour means the same thing across the prototype. */
[data-state]{position:relative}
[data-state]::before{content:''; position:absolute; inset:0 auto 0 0; width:3px; border-radius:8px 0 0 8px; background:var(--line2)}
[data-state="live"]::before{background:var(--live)}
[data-state="mock"]::before{background:var(--draft)}
[data-state="spec"]::before{background:var(--spec)}
[data-state="blocked"]::before{background:var(--veto)}
[data-state="live"]{background:color-mix(in srgb,var(--live) 4%,var(--panel))}
[data-state="mock"]{background:color-mix(in srgb,var(--draft) 4%,var(--panel))}
[data-state="blocked"]{background:color-mix(in srgb,var(--veto) 5%,var(--panel))}

.legend{display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-family:var(--mono); font-size:11px; color:var(--faint)}
.legend b{font-weight:400; color:var(--dim)}
.legend i{display:inline-block; width:9px; height:3px; border-radius:2px; margin-right:5px; vertical-align:middle}
.legend .l-live{background:var(--live)} .legend .l-mock{background:var(--draft)}
.legend .l-spec{background:var(--spec)} .legend .l-blocked{background:var(--veto)}

/* ---- placeholder banner --------------------------------------------------------------- */
.banner{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--draft) 12%,transparent),transparent);
  font-family:var(--mono); font-size:12px; color:var(--dim);
}
.banner .wrap{display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding-top:11px; padding-bottom:11px}
.banner b{color:var(--draft); font-weight:600}

/* ---- header --------------------------------------------------------------------------- */
header.hero{padding:56px 0 40px; border-bottom:1px solid var(--line)}
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accentdim); margin:0 0 14px;
}
h1{font-size:clamp(34px,5.2vw,54px); line-height:1.05; letter-spacing:-.025em; margin:0 0 18px; color:var(--hi); font-weight:600}
.lede{font-family:var(--read-f); font-size:clamp(17px,2.1vw,21px); line-height:1.55; color:var(--read); max-width:62ch; margin:0}
.subnav{display:flex; gap:6px; flex-wrap:wrap; margin-top:30px}
.subnav a{
  font-family:var(--mono); font-size:12px; padding:7px 13px; border-radius:4px;
  border:1px solid var(--line2); color:var(--dim);
}
.subnav a:hover{color:var(--hi); border-color:var(--accentdim); text-decoration:none}
.subnav a[aria-current]{color:var(--ink); background:var(--accent); border-color:var(--accent)}

section{padding:52px 0; border-bottom:1px solid var(--line)}
h2{font-size:13px; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0 0 6px; font-weight:500}
h2 + .sec-lede{font-family:var(--read-f); font-size:19px; color:var(--read); margin:0 0 30px; max-width:60ch}

/* ---- panels --------------------------------------------------------------------------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:22px}
.panel-h{display:flex; justify-content:space-between; align-items:center; gap:14px; margin:-4px 0 16px}
.panel-h h3{margin:0; font-size:15px; color:var(--hi); font-weight:600}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px}

.layer{display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; transition:border-color .15s}
a.layer:hover{border-color:var(--accentdim); text-decoration:none}
.layer .n{font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.1em}
.layer h3{font-size:20px; margin:0; color:var(--hi); font-weight:600}
.layer p{margin:0; font-size:14px; color:var(--dim); line-height:1.6}
.layer .meta{margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:10px}
.layer .tech{font-family:var(--mono); font-size:11px; color:var(--accentdim)}

/* ---- stat rows ------------------------------------------------------------------------ */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.stat{background:var(--panel); padding:16px 18px}
.stat .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}
.stat .v{font-size:26px; color:var(--hi); font-weight:600; letter-spacing:-.02em; line-height:1.1}
.stat .v small{font-size:13px; color:var(--dim); font-weight:400}
.stat .v.up{color:var(--live)}

/* ---- build order ---------------------------------------------------------------------- */
.steps{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.step{display:grid; grid-template-columns:44px 1fr auto; gap:16px; align-items:center; background:var(--panel); padding:13px 18px}
.step .num{font-family:var(--mono); font-size:12px; color:var(--faint)}
.step .what{font-size:14px; color:var(--text)}
.step .what em{display:block; font-style:normal; font-size:12px; color:var(--faint); margin-top:2px}
.step.done{background:color-mix(in srgb,var(--live) 7%,var(--panel))}
.step.done .what{color:var(--hi)}
.step.next{background:color-mix(in srgb,var(--accent) 8%,var(--panel)); box-shadow:inset 3px 0 0 var(--accent)}

/* ---- code / mono ---------------------------------------------------------------------- */
code,kbd{font-family:var(--mono); font-size:.9em}
.path{font-family:var(--mono); font-size:11.5px; color:var(--accentdim)}
.note{font-size:13px; color:var(--faint); line-height:1.65; max-width:70ch}
.note strong{color:var(--dim)}

footer{padding:36px 0 60px; color:var(--faint); font-size:12.5px; font-family:var(--mono)}
footer a{color:var(--dim)}

/* Tile spans live in classes, not inline styles, so the mobile rule below can override them.
   With inline `style="grid-column:span 3"` the 2-column grid was ignored and the floor collapsed
   into three uneven implicit columns at 375px. */
.w2{grid-column:span 2} .w3{grid-column:span 3} .h2{grid-row:span 2}
@media (max-width:820px){
  .w2,.w3{grid-column:span 2} .h2{grid-row:auto}
}

@media (max-width:640px){
  header.hero{padding:36px 0 28px}
  section{padding:36px 0}
  .step{grid-template-columns:30px 1fr; row-gap:8px}
  .step .chip{grid-column:2}
}