/* ============================================================================
   COLL 100 lab portal — the INSTRUMENT half of the design system.

   lab.css styles the page you read; this file styles everything portal.js
   injects — the workbench, the run blocks, the submit panel and the stepper.
   The rule: anything a student OPERATES is a dark instrument panel with mono
   readouts. Tokens come from lab.css (loaded first); never add a literal here.
   ========================================================================== */

/* Everything this file paints sits on --panel, where the paper focus ring
   (--green, 1.83:1) is invisible. --live is 9.62:1 on the same ground. */
.lp :focus-visible,.promptbox :focus-visible,.st-bar :focus-visible,.st-ws :focus-visible{outline:2px solid var(--live);outline-offset:2px}

/* ---- the submit panel (also the shell of the workbench) ----------------- */
.lp{background:var(--panel);color:var(--on-panel);border-radius:var(--r-panel);margin:36px 0 10px;overflow:hidden;max-width:none}
.lp a{color:var(--live)}
.lp-h{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--panel-rule)}
.lp-h .t{font-size:17px;font-weight:600}
.lp-h .s{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-panel-2);margin-top:3px}
.lp-pct{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;font-weight:500;color:var(--live);white-space:nowrap}
.lp-bar{height:4px;background:var(--panel-field);position:relative}
.lp-bar i{position:absolute;inset:0 auto 0 0;background:var(--live);transition:width .35s ease;display:block}
.lp-b{padding:18px 22px 22px}
/* the panel spans the shell; its PROSE does not. */
.lp-note,.lp-c .hint,.lp-msg,.lp-advice p,.lp-shut{max-width:var(--measure)}
.lp-b>.lp-c,.lp-b>.lp-go{max-width:var(--measure-wide)}
.lp-note{background:var(--panel-2);border-radius:var(--r-ctl);padding:12px 15px;font-size:13.5px;line-height:1.6;margin-bottom:16px;color:var(--on-panel-body)}
.lp-note b{color:var(--on-panel)}

/* one field card per check */
.lp-c{border:1px solid var(--panel-field);border-radius:var(--r-ctl);padding:12px 14px;margin-bottom:12px;transition:border-color .25s ease,background .25s ease}
.lp-c.ok{border-color:var(--live);background:var(--live-faint)}
.lp-c .lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.lp-c .nm{font-size:14.5px;font-weight:500;color:var(--on-panel)}
.lp-c .st{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-panel-2);white-space:nowrap}
.lp-c.ok .st{color:var(--live)}
.lp-c.ok .st{animation:st-pop .3s ease 1}
@keyframes st-pop{50%{transform:scale(1.2)}}
.lp-c .hint{font-size:13px;color:var(--on-panel-2);margin-bottom:9px;line-height:1.5}
.lp-c textarea{width:100%;min-height:82px;border:1px solid var(--panel-field);border-radius:var(--r-ctl);padding:11px 13px;font-family:var(--mono);font-size:13px;line-height:1.65;resize:vertical;color:var(--on-panel);background:var(--panel-3)}
.lp-c textarea:focus{outline:none;border-color:var(--live)}
.lp-c textarea::placeholder{color:var(--on-panel-3)}

.lp-f{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--panel-rule)}
.lp-btn{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:0 20px;height:40px;border-radius:var(--r-ctl);border:none;cursor:pointer;background:var(--live);color:var(--panel)}
.lp-btn:hover{background:var(--live-hover)}
.lp-btn[disabled]{background:var(--panel-dim);color:var(--on-panel-3);cursor:not-allowed}
.lp-btn.done{background:var(--green);color:var(--card)}
.lp-msg{font-size:13.5px;color:var(--on-panel-2)}
.lp-msg b{color:var(--on-panel)}

/* locked, and the staff bar — these read on paper, not on the instrument */
.lp-lock{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--ink-4);border-radius:0 var(--r-card) var(--r-card) 0;padding:22px 24px;margin:36px 0 10px;max-width:var(--measure)}
.lp-lock .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.lp-lock h3{font-size:20px;font-weight:600;margin-bottom:7px}
.lp-lock p{font-size:15px;color:var(--ink-2);margin:0}
.lp-staffbar{background:var(--card);color:var(--ink-2);border:1px solid var(--rule);border-radius:var(--r-card);padding:11px 15px;margin:20px 0 0;font-size:13.5px;line-height:1.5;max-width:var(--measure)}
/* same two states as .staffbar in the app: staff, and staff pretending */
.lp-staffbar.as-student{background:var(--amber-dim);border-color:var(--amber-line);color:var(--amber-ink)}


/* ---- live run blocks (portal.js rebuilds every .promptbox into one) ----- */
.promptbox{background:var(--panel);color:var(--on-panel);border-color:var(--panel);color-scheme:dark}
/* dark is what you OPERATE. A [data-fixture] block is there to be READ — it
   gets no picker and no RUN — so it must not wear the instrument costume.
   The caption having to say "READ IT, DO NOT RUN IT" was the form failing. */
