/* solddex — hand-rolled, zero-dep stylesheet. Light + dark via prefers-color-scheme.
   #134 visual identity: a warm "ledger" palette off a single accent (not GitHub-Primer), an 8px
   spacing scale + one radius scale, tabular figures on every number, a confidence SIGNAL-METER
   (not a traffic light), and right-aligned mono numeric columns.
   Typeface pairing (Allen, 2026-08-02): Geist + Geist Mono, self-hosted variable woff2
   (assets/fonts/, OFL, from Vercel's official `geist` npm package). System stacks stay as
   fallbacks — the page is readable before fonts land and offline. */

@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f6f3ec;
  --surface: #fffdf7;
  --text: #211c13;
  --muted: #6d6456;
  --line: #e7dfd1;
  --accent: #9a5a00;        /* burnt-amber ledger accent — the one accent */
  --accent-soft: #efe4d2;
  --brand: var(--accent);
  --ok: #1f7a43; --ok-bg: #e4f2e8;
  --warn: #8a5a00; --warn-bg: #f6ecd6;
  --none: #897f71; --none-bg: #eee7dc;
  --stale-bg: #f6ecd6; --stale-text: #6b4e00;
  /* 8px spacing scale + radius scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-1: 5px; --r-2: 9px; --r-3: 14px;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #100f0c;
    --surface: #1a1712;
    --text: #ece6da;
    --muted: #a49a88;
    --line: #2c2820;
    --accent: #e2a75a;
    --accent-soft: #2a2114;
    --ok: #5bb06a; --ok-bg: #13251a;
    --warn: #d7a94e; --warn-bg: #2a2213;
    --none: #7c7365; --none-bg: #1d1a14;
    --stale-bg: #2a2213; --stale-text: #d7a94e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.55 var(--sans);
  background: var(--bg);
  color: var(--text);
}

/* Every number reads on a tabular grid — prices line up column-to-column. */
.price-bare, .price-thin, .price-none, .headline-block .price, .c-price, .c-id, .c-id code,
table.windows td, .w-n, .w-med, .w-range, .w-iqr, .stat strong, .rc-id, .ar-price, .meter-label {
  font-variant-numeric: tabular-nums;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 0.9em; }

.site-header {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.brand { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-sub { color: var(--muted); font-size: 0.9rem; }
.site-nav { margin-left: auto; display: flex; gap: var(--sp-4); font-size: 0.92rem; }

.wrap { max-width: 960px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-6); }

.banner { padding: var(--sp-3) var(--sp-5); font-size: 0.92rem; }
.banner-stale { background: var(--stale-bg); color: var(--stale-text); }

.hero h1 { font-size: 1.85rem; line-height: 1.15; margin: var(--sp-1) 0 var(--sp-3); letter-spacing: -0.025em; }
.lede { font-size: 1.05rem; color: var(--text); margin: 0 0 var(--sp-3); }
.prov { color: var(--muted); font-size: 0.95rem; margin: 0 0 var(--sp-4); }
.stat-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: 0 0 var(--sp-2); padding: 0; }
.stat { color: var(--muted); font-size: 0.92rem; }
.stat strong { color: var(--accent); font-size: 1.2rem; font-weight: 800; }

/* Browse-by-set chips */
.sets-nav h2, .card-index h2 { font-size: 1.15rem; margin: var(--sp-6) 0 var(--sp-3); }
.set-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.set-chip {
  display: inline-flex; gap: 0.3rem; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.9rem; font-weight: 600;
}
.set-chip:hover { border-color: var(--accent); text-decoration: none; }

table.cards { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.cards th, table.cards td { text-align: left; padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--line); vertical-align: middle; }
table.cards th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
table.cards tr:hover td { background: var(--surface); }
table.cards th:last-child, td.c-price { text-align: right; }
.c-price { white-space: nowrap; }
.c-rarity { color: var(--muted); text-transform: capitalize; }
.c-id code { color: var(--muted); }
.jp { color: var(--muted); font-size: 0.85em; margin-left: 0.35rem; }

.price-bare { font-weight: 700; font-family: var(--mono); }
.price-thin { color: var(--warn); }
.price-none { color: var(--none); font-style: italic; font-size: 0.9em; }
.qual { color: var(--muted); font-weight: 400; font-size: 0.82em; }

/* Confidence SIGNAL-METER (#134) — bar count = sample depth; single accent, never a traffic
   light. Kept beside the freshness badge, which stays on its own (recency) axis. */
.meter { display: inline-flex; align-items: center; gap: 0.34rem; vertical-align: middle; }
.meter-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.meter-bars i { width: 3px; border-radius: 1px; background: var(--line); display: block; }
.meter-bars i:nth-child(1) { height: 5px; }
.meter-bars i:nth-child(2) { height: 8px; }
.meter-bars i:nth-child(3) { height: 11px; }
.meter-bars i:nth-child(4) { height: 13px; }
.meter-bars i.on { background: var(--accent); }
.meter-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }

.badge {
  display: inline-block; padding: 0.05rem 0.4rem; border-radius: var(--r-1);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; vertical-align: middle;
}
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-muted { background: var(--none-bg); color: var(--none); }

