/* Zyloriso design tokens.
 *
 * The single definition of palette, type and scale. Both consumers read this
 * exact file: build.py prepends it to the public stylesheet, status-page.py
 * inlines it into the dashboard. Nothing downstream redeclares a token.
 *
 * The decision that drives everything: the page has no brand accent colour.
 * Ground, ink, rules, buttons and links are all neutral, and the only chroma
 * anywhere is the three verification outcomes. Colour therefore carries a
 * meaning rather than a mood, and a reader learns in one glance that anything
 * coloured is a verdict. It also separates this from every competitor, who
 * without exception run a purple or blue accent over white.
 *
 * The neutral is not a pure grey. It carries a slight green-cyan bias, the
 * colour of coated board and instrument housings, so it reads as chosen.
 *
 * The outcome trio is diverging: two poles and a neutral midpoint. Both poles
 * clear every validator check against both surfaces. Light pair CVD dE 25.7
 * and normal 31.0; dark pair CVD 25.7 and normal 31.9; contrast at least 3:1
 * on both. Against the midpoint the worst CVD separation is 9.3 and the worst
 * normal-vision separation 16.6, both above the floor. The midpoint sits below
 * the chroma floor on purpose, because a diverging scale needs a neutral
 * middle and not a third hue.
 */

:root {
  color-scheme: light;

  /* ground and ink */
  --paper:     #e8ebe8;
  --surface:   #f5f7f4;
  --surface-2: #dfe3df;
  --ink:       #141816;
  --ink-2:     #454e4a;
  --ink-3:     #78817c;
  --rule:      rgba(20, 24, 22, .17);
  --rule-2:    rgba(20, 24, 22, .09);

  /* the only chroma on the page: a verification outcome */
  --deliverable:   #2a78d6;
  --uncertain:     #7e8683;
  --undeliverable: #c0392f;
  --track:         #ccd9d4;   /* unfilled part of a meter */

  /* reserved operational status, dashboard only, never a series colour */
  --good:     #0f7a46;
  --warning:  #b37400;
  --critical: #c0392f;

  /* chart furniture, deliberately recessive */
  --grid: #d5dad6;
  --axis: #c2c8c3;

  /* type */
  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond:  "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs:  11.5px;
  --t-sm:  13px;
  --t-md:  15.5px;
  --t-lg:  19px;
  --t-xl:  26px;
  --t-2xl: 36px;
  --t-3xl: 52px;

  /* scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  /* Corners stay nearly square. A datasheet is ruled, not rounded, and a 12px
   * radius on every block is the look this design is avoiding. */
  --r: 2px;
  --r-pill: 999px;

  --rail:    184px;   /* width of the left label column */
  --measure: 66ch;
  --head-h:  56px;

  font-synthesis-weight: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:     #101312;
    --surface:   #181c1a;
    --surface-2: #232826;
    --ink:       #eef2ef;
    --ink-2:     #a5aeaa;
    --ink-3:     #79817d;
    --rule:      rgba(238, 242, 239, .17);
    --rule-2:    rgba(238, 242, 239, .08);

    --deliverable:   #3987e5;
    --undeliverable: #d03b3b;
    --track:         #253c33;

    --good:     #31a86a;
    --warning:  #d99b16;
    --critical: #d03b3b;

    --grid: #262b29;
    --axis: #343a37;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:     #101312;
  --surface:   #181c1a;
  --surface-2: #232826;
  --ink:       #eef2ef;
  --ink-2:     #a5aeaa;
  --ink-3:     #79817d;
  --rule:      rgba(238, 242, 239, .17);
  --rule-2:    rgba(238, 242, 239, .08);

  --deliverable:   #3987e5;
  --undeliverable: #d03b3b;
  --track:         #253c33;

  --good:     #31a86a;
  --warning:  #d99b16;
  --critical: #d03b3b;

  --grid: #262b29;
  --axis: #343a37;
}

