/* -----------------------------------------------------------------------
   Fonts — self-hosted, vendored under /fonts/. Root-relative so both
   top-level pages and one-level-deep pages (model/<slug>.html) resolve the
   same URL. Guarded by a robust system-font fallback stack so a missing
   .woff2 degrades gracefully rather than blocking render.
----------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fraunces-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-600.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}

/* -----------------------------------------------------------------------
   Design tokens — light default, dark via prefers-color-scheme.
----------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* LIGHT theme — warm paper (ported from TrueRank) */
  --bg: #fbfbf9;
  --surface-1: #ffffff;
  --surface-2: #f4f4f1;
  --surface-3: #ececE7;
  --line: #e4e3dd;
  --line-strong: #cfcec6;
  --ink: #16181d;
  --ink-2: #474b53;
  --ink-3: #5f636b;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-quiet: #eaf1ff;

  /* trust triad — resisted (green) / tempted (amber) / fooled (red) */
  --resist: #0a7a55;
  --resist-bg: #e6f6ef;
  --tempt: #9a4a07;
  --tempt-bg: #fbf1dd;
  --fooled: #c81840;
  --fooled-bg: #fce8ec;

  --xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --card: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
  --lift: 0 8px 24px -6px rgb(0 0 0 / 0.18), 0 2px 6px -2px rgb(0 0 0 / 0.10);

  /* legacy aliases used by not-yet-redesigned page sections (task B) */
  --code-bg: var(--surface-2);
  --banner-bg: #fff6dd;
  --banner-border: #caa000;
  --confirmed-bg: var(--fooled-bg);
  --confirmed-border: var(--fooled);
  --attributed-bg: var(--surface-2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0c0e;
    --surface-1: #121316;
    --surface-2: #1a1c20;
    --surface-3: #23262b;
    --line: #2a2d33;
    --line-strong: #3a3e45;
    --ink: #f4f5f7;
    --ink-2: #b9bfc9;
    --ink-3: #898f9a;
    --accent: #3b82f6;
    --accent-hover: #5c9cff;
    --accent-quiet: #13203a;

    --resist: #34d399;
    --resist-bg: #0f2a22;
    --tempt: #fbbf24;
    --tempt-bg: #2a2310;
    --fooled: #fb7185;
    --fooled-bg: #2c1418;

    --xs: 0 1px 2px 0 rgb(0 0 0 / 0.30);
    --card: 0 1px 0 rgb(0 0 0 / 0.40);
    --lift: 0 8px 24px -6px rgb(0 0 0 / 0.50), 0 2px 6px -2px rgb(0 0 0 / 0.35);

    --banner-bg: #362a08;
    --banner-border: #caa000;
    --confirmed-bg: var(--fooled-bg);
    --confirmed-border: var(--fooled);
    --attributed-bg: var(--surface-2);
  }
}

/* -----------------------------------------------------------------------
   Base + type scale
----------------------------------------------------------------------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.num, .mono, code, .score-value, .metric-value {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, .display {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.display { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.02em; }
h1 { font-size: clamp(1.75rem, 3.5vw, 2.35rem); margin: 0 0 0.35rem; letter-spacing: -0.015em; }
h2 { font-size: 1.4rem; margin: 2.25rem 0 0.85rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }

.lead {
  font-size: 1.15rem;
  color: var(--ink-2);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.tagline { font-size: 1.1rem; color: var(--ink-2); margin: 0 0 1.25rem; }

.caption {
  font-size: 0.78rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.overline {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.note { color: var(--ink-3); font-size: 0.9rem; }

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
a:hover { color: var(--accent-hover); }
a:visited { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

/* -----------------------------------------------------------------------
   Site header / nav / footer
----------------------------------------------------------------------- */

header.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 0;
  margin: -2rem -1.5rem 1.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.site-title {
  font-size: 1.25rem;
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
}

.site-title a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
}

.wordmark-icon { width: 1.3rem; height: 1.3rem; flex-shrink: 0; color: var(--accent); }

nav.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }

nav.site-nav a {
  padding: 0.4rem 0.7rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--ink-3);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

nav.site-nav a:hover { color: var(--ink); background: var(--surface-2); }

nav.site-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-quiet);
}

.site-nav-repo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);
  color: var(--ink-3) !important;
  font-size: 0.85rem !important;
}

footer.site-footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
}

footer.site-footer .footer-brand { color: var(--ink-2); font-weight: 600; }
footer.site-footer a { color: var(--ink-3); }
footer.site-footer a:hover { color: var(--ink); }
footer.site-footer .footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
footer.site-footer .footer-meta { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; }

/* -----------------------------------------------------------------------
   Hero (leaderboard page)
----------------------------------------------------------------------- */

.hero {
  padding: 1.5rem 0 0.5rem;
  margin-bottom: 1.5rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero h1 { margin-bottom: 0.6rem; }

.hero-sub { font-size: 1.05rem; color: var(--ink-2); margin: 0 0 1rem; line-height: 1.5; }

.hero-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-2);
}

