/* ============================================================================
   COLL 100 lab pages — the "Instrument" design system, static-page edition.

   The six lab pages are plain HTML in public/, so they cannot import
   app/globals.css. This file MIRRORS it: the :root block below is byte-identical
   to the one in app/globals.css and `node scripts/check-tokens.mjs` (part of
   `npm test`) fails if the two ever drift. Add a colour here only by adding it
   there first.

   This file styles the PAGE (header, steps rail, prose, prompt boxes). The
   workbench, submit panel and stepper that portal.js injects live in
   portal.css — the dark instrument half of the same system.
   ========================================================================== */

/* TOKENS — keep byte-identical with app/globals.css :root (check-tokens) */
:root{--wrap:1800px;--gutter:clamp(20px,3vw,56px);--paper:#f3f5f2;--card:#ffffff;--ink:#0d1512;--ink-2:#3b463f;--ink-3:#606c64;--ink-4:#828d86;--rule:#d9ded9;--rule-2:#e3e7e2;--measure:42rem;--measure-note:33rem;--measure-wide:60rem;--panel:#0b1f18;--panel-2:#11291f;--panel-3:#08160f;--panel-rule:rgba(255,255,255,.09);--panel-field:rgba(255,255,255,.12);--on-panel:#e8f0ea;--on-panel-2:#b8c9be;--on-panel-3:#849a8e;--on-panel-body:#cfdcd3;--panel-dim:rgba(255,255,255,.1);--panel-hi:rgba(255,255,255,.08);--panel-tick:rgba(255,255,255,.2);--live:#3ddc84;--live-dim:rgba(61,220,132,.18);--live-hover:#5ee89b;--live-faint:rgba(61,220,132,.06);--amber:#f5b731;--amber-dim:rgba(245,183,49,.18);--amber-ink:#8a6510;--amber-line:#d9a22a;--green:#0f5132;--green-tint:#e6efe8;--green-line:#cfe0d4;--green-hover:#0b3d26;--green-glow:rgba(15,81,50,.45);--red:#b23b2c;--red-tint:#fbeeec;--red-line:#e6b4ac;--red-ink:#8f2418;--r-ctl:6px;--r-card:10px;--r-panel:12px;--sans:var(--font-plex-sans,"IBM Plex Sans"),"Helvetica Neue",Helvetica,Arial,sans-serif;--mono:var(--font-plex-mono,"IBM Plex Mono"),ui-monospace,SFMono-Regular,Menlo,monospace}

*{margin:0;padding:0;box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--green)}
a:hover{color:var(--green-hover)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.mono{font-family:var(--mono)}
code,kbd,.lit{font-family:var(--mono);font-size:.92em}
em{color:var(--ink)}

/* ---- the site header, identical to every Next page --------------------- */
/* The padding expression is copied from app/globals.css, not simplified. With
   a flat var(--gutter) the static lab pages put the wordmark at 64px while
   every Next page put it at 141px on a 2560 screen, so the chrome jumped
   sideways the moment a student opened a lab. scripts/check-chrome.mjs pins
   the two rules together. */
header.site{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px;padding:0 max(var(--gutter),calc((100% - var(--wrap))/2 + var(--gutter)));border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--card);z-index:10}
.wordmark{font-family:var(--mono);font-weight:600;font-size:16px;text-decoration:none;color:var(--ink);white-space:nowrap}
.wordmark .d{color:var(--green)}
.wordmark .sub{color:var(--ink-3);font-weight:400}
nav.site{display:flex;gap:28px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
nav.site a{color:var(--ink-2);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
nav.site a:hover{color:var(--ink)}
nav.site a.on{color:var(--ink);border-bottom-color:var(--green)}
.hdr-acct{display:inline-flex;align-items:center;gap:12px;min-width:116px;justify-content:flex-end}
.hdr-acct .who{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit;font-size:14px;font-weight:500}
.hdr-acct .out{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-decoration:none}
.hdr-acct .btn{height:38px}
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex:0 0 auto;font-weight:600;object-fit:cover;border:1px solid rgba(0,0,0,.08);width:28px;height:28px;font-size:11px;background:var(--green-tint);color:var(--green)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-ctl);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
.btn.ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.ink:hover{background:#000}
.btn.ghost{border-color:var(--ink);color:var(--ink);background:var(--card)}
.btn.ghost:hover{background:var(--paper)}
.hdr-acct .out:hover{color:var(--ink)}

/* the lab strip under the header: where am I, and the way back. Plain HTML on
   purpose — a student part-way through a long lab must have a way out even if
   portal.js never loads. */
.labbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--gutter);background:var(--card);border-bottom:1px solid var(--rule);flex-wrap:wrap}
.labbar .lhs{display:flex;align-items:center;gap:16px;min-width:0;flex-wrap:wrap}
.backlink{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green);text-decoration:none;white-space:nowrap}
.backlink:hover{text-decoration:underline}
.labttl,.labdue{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.labttl{color:var(--ink)}
.labdue{color:var(--ink-3)}

/* ---- page layout -------------------------------------------------------- */
.wrap{display:grid;grid-template-columns:250px minmax(0,1fr);max-width:none;margin:0 auto}
aside{border-right:1px solid var(--rule);padding:28px 22px;position:sticky;top:64px;height:calc(100vh - 64px);overflow:auto}
.labchip{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.labname{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:6px 0 18px}
.steps{list-style:none}
.steps a{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--r-ctl);font-size:14px;color:var(--ink-2);text-decoration:none}
.steps a:hover{background:var(--green-tint);color:var(--green)}
.steps .m{font-family:var(--mono);font-size:11px;width:20px;height:20px;border-radius:var(--r-ctl);border:1px solid var(--rule);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3)}
main{padding:32px var(--gutter) 80px;max-width:none}

