/* =========================================================================
   Vela Design System · frontier kit
   The static-site skin for frontier repositories (dashboards published
   straight from a git-native frontier, e.g. erdos-frontier).

   Requires tokens.css loaded first. Ships the pieces the hub does not
   need: the Observatory-night dark register, self-hosted font faces, and
   the shared page components (header, chips, ledger, panels, facets).

   Vendoring contract: consumers copy tokens.css, frontier-kit.css, and
   fonts/ verbatim into their static site, with fonts/ sitting NEXT TO the
   stylesheets (the @font-face urls below are relative to this file).
   Keep copies byte-identical; sync from
   https://github.com/constellate-science/vela → web/styles + web/fonts.

   Canonical header markup — byte-identical on every page, only
   aria-current moves:

   <header class="site-header"><div class="site-header__inner">
     <a class="site-mark" href="index.html">Site<span> Name</span></a>
     <nav class="site-nav" aria-label="Site">
       <a href="index.html" aria-current="page">…</a>
     </nav>
     <a class="site-vela" href="…">constellate · vfr_…</a>
   </div></header>
   ========================================================================= */

/* ── Kit adjustments — scoped decisions on top of the canonical tokens ── */
:root {
  color-scheme: light dark;
  /* the kit's shape system: pill interactives, 12px panels, 8px inputs */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* ── Observatory night — deep prussian indigo; gold stays the one warm
     light. Values match the production app's .dark register (vela-site). Every color-bearing token is redefined here so a frontier
     site follows the OS scheme with full parity. ─────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --paper-0:    oklch(17.5% 0.035 258);
    --paper-1:    oklch(21.0% 0.040 258);
    --paper-2:    oklch(24.0% 0.040 258);
    --paper-edge: oklch(32.0% 0.035 258);

    --ink-0: oklch(95.0% 0.010 250);
    --ink-1: oklch(93.0% 0.012 250);
    --ink-2: oklch(78.0% 0.016 250);
    --ink-3: oklch(64.0% 0.020 250);
    --ink-4: oklch(50.0% 0.022 252);

    --rule-1: color-mix(in oklch, var(--ink-1) 8%, transparent);
    --rule-2: color-mix(in oklch, var(--ink-1) 16%, transparent);
    --rule-3: color-mix(in oklch, var(--ink-1) 26%, transparent);

    --gold:       oklch(77.0% 0.120 85);   /* lantern */
    --gold-ink:   oklch(80.0% 0.100 84);
    --gold-soft:  color-mix(in oklch, var(--gold) 30%, transparent);
    --gold-glow:  color-mix(in oklch, var(--gold) 16%, transparent);
    --focus-ring: oklch(80.0% 0.120 82);

    --moss:     oklch(60.0% 0.055 128);
    --brass:    oklch(62.0% 0.095 83);
    --cinnabar: oklch(64.0% 0.130 35);
    --winter:   oklch(76.0% 0.045 236);
    --stone:    oklch(68.0% 0.025 80);
    --moss-soft:     color-mix(in oklch, var(--moss) 16%, transparent);
    --brass-soft:    color-mix(in oklch, var(--brass) 16%, transparent);
    --cinnabar-soft: color-mix(in oklch, var(--cinnabar) 12%, transparent);
    --winter-soft:   color-mix(in oklch, var(--winter) 16%, transparent);
    --stone-soft:    color-mix(in oklch, var(--stone) 14%, transparent);

    --lift-1: 0 1px 0 var(--rule-2);
    --lift-2: 0 2px 8px oklch(10% 0.02 258 / 0.5), 0 0 0 1px var(--rule-2);
  }
}

/* ── Fonts — self-hosted latin subsets (OFL; see fonts/LICENSE.md) ────── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

/* =========================================================================
   Components
   ========================================================================= */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper-0);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Sticky header ──────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper-0);
  border-bottom: 1px solid var(--rule-1);
}
.site-header__inner {
  max-width: var(--measure-page);
  margin: 0 auto;
  padding: 0 var(--container-px);
  height: 60px;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.site-mark {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink-0);
  text-decoration: none;
  white-space: nowrap;
}
.site-mark span { color: var(--ink-3); }
.site-nav { display: flex; gap: var(--s-0); align-items: center; font-size: var(--text-small); }
.site-nav a {
  color: var(--ink-3);
  text-decoration: none;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
  line-height: 1;
}
.site-nav a:hover { color: var(--ink-1); background: var(--paper-2); }
.site-nav a[aria-current="page"] {
  color: var(--ink-0);
  background: var(--paper-2);
  box-shadow: inset 0 -1.5px 0 var(--gold);
}
.site-vela {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-4);
  text-decoration: none;
  white-space: nowrap;
}
.site-vela:hover { color: var(--gold-ink); }

