/* Foreman+ office seat — LEDGER.
   Tokens and components ported from the approved mockup
   (docs/design-variants-2026-08-27/foreman-b-mockup.html).
   One accent, hairlines instead of frames, 8pt grid, no gradients.
   Small text sits on --tx2 rather than --tx3 so every label clears 4.5:1;
   --tx3 is reserved for chevrons and rules. */

:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface2:#F7F7F8; --line:#E6E6E9; --line-strong:#D8D8DE;
  --tx:#16181D; --tx2:#5B616E; --tx3:#8A909E;
  --accent:#2C5CD8; --accent-ink:#FFFFFF; --accent-soft:#EEF2FD;
  --ok-tx:#14713D; --ok-bg:#E9F5EE;
  --warn-tx:#8A5300; --warn-bg:#FBF0DC;
  --unk-tx:#5B616E; --unk-bg:#F1F2F4;
  --f-ui:'Inter',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --row:44px; --pad:24px; --maxw:1100px; --r:4px; --gap:28px;
  --fs-lab:12px; --fs-sm:13px; --fs:15px; --fs-lg:20px; --fs-xl:28px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font-family:var(--f-ui);font-size:var(--fs);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-variant-numeric:tabular-nums}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--f-ui);font-weight:600;letter-spacing:-0.02em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.mono{font-family:var(--f-mono);font-size:.92em;letter-spacing:-0.01em}
.lab{font-size:var(--fs-lab);letter-spacing:.06em;text-transform:uppercase;color:var(--tx2);font-weight:500}
.dim{color:var(--tx2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============ shell ============ */
.shell{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{max-width:1140px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:22px;height:56px}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;flex:none}
.brand b{font-weight:700;font-size:16px;letter-spacing:-0.02em}
.brand span{font-size:11px;color:var(--tx2);letter-spacing:.02em}
.navlinks{display:flex;gap:2px;margin-left:8px}
.navlink{position:relative;padding:6px 10px;border-radius:var(--r);text-decoration:none;font-size:var(--fs-sm);
  font-weight:500;color:var(--tx2);transition:background .14s ease,color .14s ease}
.navlink:hover{background:var(--surface2);color:var(--tx)}
.navlink[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.navright{margin-left:auto;display:flex;align-items:center;gap:12px}
.phonelink{font-size:12px;color:var(--tx2);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.phonelink:hover{color:var(--accent);border-color:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:var(--r);padding:7px 13px;font-size:var(--fs-sm);font-weight:500;text-decoration:none;
  transition:transform .12s ease,border-color .14s ease,background .14s ease}
.btn:hover{border-color:var(--tx3)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.06)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}

/* ============ page ============ */
.page{max-width:var(--maxw);margin:0 auto;padding:34px var(--pad) 90px}
.page.wide{max-width:1260px}
.crumb{font-size:var(--fs-sm);color:var(--tx2);margin-bottom:14px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.crumb a{text-decoration:none;border-bottom:1px solid var(--line-strong)}
.crumb a:hover{color:var(--accent);border-color:var(--accent)}
.pagehead{display:flex;align-items:flex-start;gap:20px 28px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:var(--gap)}
.pagehead>div:first-child{flex:1 1 340px;min-width:0}
.pagehead h1{font-size:var(--fs-xl);line-height:1.15}
.pagehead .sub{margin-top:7px;font-size:var(--fs-sm);color:var(--tx2)}
.actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:0 0 auto;padding-top:4px}

/* blocks */
.block{margin-bottom:var(--gap)}
.block-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.block-h .count{font-size:var(--fs-lab);color:var(--tx2);margin-left:auto}

/* status pill */
.pill{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--r);
  font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok-tx)}
.pill.warn{background:var(--warn-bg);color:var(--warn-tx)}
.pill.unk{background:var(--unk-bg);color:var(--unk-tx)}
.pill.info{background:var(--accent-soft);color:var(--accent)}
.pill .g{font-size:10px}

/* provenance */
.chip{display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 7px;border-radius:3px;
  background:var(--unk-bg);color:var(--tx2);font-size:11px;border:0;white-space:nowrap;
  vertical-align:1px;margin-left:6px;transition:background .14s ease,color .14s ease;font-family:var(--f-ui)}
.chip:hover{background:var(--accent-soft);color:var(--accent)}
.modal{position:fixed;inset:0;z-index:80;background:rgba(20,20,30,.38);display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal-card{position:relative;width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:6px;box-shadow:0 12px 40px rgba(20,20,30,.18);padding:22px 24px;animation:pop .14s ease both}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.modal-card h3{font-size:var(--fs-xl);line-height:1.15;margin:4px 0 14px;overflow-wrap:anywhere}
.modal-card .close{position:absolute;top:12px;right:12px;background:0;border:0;color:var(--tx2);font-size:16px;line-height:1;padding:4px 6px}
.ev-media{margin:0 0 14px}
.ev-media img{width:100%;max-height:300px;object-fit:cover;object-position:50% 42%;border-radius:4px;border:1px solid var(--line);display:block}
.ev-media figcaption{font-size:12px;color:var(--tx2);margin-top:6px}
.modal-card .quote{font-size:var(--fs-sm);margin:0 0 14px;line-height:1.45;color:var(--tx2)}
.modal-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:var(--fs-sm)}
.modal-card dt{color:var(--tx2)}
.modal-card dd{margin:0;overflow-wrap:anywhere}
body.modal-open{overflow:hidden}

/* run recap: the "what just happened" modal shown when a demo run finishes */
.recap-stats{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0 14px;font-size:var(--fs-sm);color:var(--tx2)}
.recap-stats b{display:block;font-size:var(--fs-xl);color:var(--tx);font-family:var(--f-mono);font-weight:500}
.recap-stats .warn b{color:var(--warn-tx)}
.recap-line{margin:0 0 10px;font-size:var(--fs);line-height:1.5}
.recap-line s{color:var(--warn-tx)}
.recap-act{display:flex;gap:8px;margin-top:16px}

/* briefing */
.brief{list-style:none;margin:0;padding:0}
.brief li{padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--fs);line-height:1.55;max-width:74ch}
.brief li:last-child{border-bottom:0}