.hero-callout {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  padding: 1.25rem 1.4rem;
  box-shadow: var(--card);
}

.hero-callout .overline { margin-bottom: 0.5rem; }
.hero-callout .callout-model { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; font-weight: 600; color: var(--ink); margin: 0 0 0.65rem; }
.hero-callout .callout-score { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem; }
.hero-callout .callout-score .score-value { font-size: 2.25rem; font-weight: 700; color: var(--resist); }
.hero-callout .callout-score .score-suffix { color: var(--ink-3); font-size: 0.85rem; }

/* -----------------------------------------------------------------------
   Cards, badges, chips
----------------------------------------------------------------------- */

.card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  padding: 1.25rem 1.4rem;
  box-shadow: var(--card);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--lift); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.75rem;
}

.metric-card .metric-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: 0 0 0.35rem;
}

.metric-card .metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: 0.5rem;
}

.metric-card .metric-ci { font-size: 0.75rem; color: var(--ink-3); margin-top: 0.4rem; }

.metric-card .metric-card__bar { display: flex; width: 100%; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--accent-quiet);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
}

.badge-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85rem;
}

.badge-rank.rank-1 {
  background: var(--tempt-bg);
  border-color: color-mix(in srgb, var(--tempt) 45%, transparent);
  color: var(--tempt);
}