/* ── Page container ─────────────────────────────────────────────────── */
.page {
  max-width: var(--measure-page);
  margin: 0 auto;
  padding: var(--s-4) var(--container-px) var(--s-6);
}
.prose { max-width: var(--measure-wide); }

/* ── Type roles (page register) ─────────────────────────────────────── */
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: var(--leading-tight);
  letter-spacing: 0;
  color: var(--ink-0);
  text-wrap: balance;
  margin: 0 0 var(--s-1);
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  color: var(--ink-0);
  margin: 0 0 var(--s-1);
}
.t-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-h3); color: var(--ink-0); }
.kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-kicker);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 var(--s-1);
}
.lede {
  font-size: var(--text-lede);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  text-wrap: pretty;
  margin: 0 0 var(--s-2);
}
.t-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-caption { font-size: 12px; color: var(--ink-3); line-height: var(--leading-ui); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-3); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--gold-ink); }

/* ── Hero (page intro) ──────────────────────────────────────────────── */
.hero { max-width: var(--measure-wide); margin: 0 0 var(--s-4); }

/* ── Panels — the one raised surface ────────────────────────────────── */
.panel {
  background: var(--paper-1);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-1);
}
.panel__pad { padding: var(--s-3); }

/* ── Hairline rules ─────────────────────────────────────────────────── */
.rule { border: 0; height: 1px; background: var(--rule-2); margin: 0; }

/* ── State chips ────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: var(--track-mono-label);
  line-height: 1;
  padding: 0.38em 0.75em;
  border: 1px solid var(--rule-3);
  border-radius: var(--radius-full);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip--ok        { color: var(--moss);     border-color: color-mix(in oklch, var(--moss) 45%, transparent); background: var(--moss-soft); }
.chip--contested { color: var(--brass);    border-color: color-mix(in oklch, var(--brass) 45%, transparent); background: var(--brass-soft); }
.chip--lost      { color: var(--cinnabar); border-color: color-mix(in oklch, var(--cinnabar) 45%, transparent); background: var(--cinnabar-soft); }
.chip--inferred  { color: var(--winter);   border-color: color-mix(in oklch, var(--winter) 50%, transparent); background: var(--winter-soft); }
.chip--stale     { color: var(--stone);    border-color: var(--rule-2); background: none; }
.chip--recorded  { color: var(--stone);    border-color: color-mix(in oklch, var(--brass) 40%, transparent); background: none; }
.chip--signed    { color: var(--gold-ink); border-color: color-mix(in oklch, var(--gold) 60%, transparent); background: var(--gold-glow); }

/* ── Verdict words ──────────────────────────────────────────────────── */
.v { font-family: var(--font-mono); font-size: 13px; letter-spacing: var(--track-mono-label); }
.v-uncond     { color: var(--moss); }
.v-cond       { color: var(--brass); }
.v-incomplete { color: var(--winter); }
.v-lost       { color: var(--cinnabar); }
.v-signed     { color: var(--gold-ink); }
.v-none       { color: var(--ink-4); }