.promptbox[data-fixture]{background:var(--card);color:var(--ink);border:1px solid var(--rule);color-scheme:light}
.promptbox[data-fixture] .bar{color:var(--ink-3);border-bottom-color:var(--rule)}
.promptbox[data-fixture] pre{color:var(--ink-2)}
.promptbox .bar{border-bottom-color:var(--panel-rule);color:var(--on-panel);font-weight:600}
.pb-right{display:flex;align-items:center;gap:8px}
.pb-pick{display:inline-flex;align-items:center;gap:7px;padding:0 9px 0 10px;border-radius:var(--r-ctl);border:1px solid var(--panel-field);background:var(--panel-3);position:relative}
.pb-mark{display:inline-flex;align-items:center;color:var(--live);flex:0 0 auto}
.pb-pick::after{content:"\25BE";font-size:9px;color:var(--on-panel-2);pointer-events:none;margin-left:-4px}
.pb-pick:focus-within{border-color:var(--live)}
.pb-model{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;padding:6px 16px 6px 0;border:0;background:transparent;color:var(--on-panel);-webkit-appearance:none;appearance:none;cursor:pointer;outline:none}
.pb-model option{background:var(--panel-2);color:var(--on-panel)}
.promptbox .pb-run{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 16px;border-radius:var(--r-ctl);border:0;background:var(--live);color:var(--panel);cursor:pointer}
.promptbox .pb-run:hover{background:var(--live-hover)}
.promptbox .pb-run:disabled{background:var(--panel-dim);color:var(--on-panel-3);cursor:not-allowed}
.pb-prompt{width:100%;box-sizing:border-box;min-height:74px;overflow-y:hidden;padding:12px 14px;border:0;border-top:1px solid var(--panel-rule);font-family:var(--mono);font-size:13px;line-height:1.65;resize:vertical;background:var(--panel-3);color:var(--on-panel)}
.pb-prompt:focus{outline:2px solid var(--live);outline-offset:-2px}
.pb-out{border-top:1px solid var(--panel-rule);padding:12px 14px}
.pb-outh{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--live);margin-bottom:7px}
.pb-out pre{white-space:pre-wrap;word-break:break-word;margin:0;font-size:13.5px;line-height:1.62;max-height:400px;overflow:auto;color:var(--on-panel);font-family:var(--sans)}
.promptbox .pb-add{margin-top:10px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-ctl);border:1px solid var(--live);background:transparent;color:var(--live);cursor:pointer}
.promptbox .pb-add:hover{background:var(--live);color:var(--panel)}
.pb-msg{padding:0 14px 11px;font-size:13px;color:var(--on-panel-body)}
.pb-msg:empty{display:none}
.pb-msg b{color:var(--on-panel)}
.pb-msg a{color:var(--live)}
.pb-addrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.pb-destlbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-panel-2)}
.pb-dest{font-family:var(--mono);font-size:12px;padding:5px 8px;border-radius:var(--r-ctl);border:1px solid var(--panel-field);background:var(--panel-3);color:var(--on-panel);max-width:280px}

/* ---- make it yours (creativity, never gated) --------------------------- */
.lp-go{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:16px 18px;margin:20px 0}
.lp-go-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-ink);font-weight:600}
.lp-go-t{font-size:17px;font-weight:600;margin:8px 0 6px;color:var(--ink)}
.lp-go-d{font-size:15px;color:var(--ink-2);margin-bottom:6px}
.lp-go-s{font-size:13.5px;font-style:italic;color:var(--ink-3);margin-bottom:10px}
.lp-go textarea{width:100%;min-height:104px;padding:11px 13px;border:1px solid var(--rule);border-radius:var(--r-ctl);font:inherit;font-size:14.5px;line-height:1.55;resize:vertical;background:var(--card);color:var(--ink)}
.lp-go textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-dim)}

