/* ─────────────────────────────────────────────────────────────────
   Front Row — 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,
   results). 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 minimal SPA — reads like a document from
   this one file. Ported from the SneakerMarket/Scout reference spine;
   diverges only in tokens + copy. 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: 2rem; margin-top: 0.5rem; letter-spacing: -0.02em; }
h2 { font-size: 1.4rem; margin-top: 2.6rem; 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 /tickets index).
   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.55rem 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 */
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); }   /* detail / venue */
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) ──────────────────────────── */
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; }
}