/* ── Toolbar: search + facets in one row ────────────────────────────── */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule-1);
}
.toolbar input[type="search"] {
  font: inherit;
  font-size: var(--text-small);
  padding: 0.45rem 0.9rem;
  width: 15rem;
  max-width: 100%;
  background: var(--paper-0);
  color: inherit;
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-md);
}
.toolbar input[type="search"]:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.facets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.facet {
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: var(--track-mono-label);
  padding: 0.42em 0.8em;
  cursor: pointer;
  color: var(--ink-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  line-height: 1.2;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.facet:hover { color: var(--ink-1); background: var(--paper-2); }
.facet:active { transform: translateY(1px); }
.facet[aria-pressed="true"] {
  color: var(--ink-0);
  border-color: var(--rule-3);
  background: var(--paper-2);
}
.facet--disc[aria-pressed="true"] {
  color: var(--cinnabar);
  border-color: color-mix(in oklch, var(--cinnabar) 45%, transparent);
  background: var(--cinnabar-soft);
}
.count { color: var(--ink-4); font-size: 13px; margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Tables ─────────────────────────────────────────────────────────── */
.table-scroll { overflow: auto; max-height: min(72vh, 900px); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
table.ledger { border-collapse: collapse; width: 100%; font-size: var(--text-small); }
.ledger caption { text-align: left; }
.ledger thead th {
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--s-1) var(--s-1) var(--s-1) 0;
  border-bottom: 1px solid var(--rule-3);
}
.ledger td {
  padding: 0.55rem var(--s-1) 0.55rem 0;
  border-bottom: 1px solid var(--rule-1);
  vertical-align: top;
}
.ledger tr:last-child td { border-bottom: 0; }
.ledger .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Funnel — instrument ruler ──────────────────────────────────────── */
.funnel {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: 0;
}
.funnel li {
  display: flex; flex-direction: column; gap: 0.3rem; min-width: 0;
  border-top: 2px solid var(--rule-2);
  padding-top: var(--s-1);
}
.funnel li.flag { border-top-color: color-mix(in oklch, var(--cinnabar) 55%, transparent); }
.funnel .n {
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.2vw, 28px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink-0);
  line-height: 1;
}
.funnel li.flag .n { color: var(--cinnabar); }
.funnel .l { font-size: 12px; color: var(--ink-3); line-height: 1.35; text-wrap: balance; }

/* ── Notary / reproduce blocks ──────────────────────────────────────── */
.notary { margin-top: var(--s-5); font-size: var(--text-small); color: var(--ink-3); }
.repro {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  background: var(--paper-2);
  border: 1px solid var(--rule-1);
  border-radius: var(--radius-lg);
  padding: var(--s-2) var(--s-3);
  overflow-x: auto;
  margin: 0 0 var(--s-1);
  white-space: pre;
}

/* ── Skeleton loading ───────────────────────────────────────────────── */
.skeleton-row { height: 2.3rem; border-bottom: 1px solid var(--rule-1); position: relative; overflow: hidden; }
.skeleton-row::after {
  content: "";
  position: absolute; inset: 0.65rem 45% 0.65rem var(--s-3);
  background: var(--rule-1);
  border-radius: var(--radius-xs);
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-foot {
  margin-top: var(--s-5);
  padding-top: var(--s-2);
  border-top: 1px solid var(--rule-2);
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.7;
}

/* ── Definition lists ───────────────────────────────────────────────── */
.fields { display: grid; grid-template-columns: 9rem 1fr; gap: 0.4rem var(--s-2); margin: 0; }
.fields dt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.15rem;
}
.fields dd { margin: 0; font-size: var(--text-small); }

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .page { padding: var(--s-3) var(--container-px) var(--s-5); }
  .site-header__inner { height: auto; min-height: 52px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; row-gap: 4px; }
  .site-vela { display: none; }
  .funnel { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  .fields { grid-template-columns: 1fr; gap: 0.15rem; }
  .fields dt { margin-top: var(--s-1); }
  .toolbar { padding: var(--s-2); }
  .toolbar input[type="search"] { width: 100%; }
  .count { margin-left: 0; }
}

/* ── Print — the page is the artifact ───────────────────────────────── */
@media print {
  :root {
    --paper-0: #fff; --paper-1: #fff; --paper-2: #f4f4f4; --paper-edge: #bbb;
    --ink-0: #000; --ink-1: #111; --ink-2: #222; --ink-3: #444; --ink-4: #666;
  }
  .site-header, .toolbar, .facets, .skeleton-row, .no-print { display: none !important; }
  body { font-size: 11pt; }
  a { text-decoration: none; color: inherit; }
  .table-scroll { max-height: none; overflow: visible; }
  .panel { border-color: #ccc; box-shadow: none; }
  .chip { border-color: #999; background: none !important; }
  tr, .chip, .repro { break-inside: avoid; }
  .site-foot::after { content: " · " attr(data-url); }
}