/* category chips: distinct hues, not tied to the trust triad */
.cat-A, .cat-B, .cat-C, .cat-D {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.cat-A { background: color-mix(in srgb, #8b5cf6 14%, var(--surface-1)); color: #7c3aed; border-color: color-mix(in srgb, #8b5cf6 35%, transparent); }
.cat-B { background: color-mix(in srgb, #0891b2 14%, var(--surface-1)); color: #0e7490; border-color: color-mix(in srgb, #0891b2 35%, transparent); }
.cat-C { background: color-mix(in srgb, #ea580c 14%, var(--surface-1)); color: #c2410c; border-color: color-mix(in srgb, #ea580c 35%, transparent); }
.cat-D { background: color-mix(in srgb, #db2777 14%, var(--surface-1)); color: #be185d; border-color: color-mix(in srgb, #db2777 35%, transparent); }

@media (prefers-color-scheme: dark) {
  .cat-A { color: #c4b5fd; }
  .cat-B { color: #67e8f9; }
  .cat-C { color: #fdba74; }
  .cat-D { color: #f9a8d4; }
}

.lvl-L1, .lvl-L3 {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--line);
  color: var(--ink-3);
  background: var(--surface-2);
}

.lvl-L3 { color: var(--tempt); border-color: color-mix(in srgb, var(--tempt) 40%, transparent); background: var(--tempt-bg); }

.trust-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.trust-chip.resist { background: var(--resist-bg); color: var(--resist); border-color: color-mix(in srgb, var(--resist) 35%, transparent); }
.trust-chip.tempt { background: var(--tempt-bg); color: var(--tempt); border-color: color-mix(in srgb, var(--tempt) 35%, transparent); }
.trust-chip.fooled { background: var(--fooled-bg); color: var(--fooled); border-color: color-mix(in srgb, var(--fooled) 35%, transparent); }

/* -----------------------------------------------------------------------
   Score bars — build-time CSS bars, no JS. Fill width/color set inline.
----------------------------------------------------------------------- */

.score-bar { display: flex; align-items: center; gap: 0.6rem; width: 100%; }

.score-bar__track {
  display: block;
  position: relative;
  flex: 1 1 auto;
  min-width: 4rem;
  width: 100%;
  height: 0.55rem;
  max-height: 0.55rem;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.score-bar__fill {
  display: block;
  height: 100%;
  max-height: 0.55rem;
  border-radius: 999px;
  transition: width 0.2s ease;
}

.score-bar__value {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 3.4rem;
  text-align: right;
}

.score-bar__ci {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--ink-3);
}

.mini-bars { display: flex; flex-direction: column; gap: 0.3rem; min-width: 8rem; }

.mini-bar { display: flex; align-items: center; gap: 0.4rem; }

.mini-bar__label {
  flex-shrink: 0;
  width: 2.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.mini-bar__track {
  position: relative;
  flex: 1 1 auto;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  min-width: 3rem;
}

.mini-bar__fill { display: block; height: 100%; border-radius: 999px; }

.mini-bar__value {
  flex-shrink: 0;
  width: 3rem;
  text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--ink-2);
}

/* -----------------------------------------------------------------------
   Tables
----------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 0.75rem; }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0 1.75rem;
  font-variant-numeric: tabular-nums;
}

/* Keep every column's natural width so narrow viewports scroll horizontally
   inside .table-scroll instead of squeezing/clipping cells (e.g. the ARS
   number next to its bar, or the FR/FCER/MDR/CT mini-bars). */
.table-scroll table { margin: 0; width: auto; min-width: 100%; }

table.compact { width: auto; min-width: 28rem; display: block; overflow-x: auto; }

th, td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-1);
  border-bottom: 2px solid var(--line-strong);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

td.num, th.num { text-align: right; }

tbody tr:nth-child(even) { background: var(--surface-2); }
tbody tr:hover { background: var(--accent-quiet); }

a.model-link { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--ink-3); }
a.model-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* -----------------------------------------------------------------------
   Shared components — banner, formula block, back-link.
----------------------------------------------------------------------- */

.banner {
  background: var(--banner-bg);
  border: 1px solid var(--banner-border);
  border-radius: 0.6rem;
  padding: 0.9rem 1.15rem;
  margin: 1rem 0 1.75rem;
  font-weight: 600;
  color: var(--ink);
}

.ars-formula {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  background: var(--surface-2);
  padding: 0.85rem 1.1rem;
  border-radius: 0.6rem;
  display: block;
  overflow-x: auto;
  margin: 0.75rem 0;
  border: 1px solid var(--line);
}

.back-link { display: inline-block; margin: 1.5rem 0 0.5rem; }

/* -----------------------------------------------------------------------
   Model page — metric-card grid, breakdown bar charts, judge-audit/cost
   cards (Phase 2 task A).
----------------------------------------------------------------------- */

.metric-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.75rem;
}

.metric-card.metric-card--primary {
  grid-column: span 2;
  background: var(--accent-quiet);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.metric-card--primary .metric-label { color: var(--accent); }
.metric-card--primary .metric-value { font-size: 2.1rem; color: var(--ink); }

@media (max-width: 480px) {
  .metric-card.metric-card--primary { grid-column: span 1; }
}

.metric-card .metric-value.neutral { color: var(--ink-2); }

.breakdown-bars {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0 1.25rem;
}

.breakdown-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface-1);
}

.breakdown-row__chip { display: flex; align-items: center; gap: 0.4rem; }

.breakdown-row__bars {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.breakdown-row__bar-line {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  align-items: center;
  gap: 0.5rem;
}

.breakdown-row__bar-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.breakdown-row__bar-value {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--ink-2);
  min-width: 3.2rem;
  text-align: right;
}

.breakdown-row .score-bar { flex: 1 1 auto; }

.judge-audit p, .cost-line p { margin: 0.35rem 0; }

/* -----------------------------------------------------------------------
   Methodology page — reading measure, category cards, glossary
   (Phase 2 task B).
----------------------------------------------------------------------- */

.prose {
  max-width: 65ch;
}

.prose h2:first-of-type { margin-top: 1.5rem; }

.category-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.75rem;
  max-width: none;
}

.category-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top-width: 3px;
  border-top-style: solid;
}

.category-card--A { border-top-color: #8b5cf6; }
.category-card--B { border-top-color: #0891b2; }
.category-card--C { border-top-color: #ea580c; }
.category-card--D { border-top-color: #db2777; }

.category-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.category-card__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.category-card__glyph svg { width: 100%; height: 100%; }

.category-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.02rem;
  margin: 0;
}

.category-card__body {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
}

.glossary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.85rem;
  margin: 1rem 0 1.75rem;
  max-width: none;
}

.glossary-term {
  padding: 0.9rem 1.05rem;
}

.glossary-term dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.92rem;
  margin: 0 0 0.35rem;
}

.glossary-term dd {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.5;
}

/* -----------------------------------------------------------------------
   Near-misses page — shame-gallery entries (Phase 2 task C).
----------------------------------------------------------------------- */

.entry {
  position: relative;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-left-color: var(--line-strong);
  border-radius: 0.6rem;
  padding: 0.9rem 1.15rem;
  margin: 0 0 0.85rem;
  background: var(--surface-1);
  box-shadow: var(--xs);
}

.entry.confirmed { border-left-color: var(--fooled); background: var(--fooled-bg); }
.entry.attributed { border-left-color: var(--line-strong); }

.entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.entry__title {
  margin: 0;
  font-size: 0.95rem;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  font-weight: 600;
}

.entry__chips { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }

.entry .meta {
  color: var(--ink-3);
  font-size: 0.82rem;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.entry blockquote {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.85rem;
  background: var(--surface-2);
  border-left: 3px solid var(--line);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 0 0.4rem 0.4rem 0;
}

.entry.confirmed blockquote { border-left-color: var(--fooled); }

.entry blockquote mark {
  background: color-mix(in srgb, var(--fooled) 30%, transparent);
  color: var(--ink);
  border-radius: 0.2rem;
  padding: 0 0.1rem;
}

.label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-3);
}

.label.confirmed { border-color: var(--fooled); color: var(--fooled); }

/* -----------------------------------------------------------------------
   Buttons
----------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface-1);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.btn:hover { border-color: var(--line-strong); background: var(--surface-2); }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

/* -----------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------- */

@media (max-width: 640px) {
  .wrap { padding: 1.25rem 1rem 2.5rem; }
  header.site-header { margin: -1.25rem -1rem 1.5rem; padding-left: 1rem; padding-right: 1rem; }
  table:not(.table-scroll table) { display: block; overflow-x: auto; }
}