/* Parallax — site styles: a control-room panel, not a landing page */
:root {
  --bg: #141618;
  --panel: #1b1e21;
  --panel-2: #23272b;
  --line: #2d3237;
  --line-soft: #24282c;
  --text: #e9e6df;
  --muted: #8f959c;
  --dim: #6a7077;
  --amber: #ffb000;   /* oracle */
  --cyan: #4fd1e0;    /* DEX */
  --ok: #5fcf86;
  --watch: #f0c14b;
  --alert: #ff5a4e;
  --stale: #c58bff;
  --head: "Archivo", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
  --rail: 232px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/1.55 var(--mono); font-stretch: 87.5%; -webkit-font-smoothing: antialiased; }
svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--head); font-stretch: 75%; font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; margin: 0 0 0.4em; }
h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.oracle-c { color: var(--amber); }
.dex-c { color: var(--cyan); }

/* ---------- app shell ---------- */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 20px 0; background: #111315; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 20px 22px; text-decoration: none; font-family: var(--head); font-stretch: 75%; font-weight: 800; font-size: 1.35rem; letter-spacing: 0; }
.brand svg { width: 28px; height: 28px; }
.rail nav { display: flex; flex-direction: column; }
.rail nav a { display: flex; justify-content: space-between; align-items: center; padding: 9px 20px; text-decoration: none; color: var(--muted); border-left: 2px solid transparent; }
.rail nav a:hover { color: var(--text); background: var(--panel); }
.rail nav a[aria-current="page"] { color: var(--text); border-left-color: var(--amber); background: var(--panel); }
.rail nav .count { font-size: 0.75rem; color: var(--dim); }
.rail-foot { margin-top: auto; padding: 16px 20px 0; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--dim); line-height: 1.5; }
.rail-foot .clock { color: var(--text); font-size: 1.05rem; }

.main { min-width: 0; display: flex; flex-direction: column; }
.content { padding: 24px 28px 64px; flex: 1; }

/* status strip along the top of every page */
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 10px 28px; border-bottom: 1px solid var(--line); background: #17191b; font-size: 0.8rem; color: var(--muted); position: sticky; top: 0; z-index: 30; }
.strip .state { display: flex; align-items: center; gap: 8px; color: var(--text); }
.strip .sim { margin-left: auto; color: var(--dim); }
.strip b { color: var(--text); font-weight: 500; }

/* ---------- lamps (status lights) ---------- */
.lamp { display: inline-block; width: 9px; height: 9px; background: var(--dim); flex: none; }
.lamp.ok { background: var(--ok); box-shadow: 0 0 8px rgba(95, 207, 134, 0.55); }
.lamp.watch { background: var(--watch); box-shadow: 0 0 8px rgba(240, 193, 75, 0.55); }
.lamp.alert { background: var(--alert); box-shadow: 0 0 10px rgba(255, 90, 78, 0.7); }
.lamp.stale { background: var(--stale); box-shadow: 0 0 10px rgba(197, 139, 255, 0.6); }
.lamp.open { background: var(--ok); }
.lamp.closed { background: var(--dim); box-shadow: none; outline: 1px solid var(--muted); outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .lamp.alert, .lamp.stale { animation: blink 1.1s steps(2, start) infinite; }
}
@keyframes blink { to { opacity: 0.35; } }
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; }
.st.ok { color: var(--ok); } .st.watch { color: var(--watch); } .st.alert { color: var(--alert); } .st.stale { color: var(--stale); }