/* Public site. Product blocks: a text column beside a working artifact (a
 * result card, a results table, code in three dialects). Rules part the
 * blocks; nothing is a card. Tokens come from tokens.css. */

* { box-sizing: border-box; margin: 0 }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { transition: none !important; animation: none !important }
}

body {
  background: var(--paper); color: var(--ink);
  font: 400 var(--t-md)/1.62 var(--sans);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100% }
[hidden] { display: none !important }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
a:hover { text-decoration-color: var(--ink-3) }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
:target, section[id], .doc h2[id] { scroll-margin-top: calc(var(--head-h) + var(--s5)) }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s5) }
@media (max-width: 640px) { .wrap { padding: 0 var(--s4) } }

.skip { position: absolute; left: -9999px; top: var(--s2); z-index: 60; background: var(--surface); padding: var(--s2) var(--s4); border: 1px solid var(--ink) }
.skip:focus { left: var(--s4) }

/* ── masthead ──────────────────────────────────────────────────────────── */
.mast { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule) }
.mast-in { max-width: 1120px; margin: 0 auto; padding: 0 var(--s5); height: var(--head-h); display: flex; align-items: center; gap: var(--s5) }
@media (max-width: 640px) { .mast-in { padding: 0 var(--s4); gap: var(--s4) } }
.wordmark { font: 600 17px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; margin-right: auto; white-space: nowrap }
.wordmark:hover { text-decoration: none }
.wordmark i { display: inline-block; width: 7px; height: 7px; margin-right: 9px; background: var(--deliverable); vertical-align: 1px }
.mast-nav { display: flex; gap: var(--s5); align-items: center }
.mast-nav a { font: 400 var(--t-xs)/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); text-decoration: none }
.mast-nav a:hover, .mast-nav a[aria-current="page"] { color: var(--ink) }
.mast-nav a.key { color: var(--ink); border: 1px solid var(--ink); padding: 8px 12px; border-radius: var(--r) }
.mast-nav a.key:hover { background: var(--ink); color: var(--paper) }
@media (max-width: 560px) { .mast-nav a.opt { display: none } }

/* ── labels and type ───────────────────────────────────────────────────── */
.eyebrow { font: 500 var(--t-xs)/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3) }
h1, h2, h3 { font-family: var(--cond); font-weight: 600; text-wrap: balance }
h1 { font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -.012em }
h2 { font-size: var(--t-2xl); line-height: 1.08; letter-spacing: -.01em }
h3 { font-size: var(--t-md); line-height: 1.3 }
@media (max-width: 640px) { h1 { font-size: var(--t-2xl) } h2 { font-size: var(--t-xl) } }
.lede { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2); max-width: 46ch; margin-top: var(--s4) }
.prose { color: var(--ink-2); max-width: var(--measure) }
.prose + .prose { margin-top: var(--s3) }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums }

/* ── blocks ──────────────────────────────────────────────────────────────
 * Text on one side, the working artifact on the other. Even blocks swap
 * sides so the page does not read as a single column of the same shape. */
.block { padding: var(--s8) 0; border-top: 1px solid var(--rule) }
.block:first-of-type { border-top: 0 }
.block-in { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s7); align-items: start }
.block.flip .block-in { grid-template-columns: 7fr 5fr }
.block.flip .block-in > :first-child { order: 2 }
.block-in > * { min-width: 0 }
@media (max-width: 900px) {
  .block { padding: var(--s7) 0 }
  .block-in, .block.flip .block-in { grid-template-columns: 1fr; gap: var(--s5) }
  .block.flip .block-in > :first-child { order: 0 }
}

/* hero */
.hero { padding: var(--s8) 0 var(--s8) }
.hero .block-in { align-items: center }
@media (max-width: 640px) { .hero { padding: var(--s7) 0 } }

/* action links: a rule under mono caps, no filled button */
.acts { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s6) }
.act { font: 500 var(--t-sm)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 2px solid var(--ink); text-decoration: none }
.act:hover { color: var(--ink-2); border-bottom-color: var(--ink-2); text-decoration: none }
.act.quiet { border-bottom-color: var(--rule) }

