/* ─────────────────────────────────────────────────────────────────
   SneakerMarket — minimal "markdown" theme (the AI-agent-first spine)

   A classless, tag-driven stylesheet. Structure lives in semantic HTML;
   classes appear ONLY on the irreducible app "chrome islands" (search,
   command palette, modals, compare drawer, toasts, account menu).

   The reading surface below (typography, lists, dl, tables, forms, nav,
   footer) styles ELEMENTS, so any semantic page — the SSR pages in
   lib/seo.ts and the SPA's declassed render layer — reads like a document
   from this one file. Water.css / new.css lineage.
   ───────────────────────────────────────────────────────────────── */

:root {
  --fg: #1a1a1a;
  --muted: #666;
  --bg: #fff;
  --bg-soft: #f6f6f7;
  --border: #e2e2e4;
  --accent: #0a7d52;      /* single accent — links, price, primary action */
  --link: #0a58ca;
  --danger: #c02637;
  --warn: #9a6a00;
  --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 */
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto;
  max-width: var(--measure);
  padding: 2.5rem 1.25rem 5rem;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

/* ── Typography ────────────────────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.2; font-weight: 650; margin: 2.2rem 0 0.7rem; letter-spacing: -0.01em; }
h1 { font-size: 1.85rem; margin-top: 0.5rem; }
h2 { font-size: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; 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, borderless directory row (results, feeds, the /sneakers index).
   Ordinary markdown list items are untouched. Canonical row markup:
     <li><a href><img><span><strong>Name</strong> <span>Colorway</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.55rem 0.35rem; color: inherit; }
li:has(> a) > a:hover { text-decoration: none; background: var(--bg-soft); }
li:has(> a) > a > img { flex: none; width: 46px; height: 46px; border-radius: 6px; object-fit: cover; background: var(--bg-soft); border: 1px solid var(--border); }
li:has(> a) > a > span { min-width: 0; }                 /* text block — allowed to shrink + wrap */
li:has(> a) > a > span strong { font-weight: 600; }
li:has(> a) > a > span > span { color: var(--muted); }   /* colorway */
li:has(> a) > a > span small { display: block; }         /* meta line (date · source) under the name */

/* Price token — right-aligned, tabular, in the money accent. */
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 (price/source comparison, size curve) ──────────────── */
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: 600; color: var(--muted); font-size: 0.85rem; }
tbody tr:hover { background: var(--bg-soft); }
td:not(:first-child), th:not(:first-child) { text-align: right; }

/* ── 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: var(--bg-soft); 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.5rem 0.65rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
}
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.45rem 0.8rem; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
button:hover { background: var(--bg-soft); }
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; }

/* ── 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; }

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; }

/* ── Verdict token (Buy / Hold / Wait) — text color only, no chips ─ */
[data-verdict] { font-weight: 650; }
[data-verdict="buy"]  { color: var(--accent); }
[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; }
  dl { grid-template-columns: 1fr; gap: 0.1rem 0; }
  dt { margin-top: 0.5rem; }
}