.crumbs { margin: 0 0 var(--sp-4); font-size: 0.9rem; }
.card-page h1 { font-size: 1.5rem; margin: 0 0 var(--sp-1); letter-spacing: -0.02em; }
.card-id { color: var(--muted); font-size: 0.92rem; margin: 0 0 var(--sp-4); }

/* Two-column card page (#134): headline + distribution sit side-by-side on wide screens. */
.card-top { display: grid; gap: var(--sp-5); align-items: start; margin-top: var(--sp-3); }
@media (min-width: 720px) { .card-top { grid-template-columns: minmax(0, 21rem) 1fr; } }
.card-top > .chart, .card-top > section { margin-top: 0; }

.headline-block {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1);
}
.headline-label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.headline-block .price { font-size: 1.55rem; }
.placeholder-note { color: var(--muted); font-size: 0.92rem; margin-top: var(--sp-4); }
.hb-src { color: var(--muted); font-size: 0.72rem; letter-spacing: 0; text-transform: none; }
.badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }

.card-page section { margin-top: var(--sp-6); }
.card-page section h2 { font-size: 1.1rem; margin: 0 0 var(--sp-3); }
.conf-note { color: var(--muted); font-weight: 400; font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.methodology { display: block; margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); max-width: 48rem; }

/* distribution chart — the signature graphic (#134), keyed off the accent. */
.chart .no-chart { color: var(--muted); font-style: italic; font-size: 0.92rem; }
svg.dist { width: 100%; max-width: 480px; height: auto; display: block; margin: var(--sp-1) 0 var(--sp-2); color: var(--text); }
.dist-axis, .dist-whisker { stroke: var(--muted); stroke-width: 1.5; }
.dist-cap { stroke: var(--muted); stroke-width: 1.5; }
.dist-box { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.dist-median { stroke: var(--accent); stroke-width: 2.5; }
.dist-median-dot { fill: var(--accent); }
.dist-label { fill: var(--text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dist-sub { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* per-window table — right-aligned mono numeric columns */
table.windows { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.windows th, table.windows td { text-align: left; padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--line); }
table.windows th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
table.windows th:nth-child(2), table.windows th:nth-child(3), table.windows th:nth-child(4), table.windows th:nth-child(5),
table.windows td.w-n, table.windows td.w-med, table.windows td.w-range, table.windows td.w-iqr {
  text-align: right; font-family: var(--mono);
}
.w-med { font-weight: 700; }

/* receipts */
.receipt-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-1) var(--sp-4); }
.receipt-list li { font-size: 0.88rem; padding: 0.15rem 0; border-bottom: 1px dotted var(--line); }
.rc-id { color: var(--muted); font-size: 0.8em; font-family: var(--mono); }

/* verdict archive */
.ar-price { font-family: var(--mono); font-weight: 700; }

.site-footer { max-width: 960px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-6); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
.disclosure { margin: 0 0 var(--sp-1); }

/* #108 — collection tracker */
.collection .add-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.collection input, .collection select, .collection textarea, .collection button {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-1); padding: var(--sp-2) var(--sp-3);
}
.collection #add-code { flex: 1 1 16rem; min-width: 12rem; }
.collection #add-qty { width: 4.5rem; }
.collection .add-graded { color: var(--muted); font-size: 0.9rem; display: inline-flex; gap: 0.3rem; align-items: center; border: none; padding: 0; }
.collection button {
  cursor: pointer; font-weight: 700; border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.collection button:hover { background: var(--accent); color: var(--surface); }
.collection button.rm { font-weight: 500; font-size: 0.8rem; padding: 0.1rem var(--sp-2); color: var(--muted); background: transparent; border-color: var(--line); }
.collection textarea { width: 100%; font-family: var(--mono); font-size: 0.85rem; }
.floor-line { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.floor-line #floor-usd { font-size: 1.5rem; }
.setbar { display: grid; grid-template-columns: 4rem 1fr auto; gap: var(--sp-3); align-items: center; margin: var(--sp-2) 0; font-size: 0.9rem; }
.setbar-label { font-weight: 700; }
.setbar-track { height: 8px; background: var(--none-bg); border-radius: 999px; overflow: hidden; }
.setbar-fill { display: block; height: 100%; background: var(--accent); }
.setbar-num { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; }

/* #135 — sigil identity chips + card-page art slot. The <svg class="sigil"> carries its own
   background; CSS just sizes and rounds it (rounding here means the SVG needs no clipPath id). */
.sigil { display: block; border-radius: var(--r-1); overflow: hidden; flex: none; }
.c-thumb { display: inline-flex; vertical-align: middle; margin-right: var(--sp-2); }
.c-thumb .sigil { width: 30px; height: 30px; }
td.c-name { white-space: normal; }
.card-head { display: flex; gap: var(--sp-4); align-items: center; margin: var(--sp-1) 0 var(--sp-4); }
.card-art { margin: 0; flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.card-art .sigil { width: 132px; height: 132px; border-radius: var(--r-3); box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
.card-art figcaption { font-size: 0.68rem; max-width: 132px; text-align: center; line-height: 1.25; }
.card-head-meta { min-width: 0; }
.card-head-meta h1 { margin: 0 0 var(--sp-1); }
@media (max-width: 520px) {
  .card-head { flex-direction: column; align-items: flex-start; }
  .site-nav { gap: var(--sp-3); }
}