/* ═══ Mogo — shared design tokens + shell ═══
   Single source of truth for the six routes. The prototypes are the spec:
   chart-as-surface, no boxes, rules not headers, serif thesis / mono data. */
:root{
  --ink:#070A0F; --ink-2:#0D131A; --ink-3:#141C26; --ink-4:#1C2735;
  --line:rgba(132,148,166,.14); --line-2:rgba(132,148,166,.26);
  --paper:#EFEAE0; --on-paper:#11161D;
  --bull:#2FC28C; --bear:#E85F56; --neutral:#D69C35;
  --text:#E4EBF2; --muted:#8A99AB; --muted-2:#606D7B;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--text);font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--bull);outline-offset:3px}
.wrap{width:100%;margin:0;padding:0 clamp(24px,3.2vw,56px);position:relative;z-index:2}

/* fixed canvases (tape / lattice) + veil */
.bgcv{position:fixed;inset:0;z-index:0;pointer-events:none}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,15,.30) 0%,rgba(7,10,15,.28) 34%,rgba(7,10,15,.68) 74%,rgba(7,10,15,.93) 100%)}

/* masthead + view switch */
.mast{padding:14px 0;display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:9px}
.brand h1{font-family:'Instrument Serif',serif;font-size:25px;font-weight:400}
.brand span{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.18em;color:var(--muted-2);text-transform:uppercase}
.views{display:flex;gap:3px;margin-left:10px;flex-wrap:wrap}
.view{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;padding:6px 12px;
  color:var(--muted-2);border-bottom:2px solid transparent;transition:.15s;display:inline-block}
.view:hover{color:var(--text)} .view.on{color:var(--text);border-bottom-color:var(--bull)}
.live{display:flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);margin-left:auto}
.dot{width:6px;height:6px;border-radius:50%;background:var(--bull);animation:beat 2.8s ease-in-out infinite}
.dot.dead{background:var(--muted-2);animation:none}
@keyframes beat{0%,100%{box-shadow:0 0 0 0 rgba(47,194,140,.55)}50%{box-shadow:0 0 0 6px rgba(47,194,140,0)}}

/* section label — a rule, not a header bar */
.lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted-2);
  margin:0 0 15px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lbl .rule{flex:1;height:1px;background:var(--line);min-width:40px}
.lbl .h{letter-spacing:.02em;text-transform:none;opacity:.75}
.lbl a.more,.lbl button.more{letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.lbl a.more:hover,.lbl button.more:hover{color:var(--text);border-color:var(--muted)}

/* freshness chips — the honesty layer */
.sf{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;padding:2px 6px;border-radius:2px;white-space:nowrap;flex-shrink:0}
.sf.ok{background:rgba(47,194,140,.13);color:var(--bull)}
.sf.stale{background:rgba(214,156,53,.13);color:var(--neutral)}
.sf.off{background:rgba(132,148,166,.1);color:var(--muted-2)}
.sf.err{background:rgba(232,95,86,.13);color:var(--bear)}
.sf.gate{background:rgba(123,143,168,.15);color:#A8B8C9;border:1px solid rgba(123,143,168,.25)}
.noval{color:var(--muted-2);font-style:italic;font-weight:400}
.gapnote{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted-2);line-height:1.6;padding:10px 0;font-style:italic}

/* wire — field dispatches */
.w{display:grid;grid-template-columns:36px 1fr;gap:11px;padding:12px 8px 12px 10px;
  border-bottom:1px solid var(--line);border-left:2px solid transparent;transition:.16s;animation:land .5s ease both}
@keyframes land{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.w:hover{background:rgba(132,148,166,.04)}
.w.trump{border-left-color:rgba(232,95,86,.45);background:linear-gradient(90deg,rgba(232,95,86,.04),transparent 45%)}
.w.hormuz{border-left-color:rgba(214,156,53,.45);background:linear-gradient(90deg,rgba(214,156,53,.04),transparent 45%)}
.w.warsh{border-left-color:rgba(132,148,166,.4)}
.wav{width:36px;height:36px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.05em;flex-shrink:0;
  background:rgba(132,148,166,.06);border:1px solid var(--line-2);color:var(--muted)}
.w.trump .wav{border-color:rgba(232,95,86,.4);color:var(--bear)}
.w.hormuz .wav{border-color:rgba(214,156,53,.4);color:var(--neutral)}
.wtop{display:flex;align-items:center;gap:7px;margin-bottom:3px;flex-wrap:wrap}
.wn{font-weight:600;font-size:12.5px}
.wsev{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.1em;padding:2px 5px;border-radius:2px;text-transform:uppercase}
.wsev.hi{background:rgba(232,95,86,.16);color:var(--bear)}
.wsev.md{background:rgba(214,156,53,.16);color:var(--neutral)}
.wsev.lo{background:rgba(132,148,166,.12);color:var(--muted)}
.wt{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted-2);margin-left:auto}
.wb{font-size:12.5px;line-height:1.5;color:#A9B6C3}
.wf{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--muted-2);margin-top:5px}

/* floating overlay */
.scrim{position:fixed;inset:0;background:rgba(3,5,8,.82);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:.22s;z-index:50}
.scrim.on{opacity:1;pointer-events:auto}
.float{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);
  width:min(720px,calc(100vw - 32px));max-height:min(86vh,720px);overflow-y:auto;
  background:var(--ink-2);border:1px solid var(--line-2);border-radius:5px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);opacity:0;pointer-events:none;
  transition:opacity .24s cubic-bezier(.2,.9,.3,1),transform .24s cubic-bezier(.2,.9,.3,1);z-index:60}
.float.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.fh{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 15px;border-bottom:1px solid var(--line)}
.ft{font-family:'Instrument Serif',serif;font-size:27px;line-height:1.15}
.fs{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;color:var(--muted-2);margin-top:5px;text-transform:uppercase}
.fx{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted-2);border:1px solid var(--line-2);border-radius:2px;padding:5px 9px;flex-shrink:0}
.fx:hover{color:var(--text)}
.fb{padding:22px 24px 26px}
.fviz{padding:4px 0 18px} .fviz svg{width:100%;display:block;overflow:visible}
.fn{font-size:14px;line-height:1.65;color:#B4C0CC} .fn b{color:var(--text);font-weight:500} .fn+.fn{margin-top:11px}
.fm{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.fm .l{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.chip{font-family:'IBM Plex Mono',monospace;font-size:10px;padding:4px 9px;border-radius:2px;border:1px solid var(--line-2);color:var(--muted)}
.chip.b{border-color:rgba(47,194,140,.4);color:var(--bull)}
.chip.r{border-color:rgba(232,95,86,.4);color:var(--bear)}

/* track record — honest empty, shared by council/record/agents */
.frec{margin-top:16px;padding:14px;background:var(--ink);border:1px solid var(--line);border-radius:4px}
.frec .rl{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-bottom:9px}
.frow{display:flex;gap:26px;flex-wrap:wrap}
.fstat .k{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.fstat .v{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;margin-top:2px;color:var(--muted)}
.flock{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted-2);line-height:1.6;margin-top:10px}

footer{padding:18px 0 34px;border-top:1px solid var(--line);position:relative;z-index:2}
.disc{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--muted-2)}
.disc a{color:var(--muted);border-bottom:1px solid var(--line-2)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
