/* Bridge for pages built on style.css (/prices, /rating, about, blog, contact, privacy, 404, author,
   category, editorial-policy, classic). Loaded after style.css: it maps the old tokens onto the
   aiin-new palette and adds the dark theme, which follows the reader's "aiin-theme" choice through
   data-theme on <html>, set by the boot script in each page head. */
:root {
  --accent: #C8102E;
  --accent-hover: #A50D25;
  --bg: #FDFCF8;
  --surface: #FDFCF8;
  --surface-tint: #F6F4EE;
  --border: #E7E3D9;
  --border-strong: #CFCABD;
  --text: #151412;
  --text-secondary: #45423C;
  --muted: #6D6A63;
  --muted-light: #9A968D;
  --good: #2F7A43;
  --btn: #151412;
  --on-btn: #FDFCF8;
  --foot: #151412;
  --take-bg: #F6F4EE;
  --take-border: #E7E3D9;
  --take-text: #45423C;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #F0435A;
  --accent-hover: #F36B7D;
  --bg: #111113;
  --surface: #111113;
  --surface-tint: #19191C;
  --border: #2A2A2F;
  --border-strong: #3A3A40;
  --text: #EDEAE3;
  --text-secondary: #C4C1BA;
  --muted: #9D9DA3;
  --muted-light: #75757B;
  --good: #5BB36F;
  --btn: #EDEAE3;
  --on-btn: #111113;
  --foot: #19191C;
  --take-bg: #19191C;
  --take-border: #2A2A2F;
  --take-text: #C4C1BA;
  --shadow-card: none;
  --shadow-hover: none;
  --cat-models: #1C2633; --cat-models-fg: #A9C4E6;
  --cat-tools: #172A22; --cat-tools-fg: #9ED2B6;
  --cat-security: #2E1B1D; --cat-security-fg: #E6A9AE;
  --cat-business: #2C2517; --cat-business-fg: #E2C792;
  --cat-research: #241D30; --cat-research-fg: #C6B6E6;
  --cat-agents: #17262E; --cat-agents-fg: #9CCBE2;
  --cat-vibecoding: #2C1B26; --cat-vibecoding-fg: #E2A9CB;
}

/* Header and footer: hairline like the article top bar; the footer keeps a dark band in both themes. */
.topbar { border-bottom: 1px solid var(--border); }
footer { background: var(--foot); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Fixed light colors in style.css that would break on a dark page. */
.featured-card:hover, .news-card:hover { background: var(--surface-tint); }
.ph-bg-default { background: var(--surface-tint); }
.filter-chip.active { background: var(--surface-tint); }
.sticky-social { background: var(--surface); }
.skeleton { background: linear-gradient(90deg, var(--surface-tint) 25%, var(--border) 50%, var(--surface-tint) 75%); background-size: 200% 100%; }
.source-btn { background: var(--btn); color: var(--on-btn); border-radius: 10px; font-weight: 500; }

/* Nav and filter chips: sentence case, two weights, same as the home tabs. */
.topbar-nav a { font-size: 13px; letter-spacing: 0; border-radius: 6px; }
.topbar-nav a.active { font-weight: 500; }
.filter-chip { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Section heads and blog cards: sentence case, 600 headings, 16:9 covers, no lift on hover. */
.section-header { border-bottom: 1px solid var(--border); margin-bottom: 16px; padding-bottom: 8px; }
.section-title { font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.section-rule { display: none; }
.section-all-link { font-weight: 500; letter-spacing: 0; }
.blog-card { border-radius: 12px; overflow: hidden; transition: background var(--t-fast); }
.blog-card:hover { box-shadow: none; transform: none; background: var(--surface-tint); }
.blog-card:hover .blog-card-title { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.blog-card-img, .blog-card-ph { height: auto; aspect-ratio: 16 / 9; }
.blog-card-body { padding: 16px 20px 20px; }
.blog-card-kicker { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; margin-bottom: 4px; }
.blog-card-title { font-weight: 600; }
.blog-card-dek { font-size: 14px; }
.blog-card-meta, .read-min { font-size: 12px; font-weight: 400; }
.contact-icon { color: var(--muted); line-height: 0; margin-top: 4px; }
.contact-label { font-size: 13px; text-transform: none; letter-spacing: 0; }
.contact-value { font-weight: 500; }

/* Category feed: text-only cards span the full row (the base grid reserves 110px for a thumb). */
.news-card:hover { background: var(--surface-tint); }
.news-card > .nc-content:only-child { grid-column: 1 / -1; padding-left: 0; }
.news-card h3 { font-family: var(--brand-serif); font-weight: 600; font-size: 18px; line-height: 1.3; margin: 0 0 4px; }
.news-card h3 a { color: var(--text); }
.news-card:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.news-card .nc-content > p { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.back-link { border-radius: 8px; padding: 4px 12px; }

#cat-feed .news-card:first-child { border-top: none; }

/* Cookie banner sits on the footer band; off-white action instead of a red one. */
.cookie-banner { background: var(--foot); color: #EDEAE3; border-top: 1px solid rgba(237,234,227,.1); }
.cookie-banner a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cookie-accept { background: #FDFCF8; color: #151412; border-radius: 8px; font-weight: 500; }

/* Static pages: same type and link rules as the article. */
.static-card h1 { font-weight: 600; font-size: 34px; letter-spacing: -0.4px; border-bottom: 1px solid var(--border); }
.static-card h2, .static-card h3 { font-weight: 600; }
.static-card a { color: var(--text); text-decoration: underline; text-decoration-color: var(--muted); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.static-card a:hover { text-decoration-color: var(--text); }
.static-highlight { background: var(--surface-tint); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.static-highlight p { font-weight: 500; font-size: 16px; }

@media (max-width: 640px) {
  .static-card h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}