/* ══════════════════════════════════════════════════════════════════════════
   recode-theme-bridge.css — reskins the legacy pages onto the v2 design system.

   WHY THIS EXISTS
   /news, /explain, /memos, /frameworks, /models were built on a warm palette
   (#FDF7EE ground, coral accent, Instrument Serif, 14px radii). Rewriting all
   45 pages was not an option: the memos alone carry 128 bespoke classes of
   hand-built visual explainers — workflow diagrams, salary cards, skill
   matrices, timeline grids — that would be destroyed by a blanket rewrite.

   But every one of those pages themes off just 27 CSS variables. So this file
   remaps those variables to the v2 tokens and restyles only the SHARED CHROME
   (article shell, nav, footer, callouts). Bespoke diagram geometry is left
   untouched and simply inherits the new palette and type.

   LOAD ORDER IS LOAD-BEARING
   This must be the LAST stylesheet in <head>, after any inline <style> block.
   Variable overrides at equal specificity are decided by document order — put
   this first and the legacy :root wins and nothing changes.

   Requires Archivo to be loaded on the page (legacy pages only fetched
   Instrument Serif + Inter + JetBrains Mono).

   See PLAN-recodeai-rebuild.md §8.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── ground + surfaces ─────────────────────────────────────────────── */
  --bg: #f3f2f2;
  --bg-elevated: #eae9e9;
  --bg-card: #f3f2f2;
  --bg-card-hover: #eae9e9;

  /* NO DARK SURFACES. The legacy pages used --bg-dark for the masthead strip,
     footer and thumbnails. The v2 system is a light, Google-clean ground:
     one paper tone, one surface tone, colour reserved for links and CTAs.
     So --bg-dark is neutralised to the surface tone rather than the ink, and
     every "on-dark" text token flips back to ink so contrast still holds. */
  --bg-dark: #eae9e9;
  --bg-dark-elevated: #f3f2f2;

  /* ── type colours ──────────────────────────────────────────────────── */
  --text: #201e1d;
  --text-muted: color-mix(in srgb, #201e1d 62%, transparent);
  --text-dim: color-mix(in srgb, #201e1d 45%, transparent);
  /* These two are consumed on what USED to be dark bands — now light. */
  --text-on-dark: #201e1d;
  --text-muted-on-dark: color-mix(in srgb, #201e1d 62%, transparent);

  /* ── accent ────────────────────────────────────────────────────────── */
  --accent: #ec3013;
  --accent-hover: #dd2b0f;
  --accent-warm: #e15b47;            /* was saffron; now accent-2 */
  --accent-warm-dim: color-mix(in srgb, #e15b47 16%, transparent);
  --accent-dim: color-mix(in srgb, #ec3013 10%, transparent);
  --accent-glow: color-mix(in srgb, #ec3013 6%, transparent);

  /* ── borders — v2 uses 2px dividers via color-mix ──────────────────── */
  --border: color-mix(in srgb, #201e1d 40%, transparent);
  --border-hover: color-mix(in srgb, #201e1d 55%, transparent);
  --border-accent: color-mix(in srgb, #ec3013 40%, transparent);
  --border-dark: color-mix(in srgb, #201e1d 20%, transparent);

  /* ── priority colours (news tiers) ─────────────────────────────────── */
  --breaking: #ec3013;
  --notable: #9e3526;
  --interesting: color-mix(in srgb, #201e1d 60%, transparent);
  --teal: #605d5d;

  /* ── type stacks — Archivo headings, Inter body ────────────────────── */
  --serif: "Archivo", system-ui, sans-serif;   /* legacy display slot */
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── geometry — zero radius everywhere except pills ────────────────── */
  --r: 0px;
  --r-sm: 0px;
  --r-pill: 999px;

  --max-w: 1200px;
}

/* ── kill the legacy film-grain overlay; v2 has a flat ground ────────── */
body::after { content: none !important; display: none !important; }

/* ── base type ───────────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* !important is deliberate here. The legacy pages set headings via more
   specific selectors (.article-body h2, .memo-hero h1, …) which beat a bare
   h1..h6 rule regardless of load order. Instrument Serif only shipped weight
   400, so without this every legacy heading renders at 400 while the v2 pages
   render at 800 — measurably inconsistent. Verified via computed-style audit. */
h1, h2, h3, h4, h5, h6,
.article-body h1, .article-body h2, .article-body h3, .article-body h4,
.article-hero h1, .memo-hero h1, .article-subtitle, .memo-subtitle,
.card-title, .entry-card h3, .entry-card h4, .excard h4, .scard h4,
.post h3, .post h4, .memo-item h4, .ah, .at, .hl {
  font-family: "Archivo", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

/* Links: news article bodies had no colour rule at all and were falling back
   to the UA default blue. Anchor every link to the palette. */
a { color: var(--accent); }
a:visited { color: var(--accent); }
.article-body a, .abody a, .answer-box a, .sources a { color: var(--accent); }
.mast a, .catnav a, .nav a, .brand, .nav-logo,
.entry-card, .excard, .scard, .post, .memo-item, .related-links a,
footer a, .fcol a, .footer-links a, .foot-bot a, .util a { color: inherit; }
footer a:hover, .fcol a:hover, .footer-links a:hover,
.mast a:hover, .catnav a:hover { color: var(--accent); }

/* Legacy pages set italic serif display type in several places. Archivo has no
   italic display role in v2 — normalise it rather than leave a lone italic. */
.signoff, .lead, .article-subtitle, .memo-subtitle, .d-insight {
  font-family: "Archivo", system-ui, sans-serif !important;
  font-style: normal !important;
}

::selection { background: color-mix(in srgb, #ec3013 30%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════
   SHARED ARTICLE CHROME
   Used by /explain (7), /frameworks (6), /models (6) — one vocabulary,
   19 pages.
   ══════════════════════════════════════════════════════════════════════ */
.nav-logo {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 800;
  letter-spacing: -0.01em; color: var(--text);
}
.nav-logo-dot { background: var(--accent) !important; border-radius: 50%; }
.nav-back, .nav-subscribe { font-family: var(--sans); font-size: 14px; }
.nav-subscribe {
  background: var(--accent); color: var(--bg);
  border-radius: var(--r-pill); border: 0;
}
.nav-subscribe:hover { background: var(--accent-hover); }

.article-hero { border-bottom: 2px solid var(--border); }
.article-label, .memo-eyebrow, .eyebrow, .elabel, .article-cta-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-700, #ae1800);
}
.hero-rule, .section-divider, .d-divider {
  height: 2px !important; border: 0 !important;
  background: var(--border) !important;
}
.article-meta, .memo-meta, .entry-meta, .meta, .byline, .byl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--text-dim);
}

.article-body { font-family: var(--sans); }
.article-body p { font-size: 16px; line-height: 29px; }
.article-body h2 { font-size: 27px; margin-top: 2em; }
.article-body h3 { font-size: 21px; }
.article-body a { color: var(--accent); }
.article-body blockquote {
  border-left: 2px solid var(--accent);
  border-radius: 0; background: transparent;
  font-family: "Archivo", system-ui, sans-serif; font-style: normal;
}

.article-tag, .memo-tag, .tag-outline {
  border-radius: var(--r-pill);
  border: 1px solid var(--accent); color: var(--accent);
  background: transparent; font-family: var(--sans); font-size: 11px;
}
.article-tags, .memo-tags { display: flex; gap: 8px; flex-wrap: wrap; }

.highlight-box, .answer-box, .box, .panel, .d-col-box, .board-frame {
  border-radius: 0 !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
}
.answer-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
}

.article-cta, .memo-cta {
  border-top: 2px solid var(--border); border-radius: 0;
  background: var(--bg-elevated);
}
.cta-btn, .sub-btn, .back {
  border-radius: var(--r-pill);
  font-family: "Archivo", system-ui, sans-serif; font-weight: 800;
  font-size: 13px;
}
.cta-btn, .sub-btn { background: var(--accent); color: var(--bg); border: 0; }
.cta-btn:hover, .sub-btn:hover { background: var(--accent-hover); }

.entry-card, .excard, .scard, .memo-item, .post, .related-links a {
  border-radius: 0 !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  box-shadow: none !important;
}
.entry-card:hover, .excard:hover, .scard:hover, .post:hover {
  background: var(--bg-elevated) !important;
  border-color: var(--accent) !important;
}
.related, .related-links { border-top: 2px solid var(--border); }

/* ══════════════════════════════════════════════════════════════════════
   NEWS / NEWSROOM chrome  (23 generated pages)
   ══════════════════════════════════════════════════════════════════════ */
.mast {
  background: var(--bg) !important;
  border-bottom: 2px solid var(--border) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.brand { font-family: "Archivo", system-ui, sans-serif; font-weight: 800; }
.brand .dot { background: var(--accent); }
.catnav { border-bottom: 2px solid var(--border); }
.util { background: var(--bg-dark); }

/* Legacy gradient thumbnails clash with a flat, light system. Flatten them to
   pale tints of the palette so the four variants stay distinguishable without
   introducing a dark block. The data-k label reads as ink on all four. */
.thumb, .t-coral, .t-teal, .t-dark, .t-warm { border-radius: 0 !important; }
.thumb {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
}
.thumb.t-coral { background: #ffe0d9 !important; }
.thumb.t-warm  { background: #fff2ef !important; }
.thumb.t-teal  { background: #eae7e7 !important; }
.thumb.t-dark  { background: #d7d3d3 !important; }
.thumb::after { color: var(--text) !important; opacity: .7 !important; }

.tag.breaking { color: var(--breaking); }
.tag.notable { color: var(--notable); }
.tag.interesting { color: var(--interesting); }

.filter-pill, .news-filters button, .filter-bar button {
  border-radius: var(--r-pill) !important;
  border: 1px solid var(--border) !important;
  background: transparent !important; color: var(--text) !important;
  font-family: var(--sans) !important;
}
.filter-pill.active, .news-filters button.active, .filter-bar button.active {
  background: var(--accent) !important; border-color: var(--accent) !important;
  color: var(--bg) !important;
}

.sources { border-top: 2px solid var(--border); }
.substk { border-radius: 0; }

/* Footer: light band, separated by a 2px divider rather than a colour change.
   !important because several legacy sheets set footer/.util backgrounds with
   literal hex values that variable remapping cannot reach. */
footer, .util, .foot-top, .foot-bot, .memo-band {
  background: var(--bg) !important;
  color: var(--text-muted) !important;
}
footer { border-top: 2px solid var(--border) !important; }
.foot-bot { border-top: 1px solid var(--border) !important; }
.foot-brand .brand, .memo-band .sec-title { color: var(--text) !important; }
.fcol h5 {
  font-family: var(--mono); color: var(--accent) !important;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
}
.fcol a, .footer-links a, .foot-bot a, .util a { color: var(--text-muted) !important; }
.fcol a:hover, .footer-links a:hover, .foot-bot a:hover, .util a:hover { color: var(--accent) !important; }
.signoff { color: var(--accent) !important; }

/* ══════════════════════════════════════════════════════════════════════
   MEMOS — chrome only. The bespoke explainer diagrams (wf-*, jd-*, d-*,
   time-*, skill-*, pm-tier-*) intentionally keep their own geometry and
   simply inherit the remapped variables above.
   ══════════════════════════════════════════════════════════════════════ */
.memo-hero { border-bottom: 2px solid var(--border); }
.wf-col, .jd-card, .d-seat, .d-agent, .skill-matrix, .time-cell,
.pm-tier, .wf-code-block, .wf-senior-block, .workflow-container,
.diagram-wrap, .diagram-inner, .d-stat, .time-grid, .card-grid > * {
  border-radius: 0 !important;
}
/* Memo diagrams hardcode dark fills (background:#1C2B2B, dark code blocks).
   Variable remapping cannot reach a literal, so these are named explicitly.
   Light surface + ink text keeps the diagrams legible without a black block. */
.wf-code-block, .wf-code-dark, .d-seat, .d-agent, .dark,
.memo-band, .d-col-box.dark, .board-frame, .wf-senior-block {
  background: var(--bg-elevated) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.code-text, .code-comment { color: var(--text-muted) !important; }
.code-comment { font-style: normal !important; }
.wf-output-after, .wf-output-before, .wf-output { color: var(--text) !important; }

.skill-dead { color: var(--text-dim) !important; text-decoration: line-through; }
.skill-alive { color: var(--accent) !important; }
.label-warning, .warning { color: var(--notable) !important; }
.label-safe, .safe { color: var(--text) !important; }
.badge-anthropic, .badge-openai, .badge-deepmind,
.wf-badge, .jd-company-badge, .badge-before, .badge-after {
  border-radius: var(--r-pill) !important;
  font-family: var(--mono) !important; font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Anything still round gets squared. Catch-all last so it cannot be
   overridden by an earlier rule in this file — pills are re-exempted.
   ══════════════════════════════════════════════════════════════════════ */
.wrap, .article, .main, .side, .hero-grid, .body-grid, .exband, .exrow,
.hs, .hi, .mini, .search, input, textarea, select, img, figure, table, code, pre {
  border-radius: 0 !important;
}
.tag, .article-tag, .memo-tag, .filter-pill, .cta-btn, .sub-btn, .back,
.nav-subscribe, .badge-anthropic, .badge-openai, .badge-deepmind,
.wf-badge, .jd-company-badge, .badge-before, .badge-after,
.nav-logo-dot, .brand .dot, .meta-dot, .ticker-dot {
  border-radius: var(--r-pill) !important;
}
.nav-logo-dot, .brand .dot, .meta-dot, .ticker-dot { border-radius: 50% !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
