/* ainet · page.css — only what signal.css and appmock.css do not cover. Tokens only, no literal colours. */

/* accent: output of `rebrand.mjs "#3df5c4"` (sonar mint) */
:root {
  --sig: #3df5c4; --sig-hi: #74ffcd; --sig-2: #0ec7c2; --sig-3: #0bafc1; --on-sig: #001c13; --sig-text-light: #077e62;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink-panel: linear-gradient(135deg, #081d16, #0f1113 60%); } }
:root[data-theme="dark"], :root:not([data-theme="light"]) .immersive, :root[data-theme="light"] :is(.hero, .story, .code, .foot) { --ink-panel: linear-gradient(135deg, #081d16, #0f1113 60%); }

/* header: no login control, so the theme toggle takes the right edge when the nav hides */
@media (max-width: 900px) { .top .ctl { margin-left: auto; } }

/* hero + HUD */
.hero-shade { opacity: .8; } /* the canvas is already dark */
.hud .metric { color: var(--fg); }
.c4 { --c: var(--d4); }
.cs { --c: var(--sig); }
.hud .rows { min-height: 186px; align-content: start; } /* four rows: the autocycling breakdown never resizes the HUD */
.hud .rows li { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 64px; }
.hud.pending .mix { background: var(--line-2); }
.hud.pending .mix i { display: none; }
.hud.pending .live { color: var(--fg-3); }
.hud.pending .live::before { background: var(--fg-3); animation: none; }

/* statement: accent glow in each versus card (kit example pattern) */
.vs::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, var(--sig-a08), transparent 55%); transition: opacity var(--dur-base); }
.vs:hover::before { opacity: 1; }

/* story */
.story canvas { background: var(--void-deep); }
.statgrid b { transition: opacity var(--dur-base); }
.statgrid b.off { opacity: .35; }

/* tour: the slides are live panes, not pictures, so hidden ones must leave the tab order */
.tab .mono { font-size: .94em; }
.tour .stage { aspect-ratio: auto; height: clamp(600px, 41vw, 820px); } /* a live pane needs real height; min-height + aspect-ratio would force a min width */
.stage > .slide { visibility: hidden; transition: opacity var(--dur-base), transform var(--dur-data) var(--ease-out), visibility 0s var(--dur-base); }
.stage > .slide.on { visibility: visible; transition-delay: 0s; }
.pane { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); overflow-y: auto; text-align: left;
  background: var(--bg); color: var(--fg); font-size: clamp(13.5px, 1.05cqw, 17px); line-height: 1.4;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.pane .muted { color: var(--fg-3); }
.pane .am-kpis, .pane .am-card { flex: none; }
.pane .am-card.grow { flex: 1 1 auto; min-height: 144px; }
.pane .am-card > h5 { font-size: .74em; }

.qbar { display: flex; align-items: center; gap: var(--s2); flex: none; height: 52px; padding: 0 var(--s3); border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--line-2); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.qbar:focus-within { border-color: var(--sig-text); box-shadow: 0 0 0 3px var(--sig-a22); }
.qbar > svg { width: 18px; height: 18px; color: var(--fg-3); }
.qbar input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--fg); font: 500 16px/1 var(--f-body); }
.qbar input::placeholder { color: var(--fg-3); }
.q-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); flex: none; font-size: .88em; color: var(--fg-3); }
.q-row .seg { margin-left: auto; }
.hint { height: 28px; padding: 0 var(--s3); border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent; color: var(--fg-2);
  font: 500 12px/1 var(--f-mono); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast); }
.hint:hover { color: var(--fg); border-color: var(--fg-3); }
.q-meta { flex: none; min-height: 1.3em; font: 400 .8em/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }

.res-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: var(--s2);
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.res { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); gap: var(--s3); width: 100%; padding: var(--s3); text-align: left; cursor: pointer;
  border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); font-size: inherit; line-height: inherit;
  transition: border-color var(--dur-fast), background var(--dur-fast); }
