/* Styles for the server-rendered reference pages (/card/<slug>, /hero/<slug>,
   /cards, /heroes). These pages are NOT the SPA: they render fully on the
   server and need no JavaScript at all, which is the entire point — a crawler,
   a link preview or a phone on a bad connection gets the content immediately.

   Why a stylesheet and not an inline <style> block: the CSP ships
   `style-src-elem 'self'`, so an inline <style> element is blocked outright
   (only style ATTRIBUTES are allowed, via style-src-attr). Served by
   routers/pages.py rather than the catch-all mount so it carries a real
   Cache-Control — a mount-served asset gets none.

   Palette, type scale and the gold accent are lifted from boot.css so a search
   landing looks like the app it belongs to. Inter is declared with the same URL
   the app uses, so a returning visitor pays nothing for it, and `swap` means a
   first-time visitor reads the page before the font arrives. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/public/fonts/inter-variable.woff2') format('woff2-variations');
}

:root {
  --ref-bg: #0a0a0a;
  --ref-panel: #131313;
  --ref-panel-edge: #262626;
  --ref-text: #f2efe8;
  --ref-muted: #9aa0a6;
  --ref-dim: #cfcabf;
  --ref-gold: #b8924a;
  --ref-good: #7ab87a;
  --ref-bad: #d97a7a;
  --ref-warn: #d9b26a;
}

* { box-sizing: border-box; }

html {
  background: var(--ref-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ref-bg);
  color: var(--ref-text);
  font: 16px/1.65 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

a { color: var(--ref-gold); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: #d4ad63; }

/* Never remove the focus ring — a keyboard visitor needs it, and an inline
   `all: unset` on a control is how this project lost it once before. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ref-gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.ref-skip {
  position: absolute;
  left: -9999px;
}
.ref-skip:focus {
  left: 12px;
  top: 12px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--ref-panel);
  border: 1px solid var(--ref-panel-edge);
  border-radius: 6px;
}

/* ── Chrome ─────────────────────────────────────────────────── */

.ref-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ref-panel-edge);
}

.ref-wordmark {
  margin-right: auto;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.3px;
  color: var(--ref-text);
  text-decoration: none;
}
.ref-wordmark:hover { color: var(--ref-gold); }

/* 44px min touch target — the project's mobile contract for anything tappable. */
.ref-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 15px;
}

.ref-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.ref-crumbs {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ref-muted);
}
.ref-crumbs a { color: var(--ref-muted); }
.ref-crumbs a:hover { color: var(--ref-gold); }

h1 {
  margin: 0 0 6px;
  font-size: clamp(26px, 5vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.2px;
}

.ref-typeline {
  margin: 0 0 4px;
  color: var(--ref-gold);
  font-size: 16px;
}

.ref-lede {
  margin: 0 0 24px;
  max-width: 68ch;
  color: var(--ref-dim);
}

h2 {
  margin: 32px 0 12px;
  font-size: 20px;
  font-weight: 600;
}

h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
}

/* ── Panels ─────────────────────────────────────────────────── */

.ref-panel {
  margin: 0 0 18px;
  padding: 18px;
  background: var(--ref-panel);
  border: 1px solid var(--ref-panel-edge);
  border-radius: 10px;
}

.ref-variant {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

@media (min-width: 700px) {
  .ref-variant { grid-template-columns: 220px minmax(0, 1fr); }
}

.ref-variant img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: 8px;
  background: #1c1c1c;
}

.ref-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.ref-chips li, .ref-taggroup .ref-chips li {
  display: inline-block;
}

.ref-chips li {
  padding: 3px 9px;
  background: #1c1c1c;
  border: 1px solid var(--ref-panel-edge);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ref-dim);
}
.ref-chips li b { color: var(--ref-text); font-weight: 600; }

.ref-text {
  margin: 0 0 14px;
  white-space: pre-wrap;
  color: var(--ref-text);
}
.ref-text .sym { color: var(--ref-gold); }
.ref-text strong { color: #fff; }

.ref-empty { color: var(--ref-muted); font-style: italic; }

/* ── Tables ─────────────────────────────────────────────────── */

.ref-scroll { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  padding: 7px 12px 7px 0;
  text-align: left;
  border-bottom: 1px solid var(--ref-panel-edge);
  white-space: nowrap;
}

th { color: var(--ref-muted); font-weight: 500; }

.is-legal { color: var(--ref-good); }
.is-banned { color: var(--ref-bad); }
.is-restricted { color: var(--ref-warn); }
.is-absent { color: var(--ref-muted); }

/* ── Link grids (indexes + related cards) ───────────────────── */

.ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ref-grid a {
  display: block;
  padding: 7px 0;
  font-size: 15px;
}

.ref-letter {
  margin: 26px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ref-panel-edge);
  font-size: 15px;
  font-weight: 700;
  color: var(--ref-gold);
  letter-spacing: 1px;
}

.ref-why {
  margin: 2px 0 0;
  color: var(--ref-muted);
  font-size: 13px;
}

.ref-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 8px 0 0;
  padding: 0 18px;
  background: var(--ref-gold);
  border-radius: 8px;
  color: #10100e;
  font-weight: 600;
  text-decoration: none;
}
.ref-cta:hover { background: #d4ad63; color: #10100e; }

/* ── Footer ─────────────────────────────────────────────────── */

.ref-footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 40px;
  border-top: 1px solid var(--ref-panel-edge);
  color: var(--ref-muted);
  font-size: 13px;
}
.ref-footer p { margin: 0 0 8px; max-width: 78ch; }

/* Every colour pair in this file was measured against its own background, not
   eyeballed: gold link on panel 6.41:1, muted 7.04:1, legal green 7.93:1,
   banned red 6.21:1, restricted amber 9.31:1, CTA text on gold 6.57:1 — all
   above the 4.5:1 AA floor for body text. */

/* Chip groups carry a label because a keyword is nearly always the card's text
   as well (3815 keyword mentions, 12 of them absent from the text), so an
   unlabelled row reads as a stutter rather than as a summary. */
.ref-taggroup {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
}

.ref-taglabel {
  color: var(--ref-muted);
  font-size: 13px;
}

.ref-taggroup .ref-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.ref-caption {
  caption-side: top;
  padding-bottom: 8px;
  color: var(--ref-muted);
  font-size: 13px;
  text-align: left;
}