/* ── result card ───────────────────────────────────────────────────────────
 * One verified address as it comes back, with the decision on top. The
 * decision stripe is the single coloured element. */
.result { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r) }
.result-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule-2); font: 400 var(--t-sm)/1.4 var(--mono) }
.result-head .addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.decision { margin-left: auto; font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--r); color: #fff; white-space: nowrap }
.decision.keep { background: var(--deliverable) }
.decision.remove { background: var(--undeliverable) }
.decision.hold, .decision.retry { background: var(--uncertain) }
.result-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 }
.result-body > div { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule-2) }
.result-body > div:nth-child(odd) { border-right: 1px solid var(--rule-2) }
.result-body > div:nth-last-child(-n+2) { border-bottom: 0 }
.rk { font: 400 var(--t-xs)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) }
.rv { font: 400 var(--t-sm)/1.5 var(--mono); margin-top: 2px; word-break: break-word }
.rv.big { font-size: var(--t-xl); line-height: 1.1 }
@media (max-width: 420px) { .result-body { grid-template-columns: 1fr } .result-body > div:nth-child(odd) { border-right: 0 } .result-body > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule-2) } .result-body > div:last-child { border-bottom: 0 } }

/* ── decision list ─────────────────────────────────────────────────────── */
.decisions { display: grid; gap: 0 }
.decisions > div { display: grid; grid-template-columns: 92px 1fr; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--rule-2); align-items: start }
.decisions > div:first-child { border-top: 0; padding-top: 0 }
.d-tag { font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: 6px 0; text-align: center; border-radius: var(--r) }
.d-tag.keep { background: var(--deliverable) }
.d-tag.remove { background: var(--undeliverable) }
.d-tag.hold, .d-tag.retry { background: var(--uncertain) }
.decisions h3 { font-family: var(--mono); font-weight: 500; font-size: var(--t-sm); letter-spacing: 0 }
.decisions p { font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s1) }

/* ── results table ─────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface) }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm) }
th { text-align: left; padding: var(--s3) var(--s4); font: 500 var(--t-xs)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--rule); white-space: nowrap }
td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule-2); vertical-align: top; color: var(--ink-2); white-space: nowrap }
tr:last-child td { border-bottom: none }
td.m { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink) }
td .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 0 }
.dot.keep { background: var(--deliverable) } .dot.remove { background: var(--undeliverable) } .dot.hold, .dot.retry { background: var(--uncertain) }
.table-foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--rule-2); font: 400 var(--t-xs)/1.5 var(--mono); color: var(--ink-3) }

/* ── code, with CSS-only dialect tabs ──────────────────────────────────── */
pre { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s4); overflow-x: auto; font: 400 var(--t-sm)/1.75 var(--mono); color: var(--ink) }
code { font-family: var(--mono) }
p code, li code, td code { background: var(--surface-2); border-radius: 2px; padding: 1px 5px; font-size: .9em }
.code-k { font: 500 var(--t-xs)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2) }

.tabs { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); overflow: hidden }
.tabs input { position: absolute; opacity: 0; pointer-events: none }
.tab-bar { display: flex; border-bottom: 1px solid var(--rule) }
.tab-bar label { padding: var(--s3) var(--s4); font: 500 var(--t-xs)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; border-right: 1px solid var(--rule-2) }
.tab-bar label:hover { color: var(--ink) }
.tabs input:focus-visible + .tab-bar label { outline: 2px solid var(--ink) }
.tabs pre { border: 0; border-radius: 0; display: none; margin: 0 }
#t1:checked ~ .tab-bar label[for="t1"], #t2:checked ~ .tab-bar label[for="t2"], #t3:checked ~ .tab-bar label[for="t3"] { color: var(--ink); background: var(--surface-2) }
#t1:checked ~ pre.p1, #t2:checked ~ pre.p2, #t3:checked ~ pre.p3 { display: block }