/* the one authored moment: what the live run just added */
.is-new{animation:landed 1.2s ease forwards}
@keyframes landed{0%{background:var(--accent-soft)}100%{background:transparent}}
tr.is-new td{animation:landed 1.2s ease forwards}

/* open questions */
.oq{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.oq-item{padding:15px 16px;border-bottom:1px solid var(--line)}
.oq-item:last-child{border-bottom:0}
.oq-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.oq-top b{font-weight:600;font-size:var(--fs)}
.oq-meta{font-size:var(--fs-sm);color:var(--tx2)}
.plaque{margin-top:10px;background:var(--warn-bg);border-left:3px solid var(--warn-tx);border-radius:0 3px 3px 0;
  padding:10px 12px;font-size:var(--fs-sm);color:var(--warn-tx);line-height:1.5}
.plaque .said{color:var(--tx);opacity:.85}
.plaque .quoted{margin-top:6px}
.plaque .against{margin-top:6px;font-size:12px}
.plaque a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.oq-act{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.oq-note{margin:7px 0 0;font-size:var(--fs-sm);color:var(--tx2)}
.oq-empty{padding:15px 16px;color:var(--tx2);font-size:var(--fs-sm)}

/* equipment cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:16px}
.card-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.card-h h3{font-size:var(--fs-lg);line-height:1.2}
.card-h .lab{margin-bottom:3px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));column-gap:28px}
.field{padding:9px 0;border-top:1px solid var(--line);min-height:var(--row);display:flex;
  flex-direction:column;justify-content:center}
.field.wide{grid-column:1/-1}
.field .lab{margin-bottom:2px}
.field .val{font-size:var(--fs);font-weight:600;letter-spacing:-0.02em;display:flex;align-items:baseline;
  flex-wrap:wrap;overflow-wrap:anywhere}
.field .val .mono{font-weight:400}
.field.unknown .val{color:var(--tx2);font-weight:400;letter-spacing:0}
.field .why{display:block;font-size:12px;color:var(--tx2);margin-top:2px}
.chev{margin-left:6px;color:var(--tx3);font-size:13px}

/* table */
.tw{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:640px}
th{font-size:var(--fs-lab);letter-spacing:.06em;text-transform:uppercase;color:var(--tx2);font-weight:500;
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:0 14px;height:var(--row);border-bottom:1px solid var(--line);font-size:var(--fs-sm);vertical-align:middle}
td.nw{white-space:nowrap}
td.clip{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.wide th,table.wide td{padding-left:10px;padding-right:10px}
table.wide td.clip{max-width:110px}
table.wide th:last-child,table.wide td:last-child{min-width:255px;white-space:normal;padding-top:9px;
  padding-bottom:9px;line-height:1.42}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .14s ease}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:var(--surface2)}
td .link{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
td .link:hover{border-color:currentColor}
.tabs{display:flex;gap:2px;margin-bottom:10px;flex-wrap:wrap}
.tab{border:1px solid transparent;background:transparent;padding:5px 10px;border-radius:var(--r);
  font-size:var(--fs-sm);color:var(--tx2);font-weight:500}
.tab:hover{background:var(--surface2)}
.tab[aria-pressed="true"]{background:var(--surface2);color:var(--tx);border-color:var(--line)}

/* property list rows */
.plist{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.prow{display:grid;grid-template-columns:1.35fr 1fr auto;gap:18px;align-items:center;padding:16px 18px;
  border-bottom:1px solid var(--line);text-decoration:none;transition:background .14s ease}
.prow:last-child{border-bottom:0}
.prow:hover{background:var(--surface2)}
.prow h3{font-size:var(--fs-lg);line-height:1.25}
.prow .who{font-size:var(--fs-sm);color:var(--tx2);margin-top:3px}
.prow .eq{font-size:var(--fs-sm);color:var(--tx2)}
.prow .last{font-size:12px;color:var(--tx2);margin-top:3px}
.prow .right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.prow .oqn{font-size:var(--fs-sm);color:var(--tx2)}
.prow .oqn b{color:var(--tx2);font-weight:500}
.prow .oqn.hot b{color:var(--warn-tx);font-weight:600}

/* documents / recall cards */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.doc{display:block;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:14px 15px;text-decoration:none;transition:border-color .14s ease,transform .12s ease}
.doc:hover{border-color:var(--tx3);transform:translateY(-1px)}
.doc b{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:3px}
.doc span{font-size:12px;color:var(--tx2)}
.recall{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.rc{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px 15px;
  text-decoration:none;display:block}
.rc:hover{border-color:var(--tx3)}
.rc .score{font-family:var(--f-mono);font-size:12px;color:var(--accent);float:right}
.rc b{display:block;font-size:var(--fs-sm);margin-bottom:4px}
.rc p{margin:0;font-size:var(--fs-sm);color:var(--tx2);line-height:1.45}

/* money / deferred rows */
.mlist{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.mrow{padding:13px 16px;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow .mh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mrow .mh b{font-size:var(--fs);font-weight:600}
.mrow p{margin:5px 0 0;font-size:var(--fs-sm);color:var(--tx2);line-height:1.5;max-width:74ch}

details.gate{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:0}
details.gate>summary{padding:12px 16px;font-size:var(--fs-sm);color:var(--tx2);cursor:pointer;list-style:none}
details.gate>summary::-webkit-details-marker{display:none}
details.gate>summary::before{content:'▸ ';color:var(--tx2)}
details.gate[open]>summary::before{content:'▾ '}
details.gate .tw{border:0;border-top:1px solid var(--line);border-radius:0}
.foot{margin-top:14px;font-size:12px;color:var(--tx2);max-width:74ch}

/* live run status line */
.runline{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--accent);
  background:var(--accent-soft);border-radius:var(--r);font-size:var(--fs-sm);color:var(--accent);
  margin-bottom:16px}
.runline .spin{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none;
  animation:breathe 1.1s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}
.runline .t{margin-left:auto;font-family:var(--f-mono);font-size:12px;opacity:.8}
.runline.done{border-color:var(--line-strong);background:var(--surface2);color:var(--tx2)}
.runline.done .spin{animation:none;opacity:.5}
.runline.warn{border-color:var(--warn-tx);background:var(--warn-bg);color:var(--warn-tx)}
.runline.warn .spin{animation:none}

/* intro */
.intro{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);min-height:calc(100vh - 56px);
  display:flex;flex-direction:column;justify-content:center}
.intro .kicker{font-size:var(--fs-lab);letter-spacing:.1em;text-transform:uppercase;color:var(--tx2);
  margin-bottom:16px}
.intro h1{font-size:clamp(30px,3.6vw,44px);line-height:1.12;max-width:19ch;text-wrap:balance}
.intro .lede{margin-top:18px;max-width:66ch;font-size:var(--fs-lg);line-height:1.5;color:var(--tx2)}
.intro .lede b{color:var(--tx);font-weight:600}
.introgrid{display:flex;gap:16px;align-items:center;margin-top:32px;flex-wrap:wrap}
.qr{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r);
  padding:10px 14px;background:var(--surface);text-decoration:none}
.qr:hover{border-color:var(--tx3)}
.qrbox{width:44px;height:44px;flex:none;border-radius:3px;
  background-image:linear-gradient(90deg,var(--tx) 2px,transparent 2px),
                   linear-gradient(0deg,var(--tx) 2px,transparent 2px);
  background-size:6px 6px;background-color:var(--surface2);border:1px solid var(--line-strong);opacity:.85}
.qr b{display:block;font-size:var(--fs-sm)}
.qr span{font-size:12px;color:var(--tx2)}
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero{margin:0}
.hero img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;border-radius:6px;border:1px solid var(--line);display:block}
.hero figcaption{font-size:12px;color:var(--tx2);margin-top:8px;max-width:48ch}
.spec{margin:40px 0 0;padding-top:18px;border-top:1px solid var(--line);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 22px;font-size:var(--fs-sm)}
.spec dt{font-size:var(--fs-lab);letter-spacing:.06em;text-transform:uppercase;color:var(--tx2);font-weight:500;margin-bottom:3px}
.spec dd{margin:0}

/* loading / failure — never a blank page */
.note{padding:20px 0;color:var(--tx2);font-size:var(--fs-sm)}
.note .btn{margin-left:10px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:860px){
  .intro-grid{grid-template-columns:1fr}
  .prow{grid-template-columns:1fr;gap:8px}
  .prow .right{align-items:flex-start;text-align:left}
  .nav{gap:10px;height:auto;padding:10px var(--pad);flex-wrap:wrap}
  .navright{margin-left:0}
  .actions{margin-left:0}
}

/* refusals: the one case shown large, the way a judge reads it */
.refusals{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.refusal{border:1px solid var(--line);border-left:3px solid var(--warn-tx);border-radius:var(--r);background:var(--surface);padding:14px 16px}
.refusal-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;margin-bottom:10px}
.refusal .strike{font-size:var(--fs);margin-bottom:8px}
.refusal .strike s{color:var(--warn-tx);text-decoration-thickness:2px}
.refusal .verdict{margin:0 0 10px;padding:8px 12px;background:var(--warn-bg);border-radius:3px;
  font-size:var(--fs-sm);color:var(--warn-tx);line-height:1.45}
.refusal .stands{font-size:var(--fs-sm)}
.refusal .stands b{color:var(--ok-tx)}

/* ============ bonus-model surfaces (Gemma triage · Veo strip · Lyria) ==== */
/* Advisory Gemma labels on open questions — visually a tag, never a verdict */
.triage{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:3px;
  font-size:11px;font-weight:500;letter-spacing:.02em;background:var(--unk-bg);color:var(--unk-tx);
  border:1px dashed var(--line-strong);cursor:help;white-space:nowrap}
.triage.safety{background:var(--warn-bg);color:var(--warn-tx);border-color:var(--warn-tx)}
.triage.dispute{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

.veo-strip{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:center;
  margin-top:34px;padding:16px;border:1px solid var(--line);border-radius:6px;background:var(--surface2)}
.veo-strip video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;display:block;
  border:1px solid var(--line)}
.veo-strip b{font-size:var(--fs-sm)}
.veo-strip p{margin:6px 0 0;font-size:var(--fs-sm);color:var(--tx2);max-width:64ch}
@media (max-width:720px){.veo-strip{grid-template-columns:1fr}}

.sndbtn{margin-left:14px;flex:none;border:1px solid currentColor;background:transparent;
  border-radius:3px;font-size:12px;padding:2px 8px;opacity:.85}
.sndbtn:hover{opacity:1}
.sndbtn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.runline.done .sndbtn,.runline.warn .sndbtn{display:none}