/* ==========================================================================================
   DØi PREFLIGHT theme (t208) — a PREFLIGHT module of the DØi COMMAND application.
   Authoritative source: doi-labs/doi-command @ 996825d (main, Oct 9 2026), read-only via GitHub:
     src/app/globals.css (tokens, Eurostar + IBM Plex Mono, black grid body, h1-h3, focus ring)
     components/ui/{EngineeringPanel (orange corner brackets), Badge, KpiStat, State}
     components/layout/{TopBar, CommandNav (rail links, active bar, icons), SectionHeader, AppShell}
     components/missions/mission.module.css (.filter inputs, .clear buttons, menuItemActive, .step track)
     components/dashboard/table.module.css, components/command/ExecutiveOverview.module.css (actions, pipeline)
   Values marked "= X" are copied from those files; "PF" marks PREFLIGHT-only field additions.
   Visual layer only: every class name used by js/*.js is unchanged. Fonts: see fonts.css (t208 block).
   ========================================================================================== */

[hidden]{display:none!important}   /* t29: author display rules (e.g. .bottomnav{display:grid}) must not override the hidden attribute */

:root{
  /* --- COMMAND tokens (verbatim from globals.css @ 996825d) --- */
  --color-bg-deep:#000000; --color-bg:#000000; --color-bg-elevated:#0a0a0b; --color-surface:#0f1012; --color-surface-2:#15171a; --color-charcoal:#1c1f24;
  --color-border:#2c3038; --color-border-strong:#454b55;
  --color-text:#ffffff; --color-metallic:#d7dbe2; --color-text-muted:#9aa1ab; --color-text-subtle:#6a717c;
  --color-accent:#f06000; --color-accent-bright:#ff7a1a; --color-accent-soft:rgba(240,96,0,.14);
  --color-nav-icon:#f06000; --color-nav-icon-hover:#ff7a1a; --color-nav-icon-active:#ff8a2a;
  --color-ok:#3dcf6e; --color-watch:#e0a800; --color-urgent:#f06000; --color-blocking:#e53935; --color-info:#6b879e;
  --font-eurostar:"Eurostar","Segoe UI",sans-serif; --font-eurostar-black:"Eurostar Black","Eurostar","Segoe UI",sans-serif;
  --font-display:var(--font-eurostar-black); --font-body:var(--font-eurostar); --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --text-xs:.75rem; --text-sm:.88rem; --text-md:1.02rem; --text-lg:1.2rem; --text-xl:1.6rem; --text-2xl:clamp(1.7rem,3vw,2.15rem);
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem;
  --radius-sm:0; --radius-md:0; --shell-max:1240px;
  /* --- COMMAND tone recipes (Badge.module.css) --- */
  --tone-ok-bg:rgba(61,155,106,.12);    --tone-ok-line:rgba(61,155,106,.35);
  --tone-watch-bg:rgba(201,162,39,.12); --tone-watch-line:rgba(201,162,39,.35);
  --tone-accent-line:rgba(196,92,38,.45);
  --tone-block-text:#f0b4b4; --tone-block-bg:rgba(179,59,59,.16); --tone-block-line:rgba(179,59,59,.45);
  --panel-bg:linear-gradient(180deg,rgba(15,16,18,.98),rgba(0,0,0,.96));   /* = EngineeringPanel */
  --tile-bg:linear-gradient(180deg,#101114 0%,#08090b 100%);                /* = KpiStat */
  --row-line:rgba(42,46,54,.75);                                            /* = ExecutiveOverview list rules */
  --bracket:.7rem;                                                          /* = EngineeringPanel corner size */
  --focus-ring:2px solid var(--color-accent);
  /* --- PF: control heights. COMMAND rail link = 2.15rem; phones keep a 48px glove-friendly target (scripts/ui_flows.py >=44px) --- */
  --ctl-h:2.25rem; --tap:var(--ctl-h);
  --nav-height:3.25rem; --topbar-h:var(--nav-height); --bottomnav-h:3.75rem;
  /* --- PF legacy aliases (referenced from inline styles in js/app.js) --- */
  --bg:var(--color-bg); --panel:var(--color-surface); --panel2:var(--color-charcoal); --line:var(--color-border);
  --text:var(--color-text); --muted:var(--color-text-muted); --or:var(--color-accent); --or2:var(--color-accent-bright);
  --red:#ff8a80; --grn:var(--color-ok); --blue:var(--color-info); --mono:var(--font-mono);
  color-scheme:dark;
}
@media (pointer:coarse),(max-width:760px){:root{--ctl-h:48px;--nav-height:3rem;--bottomnav-h:calc(52px + .5rem)}}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;min-height:100%;background-color:#000;overflow-x:hidden;overflow-x:clip}   /* t209: clip (not hidden) so html/body never become scroll containers — hidden broke the sticky validation banner + top bar (since t200) */
/* = globals.css body: black + 42px hairline grid + faint orange glow */
body{
  font-family:var(--font-body);font-size:var(--text-md);font-weight:400;color:var(--color-text);line-height:1.45;-webkit-font-smoothing:antialiased;
  background:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px),
             radial-gradient(900px 420px at 8% -10%,rgba(240,96,0,.08),transparent 55%),#000;
  background-size:42px 42px,42px 42px,auto,auto;background-attachment:fixed;
  padding-bottom:calc(var(--bottomnav-h) + 16px + env(safe-area-inset-bottom));min-height:100vh;
}
/* = globals.css h1-h3: Eurostar Black 900, .06em, upper-case. .keepcase = PF brand rule for headings that can carry "DØi" (check titles, owners). */
h1,h2,h3{font-family:var(--font-display);font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin:0 0 var(--space-3);line-height:1.2;color:var(--color-text)}
h1{font-size:var(--text-lg)}                                      /* = SectionHeader .title */
h2{font-size:var(--text-md);letter-spacing:.12em}                 /* = EngineeringPanel .title */
h3{font-size:var(--text-sm);letter-spacing:.12em;color:var(--color-metallic)}
h1.keepcase,h2.keepcase,h3.keepcase{text-transform:none;letter-spacing:.04em}
p{margin:0 0 var(--space-2);line-height:1.55} b,strong{font-weight:700}
a{color:inherit}
code,.mono{font-family:var(--font-mono);font-size:.86em}
:focus-visible{outline:var(--focus-ring);outline-offset:2px}