/* ---- prose -------------------------------------------------------------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
h1{font-size:clamp(32px,3.4vw,44px);font-weight:300;letter-spacing:-.025em;line-height:1.06;margin:10px 0 16px}
h1 b{font-weight:600}
h2{font-size:26px;font-weight:600;letter-spacing:-.015em;margin:52px 0 12px;padding-top:22px;border-top:1px solid var(--rule)}
h2 .n{color:var(--green);font-family:var(--mono);font-weight:500;font-size:19px;margin-right:10px}
p{margin:0 0 14px;color:var(--ink-2)}
ol,ul{margin:0 0 14px 22px;color:var(--ink-2)}
li{margin-bottom:8px}
main>p,main>ol,main>ul,.check,.callout,.ps,.rubric,.warn,.duo{max-width:var(--measure)}

/* ---- prompt boxes (portal.js turns each into a live run block) ---------- */
.promptbox{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-card);margin:18px 0;overflow:hidden;max-width:var(--measure)}
.promptbox .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.promptbox button{background:var(--ink);color:#fff;border:none;border-radius:var(--r-ctl);padding:5px 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.promptbox pre{padding:14px;font-family:var(--mono);font-size:13.5px;line-height:1.65;white-space:pre-wrap}

/* ---- the callouts a lab page uses -------------------------------------- */
.check{border:1px solid var(--green-line);background:var(--green-tint);border-radius:var(--r-card);padding:14px 16px;margin:18px 0;display:flex;gap:12px}
.check .tick{color:#fff;background:var(--green);min-width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto}
.check b{display:block;font-size:15px}
.check span{font-size:13.5px;color:var(--ink-2)}
.callout{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--green);border-radius:0 var(--r-card) var(--r-card) 0;padding:13px 16px;margin:18px 0;font-size:14.5px;color:var(--ink-2)}
.callout .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);display:block;margin-bottom:4px}
.warn{background:var(--card);border:1px solid var(--amber-line);border-left:3px solid var(--amber);border-radius:0 var(--r-card) var(--r-card) 0;padding:13px 16px;margin:18px 0;font-size:14.5px;color:var(--ink-2)}
.warn .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-ink);display:block;margin-bottom:4px}
.ps{border:1px solid var(--rule);border-left:3px solid var(--green);border-radius:0 var(--r-card) var(--r-card) 0;background:var(--card);padding:14px 18px;margin:14px 0 20px;display:grid;gap:8px}
.ps-r{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:baseline}
.ps-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.ps-r span:last-child{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.ps-r:nth-child(3) .ps-k{color:var(--amber-ink)}
.rubric{border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);padding:16px 18px;font-size:14.5px;color:var(--ink-2)}
.rubric .eyebrow{color:var(--green)}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green);border:1px solid var(--green-line);background:var(--green-tint);border-radius:var(--r-ctl);padding:4px 10px;white-space:nowrap}
.dl{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-ctl);text-decoration:none;margin:6px 8px 10px 0}
.dl .a{color:var(--live)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.duo .cell{border:1px solid var(--rule);border-radius:var(--r-card);background:var(--card);padding:13px 15px;font-size:14px;color:var(--ink-2)}
.duo .cell .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);display:block;margin-bottom:5px}

/* Same rule as footer.site in app/globals.css, same padding expression. The
   lab pages keep their own TEXT — "LAB 1 OF 6" is worth saying — but the
   component must not move under the reader. */
footer.site{border-top:1px solid var(--rule);padding:22px max(var(--gutter),calc((100% - var(--wrap))/2 + var(--gutter)));font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px}

/* ---- responsive --------------------------------------------------------- */
@media(max-width:900px){
  :root{--gutter:32px}
  .wrap{grid-template-columns:1fr}
  aside{position:static;height:auto;overflow:visible;border-right:none;border-bottom:1px solid var(--rule);padding:20px 32px}
  .duo{grid-template-columns:1fr}
}
@media(max-width:640px){
  :root{--gutter:20px}
  body{font-size:16px}
  header.site{height:auto;flex-wrap:wrap;gap:10px 14px;padding-top:12px;padding-bottom:12px}
  nav.site{order:3;width:100%;gap:18px;flex-wrap:wrap}
  .labbar .labdue{display:none}
  .ps-r{grid-template-columns:1fr;gap:2px}
  h2{margin-top:40px}
}
/* Same rule as the app: the shell fills the screen, the prose keeps its
   measure (main>p and friends share --measure above). */
/* Every :root and every body/nav step below is copied from app/globals.css.
   These blocks are why the chrome jumped: lab.css set --gutter at each
   breakpoint but never --wrap, so above 1900px the lab pages still measured
   against 1800 while the app measured against min(2600px,94vw). At 2560 that
   put the wordmark at 444px here and 141px there. check-tokens.mjs now
   compares EVERY :root block per media context, not just the first. */
@media(min-width:1600px){
  body{font-size:17px}
  nav.site{font-size:12.5px}
  .wrap{grid-template-columns:290px minmax(0,1fr)}
  h1{font-size:clamp(32px,3.2vw,52px)}
}
@media(min-width:1900px){
  :root{--wrap:min(2600px,94vw);--gutter:64px}
  .wrap{grid-template-columns:320px minmax(0,1fr)}
}
@media(min-width:2400px){
  body{font-size:17.5px}
  nav.site{font-size:13px}
}
@media(min-width:2800px){
  :root{--wrap:min(3400px,92vw);--gutter:76px}
  body{font-size:18px}
  .wrap{grid-template-columns:360px minmax(0,1fr)}
}