/* ─────────────────────────────────────────────────────────────────
   CardVault — "The Vault" minimal theme (the AI-agent-first spine)

   A classless, tag-driven stylesheet with an archival, museum-grade
   identity: deep ink-navy ground, bone/parchment text, one vault-gold
   accent for money and primary actions, holo-cyan links, and a
   holo-prism gradient (cyan→violet→gold) deployed SPARINGLY — the
   h1 accent, the grade chip, the hero showcase. Numerals are the
   hero: prices and grades set in tabular mono, like readouts on a
   display case.

   Structure lives in semantic HTML; classes appear ONLY on the
   irreducible app "chrome islands". Every SSR page (lib/seo.ts
   landingShell) and the minimal SPA read from this one file, so the
   element rules below (typography, lists, dl, tables, forms, details,
   pre, nav, footer) must stay robust everywhere — not just the hero.
   Ported from the SneakerMarket/Scout reference spine; row primitive
   and selector contracts are preserved exactly.
   ───────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;
  --fg: #EDE8DC;           /* bone / parchment */
  --muted: #A59D8B;        /* aged-label stone */
  --bg: #0A0E1A;           /* deep ink navy — the vault interior */
  --bg-deep: #070A12;      /* outside the case (html ground) */
  --bg-soft: #121828;      /* elevated navy — hovers, wells, code */
  --border: #232A3D;       /* navy hairline */
  --accent: #E3C567;       /* vault gold — money, price, primary action */
  --link: #79D3E6;         /* holo cyan — links */
  --up: #5FD59F;           /* positive delta / buy verdict */
  --danger: #EF6A5E;
  --warn: #E09A3E;
  --label: #C8102E;        /* PSA-red grade-label energy */
  --holo: linear-gradient(100deg, #69E0F0 0%, #8F7BF5 38%, #D98BE0 64%, #E9C468 100%);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 46rem;        /* the one narrow reading column — the display case */
}

/* ── Reset + the display case ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg-deep); }
body {
  margin: 0 auto;
  max-width: var(--measure);
  min-height: 100vh;
  padding: 2.5rem 1.25rem 5rem;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  /* the lit case: a faint holo glow bleeding down from the masthead */
  background:
    radial-gradient(58rem 26rem at 50% -8rem, rgba(105, 224, 240, 0.055), transparent 62%),
    var(--bg);
  border-left: 1px solid #161C2C;
  border-right: 1px solid #161C2C;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--bg); }