/* ── plain feature list ────────────────────────────────────────────────── */
.feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 }
.feats li { padding: var(--s4) 0; border-top: 1px solid var(--rule-2); display: grid; grid-template-columns: 150px 1fr; gap: var(--s4); align-items: baseline }
.feats li:first-child { border-top: 0; padding-top: 0 }
.feats b { font: 500 var(--t-sm)/1.5 var(--mono); font-weight: 500 }
.feats span { font-size: var(--t-sm); color: var(--ink-2) }
@media (max-width: 520px) { .feats li { grid-template-columns: 1fr; gap: var(--s1) } }

/* ── pricing ───────────────────────────────────────────────────────────── */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); overflow: hidden }
.tier { padding: var(--s5); border-right: 1px solid var(--rule-2); display: flex; flex-direction: column }
.tier:last-child { border-right: 0 }
.tier-n { font: 500 var(--t-xs)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3) }
.tier-p { font: 400 var(--t-2xl)/1 var(--mono); letter-spacing: -.02em; margin-top: var(--s3) }
.tier-u { font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s2); line-height: 1.5 }
.tier ul { list-style: none; padding: 0; margin: var(--s4) 0 var(--s5); font-size: var(--t-sm); color: var(--ink-2); display: grid; gap: var(--s2) }
.tier .act { margin-top: auto; align-self: flex-start }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr 1fr } .tier:nth-child(2) { border-right: 0 } .tier:nth-child(-n+2) { border-bottom: 1px solid var(--rule-2) } }
@media (max-width: 520px) { .tiers { grid-template-columns: 1fr } .tier { border-right: 0; border-bottom: 1px solid var(--rule-2) } .tier:last-child { border-bottom: 0 } }
.included { margin-top: var(--s5); font: 400 var(--t-xs)/1.7 var(--mono); color: var(--ink-3); max-width: 80ch }

/* ── documents ─────────────────────────────────────────────────────────── */
.doc { max-width: 74ch; padding-block: var(--s7) var(--s8) }
.doc h1 { font-size: var(--t-2xl) }
.doc .updated { font: 400 var(--t-xs)/1.5 var(--mono); color: var(--ink-3); margin-top: var(--s3); text-transform: uppercase; letter-spacing: .08em }
.doc h2 { font-size: var(--t-lg); margin: var(--s7) 0 var(--s3) }
.doc h3 { margin: var(--s5) 0 var(--s2) }
.doc p, .doc li { color: var(--ink-2) }
.doc p { margin-bottom: var(--s3) }
.doc ul, .doc ol { margin: 0 0 var(--s4) var(--s5); padding: 0 }
.doc li { margin-bottom: var(--s2) }
.doc .table-wrap, .doc pre { margin: var(--s4) 0 }
.doc td { white-space: normal }
.doc strong { color: var(--ink) }
.note { border-left: 2px solid var(--ink-3); background: var(--surface); padding: var(--s3) var(--s4); font-size: var(--t-sm); color: var(--ink-2); margin: var(--s4) 0 }
.note strong { color: var(--ink) }
.toc { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s4) 0; margin: var(--s5) 0 var(--s6) }
.toc p { font: 500 var(--t-xs)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3) }
.toc ol { margin: 0; padding-left: var(--s5); columns: 2; column-gap: var(--s6) }
.toc li { margin-bottom: 3px; font-size: var(--t-sm) }
@media (max-width: 560px) { .toc ol { columns: 1 } }

/* ── colophon ──────────────────────────────────────────────────────────── */
.colophon { border-top: 1px solid var(--rule); padding: var(--s6) 0 var(--s7) }
.colo-in { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: baseline; justify-content: space-between }
.colo-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font: 400 var(--t-xs)/1.6 var(--mono) }
.colo-links a { color: var(--ink-2); text-decoration: none }
.colo-links a:hover { color: var(--ink); text-decoration: underline }
.colo-note { font: 400 var(--t-xs)/1.6 var(--mono); color: var(--ink-3) }