/* ---------- validation / safety strips (kept, compacted so more checks fit) ---------- */
.valbar{position:sticky;top:0;z-index:25;background:var(--color-accent);color:#000;font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.08em;line-height:1.3;padding:calc(3px + env(safe-area-inset-top)) var(--space-3) 3px;text-align:center}
.valbar b{display:block;font-weight:600}.valbar span{display:block;opacity:.8;font-weight:500}
.banner{position:sticky;top:calc(var(--valh,0px) + var(--topbar-h));z-index:19;background:#000;color:var(--color-metallic);font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.06em;line-height:1.35;
  padding:.3rem max(var(--space-4),calc((100% - var(--shell-max)) / 2));border-bottom:1px solid var(--color-border);box-shadow:inset 2px 0 0 var(--color-accent)}
.demobar,.devbar{color:var(--color-accent);border-bottom:1px solid var(--tone-accent-line);font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.2rem var(--space-3);text-align:center;line-height:1.3}
.demobar{background:var(--color-accent-soft)}
.devbar{background:repeating-linear-gradient(45deg,rgba(240,96,0,.12),rgba(240,96,0,.12) 8px,#000 8px,#000 16px)}

/* ---------- top bar = COMMAND TopBar (#000, 1px rule) + DØi mark | [PREFLIGHT] module lockup ---------- */
#topbar{display:flex;align-items:center;gap:var(--space-3);height:var(--topbar-h);min-width:0;padding:0 max(var(--space-4),calc((100% - var(--shell-max)) / 2));
  background:#000;border-bottom:1px solid var(--color-border);position:sticky;top:var(--valh,0px);z-index:20;isolation:isolate}
body.noval{--topbar-h:calc(var(--nav-height) + env(safe-area-inset-top))}
body.noval #topbar{padding-top:env(safe-area-inset-top)}
.brand{display:inline-flex;align-items:center;gap:.6rem;min-width:0;flex-shrink:0;text-decoration:none;color:var(--color-text)}
.brand picture{display:block;line-height:0}
.brandlogo{height:26px;width:auto;display:block}
/* Module label = the bracketed COMMAND label in doi-command-logo.jpg / doi-labs-wordmark.svg: thin divider, four orange corner brackets, metallic Eurostar caps */
.brand b{position:relative;font-family:var(--font-display);font-weight:900;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-metallic);line-height:1;
  padding:.38rem .5rem .38rem .62rem;margin-left:.6rem;
  background:
    linear-gradient(var(--color-accent),var(--color-accent)) left top/.45rem 2px,linear-gradient(var(--color-accent),var(--color-accent)) left top/2px .45rem,
    linear-gradient(var(--color-accent),var(--color-accent)) right top/.45rem 2px,linear-gradient(var(--color-accent),var(--color-accent)) right top/2px .45rem,
    linear-gradient(var(--color-accent),var(--color-accent)) left bottom/.45rem 2px,linear-gradient(var(--color-accent),var(--color-accent)) left bottom/2px .45rem,
    linear-gradient(var(--color-accent),var(--color-accent)) right bottom/.45rem 2px,linear-gradient(var(--color-accent),var(--color-accent)) right bottom/2px .45rem;
  background-repeat:no-repeat}
.brand b::before{content:"";position:absolute;left:-.62rem;top:-.35rem;bottom:-.35rem;width:1px;background:var(--color-border-strong)}   /* lockup divider */
.brandlogo,.loginbrand img{mix-blend-mode:lighten}   /* drop the near-black JPEG background into the page */
.grow{flex:1;min-width:0}
#topbar .chip{overflow:hidden;text-overflow:ellipsis;max-width:42vw;flex:0 1 auto;min-width:0}
#topbar .chip.grn,#topbar .chip.or,#topbar .chip.red{flex-shrink:0}   /* sync status stays fully readable; the Mission ID chip truncates first */
#topbar a.chip{max-width:34vw;font-family:var(--font-mono);letter-spacing:.04em;color:var(--color-metallic)}
.loginbrand{text-align:center;margin:var(--space-6) 0 var(--space-4)}.loginbrand img{width:min(68vw,260px);height:auto}
.loginbrand .appname{display:inline-block;margin-top:var(--space-3);font-family:var(--font-display);font-weight:900;font-size:.85rem;letter-spacing:.3em;color:var(--color-metallic);padding:.4rem .5rem .4rem .8rem;
  background:linear-gradient(var(--color-accent),var(--color-accent)) left top/.55rem 2px,linear-gradient(var(--color-accent),var(--color-accent)) left top/2px .55rem,
    linear-gradient(var(--color-accent),var(--color-accent)) right top/.55rem 2px,linear-gradient(var(--color-accent),var(--color-accent)) right top/2px .55rem,
    linear-gradient(var(--color-accent),var(--color-accent)) left bottom/.55rem 2px,linear-gradient(var(--color-accent),var(--color-accent)) left bottom/2px .55rem,
    linear-gradient(var(--color-accent),var(--color-accent)) right bottom/.55rem 2px,linear-gradient(var(--color-accent),var(--color-accent)) right bottom/2px .55rem;background-repeat:no-repeat}

/* ---------- shell = AppShell .main ---------- */
main{width:min(100% - 2rem,var(--shell-max));min-width:0;margin:0 auto;padding:var(--space-4) 0 calc(var(--space-6) + env(safe-area-inset-bottom))}
main>h1:first-child,main>*:first-child>h1:first-child{margin-top:var(--space-1)}

/* ---------- panel = EngineeringPanel (1px #2c3038, gradient, square, orange TL + BR corner brackets) ---------- */
.card{position:relative;background:var(--panel-bg);border:1px solid var(--color-border);border-radius:0;padding:var(--space-4);margin:var(--space-3) 0;min-width:0}
/* four corner brackets like EngineeringPanel (.panel::before/::after + .corners), drawn with two pseudo-elements so no markup changes */
.card{--bc:var(--color-accent)}
.card::before,.card::after{content:"";position:absolute;left:-1px;right:-1px;height:var(--bracket);pointer-events:none;
  background:linear-gradient(var(--bc),var(--bc)) left/var(--bracket) 2px no-repeat,linear-gradient(var(--bc),var(--bc)) left/2px 100% no-repeat,
             linear-gradient(var(--bc),var(--bc)) right/var(--bracket) 2px no-repeat,linear-gradient(var(--bc),var(--bc)) right/2px 100% no-repeat}
.card::before{top:-1px;background-position:left top,left top,right top,right top}
.card::after{bottom:-1px;background-position:left bottom,left bottom,right bottom,right bottom}
.card>:last-child{margin-bottom:0}
/* dense / nested panel = KpiStat: tile gradient + one small 1px top-left bracket */
.card.plain{padding:var(--space-3);background:var(--tile-bg);--bracket:.45rem}
.card.plain::before{right:auto;width:var(--bracket);background:linear-gradient(var(--bc),var(--bc)) left top/100% 1px no-repeat,linear-gradient(var(--bc),var(--bc)) left top/1px 100% no-repeat}.card.plain::after{display:none}
/* status panels: the bracket takes the status colour so orange never reads as a check result */
.card.red{border-color:var(--tone-block-line);background:linear-gradient(180deg,rgba(179,59,59,.12),rgba(179,59,59,.04)),#050505}   /* = State .error */
.card.red{--bc:var(--color-blocking)}
.card.grn{border-color:var(--tone-ok-line);background:linear-gradient(180deg,rgba(61,155,106,.10),rgba(61,155,106,.03)),#050505}
.card.grn{--bc:var(--color-ok)}
.card h2:first-child{margin-top:0}

/* ---------- layout helpers ---------- */
.row{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;min-width:0}.col{display:flex;flex-direction:column;gap:var(--space-2)}.sp{justify-content:space-between}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
@media(min-width:760px){.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}}
@media(max-width:640px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.grid3{grid-template-columns:minmax(0,1fr)}}

/* ---------- buttons = COMMAND .clear / .action / .mobileToggle (square, 1px, upper-case Eurostar) ---------- */
.btn{min-height:var(--tap);padding:.45rem .8rem;background:rgba(10,11,13,.55);color:var(--color-metallic);border:1px solid var(--color-border);border-radius:0;
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-align:center;text-decoration:none;flex:1;min-width:110px;max-width:100%;
  transition:border-color .12s,background-color .12s,color .12s}
.btn:hover{border-color:var(--color-accent);color:var(--color-text);background:var(--color-accent-soft)}   /* = .action:hover */
.btn:active{background:rgba(240,96,0,.22)}
.btn:focus-visible{outline:var(--focus-ring);outline-offset:2px}
.btn.pri{background:var(--color-accent-soft);color:var(--color-accent-bright);border-color:rgba(240,96,0,.6)}   /* = .mobileToggle / quick-action primary */
.btn.pri:hover{border-color:var(--color-accent);background:rgba(240,96,0,.24);color:#fff}
.btn.grn{background:var(--tone-ok-bg);color:var(--color-ok);border-color:var(--tone-ok-line)}.btn.grn:hover{border-color:var(--color-ok);background:rgba(61,155,106,.2)}
.btn.red{background:var(--tone-block-bg);color:var(--tone-block-text);border-color:var(--tone-block-line)}.btn.red:hover{border-color:var(--color-blocking);background:rgba(179,59,59,.26)}
.btn.ghost{background:transparent}
.btn.sm{min-height:calc(var(--tap) - 8px);font-size:.68rem;min-width:80px;flex:0 1 auto;padding:.3rem .65rem}
.btn[disabled],.btn.dis{opacity:.4;pointer-events:none}
/* selected = mission .menuItemActive (orange edge + inset bar) and a check mark, so state never relies on colour alone */
.btn.sel{background:var(--color-accent-soft);color:#fff;border-color:rgba(240,96,0,.7);box-shadow:inset 3px 0 0 var(--color-accent)}
.btn.sel.grn{background:rgba(61,155,106,.22);color:#9af0b8;border-color:var(--color-ok);box-shadow:inset 3px 0 0 var(--color-ok)}
.btn.sel.red{background:rgba(179,59,59,.32);color:#ffd6d6;border-color:var(--color-blocking);box-shadow:inset 3px 0 0 var(--color-blocking)}
.btn.sel::before{content:"";width:.8em;height:.8em;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
.btn[href*="%C3%98i"],.btn[href*="Øi"]{text-transform:none}   /* link-buttons into a DØi-RCN-… mission (label can carry the ID): keep the lowercase i */

/* ---------- inputs = mission .filter select (black, 1px, square) ---------- */
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;max-width:100%;min-width:0;min-height:var(--tap);background:#000;color:var(--color-text);border:1px solid var(--color-border);border-radius:0;
  font-family:var(--font-body);font-size:var(--text-sm);letter-spacing:.02em;text-transform:none;padding:.45rem .5rem;transition:border-color .12s}
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}}   /* PF: stops iOS zoom-on-focus */
input:hover,select:hover,textarea:hover{border-color:var(--color-border-strong)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-color:var(--color-accent)}
input:disabled,select:disabled,textarea:disabled,input[readonly],textarea[readonly]{color:var(--color-text-muted);background:var(--color-bg-elevated)}
input::placeholder,textarea::placeholder{color:var(--color-text-subtle)}
input[type=checkbox],input[type=radio]{accent-color:var(--color-accent);width:18px;height:18px;margin:0}
textarea{min-height:84px;line-height:1.45}
input[type=file]{padding:.35rem}
label{display:block;font-family:var(--font-body);font-size:var(--text-xs);color:var(--color-text-muted);margin:var(--space-3) 0 .2rem;letter-spacing:.06em;text-transform:uppercase}   /* = .filter label */

/* ---------- bottom nav = CommandNav links as a field tab bar: orange line icons, active = accent-soft + 2px bar ---------- */
.bottomnav{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem;
  padding:.25rem max(.4rem,calc((100% - var(--shell-max)) / 2)) calc(.25rem + env(safe-area-inset-bottom));
  background:#000;border-top:1px solid var(--color-border);z-index:30;isolation:isolate}
.bottomnav a{position:relative;min-height:calc(var(--bottomnav-h) - .5rem);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;text-align:center;padding:.3rem .25rem;
  font-family:var(--font-body);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);text-decoration:none;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;overflow:hidden;transition:color .12s,border-color .12s,background .12s}
.bottomnav a span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bottomnav svg{width:1.25rem;height:1.25rem;flex:none;color:var(--color-nav-icon);opacity:.88;stroke:currentColor}   /* = CommandNav .icon (lucide, stroke 1.75) */
.bottomnav a:hover,.bottomnav a:focus-visible{color:var(--color-text);border-color:var(--color-border)}
.bottomnav a:hover svg{color:var(--color-nav-icon-hover);opacity:1}
.bottomnav a:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
.bottomnav a.on{color:var(--color-text);background:var(--color-accent-soft);border-color:rgba(196,92,38,.35)}   /* = .linkActive */
.bottomnav a.on svg{color:var(--color-nav-icon-active);opacity:1}
.bottomnav a.on::after{content:"";position:absolute;left:.6rem;right:.6rem;top:0;height:2px;background:var(--color-accent)}   /* = .activeBar, turned horizontal */
@media(min-width:761px) and (pointer:fine){.bottomnav a{flex-direction:row;gap:.55rem;font-size:.8rem;letter-spacing:.06em}}

/* Brand rule: no text-transform on .valbar/.chip/.st/.crit/th: they can carry "DØi" (banner text, DØi-RCN-* Mission IDs, "DØi Operational Limit")
   and the lowercase i must survive. Their source strings are already upper-case, so they still read like COMMAND's upper-case badges. */
/* ---------- badges = COMMAND Badge (square, 1px, .08em) ---------- */
.chip,.st,.crit{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-body);font-size:var(--text-xs);font-weight:400;letter-spacing:.08em;line-height:1.2;
  padding:.28rem .5rem;border-radius:0;border:1px solid var(--color-border);white-space:nowrap;color:var(--color-text-muted);background:rgba(255,255,255,.03);vertical-align:middle;max-width:100%}
a.chip{text-decoration:none}a.chip:hover{color:var(--color-text);border-color:var(--color-accent)}
[data-act].chip{cursor:pointer}
.chip.or,.chip.warn{color:var(--color-accent-bright);background:var(--color-accent-soft);border-color:var(--tone-accent-line)}   /* accent / urgent */
.chip.grn{color:var(--color-ok);background:var(--tone-ok-bg);border-color:var(--tone-ok-line)}                                     /* ok / PASS */
.chip.red{color:var(--tone-block-text);background:var(--tone-block-bg);border-color:var(--tone-block-line)}                         /* blocking / error */
.chip.valchip{white-space:normal}
/* check status: colour + text + icon. Status never uses COMMAND orange (orange = navigation / active / criticality). */
.st{font-family:var(--font-mono);font-weight:600;font-size:.68rem;letter-spacing:.06em}
.st::before{content:"";width:.85em;height:.85em;flex:none;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.st.VERIFIED{color:var(--color-ok);background:var(--tone-ok-bg);border-color:var(--tone-ok-line);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")}
.st.DEF{color:var(--tone-block-text);background:rgba(229,57,53,.2);border-color:rgba(229,57,53,.6);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E")}
.st.NV{color:var(--color-watch);background:var(--tone-watch-bg);border-color:var(--tone-watch-line);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E")}
.st.OCR{color:var(--color-watch);background:var(--tone-watch-bg);border-color:var(--color-watch);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10.3 3h3.4l-.6 12h-2.2zM10.2 17.5h3.6V21h-3.6z'/%3E%3C/svg%3E")}
.st.NA{color:var(--color-text-muted);background:rgba(255,255,255,.03);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.st.stale{color:var(--color-watch);background:var(--tone-watch-bg);border:1px dashed var(--color-watch);
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7'/%3E%3C/svg%3E")}
.st:not(.VERIFIED):not(.DEF):not(.NV):not(.OCR):not(.NA):not(.stale)::before{display:none}
/* criticality = ExecutiveOverview .priority tag (mono, outline). C = urgent outline, S = neutral */
.crit{font-family:var(--font-mono);font-size:.65rem;font-weight:600;letter-spacing:.08em;padding:.15rem .35rem}
.crit.C{color:var(--color-accent-bright);background:transparent;border-color:rgba(240,96,0,.55)}
.crit.S{color:var(--color-text-muted);background:transparent}

/* ---------- recommendation / decision readouts (GO · HOLD · NO-GO), KPI values = KpiStat ---------- */
.rec{font-family:var(--font-display);font-weight:900;font-size:var(--text-xl);letter-spacing:.08em;line-height:1.15;padding:var(--space-3) var(--space-4);margin-top:var(--space-2);text-align:center;border-radius:0;
  color:var(--color-accent-bright);background:var(--color-accent-soft);border:1px solid rgba(240,96,0,.7)}   /* HOLD / conditions = urgent */
.rec.go{color:var(--color-ok);background:rgba(61,155,106,.14);border-color:var(--color-ok)}                  /* GO / PASS */
.rec.nogo{color:var(--tone-block-text);background:rgba(229,57,53,.2);border-color:var(--color-blocking)}     /* NO-GO / error */
.big{font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.55rem);font-weight:900;letter-spacing:.02em;line-height:1.1;color:var(--color-text);overflow-wrap:anywhere}   /* = KpiStat .value */
.big small{font-size:.6em;color:var(--color-text-subtle);letter-spacing:.04em}
.big.red{color:var(--red)}
.k{color:var(--color-text-muted);font-family:var(--font-body);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}   /* = KpiStat .label */
.v{font-family:var(--font-body);font-size:var(--text-md);letter-spacing:.02em;color:var(--color-metallic)}
.pend{color:var(--color-watch)}.def{color:var(--red)}.muted{color:var(--color-text-muted)}.small{font-size:var(--text-sm)}
.fresh.ok{color:var(--color-ok)}.fresh.stale{color:var(--color-watch)}
b.mono,b.mono.small{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;color:var(--color-accent);text-transform:uppercase}   /* = EngineeringPanel .eyebrow */

/* ---------- lists = ExecutiveOverview attention / check rows (dense, hairline rules) ---------- */
.list .item{display:flex;gap:var(--space-3);align-items:center;padding:.55rem var(--space-3);border-bottom:1px solid var(--row-line);min-height:var(--tap);cursor:pointer;transition:background-color .12s;font-size:var(--text-sm)}
.list .item:last-child{border-bottom:0}
.list .item:hover{background:rgba(240,96,0,.06)}
.list .item:active{background:rgba(240,96,0,.1)}
.list .item:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
.card.plain.list{padding:0;overflow:hidden}
.item .t{flex:1;color:var(--color-text)}.item .t>b:first-child{font-family:var(--font-mono);font-weight:600;color:var(--color-accent-bright);letter-spacing:.02em}
.item .sub{color:var(--color-text-subtle);font-size:.72rem;margin-top:.15rem;letter-spacing:.02em}
.item .sub .mono{font-size:.66rem;letter-spacing:.08em;color:var(--color-text-muted)}

/* ---------- step track / progress = mission .track/.step + ExecutiveOverview pipeline bar ---------- */
.step{display:flex;gap:.25rem;overflow-x:auto;padding:var(--space-1) 0 var(--space-2);max-width:100%}
.step span{flex:none;font-family:var(--font-body);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:.4rem .5rem;border:1px solid var(--color-border);background:#08090b;color:var(--color-text-subtle);white-space:nowrap}
.step .done{color:var(--color-ok);border-color:var(--tone-ok-line)}
.step .done::before{content:"✓ ";font-family:var(--font-mono)}
.step .cur{color:#fff;background:var(--color-accent-soft);border-color:rgba(240,96,0,.7)}
.prog{height:.35rem;background:#0a0b0d;border:1px solid var(--color-border);border-radius:0;margin:var(--space-2) 0;overflow:hidden}
.prog>i{display:block;height:100%;min-width:.25rem;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-bright))}

/* ---------- tables = dashboard table.module.css ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
th{text-align:left;color:var(--color-text-subtle);font-size:.62rem;font-weight:500;letter-spacing:.1em;padding:.4rem .55rem;border-bottom:1px solid var(--color-border);vertical-align:bottom}
td{padding:.5rem .55rem;border-bottom:1px solid var(--row-line);vertical-align:top;overflow-wrap:anywhere;color:var(--color-metallic)}
tbody tr:hover td,tr:hover td{background:rgba(196,92,38,.05)}
@media(max-width:720px){table{display:block;max-width:100%;overflow-x:auto}}

/* ---------- evidence thumbs (camera + evidence panels) ---------- */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:var(--space-2)}
.th{border:1px solid var(--color-border);border-radius:0;background:#000;position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.th::before{content:"";position:absolute;top:-1px;left:-1px;width:.45rem;height:.45rem;border-top:1px solid var(--color-accent);border-left:1px solid var(--color-accent);z-index:1;pointer-events:none}
.th:hover{border-color:var(--color-accent)}.th img{width:100%;height:100%;object-fit:cover}
.th .b{position:absolute;left:0;bottom:0;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:rgba(0,0,0,.82);color:var(--color-metallic);padding:1px 5px}
.th .b.u{background:var(--color-accent);color:#000}

/* ---------- toast / modal ---------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);width:min(100% - 1.5rem,40rem);bottom:calc(var(--bottomnav-h) + 14px + env(safe-area-inset-bottom));background:var(--color-surface);color:var(--color-text);
  padding:var(--space-3) var(--space-4);font-size:var(--text-sm);letter-spacing:.02em;z-index:50;border:1px solid var(--tone-accent-line);border-left:3px solid var(--color-accent);border-radius:0;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.toast.err{border-color:var(--tone-block-line);border-left-color:var(--color-blocking);color:var(--tone-block-text)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:60;overflow:auto;padding:var(--space-3)}
.modal .box{position:relative;max-width:700px;margin:var(--space-5) auto;background:var(--panel-bg);border:1px solid var(--color-border-strong);border-radius:0;padding:var(--space-4)}.modal img{max-width:100%}

/* ---------- misc ---------- */
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-3)}.kv div{min-width:0;word-break:break-word}
/* expandable sections = EngineeringPanel .eyebrow (mono orange) with a static chevron (no animation) */
details>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:var(--space-2);list-style:none;color:var(--color-accent);font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";width:.45rem;height:.45rem;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin:0 .2rem 0 .1rem}
details[open]>summary::before{transform:rotate(45deg);margin-top:-.2rem}
details>summary:hover{color:var(--color-accent-bright)}
details>summary:focus-visible{outline:var(--focus-ring);outline-offset:2px}
details[open]>summary{border-bottom:1px solid var(--row-line);margin:-.25rem calc(-1 * var(--space-3)) 0;padding:0 var(--space-3) .25rem}
details>summary .chip{font-family:var(--font-mono);color:var(--color-metallic);letter-spacing:.06em}
details.card.plain{padding-top:.25rem;padding-bottom:.25rem}
details.card.plain .list{margin:0 calc(-1 * var(--space-3))}
.tag{display:inline-flex;margin:2px}
hr{border:0;border-top:1px solid var(--color-border);margin:var(--space-4) 0}
img,svg,video,canvas{max-width:100%}
.item .t,.small.mono,.mono{overflow-wrap:anywhere;word-break:break-word;min-width:0}
.item .st,.item .chip{white-space:normal;text-align:left}

@media(max-width:640px){
  main{width:min(100% - 1.25rem,var(--shell-max));padding-top:var(--space-3)}   /* = AppShell mobile */
  .card{padding:var(--space-3)}.card.plain{padding:var(--space-3)}
  #topbar{padding-left:.625rem;padding-right:.625rem;gap:var(--space-2)}
  .brand{gap:var(--space-2)}
  .rec{font-size:var(--text-lg)}
  h1{font-size:1.05rem}
  .list .item{padding:.5rem .65rem;gap:.6rem}
  details.card.plain .list{margin:0 calc(-1 * var(--space-3))}
}
@media(max-width:480px){
  #topbar .chip{letter-spacing:.03em;padding:.25rem .4rem;font-size:.68rem}
  .brandlogo{height:22px}
  .brand b{font-size:.66rem;letter-spacing:.14em;padding:.32rem .4rem .32rem .5rem;margin-left:.45rem}
  .brand b::before{left:-.5rem}
}
@media(max-width:360px){.brandlogo{height:20px}.brand b{font-size:.6rem;letter-spacing:.1em}}
@media print{#topbar,#nav,.btn,.banner{display:none}.valbar{position:static}body{background:#fff;color:#000}}

/* ---------- t208 field fixes ---------- */
/* check rows: title keeps the width; long status badges wrap inside a capped column */
.item .t{min-width:0;flex:1 1 auto}
.item>.st,.item>.chip{flex:0 1 auto;max-width:46%;white-space:normal;line-height:1.25}
.item>.crit{flex:none}
main>h2,main>.row+h2,main>label+h2{margin-top:var(--space-5)}
/* check-status buttons take their STATUS tone (not COMMAND orange, which stays for navigation / active controls) */
.btn[data-act=setstatus][data-st="OPERATOR CONFIRMATION REQUIRED"],.btn[data-act=setstatus][data-st="NOT VERIFIED"]{color:var(--color-watch);background:var(--tone-watch-bg);border-color:var(--tone-watch-line)}
.btn[data-act=setstatus][data-st="OPERATOR CONFIRMATION REQUIRED"]:hover,.btn[data-act=setstatus][data-st="NOT VERIFIED"]:hover{border-color:var(--color-watch)}
.btn[data-act=setstatus][data-st="N/A"]{color:var(--color-metallic);background:rgba(255,255,255,.03)}
.btn[data-act=setstatus].sel[data-st="OPERATOR CONFIRMATION REQUIRED"],.btn[data-act=setstatus].sel[data-st="NOT VERIFIED"]{color:#ffe08a;background:rgba(224,168,0,.22);border-color:var(--color-watch);box-shadow:inset 3px 0 0 var(--color-watch)}
.btn[data-act=setstatus].sel[data-st="N/A"]{color:#fff;background:rgba(255,255,255,.08);border-color:var(--color-metallic);box-shadow:inset 3px 0 0 var(--color-metallic)}
@media(max-width:480px){
  #topbar{gap:.35rem}
  #topbar .chip{font-size:.62rem;padding:.22rem .3rem;letter-spacing:.02em}
  #topbar a.chip{min-width:3.2rem;max-width:26vw}
  .brandlogo{height:20px}
  .brand{gap:0}
  .brand b{font-size:.56rem;letter-spacing:.12em;padding:.3rem .32rem .3rem .42rem;margin-left:.45rem}
  .brand b::before{left:-.45rem}
}
.card.red details>summary{color:var(--tone-block-text)}.card.grn details>summary{color:var(--color-ok)}   /* expanders inherit their panel's status tone */
label.row{flex-wrap:nowrap;align-items:center;gap:.6rem;line-height:1.35}label.row>input{flex:none}

/* ---------- t209 checklist-row quick actions (Verified / Evidence / Deficiency) ---------- */
.list .item:has(>.qa-row){flex-wrap:wrap;row-gap:.45rem}
/* t210: compact row actions — phone 44px (outdoor glove-safe floor), iPad 40px, desktop mouse 32px */
.item>.qa-row{--qa-h:44px;--qa-w:140px;display:grid;grid-template-columns:repeat(2,minmax(0,var(--qa-w)));gap:.5rem;flex:0 0 100%;max-width:none;box-sizing:border-box;padding-left:calc(1.6rem + var(--space-3))}
.btn.qa{min-width:0;flex:none;min-height:var(--qa-h);height:var(--qa-h);padding:0 .55rem;font-size:13px;line-height:1;letter-spacing:.06em;white-space:nowrap;gap:.35rem}
@media(max-width:640px){.item>.qa-row{padding-left:calc(1.6rem + .6rem);--qa-w:130px;gap:.5rem}}                           /* iPhone: ~140px wide x 44px buttons */
@media(pointer:coarse) and (min-width:641px){.item>.qa-row{--qa-h:40px;--qa-w:150px;gap:.6rem}.btn.qa{font-size:12.5px}}   /* iPad: slightly denser, still finger-sized */
@media(pointer:fine) and (min-width:761px){.item>.qa-row{--qa-h:32px;--qa-w:130px}.btn.qa{font-size:11.5px}}             /* desktop mouse */
.btn.qa.ev{color:var(--color-watch);background:var(--tone-watch-bg);border-color:var(--color-watch)}   /* evidence needed = amber pending tone, never orange */
.btn.qa.ev::before{content:"";width:.9em;height:.9em;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.btn.qa.ev:hover{border-color:#ffd24d;background:rgba(224,168,0,.2)}
#defpanel textarea{margin-top:.25rem}

/* ---- t212 (John 8:59 AM PT Oct 9): checklist rows — status left + unmistakable, description under the title; on-site GPS; back button; just-verified focus */
.list .item{align-items:flex-start;border-left:4px solid transparent}
.list .item.tone-VERIFIED{border-left-color:var(--color-ok)}
.list .item.tone-DEF{border-left-color:var(--color-blocking)}
.list .item.tone-NV,.list .item.tone-OCR,.list .item.tone-stale{border-left-color:var(--color-watch)}
.list .item.tone-NA{border-left-color:var(--color-border)}
.item .t .rowst{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .3rem}
.item .t .rowst .st{font-size:.78rem;padding:.28rem .55rem;letter-spacing:.07em;max-width:100%;white-space:normal;text-align:left;justify-content:flex-start}
.item .t .onsite{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;color:var(--color-metallic);border:1px solid var(--color-border);padding:.15rem .4rem}
.item .t .ttl{color:var(--color-text);font-weight:600}
.item .t .ttl>b:first-child{font-family:var(--font-mono);font-weight:600;color:var(--color-accent-bright);letter-spacing:.02em}
.item .t .desc{color:var(--color-text-muted);font-size:.8rem;line-height:1.35;margin-top:.2rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.list .item>.crit{margin-top:.15rem}
.list .item.justdone{background:rgba(61,207,110,.12);outline:2px solid var(--color-ok);outline-offset:-2px;transition:background-color .6s}
.list .item:focus{outline:2px solid var(--color-ok);outline-offset:-2px}
.item>.gpserr,#gpsmsg>.gpserr,.card>.gpserr{flex:0 0 100%;margin:.4rem 0 0;padding:.55rem .7rem;border:1px solid var(--color-blocking);background:rgba(229,57,53,.14);color:var(--tone-block-text);font-size:.82rem;line-height:1.35}
#gpsmsg:empty{display:none}
#gpsmsg .gpserr{margin-top:.6rem}
.gpsnote{border-left:3px solid var(--color-watch);padding:.35rem .6rem;background:var(--tone-watch-bg)}
.btn.busy{opacity:.7;pointer-events:none}
.btn.backbtn{min-height:44px;padding:.5rem .9rem;font-size:.8rem;letter-spacing:.06em;border-color:var(--color-accent);color:var(--color-accent-bright)}
@media(pointer:fine) and (min-width:761px){.btn.backbtn{min-height:2.25rem}}
#asstanswer .asst-list{margin:.4rem 0;padding-left:1.25rem}
#asstanswer .asst-list li{margin:.3rem 0}
.list .item>.t{flex:1 1 0%;min-width:0}   /* t212: keep the status/title block beside the criticality tag even with a long status */

/* ---- t214 (John 12:16 PM PT Oct 9): battery check (five-square gauge, 1-10 batteries) + Verified toggle */
#battcheck{--b1:#e53935;--b2:#f06000;--b3:#e0a800;--b4:#3dcf6e;--b5:#3dcf6e}
.battcount{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.3rem;margin:.2rem 0 .6rem}
.battcount .btn.sm{min-width:0;padding:0;min-height:40px;font-family:var(--font-mono);font-size:.9rem}
@media(max-width:480px){.battcount{grid-template-columns:repeat(5,minmax(0,1fr))}.battcount .btn.sm{min-height:44px}}
.battlist{display:grid;gap:.5rem;margin:.2rem 0 .4rem}
.battrow{display:grid;grid-template-columns:5.2rem auto 1fr;align-items:center;gap:.6rem}
.battname{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;color:var(--color-metallic)}
.battgauge{position:relative;display:inline-grid;grid-template-columns:repeat(5,44px);gap:4px;padding:4px;border:2px solid var(--color-metallic);margin-right:10px}
.battgauge .nub{position:absolute;right:-10px;top:50%;width:6px;height:45%;transform:translateY(-50%);background:var(--color-metallic)}
.battgauge .seg{height:44px;min-height:44px;border:1px solid var(--color-border);background:#0a0b0d;padding:0;cursor:pointer;border-radius:0}
.battgauge .seg:hover{border-color:var(--color-metallic)}
.battgauge .seg:focus-visible{outline:2px solid #fff;outline-offset:1px}
.battgauge.lvl1 .seg.on{background:var(--b1);border-color:var(--b1)}
.battgauge.lvl2 .seg.on{background:var(--b2);border-color:var(--b2)}
.battgauge.lvl3 .seg.on{background:var(--b3);border-color:var(--b3)}
.battgauge.lvl4 .seg.on{background:var(--b4);border-color:var(--b4)}
.battgauge.lvl5 .seg.on{background:var(--b5);border-color:var(--b5);box-shadow:0 0 8px rgba(61,207,110,.55)}
.battgauge.lvl1{border-color:var(--b1)}.battgauge.lvl2{border-color:var(--b2)}.battgauge.lvl3{border-color:var(--b3)}.battgauge.lvl4,.battgauge.lvl5{border-color:var(--b4)}
.battlbl{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;font-weight:600}
.battlbl.lvl1{color:var(--b1)}.battlbl.lvl2{color:var(--b2)}.battlbl.lvl3{color:var(--b3)}.battlbl.lvl4,.battlbl.lvl5{color:var(--b4)}.battlbl.unset{color:var(--color-text-subtle)}
@media(max-width:480px){.battrow{grid-template-columns:1fr auto;row-gap:.25rem}.battrow .battgauge{grid-row:2;grid-column:1 / -1;justify-self:start;grid-template-columns:repeat(5,minmax(44px,1fr));width:calc(100% - 14px)}}
@media(pointer:fine) and (min-width:761px){.battgauge{grid-template-columns:repeat(5,36px)}.battgauge .seg{height:32px;min-height:32px}}
#battmsg.okline{color:var(--color-ok)}
#battmsg.battblock{color:var(--tone-block-text);border:1px solid var(--color-blocking);background:rgba(229,57,53,.14);padding:.45rem .6rem}
.item .sub .battsum{color:var(--color-metallic)}

/* ---- t215 (John 12:34 PM PT Oct 9): gauge squares show their level colour as an outline + light shade until selected; selected fills as before */
.battgauge .seg.s1{--sc:var(--b1);--sh:rgba(229,57,53,.14)}
.battgauge .seg.s2{--sc:var(--b2);--sh:rgba(240,96,0,.14)}
.battgauge .seg.s3{--sc:var(--b3);--sh:rgba(224,168,0,.14)}
.battgauge .seg.s4{--sc:var(--b4);--sh:rgba(61,207,110,.12)}
.battgauge .seg.s5{--sc:var(--b5);--sh:rgba(61,207,110,.12)}
.battgauge .seg:not(.on){border:1.5px solid var(--sc);background:var(--sh)}
.battgauge .seg:not(.on):hover{background:color-mix(in srgb,var(--sc) 28%,transparent)}
/* t215: Verbal / Written authorization pick (check 32) */
.authpick .btn{gap:.55rem;min-height:var(--tap)}
.authpick .box{display:inline-grid;place-items:center;width:1.2rem;height:1.2rem;border:2px solid currentColor;font-size:.85rem;line-height:1}
#authmsg.okline{color:var(--color-ok)}
#authmsg.battblock{color:var(--tone-block-text);border:1px solid var(--color-blocking);background:rgba(229,57,53,.14);padding:.45rem .6rem}

/* ---- t216 (John 1:17 PM PT Oct 9) */
/* Verbal / Written: selected = solid green box (no checkbox, no check icon) */
.authpick .btn.authbtn{justify-content:center;font-weight:700;letter-spacing:.08em}
.authpick .btn.authbtn::before{display:none}
.authpick .btn.authbtn.authon{background:var(--color-ok);border-color:var(--color-ok);color:#04130a;box-shadow:0 0 0 2px rgba(61,207,110,.35)}
/* battery count: selected keeps the highlight but drops the check mark */
.battcount .btn.sel::before{display:none}
/* why / how panel on every check page */
.whyhow{margin:.6rem 0 .2rem;padding:.6rem .75rem;border-left:3px solid var(--color-accent);background:rgba(240,96,0,.05)}
.whyhow h3{margin:.2rem 0 .3rem;font-size:.78rem;letter-spacing:.1em;color:var(--color-accent-bright)}
.whyhow h3+p{margin-top:0}
.whyhow p{margin:.3rem 0;line-height:1.45}
.whyhow .desc code,.whyhow code{font-family:var(--font-mono);font-size:.85em;background:rgba(255,255,255,.06);padding:0 .25em}
.whyhow ol{margin:.3rem 0 .2rem;padding-left:1.2rem}
.whyhow li{margin:.22rem 0;line-height:1.4}
.whyhow.cond{border-left-color:var(--color-watch);background:var(--tone-watch-bg);margin:.45rem 0 .6rem}
/* t217: Why / How collapsible drop-downs (collapsed by default) */
.whyhow{padding:.15rem .75rem}
.whyhow .whdrop+.whdrop{border-top:1px solid var(--row-line)}
.whyhow .whdrop>summary{min-height:44px;font-size:.78rem;letter-spacing:.14em;color:var(--color-accent-bright)}
.whyhow .whdrop[open]>summary{margin:0;padding:0;border-bottom:0}
.whyhow .whbody{padding:0 0 .45rem}
.whyhow .whsub{margin:0 0 .25rem;font-weight:600}
.whyhow.cond .whdrop>summary{color:var(--color-watch)}
@media (min-width:1024px){.whyhow .whdrop>summary{min-height:36px}}
.whgate{margin:.5rem 0 .2rem}
/* t218 (John 2:24 PM PT): selected fills are a brighter translucent tint (same style as the unselected outline + tint), not an opaque block */
.authpick .btn.authbtn.authon{background:rgba(61,207,110,.34);border-color:var(--color-ok);color:#c9f7d8;box-shadow:0 0 0 2px rgba(61,207,110,.25),inset 0 0 12px rgba(61,207,110,.18)}
.battcount .btn.sm.sel{background:rgba(240,96,0,.34);border-color:var(--color-accent-bright);color:#fff;box-shadow:0 0 0 1px rgba(255,122,26,.35)}
.battgauge.lvl1 .seg.on{background:color-mix(in srgb,var(--b1) 48%,transparent);border:1.5px solid var(--b1)}
.battgauge.lvl2 .seg.on{background:color-mix(in srgb,var(--b2) 48%,transparent);border:1.5px solid var(--b2)}
.battgauge.lvl3 .seg.on{background:color-mix(in srgb,var(--b3) 48%,transparent);border:1.5px solid var(--b3)}
.battgauge.lvl4 .seg.on{background:color-mix(in srgb,var(--b4) 45%,transparent);border:1.5px solid var(--b4)}
.battgauge.lvl5 .seg.on{background:color-mix(in srgb,var(--b5) 45%,transparent);border:1.5px solid var(--b5);box-shadow:0 0 8px rgba(61,207,110,.4)}

.sw-summary-row{padding:.8rem 0;border-bottom:1px solid var(--row-line)}
.sw-summary-row:last-child{border-bottom:0}
.sw-summary-row>.sub{margin:.4rem 0;white-space:pre-wrap}
.sw-summary-row .sw-item-title{flex:1 1 auto;text-align:left;justify-content:flex-start;white-space:normal}
.sw-summary-row .sw-item-title::before{display:none}
.sw-summary-row .grid3{margin-top:.5rem}

#oopf .oop-toggle{position:relative;display:block;margin:0}
#oopf .oop-input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#oopf .oop-button{width:100%;min-width:0;height:100%}
#oopf .oop-input:checked+.oop-button{background:var(--color-accent-soft);color:var(--color-accent-bright);border-color:rgba(240,96,0,.6);box-shadow:inset 3px 0 0 var(--color-accent)}
#oopf .oop-button::before{display:none}
#oopf .oop-input:focus-visible+.oop-button{outline:var(--focus-ring);outline-offset:2px}
#oopf .oop-input:disabled+.oop-button{opacity:.4;pointer-events:none}

/* Topic titles are navigation, not verification state; neutral even after touch hover. */
.sw-summary-row .sw-item-title,.sw-summary-row .sw-item-title:hover,.sw-summary-row .sw-item-title:active,.sw-summary-row .sw-item-title:focus{background:rgba(10,11,13,.55);color:var(--color-metallic);border-color:var(--color-border);box-shadow:none}
.sw-topic-description{margin:.5rem 0;color:var(--color-text-muted);line-height:1.5;text-transform:none;letter-spacing:normal}
.check-description{margin:.8rem 0;padding:.7rem .8rem;border-left:2px solid var(--color-border-strong);background:rgba(255,255,255,.025)}
.check-description h2{margin:0 0 .4rem;font-size:.78rem;color:var(--color-metallic)}
.check-description .desc{line-height:1.5}