/* ── Typography — placard headings, exhibit labels ─────────────── */
h1, h2, h3, h4 { line-height: 1.2; font-weight: 650; margin: 2.2rem 0 0.7rem; letter-spacing: -0.01em; }
h1 { font-size: 2.05rem; font-weight: 700; margin-top: 0.5rem; letter-spacing: -0.02em; }
/* the one prism accent every page carries — a short holo bar under the title */
h1::after { content: ""; display: block; width: 3.5rem; height: 3px; margin-top: 0.65rem; border-radius: 2px; background: var(--holo); }
/* h2s are exhibit labels: small caps, letterspaced, above a hairline rule */
h2 {
  font-size: 0.8rem; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-top: 2.7rem; padding-top: 1.35rem; border-top: 1px solid var(--border);
}
h3 { font-size: 1.1rem; }
h4 { font-size: 0.95rem; color: var(--muted); }
p { margin: 0.7rem 0; }
small { color: var(--muted); font-size: 0.82rem; }
strong { font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── Lists ─────────────────────────────────────────────────────── */
ul, ol { margin: 0.7rem 0; padding-left: 1.4rem; }
li { margin: 0.25rem 0; }

/* Navigational listing rows: any <li> whose direct child is a link becomes
   a clean directory row (results, feeds, indexes) — each row a slab in the
   case. Ordinary markdown list items are untouched. Canonical row markup:
     <li><a href><img><span><strong>Name</strong> <span>Detail</span></span></a><data>$x</data></li>
   Text wraps (never nowrap) so a long name can never push the price off-screen. */
ol:has(> li > a), ul:has(> li > a) { list-style: none; padding-left: 0; margin: 0.5rem 0; border-top: 1px solid var(--border); }
li:has(> a) { margin: 0; display: flex; align-items: center; gap: 0.6rem; border-bottom: 1px solid var(--border); }
li:has(> a) > a { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.35rem; color: inherit; }
li:has(> a) > a:hover { text-decoration: none; }
li:has(> a):hover { background: var(--bg-soft); }   /* highlight the whole row, incl. the price outside the anchor */
/* portrait thumbnail — a mini slab (card aspect), not a square tile */
li:has(> a) > a > img { flex: none; width: 40px; height: 56px; border-radius: 3px; object-fit: cover; background: var(--bg-soft); border: 1px solid var(--border); }
li:has(> a) > a > span { min-width: 0; overflow-wrap: anywhere; }                 /* text block — allowed to shrink + wrap */
li:has(> a) > a > span strong { font-weight: 600; }
li:has(> a) > a > span > span { color: var(--muted); }   /* set / parallel / detail */
li:has(> a) > a > span small { display: block; }         /* meta line (grade · source) under the name */

/* Price token — right-aligned, tabular mono, vault gold. The readout. */
data { flex: none; margin-left: auto; padding-right: 0.35rem; font-family: var(--mono); font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Definition lists (spec sheets) ────────────────────────────── */
dl { display: grid; grid-template-columns: minmax(5rem, max-content) 1fr; gap: 0.35rem 1.2rem; margin: 1rem 0; }
dl > div { display: contents; }   /* transparent <div><dt><dd> wrappers still grid */
dt { color: var(--muted); }
dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ── Disclosure (FAQ accordions) ───────────────────────────────── */
details { border-bottom: 1px solid var(--border); padding: 0.6rem 0; }
summary { cursor: pointer; font-weight: 600; }
summary::marker { color: var(--muted); }
details > *:not(summary) { margin-top: 0.5rem; color: var(--muted); }

/* ── Tables (comps / source comparison) ────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
th { font-weight: 650; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
tbody tr:hover { background: var(--bg-soft); }
td:not(:first-child), th:not(:first-child) { text-align: right; font-family: var(--mono); font-size: 0.95em; }

/* ── Code / quote ──────────────────────────────────────────────── */
code, kbd, samp { font-family: var(--mono); font-size: 0.88em; }
:not(pre) > code { background: var(--bg-soft); padding: 0.1em 0.35em; border-radius: 4px; }
pre { background: #0D1322; border: 1px solid var(--border); border-radius: 6px; padding: 0.9rem; overflow-x: auto; }
pre code { background: none; padding: 0; }
blockquote { margin: 1rem 0; padding: 0.2rem 0 0.2rem 1rem; border-left: 3px solid var(--border); color: var(--muted); }

/* ── Forms ─────────────────────────────────────────────────────── */
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%; padding: 0.55rem 0.7rem; background: #0D1322;
  border: 1px solid var(--border); border-radius: 6px;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.75; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
button {
  display: inline-flex; align-items: center; gap: 0.4rem; width: auto;
  padding: 0.5rem 0.85rem; background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
button:hover { background: #1A2236; border-color: #2E3852; }
label { display: block; color: var(--muted); font-size: 0.85rem; margin-bottom: 0.25rem; }
form[role="search"] { display: flex; gap: 0.5rem; margin: 1rem 0; }
form[role="search"] input { flex: 1 1 auto; }
form[role="search"] button { flex: none; background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 650; }
form[role="search"] button:hover { filter: brightness(1.06); }

/* ── Document chrome: header nav + footer ──────────────────────── */
body > header, body > nav:first-child { margin-bottom: 1.5rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; }
nav a { color: var(--fg); }
nav a[aria-current] { font-weight: 650; color: var(--accent); }
/* the bridge to the signed-in rich app — keep it clearly visible */
nav a[href="/?theme=rich"] { color: var(--accent); border: 1px solid #4A3F22; background: rgba(227, 197, 103, 0.07); border-radius: 6px; padding: 0.22rem 0.7rem; }
nav a[href="/?theme=rich"]:hover { text-decoration: none; background: rgba(227, 197, 103, 0.14); }

footer { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }
footer nav { display: block; }
footer nav a { display: block; padding: 0.15rem 0; color: var(--muted); }
footer nav a:hover { color: var(--fg); }

/* ── Grade chip — PSA-red label energy (slabs, comps, hero) ────── */
.grade {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-family: var(--mono); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.03em;
  background: var(--label); color: #fff; padding: 0.14em 0.5em; border-radius: 3px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* holo-prism text — best-comp / grade-up emphasis; use sparingly */
.holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }

/* ── Verdict token (Buy / Hold / Wait) — text color only, no chips ─ */
[data-verdict] { font-weight: 650; }
[data-verdict="buy"]  { color: var(--up); }
[data-verdict="hold"] { color: var(--warn); }
[data-verdict="wait"] { color: var(--danger); }

/* ── Utilities (the tiny survivor set) ─────────────────────────── */
.muted { color: var(--muted); }
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Crawler-only content block injected server-side (injectHomeSeoContent) —
   present for search engines, visually hidden so it doesn't duplicate the feeds. */
.home-seo-shell { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Section that's still loading its feed shows nothing jarring. */
section[aria-busy="true"] ol:empty { min-height: 1.5rem; }

/* ── Responsive: one breakpoint; the row primitive reflows itself ─ */
@media (max-width: 40rem) {
  body { padding: 1.5rem 1rem 4rem; border-left: 0; border-right: 0; }
  h1 { font-size: 1.7rem; }
  dl { grid-template-columns: 1fr; gap: 0.1rem 0; }
  dt { margin-top: 0.5rem; }
}