/* ---------- panels ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); }
.panel + .panel { margin-top: 16px; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2, .panel-head h3 { margin: 0; font-size: 1.1rem; }
.panel-head .meta { color: var(--dim); font-size: 0.78rem; }
.panel-body { padding: 16px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.grid-2 .panel + .panel { margin-top: 0; }
.page-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 20px; }
.page-title p { margin: 0; color: var(--muted); max-width: 62ch; }

/* ---------- counters ---------- */
.counters { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--panel); margin-bottom: 16px; }
.counter { padding: 14px 16px; }
.counter + .counter { border-left: 1px solid var(--line); }
.counter .v { font-family: var(--head); font-stretch: 75%; font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.counter .k { color: var(--muted); font-size: 0.78rem; margin-top: 6px; }

/* ---------- the feed board ---------- */
table.board { width: 100%; border-collapse: collapse; }
.board th { text-align: left; font-weight: 400; color: var(--dim); font-size: 0.74rem; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.board td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; white-space: nowrap; }
.board tbody tr { cursor: pointer; }
.board tbody tr:hover td { background: var(--panel-2); }
.board tr:last-child td { border-bottom: 0; }
.board .r { text-align: right; font-variant-numeric: tabular-nums; }
.board .sym { font-family: var(--head); font-stretch: 75%; font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.board .sub { display: block; color: var(--dim); font-size: 0.72rem; }

/* deviation scope: needle on a −5%…+5% scale with watch and alert zones (signature element) */
.scope { position: relative; width: 190px; height: 26px; }
.scope .track { position: absolute; left: 0; right: 0; top: 11px; height: 4px; background:
  linear-gradient(90deg, rgba(255,90,78,.55) 0 20%, rgba(240,193,75,.45) 20% 40%, rgba(95,207,134,.35) 40% 60%, rgba(240,193,75,.45) 60% 80%, rgba(255,90,78,.55) 80% 100%); }
.scope .tick { position: absolute; top: 6px; width: 1px; height: 14px; background: var(--line); }
.scope .zero { left: 50%; background: var(--muted); }
.scope .needle { position: absolute; top: 1px; width: 3px; height: 24px; margin-left: -1px; background: var(--text); box-shadow: 0 0 6px rgba(233,230,223,.6); }
@media (prefers-reduced-motion: no-preference) {
  .scope .needle { transition: left 0.8s cubic-bezier(.3,.7,.3,1); }
}
.scope.big { width: 100%; height: 40px; }
.scope.big .track { top: 17px; height: 6px; }
.scope.big .tick { top: 10px; height: 20px; }
.scope.big .needle { height: 38px; width: 4px; }
.scope-labels { display: flex; justify-content: space-between; color: var(--dim); font-size: 0.7rem; margin-top: 4px; }

.dev { font-variant-numeric: tabular-nums; }
.dev.ok { color: var(--text); } .dev.watch { color: var(--watch); } .dev.alert { color: var(--alert); } .dev.stale { color: var(--stale); }
.spark { width: 120px; height: 28px; }
.sig { font-size: 0.75rem; padding: 2px 8px; border: 1px solid var(--line); color: var(--muted); }
.sig.caution { color: var(--watch); border-color: rgba(240,193,75,.4); }
.sig.pause_borrowing { color: var(--alert); border-color: rgba(255,90,78,.5); }

/* ---------- charts ---------- */
.chart svg { width: 100%; height: auto; }
.chart .ax { font-family: var(--mono); font-size: 10.5px; fill: var(--dim); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.78rem; color: var(--muted); }
.legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 6px; }
.seg { display: inline-flex; border: 1px solid var(--line); }
.seg button { background: none; border: 0; padding: 6px 12px; cursor: pointer; color: var(--muted); font-size: 0.8rem; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); }
.facts { display: grid; grid-template-columns: 1fr auto; gap: 0; margin: 0; }
.facts dt, .facts dd { padding: 9px 0; border-bottom: 1px solid var(--line-soft); margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { text-align: right; font-variant-numeric: tabular-nums; }
.feed-tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); margin-bottom: 16px; width: fit-content; max-width: 100%; }
.feed-tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.feed-tabs a + a { border-left: 1px solid var(--line); }
.feed-tabs a[aria-current="page"] { background: var(--panel-2); color: var(--text); }
.readout { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.readout > div { padding: 14px 16px; min-width: 0; }
.readout > div + div { border-left: 1px solid var(--line); }
.readout .k { color: var(--muted); font-size: 0.76rem; }
.readout .v { font-family: var(--head); font-stretch: 75%; font-size: 1.7rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* ---------- incidents ---------- */
.inc-list { list-style: none; margin: 0; padding: 0; }
.inc { display: grid; grid-template-columns: 100px 70px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.inc:last-child { border-bottom: 0; }
.inc .when { color: var(--muted); font-size: 0.8rem; }
.inc .sym { font-family: var(--head); font-stretch: 75%; font-weight: 700; font-size: 1.05rem; }
.inc .what { min-width: 0; }
.inc .what small { display: block; color: var(--dim); font-size: 0.75rem; }
.inc .peak { text-align: right; font-variant-numeric: tabular-nums; }
.inc.ongoing { background: rgba(255,90,78,.05); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
select { background: var(--panel); border: 1px solid var(--line); padding: 7px 10px; }
.timeline { padding: 16px; overflow-x: auto; }
.empty { padding: 28px 16px; color: var(--muted); text-align: center; }

/* ---------- alerts ---------- */
.form-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.form-row label { display: block; color: var(--muted); font-size: 0.75rem; margin-bottom: 6px; }
.form-row select, .form-row input { width: 100%; background: var(--bg); border: 1px solid var(--line); padding: 9px 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; text-decoration: none; font-size: 0.85rem; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn-amber { background: var(--amber); border-color: var(--amber); color: #1a1300; font-weight: 600; }
.btn-amber:hover { background: #ffc233; border-color: #ffc233; }
.btn-sm { padding: 5px 10px; font-size: 0.78rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.rule { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.rule:last-child { border-bottom: 0; }
.rule .desc small { display: block; color: var(--dim); font-size: 0.75rem; }
pre.code { margin: 0; padding: 16px; background: #101214; border-top: 1px solid var(--line); overflow-x: auto; font: 0.8rem/1.6 var(--mono); color: #cfd3d6; }
.tok-k { color: var(--cyan); } .tok-s { color: var(--amber); } .tok-n { color: var(--ok); }
.form-error { color: var(--alert); font-size: 0.8rem; min-height: 1.3em; margin: 8px 0 0; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.toggle { position: relative; width: 40px; height: 22px; flex: none; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.toggle span { position: absolute; inset: 0; background: var(--panel-2); border: 1px solid var(--line); }
.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--muted); transition: transform .15s; }
.toggle input:checked + span { border-color: var(--amber); }
.toggle input:checked + span::after { transform: translateX(18px); background: var(--amber); }
.toggle input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- token + docs ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--panel); }
.plan { padding: 20px; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan.active { box-shadow: inset 0 3px 0 var(--amber); background: var(--panel-2); }
.plan .hold { font-family: var(--head); font-stretch: 75%; font-size: 1.6rem; font-weight: 700; margin: 4px 0 12px; }
.plan ul { list-style: none; padding: 0; margin: 0; color: var(--muted); }
.plan li { padding: 7px 0; border-top: 1px solid var(--line-soft); }
.burn { font-family: var(--head); font-stretch: 75%; font-weight: 800; font-size: clamp(3rem, 9vw, 6rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--amber); }
.uses { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.uses div { padding: 18px; }
.uses div + div { border-left: 1px solid var(--line); }
.uses p { color: var(--muted); margin: 0; font-size: 0.88rem; }
.note { border-left: 2px solid var(--amber); padding: 10px 14px; background: var(--panel); color: var(--muted); font-size: 0.88rem; }
.hold-field input { background: var(--bg); border: 1px solid var(--line); padding: 9px 10px; width: 220px; max-width: 100%; }
.docs { max-width: 760px; }
.docs section { padding: 20px 0; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 60px; }
.docs p, .docs li { color: #cfd0cc; }
.docs code { background: var(--panel-2); padding: 1px 5px; font-size: 0.9em; }
.docs .panel { margin-top: 12px; }
.toc { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; margin-bottom: 8px; }
.toc a { color: var(--muted); }

/* ---------- toast, footer ---------- */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(16px); background: var(--text); color: var(--bg); padding: 10px 16px; font-size: 0.85rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 100; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.foot { border-top: 1px solid var(--line); padding: 16px 28px; color: var(--dim); font-size: 0.75rem; line-height: 1.6; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: 1fr; }
  .board .hide-md { display: none; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail, .rail nav { min-width: 0; max-width: 100%; }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 12px 16px; }
  .rail nav { flex-direction: row; overflow-x: auto; width: 100%; border-top: 1px solid var(--line); }
  .rail nav a { border-left: 0; border-bottom: 2px solid transparent; padding: 10px 14px; white-space: nowrap; gap: 8px; }
  .rail nav a[aria-current="page"] { border-bottom-color: var(--amber); }
  .rail-foot { display: none; }
  .strip { padding: 8px 16px; position: static; }
  .strip .sim { margin-left: 0; }
  .content { padding: 18px 16px 48px; }
  .foot { padding: 16px; }
  .counters, .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout > div { overflow-wrap: anywhere; }
  .readout .v { font-size: 1.4rem; }
  .counter:nth-child(3), .readout > div:nth-child(3) { border-left: 0; }
  .counter:nth-child(n+3), .readout > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .plans, .uses { grid-template-columns: 1fr; }
  .plan + .plan, .uses div + div { border-left: 0; border-top: 1px solid var(--line); }
  .form-row { grid-template-columns: 1fr 1fr; }
  .form-row .btn { grid-column: 1 / -1; }
  .inc { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .inc .when { grid-column: 1 / -1; }
  /* board → stacked cards */
  table.board thead { display: none; }
  table.board, .board tbody, .board tr, .board td { display: block; width: 100%; }
  .board tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
  .board td { padding: 0; border: 0; white-space: normal; }
  .board td.c-scope { grid-column: 1 / -1; }
  .board td.c-scope .scope { width: 100%; }
  .board td.c-spark, .board .hide-sm { display: none; }
  .board td.r { text-align: right; }
}