/* ══════════════════════ SIMPLE CONTENT PAGES ══════════════════════
   Shared chrome for the non-feed pages (about.html, boosters.html,
   shows.html): the navy page header and the centered card the
   "coming soon" copy sits in. Feed pages don't use this — index.html
   has its own masthead + tab layout.

   Assumes /assets/css/theme.css is linked first for the tokens. */

.page-header {
  background: var(--navy);
  color: var(--cream);
  padding: 3rem 1.5rem 2.5rem;
  text-align: center;
}
.page-header .page-eyebrow {
  display: inline-block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.5rem;
}
.page-header h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
}
.page-header p {
  max-width: 44rem;
  margin: 0.7rem auto 0;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--cream);
  font-style: italic;
  opacity: 0.92;
}

.page-main {
  background: var(--cream-d);
  min-height: 52vh;
  padding: 2.75rem 1.25rem 4rem;
}
.page-inner {
  max-width: 640px;
  margin: 0 auto;
}

/* ── Coming-soon card ──────────────────────────────────────────────
   Placeholder for a page whose feature isn't built yet. Deliberately
   plain: a mark, a headline, one paragraph of what it will be, and a
   way back to the feeds that do work. */
.soon-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.5rem 1.75rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(11, 58, 82, 0.05);
}
.soon-mark {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 0.9rem;
}
.soon-card h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-dd);
  margin-bottom: 0.6rem;
}
.soon-card p {
  color: var(--muted);
  font-size: 1rem;
  max-width: 34rem;
  margin: 0 auto;
}
.soon-card p + p { margin-top: 0.85rem; }
.soon-badge {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--brand-d);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Links back to the working feeds, so the page is never a dead end. */
.soon-links {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.soon-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--brand-d);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.soon-links a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

@media (max-width: 640px) {
  .page-header { padding: 2.25rem 1.1rem 2rem; }
  .page-main { padding: 2rem 1rem 3rem; }
  .soon-card { padding: 2rem 1.25rem; }
}

/* ══════════════════════ LONG-FORM CONTENT ══════════════════════
   Used by about.html. The coming-soon pages above don't need any of
   this; it loads with page.css because splitting one more stylesheet
   for a single page costs more than it saves. */

.page-inner--wide { max-width: 46rem; }

/* ── Live stat strip ───────────────────────────────────────────────
   Hidden until the numbers land (about.html fills it from
   /api/data/meta.json), so a failed fetch leaves no empty shell.

   Removed in 7f35bf4 on the reasoning that /boosters and /shows were where
   the numbers belonged, then restored: those two are still coming-soon
   placeholders, and the about page is where a reader asking "how much is in
   this index" actually is. auto-fit means the row absorbs another figure
   without a media query.

   It now sits inside the Indexer Stats section rather than above the table
   of contents, so the copy explaining the figures is next to them. That is
   what .prose .stat-strip below re-spaces: as a section's closing element
   it wants room above it, not below. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 2.25rem;
}
.stat-strip[hidden] { display: none; }
.stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 0.5rem;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand-d);
  line-height: 1.1;
  /* Tabular figures so the five cards' numbers sit on the same rhythm. */
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
/* In the prose the strip follows a paragraph and closes its section, so the
   margin moves to the top; .prose > section supplies the space below it. */
.prose .stat-strip { margin: 1.25rem 0 0; }

/* ── Table of contents ──
   Entries carry the section's full heading, so the numbering is the only
   thing distinguishing them; `counter` rather than a real marker keeps the
   digits outside the link's hit area and lets them be styled down. */
.toc {
  margin-bottom: 2.5rem;
  padding: 1.1rem 1.35rem 1.2rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
}
.toc-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.55rem;
}
.toc-list {
  list-style: none;
  counter-reset: toc;
}
.toc-list li { counter-increment: toc; break-inside: avoid; }
.toc-list a {
  display: flex;
  gap: 0.55rem;
  padding: 0.28rem 0;
  color: var(--brand-d);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.15s;
}
.toc-list a::before {
  content: counter(toc) ".";
  flex: none;
  min-width: 1.1rem;
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.toc-list a:hover { color: var(--brand); text-decoration: underline; }
.toc-list a:hover::before { color: var(--brand); }

/* Two columns once there's room. `columns` flows top-to-bottom before
   wrapping, so 1-4 sit above 5-8 in reading order; a grid would give
   1-2 / 3-4 across. */
@media (min-width: 620px) {
  .toc-list { columns: 2; column-gap: 2rem; }
}

/* ── Prose ── */
.prose > section { margin-bottom: 2.75rem; scroll-margin-top: 5rem; }
.prose h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--brand);
}
.prose h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand-dd);
  margin: 1.5rem 0 0.45rem;
}
.prose p { margin-bottom: 0.9rem; }
.prose ul { margin: 0 0 1rem 1.15rem; }
.prose li { margin-bottom: 0.5rem; }
.prose strong { color: var(--ink); }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.08em 0.35em;
}
.prose .lede {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink);
}

/* ── Tag / code sample ──────────────────────────────────────────── */
.tagblock {
  background: var(--navy);
  color: #dceefa;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.7;
}
.tagblock .c { color: #7fb6d4; }   /* comment */
.tagblock .s { color: #9ee6b8; }   /* string value */

/* ── Callouts ───────────────────────────────────────────────────── */
.callout {
  border-left: 4px solid var(--brand);
  background: var(--white);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.15rem;
  margin: 0 0 1.25rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout--warn { border-left-color: #c2410c; }
.callout--warn strong { color: #9a3412; }

/* ── Amount table ── */
.table-wrap { overflow-x: auto; margin-bottom: 1.1rem; }
.data-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: var(--white);
  font-size: 0.9rem;
}
.data-table th, .data-table td {
  border: 1px solid var(--border);
  padding: 0.6rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.data-table th {
  background: var(--bg);
  font-weight: 700;
  color: var(--ink);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.data-table code { white-space: nowrap; }

/* ── FAQ ── */
.faq { display: grid; gap: 0.6rem; }
.faq details {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 0.85rem 1.1rem;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--brand-d);
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--brand-d); }
.faq-body { padding: 0 1.1rem 1rem; color: var(--muted); }
.faq-body p { margin-bottom: 0.7rem; }
.faq-body p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .prose h2 { font-size: 1.3rem; }
  /* The strip goes to two-up here (auto-fit at minmax(7.5rem)), so the
     figures come down a step to stop the longer ones wrapping. */
  .stat-num { font-size: 1.15rem; }
}