/* ---- lab-to-lab navigation --------------------------------------------- */
.lp-nav{display:flex;justify-content:space-between;gap:16px;margin:26px 0 44px;padding:16px 0 0;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.lp-nav a{color:var(--green);text-decoration:none;font-weight:600}
.lp-nav a:hover{text-decoration:underline}

/* ---- the stepper: one exercise per screen ------------------------------ */
.st-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel);color:var(--on-panel);border-radius:var(--r-panel);padding:12px 18px;margin:6px 0 22px;position:sticky;top:76px;z-index:5}
.st-t{font-weight:600;font-size:15px}
.st-dots{display:flex;gap:5px;margin-left:auto}
.st-dots i{width:9px;height:9px;border-radius:50%;background:var(--panel-tick);transition:background .3s ease}
.st-dots i.done{background:var(--live)}
.st-dots i.on{background:var(--amber);outline:2px solid var(--amber-dim);outline-offset:2px}
.st-mode{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-ctl);border:1px solid var(--panel-field);background:transparent;color:var(--on-panel);cursor:pointer}
.st-mode:hover{background:var(--panel-hi)}
.st-verdict{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-panel-2)}
.st-verdict.ok{color:var(--live)}
.st-foot{display:flex;justify-content:space-between;gap:14px;margin:26px 0 8px}
.st-b{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:0 20px;height:44px;border-radius:var(--r-ctl);border:0;cursor:pointer}
/* main has no max-width, so on a non-split step the DONE/NEXT row and the
   lab-to-lab nav ran to the shell edge while the prose stopped at --measure,
   leaving the primary button 359px right of the text it belongs to. On a
   split step the column is narrower than the cap, so this never bites there.
   .st-bar is deliberately NOT included: it spans both columns by design. */
.st-foot,.lp-nav{max-width:var(--measure)}
.st-back{background:var(--card);color:var(--ink);border:1px solid var(--rule)}
.st-back:hover{background:var(--paper);border-color:var(--ink)}
.st-next{background:var(--ink);color:var(--card)}
.st-next:hover{background:#000}
.st-next.ready{background:var(--green);animation:st-ready .6s ease 1}
@keyframes st-ready{0%{box-shadow:0 0 0 0 var(--green-glow)}100%{box-shadow:0 0 0 12px transparent}}
.st-skip{background:var(--amber-ink)}
.st-turn>*:not(.st-ws):not(.st-bar){animation:st-slide .28s ease 1}
@keyframes st-slide{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.st-turn>*,.st-next.ready,.lp-c.ok .st{animation:none}}
@media(max-width:640px){.st-bar{position:static}.st-dots{width:100%;order:3}}

/* the problem-solving split: requirement left, instrument right */
.st-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:36px}
.st-split>*{grid-column:1;min-width:0}
.st-split>.st-bar{grid-column:1/-1}
.st-split>.st-ws{grid-column:2;grid-row:2/span 99;align-self:start;position:sticky;top:90px;max-height:calc(100vh - 104px);overflow:auto}
.st-ws{background:var(--panel);color:var(--on-panel);border-radius:var(--r-panel);padding:16px 18px 12px}
.st-ws-h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--live)}
.st-ws-s{font-size:13px;color:var(--on-panel-2);margin:6px 0 12px;line-height:1.5}
.st-ws .lp-c{margin:0 0 12px}
.st-ws .lp-c textarea{min-height:132px;font-size:12.5px;line-height:1.65;max-height:46vh}
.st-ws .lp-go{margin:14px 0 8px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--panel-field);border-left:3px solid var(--amber)}
.st-ws .lp-go-k{color:var(--amber)}
.st-ws .lp-go-t{color:var(--on-panel)}
.st-ws .lp-go-d{color:var(--on-panel-body)}
.st-ws .lp-go-s{color:var(--on-panel-2)}
.st-ws .lp-go textarea{background:var(--panel-3);border-color:var(--panel-field);color:var(--on-panel)}
.st-ws .lp-go-t{font-size:15px}
.st-ws .lp-go-d,.st-ws .lp-go-s{font-size:12.5px}
.st-ws .lp-go textarea{min-height:70px;font-size:13px}
.st-split .lp-nav{max-width:none;margin:26px 0 44px}
@media(max-width:1180px){
  .st-split{display:flex;flex-direction:column}
  .st-split>.st-ws{position:static;max-height:none;order:97}
  .st-split>.st-foot{order:98}
  .st-split>.lp-nav{order:99}
}

/* the drawer holding not-this-step fields */
.st-more{margin-top:14px;border-top:1px dashed var(--panel-field);padding-top:10px}
.st-more summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-panel-2)}
.st-more[open] summary{margin-bottom:10px}
.st-now:empty{display:none}

/* ---- closed labs and the advisor ---------------------------------------
   Both speak to a student who cannot submit right now, so both read as notices
   on the panel rather than as more instrument chrome. */
.lp-shut{background:var(--panel-2);border-left:3px solid var(--on-panel-3);border-radius:0 var(--r-ctl) var(--r-ctl) 0;padding:12px 15px;font-size:13.5px;line-height:1.6;margin-bottom:16px;color:var(--on-panel-body)}
.lp-shut b{color:var(--on-panel)}
.lp-advice{background:var(--panel-2);border-left:3px solid var(--live);border-radius:0 var(--r-ctl) var(--r-ctl) 0;padding:13px 16px;margin:0 0 14px}
.lp-advice-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--live);margin-bottom:8px}
.lp-advice p{font-size:13.5px;line-height:1.6;color:var(--on-panel-body);margin:0 0 8px}
.lp-advice p:last-child{margin-bottom:0}
.lp-advice b{color:var(--on-panel)}