.res:hover { border-color: var(--sig-a60); }
.res-score > b { display: block; font-size: 2.1em; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.res-score > small, .pane-score small { display: block; margin-top: 3px; font: 400 .7em/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.why { display: flex; gap: 2px; height: 5px; margin-top: var(--s2); }
.why i { display: block; height: 100%; border-radius: 3px; overflow: hidden; background: var(--line-2); }
.why i b { display: block; height: 100%; background: var(--sig-text); }
.res-main { display: grid; gap: 3px; min-width: 0; }
.res-head { display: flex; flex-wrap: wrap; align-items: center; gap: 3px var(--s2); min-width: 0; }
.res-head > b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.12em; font-weight: 600; letter-spacing: var(--ls-tight); }
.res-meta { margin-left: auto; font: 400 .82em/1.3 var(--f-mono); color: var(--fg-3); white-space: nowrap; }
.res-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 .8em/1.3 var(--f-mono); color: var(--fg-3); }
.res-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .94em; color: var(--fg-2); overflow-wrap: anywhere; }
.res-tools { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; margin-top: 3px; }
.res-tools .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-family: var(--f-mono); font-weight: 500; }

.pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); flex: none; }
.pane-head > div:first-child { min-width: 0; }
.pane-head h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 5px var(--s2); font-size: 1.5em; font-weight: 650; letter-spacing: -.03em; overflow-wrap: anywhere; }
.pane-head h4 .st { font-size: .56em; letter-spacing: 0; }
.pane-head p { margin-top: 3px; font: 400 .82em/1.4 var(--f-mono); color: var(--fg-3); overflow-wrap: anywhere; }
.pane-score { flex: none; text-align: right; }
.pane-score b { display: block; font-size: 2.5em; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.pane-cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: var(--s2); }
.stack { display: grid; align-content: start; gap: var(--s2); min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.stack .res-tools { margin-top: 0; }
.raw { flex: 1 1 auto; min-height: 0; margin: 0; overflow: auto; white-space: pre; tab-size: 2; font: 400 .82em/1.5 var(--f-mono); color: var(--fg-2); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.pane > .res-desc { flex: none; max-width: 80ch; }
.kv { display: grid; margin: 0; font-size: .92em; }
.kv div { display: flex; justify-content: space-between; gap: var(--s3); padding: 5px 0; border-bottom: 1px solid var(--line); }
.kv div:last-child { border-bottom: 0; }
.kv dt { color: var(--fg-3); white-space: nowrap; }
.kv dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.why-rows { display: grid; gap: var(--s3); padding-block: 3px; }
.why-row { display: grid; grid-template-columns: 5em minmax(0, 1fr) 4.6em; gap: var(--s3); align-items: center; }
.why-row > span { font: 500 .8em/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.why-row .track { height: 8px; border-radius: 9px; overflow: hidden; background: var(--line-2); }
.why-row .track i { display: block; height: 100%; border-radius: 9px; background: var(--grad-sig-bar); }
.why-row > b { text-align: right; font-weight: 600; white-space: nowrap; }
.why-row small { font-weight: 400; color: var(--fg-3); }
.hist { flex: 1 1 auto; min-height: 55px; display: flex; align-items: flex-end; gap: 3px; }
.hist i { flex: 1; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--line-2); }
.hist i.on { background: var(--sig-text); }
.axis { display: flex; justify-content: space-between; margin-top: 5px; font: 400 .72em/1 var(--f-mono); color: var(--fg-3); }

.strip { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.strip i { flex: 1; max-width: 21px; height: 100%; border-radius: 3px; background: var(--c, var(--line-2)); }
.strip i.s-down { height: 40%; } /* a missed probe is short as well as amber: never colour alone */
.s-open { --c: var(--d1); } .s-auth { --c: var(--d2); } .s-down { --c: var(--d3); } .s-paid { --c: var(--d4); }
.legend { display: flex; flex-wrap: wrap; gap: 5px var(--s3); margin-top: var(--s2); font-size: .8em; color: var(--fg-3); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.lat { flex: 1 1 auto; width: 100%; min-height: 55px; color: var(--sig-text); }

.flag { display: grid; gap: 5px; padding: var(--s3); border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); }
.flag-h { display: flex; flex-wrap: wrap; align-items: center; gap: 5px var(--s2); }
.flag-h code { font: 500 .9em/1.3 var(--f-mono); overflow-wrap: anywhere; }
.kinds { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.kinds .flag { gap: var(--s2); padding: var(--s4); }
.kinds .flag > span { color: var(--fg-2); }
.flag .ex { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 400 .84em/1.45 var(--f-mono); color: var(--fg-2); overflow-wrap: anywhere; }

.empty { flex: 1 1 auto; display: grid; place-content: center; justify-items: center; gap: var(--s2); padding: var(--s5) var(--s4); text-align: center; color: var(--fg-3); }
.empty svg { width: 28px; height: 28px; }
.empty b { font-size: 1.2em; font-weight: 600; color: var(--fg); }
.empty span { max-width: 34ch; }

@container (max-width: 600px) {
  .pane { padding: var(--s3); }
  .pane .am-kpis { --n: 2; }
  .pane-cols { flex: none; grid-template-columns: 1fr; grid-template-rows: auto; }
  .raw { max-height: 233px; }
  .kinds { grid-template-columns: 1fr; }
  .kinds .flag { padding: var(--s3); }
  .res { grid-template-columns: 3.4em minmax(0, 1fr); gap: var(--s2); }
  .res-score > b { font-size: 1.8em; }
  .res-meta { margin-left: 0; width: 100%; }
  .q-row .seg { margin-left: 0; }
}

/* bento: a live count beside each icon */
.bento .bt { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.bento em { font: 400 11.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; text-align: right; color: var(--fg-3); }
.bento em i { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg); }

/* connect: code blocks are always dark (they carry .immersive) */
.steps .step { display: flex; flex-direction: column; }
.step .code { margin-top: auto; }
.step p { margin-bottom: var(--s4); }
.code { border-radius: var(--r-md); background: var(--void-raise); border: 1px solid var(--line-2); overflow: hidden; }
.code-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 52px; padding: var(--s2) var(--s2) var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.code-h small { font: 400 11px/1 var(--f-mono); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-3); }
.code-h .seg { margin-left: -5px; }
.code pre { margin: 0; min-height: calc(5 * 1.6em + 2 * var(--s3)); padding: var(--s3); white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 13.5px/1.6 var(--f-mono); color: var(--fg); }
.copy { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 var(--s3) 0 var(--s2); border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--tile); color: var(--fg-2); font: 500 12.5px/1 var(--f-body);
  transition: color var(--dur-fast), border-color var(--dur-fast); }
.copy svg { width: 14px; height: 14px; }
.copy:hover { color: var(--fg); border-color: var(--fg-3); }
.copy.done { color: var(--sig); border-color: var(--sig-a60); }

/* footer */
.watermark i { padding-right: .08em; margin-right: -.08em; } /* tight tracking leaves the last glyph wider than its box: let the tint cover it */
.foot-links.mono { font-size: 13px; }
.foot-links span { color: var(--fg-3); }

@media (prefers-reduced-motion: reduce) {
  .vs::before, .statgrid b, .stage > .slide, .qbar, .hint, .res, .copy { transition: none; }
  .story canvas { opacity: .5; } /* all three steps sit over the final frame: keep the copy readable */
}

/* light theme: the hero, the scroll story, code and the footer stay dark screens; the statement and the closing turn to paper */
:root[data-theme="light"] :is(.statement, .final) { --void: #f3f4f6; }
:root[data-theme="light"] .big .dim { color: var(--fg-3); }
:root[data-theme="light"] .big em { color: var(--sig-text); } /* mint fails contrast on paper */
:root[data-theme="light"] :is(.final p, .trust) { color: var(--fg-2); }
:root[data-theme="light"] .final .btn-ghost { color: var(--fg); background: var(--tile); border-color: var(--line-2); }

/* language: one button, naming the language you would switch to */
.ctl.lang { min-width: 40px; padding: 0 12px; font: 600 12.5px/1 var(--f-mono); letter-spacing: .06em; }
.ctl.lang[aria-pressed="true"] { display: none; }