/* Utilitarian (2026-10): instrument panel. Dark ground, amber accent,
   monospaced readouts, condensed caps labels, function-key buttons. Dark
   only: no light block, so the theme switch is not offered. */
:root{
  color-scheme:dark;
  --bg:#111311; --ink:#D9DDD3; --ink2:#8A9186; --mute:#5E655B;
  --rule:#3A403A; --rule-soft:#2C312C;
  --surface:#161916; --surface2:#1A1E1A;
  --accent:#FFB000; --on-accent:#111311;
  --btn:#FFB000; --on-btn:#111311;
  --press:#2A2310; --on-press:#FFB000;
  --ok:#7FBF6A; --bad:#FF6B4A; --warn:#FFB000;
  --ok-bg:#141C12; --bad-bg:#1F1411;
  --high:#FF6B4A; --info:#8A9186;
  --ctx-bg:transparent; --ctx-ink:#D9DDD3; --ctx-label:#8A9186; --ctx-edge:#2C312C;
  --ctx-target-bg:transparent; --ctx-target-ink:#FFB000;
  --f-body:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --f-label:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-disp:"Barlow Condensed","Arial Narrow",sans-serif;
  --label-size:11px; --label-case:uppercase; --label-track:.14em; --label-weight:500;
  --gap:12px;
}
body{font-size:15px}
h1,h2,h3,.subject b{font-weight:600;letter-spacing:.04em;text-transform:uppercase}
h1{font-size:40px;line-height:.95}
h1.page{font-size:38px}
.back{font:600 13px var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);
  border-bottom:1px solid var(--rule-soft);align-self:stretch;padding-bottom:8px}
input[type=text],input:not([type]),select,textarea{background:transparent;border-color:var(--rule)}
input:focus,select:focus,textarea:focus{outline:1px solid var(--accent);outline-offset:-1px}
/* function-key buttons: separate keys, amber when on */
.seg{border:0;gap:6px;overflow:visible}
.seg button{border:1px solid var(--rule)!important;font:600 15px var(--f-label);letter-spacing:.06em;text-transform:uppercase}
.seg button[aria-pressed="true"]{border-color:var(--accent)!important;background:var(--press);color:var(--accent)}
.seg.effort button,.seg.sev button{font-size:13px}
.seg.effort{gap:3px;flex:1 0 100%}
.seg.effort button{padding:0 6px;letter-spacing:.03em}
.setopts .tag{letter-spacing:.03em}
.tag{font:600 13px var(--f-label);letter-spacing:.08em;text-transform:uppercase;border-color:var(--rule)}
.tag[aria-pressed="true"]{border-color:var(--accent);background:var(--press);color:var(--accent)}
.tag.trash{color:var(--bad)}
.act{font:600 16px var(--f-label);letter-spacing:.1em;text-transform:uppercase}
.act.ghost{border-color:var(--rule);color:var(--ink)}
.act.primary{font-size:20px;letter-spacing:.08em}
.act.primary::after{content:" ▶"}
.qnav button{font:600 14px var(--f-label);letter-spacing:.1em;text-transform:uppercase}
.accept{font:600 15px var(--f-label);letter-spacing:.08em;text-transform:uppercase}
/* exercise as a boxed panel with a header strip */
.ex{border:1px solid var(--rule);padding:0 10px 8px;gap:8px}
.ex>details{margin:0 -10px;padding:6px 10px;border-top:1px solid var(--rule-soft)}
.ex-head{background:var(--surface2);border-bottom:1px solid var(--rule);padding:4px 10px;margin:0 -10px}
.ex.folded{padding-bottom:0}
.ex.folded .ex-head{border-bottom:0;background:transparent}
.ex-head h2{font-size:20px}
.title::first-letter{color:var(--accent)}
.sets{gap:0;margin:0 -10px}
.sets>.demo{margin:8px 10px 0}
.set{padding:8px 10px;border-bottom:1px solid var(--rule-soft)}
.set:first-child{border-top:1px solid var(--rule-soft)}
.set.warm{background:transparent}
.set input.num{border:0;border-bottom:2px solid var(--rule);background:transparent;font-size:22px}
.set input.num:not(:placeholder-shown){border-bottom-color:var(--accent)}
.step{border-color:var(--rule);color:var(--ink2)}
.settag{color:var(--ink2)}
.ctx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ctx .cl{display:flex;flex-direction:column;gap:2px;padding:8px 10px}
.ctx .cl+.cl{border-top:0;border-left:1px solid var(--ctx-edge)}
.ctx .cues{grid-column:1/-1;border-left:0!important;border-top:1px solid var(--ctx-edge)}
.ctx dt{font-family:var(--f-label);font-weight:500;letter-spacing:.14em}
.ctx dd{font-size:12px}
.status,.card{border:1px solid var(--rule);border-left:3px solid var(--info)}
.status.ok{border-left-color:var(--ok)}
.status.bad,.card.high{border-left-color:var(--bad)}
.card.info{border-left-color:var(--accent)}
.chip{border-color:var(--rule)}
.chip b{font:600 15px var(--f-label);letter-spacing:.06em;text-transform:uppercase}
.tile{border-color:var(--rule);gap:10px}
.tile .n{display:block;grid-area:n;font:12px var(--f-mono);color:var(--accent)}
.tile{grid-template-columns:28px 32px 1fr auto;grid-template-areas:"n img body go"}
.tile h2{font-size:19px}
.tile.lead{border-color:var(--accent)}
.tile .go{color:var(--accent)}
.stat{border-color:var(--rule)}
.stat b{color:var(--accent)}
.stat.flagged{border-color:var(--bad)}
.stat.flagged b{color:var(--bad)}
.recog,.results,.order-row,.qcard{border-color:var(--rule)}
.handle{color:var(--accent)}
.picker input{border-style:dashed}
.picker input::placeholder{color:var(--mute)}
.bar{background:var(--rule-soft)}
pre.out{border:1px solid var(--rule-soft)}
mark{background:var(--accent);color:var(--bg)}
.demo{color:#5E655B;border-top-color:#3A403A}