/* ============================================================
   DNA45 · design system + theme engine
   ============================================================
   Every theme sets a full palette, a display/body/mono font trio,
   and its own syntax-highlighting colors. Add more themes by
   dropping another [data-theme="..."] block at the bottom.
*/

/* ---------- GT Maru (Grilli Type trial) — body/response font ---------- */
@font-face {
  font-family: "GT Maru";
  src: url("/fonts/GT-Maru-Regular-Trial.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Maru";
  src: url("/fonts/GT-Maru-Light-Trial.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Will be overridden per-theme. Midnight is the default. */
  --bg:        #08090d;
  --bg-soft:   #0d0f16;
  --panel:     rgba(20, 22, 32, 0.72);
  --panel-2:   rgba(14, 16, 24, 0.72);
  --line:      rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --muted:     rgba(236, 238, 245, 0.58);
  --muted-2:   rgba(236, 238, 245, 0.42);
  --text:      rgba(245, 247, 252, 0.96);

  --brand:     #e9c06b;
  --brand-2:   #f5d98a;
  --accent:    #3cf0d0;
  --accent-2:  #7c5cff;
  --danger:    #ff6a83;

  --on-brand:  #141318;

  /* Typography — GT Maru is the product's default body/response font. */
  --font-display: "Instrument Serif", "Playfair Display", Georgia, serif;
  --font-sans:    "GT Maru", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-italic: italic;
  --display-weight: 400;

  /* Particle network color */
  --particle: rgba(233, 192, 107, 0.7);
  --particle-link: rgba(233, 192, 107, 0.18);

  /* Syntax colors (Prism token mapping) */
  --code-bg:       #05060a;
  --code-fg:       #e6e9f2;
  --code-comment:  #6b7280;
  --code-punct:    #9aa3b2;
  --code-keyword:  #c792ea;
  --code-string:   #9ece6a;
  --code-number:   #f5d98a;
  --code-function: #7aa2f7;
  --code-class:    #e0af68;
  --code-op:       #89ddff;
  --code-var:      #ffbd7c;
  --code-tag:      #f7768e;
  --code-attr:     #e0af68;
  --code-regex:    #b4f9f8;

  --radius: 16px;
  --radius-lg: 22px;
  --radius-sm: 10px;

  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 30px 100px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.5s ease, color 0.5s ease;
}
button, textarea { font-family: inherit; }

/* ============================================================
   Ambient backgrounds
   ============================================================ */
.bg-particles {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
}
body[data-view="results"] .bg-particles { opacity: 0.35; }

.bg-orb {
  position: fixed; border-radius: 50%;
  filter: blur(130px); opacity: 0.5;
  pointer-events: none; z-index: 0;
  animation: float 22s ease-in-out infinite;
}
.orb-a {
  width: 620px; height: 620px; top: -180px; left: -140px;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent-2) 65%, transparent), transparent 60%);
}
.orb-b {
  width: 680px; height: 680px; bottom: -220px; right: -160px;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 50%, transparent), transparent 60%);
  animation-delay: -8s;
}
@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(30px, -20px, 0) scale(1.06); }
}
.bg-grid {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(color-mix(in oklab, var(--text) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--text) 4%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none; z-index: 0;
  opacity: 0.55;
}

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 22px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 4px 8px; cursor: pointer;
  border-radius: 10px; color: var(--text);
}
.nav-brand:hover { background: color-mix(in oklab, var(--text) 4%, transparent); }
.nav-logo {
  width: 55px;
  height: auto; /* preserve native aspect ratio */
  display: block;
  filter: drop-shadow(0 2px 10px color-mix(in oklab, var(--brand) 45%, transparent));
}
.nav-wordmark {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-weight: 700; font-size: 14.5px; letter-spacing: 0.01em;
}
.nav-wordmark em {
  font-style: var(--display-italic); font-family: var(--font-display);
  color: var(--brand); font-weight: var(--display-weight); font-size: 15.5px;
}

/* Landing has its own big logo — hide the nav brand there on
   desktop. On mobile we keep the compact M-mark visible so the
   brand is always anchored in the top-left corner. */
body[data-view="landing"] .nav-brand { visibility: hidden; pointer-events: none; }
@media (max-width: 640px) {
  body[data-view="landing"] .nav-brand { visibility: visible; pointer-events: auto; }
}

.nav-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nav-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 3%, transparent);
  color: var(--text);
  font-size: 12.5px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.nav-pill:hover {
  background: color-mix(in oklab, var(--text) 7%, transparent);
  border-color: var(--line-strong);
}
.nav-powered {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 3%, transparent);
  font-size: 11px; color: var(--muted-2);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.nav-powered:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--text) 7%, transparent);
  border-color: var(--line-strong);
}
.nav-powered img { height: 18px; width: 18px; object-fit: contain; }
.nav-powered-host { font-family: var(--font-mono); font-size: 10.5px; color: var(--brand); opacity: 0.85; }
@media (max-width: 900px) { .nav-powered-host { display: none; } }
@media (max-width: 720px) { .nav-powered span:first-child { display: none; } }

/* Mobile nav: keep only the DNA45 brand + theme switcher.
   Hide "New" pill and the "Powered by Mankind" link on phones to
   reduce clutter — both remain on tablet/desktop. */
@media (max-width: 640px) {
  #newChatBtn,
  .nav-right .nav-powered { display: none !important; }
}

/* Theme switcher */
.theme-switcher { position: relative; }
.theme-swatch {
  width: 12px; height: 12px; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--brand), var(--accent), var(--accent-2), var(--brand));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--text) 6%, transparent);
}
.theme-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 260px; max-height: 70vh; overflow: auto;
  padding: 6px;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  z-index: 40;
  animation: menuIn 0.18s ease both;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.theme-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 10px;
  border: 0; background: transparent; color: var(--text);
  text-align: left; cursor: pointer; border-radius: 10px;
  font-size: 13px;
}
.theme-item:hover { background: color-mix(in oklab, var(--text) 6%, transparent); }
.theme-item[aria-current="true"] { background: color-mix(in oklab, var(--brand) 14%, transparent); }
.theme-item .sw {
  width: 22px; height: 22px; border-radius: 7px;
  border: 1px solid var(--line);
}
.theme-item .meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.theme-item .meta .n { font-weight: 600; }
.theme-item .meta .s { font-size: 11px; color: var(--muted-2); font-family: var(--font-mono); }
.theme-item .check {
  width: 16px; height: 16px; opacity: 0;
  color: var(--brand);
}
.theme-item[aria-current="true"] .check { opacity: 1; }

/* ============================================================
   Landing — minimal
   ============================================================ */
.landing {
  position: relative; z-index: 1;
  min-height: calc(100vh - 64px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px 90px;
}
.landing-inner {
  width: min(720px, 100%);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 26px;
  animation: fadeUp 0.7s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-mark {
  /* M-logo sits above the DNA45 wordmark as a brand seal,
     echoing the Mankind Research lockup on the docs sidebar. */
  width: clamp(44px, 7vw, 68px);
  height: auto;
  margin: 0 auto -4px;
  display: block;
  opacity: 0.95;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.22));
  animation: fadeIn 0.55s ease both;
}
.hero-logo {
  /* Preserve native aspect ratio — width only, height auto. */
  width: clamp(120px, 18vw, 200px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 40px color-mix(in oklab, var(--brand) 45%, transparent));
  animation: logoFloat 7s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.hero-line {
  margin: 0;
  /* Locked typography — does not change with theme. */
  font-family: "Instrument Serif", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none !important;
  font-size: clamp(25px, 4vw, 45px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  background: linear-gradient(180deg, var(--text) 0%, color-mix(in oklab, var(--text) 55%, transparent) 120%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Search shell */
.search { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.search-shell {
  width: 100%;
  background: color-mix(in oklab, var(--bg-soft) 85%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 12px 12px 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s, border-color 0.2s;
  position: relative;
}
.search-shell::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--brand) 60%, transparent),
    color-mix(in oklab, var(--accent) 45%, transparent) 50%,
    color-mix(in oklab, var(--accent-2) 55%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0; transition: opacity 0.25s;
  pointer-events: none;
}
.search-shell:focus-within::before { opacity: 1; }
.search-shell:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 14%, transparent), var(--shadow-2);
}
.search-shell.compact {
  border-radius: var(--radius);
  padding: 8px 8px 8px 14px;
  grid-template-columns: auto 1fr auto auto;
}
.search-icon {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  color: var(--muted);
}
.search-shell textarea {
  width: 100%; resize: none;
  border: 0; outline: 0; background: transparent;
  color: var(--text);
  font-size: 16.5px; line-height: 1.5;
  padding: 8px 0;
  min-height: 28px;
  max-height: 220px;
  overflow-y: auto;
  /* Ensure typed text is always rendered above the placeholder on mobile */
  caret-color: var(--brand);
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.search-shell textarea::placeholder {
  color: var(--muted-2);
  opacity: 1;
  transition: opacity 0.15s ease, color 0.3s ease;
}
/* ============================================================
   Proverb overlay — premium shimmer over the landing input
   ------------------------------------------------------------
   A real DOM node (not the placeholder) so we can apply a
   gradient-text shimmer like ChatGPT/Grok's "Thinking…" pill.
   Hidden on portrait mobile (the input would be too cramped).
   ============================================================ */
.proverb-overlay {
  position: absolute;
  /* Overlap exactly the textarea cell between the icon and send button.
     Left  = shell-padding(16) + icon(28) + gap(10) = 54px
     Right = shell-padding(12) + send(38) + gap(10) = 60px */
  left: 54px;
  right: 60px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-family: "GT Maru", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15.5px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.005em;
  line-height: 1.5;

  /* Shimmer: a cool aqua base with a brighter highlight sweep.
     The gradient sits on the text via background-clip. */
  background: linear-gradient(
    100deg,
    #5ec9c9 0%,
    #7ee3e3 32%,
    #ffffff 48%,
    #c8f5f5 55%,
    #7ee3e3 70%,
    #5ec9c9 100%
  );
  background-size: 240% 100%;
  background-position: 240% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(126, 227, 227, 0.18);

  opacity: 0;
  transition: opacity 0.55s ease;
}
.proverb-overlay.is-visible {
  opacity: 0.95;
  animation: proverb-shimmer 3.4s linear infinite;
}
.proverb-overlay.is-long { font-size: 13.5px; }
@keyframes proverb-shimmer {
  0%   { background-position: 240% 0; }
  100% { background-position: -60% 0; }
}

/* When the textarea is focused or the user is typing, fade the proverb out
   so it doesn't compete with the caret. Also hide on portrait mobile. */
.search-shell:focus-within .proverb-overlay,
.search-shell textarea:not(:placeholder-shown) ~ .proverb-overlay {
  opacity: 0 !important;
  animation: none;
}
@media (max-width: 720px) and (orientation: portrait) {
  .proverb-overlay { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .proverb-overlay.is-visible { animation: none; }
}
/* Hide the placeholder the moment focus lands or text is present — mobile Safari
   sometimes keeps the placeholder painted on top of the caret row. */
.search-shell textarea:focus::placeholder { opacity: 0.35; }
.search-shell textarea:not(:placeholder-shown)::placeholder { opacity: 0; }
.search-send {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; cursor: pointer; border-radius: 50%;
  color: var(--on-brand);
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 8px 22px color-mix(in oklab, var(--brand) 35%, transparent);
  transition: transform 0.15s, box-shadow 0.15s;
}
.search-send:hover { transform: translateY(-1px); }

/* ---- Mobile tuning for the search shell ---- */
@media (max-width: 640px) {
  .landing { padding: 30px 14px 90px; }
  .landing-inner { gap: 18px; }
  .hero-mark { width: clamp(34px, 10vw, 52px); margin: 0 auto -2px; }
  .hero-logo { width: clamp(96px, 26vw, 140px); }
  .hero-line { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.1; }

  .search { gap: 10px; }
  .search-shell {
    padding: 10px 10px 10px 12px;
    gap: 8px;
    align-items: start;            /* let shell grow cleanly with the textarea */
    grid-template-columns: auto 1fr auto;
  }
  .search-icon { width: 24px; height: 24px; margin-top: 6px; }
  .search-shell textarea {
    font-size: 16px;                /* prevents iOS zoom on focus */
    line-height: 1.5;
    padding: 6px 0;
    min-height: 26px;
    max-height: 40vh;
  }
  .search-send { width: 36px; height: 36px; margin-top: 2px; }

  /* ---------- COMPOSER (results page) on mobile ----------
     Drop the inline mode-toggle to its own row so the textarea has
     room to breathe. Without this the 4-column grid (icon | textarea
     | mode-toggle | send) crushes the textarea to ~120 px on narrow
     phones, which is the bug the user kept hitting. */
  .composer { padding: 8px; }
  .composer .search-shell,
  .composer .search-shell.compact {
    padding: 6px 8px 8px 10px;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 8px;
    align-items: center;
  }
  .composer .search-shell .search-icon { grid-row: 1; grid-column: 1; }
  .composer .search-shell textarea     { grid-row: 1; grid-column: 2; }
  .composer .search-shell .search-send { grid-row: 1; grid-column: 3; }
  .composer .search-shell .mode-toggle {
    grid-row: 2; grid-column: 1 / -1;
    justify-self: center;
    flex-wrap: nowrap;             /* keep the three pills on one line */
  }
  .composer textarea { font-size: 16px; }

  /* Landing-page mode-toggle (separate row already) — let it wrap. */
  .search > .mode-toggle { flex-wrap: wrap; justify-content: center; }

  /* Composer wrap takes a touch more horizontal real estate on phones
     so the bottom-anchored bar doesn't feel like it's floating mid-air. */
  .composer-wrap { width: calc(100% - 20px); bottom: 12px; }
  .composer-foot { font-size: 10.5px; padding: 6px 6px 0; }
}

/* Very narrow phones: drop the share/upgrade ornamentation that competes
   with the input width. */
@media (max-width: 380px) {
  .composer .search-shell .mode-opt { padding: 6px 10px; font-size: 11px; }
  .composer-foot .m-credit span:not(.m-credit-img) { display: none; }
}
.search-send:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Mode toggle — landing (standalone) and compact (inside search) */
.mode-toggle {
  display: inline-flex; padding: 4px;
  background: color-mix(in oklab, var(--bg-soft) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
}
.mode-toggle.compact { padding: 3px; border: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 45%, transparent); }
.mode-opt {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; color: var(--muted);
  padding: 8px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.mode-toggle.compact .mode-opt { padding: 5px 10px; font-size: 11.5px; }
.mode-opt:hover { color: var(--text); }
.mode-opt .m-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-2);
}
.mode-opt[data-mode="fast"] .m-dot  { background: var(--accent); }
.mode-opt[data-mode="turbo"] .m-dot { background: var(--accent-2); }
.mode-opt[data-mode="auto"] .m-dot  { background: var(--brand); }
.mode-opt.active {
  color: var(--on-brand);
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 4px 14px color-mix(in oklab, var(--brand) 30%, transparent);
}
.mode-opt.active .m-dot { background: var(--on-brand); opacity: 0.85; }

/* ============================================================
   Results
   ============================================================ */
.results {
  position: relative; z-index: 1;
  min-height: calc(100vh - 64px);
  padding: 24px 20px 180px;
  display: flex; justify-content: center;
}
.results-inner { width: min(860px, 100%); display: flex; flex-direction: column; gap: 20px; }
.thread { display: flex; flex-direction: column; gap: 28px; padding-bottom: 40px; }

.q-block { display: flex; flex-direction: column; gap: 8px; animation: fadeUp 0.4s ease both; }
.q-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.q-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
}
.q-label .q-time {
  color: var(--muted-2);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.q-label .q-time::before {
  content: "·";
  margin: 0 6px 0 4px;
  opacity: 0.6;
}
.q-text {
  font-family: var(--font-display);
  font-style: var(--display-italic);
  font-weight: var(--display-weight);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2; letter-spacing: -0.015em;
  margin: 0;
}

.a-block { display: flex; flex-direction: column; gap: 14px; animation: fadeUp 0.5s 0.05s ease both; }
.a-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.a-brand {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--brand) 10%, transparent);
}
.a-brand img { width: 18px; height: 18px; }
.a-brand strong { font-size: 12.5px; font-weight: 600; }
.a-mode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 11.5px; font-family: var(--font-mono);
  border: 1px solid var(--line);
}
.a-mode.mode-fast  { color: var(--accent);   border-color: color-mix(in oklab, var(--accent) 35%, transparent);   background: color-mix(in oklab, var(--accent) 10%, transparent); }
.a-mode.mode-web   { color: var(--brand);    border-color: color-mix(in oklab, var(--brand) 45%, transparent);    background: color-mix(in oklab, var(--brand) 12%, transparent); }
.a-mode.mode-deep  { color: var(--accent-2); border-color: color-mix(in oklab, var(--accent-2) 45%, transparent); background: color-mix(in oklab, var(--accent-2) 12%, transparent); }
.a-mode svg { width: 12px; height: 12px; }

.a-chip {
  padding: 5px 10px; font-size: 11.5px;
  border-radius: 999px; border: 1px solid var(--line);
  color: var(--muted); background: color-mix(in oklab, var(--text) 3%, transparent);
  font-family: var(--font-mono);
}
.a-conf {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--muted); font-family: var(--font-mono);
}
.a-conf .bar { width: 80px; height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--text) 9%, transparent); overflow: hidden; }
.a-conf .bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--brand));
  transition: width 0.6s cubic-bezier(.2,.7,.2,1);
}

/* Answer card with M-logo at top-right corner.

   Hope's directive: Shepherd's font color NEVER changes based on theme —
   it's always white on a dark panel, regardless of whether the page is
   in Stanford / Tuks / Unibo light themes or any dark theme. The
   Shepherd card is its own brand surface; reading flow must stay
   consistent so the eye trains on the same look every time he speaks.

   We achieve this by scope-overriding the theme tokens INSIDE every
   Shepherd `.a-card` so all descendants (intro, body, closing, headings,
   refs, follow-ups, citation chips) inherit the midnight palette via
   the existing `var(--text)` / `var(--panel)` chain — no per-element
   color rewrites needed. */
.a-card {
  /* Lock to midnight tokens (matches :root defaults). All theme-aware
     descendants get dark panel + white text without any further work. */
  --bg:          #08090d;
  --bg-soft:     #0d0f16;
  --panel:       rgba(20, 22, 32, 0.82);
  --panel-2:     rgba(14, 16, 24, 0.74);
  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --muted:       rgba(236, 238, 245, 0.58);
  --muted-2:     rgba(236, 238, 245, 0.42);
  --text:        rgba(245, 247, 252, 0.96);
  color-scheme: dark;
  color: var(--text);

  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 22px 24px 20px;
  box-shadow: var(--shadow-1);
}
.a-card .m-corner {
  position: absolute;
  top: 14px; right: 14px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--text) 4%, transparent);
  border: 1px solid var(--line);
  opacity: 0.85;
  transition: transform 0.2s, opacity 0.2s;
}
.a-card .m-corner:hover { opacity: 1; transform: rotate(-6deg); }
.a-card .m-corner img { width: 16px; height: 16px; }

.layers {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 4px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border-radius: 12px; width: fit-content;
}
.tab {
  border: 0; background: transparent; color: var(--muted);
  padding: 7px 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] {
  color: var(--text);
  background: color-mix(in oklab, var(--text) 8%, transparent);
}

/* ------------------------------------------------------------
   Aqua-pastel pops for answer-card layer tabs.
   Each tab cycles through a cool, reader-friendly palette so
   the different answer layers (Short, Deep, Sources, etc.) are
   visually distinguishable at a glance — subtle when idle,
   saturated when selected.
   ------------------------------------------------------------ */
.layers .tab:nth-child(6n+1) { --tab-hue: #7ee3e3; } /* aqua       */
.layers .tab:nth-child(6n+2) { --tab-hue: #8ec9ff; } /* sky        */
.layers .tab:nth-child(6n+3) { --tab-hue: #a7e8c2; } /* mint       */
.layers .tab:nth-child(6n+4) { --tab-hue: #b5b9ff; } /* periwinkle */
.layers .tab:nth-child(6n+5) { --tab-hue: #9fe6d1; } /* seafoam    */
.layers .tab:nth-child(6n)   { --tab-hue: #9cc0ff; } /* cornflower */

.layers .tab {
  position: relative;
  color: color-mix(in oklab, var(--tab-hue, var(--muted)) 75%, var(--muted));
}
.layers .tab::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  margin-right: 7px;
  background: var(--tab-hue, var(--muted));
  box-shadow: 0 0 8px color-mix(in oklab, var(--tab-hue, var(--muted)) 55%, transparent);
  vertical-align: middle;
  transition: transform 0.18s, box-shadow 0.18s;
}
.layers .tab:hover::before { transform: scale(1.25); }
.layers .tab[aria-selected="true"] {
  color: var(--text);
  background: color-mix(in oklab, var(--tab-hue, var(--text)) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tab-hue, var(--line)) 45%, transparent);
}
.layers .tab[aria-selected="true"]::before {
  transform: scale(1.15);
  box-shadow: 0 0 12px color-mix(in oklab, var(--tab-hue) 80%, transparent);
}

/* ------------------------------------------------------------
   Fact highlighting inside answer cards.
   Numbers, years and multi-word place / proper-noun spans get
   a soft tint so readers can scan key information quickly.
   Conservative palette — never screams, just points.
   ------------------------------------------------------------ */
.md .hl-num   { color: #ffc773; font-weight: 600; }               /* amber   — numbers / quantities */
.md .hl-year  { color: #b5b9ff; font-weight: 600; }               /* perw.   — dates / years        */
.md .hl-place { color: #6aa9ff; }                                  /* plain elegant blue — places    */

/* Markdown typography */
.md { font-size: 15.5px; line-height: 1.7; color: color-mix(in oklab, var(--text) 92%, transparent); }
.md > * + * { margin-top: 0.9em; }
.md h1, .md h2, .md h3 {
  font-family: var(--font-display); font-style: var(--display-italic);
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  color: var(--text);
  margin-top: 1.4em;
}
.md h1 { font-size: 1.6em; }
.md h2 { font-size: 1.35em; }
.md h3 { font-size: 1.15em; color: var(--brand); }
.md p { margin: 0; }
.md ul, .md ol { padding-left: 1.3em; margin: 0; }
.md li + li { margin-top: 0.35em; }
.md li::marker { color: var(--brand); }
.md a { color: var(--accent); text-decoration: none; border-bottom: 1px dashed color-mix(in oklab, var(--accent) 45%, transparent); }
.md a:hover { border-bottom-style: solid; }
.md strong { color: var(--text); }
.md blockquote {
  border-left: 2px solid var(--brand);
  padding: 2px 0 2px 14px; color: var(--muted);
  margin: 0;
}
.md hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
.md table { width: 100%; border-collapse: collapse; font-size: 14px; }
.md th, .md td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.md th { color: var(--muted); font-weight: 600; }

/* Inline code */
.md :not(pre) > code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: color-mix(in oklab, var(--text) 6%, transparent);
  padding: 2px 6px; border-radius: 6px;
  border: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
  color: var(--code-fg);
}

/* Code blocks — Prism tokens use CSS variables so they restyle per theme */
.md pre {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
  color: var(--code-fg);
  position: relative;
}
.md pre::before {
  content: attr(data-lang);
  position: absolute; top: 8px; left: 14px;
  font-size: 10.5px; color: var(--muted-2);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-family: var(--font-mono);
  pointer-events: none;
}
.md pre { padding-top: 26px; }
/* Copy button injected into every fenced code block by highlightCodeIn().
   Sits top-right, appears on hover, locks to "Copied" state for ~1.4s. */
.md pre .code-copy {
  position: absolute;
  top: 6px; right: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 7px;
  font: 500 11px/1 var(--font-body, inherit);
  color: color-mix(in oklab, var(--code-fg) 78%, transparent);
  background: color-mix(in oklab, var(--code-fg) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--code-fg) 14%, transparent);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}
.md pre:hover .code-copy,
.md pre:focus-within .code-copy,
.md pre .code-copy:focus-visible,
.md pre .code-copy.is-copied { opacity: 1; }
.md pre .code-copy:hover {
  color: var(--code-fg);
  background: color-mix(in oklab, var(--code-fg) 14%, transparent);
  border-color: color-mix(in oklab, var(--code-fg) 22%, transparent);
  transform: translateY(-1px);
}
.md pre .code-copy.is-copied {
  color: #0b0d12;
  background: color-mix(in oklab, #22c55e 88%, transparent);
  border-color: color-mix(in oklab, #22c55e 90%, transparent);
}
.md pre .code-copy svg { flex: 0 0 auto; }
.md pre code {
  background: transparent; border: 0; padding: 0;
  color: inherit; font-family: var(--font-mono);
}
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--code-comment); font-style: italic; }
.token.punctuation { color: var(--code-punct); }
.token.property, .token.tag, .token.boolean, .token.symbol, .token.deleted { color: var(--code-tag); }
.token.number, .token.constant { color: var(--code-number); }
.token.selector, .token.attr-name, .token.char, .token.builtin, .token.inserted { color: var(--code-attr); }
.token.string { color: var(--code-string); }
.token.operator, .token.entity, .token.url, .token.variable { color: var(--code-op); }
.token.atrule, .token.attr-value, .token.keyword { color: var(--code-keyword); }
.token.function, .token.class-name { color: var(--code-function); }
.token.regex, .token.important { color: var(--code-regex); }
.token.important, .token.bold { font-weight: 700; }
.token.italic { font-style: italic; }

/* Typewriter caret */
.caret {
  display: inline-block; width: 2px; height: 1em;
  background: var(--brand);
  vertical-align: -0.15em;
  margin-left: 2px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Actions */
.a-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.a-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 3%, transparent);
  color: var(--text);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.a-btn:hover {
  background: color-mix(in oklab, var(--text) 7%, transparent);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.a-btn.upgrade {
  color: var(--text);
  border-color: color-mix(in oklab, var(--accent-2) 45%, transparent);
  background: color-mix(in oklab, var(--accent-2) 18%, transparent);
}
.a-btn svg { width: 13px; height: 13px; }
.a-actions-spacer { flex: 1 1 auto; }
.a-btn.a-icon {
  width: 34px; height: 34px; padding: 0;
  display: inline-grid; place-items: center;
  border-radius: 999px;
}
.a-btn.a-icon svg { width: 15px; height: 15px; }
.a-btn.a-icon.is-active {
  color: var(--text);
  background: color-mix(in oklab, var(--brand) 22%, transparent);
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
}
.a-btn[data-action="dislike"].is-active {
  background: color-mix(in oklab, #ff6b8a 22%, transparent);
  border-color: color-mix(in oklab, #ff6b8a 55%, var(--line));
}

/* ============================================================
   Share button (auto-injected on cards without an action bar)
   ------------------------------------------------------------
   Lives at the BOTTOM of the card — either pushed to the right
   of the card's .extras-foot row, or as its own trailing pill
   when no footer exists. Never at the top.
   ============================================================ */
.share-btn {
  align-self: flex-end;
  margin-left: auto;
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--muted); font-size: 11px;
  font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s;
}
.share-btn:hover {
  color: var(--text);
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
  background: color-mix(in oklab, var(--brand) 18%, transparent);
  transform: translateY(-1px);
}
.share-btn svg { width: 13px; height: 13px; }
/* When the button sits inside an existing footer row, no extra top margin
   is needed — it aligns with the footer's baseline. */
.share-btn--inline {
  margin-top: 0;
  padding: 5px 10px;
  font-size: 10.5px;
}

/* ============================================================
   Social Share Popover
   ============================================================ */
.share-popover {
  position: absolute;
  width: 320px;
  background: color-mix(in oklab, var(--panel) 96%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.45),
              0 8px 20px -8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  z-index: 1000;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.share-popover.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.share-popover .sp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding: 0 2px;
}
.share-popover .sp-title {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  font-family: var(--font-mono);
}
.share-popover .sp-close {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--muted);
  cursor: pointer; border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.share-popover .sp-close:hover {
  background: color-mix(in oklab, var(--text) 8%, transparent);
  color: var(--text);
}
.share-popover .sp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 10px;
}
.share-popover .sp-icon {
  --ch: var(--brand);
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 4%, transparent);
  color: var(--muted-2);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
}
.share-popover .sp-icon:hover {
  transform: translateY(-2px);
  color: #fff;
  background: var(--ch);
  border-color: var(--ch);
  box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--ch) 70%, transparent);
}
.share-popover .sp-icon svg { width: 18px; height: 18px; }
.share-popover .sp-tools {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
}
.share-popover .sp-tool {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--text); font-size: 13px;
  text-align: left; cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.share-popover .sp-tool:hover {
  background: color-mix(in oklab, var(--text) 7%, transparent);
}
.share-popover .sp-tool svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.share-popover .sp-foot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed color-mix(in oklab, var(--text) 8%, transparent);
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted-2); letter-spacing: 0.1em; text-transform: uppercase;
}
.share-popover .sp-foot img { width: 14px; height: 14px; object-fit: contain; opacity: 0.85; }

/* ============================================================
   Card stamp — small DNA45 mark in the bottom-right corner.
   Hidden during normal use; revealed only while capturing a
   snapshot for sharing (card.is-sharing).
   ============================================================ */
.card-stamp {
  position: absolute;
  right: 14px; bottom: 12px;
  display: none;
  align-items: center; gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--panel) 88%, transparent);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.35);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  z-index: 2;
}
.card-stamp img { width: 16px; height: 16px; object-fit: contain; opacity: 0.95; }
.card-stamp span { color: var(--text); font-weight: 600; letter-spacing: 0.12em; }

/* Reveal the stamp + hide chrome during capture */
.is-sharing .card-stamp { display: inline-flex; }
.is-sharing .share-btn,
.is-sharing .share-popover,
.is-sharing .a-actions,
.is-sharing .caret { display: none !important; }

/* ============================================================
   Share popover — URL row + spinner
   ============================================================ */
.share-popover .sp-status {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 6px; color: var(--muted); font-size: 12.5px;
}
.share-popover .sp-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--text) 20%, transparent);
  border-top-color: var(--brand);
  animation: sp-spin 0.9s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }
.share-popover .sp-url-row {
  display: flex; align-items: stretch; gap: 6px;
  margin-bottom: 10px;
}
.share-popover .sp-url {
  flex: 1; min-width: 0;
  padding: 8px 10px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text);
  background: color-mix(in oklab, var(--text) 5%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}
.share-popover .sp-url:focus { border-color: color-mix(in oklab, var(--brand) 55%, var(--line)); }
.share-popover .sp-copy {
  display: grid; place-items: center;
  width: 36px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 5%, transparent);
  color: var(--muted); border-radius: 8px; cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.share-popover .sp-copy:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--brand) 18%, transparent);
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
}
.share-popover .sp-copy svg { width: 14px; height: 14px; }

/* ============================================================
   Toast (soft, never red)
   ============================================================ */
.dna45-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 12px);
  background: color-mix(in oklab, var(--panel) 96%, transparent);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px; font-family: var(--font-mono);
  box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  z-index: 10000;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.dna45-toast.is-visible {
  opacity: 1; transform: translate(-50%, 0);
}

/* ============================================================
   Research animation
   ============================================================ */
.research { display: flex; flex-direction: column; gap: 14px; animation: fadeUp 0.35s ease both; }
.research-head { display: flex; align-items: center; gap: 12px; }
.research-spinner {
  width: 44px; height: 44px; position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.research-spinner .rs-orbit {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
}
.research-spinner .rs-orbit--a {
  border-top-color: var(--brand);
  border-right-color: var(--brand);
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--brand) 60%, transparent));
  animation: spin 1.05s linear infinite;
}
.research-spinner .rs-orbit--b {
  inset: 6px;
  border-top-color: var(--accent);
  border-left-color: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 55%, transparent));
  animation: spin 1.8s linear infinite reverse;
}
.research-spinner .rs-mark {
  width: 18px; height: 18px;
  object-fit: contain;
  border-radius: 4px;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--text) 35%, transparent));
  animation: rsMarkPulse 2.4s ease-in-out infinite;
  position: relative; z-index: 1;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rsMarkPulse {
  0%, 100% { transform: scale(1);    opacity: 0.92; }
  50%      { transform: scale(1.08); opacity: 1; }
}

.research-title { display: flex; flex-direction: column; gap: 2px; }
.research-title .t { font-size: 15px; font-weight: 600; color: var(--text); }
.research-title .s { font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); }

.research-steps {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 8px;
}
.step {
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  transition: background 0.25s;
}
.step + .step { border-top: 1px dashed color-mix(in oklab, var(--text) 4%, transparent); }
.step .ico {
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 4%, transparent);
  color: var(--muted);
}
.step .ico svg { width: 12px; height: 12px; }
.step .label { font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.step .label .tag {
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line);
  color: var(--muted-2);
}
.step .timing { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); }

.step.active { background: color-mix(in oklab, var(--brand) 8%, transparent); }
.step.active .ico {
  border-color: color-mix(in oklab, var(--brand) 50%, transparent);
  background: color-mix(in oklab, var(--brand) 18%, transparent);
  color: var(--brand);
  animation: halo 1.6s ease-in-out infinite;
}
.step.active .label { color: var(--text); }
@keyframes halo {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 45%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand) 0%, transparent); }
}
.step.done .ico {
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  color: var(--accent);
}
.step.done .label { color: color-mix(in oklab, var(--text) 80%, transparent); }
.step.active .label::after {
  content: ""; display: inline-block;
  width: 2px; height: 14px; background: var(--brand);
  margin-left: 6px; animation: blink 1s steps(2) infinite;
  vertical-align: middle;
}

.research-graph {
  position: relative; height: 64px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(600px 80px at var(--mx, 30%) 50%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in oklab, var(--bg-soft) 95%, transparent), color-mix(in oklab, var(--panel) 80%, transparent));
  overflow: hidden;
}
.research-graph .node {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in oklab, var(--text) 35%, transparent);
  animation: node-pop 1.4s ease-in-out infinite;
}
.research-graph .node.big {
  width: 12px; height: 12px;
  background: var(--brand);
  box-shadow: 0 0 16px color-mix(in oklab, var(--brand) 75%, transparent);
}
@keyframes node-pop {
  0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
  50%      { opacity: 1; transform: translateY(-50%) scale(1.35); }
}
.research-graph .beam {
  position: absolute; top: 0; bottom: 0; left: -60%; width: 60%;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 22%, transparent), transparent);
  animation: beam 2.2s linear infinite;
}
@keyframes beam { to { transform: translateX(260%); } }

/* ============================================================
   Composer
   ============================================================ */
.composer-wrap {
  position: fixed; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  width: min(860px, calc(100% - 40px));
  z-index: 5;
}
/* Frosted-glass veil that extends across the full viewport bottom so
   any card scrolling behind the composer fades and blurs out instead
   of poking through. Anchored to the viewport, not the composer box. */
.composer-wrap::before {
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 210px;
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  background: linear-gradient(
    to top,
    color-mix(in oklab, var(--bg) 94%, transparent) 0%,
    color-mix(in oklab, var(--bg) 72%, transparent) 55%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(to top, black 45%, transparent 100%);
          mask-image: linear-gradient(to top, black 45%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}
.composer-logo {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 6px 8px;
  -webkit-user-select: none; user-select: none;
  /* Allow double-tap-to-minimize on mobile without iOS zoom hijacking it. */
  touch-action: manipulation;
}
.composer-logo img {
  width: 90px;              /* +25% of the previous 72px */
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 18px color-mix(in oklab, var(--brand) 40%, transparent));
}

/* ============================================================
   Composer minimize → M-logo
   ------------------------------------------------------------
   Mobile-only behaviour. When the user is scrolling through
   cards (or double-taps the DNA45 logo) the whole composer
   collapses into a small circular M-logo anchored bottom-left.
   Tapping the M-logo restores the full search bar.
   ============================================================ */
.composer-mlogo {
  display: none;             /* hidden until .is-minimized */
  width: 56px; height: 56px;
  border-radius: 50%;
  /* Hope's spec (2026-05-10): aqua blue M-logo on a BLACK circle
     background. Reads as a hard, confident "tap me to bring the
     bar back" affordance — distinct from any other UI surface. */
  border: 1px solid color-mix(in oklab, #00d4ff 40%, #0a0a0c);
  background: #0a0a0c;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 212, 255, 0.18),
    0 0 22px -6px rgba(0, 212, 255, 0.55);
  cursor: pointer;
  padding: 9px;
  place-items: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  touch-action: manipulation;
}
.composer-mlogo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  /* Tint the M-logo aqua via the same mask trick used elsewhere
     in the app — keeps the artwork crisp without us needing a
     dedicated coloured asset. drop-shadow adds the glow. */
  filter:
    brightness(0) saturate(100%)
    invert(72%) sepia(91%) saturate(2452%) hue-rotate(151deg) brightness(101%) contrast(101%)
    drop-shadow(0 0 6px rgba(0, 212, 255, 0.55));
}
.composer-mlogo:hover {
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 212, 255, 0.32),
    0 0 28px -4px rgba(0, 212, 255, 0.7);
}
.composer-mlogo:active { transform: scale(0.94); }

/* Hope's spec (2026-05-10): minimize-on-double-tap now works on
   WEB too — not just mobile. The minimized layout is the same
   pattern (wrap shrinks, M-logo pops in) regardless of viewport. */
.composer-wrap.is-minimized {
  width: auto;
  left: 12px;
  transform: none;
  bottom: 14px;
}
.composer-wrap.is-minimized .composer-logo,
.composer-wrap.is-minimized .composer,
.composer-wrap.is-minimized .composer-foot { display: none; }
.composer-wrap.is-minimized::before { display: none; }
.composer-wrap.is-minimized .composer-mlogo {
  display: grid;
  animation: composer-mlogo-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes composer-mlogo-pop {
  0%   { opacity: 0; transform: scale(0.5) translateY(20px); }
  100% { opacity: 1; transform: scale(1)   translateY(0); }
}
.composer {
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 8px;
  border-radius: calc(var(--radius-lg) + 6px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.composer .search-shell { border-radius: var(--radius); padding: 6px 6px 6px 12px; }
.composer textarea { font-size: 15px; padding: 6px 0; }
.composer-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 2px;
  font-size: 11.5px; color: var(--muted-2);
}
.m-credit { display: inline-flex; align-items: center; gap: 6px; }
.m-credit img { width: 14px; height: 14px; }

.err {
  border: 1px solid color-mix(in oklab, var(--danger) 45%, transparent);
  background: color-mix(in oklab, var(--danger) 12%, transparent);
  color: var(--danger);
  border-radius: var(--radius); padding: 12px 14px; font-size: 14px;
}

body[data-view="landing"] #results { display: none !important; }
body[data-view="results"] #landing { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--text) 10%, transparent); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--text) 18%, transparent); }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Nav auto-hide while wallpapers are active
   ============================================================ */
.nav { transition: opacity 0.45s ease, transform 0.45s ease; }

/* ============================================================
   Pinned-floating nav reveal
   ------------------------------------------------------------
   Hope's spec (2026-05-10): "when i tap once on the DNA45 logo
   the top nav bar must appear... cos sometimes i be having a
   million cards and i have to scroll all the way to the top for
   the nav bar to appear". When body has `.nav-pinned-floating`,
   the nav lifts out of the document flow and pins to the top of
   the viewport as an overlay for 6 s (or until the user clicks
   outside / hits Esc).
   ============================================================ */
body.nav-pinned-floating .nav {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 9990;
  background: color-mix(in oklab, var(--panel) 96%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow:
    0 1px 0 var(--line) inset,
    0 12px 32px -12px rgba(0, 0, 0, 0.45);
  animation: nav-pinned-slide 0.28s ease-out;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
@keyframes nav-pinned-slide {
  from { transform: translateY(-100%); opacity: 0.6; }
  to   { transform: translateY(0);     opacity: 1;   }
}

body.wall-active:not(.nav-reveal) .nav {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
/* Tiny invisible hotspot near top edge so user can pull nav back by hovering. */
body.wall-active:not(.nav-reveal)::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; height: 16px;
  z-index: 25;
}

/* ============================================================
   Wallpaper crossfade (landing only, dark themes only)
   ============================================================ */
.bg-wallpaper {
  position: fixed; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.8s ease, transform 1.8s ease;
  z-index: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.bg-wallpaper.visible { opacity: 1; }

/* First reveal — cinematic, longer fade + gentle Ken-Burns drift so
   the landing glides into its hero frame instead of snapping. */
.bg-wallpaper.is-first {
  transition: opacity 2.8s cubic-bezier(0.22, 0.65, 0.22, 1),
              transform 3.2s cubic-bezier(0.22, 0.65, 0.22, 1),
              filter 2.8s ease;
  transform: scale(1.06);
  filter: blur(14px) saturate(1.08);
}
.bg-wallpaper.is-first.visible {
  transform: scale(1.0);
  filter: blur(0) saturate(1.0);
}
body.wall-first .bg-wallpaper-tint { transition: opacity 2.6s ease; }
.bg-wallpaper-tint {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  background:
    radial-gradient(ellipse at center, transparent 0%, color-mix(in oklab, var(--bg) 70%, transparent) 70%, var(--bg) 110%),
    linear-gradient(180deg, color-mix(in oklab, var(--bg) 55%, transparent), color-mix(in oklab, var(--bg) 78%, transparent));
}
body.wall-active .bg-wallpaper-tint { opacity: 1; }
body.wall-active .bg-grid { opacity: 0.18; }
body[data-view="results"] .bg-wallpaper,
body[data-view="results"] .bg-wallpaper-tint { opacity: 0 !important; }

/* ============================================================
   Bright-theme logo swap — use dark variants automatically
   ============================================================ */
/* Stanford and Tuks are the two light themes — both swap to the dark
   logo variants so they read against cream/paper backgrounds. */
[data-theme="stanford"] img[src$="/logos/DNA45_LOGO.png"],
[data-theme="tuks"]     img[src$="/logos/DNA45_LOGO.png"],
[data-theme="unibo"]    img[src$="/logos/DNA45_LOGO.png"] {
  content: url("/logos/dark/DNA45_DARK.png");
}
[data-theme="stanford"] img[src$="/logos/M-LOGO.png"],
[data-theme="tuks"]     img[src$="/logos/M-LOGO.png"],
[data-theme="unibo"]    img[src$="/logos/M-LOGO.png"] {
  content: url("/logos/dark/M-LOGO_DARK.png");
}

/* ============================================================
   Light-theme search shell — keep the search bar dark on Stanford
   and Tuks so the cyan proverb shimmer stays legible. The cream
   page backgrounds bleach the shimmer; flipping just the input
   surface to a dark slab fixes that without changing the page tone.
   Per user direction 2026-04-25.
   ============================================================ */
[data-theme="stanford"] .search-shell,
[data-theme="tuks"]     .search-shell,
[data-theme="unibo"]    .search-shell {
  background: #0e1018;                          /* deep slate slab */
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 28px rgba(20, 20, 30, 0.18);
}
[data-theme="stanford"] .search-shell textarea,
[data-theme="tuks"]     .search-shell textarea,
[data-theme="unibo"]    .search-shell textarea {
  color: rgba(245, 245, 250, 0.96);             /* light typing color */
  caret-color: #7ee3e3;
}
[data-theme="stanford"] .search-shell textarea::placeholder,
[data-theme="tuks"]     .search-shell textarea::placeholder,
[data-theme="unibo"]    .search-shell textarea::placeholder {
  color: rgba(220, 230, 240, 0.45);
}
[data-theme="stanford"] .search-icon,
[data-theme="tuks"]     .search-icon,
[data-theme="unibo"]    .search-icon {
  color: rgba(220, 230, 240, 0.7);
}
[data-theme="stanford"] .search-shell:focus-within,
[data-theme="tuks"]     .search-shell:focus-within,
[data-theme="unibo"]    .search-shell:focus-within {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 22%, transparent),
              0 8px 28px rgba(20, 20, 30, 0.22);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   Tuks accents — fly the red.
   The user wanted the third Tuks color (UP ceremonial red) visible,
   so we color the user's "you asked" question in red. Keeps the
   blue + gold elsewhere; red lands only on the question line.
   ============================================================ */
[data-theme="tuks"] .q-text {
  color: var(--accent-2);                       /* #c8102e */
}

/* TUKS — the send/go arrow flies in UP ceremonial red. */
[data-theme="tuks"] .search-send {
  background: #c8102e;                          /* UP red */
  color: #ffffff;
  box-shadow: 0 4px 14px color-mix(in oklab, #c8102e 30%, transparent);
}
[data-theme="tuks"] .search-send:hover:not(:disabled) {
  background: #a90d26;
}

/* ============================================================
   Hide mode-toggle (Auto / Fast / Turbo) while the user is typing
   so the input has the full breath of the search shell. Both the
   landing form and the composer are covered.
   Per user direction 2026-04-26.
   ============================================================ */
.search:has(textarea:not(:placeholder-shown)) > .mode-toggle,
.search-shell:has(textarea:not(:placeholder-shown)) .mode-toggle.compact {
  display: none;
}

/* ============================================================
   Sakura headline polish — apply the new airy letter-spacing var
   so the thin Comfortaa weight (300) reads truly thin/ultra-thin
   instead of a default-tracked Light.
   ============================================================ */
[data-theme="fynbos-sakura"] .q-text,
[data-theme="fynbos-sakura"] .hero-line,
[data-theme="fynbos-sakura"] .a-block h1,
[data-theme="fynbos-sakura"] .a-block h2 {
  letter-spacing: var(--display-letter, 0.01em);
  font-weight: var(--display-weight);
  font-stretch: 100%;
}

/* ============================================================
   KURUMAN HILLS — golden titles
   ------------------------------------------------------------
   Royal-purple ground deserves a gilded crown. Paint the page's
   primary heading surfaces (hero tagline, the user's question,
   answer-block H1/H2) with an antique-gold gradient — the same
   treasure-against-the-night logic that makes Terracotta Firefly
   feel premium. Uses --accent (#d4b36b → #f0d28a) so it tracks
   the theme's gold note without hardcoding.
   ============================================================ */
[data-theme="kuruman-hills"] .hero-line,
[data-theme="kuruman-hills"] .a-block h1,
[data-theme="kuruman-hills"] .a-block h2 {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 96%, #fff) 0%,
    color-mix(in oklab, var(--accent) 78%, var(--accent-2)) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 18px color-mix(in oklab, var(--accent) 28%, transparent);
}

/* ============================================================
   WEATHER CARD
   ============================================================ */
.weather-card {
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 22px 24px 18px;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.5s ease both;
}
.weather-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px 260px at 90% -20%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 60%);
  pointer-events: none;
}
.w-head {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  position: relative;
}
.w-loc .w-place {
  font-family: var(--font-display); font-style: var(--display-italic); font-weight: var(--display-weight);
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -0.01em;
}
.w-loc .w-sub {
  margin-top: 4px;
  font-size: 13px; color: var(--muted);
  font-family: var(--font-mono);
}
.w-now { display: grid; grid-template-columns: auto auto; gap: 10px 14px; align-items: center; }
.w-now .w-temp {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(42px, 5vw, 64px); line-height: 1; color: var(--text);
}
.w-now .w-icon { font-size: clamp(36px, 4.6vw, 54px); line-height: 1; filter: drop-shadow(0 4px 16px color-mix(in oklab, var(--brand) 28%, transparent)); }
.w-now .w-range { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); text-align: right; }

.w-tabs {
  display: inline-flex; padding: 4px; width: fit-content;
  background: color-mix(in oklab, var(--bg) 45%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.w-tabs button {
  border: 0; background: transparent; color: var(--muted);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 500;
  transition: background 0.18s, color 0.18s;
}
.w-tabs button:hover { color: var(--text); }
.w-tabs button[aria-selected="true"] {
  color: var(--on-brand);
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 4px 14px color-mix(in oklab, var(--brand) 26%, transparent);
}

.w-tab-body { position: relative; }
.w-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(84px, 1fr);
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 2px 10px;
  /* Was: x mandatory — caused jamming-square flashes during horizontal
     scroll on Chrome/Electron (compositor fights between snap targets and
     transformed children). Proximity gives the same UX without the
     repaint storm. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Isolate paint/layout to this container so cell repaints don't bubble
     up and re-flow the whole panel. */
  contain: layout paint style;
}
/* Hide the native scrollbar — its repaint can flicker under fast drags. */
.w-strip::-webkit-scrollbar { width: 0; height: 0; display: none; }
.w-strip { scrollbar-width: none; -ms-overflow-style: none; }
.w-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--text) 3%, transparent);
  border: 1px solid transparent;
  scroll-snap-align: start;
  /* Force GPU compositing so cells become their own layer — kills the
     flashing-square artifact during horizontal drag. */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  contain: content;
  /* Avoid `transition: all` — explicitly transition cheap properties only. */
  transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}
.w-cell.now { background: color-mix(in oklab, var(--brand) 16%, transparent); border-color: color-mix(in oklab, var(--brand) 28%, transparent); }
.w-cell .w-k { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); letter-spacing: 0.04em; text-transform: uppercase; }
.w-cell .w-e { font-size: 24px; line-height: 1; }
.w-cell .w-v { font-size: 14.5px; font-weight: 600; color: var(--text); }
.w-cell .w-pop {
  font-family: var(--font-mono); font-size: 10.5px;
  color: color-mix(in oklab, var(--accent) 90%, var(--text));
}

.w-daily { display: flex; flex-direction: column; gap: 6px; }
.w-row {
  display: grid;
  grid-template-columns: 96px 40px 1fr 120px;
  align-items: center; gap: 14px;
  padding: 10px 10px;
  border-radius: 12px;
  transition: background 0.18s;
}
.w-row + .w-row { border-top: 1px dashed color-mix(in oklab, var(--text) 5%, transparent); }
.w-row:hover { background: color-mix(in oklab, var(--text) 4%, transparent); }
.w-row .w-day { font-weight: 600; }
.w-row .w-day-sub { font-size: 11.5px; color: var(--muted-2); font-family: var(--font-mono); margin-top: 2px; }
.w-row .w-ico { font-size: 26px; text-align: center; }
.w-row .w-range-bar {
  position: relative; height: 8px; border-radius: 999px;
  background: color-mix(in oklab, var(--text) 6%, transparent);
  overflow: hidden;
}
.w-row .w-range-bar > span {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--accent), var(--brand), #ff6a4d);
  border-radius: inherit;
}
.w-row .w-temps { font-family: var(--font-mono); font-size: 13px; color: var(--muted); text-align: right; }
.w-row .w-temps .hi { color: var(--text); font-weight: 600; }

.w-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.w-d-cell {
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
}
.w-d-cell .w-d-k { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); letter-spacing: 0.04em; text-transform: uppercase; }
.w-d-cell .w-d-v { margin-top: 6px; font-size: 18px; font-weight: 600; color: var(--text); }
.w-d-cell .w-d-s { margin-top: 2px; font-size: 12px; color: var(--muted); }

.w-graph { position: relative; height: 140px; margin-top: 4px; }
.w-graph svg { width: 100%; height: 100%; display: block; overflow: visible; }
.w-graph .grid-line { stroke: color-mix(in oklab, var(--text) 8%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
.w-graph .fill-area { fill: url(#w-grad); opacity: 0.55; }
.w-graph .line-max { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.w-graph .line-min { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 4 4; }
.w-graph .dot { fill: var(--brand); }
.w-graph .lbl { fill: var(--muted-2); font-family: var(--font-mono); font-size: 10.5px; }
.w-graph .lbl-hi { fill: var(--text); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }

.w-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
}
.w-foot a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted-2); }
.w-foot a:hover { color: var(--text); }

.w-error {
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 3%, transparent);
  color: var(--muted);
  border-radius: 10px; font-size: 13px;
}

/* ============================================================
   SPORTS CARD (league table + fixtures)
   ============================================================ */
.sports-card {
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 22px 24px 18px;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.5s ease both;
}
.sports-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(520px 240px at 10% -20%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%);
  pointer-events: none;
}
.s-head {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  position: relative;
}
.s-head .s-title {
  font-family: var(--font-display); font-style: var(--display-italic); font-weight: var(--display-weight);
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -0.01em;
}
.s-head .s-sub {
  margin-top: 4px;
  font-size: 13px; color: var(--muted);
  font-family: var(--font-mono);
}
.s-head .s-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px; font-family: var(--font-mono);
  background: color-mix(in oklab, var(--brand) 16%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--brand) 28%, transparent);
}

.s-tabs { display: inline-flex; padding: 4px; width: fit-content;
  background: color-mix(in oklab, var(--bg) 45%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.s-tabs button {
  border: 0; background: transparent; color: var(--muted);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 500;
  transition: background 0.18s, color 0.18s;
}
.s-tabs button:hover { color: var(--text); }
.s-tabs button[aria-selected="true"] {
  color: var(--on-brand);
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 4px 14px color-mix(in oklab, var(--brand) 26%, transparent);
}

.s-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); }
.s-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-family: var(--font-sans);
}
.s-table thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: right;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
}
.s-table thead th:first-child, .s-table thead th:nth-child(2) { text-align: left; }
.s-table tbody td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px dashed color-mix(in oklab, var(--text) 5%, transparent);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.s-table tbody td:first-child { text-align: left; color: var(--muted-2); font-family: var(--font-mono); width: 44px; }
.s-table tbody td:nth-child(2) { text-align: left; font-weight: 600; }
.s-table tbody tr:hover td { background: color-mix(in oklab, var(--text) 4%, transparent); }
.s-table tbody tr:last-child td { border-bottom: 0; }
.s-team {
  display: inline-flex; align-items: center; gap: 10px;
}
.s-team img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; }
.s-pts { font-weight: 700; color: var(--text); }

/* Zones (champions, europe, relegation) — visual accent stripes on the left. */
.s-table tbody tr.zone-top td:first-child    { box-shadow: inset 3px 0 0 0 var(--brand); }
.s-table tbody tr.zone-europe td:first-child { box-shadow: inset 3px 0 0 0 var(--accent); }
.s-table tbody tr.zone-drop td:first-child   { box-shadow: inset 3px 0 0 0 #e05a5a; }

.s-form { display: inline-flex; gap: 3px; margin-left: 8px; }
.s-form .f {
  width: 14px; height: 14px; border-radius: 4px;
  font-size: 9px; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700;
}
.s-form .f.W { background: #3ea864; }
.s-form .f.D { background: #8892a0; }
.s-form .f.L { background: #d64a4a; }

.s-fixtures { display: flex; flex-direction: column; gap: 18px; }

/* Day grouping ---------------------------------------------------
   Each calendar day is its own labeled section. Header is monospace
   caps with a leading accent bar so multi-day result lists read as
   distinct chunks instead of a flat soup. */
.s-day-group { display: flex; flex-direction: column; gap: 6px; }
.s-day-header {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0 6px;
  margin-bottom: 2px;
  align-self: flex-start;
}
.s-day-header::before {
  content: "";
  display: inline-block;
  width: 22px; height: 2px;
  background: var(--brand);
  border-radius: 2px;
  opacity: 0.85;
}
.s-day-group:first-child .s-day-header { color: var(--text); font-weight: 700; }

.s-fix {
  display: grid;
  grid-template-columns: 72px 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
}
.s-fix .s-when {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-2);
  line-height: 1.3;
}
.s-fix .s-when .d { color: var(--text); font-weight: 600; }
.s-fix .s-team-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.s-fix .s-team-row.right { justify-content: flex-end; }
.s-fix .s-team-row .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-fix .s-score {
  font-family: var(--font-display); font-style: var(--display-italic);
  font-weight: var(--display-weight);
  font-size: 20px;
  padding: 2px 10px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 26%, transparent);
  color: var(--text);
  min-width: 64px; text-align: center;
}
/* Time + status block (left column of each fixture row). */
.s-fix .s-when .t { color: var(--text); font-weight: 600; font-size: 14px; }
.s-fix .s-when .s-status { display: inline-flex; margin-top: 4px; }

/* Status badges ---------------------------------------------------
   LIVE pulses red, HT amber, FT muted green. PP/CANC/SUSP collapse
   into the score cell as a label so the row still aligns. */
.s-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.s-status--live { color: #ff5a5a; border-color: color-mix(in oklab, #ff5a5a 55%, transparent); background: color-mix(in oklab, #ff5a5a 14%, transparent); }
.s-status--ht   { color: #ffb74d; border-color: color-mix(in oklab, #ffb74d 55%, transparent); background: color-mix(in oklab, #ffb74d 14%, transparent); }
.s-status--ft   { color: #6dd49e; border-color: color-mix(in oklab, #6dd49e 50%, transparent); background: color-mix(in oklab, #6dd49e 10%, transparent); }

.s-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5a5a;
  box-shadow: 0 0 0 0 color-mix(in oklab, #ff5a5a 70%, transparent);
  animation: sLiveDot 1.2s ease-out infinite;
}
@keyframes sLiveDot {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, #ff5a5a 70%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in oklab, #ff5a5a 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, #ff5a5a 0%, transparent); }
}

/* Score-cell colour variants matching badge tone. */
.s-fix .s-score--live { color: #ff5a5a; border-color: color-mix(in oklab, #ff5a5a 50%, transparent); }
.s-fix .s-score--ht   { color: #ffb74d; border-color: color-mix(in oklab, #ffb74d 50%, transparent); }
.s-fix .s-score--ft   { color: var(--text); border-color: color-mix(in oklab, var(--brand) 35%, transparent); }

.s-fix .s-score.vs {
  background: transparent; border-color: var(--line); color: var(--muted);
  font-family: var(--font-mono); font-style: normal; font-size: 13px;
  letter-spacing: 0.1em;
}

.s-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
}
.s-foot a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted-2); }
.s-foot a:hover { color: var(--text); }

.s-error {
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 3%, transparent);
  color: var(--muted);
  border-radius: 10px; font-size: 13px;
}

@media (max-width: 640px) {
  .s-table thead th.hide-sm, .s-table tbody td.hide-sm { display: none; }
  .s-fix { grid-template-columns: 64px 1fr auto 1fr; gap: 10px; padding: 10px; }
}

/* ============================================================
   PREMATCH ANALYSIS — Team A vs Team B card
   ============================================================ */
/* Source chip in the prematch card header — DNA45 M-Logo + 'DNA45
   Sports' text. Flex row keeps the mark and the text on a single
   baseline regardless of theme. */
.pm-card .s-source {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.pm-card .s-source .brand-mark {
  width: 16px; height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
.pm-card .s-source-text { white-space: nowrap; }
.pm-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in oklab, var(--text) 3%, transparent);
}
.pm-team {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.pm-team:nth-child(3) { direction: rtl; }   /* mirror right team */
.pm-team:nth-child(3) > * { direction: ltr; }
.pm-badge {
  width: 56px; height: 56px;
  border-radius: 12px;
  object-fit: contain;
  background: color-mix(in oklab, var(--text) 5%, transparent);
  padding: 4px;
  border: 1px solid var(--line);
}
.pm-badge-fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700;
  color: var(--brand);
}
.pm-team-meta { min-width: 0; }
.pm-team-name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
.pm-team-pos {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted);
  margin: 2px 0 6px;
}
.pm-team-form { display: inline-flex; gap: 4px; margin-bottom: 6px; }
.pm-form {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  font: 700 11px/1 var(--font-mono, monospace);
  color: #fff;
}
.pm-form.f-w { background: #4ea854; }
.pm-form.f-d { background: #8892a0; }
.pm-form.f-l { background: #d64a4a; }
.pm-form.f-x { background: color-mix(in oklab, var(--text) 12%, transparent); color: var(--muted); }
.pm-team-goals {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
  font-family: var(--font-mono);
}

/* Top-right cluster in the prematch card header — stacks the source
   tag and the latest-meeting date vertically so the user sees the
   date the moment they land on the card. */
.s-head-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  text-align: right;
  flex-shrink: 0;
}
.pm-last-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}
/* Highlighted variant — latest-meeting date sits in a brand-tinted
   pill so the user instantly clocks 'this is the most recent
   encounter' the moment they land on the card. */
.pm-last-date--highlight {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent);
  color: var(--brand);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
}
.pm-vs {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: 0.18em;
  color: var(--brand);
  padding: 0 8px;
}

/* FIFA World Cup — centered trophy between nation flags */
.pm-fifa-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 20px 14px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--text) 3%, transparent);
}
.pm-fifa-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pm-fifa-flag {
  width: 72px; height: 48px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  border: 1px solid var(--line);
}
.pm-fifa-country {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  color: var(--text);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.pm-fifa-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 80px;
}
.pm-fifa-trophy {
  width: 80px; height: auto;
  max-height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.pm-fifa-stage {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

.pm-section { display: flex; flex-direction: column; gap: 10px; }
.pm-h4 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.pm-h4 .pm-tag {
  display: inline-block; margin-left: 6px;
  font-size: 10.5px; padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  color: var(--brand);
}
.pm-legend {
  display: flex; gap: 14px;
  font-size: 12px; color: var(--muted);
  font-family: var(--font-mono);
}
.pm-legend i {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 5px; vertical-align: middle;
}
.pm-chart {
  width: 100%; max-width: 380px; height: auto;
  color: var(--text);
}

.pm-h2h-tally {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 8px; align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--text) 4%, transparent);
  font-size: 13px; color: var(--muted);
}
.pm-h2h-tally span:first-child  { text-align: left; }
.pm-h2h-tally span:nth-child(2) { text-align: center; }
.pm-h2h-tally span:last-child   { text-align: right; }
.pm-h2h-tally b {
  display: inline-block; min-width: 22px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
  margin-right: 4px;
}

.pm-h2h { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pm-h2h-row {
  display: grid;
  grid-template-columns: 96px 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
}
.pm-h2h-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.pm-h2h-team { color: var(--text); }
.pm-h2h-team.right { text-align: right; }
.pm-h2h-team.is-win { color: var(--brand); font-weight: 600; }
.pm-h2h-score {
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--text) 6%, transparent);
}
.pm-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .pm-teams { grid-template-columns: 1fr; }
  .pm-team:nth-child(3) { direction: ltr; }
  .pm-vs { text-align: center; }

  /* FIFA prematch — stacked vertically: flag → trophy → flag */
  .pm-fifa-teams {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 12px;
  }
  .pm-fifa-center { order: 0; gap: 8px; }
  .pm-fifa-trophy { width: 72px; max-height: 80px; }
  .pm-fifa-flag { width: 80px; height: 54px; }
  .pm-fifa-country { font-size: 16px; }
  .pm-fifa-stage { font-size: 11px; }

  /* Prevent chart and sections from squeezing */
  .pm-section { overflow-x: auto; }
  .pm-chart { max-width: none; min-width: 320px; }
  .pm-legend { white-space: nowrap; }

  .pm-h2h-row { grid-template-columns: 1fr auto 1fr; }
  .pm-h2h-date { display: none; }
}

/* ============================================================
   DERBY HERO  —  Soweto Derby (Kaizer Chiefs vs Orlando Pirates)
   ------------------------------------------------------------
   Custom card that fires only for known rivalry pairs. Two
   brand-coloured halves split down the middle, lyrics-bar style
   stat comparisons, historical "first derby" callout, recent
   meetings timeline and trivia facts. Designed to be celebratory
   and unmistakably South-African.
   ============================================================ */
.pm-card--derby {
  background:
    linear-gradient(135deg, rgba(255,199,44,0.06) 0%, rgba(0,0,0,0.04) 50%, rgba(255,199,44,0.06) 100%),
    var(--panel);
  border-color: color-mix(in oklab, #FFC72C 35%, var(--line));
}

.derby-hero {
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in oklab, #000 88%, transparent) 0%, color-mix(in oklab, #1a1a1a 90%, transparent) 50%, color-mix(in oklab, #FFC72C 14%, transparent) 100%);
  border: 1px solid color-mix(in oklab, #FFC72C 28%, var(--line));
  position: relative; overflow: hidden;
  color: #f4f4f4;
}
.derby-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(420px 220px at 0% 0%, rgba(0,0,0,0.55), transparent 60%),
    radial-gradient(420px 220px at 100% 100%, rgba(255,199,44,0.18), transparent 60%);
  pointer-events: none;
}

.derby-hero-head {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
  position: relative; z-index: 1;
}
.derby-hero-tag {
  display: inline-block;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.2em;
  background: linear-gradient(90deg, #FFC72C, #ffd86b);
  color: #000;
  border-radius: 999px;
  font-weight: 700;
}
.derby-hero-title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-style: var(--display-italic);
  font-weight: var(--display-weight);
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, #FFC72C 0%, #fff7c2 50%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.derby-hero-tagline {
  font-size: 13px;
  color: rgba(244,244,244,0.78);
  letter-spacing: 0.02em;
  font-style: italic;
}

.derby-hero-teams {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 16px; align-items: center;
  position: relative; z-index: 1;
}
.derby-hero-team {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--derby-c) 22%, transparent), transparent 70%);
  border: 1px solid color-mix(in oklab, var(--derby-c) 35%, rgba(255,255,255,0.08));
}
.derby-hero-team--away { flex-direction: row-reverse; text-align: right; }
.derby-hero-badge {
  width: 72px; height: 72px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.12);
}
/* Ringed variant — used for the local curated derby logos. The crests
   are already round, so we go fully circular and add a glowing brand-
   coloured ring (gold for Chiefs, soft white for Pirates via
   --derby-c set on the parent .derby-hero-team). */
.derby-hero-badge--ringed {
  width: 84px; height: 84px;
  border-radius: 50%;
  padding: 0;
  background: #fff;
  border: 2px solid var(--derby-c, #FFC72C);
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--derby-c, #FFC72C) 22%, transparent),
    0 8px 22px rgba(0,0,0,0.45);
  transition: transform 0.3s ease;
}
.derby-hero-badge--ringed:hover { transform: scale(1.04); }
.derby-hero-badge--fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  color: #fff;
}
.derby-hero-meta { min-width: 0; }
.derby-hero-name {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 16px; letter-spacing: -0.005em;
  color: #fff;
}
.derby-hero-nick {
  font-size: 12px; color: rgba(244,244,244,0.7);
  font-style: italic; margin-top: 2px;
}
.derby-hero-founded {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(244,244,244,0.55); letter-spacing: 0.08em;
  margin-top: 2px; text-transform: uppercase;
}
.derby-hero-vs {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; font-weight: 800;
  color: #FFC72C;
  text-shadow: 0 2px 12px rgba(255,199,44,0.35);
}

.derby-bloodline {
  margin: 0; padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13.5px; line-height: 1.5;
  color: rgba(244,244,244,0.88);
  font-style: italic;
  position: relative; z-index: 1;
}

/* ----- TV-style team row — logo on the OUTER edge, score on the
   INNER edge (the side facing the VS divider). Home team flows
   left-to-right [badge → meta → score]; away team uses row-reverse
   so visually it reads [score ← meta ← badge] mirroring the home
   side. The score is large enough to read across the room but NOT
   so huge it pushes the rest of the card off-screen. ----- */
.derby-hero-team {
  position: relative;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 14px;
  padding: 14px 18px;
}
.derby-hero-team--away {
  flex-direction: row-reverse;
  text-align: right;
}
.derby-hero-meta { flex: 1; min-width: 0; }

/* ----------------------------------------------------------------
   .derby-hero-score — ONE Helvetica-bold number per team in the
   derby hero, sized for the inner edge of the team row (TV-style).
   Result-tinted: win = bright green, loss = faded, draw = amber.
   Tabular nums so 0–9 keep the same visual weight.
   ---------------------------------------------------------------- */
.derby-hero-score {
  flex-shrink: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 9vw, 92px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-align: center;
  text-shadow: 0 4px 18px rgba(0,0,0,0.55);
  min-width: 64px;
}
.derby-hero-score--w { color: #4ade80; }
.derby-hero-score--l { color: rgba(255,255,255,0.55); }
.derby-hero-score--d { color: #fbbf24; }

/* ----- GAS-PUMP ARC GAUGE GRID ----- */
.derby-arc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  position: relative; z-index: 1;
}
.derby-arc-card {
  padding: 14px 12px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.derby-arc-card-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.14em;
  color: rgba(244,244,244,0.6);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px;
}
.derby-arc-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.derby-arc-slot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px 4px;
  border-radius: 10px;
  transition: background 0.2s, opacity 0.25s;
}
.derby-arc-slot.is-lead {
  background: rgba(255,199,44,0.06);
}
.derby-arc-slot--away.is-lead {
  background: rgba(255,255,255,0.06);
}
.derby-arc {
  position: relative;
  width: 84px; height: 84px;
  display: grid; place-items: center;
}
.derby-arc-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.derby-arc-track {
  stroke: rgba(255,255,255,0.07);
}
.derby-arc-fill {
  filter: drop-shadow(0 0 6px rgba(255,199,44,0.25));
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.derby-arc--away .derby-arc-fill {
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
}
.derby-arc-num {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.derby-arc-slot--home.is-lead .derby-arc-num {
  background: linear-gradient(135deg, #FFC72C 0%, #fff7c2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.derby-arc-team {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em;
  color: rgba(244,244,244,0.55);
  text-transform: uppercase;
}
.derby-arc-slot.is-lead .derby-arc-team {
  color: rgba(244,244,244,0.95);
  font-weight: 700;
}

/* ----- BIGGEST-WIN stat pills ----- */
.derby-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.derby-stat-pill {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.derby-stat-pill--home { border-left: 3px solid #FFC72C; }
.derby-stat-pill--away { border-left: 3px solid #ffffff; }
.derby-stat-pill-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244,244,244,0.55);
  margin-bottom: 4px;
}
.derby-stat-pill-val {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; color: #fff;
}

.derby-totals {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(244,244,244,0.7);
  letter-spacing: 0.06em; text-transform: uppercase;
  position: relative; z-index: 1;
}
.derby-totals b { color: #FFC72C; font-size: 14px; margin-right: 4px; }

.derby-first {
  padding: 12px 14px;
  border-left: 3px solid #FFC72C;
  background: rgba(255,199,44,0.06);
  border-radius: 0 10px 10px 0;
  position: relative; z-index: 1;
}
.derby-first-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #FFC72C;
  margin-bottom: 4px;
}
.derby-first-line {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.derby-first-date {
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(244,244,244,0.6);
}
.derby-first-score {
  font-family: var(--font-display); font-style: italic;
  font-size: 15px; color: #fff;
}
.derby-first-venue {
  font-size: 12px; color: rgba(244,244,244,0.7); margin-top: 4px;
}
.derby-first-note {
  font-size: 12px; color: rgba(244,244,244,0.55);
  margin-top: 4px; font-style: italic;
}

.derby-section { position: relative; z-index: 1; }
.derby-section-label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(244,244,244,0.55);
  margin-bottom: 8px;
}
.derby-timeline {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.derby-tl-row {
  display: grid;
  grid-template-columns: 100px 1fr auto 1fr;
  align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
  font-size: 12.5px;
}
.derby-tl-date { font-family: var(--font-mono); font-size: 10.5px; color: rgba(244,244,244,0.55); letter-spacing: 0.06em; }
.derby-tl-team { color: rgba(244,244,244,0.85); }
.derby-tl-team--right { text-align: right; }
.derby-tl-team.is-win { color: #FFC72C; font-weight: 600; }
.derby-tl-score {
  font-family: var(--font-mono); font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}

.derby-facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.derby-facts li {
  position: relative;
  padding: 6px 10px 6px 24px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  font-size: 12.5px;
  color: rgba(244,244,244,0.85);
  line-height: 1.5;
}
.derby-facts li::before {
  content: "★";
  position: absolute; left: 8px; top: 6px;
  color: #FFC72C; font-size: 11px;
}

.derby-empty {
  padding: 12px; text-align: center;
  color: rgba(244,244,244,0.5);
  font-size: 12.5px; font-style: italic;
}

@media (max-width: 640px) {
  .derby-hero-teams { grid-template-columns: 1fr; }
  .derby-hero-team,
  .derby-hero-team--away { flex-direction: row; text-align: left; }
  .derby-hero-team--away { flex-direction: row-reverse; text-align: right; }
  .derby-hero-vs { display: none; }
  .derby-hero-score { font-size: clamp(48px, 14vw, 72px); min-width: 52px; }
  .derby-tl-row { grid-template-columns: 1fr auto 1fr; }
  .derby-tl-date { display: none; }
  .derby-totals { font-size: 10px; }
}

/* ============================================================
   MATCH REPORT recap (sits inside .pm-card when latestRecap is
   present from the API). The block reads like a stadium scoreline
   wrap-up: tag, age, two-team scoreline, scorers, key stats.
   Only paints when a recent (<30d) head-to-head was found.
   ============================================================ */
.pm-recap {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 18px 20px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--brand, #d97706) 14%, transparent),
    color-mix(in oklab, var(--text) 4%, transparent)
  );
  border: 1px solid color-mix(in oklab, var(--brand, #d97706) 30%, var(--line));
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--text) 8%, transparent),
    0 6px 24px -8px color-mix(in oklab, var(--brand, #d97706) 50%, transparent);
}
.pm-recap-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
.pm-recap-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand, #d97706);
  color: #0b0c10;
  font-weight: 700;
}
.pm-recap-when { color: var(--muted); }
.pm-recap-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 6px 0 4px;
}
.pm-recap-team {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.pm-recap-team:last-child { flex-direction: column-reverse; }
.pm-recap-team-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.8;
}
.pm-recap-goals {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  color: var(--text);
  text-shadow: 0 2px 12px color-mix(in oklab, var(--brand, #d97706) 35%, transparent);
}
.pm-recap-team.is-winner .pm-recap-goals { color: var(--brand, #d97706); }
.pm-recap-team.is-winner .pm-recap-team-name { opacity: 1; color: var(--text); }
.pm-recap-dash {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 300;
  color: var(--muted);
}
.pm-recap-verdict {
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: color-mix(in oklab, var(--text) 80%, transparent);
  font-style: italic;
}
.pm-recap-scorers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--text) 12%, transparent);
}
.pm-recap-scorer-col { display: flex; flex-direction: column; gap: 6px; }
.pm-recap-scorer-col--right { text-align: right; align-items: flex-end; }
.pm-recap-col-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pm-recap-scorer {
  font-size: 13px;
  line-height: 1.4;
}
.pm-recap-scorer b { font-weight: 600; color: var(--text); }
.pm-recap-scorer i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px;
}
.pm-recap-scorer--empty { color: var(--muted); }
.pm-recap-stats {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.pm-recap-stats li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--text) 5%, transparent);
}
.pm-recap-stat-k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pm-recap-stat-v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.pm-recap-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--text) 88%, transparent);
}
@media (max-width: 520px) {
  .pm-recap-goals { font-size: 44px; }
  .pm-recap-team-name { font-size: 13px; }
  .pm-recap-scorers { grid-template-columns: 1fr; }
  .pm-recap-scorer-col--right { text-align: left; align-items: flex-start; }
}

/* ============================================================
   YOUTUBE CARD — embedded video with click-to-play poster
   ============================================================ */
.yt-card {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 18px 20px 14px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.yt-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.yt-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 4px;
}
.yt-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.yt-channel { color: color-mix(in oklab, var(--text) 75%, transparent); font-weight: 600; }
.yt-dot { opacity: 0.5; }
/* Aqua-blue views — pops the count out as the most-scanned metric on
   the card (people compare popularity at a glance). Same aqua used by
   the narrator highlight so the brand language stays consistent. */
.yt-views {
  color: #00d4ff;
  font-weight: 600;
  text-shadow: 0 0 6px color-mix(in oklab, #00d4ff 35%, transparent);
}
.yt-pill { flex-shrink: 0; }

/* "YouTube Cinema" brand chip — red treatment so it reads as the
   YouTube domain at a glance (matches the play button heart-color).
   The chip's text + background + border are all overridden, while
   the brand mark logo stays untouched. */
.brand-chip.yt-pill {
  background: linear-gradient(135deg, #ff1a1a 0%, #cc0000 100%);
  border-color: color-mix(in oklab, #ff1a1a 70%, transparent);
  box-shadow: 0 4px 14px -6px color-mix(in oklab, #ff0000 65%, transparent),
              inset 0 1px 0 color-mix(in oklab, #fff 22%, transparent);
}
.brand-chip.yt-pill .brand-chip__text { color: #fff; }
.brand-chip.yt-pill .brand-mark { filter: drop-shadow(0 0 2px rgba(0,0,0,0.45)); }

/* ============================================================
   YOUTUBE GRID CARD — quoted-spell multi-result view
   ============================================================ */
.yt-grid-card .yt-title {
  font-style: italic;
  letter-spacing: 0.01em;
}
.yt-grid-card .yt-grid-spell {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  color: color-mix(in oklab, var(--brand, #d97706) 80%, var(--text));
}
.yt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 4px;
}
@media (max-width: 820px) { .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .yt-grid { grid-template-columns: 1fr; gap: 16px; } }

.yt-grid-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in oklab, var(--text) 2%, transparent);
  border: 1px solid var(--line);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  /* Subtle staggered fade-in keeps the grid from popping all at once. */
  animation: ytTileIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--tile-i, 0) * 60ms);
}
.yt-grid-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, #ff0000 45%, var(--line));
  box-shadow: 0 14px 30px -18px color-mix(in oklab, #ff0000 55%, transparent);
}
@keyframes ytTileIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.yt-grid-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.yt-grid-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.2s ease;
}
.yt-grid-tile:hover .yt-grid-img { transform: scale(1.04); opacity: 0.92; }

/* Duration badge — bottom-LEFT so the bottom-right corner is reserved
   for the Prompt button (the user's spec). */
.yt-grid-duration {
  position: absolute;
  left: 6px; bottom: 6px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  z-index: 3;
}

/* Centered ▶ overlay — pure visual cue. The whole thumb is the click
   target (escalates to a full DNA45 card with orb + gas-pump). */
.yt-grid-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.35) 60%,
    rgba(0,0,0,0.55) 100%);
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 2;
  pointer-events: none; /* clicks fall through to the thumb itself */
}
.yt-grid-tile:hover .yt-grid-overlay { opacity: 1; }
.yt-grid-thumb[data-state="preview"] .yt-grid-overlay,
.yt-grid-thumb[data-state="full"]    .yt-grid-overlay { opacity: 0; }

.yt-grid-thumb {
  cursor: pointer;
}
.yt-grid-thumb:focus-visible {
  outline: 2px solid color-mix(in oklab, #ff1a1a 70%, transparent);
  outline-offset: -2px;
}
.yt-grid-play {
  display: inline-flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6));
  transition: transform 0.18s ease;
}
.yt-grid-tile:hover .yt-grid-play { transform: scale(1.08); }

/* Prompt button — pinned to the BOTTOM-RIGHT corner of the thumb,
   pops on tile hover. The user's exact spec: each tile's bottom-right
   reveals a Prompt pill on hover, click sends the video metadata to
   Shepherd so they can ask before committing to the full card. */
.yt-grid-prompt-btn {
  position: absolute;
  right: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border: 1px solid color-mix(in oklab, #fff 55%, transparent);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease,
              background 0.18s, border-color 0.18s;
  z-index: 5;
}
.yt-grid-tile:hover .yt-grid-prompt-btn,
.yt-grid-prompt-btn:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
.yt-grid-prompt-btn:hover {
  background: color-mix(in oklab, var(--brand, #d97706) 75%, #000);
  border-color: var(--brand, #d97706);
}
/* Hide the Prompt button while the in-tile preview iframe is playing
   so the user can see the actual scrub bar without overlap. */
.yt-grid-thumb[data-state="preview"] .yt-grid-prompt-btn,
.yt-grid-thumb[data-state="full"]    .yt-grid-prompt-btn { opacity: 0; pointer-events: none; }

.yt-grid-preview-iframe,
.yt-grid-full-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 4;
}

.yt-grid-meta {
  padding: 0 10px 10px;
}
.yt-grid-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.32;
  color: var(--text);
  /* Two-line clamp keeps tile heights uniform. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yt-grid-sub {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yt-grid-foot {
  margin-top: 6px;
  align-items: center;
}
.yt-grid-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
/* Batch counter pill — sits in the card header next to the count.
   Mono-cased + brand-tinted so the user can see exactly which page
   of related videos they're on (Batch 2 / 3). */
.yt-grid-batch {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in oklab, var(--brand, #d97706) 80%, var(--text));
}

/* Per-tile views — aqua-blue so popularity reads instantly across the
   grid. The user explicitly asked for this so people can compare view
   counts without being misled by thumbnail design. We reuse the same
   .yt-views token used on the single-card sub line. */
.yt-grid-sub .yt-views {
  color: #00d4ff;
  font-weight: 600;
  text-shadow: 0 0 5px color-mix(in oklab, #00d4ff 35%, transparent);
}

.yt-grid-next-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.yt-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}
.yt-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.yt-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0;
  background: #000;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.yt-poster img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.4s ease;
}
.yt-poster:hover img { opacity: 1; transform: scale(1.03); }
.yt-play {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6));
  transition: transform 0.18s ease;
}
.yt-poster:hover .yt-play { transform: scale(1.08); }

/* ============================================================
   CARD MOOD THEMING
   ----------------------------------------------------------
   When a mood is picked, attachAutoPlayController sets three CSS
   custom properties on the .yt-card root (--mood-c, --mood-c2,
   --mood-accent) and adds the .is-mooded class. Those drive the
   border ring, the frame glow, the DJ-corner pill colours, and
   the Playing-Next slide-in pill — keeping the card visually
   coherent with whatever vibe the user picked.
============================================================ */
.yt-card.is-mooded {
  border-color: color-mix(in oklab, var(--mood-accent) 38%, var(--line));
  box-shadow:
    var(--shadow-1),
    0 0 0 1px color-mix(in oklab, var(--mood-accent) 18%, transparent),
    0 8px 32px color-mix(in oklab, var(--mood-c2) 50%, transparent);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.yt-card.is-mooded .yt-frame {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--mood-accent) 35%, transparent),
              0 0 24px color-mix(in oklab, var(--mood-accent) 20%, transparent);
  transition: box-shadow 0.5s ease;
}

/* Player slot (replaces poster once YT.Player adopts the frame). */
.yt-player-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

/* ============================================================
   DNA45 KARAOKE — Apple-Music-style synced lyrics beside the
   YouTube player. Activated via the "Karaoke" button or by
   adding the word "karaoke" / "lyrics" to a YouTube query.
   Source: lrclib.net.
   ============================================================ */

/* Stage wraps the .yt-frame so the .yt-karaoke panel can sit
   beside it. Single column by default (panel hidden); switches
   to a two-column grid when .is-karaoke joins .yt-card. */
.yt-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.yt-card.is-karaoke .yt-stage {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: stretch;
}
@media (max-width: 880px) {
  .yt-card.is-karaoke .yt-stage {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   KARAOKE SURFACE — SINGLE SOURCE OF TRUTH
   ------------------------------------------------------------
   The karaoke card + panel bg is HARD-LOCKED to pure #000 on
   every theme. One custom property (--yk-surface) drives every
   sub-state (normal, ghost, cinema, expanded, any future combo).
   No theme variable touches it. No !important wars. To change
   the surface in future, change this one declaration.
   ============================================================ */
.yt-card.is-karaoke {
  --yk-surface: #000;
  --yk-border:  #1a1d28;

  background: var(--yk-surface);
  border-color: var(--yk-border);
  box-shadow: none;
}
.yt-card.is-karaoke .yt-frame {
  box-shadow: none;
}
/* Light themes override the surface to their own cream / paper
   via the single var. Every downstream rule (ghost, cinema,
   expanded, panel, border) reads var(--yk-surface) / var(--yk-border)
   and inherits this override automatically. One place to change,
   no cascade surprises. */
[data-theme="stanford"] .yt-card.is-karaoke,
[data-theme="tuks"]     .yt-card.is-karaoke,
[data-theme="unibo"]    .yt-card.is-karaoke {
  --yk-surface: var(--panel);
  --yk-border:  var(--line);
}

.yt-karaoke {
  display: flex; flex-direction: column;
  min-height: 280px;
  max-height: 520px;
  border-radius: 14px;
  border: 1px solid var(--yk-border, #1a1d28);
  background: var(--yk-surface, #000);
  overflow: visible;
  animation: ykMount 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes ykMount {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.yk-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid color-mix(in oklab, #fff 8%, transparent);
}
.yk-head-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.yk-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, #c084fc 65%, var(--text));
}
.yk-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yk-meta-artist { color: var(--muted); font-weight: 500; }
.yk-meta-song   { color: var(--text); }
.yk-close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  width: 28px; height: 28px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.yk-close:hover {
  background: color-mix(in oklab, #c084fc 12%, transparent);
  border-color: color-mix(in oklab, #c084fc 50%, var(--line));
  color: #c084fc;
}

.yk-body {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 24px 18px 60px;
  /* Soft top + bottom fade so lines slide into view ghost-like. */
  mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%);
}
.yk-body::-webkit-scrollbar { width: 4px; }
.yk-body::-webkit-scrollbar-thumb { background: color-mix(in oklab, #c084fc 30%, transparent); border-radius: 99px; }

/* Loading + empty states. */
.yk-loading {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 40px 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.yk-loading-orb {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    #22d3ee, #c084fc, #f87171, #facc15, #22d3ee);
  animation: ykSpin 1.4s linear infinite;
  filter: blur(0.5px);
  box-shadow: 0 0 24px color-mix(in oklab, #c084fc 60%, transparent);
}
@keyframes ykSpin { to { transform: rotate(360deg); } }
.yk-empty {
  padding: 32px 16px;
  text-align: center;
  display: flex; flex-direction: column; gap: 8px;
}
.yk-empty-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}
.yk-empty-sub {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}
.yk-empty-sub a { color: #c084fc; }

.yk-plain {
  font-size: 14px;
  line-height: 1.65;
  color: color-mix(in oklab, var(--text) 90%, transparent);
  white-space: pre-line;
}
.yk-plain-note {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, #fff 8%, transparent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  text-align: center;
}

/* ---- The lyrics list — Apple-Music-ghost rendering. ---- */
.yk-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 18px;
}
.yk-line {
  cursor: pointer;
  /* Ghost: blurred + faded + GT Maru Light, sub-pixel scaled down.
     Hope's "Apple Music ghost karaoke" — soft, poetic, breathing. */
  filter: blur(2px);
  opacity: 0.4;
  transform: scale(0.94);
  transform-origin: left center;
  transition:
    filter 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    font-size 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.4s ease,
    font-weight 0.4s ease;
  /* GT Maru is DNA45's house geometric sans — same family used for
     every big-number on every card. We have Light (300) + Regular
     (400) loaded; we use both deliberately rather than faux-bolding. */
  font-family: var(--font-sans);
  font-weight: 300;                  /* GT Maru Light for ghosted lines */
  font-size: 16px;
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--text);
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "kern";
  -webkit-font-smoothing: antialiased;
  will-change: filter, opacity, transform, font-size;
}
.yk-line:hover {
  opacity: 0.65;
  filter: blur(1px);
  transform: scale(0.97);
}
.yk-line.is-active {
  filter: blur(0);
  opacity: 1;
  transform: scale(1.0);            /* "true" size; the size jump itself reads as emphasis */
  font-weight: 400;                  /* GT Maru Regular */
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: -0.018em;
}
@media (min-width: 1280px) {
  .yk-line          { font-size: 17px; }
  .yk-line.is-active { font-size: 24px; line-height: 1.2; }
}

/* The gradient fill: --yk-progress (0..1) drives the split.
   Two stacked backgrounds, both clipped to the text:
     1. The cyan→purple→pink gradient sized to --yk-progress
        of the line width (paints the "sung" portion).
     2. A flat muted-white ghost at 100% width (the "to come"
        portion glows softly behind the gradient).
   Where the gradient paints, it covers the ghost. Where it
   hasn't reached yet, the ghost shows through. Smooth + clean. */
.yk-line.is-active .yk-text {
  /* The "to come" layer behind the gradient uses var(--text) so the
     unsung portion is readable on BOTH dark + light themes. On dark
     themes that's near-white; on light themes it's near-black. */
  background-image:
    linear-gradient(90deg, #22d3ee 0%, #c084fc 50%, #f87171 100%),
    linear-gradient(0deg,
      color-mix(in oklab, var(--text) 70%, transparent),
      color-mix(in oklab, var(--text) 70%, transparent));
  background-size: calc(var(--yk-progress, 0) * 100%) 100%, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Fast transition so changes between RAF frames look fluid even
     when the player only ticks getCurrentTime every ~250 ms. */
  transition: background-size 0.18s linear;
  display: inline;
  filter: drop-shadow(0 4px 18px color-mix(in oklab, #c084fc 35%, transparent));
}

/* Empty/rest beat lines — three bouncing dots. */
.yk-line--rest { cursor: default; }
.yk-rest {
  display: inline-flex; gap: 5px; align-items: center;
  padding: 4px 0;
}
.yk-rest span {
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in oklab, #c084fc 60%, var(--text));
  opacity: 0.4;
}
.yk-line--rest.is-active .yk-rest span {
  animation: ykRestBounce 0.9s ease-in-out infinite;
  opacity: 1;
}
.yk-line--rest.is-active .yk-rest span:nth-child(2) { animation-delay: 0.18s; }
.yk-line--rest.is-active .yk-rest span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ykRestBounce {
  0%, 100% { transform: translateY(0);   }
  50%      { transform: translateY(-5px); }
}

.yk-foot {
  padding: 8px 14px 10px;
  border-top: 1px solid color-mix(in oklab, #fff 8%, transparent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.yk-foot a { color: color-mix(in oklab, #c084fc 70%, var(--text)); text-decoration: none; }
.yk-foot a:hover { color: #c084fc; }

/* Skip button — sits next to the AutoPlay toggle. Visible only
   when AutoPlay is on. Lets the user bail on a pick they don't
   like and immediately jump to the next track in the queue. */
.yt-skip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid color-mix(in oklab, #f87171 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in oklab, #f87171 8%, transparent);
  color: color-mix(in oklab, #f87171 85%, var(--text));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.08s;
}
.yt-skip-btn:hover {
  background: color-mix(in oklab, #f87171 18%, transparent);
  border-color: #f87171;
  color: #f87171;
}
.yt-skip-btn:active { transform: translateY(1px); }
.yt-skip-btn[hidden] { display: none; }

/* Search-Another-Video prompter — base styles already exist for
   .card-prompter--external; this variant kicks in when the panel
   is mounted INSIDE an expanded fullscreen YT card (so it floats
   above the player but inside the dark cinema canvas). */
.card-prompter--external.is-in-expanded {
  margin: 6px 0 4px;
  border-radius: 14px;
  background: color-mix(in oklab, #000 65%, var(--panel));
  border: 1px solid color-mix(in oklab, #fff 12%, transparent);
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.55);
}
.yt-card.is-expanded .card-prompter--external.is-in-expanded {
  /* Anchor it just above the foot bar so it never collides with
     the player or the autoplay toggle. */
  flex: 0 0 auto;
}

/* Karaoke toggle button in the YT card footer. */
.yt-karaoke-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid color-mix(in oklab, #c084fc 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in oklab, #c084fc 8%, transparent);
  color: color-mix(in oklab, #c084fc 80%, var(--text));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.08s;
}
.yt-karaoke-btn:hover {
  background: color-mix(in oklab, #c084fc 18%, transparent);
  border-color: #c084fc;
  color: #c084fc;
}
.yt-karaoke-btn:active { transform: translateY(1px); }
.yt-card.is-karaoke .yt-karaoke-btn {
  background: linear-gradient(135deg, #22d3ee 0%, #c084fc 50%, #f87171 100%);
  color: #0b0e18;
  border-color: transparent;
  font-weight: 700;
}

/* ============================================================
   BROADCAST (group-watch) — button + overlay pill + drawer.
   ------------------------------------------------------------
   Hope's protocol (see public/broadcast.js):
     - Master clicks .yt-broadcast-btn → room spins up,
       .broadcast-overlay mounts bottom-right of viewport.
     - Slave opens shareable ?b=<id> link → same overlay
       mounts in "Tuned in" mode.
     - Drawer exposes listener list + master controls
       (pass aux, kick, end).
   ============================================================ */

.yt-broadcast-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border: 1px solid color-mix(in oklab, #ef4444 42%, var(--line));
  border-radius: 999px;
  background: color-mix(in oklab, #ef4444 9%, transparent);
  color: color-mix(in oklab, #ef4444 85%, var(--text));
  font: 600 12px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.08s;
}
.yt-broadcast-btn:hover {
  background: color-mix(in oklab, #ef4444 20%, transparent);
  border-color: #ef4444;
  color: #ef4444;
}
.yt-broadcast-btn:active { transform: translateY(1px); }
.yt-broadcast-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
  animation: ytBroadcastPulse 1.8s ease-out infinite;
}
.yt-broadcast-btn.is-live {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  color: #0b0e18;
  border-color: transparent;
  font-weight: 700;
}
.yt-broadcast-btn.is-live .yt-broadcast-dot {
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
}
@keyframes ytBroadcastPulse {
  0%   { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0);    }
}

/* -- Overlay pill + drawer, pinned to bottom-right. -------- */

.broadcast-overlay {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 9500;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 10px;
  font-family: "Inter", system-ui, sans-serif;
  pointer-events: none; /* child elements re-enable per piece. */
}
.broadcast-overlay > * { pointer-events: auto; }

.broadcast-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(18, 20, 28, 0.88);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
  color: #f8fafc;
  font-size: 13px; font-weight: 600;
}
.broadcast-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
  animation: ytBroadcastPulse 1.8s ease-out infinite;
}
.broadcast-pill-text { white-space: nowrap; }
.broadcast-pill-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: none;
  background: rgba(239, 68, 68, 0.22);
  color: #fecaca;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.broadcast-pill-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #fff;
}

.broadcast-drawer {
  width: 280px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: rgba(15, 17, 23, 0.94);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(239, 68, 68, 0.28);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  color: #f8fafc;
}
.broadcast-drawer[hidden] { display: none; }
.broadcast-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #cbd5f5;
}
.broadcast-share {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.broadcast-share:hover {
  background: rgba(239, 68, 68, 0.28);
  color: #fff;
  border-color: #ef4444;
}

.broadcast-listeners {
  list-style: none; margin: 0; padding: 0;
  max-height: 260px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.broadcast-listener {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px;
  border-radius: 10px;
  font-size: 13px;
}
.broadcast-listener:hover { background: rgba(255, 255, 255, 0.04); }
.broadcast-listener.is-master { background: rgba(239, 68, 68, 0.1); }
.broadcast-listener.is-me .broadcast-name { color: #fde68a; }
.broadcast-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #1f2937;
  display: inline-flex; align-items: center; justify-content: center;
}
.broadcast-avatar img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.broadcast-avatar-init {
  font-size: 12px; font-weight: 700; color: #e5e7eb;
}
.broadcast-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e2e8f0;
  font-weight: 500;
}
.broadcast-role-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.broadcast-ctrls {
  display: flex; gap: 4px;
  flex-shrink: 0;
}
.broadcast-ctrl {
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5f5;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.broadcast-ctrl:hover {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
}
.broadcast-ctrl.is-danger:hover {
  background: rgba(239, 68, 68, 0.22);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.5);
}

.broadcast-drawer-foot {
  display: flex; gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.broadcast-leave,
.broadcast-close {
  flex: 1 1 0;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.broadcast-leave:hover {
  background: rgba(148, 163, 184, 0.18);
  color: #f8fafc;
}
.broadcast-close {
  background: rgba(239, 68, 68, 0.15);
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.4);
}
.broadcast-close:hover {
  background: rgba(239, 68, 68, 0.35);
  color: #fff;
  border-color: #ef4444;
}

/* Toast surface used by broadcast.js for kick/end/copy-link feedback. */
.broadcast-toast {
  position: fixed;
  left: 50%; bottom: 84px;
  transform: translateX(-50%) translateY(8px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(15, 17, 23, 0.94);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #f8fafc;
  font: 600 13px/1 "Inter", system-ui, sans-serif;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
  z-index: 9600;
}
.broadcast-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile: slim down so the drawer doesn't swallow the viewport. */
@media (max-width: 640px) {
  .broadcast-overlay { right: 10px; bottom: 10px; }
  .broadcast-drawer  { width: calc(100vw - 32px); max-width: 300px; }
}

/* Mobile tightening. */
@media (max-width: 640px) {
  .yt-karaoke { min-height: 240px; max-height: 360px; }
  .yk-line          { font-size: 14px; }
  .yk-line.is-active { font-size: 19px; }
  .yk-body { padding: 18px 14px 44px; }
}

/* ============================================================
   Floating music notes — pulsed in rhythm with the song.
   Each note is a single-iteration animation spawned on a line
   transition by the karaoke sync loop, so the cadence IS the
   beat. Notes live deep in the page gutter (±50% beyond the
   card) and never touch the card itself.
   ============================================================ */
.yt-card.is-karaoke {
  position: relative;
  overflow: visible;
}
.yk-notes {
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: -50%;
  right: -50%;
  pointer-events: none;
  z-index: 4;
}
.yk-note {
  position: absolute;
  left: var(--x, 50%);
  top:  var(--y, 50%);
  font-size: var(--size, 18px);
  color: hsl(var(--hue, 280deg), 95%, 70%);
  text-shadow:
    0 0 10px hsl(var(--hue, 280deg), 95%, 60%),
    0 0 22px hsl(var(--hue, 280deg), 95%, 55%);
  filter: drop-shadow(0 0 6px hsl(var(--hue, 280deg), 95%, 60%));
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  animation: yk-note-pop var(--dur, 2.2s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
  user-select: none;
}
@keyframes yk-note-pop {
  0%   { opacity: 0;    transform: translate(-50%, -50%)  scale(0.5)  rotate(-4deg); }
  20%  { opacity: 0.95; transform: translate(-50%, -65%)  scale(1.0)  rotate(0deg);  }
  60%  { opacity: 0.85; transform: translate(-50%, -90%)  scale(1.05) rotate(3deg);  }
  100% { opacity: 0;    transform: translate(-50%, -120%) scale(0.6)  rotate(-2deg); }
}

/* Hero notes — only ~10% bigger, soft shimmer through the hue
   wheel, dramatic but never overwhelming. */
.yk-note--hero {
  animation:
    yk-note-hero var(--dur, 3s) cubic-bezier(0.22, 1, 0.36, 1) forwards,
    yk-note-shimmer 1.4s linear infinite;
  mix-blend-mode: screen;
}
@keyframes yk-note-hero {
  0%   { opacity: 0;    transform: translate(-50%, -45%)  scale(0.4)  rotate(-6deg); filter: drop-shadow(0 0 0 transparent); }
  18%  { opacity: 1;    transform: translate(-50%, -65%)  scale(1.0)  rotate(0deg);  filter: drop-shadow(0 0 18px hsl(var(--hue), 95%, 65%)); }
  60%  { opacity: 1;    transform: translate(-50%, -90%)  scale(1.1)  rotate(4deg);  filter: drop-shadow(0 0 28px hsl(var(--hue), 95%, 70%)); }
  85%  { opacity: 0.5;  transform: translate(-50%, -115%) scale(1.0)  rotate(-2deg); filter: drop-shadow(0 0 18px hsl(var(--hue), 95%, 70%)); }
  100% { opacity: 0;    transform: translate(-50%, -135%) scale(0.7)  rotate(2deg);  filter: drop-shadow(0 0 0 transparent); }
}
@keyframes yk-note-shimmer {
  0%   { color: hsl(var(--hue),                100%, 72%); }
  50%  { color: hsl(calc(var(--hue) + 180deg), 100%, 72%); }
  100% { color: hsl(calc(var(--hue) + 360deg), 100%, 72%); }
}

@media (prefers-reduced-motion: reduce) {
  .yk-note { animation: none; opacity: 0; }
}
@media (max-width: 640px) {
  .yk-notes { left: -22%; right: -22%; }
}

/* ============================================================
   Foot meta-line — title · "X years ago" sitting just under
   the gas-pump views odometer. The title is hidden in normal
   mode (it's already shown as the card's main title) and
   revealed in aqua-blue in expanded mode where the user wanted
   to see what's currently playing.
   ============================================================ */
.yt-foot-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: color-mix(in oklab, var(--text) 70%, transparent);
  margin-top: 2px;
}
.yt-foot-title { display: none; }
.yt-foot-dot   { display: none; opacity: 0.55; }
.yt-card.is-expanded .yt-foot-title {
  display: inline;
  color: #22d3ee;
  font-weight: 600;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
  letter-spacing: 0.01em;
}
.yt-card.is-expanded .yt-foot-dot { display: inline; }
.yt-card.is-expanded .yt-foot-meta { font-size: 14px; }

/* ============================================================
   Heart Likes — sits next to the DNA45 Karaoke title in the
   panel header. Count grows as the user taps the heart, capped
   at 10 per song per day. On click, hearts pop over the video.
   ============================================================ */
.yk-head { gap: 10px; }
.yk-like {
  /* Matches the other karaoke action buttons (.yk-sync-btn,
     .yk-find-btn, .yk-cinema-btn) — purple-tinted default, cyan
     hover, full rainbow gradient when liked (same primitive as
     the cinema/expand "active" states). One visual language for
     the whole cluster. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid color-mix(in oklab, #c084fc 28%, var(--line));
  border-radius: 999px;
  background: color-mix(in oklab, #c084fc 6%, transparent);
  color: color-mix(in oklab, #c084fc 80%, var(--text));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.08s;
  flex: 0 0 auto;
}
.yk-like:hover {
  background: color-mix(in oklab, #22d3ee 18%, transparent);
  border-color: #22d3ee;
  color: #22d3ee;
}
.yk-like:active { transform: translateY(1px) scale(0.98); }
.yk-like.is-liked {
  background: linear-gradient(135deg, #22d3ee 0%, #c084fc 50%, #f87171 100%);
  border-color: transparent;
  color: #0b0e18;
}
.yk-like.is-liked:hover {
  background: linear-gradient(135deg, #22d3ee 0%, #c084fc 50%, #f87171 100%);
  border-color: transparent;
  color: #0b0e18;
  filter: brightness(1.08);
}
.yk-like.is-capped {
  opacity: 0.55;
  cursor: not-allowed;
}
.yk-like.is-capped:hover {
  background: color-mix(in oklab, #c084fc 6%, transparent);
  border-color: color-mix(in oklab, #c084fc 28%, var(--line));
  color: color-mix(in oklab, #c084fc 80%, var(--text));
}
.yk-like-icon { flex: 0 0 auto; }
.yk-like-count { font-weight: 700; }
.yk-like-suffix {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
@media (max-width: 480px) {
  .yk-like-suffix { display: none; }
}

/* Click-pulse: scales the button briefly on each like. */
.yk-like.is-pulsing { animation: yk-like-pulse 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes yk-like-pulse {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.12); }
  100% { transform: scale(1);    }
}

/* Floating heart-pop layer over the player frame. */
.yk-heart-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.yk-heart-pop {
  position: absolute;
  bottom: 6%;
  left: var(--x, 50%);
  transform: translate(-50%, 0) scale(0.4);
  font-size: var(--size, 28px);
  filter: drop-shadow(0 0 12px currentColor);
  opacity: 0;
  animation: yk-heart-float var(--dur, 2s) cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) forwards;
  user-select: none;
  will-change: transform, opacity;
}
@keyframes yk-heart-float {
  0%   { opacity: 0;    transform: translate(-50%, 0)                  scale(0.4) rotate(-6deg); }
  18%  { opacity: 1;    transform: translate(calc(-50% + var(--dx)*0.2), -10%) scale(1.0) rotate(2deg); }
  60%  { opacity: 0.95; transform: translate(calc(-50% + var(--dx)*0.7), -55%) scale(1.1) rotate(-3deg); }
  100% { opacity: 0;    transform: translate(calc(-50% + var(--dx)),    -110%) scale(0.7) rotate(4deg); }
}

/* ============================================================
   Expand button — lives in the karaoke footer next to the
   lrclib.net credit. Toggles full-viewport mode for the whole
   YT card. Esc exits. When karaoke is on, the expanded card
   keeps its two-column stage so the screen is cleanly split
   between player and lyrics.
   ============================================================ */
.yk-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  /* Critical: with 5 action buttons in the cluster the foot can
     overrun a narrow panel and the right-most buttons (cinema +
     expand) get clipped by .yt-karaoke{overflow:hidden}. Wrap so
     the cluster drops to the next line instead of disappearing. */
  flex-wrap: wrap;
  row-gap: 8px;
}
.yk-foot-actions {
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.yk-source {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yk-expand-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--text) 18%, var(--line));
  border-radius: 8px;
  background: transparent;
  color: color-mix(in oklab, var(--text) 80%, transparent);
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.08s;
}
.yk-expand-btn:hover {
  background: color-mix(in oklab, #c084fc 14%, transparent);
  border-color: #c084fc;
  color: #c084fc;
}
.yk-expand-btn:active { transform: scale(0.94); }
.yt-card.is-expanded .yk-expand-btn {
  background: linear-gradient(135deg, #22d3ee 0%, #c084fc 50%, #f87171 100%);
  border-color: transparent;
  color: #0b0e18;
}

/* ---- Footer action cluster (Sync + Lightbulb + Cinema + Expand) */
.yk-foot-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.yk-sync-btn,
.yk-find-btn,
.yk-cinema-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 10px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, #c084fc 28%, var(--line));
  background: color-mix(in oklab, #c084fc 6%, transparent);
  color: color-mix(in oklab, #c084fc 80%, var(--text));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.08s;
}
/* Find + Cinema are icon-only — square them off. */
.yk-find-btn,
.yk-cinema-btn {
  width: 28px;
  padding: 0;
}
.yk-sync-btn:hover,
.yk-find-btn:hover,
.yk-cinema-btn:hover {
  background: color-mix(in oklab, #22d3ee 18%, transparent);
  border-color: #22d3ee;
  color: #22d3ee;
}
.yk-sync-btn:active,
.yk-find-btn:active,
.yk-cinema-btn:active { transform: translateY(1px); }
.yk-sync-btn.is-armed {
  background: #22d3ee;
  border-color: #22d3ee;
  color: #0b0e18;
  animation: yk-sync-pulse 1.4s ease-in-out infinite;
}
.yt-card.is-cinema .yk-cinema-btn {
  background: linear-gradient(135deg, #22d3ee 0%, #c084fc 50%, #f87171 100%);
  border-color: transparent;
  color: #0b0e18;
}
@keyframes yk-sync-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.0); }
}

/* ---- Ghost mode (lightbulb) ---------------------------------
   A visual sub-state of the karaoke panel. Strips the box
   decoration so only the active line + the upcoming line read
   on the right; the video gets a touch more width since lyrics
   need less. Heights and the meta row below the stage are NOT
   touched, so views/title stay on their existing horizontal
   plane. No background, no border, no chase — just text, with
   silky fade-in / fade-out and a small pop on the leaving line.
   ============================================================ */
.yt-card.is-ghost.is-karaoke .yt-stage {
  /* A bit more breathing room for the player since the stripped
     lyric column needs less width than the full karaoke list. */
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
}
/* Ghost mode keeps the panel surface (pure black on dark themes,
   cream gradient on light themes) — do NOT strip it to transparent,
   or the theme-coloured yt-card bg bleeds through and breaks the
   "always black on dark themes" rule. Only the border / shadow /
   blur get stripped so the two-line lyric ribbon reads cleanly. */
.yt-card.is-ghost .yt-karaoke {
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Hide the panel header in ghost (title + likes already echo in
   the card head). Footer stays visible — its borders/bg are
   stripped — so the user always has Lightbulb/Sync/Cinema/Expand. */
.yt-card.is-ghost .yk-head { display: none !important; }
.yt-card.is-ghost .yk-foot {
  border: 0 !important;
  background: transparent !important;
}
/* The list itself loses its scroll mask + becomes just the visible
   active line + its successor — everything else fades out so the
   eye gets a clean two-line ribbon. */
.yt-card.is-ghost .yk-body {
  padding: 0;
  mask-image: none;
  -webkit-mask-image: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yt-card.is-ghost .yk-lines {
  gap: 10px;
  align-items: center;
  text-align: center;
}
/* Default: every line invisible. We unhide just three states:
   .is-active (current), .is-active + .yk-line (future), and
   .is-leaving (the previous active, mid-pop). */
.yt-card.is-ghost .yk-line {
  display: none;
  transition: opacity 320ms ease, filter 320ms ease, transform 320ms ease;
}
.yt-card.is-ghost .yk-line.is-active,
.yt-card.is-ghost .yk-line.is-active + .yk-line,
.yt-card.is-ghost .yk-line.is-leaving {
  display: block;
}
/* Active line — keeps the gradient-fill behaviour. The unsung
   base now uses var(--text) (theme-aware) instead of hardcoded
   #fff, so light themes render it black and dark themes render
   it white. The gradient sweep on top is theme-agnostic. */
.yt-card.is-ghost .yk-line.is-active {
  filter: none;
  opacity: 1;
  font-weight: 500;
}
.yt-card.is-ghost .yk-line.is-active .yk-text {
  background-image:
    linear-gradient(90deg, #22d3ee 0%, #c084fc 50%, #f87171 100%),
    linear-gradient(0deg, var(--text), var(--text));
}
.yt-card.is-ghost .yk-line.is-active.is-fresh {
  animation: yk-ghost-rise 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes yk-ghost-rise {
  from { opacity: 0; filter: blur(3px); transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0)   scale(1); }
}
/* Leaving line — fades + drifts up + scales out. The is-leaving
   class is added by the sync loop for ~720ms. */
.yt-card.is-ghost .yk-line.is-leaving {
  animation: yk-ghost-pop 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}
@keyframes yk-ghost-pop {
  0%   { opacity: 1;    filter: blur(0);   transform: translateY(0)    scale(1); }
  35%  { opacity: 0.92; filter: blur(0.5px); transform: translateY(-2px) scale(1.04); }
  100% { opacity: 0;    filter: blur(5px); transform: translateY(-12px) scale(0.92); }
}
/* Future line — small, blurred, ghostly. Uses var(--text) so it
   adapts to theme: near-black on light themes, near-white on
   dark themes. No more white-on-white invisibility bug. */
.yt-card.is-ghost .yk-line.is-active + .yk-line {
  cursor: default;
  font-size: 0.45em;          /* relative to .is-active, auto-scales */
  font-weight: 300;
  color: var(--text);
  filter: blur(2.2px);
  opacity: 0.7;
  transform: none;
  letter-spacing: -0.005em;
  animation: yk-ghost-future-in 460ms ease both;
}
.yt-card.is-ghost .yk-line.is-active + .yk-line .yk-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}
@keyframes yk-ghost-future-in {
  from { opacity: 0; filter: blur(6px); transform: translateY(6px); }
  to   { opacity: 0.7; filter: blur(2.2px); transform: translateY(0); }
}
/* While syncing, hint the two lines are tap targets. */
.yt-card.is-karaoke.is-syncing .yk-line { cursor: pointer; }

/* ---- Cinema mode (overlay) -----------------------------------
   A glassy lyric ribbon (chasing border + blur background) that
   sits OVER the player only — anchored at the bottom of the
   .yt-frame, never spilling onto the views/title row below. The
   regular .yt-karaoke side panel stays visible (Hope's instinct:
   cinema is additive, not destructive) but the user can pair it
   with Ghost mode to strip the panel too.
   ============================================================ */
@property --yk-cinema-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.yk-cinema-overlay {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(94%, 880px);
  padding: 14px 28px 16px;
  border-radius: 18px;
  /* TRANSPARENT — Hope wants the video to show through. The
     chasing rainbow border (pseudo-elements below) is the ONLY
     decoration; lyrics float on the video itself. Text-shadow on
     each line keeps them readable on bright frames. */
  background: transparent;
  text-align: center;
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02", "kern";
  z-index: 14;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Reserve a stable height so the ribbon doesn't jump between
     short / long lyric beats. */
  min-height: clamp(70px, 11vh, 110px);
  animation: yk-cinema-rise 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes yk-cinema-rise {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Chasing rainbow stripes — same primitive as the auth gate. */
.yk-cinema-overlay::before,
.yk-cinema-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: yk-cinema-chase 12s linear infinite;
  z-index: 1;
}
.yk-cinema-overlay::before {
  background: conic-gradient(
    from var(--yk-cinema-angle),
    transparent 0deg,
    transparent 295deg,
    rgba(34, 211, 238, 0.0) 312deg,
    rgba(34, 211, 238, 0.95) 338deg,
    #fff 355deg,
    rgba(34, 211, 238, 0.0) 360deg
  );
}
.yk-cinema-overlay::after {
  background: conic-gradient(
    from calc(var(--yk-cinema-angle) + 180deg),
    transparent 0deg,
    transparent 295deg,
    rgba(192, 132, 252, 0.0) 312deg,
    rgba(192, 132, 252, 0.95) 338deg,
    #fff 355deg,
    rgba(192, 132, 252, 0.0) 360deg
  );
}
@keyframes yk-cinema-chase { to { --yk-cinema-angle: 360deg; } }
/* Future line — blurred ghost white. */
.yk-cinema-future {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(11px, 1.2vw, 16px);
  line-height: 1.2;
  color: #fff;
  filter: blur(1.8px);
  opacity: 0.65;
  min-height: 1.2em;
  transition: opacity 260ms ease, filter 260ms ease;
  position: relative;
  z-index: 2;
  /* Heavy double shadow so it's legible on bright frames too. */
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(0, 0, 0, 0.7);
}
.yk-cinema-future:empty { display: none; }
/* Current line — gradient sweep like .yk-line.is-active .yk-text,
   only the unsung base goes pure white instead of var(--text). */
.yk-cinema-current {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  position: relative;
  z-index: 2;
  min-height: 1.2em;
  background-image:
    linear-gradient(90deg, #22d3ee 0%, #c084fc 50%, #f87171 100%),
    linear-gradient(0deg, #fff, #fff);
  background-size: calc(var(--yk-progress, 0) * 100%) 100%, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-size 0.18s linear;
  filter: drop-shadow(0 4px 18px rgba(192, 132, 252, 0.45));
}
.yk-cinema-current:empty::before {
  content: "♪";
  -webkit-text-fill-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.35);
  background: none;
}
@media (prefers-reduced-motion: reduce) {
  .yk-cinema-overlay,
  .yk-cinema-overlay::before,
  .yk-cinema-overlay::after {
    animation: none;
  }
}

/* ---- Cinema mode collapses the side karaoke panel -----------
   When cinema is on, the side panel is silent so there's only
   ONE set of lyrics on screen (the ribbon over the video). The
   panel becomes a small floating control pill in the top-right
   of the card with just the action buttons (close / cinema /
   expand / sync / find / heart) so the user can still bail or
   calibrate without a second cinema-only HUD.
   ============================================================ */
/* ---- Cinema-mode container breakout ----------------------------
   ROOT CAUSE of the "cinema still feels smaller than native YT":
   .results-inner caps the whole chat at min(860px, 100%). Even
   with a grid bump the frame could never exceed ~590px — tiny
   next to a native YT player which uses the full viewport. Fix:
   escape the 860px container with symmetric negative margins so
   the cinema card spans ~96vw. Gated by a 960px min-width media
   query so we never ADD positive margin on narrow screens. And
   capped at 1600px total so we don't balloon on ultra-wide.

   Math: 50% of parent (=430px once parent hits its 860px cap) vs
   48vw (near half viewport). On wide screens 48vw > 430px, so
   (50% - 48vw) is negative — exactly the extension we want on
   each side. The max() clamp stops us extending past 800px per
   side (total card cap 1600px). body{overflow-x:hidden} already
   prevents any horizontal scroll even if a pixel escapes.
   ============================================================ */
@media (min-width: 960px) {
  .yt-card.is-cinema {
    margin-left: max(calc(50% - 48vw), calc(50% - 800px));
    margin-right: max(calc(50% - 48vw), calc(50% - 800px));
  }
}
.yt-card.is-cinema.is-karaoke .yt-stage {
  /* Cinema column split. With the card now ~96vw wide (see
     breakout above), a 2.2fr/1fr grid gives a frame at 68.75% of
     that width — on a 1600px viewport that's ~1056px of video,
     right in native-YT territory. Right column remains black
     because the panel is visibility:hidden; it reserves the space
     so the translate-centering below splits the black bars
     symmetrically. Default (non-cinema) layout is NOT touched. */
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  background: #000;
}
.yt-card.is-cinema .yt-karaoke {
  /* Hidden but column reserved by the grid above. The DOM node is
     intact (sync loop + like wiring keep working). */
  visibility: hidden;
}
.yt-card.is-cinema .yt-frame {
  /* Box manipulation only — no width change on the box itself,
     the grid above does the width bump. translateX nudges the
     frame right by half the empty column's width so the visible
     black space splits evenly on both sides.
     Frame = 2.2/3.2 = 68.75% of stage; empty col = 31.25%; half =
     15.625% of stage, which is 15.625 / 68.75 ≈ 22.7% of frame. */
  transform: translateX(22.7%);
}

/* Relocated footer action cluster — sits alongside AutoPlay + Skip
   in the YT card's bottom-right strip. Matches the pill styling so
   the three (karaoke buttons / AutoPlay toggle / Skip) read as one
   continuous control row. */
.yt-foot-right .yk-foot-actions--relocated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}
/* The relocated cluster still carries the is-karaoke absolute-pin
   rule for .yk-like we added earlier — undo it when the button is
   no longer inside .yt-karaoke. */
.yt-foot-right .yk-foot-actions--relocated .yk-like {
  position: static !important;
  top: auto !important;
  right: auto !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* ---- Chasing rainbow border on the DEFAULT karaoke panel ----
   Same primitive as the cinema overlay. Because is-ghost is now
   always-on by default, this lights up the moment the user hits
   the karaoke button. The pseudo-elements live INSIDE the panel
   (mask trick) so .yt-karaoke's overflow:hidden still works.
   ============================================================ */
.yt-card.is-ghost.is-karaoke:not(.is-cinema) .yt-karaoke {
  position: relative;
  /* Consume the single karaoke surface var — this used to pull
     a theme-coloured gradient from var(--panel) with !important,
     which was the root of the "karaoke picks up theme colour"
     bug. Now it reads from --yk-surface (black on dark themes,
     cream on Stanford / Tuks) like every other sub-state. */
  background: var(--yk-surface, #000);
  border: 1px solid var(--yk-border, rgba(255, 255, 255, 0.06));
}
.yt-card.is-ghost.is-karaoke:not(.is-cinema) .yt-karaoke::before,
.yt-card.is-ghost.is-karaoke:not(.is-cinema) .yt-karaoke::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: yk-cinema-chase 12s linear infinite;
  z-index: 1;
}
.yt-card.is-ghost.is-karaoke:not(.is-cinema) .yt-karaoke::before {
  background: conic-gradient(
    from var(--yk-cinema-angle),
    transparent 0deg,
    transparent 295deg,
    rgba(34, 211, 238, 0.0) 312deg,
    rgba(34, 211, 238, 0.95) 338deg,
    #fff 355deg,
    rgba(34, 211, 238, 0.0) 360deg
  );
}
.yt-card.is-ghost.is-karaoke:not(.is-cinema) .yt-karaoke::after {
  background: conic-gradient(
    from calc(var(--yk-cinema-angle) + 180deg),
    transparent 0deg,
    transparent 295deg,
    rgba(192, 132, 252, 0.0) 312deg,
    rgba(192, 132, 252, 0.95) 338deg,
    #fff 355deg,
    rgba(192, 132, 252, 0.0) 360deg
  );
}

/* ---- Skip button rainbow (parity with karaoke button) ------ */
.yt-skip-btn {
  background: linear-gradient(135deg, #22d3ee 0%, #c084fc 50%, #f87171 100%) !important;
  color: #0b0e18 !important;
  border-color: transparent !important;
  font-weight: 700;
}
.yt-skip-btn:hover {
  filter: brightness(1.1) saturate(1.15);
  background: linear-gradient(135deg, #22d3ee 0%, #c084fc 50%, #f87171 100%) !important;
  color: #0b0e18 !important;
}

/* ---- Hearts pinned to the panel's top-right corner ---------
   The heart button still lives inside .yk-foot-actions in the
   DOM (so its event wiring stays simple), but on the karaoke
   panel we float it to the top-right of .yt-karaoke so it
   reads like an Apple-Music style affordance — visible even
   when the head is hidden in ghost mode, never crowding the
   footer button cluster.
   ============================================================ */
.yt-card.is-karaoke .yt-karaoke { position: relative; }
.yt-card.is-karaoke .yk-foot-actions .yk-like {
  /* Default karaoke mode: pin the heart top-right of the panel
     (Apple-Music style) with the unified purple-tint palette —
     matches the other action buttons so the cluster reads as one
     visual system. .is-liked swaps to the rainbow gradient. */
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, #c084fc 28%, var(--line));
  background: color-mix(in oklab, #c084fc 10%, color-mix(in oklab, var(--panel) 80%, transparent));
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: color-mix(in oklab, #c084fc 80%, var(--text));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.08s;
}
.yt-card.is-karaoke .yk-foot-actions .yk-like:hover {
  background: color-mix(in oklab, #22d3ee 18%, transparent);
  border-color: #22d3ee;
  color: #22d3ee;
}
.yt-card.is-karaoke .yk-foot-actions .yk-like.is-liked {
  background: linear-gradient(135deg, #22d3ee 0%, #c084fc 50%, #f87171 100%);
  border-color: transparent;
  color: #0b0e18;
}
.yt-card.is-karaoke .yk-foot-actions .yk-like.is-liked:hover {
  filter: brightness(1.08);
}
.yt-card.is-karaoke .yk-foot-actions .yk-like.is-capped {
  opacity: 0.55;
  cursor: not-allowed;
}
.yt-card.is-karaoke .yk-foot-actions .yk-like .yk-like-icon { flex-shrink: 0; }
.yt-card.is-karaoke .yk-foot-actions .yk-like .yk-like-count { font-feature-settings: "tnum"; }
/* In cinema mode the action cluster is relocated into .yt-foot-
   right next to AutoPlay/Skip (see relocateActionsToFoot); the
   heart needs to sit inline with the others, not absolute-pinned
   to the panel top-right like it is in default karaoke mode. We
   ONLY reset position here — keep the pill's rainbow/purple bg
   intact so the button stays visible and clickable. */
.yt-card.is-cinema .yk-foot-actions .yk-like {
  position: static;
}

/* ---- Empty-state lyric search (rescue path) ----------------- */
.yk-empty-search {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, #c084fc 32%, var(--line));
  background: color-mix(in oklab, #c084fc 8%, transparent);
  padding: 4px 4px 4px 12px;
  transition: border-color 0.16s, background 0.16s;
}
.yk-empty-search:focus-within {
  border-color: #c084fc;
  background: color-mix(in oklab, #c084fc 14%, transparent);
}
.yk-empty-search-icon {
  display: inline-flex;
  align-items: center;
  color: color-mix(in oklab, #c084fc 80%, var(--text));
  margin-right: 6px;
}
.yk-empty-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 6px 0;
}
.yk-empty-input::placeholder {
  color: color-mix(in oklab, var(--muted) 80%, transparent);
}
.yk-empty-go {
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #22d3ee 0%, #c084fc 50%, #f87171 100%);
  color: #0b0e18;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.14s, transform 0.08s;
}
.yk-empty-go:hover { filter: brightness(1.1) saturate(1.15); }
.yk-empty-go:active { transform: translateY(1px); }
.yk-empty-failed {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in oklab, #f87171 12%, transparent);
  border: 1px solid color-mix(in oklab, #f87171 28%, var(--line));
  color: color-mix(in oklab, #f87171 90%, var(--text));
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: left;
}
.yk-empty-foot {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.yk-empty-foot a {
  color: color-mix(in oklab, #c084fc 70%, var(--text));
  text-decoration: none;
}
.yk-empty-foot a:hover { color: #c084fc; }

/* ---- Expand mode (full-viewport card) ----------------------
   Layout is a flex column that fills the whole viewport:
     [ header (title + views + autoplay all visible) ]
     [ dj bar (auto) ]
     [ stage (65% player | 35% karaoke) — fills remaining height ]
     [ footer (open link, stamp) ]
   Nothing is pushed off-screen; autoplay toggle always reachable. */
body.is-yt-expanded {
  /* Page under the expanded card must not scroll. */
  overflow: hidden;
}
body.is-yt-expanded .composer,
body.is-yt-expanded .composer-shell {
  display: none !important;
}
.yt-card.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 9000;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  border-radius: 0;
  padding: 14px 22px 10px;
  gap: 10px;
  background: var(--bg, var(--panel));
  overflow: hidden;
  animation: yt-expand-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Expanded + karaoke consumes the single surface var — so
   dark themes get #000 and light themes get their cream, all
   driven from one place (`.yt-card.is-karaoke { --yk-surface }`). */
.yt-card.is-expanded.is-karaoke {
  background: var(--yk-surface, #000);
}
@keyframes yt-expand-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1);    }
}

/* In expanded mode the stage must flex-grow to fill remaining
   vertical space (below header + dj bar, above footer). */
.yt-card.is-expanded .yt-stage {
  flex: 1 1 0;
  min-height: 0;
}

/* 65 / 35 split: player is the focus, karaoke bar is a compact
   rail on the right. */
.yt-card.is-expanded.is-karaoke .yt-stage {
  grid-template-columns: minmax(0, 1.86fr) minmax(0, 1fr);
  align-items: stretch;
}

/* Player fills its column entirely. Override the padding-bottom
   aspect-ratio hack so height: 100% takes effect. */
.yt-card.is-expanded .yt-frame {
  height: 100%;
  padding-bottom: 0 !important;
  aspect-ratio: auto;
}
.yt-card.is-expanded .yt-frame iframe,
.yt-card.is-expanded .yt-frame .yt-player-slot,
.yt-card.is-expanded .yt-frame .yt-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Karaoke panel fills its column. */
.yt-card.is-expanded .yt-karaoke {
  max-height: none;
  min-height: 0;
  height: 100%;
}

/* Bump the lyrics significantly to take advantage of the tall
   panel. Ghost lines 26px, active 42px — readable from across
   the room. Desktop only; mobile falls back below. */
.yt-card.is-expanded .yk-line            { font-size: 26px; line-height: 1.25; }
.yt-card.is-expanded .yk-line.is-active  { font-size: 42px; line-height: 1.18; }
.yt-card.is-expanded .yk-body            { padding: 28px 22px 56px; }

/* Title is bigger + always visible at top of the expanded card. */
.yt-card.is-expanded .yt-head           { flex: 0 0 auto; }
.yt-card.is-expanded .yt-title          { font-size: 22px; line-height: 1.2; }
.yt-card.is-expanded .yt-sub            { font-size: 13px; }

/* Footer (views odometer + autoplay) stays pinned at the bottom
   and never gets pushed off-screen. Shrink the gas-pump odometer
   so the full row fits alongside the AutoPlay toggle + buttons. */
.yt-card.is-expanded .yt-foot               { flex: 0 0 auto; flex-wrap: wrap; }
.yt-card.is-expanded .yt-odometer           { font-size: 26px; }
.yt-card.is-expanded .yt-odometer-label     { font-size: 10px; }
.yt-card.is-expanded .yt-dj-auto-label      { display: inline-block; }

@media (max-width: 880px) {
  .yt-card.is-expanded.is-karaoke .yt-stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
  .yt-card.is-expanded .yk-line           { font-size: 18px; }
  .yt-card.is-expanded .yk-line.is-active { font-size: 28px; }
  .yt-card.is-expanded .yt-title          { font-size: 17px; }
}

/* ============================================================
   DJ BAR (above .yt-frame — always visible, always clickable)
   ----------------------------------------------------------
   Holds the AutoPlay toggle and the Mood chips. Lives between the
   card header and the YouTube iframe so the iframe can never steal
   pointer events. All mood chips visible at once in a horizontally
   scrollable rail — no hover-expand, no clipping, no fighting.
============================================================ */
.yt-dj-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  margin: 8px 0 10px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--mood-c2, rgba(0,0,0,0.55)) 55%, transparent),
    color-mix(in oklab, var(--mood-c, rgba(0,0,0,0.45)) 45%, transparent));
  border: 1px solid color-mix(in oklab, var(--mood-accent, #fff) 22%, rgba(255,255,255,0.08));
  border-radius: 12px;
  font-family: var(--font-mono);
  color: #f4f4f4;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  position: relative;
  z-index: 2;
}
.yt-dj-bar-divider {
  width: 1px; height: 18px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}

/* AutoPlay micro-toggle */
.yt-dj-auto {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  user-select: none;
}
.yt-autoplay-input {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.yt-dj-auto-track {
  position: relative;
  width: 30px; height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.yt-dj-auto-thumb {
  position: absolute; top: 1px; left: 1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #f4f4f4;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}
.yt-autoplay-input:checked ~ .yt-dj-auto-track {
  background: color-mix(in oklab, var(--mood-accent, #ff0050) 75%, #000);
  border-color: color-mix(in oklab, var(--mood-accent, #ff0050) 80%, transparent);
}
.yt-autoplay-input:checked ~ .yt-dj-auto-track .yt-dj-auto-thumb {
  transform: translateX(14px);
  background: #fff;
}
.yt-autoplay-input:focus-visible ~ .yt-dj-auto-track {
  outline: 2px solid color-mix(in oklab, var(--mood-accent, #fff) 60%, transparent);
  outline-offset: 1px;
}
.yt-dj-auto-label {
  font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Theme-aware so it reads on both dark cream-on-black and light
     near-black-on-cream themes. */
  color: color-mix(in oklab, var(--text) 82%, transparent);
}

/* Mood label + always-visible horizontal rail */
.yt-dj-mood {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.yt-dj-mood-label {
  font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  color: color-mix(in oklab, var(--mood-accent, #f4f4f4) 70%, #fff);
  background: color-mix(in oklab, var(--mood-accent, transparent) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--mood-accent, #fff) 30%, rgba(255,255,255,0.06));
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 700;
}

/* Inline rail — always visible. Horizontally scrollable on overflow,
   no hover trickery, just a strip of chips the user can pick from. */
.yt-dj-mood-rail {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Isolate paint to the rail so chip-state changes don't bubble. */
  contain: layout paint style;
}
.yt-dj-mood-rail::-webkit-scrollbar { display: none; }
.yt-dj-mood-rail > .yt-dj-mood-chip {
  scroll-snap-align: start;
  /* GPU layer per chip — kills the flashing-square artifact during
     fast horizontal drags. */
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: content;
}
.yt-dj-mood-chip {
  appearance: none;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.06em;
  color: rgba(244,244,244,0.85);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.yt-dj-mood-chip:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  transform: translateY(-1px);
}
.yt-dj-mood-chip.is-active {
  background: color-mix(in oklab, var(--mood-accent, #ff0050) 70%, #000);
  border-color: color-mix(in oklab, var(--mood-accent, #ff0050) 90%, transparent);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in oklab, var(--mood-accent, #ff0050) 30%, transparent);
}

/* ============================================================
   PLAYING-NEXT PILL (slide-in twice per track)
   ----------------------------------------------------------
   Sits at the TOP of the frame so it doesn't collide with the
   DJ corner at the bottom. Hidden by default; the controller
   adds .is-visible to slide it in from above, removes the class
   to slide it out. The CSS handles all the motion + easing.
============================================================ */
.yt-next-pill {
  position: absolute;
  top: 12px; left: 50%;
  transform: translate(-50%, -130%);
  z-index: 7;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in oklab, var(--mood-accent, #fff) 38%, rgba(255,255,255,0.12));
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #f4f4f4;
  white-space: nowrap;
  max-width: min(80%, 480px);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55),
              0 0 22px color-mix(in oklab, var(--mood-accent, #fff) 25%, transparent);
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.32s ease;
}
.yt-next-pill.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
.yt-next-pill-label {
  font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--mood-accent, #f4f4f4) 90%, #fff);
  font-weight: 700;
  flex-shrink: 0;
}
.yt-next-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

/* ----- Mobile tightening ----- */
@media (max-width: 520px) {
  .yt-dj-bar {
    padding: 6px 8px;
    gap: 8px;
    margin: 6px 0 8px;
  }
  .yt-dj-auto-label { display: none; }   /* keep just the toggle on phones */
  .yt-dj-mood-label { padding: 3px 7px; font-size: 9px; }
  .yt-dj-mood-chip { padding: 4px 9px; font-size: 9.5px; }
  .yt-next-pill {
    top: 8px;
    font-size: 10.5px;
    padding: 5px 10px;
    max-width: calc(100% - 20px);
  }
  .yt-next-pill-label { font-size: 9px; letter-spacing: 0.12em; }
}

.yt-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.yt-foot a {
  color: color-mix(in oklab, var(--text) 75%, transparent);
  text-decoration: none;
}
.yt-foot a:hover { color: var(--text); text-decoration: underline; }
.yt-card.is-error .yt-error {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

/* YouTube footer: stacked stats on left, prompt button on right */
.yt-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.yt-foot-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Hard nowrap guard — even if a title slips past the JS truncator,
   the foot must never flex-wrap and bump the AutoPlay / Skip /
   karaoke-action cluster down to a second line. Ellipsis on the
   yt-foot-meta row is the last line of defense. */
.yt-foot { flex-wrap: nowrap; min-width: 0; }
.yt-foot-left { min-width: 0; flex: 1 1 auto; }
.yt-foot-meta {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yt-foot-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.yt-foot-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Big gas-pump odometer for view count */
.yt-odometer {
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1;
  /* Avenir Next Ultra Light — the closest "thin" weight in Avenir Next.
     Falls back through the platform sans stack for non-mac users. */
  font-family: "Avenir Next", "AvenirNext-UltraLight", "Avenir", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 200; /* UltraLight / Thin */
  letter-spacing: -0.01em;
  color: var(--text);
}
.yt-odometer-num {
  font-size: 38px;
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  /* Stable digit width so the count-up doesn't jitter the layout. */
  white-space: nowrap;
  /* Terracotta-Firefly gold — the views count is the most-scanned metric
     on the card so it gets the warm gold treatment that pops on every
     theme. Matches the gold accent used on hero headlines. */
  background: linear-gradient(
    180deg,
    #f4cd6e 0%,
    #e5b454 60%,
    #b9843a 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: text-shadow 0.4s ease;
}
.yt-odometer.is-done .yt-odometer-num {
  text-shadow: 0 0 18px color-mix(in oklab, #e5b454 42%, transparent);
}
.yt-odometer-label {
  /* Avenir Next Medium / "Book"-equivalent — used for the "views" tag and date. */
  font-family: "Avenir Next", "AvenirNext-Medium", "Avenir", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  position: relative;
  top: -2px;
}

.yt-date {
  font-family: "Avenir Next", "AvenirNext-Medium", "Avenir", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500; /* Avenir Next Medium ≈ Book in weight */
  font-size: 13px;
  color: color-mix(in oklab, var(--text) 70%, transparent);
  letter-spacing: 0.01em;
  margin-top: 2px;
}

.yt-open {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in oklab, var(--text) 60%, transparent);
  text-decoration: none;
  margin-top: 4px;
  align-self: flex-start;
}
.yt-open:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 520px) {
  .yt-odometer-num { font-size: 30px; }
  .yt-foot { align-items: stretch; }
  .yt-foot-right { width: 100%; justify-content: space-between; }
}
.yt-prompt-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.18s ease;
}
.yt-prompt-btn:hover {
  background: var(--panel);
  border-color: color-mix(in oklab, var(--brand, #d97706) 50%, var(--line));
  color: var(--brand, #d97706);
}
.yt-prompt-btn svg { flex-shrink: 0; }
.yt-prompt-btn span { white-space: nowrap; }

/* YouTube recommendations sidebar */
.yt-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  height: 100vh;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -4px 0 24px color-mix(in oklab, var(--text) 8%, transparent);
  display: flex;
  flex-direction: column;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.yt-sidebar:not(.is-dismissing) {
  transform: translateX(0);
}
.yt-sidebar.is-dismissing {
  transform: translateX(100%);
  transition: transform 0.25s ease-in;
}
.yt-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.yt-sidebar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  margin: 0;
}
.yt-sidebar-close {
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.18s ease;
}
.yt-sidebar-close:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--text) 10%, transparent);
}
.yt-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.yt-sidebar-loading,
.yt-sidebar-error,
.yt-sidebar-empty {
  text-align: center;
  padding: 40px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.yt-rec-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.yt-rec-item:hover {
  background: color-mix(in oklab, var(--text) 5%, transparent);
}
.yt-rec-thumb {
  position: relative;
  width: 120px;
  height: 68px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.yt-rec-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.yt-rec-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.8);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.yt-rec-item:hover .yt-rec-play {
  opacity: 1;
}
.yt-rec-info {
  flex: 1;
  min-width: 0;
}
.yt-rec-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yt-rec-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}
.yt-rec-channel {
  font-weight: 600;
  color: color-mix(in oklab, var(--text) 70%, transparent);
}
.yt-rec-views {
  color: #00d4ff;
  font-weight: 600;
  text-shadow: 0 0 4px color-mix(in oklab, #00d4ff 30%, transparent);
}
.yt-rec-duration {
  opacity: 0.7;
}

@media (max-width: 640px) {
  .yt-sidebar {
    width: 100vw;
  }
  .yt-rec-item {
    padding: 8px;
  }
  .yt-rec-thumb {
    width: 90px;
    height: 51px;
  }
  .yt-rec-title {
    font-size: 12px;
  }
}

/* ============================================================
   FINANCE CARD (stocks + crypto + indices)
   ============================================================ */
.finance-card {
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 22px 24px 18px;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.5s ease both;
}
.finance-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(620px 260px at 90% -20%, color-mix(in oklab, var(--accent-2) 22%, transparent), transparent 60%);
  pointer-events: none;
}
.f-head {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  position: relative;
}
.f-head .f-name {
  font-family: var(--font-display); font-style: var(--display-italic); font-weight: var(--display-weight);
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -0.01em;
}
.f-head .f-sym {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.f-head .f-sym .tag {
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in oklab, var(--text) 5%, transparent);
  border: 1px solid var(--line);
  color: var(--muted);
}
.f-head .f-sym .mstate { color: var(--accent); }
.f-head .f-sym .mstate.closed { color: var(--muted-2); }
.f-price { text-align: right; }
.f-price .px {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(30px, 4vw, 48px); line-height: 1; color: var(--text);
}
.f-price .ch {
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in oklab, var(--text) 5%, transparent);
  border: 1px solid var(--line);
}
.f-price .ch.up   { color: #3ea864; border-color: color-mix(in oklab, #3ea864 40%, transparent); background: color-mix(in oklab, #3ea864 12%, transparent); }
.f-price .ch.down { color: #d64a4a; border-color: color-mix(in oklab, #d64a4a 40%, transparent); background: color-mix(in oklab, #d64a4a 12%, transparent); }

.f-range-tabs {
  display: inline-flex; padding: 4px; width: fit-content;
  background: color-mix(in oklab, var(--bg) 45%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.f-range-tabs button {
  border: 0; background: transparent; color: var(--muted);
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 600;
  font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
  transition: background 0.18s, color 0.18s;
}
.f-range-tabs button:hover { color: var(--text); }
.f-range-tabs button[aria-selected="true"] {
  color: var(--on-brand);
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 4px 14px color-mix(in oklab, var(--brand) 26%, transparent);
}

.f-chart {
  position: relative;
  height: 260px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 40%, transparent), color-mix(in oklab, var(--bg) 70%, transparent));
}
.f-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.f-chart .grid-line { stroke: color-mix(in oklab, var(--text) 7%, transparent); stroke-width: 1; stroke-dasharray: 3 6; }
.f-chart .axis-lbl { fill: var(--muted-2); font-family: var(--font-mono); font-size: 10.5px; }
.f-chart .area-up   { fill: url(#f-grad-up); }
.f-chart .area-down { fill: url(#f-grad-down); }
.f-chart .line-up   { stroke: #3ea864; stroke-width: 2.2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.f-chart .line-down { stroke: #d64a4a; stroke-width: 2.2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.f-chart .crosshair { stroke: color-mix(in oklab, var(--text) 25%, transparent); stroke-width: 1; stroke-dasharray: 2 3; }
.f-chart .tip-bg  { fill: color-mix(in oklab, var(--bg) 85%, transparent); stroke: var(--line); }
.f-chart .tip-txt { fill: var(--text); font-family: var(--font-mono); font-size: 11px; }

.f-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.f-stat {
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
}
.f-stat .k { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.06em; text-transform: uppercase; }
.f-stat .v { margin-top: 4px; font-size: 15.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.f-stat .s { margin-top: 2px; font-size: 11.5px; color: var(--muted); }

.f-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
}
.f-foot a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted-2); }
.f-foot a:hover { color: var(--text); }

.f-error {
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 3%, transparent);
  color: var(--muted);
  border-radius: 10px; font-size: 13px;
}

.f-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--bg) 50%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  color: var(--muted); font-family: var(--font-mono); font-size: 12px;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0; transition: opacity 0.2s ease;
}
.f-chart.loading .f-loading { opacity: 1; }

/* ============================================================
   MAP CARD (Leaflet + OSM)
   ============================================================ */
.map-card {
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 22px 24px 18px;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.5s ease both;
}
.map-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(580px 240px at 90% -20%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 60%);
  pointer-events: none;
}
.m-head {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  position: relative;
}
.m-head .m-title {
  font-family: var(--font-display); font-style: var(--display-italic); font-weight: var(--display-weight);
  font-size: clamp(22px, 2.5vw, 30px); line-height: 1.15; letter-spacing: -0.01em;
}
.m-head .m-sub {
  margin-top: 4px;
  font-size: 13px; color: var(--muted);
  font-family: var(--font-mono);
}
.m-head .m-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px; font-family: var(--font-mono);
  background: color-mix(in oklab, var(--brand) 16%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--brand) 28%, transparent);
}

.m-tabs {
  display: inline-flex; padding: 4px; width: fit-content;
  background: color-mix(in oklab, var(--bg) 45%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.m-tabs button {
  border: 0; background: transparent; color: var(--muted);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 500;
  transition: background 0.18s, color 0.18s;
}
.m-tabs button:hover { color: var(--text); }
.m-tabs button[aria-selected="true"] {
  color: var(--on-brand);
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 4px 14px color-mix(in oklab, var(--brand) 26%, transparent);
}

.m-canvas {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #1a1f24;
}
.m-canvas .leaflet-container {
  width: 100%; height: 100%;
  background: #0b0e12;
  font-family: var(--font-sans);
}
/* Re-skin Leaflet chrome to match DNA45 */
.leaflet-control-zoom a {
  background: color-mix(in oklab, var(--bg) 80%, transparent) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  backdrop-filter: blur(6px);
}
.leaflet-control-zoom a:hover { background: var(--panel) !important; }
.leaflet-control-attribution {
  background: color-mix(in oklab, var(--bg) 80%, transparent) !important;
  color: var(--muted-2) !important;
  font-family: var(--font-mono); font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-popup-content-wrapper {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(10px);
}
.leaflet-popup-content-wrapper .leaflet-popup-content {
  font-family: var(--font-sans); font-size: 13px;
  margin: 10px 14px;
}
.leaflet-popup-content b { color: var(--text); }
.leaflet-popup-tip { background: var(--panel) !important; }

.m-places {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.m-place {
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s;
}
.m-place:hover {
  border-color: color-mix(in oklab, var(--brand) 40%, var(--line));
  transform: translateY(-1px);
}
.m-place .nm { font-weight: 600; font-size: 13.5px; color: var(--text); }
.m-place .kd { margin-top: 2px; font-size: 11px; color: var(--muted-2); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.m-place .ad { margin-top: 4px; font-size: 12px; color: var(--muted); }

.m-route-summary {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border-radius: 10px;
}
.m-route-summary .k { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.06em; text-transform: uppercase; }
.m-route-summary .v { font-size: 17px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.m-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
}
.m-foot a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted-2); }
.m-foot a:hover { color: var(--text); }

.m-error {
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 3%, transparent);
  color: var(--muted);
  border-radius: 10px; font-size: 13px;
}

/* Custom Leaflet pin (CSS-only, no external assets) */
.dna-pin {
  width: 22px; height: 22px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px color-mix(in oklab, var(--brand) 40%, transparent);
  border: 2px solid #fff;
}
.dna-pin.secondary {
  background: linear-gradient(180deg, var(--accent-2, #e8a5ff), var(--accent));
  box-shadow: 0 4px 10px color-mix(in oklab, var(--accent) 40%, transparent);
}
.dna-pin.endpoint {
  background: linear-gradient(180deg, #ffd48a, #f09433);
  box-shadow: 0 4px 10px color-mix(in oklab, #f09433 40%, transparent);
}

/* ============================================================
   BRAND CHIP — shared "DNA45 <Label>" marker used across cards.
   ============================================================ */
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 4%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}
.brand-chip--kicker {
  font-size: 10.5px;
  padding: 4px 10px 4px 7px;
}
.brand-chip .brand-mark {
  width: 14px; height: 14px;
  object-fit: contain;
  display: inline-block;
  /* Neutralize logo fill to inherit theme tone. */
  filter: drop-shadow(0 0 0 transparent);
  opacity: 0.95;
}
.brand-chip__text { color: var(--text); }

/* Contextual overrides where cards already position the chip. */
.s-pill.brand-chip,
.m-pill.brand-chip,
.k-kicker.brand-chip { margin-left: auto; }

/* ============================================================
   KNOWLEDGE CARD (Wikipedia-powered entity card)
   ============================================================ */
.know-card {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.5s ease both;
}
.know-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(720px 320px at -10% -10%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 55%),
    radial-gradient(520px 240px at 110% 110%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 55%);
  pointer-events: none;
}
.know-card > * { position: relative; z-index: 1; }

/* Left rail: image + infobox */
.k-rail { display: flex; flex-direction: column; gap: 14px; }
.k-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  box-shadow: 0 12px 40px color-mix(in oklab, #000 30%, transparent);
}
.k-image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.k-image-wrap:hover img { transform: scale(1.03); }
.k-image-wrap .k-img-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in oklab, #000 40%, transparent));
  pointer-events: none;
}
.k-image-caption {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.9;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.k-infobox {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border-radius: 14px;
  overflow: hidden;
}
.k-infobox .k-ib-title {
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  background: color-mix(in oklab, var(--text) 4%, transparent);
  border-bottom: 1px solid var(--line);
}
.k-ib-row {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px dashed color-mix(in oklab, var(--text) 6%, transparent);
  align-items: start;
  font-size: 13px;
}
.k-ib-row:last-child { border-bottom: 0; }
.k-ib-row .k  {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 1px;
}
.k-ib-row .v  { color: var(--text); line-height: 1.45; }

/* Right rail: headline, extract, key facts, sections, related */
.k-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.k-head .k-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-2);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--text) 4%, transparent);
}
.k-head .k-title {
  margin-top: 10px;
  font-family: var(--font-display); font-style: var(--display-italic); font-weight: var(--display-weight);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05; letter-spacing: -0.015em;
  color: var(--text);
}
.k-head .k-desc {
  margin-top: 8px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.4;
}

.k-extract {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
}
.k-extract p { margin: 0 0 10px 0; }
.k-extract p:last-child { margin-bottom: 0; }

/* Curated bio (DNA45 narrative intro) + Wiki definition toggle. */
.k-extract-curated { display: flex; flex-direction: column; gap: 10px; }
.k-extract-curated .k-bio-curated p:first-child::first-letter {
  font-size: 1.6em;
  font-weight: 600;
  color: var(--brand);
  margin-right: 2px;
}
.k-bio-toggle {
  align-self: flex-start;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent);
  color: var(--brand);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.k-bio-toggle:hover {
  background: color-mix(in oklab, var(--brand) 22%, transparent);
  border-color: color-mix(in oklab, var(--brand) 55%, transparent);
}
.k-bio-toggle:active { transform: translateY(1px); }

.k-section-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}

.k-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.k-fact {
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border-radius: 12px;
  padding: 10px 13px;
  transition: border-color 0.18s;
}
.k-fact:hover { border-color: color-mix(in oklab, var(--brand) 35%, var(--line)); }
.k-fact .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.k-fact .v { margin-top: 4px; font-size: 14px; color: var(--text); line-height: 1.35; }

.k-sections {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.k-sec-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  color: var(--text);
  font-size: 12.5px;
  text-decoration: none;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
.k-sec-chip:hover {
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  transform: translateY(-1px);
}
.k-sec-chip .n { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); }

.k-related { display: flex; flex-wrap: wrap; gap: 6px; }
.k-rel-pill {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 22%, transparent), color-mix(in oklab, var(--brand) 10%, transparent));
  border: 1px solid color-mix(in oklab, var(--brand) 35%, transparent);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  transition: transform 0.18s, filter 0.18s;
}
.k-rel-pill:hover { transform: translateY(-1px); filter: brightness(1.08); }

.k-actions { display: flex; gap: 8px; margin-top: 6px; }
.k-word { opacity: 0; transition: opacity 0.05s ease-out, color 0.18s ease-out; }
.k-word.is-spoken { opacity: 1; color: var(--brand); text-shadow: 0 0 10px color-mix(in oklab, var(--brand) 30%, transparent); }
.k-word.is-past { opacity: 1; color: inherit; text-shadow: none; }
.k-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
  margin-top: 4px;
}
.k-foot a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted-2); }
.k-foot a:hover { color: var(--text); }

/* Legacy red .k-error kept only as a safety net — overridden to render as
   a calm warm-toned notice so even if something slips through, the UI
   never flashes red at the user. */
.k-error {
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 3%, transparent);
  color: var(--danger);
  border-radius: 10px; font-size: 13px;
}

@media (max-width: 860px) {
  .know-card { grid-template-columns: 1fr; padding: 22px; gap: 18px; }
  .k-image-wrap { aspect-ratio: 16 / 10; max-height: 340px; }
}

/* Mobile-only wiki image fix: portraits of people get cropped weirdly
   at 16/10. Drop to a portrait ratio centered on the face (top half)
   and cap the height so the whole card stays scrollable. */
@media (max-width: 640px) {
  .k-image-wrap {
    aspect-ratio: 4 / 5;
    max-height: 360px;
    margin: 0 auto;
    max-width: 320px;
  }
  .k-image-wrap img {
    object-fit: cover;
    object-position: center 22%;
  }
  .k-image-caption { font-size: 12px; left: 10px; right: 10px; bottom: 8px; }
}

/* ============================================================
   LONG QUERY DISPLAY — collapse/compact treatments for long asks
   ============================================================ */
.q-block--compact .q-text {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5;
  max-width: 820px;
}
.q-block--collapsed .q-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 840px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.q-block--collapsed.q-block--open .q-text {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
  color: var(--text);
  font-size: 15px;
}
.q-toggle {
  align-self: flex-start;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 4%, transparent);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
}
.q-toggle:hover { color: var(--text); border-color: color-mix(in oklab, var(--brand) 40%, var(--line)); }

/* ============================================================
   EXTRAS CARD SHELL — shared shell for timer/calendar/games/bible
   ============================================================ */
.extras-card {
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
  animation: fadeUp 0.5s ease both;
  margin: 10px 0;
}
.extras-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(640px 280px at -10% -10%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 55%),
    radial-gradient(420px 220px at 110% 110%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 55%);
  pointer-events: none;
}
.extras-card > * { position: relative; z-index: 1; }
.extras-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.extras-title {
  font-family: var(--font-display); font-style: var(--display-italic); font-weight: var(--display-weight);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1; letter-spacing: -0.01em;
  color: var(--text);
}
.extras-title .muted { color: var(--muted-2); font-weight: 500; }
.extras-sub {
  margin-top: 4px;
  color: var(--muted); font-size: 13px;
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
.extras-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-2);
  margin-top: 16px; padding-top: 12px;
  border-top: 1px dashed color-mix(in oklab, var(--text) 8%, transparent);
}
.extras-foot .foot-left { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extras-foot .foot-sep { margin: 0 4px; color: var(--line-strong); }

/* Source-of-truth brand badges in card footers (Spotify, TheMealDB, TMDB…).
   Inline SVG + wordmark pinned alongside the card's primary label so users
   always know where the data comes from. */
.foot-brand {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--muted);
  vertical-align: middle;
}
.foot-brand svg { flex: 0 0 auto; display: block; }
.foot-brand[data-brand="spotify"] span { color: #1DB954; font-weight: 600; }
.foot-brand[data-brand="mealdb"]  span { color: #e89f3d; font-weight: 600; }
.foot-brand[data-brand="tmdb"]    span { color: #01b4e4; font-weight: 600; }
/* Card-footer links: clean, unadorned, just a subtle color lift on hover.
   No underlines, no dotted borders — keeps the footer calm. */
.extras-foot a { color: var(--muted); text-decoration: none; border: none; }
.extras-foot a:hover { color: var(--text); text-decoration: none; }

/* Same no-underline rule for any footer links inside app.js cards. */
.w-foot a, .s-foot a, .f-foot a, .m-foot a, .k-foot a { text-decoration: none; border: none; color: var(--muted); }
.w-foot a:hover, .s-foot a:hover, .f-foot a:hover, .m-foot a:hover, .k-foot a:hover { color: var(--text); }

/* Source rows and favroll items: never decorate the anchor. */
.fact-source, .fact-favroll-item, .fact-sources-more a { text-decoration: none; }

/* Universal DNA45.com brand stamp — bottom-right of every card footer. */
.dna-stamp {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand) !important;
  text-decoration: none !important;
  border: none !important;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  transition: background 0.18s, color 0.18s, transform 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.dna-stamp:hover {
  background: color-mix(in oklab, var(--brand) 22%, transparent);
  transform: translateY(-1px);
}

/* Small action button shared across extras-cards (image-gen, etc.) */
.extras-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 5%, transparent);
  color: var(--muted);
  border-radius: 999px;
  font-size: 12px; font-family: var(--font-mono);
  letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.extras-btn:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--brand) 16%, transparent);
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
  transform: translateY(-1px);
}
.extras-btn svg { flex-shrink: 0; }

/* ============================================================
   Image-generation card (Pollinations / Flux)
   ============================================================ */
.imggen-card { padding: 20px; }
.imggen-stage { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.imggen-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 25%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 60%),
    radial-gradient(ellipse at 70% 80%, color-mix(in oklab, var(--accent-2) 16%, transparent), transparent 60%),
    color-mix(in oklab, var(--panel) 70%, #000 20%);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  box-shadow: 0 10px 40px -12px rgba(0,0,0,0.5);
}
.imggen-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.imggen-frame.is-ready .imggen-img { opacity: 1; }
.imggen-skel {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
}
.imggen-skel-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    color-mix(in oklab, var(--brand) 18%, transparent) 45%,
    color-mix(in oklab, var(--accent-2) 18%, transparent) 55%,
    transparent 80%
  );
  background-size: 250% 100%;
  animation: imggen-shimmer 2.4s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.9;
}
.imggen-skel-label {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--text) 15%, transparent);
  background: color-mix(in oklab, var(--panel) 80%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@keyframes imggen-shimmer {
  0%   { background-position: 250% 0; }
  100% { background-position: -50% 0; }
}
.imggen-frame.is-loading .imggen-img { opacity: 0.35; filter: blur(2px); }
.imggen-frame.is-loading::after {
  content: "Re-imagining…";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brand);
  background: color-mix(in oklab, var(--panel) 30%, transparent);
  backdrop-filter: blur(2px);
}
.imggen-error {
  padding: 28px 20px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--muted);
}
.imggen-card.is-error { padding: 0; }

.imggen-frame.is-errored {
  background: color-mix(in oklab, var(--panel) 80%, #000 20%);
}
.imggen-frame.is-errored::after {
  content: "Couldn't reach the image service";
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.imggen-tools {
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* ============================================================
   TIMER / STOPWATCH  —  premium redesign
   ------------------------------------------------------------
   - Hero digits in the display font, tabular-nums, thin-book weight
   - Dial ring has two tracks (ambient + arc) with a subtle inner
     glow that breathes while running.
   - Pill-shaped controls: primary = solid brand, ghost = outline.
   ============================================================ */
.timer-card,
.stopwatch-card {
  padding: 28px 28px 22px;
}
.timer-card .extras-head,
.stopwatch-card .extras-head { margin-bottom: 22px; }

.timer-card .t-stage {
  position: relative;
  display: grid; place-items: center;
  margin: 4px auto 22px;
  padding: 8px 0;
}
.t-ring {
  width: clamp(230px, 34vw, 300px);
  height: auto;
  color: var(--brand);
  display: block;
  filter: drop-shadow(0 16px 48px color-mix(in oklab, var(--brand) 18%, transparent));
}
.t-ring-bg { stroke: color-mix(in oklab, var(--text) 10%, transparent); }
.t-ring-fg {
  transition: stroke-dashoffset 0.45s cubic-bezier(0.22, 0.8, 0.32, 1);
  filter: drop-shadow(0 0 14px color-mix(in oklab, var(--brand) 45%, transparent));
}
.timer-card:not(.is-paused):not(.is-done) .t-ring-fg {
  animation: t-breathe 3.6s ease-in-out infinite;
}
@keyframes t-breathe {
  0%, 100% { filter: drop-shadow(0 0 12px color-mix(in oklab, var(--brand) 40%, transparent)); }
  50%      { filter: drop-shadow(0 0 26px color-mix(in oklab, var(--brand) 65%, transparent)); }
}
.timer-card.is-done .t-ring-fg {
  color: var(--accent);
  animation: t-doneFlash 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 26px color-mix(in oklab, var(--accent) 60%, transparent));
}
@keyframes t-doneFlash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.t-digits {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -58%);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(38px, 5.2vw, 58px);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1;
  text-shadow: 0 2px 28px color-mix(in oklab, var(--brand) 18%, transparent);
}
.timer-card.is-done .t-digits {
  color: var(--accent);
  text-shadow: 0 2px 30px color-mix(in oklab, var(--accent) 35%, transparent);
}
.t-caption {
  position: absolute; top: 64%; left: 50%;
  transform: translate(-50%, 0);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted-2);
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--panel) 60%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

.t-controls {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 4px;
}

/* Premium button: pill, subtle shadow, brand glow on hover */
.t-btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 108px;
  padding: 11px 22px;
  border: 1px solid var(--line-strong);
  background: color-mix(in oklab, var(--text) 3%, transparent);
  color: var(--text);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease,
              background 0.2s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 0 color-mix(in oklab, var(--text) 6%, transparent) inset;
}
.t-btn:hover {
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -12px color-mix(in oklab, var(--brand) 60%, transparent);
}
.t-btn:active { transform: translateY(0); }
.t-btn--primary {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--brand) 86%, #fff 8%),
    color-mix(in oklab, var(--brand) 94%, #000 6%));
  border-color: transparent;
  color: var(--on-brand);
  box-shadow:
    0 10px 24px -10px color-mix(in oklab, var(--brand) 60%, transparent),
    0 1px 0 rgba(255,255,255,0.18) inset;
}
.t-btn--primary:hover {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--brand-2) 90%, #fff 10%),
    color-mix(in oklab, var(--brand) 90%, #000 8%));
  color: var(--on-brand);
}

/* Stopwatch — hero digits, thin display font, centered chrome */
.stopwatch-card .t-stage {
  position: relative;
  padding: 22px 0 14px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.stopwatch-card .t-digits.sw-digits {
  position: static; transform: none;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(58px, 10vw, 108px);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  text-shadow: 0 4px 40px color-mix(in oklab, var(--brand) 22%, transparent);
}
.stopwatch-card .t-caption {
  position: static; transform: none;
  margin-top: 2px;
}

/* Lap list — luxe rows with divider rhythm instead of boxed borders */
.sw-laps {
  list-style: none;
  margin: 18px 0 0;
  padding: 4px 0 0;
  display: flex; flex-direction: column;
  max-height: 220px; overflow-y: auto;
  border-top: 1px solid var(--line);
}
.sw-laps li {
  display: grid; grid-template-columns: 48px 1fr 1fr; gap: 16px;
  align-items: baseline;
  padding: 12px 6px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
}
.sw-laps li:last-child { border-bottom: 0; }
.sw-laps li .n {
  color: var(--muted-2);
  font-family: var(--font-display); font-weight: 300;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.sw-laps li .d { color: var(--text); font-weight: 500; }
.sw-laps li .t { color: var(--muted); text-align: right; }

/* ============================================================
   CALENDAR
   ============================================================ */
.cal-card { padding: 24px; }
.cal-today {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: start;
}
.cal-today-left { min-width: 0; }
.cal-weekday {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2);
}
.cal-day-big {
  font-family: var(--font-display); font-style: var(--display-italic); font-weight: var(--display-weight);
  font-size: clamp(80px, 12vw, 140px);
  line-height: 0.95;
  color: var(--text);
  margin-top: 4px;
  display: flex; align-items: flex-start; gap: 4px;
}
.cal-day-big sup { font-size: 0.38em; color: var(--muted); margin-top: 0.15em; }
.cal-month-year {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-style: italic;
  color: var(--text); margin-top: -6px;
}
.cal-month-year span { color: var(--muted); font-weight: 400; }

.cal-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;
}
.cal-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 4%, transparent);
  font-size: 12px;
  font-family: var(--font-mono); letter-spacing: 0.03em;
  color: var(--muted);
}
.cal-chip b { color: var(--text); font-weight: 600; }

.cal-holidays {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.cal-holiday {
  padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 30%, transparent), color-mix(in oklab, var(--accent) 14%, transparent));
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  color: var(--text); font-size: 12px;
}

.cal-meta-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 14px;
}
.cal-meta-grid > div {
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.cal-meta-grid .k {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2);
}
.cal-meta-grid .v { font-family: var(--font-mono); font-size: 13px; color: var(--text); }

/* Month grid */
.cal-month-wrap { display: flex; justify-content: center; }
.cal-month {
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border-radius: 14px;
  padding: 14px;
  width: 100%; max-width: 520px;
}
.cal-month--compact { padding: 10px; max-width: 240px; font-size: 12px; }
.cal-month-head h3 {
  margin: 0 0 10px 0;
  font-family: var(--font-display); font-style: italic;
  font-size: 18px; color: var(--text);
}
.cal-month-head h3 span { color: var(--muted-2); font-weight: 500; }
.cal-month--compact .cal-month-head h3 { font-size: 14px; margin-bottom: 6px; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.cal-dow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-2);
  text-align: center; padding: 4px 0;
}
.cal-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--text);
  transition: background 0.18s;
}
.cal-month--compact .cal-cell { font-size: 10px; border-radius: 5px; }
.cal-cell.cal-blank { visibility: hidden; }
.cal-cell.is-weekend { color: var(--muted-2); }
.cal-cell.is-today {
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 55%, transparent), color-mix(in oklab, var(--brand) 30%, transparent));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--brand) 50%, transparent) inset, 0 4px 14px color-mix(in oklab, var(--brand) 30%, transparent);
}

.cal-year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.cal-month-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;
}

@media (max-width: 780px) {
  .cal-today { grid-template-columns: 1fr; }
  .cal-meta-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   GAMES
   ============================================================ */
.game-card { padding: 20px; }
.game-stage { display: flex; flex-direction: column; gap: 12px; }
.game-placeholder {
  padding: 40px; text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 12px;
}

/* Snake */
.snake-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.snake-hud {
  display: flex; gap: 18px; align-items: center;
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.snake-canvas {
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 100%;
  outline: none;
}
.snake-canvas:focus { border-color: color-mix(in oklab, var(--brand) 50%, var(--line)); }
.snake-hint { font-size: 12px; color: var(--muted-2); font-family: var(--font-mono); }

/* Tic-Tac-Toe */
.ttt-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ttt-hud { display: flex; gap: 12px; align-items: center; }
.ttt-turn { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.ttt-board {
  display: grid; grid-template-columns: repeat(3, 72px);
  grid-template-rows: repeat(3, 72px);
  gap: 6px;
}
.ttt-cell {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 4%, transparent);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 34px; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.12s, background 0.18s, border-color 0.18s;
}
.ttt-cell:hover { transform: scale(1.03); border-color: color-mix(in oklab, var(--brand) 40%, var(--line)); }
.ttt-cell.is-x { color: var(--brand); }
.ttt-cell.is-o { color: var(--accent); }
.ttt-cell.is-win { box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 60%, transparent) inset; }
.ttt-hint { font-size: 12px; color: var(--muted-2); font-family: var(--font-mono); }

/* Truth or Dare */
.tod-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px; }
.tod-card {
  width: 100%; max-width: 560px;
  min-height: 180px;
  padding: 28px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 45%, transparent), color-mix(in oklab, var(--text) 3%, transparent));
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  transition: background 0.4s, border-color 0.4s;
}
.tod-card.is-truth { background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 20%, transparent), color-mix(in oklab, var(--brand) 6%, transparent)); border-color: color-mix(in oklab, var(--brand) 35%, var(--line)); }
.tod-card.is-dare  { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 22%, transparent), color-mix(in oklab, var(--accent) 6%, transparent)); border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
.tod-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2);
}
.tod-text {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.35; color: var(--text);
}
.tod-btns { display: flex; gap: 10px; }
.tod-hint { font-size: 11px; color: var(--muted-2); font-family: var(--font-mono); }

/* Sudoku */
.sud-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sud-hud { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sud-level { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.sud-msg { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.sud-msg.is-ok  { color: #4ee1a0; }
.sud-msg.is-err { color: #ff6b8a; }
.sud-grid {
  display: grid; grid-template-columns: repeat(9, 36px); grid-template-rows: repeat(9, 36px);
  gap: 0;
  border: 2px solid color-mix(in oklab, var(--text) 40%, transparent);
  border-radius: 8px; overflow: hidden;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
}
.sud-cell {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  font-family: var(--font-mono); font-size: 16px; font-weight: 500;
  color: var(--text);
  background: transparent;
  text-align: center;
  outline: none; appearance: none; -moz-appearance: textfield;
}
.sud-cell.bt { border-top-width: 2px;    border-top-color: color-mix(in oklab, var(--text) 40%, transparent); }
.sud-cell.bl { border-left-width: 2px;   border-left-color: color-mix(in oklab, var(--text) 40%, transparent); }
.sud-cell.bb { border-bottom-width: 2px; border-bottom-color: color-mix(in oklab, var(--text) 40%, transparent); }
.sud-cell.br { border-right-width: 2px;  border-right-color: color-mix(in oklab, var(--text) 40%, transparent); }
.sud-cell.is-given { background: color-mix(in oklab, var(--text) 6%, transparent); font-weight: 700; }
.sud-cell:focus { background: color-mix(in oklab, var(--brand) 18%, transparent); }
.sud-cell.sud-skel { background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--text) 6%, transparent), transparent); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sud-hint { font-size: 11px; color: var(--muted-2); font-family: var(--font-mono); }

/* Chess */
.chess-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chess-hud { display: flex; gap: 12px; align-items: center; width: 100%; max-width: 440px; }
.chess-turn { flex: 1; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.chess-board-wrap { width: 100%; max-width: 440px; }
.chess-board { width: 100%; }
.chess-hint { font-size: 11px; color: var(--muted-2); font-family: var(--font-mono); }

/* Dino */
.dino-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.dino-frame {
  width: 100%; aspect-ratio: 16 / 7; min-height: 300px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff;
}
.dino-hint { font-size: 11px; color: var(--muted-2); font-family: var(--font-mono); text-align: center; }

/* ============================================================
   TETRIS — colorful canvas build.
   Board left, HUD + next-preview sidebar right.
   On phones the sidebar collapses into a row above the board.
   ============================================================ */
.tetris-wrap {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  align-items: stretch;
}
.tetris-stage {
  display: grid;
  grid-template-columns: minmax(180px, 360px) 160px;
  gap: 16px;
  align-items: start;
  justify-content: center;
}
.tetris-board {
  width: 100%;
  max-width: 360px;
  border-radius: 14px;
  background: #0a0c16;
  box-shadow:
    0 0 0 1px var(--line),
    0 20px 60px -24px color-mix(in oklab, var(--brand) 38%, transparent),
    inset 0 0 60px rgba(0, 0, 0, 0.55);
  touch-action: none;
}
.tetris-side {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.tetris-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in oklab, var(--panel) 65%, transparent);
}
.tetris-stat-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.tetris-stat-val {
  font-family: "GT Maru", "Inter", system-ui, sans-serif;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.05;
}
.tetris-next {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--panel) 60%, transparent);
  align-items: center;
}
.tetris-next .tetris-stat-lbl { align-self: flex-start; }
.tetris-next-canvas {
  width: 112px; height: 112px;
  border-radius: 8px;
  background: #0a0c16;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.5);
}
.tetris-side-btns { display: flex; gap: 8px; }
.tetris-side-btns .t-btn { flex: 1; }

/* D-pad layout — up centred on top, then ← ↓ → in the middle,
   and a full-width DROP bar underneath. Hidden on desktop
   (keyboard controls are enough) and revealed on mobile. */
.tetris-pad {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    ".     up     ."
    "left  down   right"
    "hard  hard   hard";
  gap: 8px;
  max-width: 320px;
  margin: 0 auto;
  width: 100%;
}
.tetris-key {
  appearance: none;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  color: var(--text);
  padding: 14px 0;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 400;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.16s ease, border-color 0.16s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tetris-key:active {
  transform: translateY(1px);
  background: color-mix(in oklab, var(--brand) 22%, transparent);
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
}
.tetris-key--up    { grid-area: up; }
.tetris-key--left  { grid-area: left; }
.tetris-key--down  { grid-area: down; }
.tetris-key--right { grid-area: right; }
.tetris-key--hard {
  grid-area: hard;
  background: linear-gradient(135deg, #22d3ee 0%, #c084fc 50%, #f87171 100%);
  color: #0b0e18;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.16em;
  border-color: transparent;
  padding: 14px 0;
}

/* Hide the game-over overlay when the <div> carries the
   `hidden` attribute. Our CSS `display: flex` above otherwise
   overrides the user-agent default that `hidden` sets. */
.tetris-over[hidden] { display: none !important; }
.tetris-hint {
  font-size: 11px;
  color: var(--muted-2);
  font-family: var(--font-mono);
  text-align: center;
  line-height: 1.5;
}
.tetris-over {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 12, 22, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  z-index: 2;
}
.tetris-over-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 28px;
  border: 1px solid color-mix(in oklab, var(--brand) 35%, var(--line));
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel) 85%, transparent);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6);
}
.tetris-over-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--display-weight);
  font-size: 28px;
  color: var(--text);
}
.tetris-over-score {
  font-family: "GT Maru", "Inter", sans-serif;
  font-weight: 300;
  font-size: 44px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #22d3ee 0%, #c084fc 55%, #f87171 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Mobile: stack sidebar into a compact top strip. ---- */
@media (max-width: 640px) {
  .tetris-stage {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tetris-side {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 8px;
    align-items: stretch;
  }
  .tetris-stat { padding: 6px 10px; }
  .tetris-stat-val { font-size: 18px; }
  .tetris-next { flex-direction: row; align-items: center; padding: 6px 8px; gap: 8px; }
  .tetris-next-canvas { width: 64px; height: 64px; }
  .tetris-side-btns {
    grid-column: 1 / -1;
    order: 5;
  }
  .tetris-board { max-width: 100%; }
  .tetris-pad   { display: grid; }
}

/* Touch devices with no hover — still show the pad even if the
   viewport is wider than 640px (iPad portrait, folded phones). */
@media (hover: none) and (pointer: coarse) {
  .tetris-pad { display: grid; }
}

/* 2048 */
.g2048-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.g2048-hud { display: flex; gap: 12px; align-items: center; }
.g2048-score { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.g2048-board {
  display: grid; grid-template-columns: repeat(4, 76px); grid-template-rows: repeat(4, 76px);
  gap: 8px; padding: 10px;
  background: color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: 12px;
}
.g2048-cell {
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: #fff;
  background: color-mix(in oklab, var(--text) 8%, transparent);
}
.g2048-cell[data-v="0"] { color: transparent; }
.g2048-cell[data-v="2"]    { background: #ddd7c8; color: #333; }
.g2048-cell[data-v="4"]    { background: #c9c2b2; color: #333; }
.g2048-cell[data-v="8"]    { background: #f2b179; }
.g2048-cell[data-v="16"]   { background: #f59563; }
.g2048-cell[data-v="32"]   { background: #f67c5f; }
.g2048-cell[data-v="64"]   { background: #f65e3b; }
.g2048-cell[data-v="128"]  { background: #edcf72; font-size: 20px; }
.g2048-cell[data-v="256"]  { background: #edcc61; font-size: 20px; }
.g2048-cell[data-v="512"]  { background: #edc850; font-size: 20px; }
.g2048-cell[data-v="1024"] { background: #edc53f; font-size: 17px; }
.g2048-cell[data-v="2048"] { background: #edc22e; font-size: 17px; }
.g2048-hint { font-size: 11px; color: var(--muted-2); font-family: var(--font-mono); }

/* ============================================================
   BIBLE
   ============================================================ */
.bible-card {
  padding: 32px;
  background:
    radial-gradient(640px 340px at 50% 0%, color-mix(in oklab, var(--brand) 12%, transparent), transparent 60%),
    var(--panel);
}
.bible-body { margin-top: 10px; }
.bible-skel {
  height: 14px; margin: 8px 0;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--text) 8%, transparent), transparent);
  background-size: 200% 100%; border-radius: 6px;
  animation: skel 1.3s linear infinite;
}
.bible-skel.short { width: 50%; }

.bible-pull {
  margin: 0; padding: 20px 28px;
  position: relative;
  text-align: center;
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
}
.bible-quote-mark {
  position: absolute; left: 10px; top: -20px;
  font-family: var(--font-display);
  font-size: 96px; line-height: 1; color: color-mix(in oklab, var(--brand) 35%, transparent);
  font-style: italic;
}
.bible-text {
  font-size: clamp(18px, 2.3vw, 26px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--text);
  margin: 0 auto;
  max-width: 720px;
}
.bible-cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--muted);
  font-style: normal;
}
.bible-trans {
  display: inline-block; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 4%, transparent);
  color: var(--muted-2);
  font-size: 10.5px;
  text-transform: uppercase;
}
.bible-passage {
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  max-width: 720px;
  margin: 0 auto;
}
.bible-line { margin: 0 0 10px 0; }
.bible-num {
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
  vertical-align: super;
}
.bible-error {
  padding: 14px; border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 3%, transparent);
  color: var(--muted);
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   THEMES
   ============================================================
   Each theme sets: palette + fonts + syntax colors + particle color.
   Landmarks/wonders as names.
*/

/* ---------- DNA45 CLASSIC — deep navy + old gold (dark) ----------
   The hero theme: a sovereign, scholarly midnight blue with warm gold
   for a confident, navy/gold contrast. */
[data-theme="dna45-classic"] {
  color-scheme: dark;
  --bg: #060c1a;          /* deep classic navy */
  --bg-soft: #0a1326;
  --panel: rgba(14, 26, 52, 0.82);
  --panel-2: rgba(8, 16, 36, 0.72);
  --line: rgba(212, 167, 58, 0.10);
  --line-strong: rgba(212, 167, 58, 0.20);
  --muted: rgba(228, 222, 200, 0.62);
  --muted-2: rgba(228, 222, 200, 0.42);
  --text: rgba(248, 244, 232, 0.97);
  --brand: #d4a73a;       /* warm classic gold */
  --brand-2: #ecc35a;
  --accent: #2a4f8f;      /* royal sash navy */
  --accent-2: #6688c0;
  --on-brand: #0a1428;
  --font-display: "Instrument Serif", "Playfair Display", Georgia, serif;
  --font-sans:    "GT Maru", "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  --display-italic: italic; --display-weight: 400;
  --particle: rgba(212, 167, 58, 0.62);
  --particle-link: rgba(212, 167, 58, 0.16);
  --code-bg: #050a18; --code-fg: #f1ead0;
  --code-comment: #6b7a96; --code-keyword: #ecc35a; --code-string: #a5d6ff;
  --code-number: #f5d98a; --code-function: #6688c0; --code-op: #d4a73a; --code-tag: #ffb199;
}

/* ---------- HARVARD — crimson, scholarly ---------- */
[data-theme="harvard"] {
  color-scheme: dark;
  --bg: #10070a; --bg-soft: #170a0e;
  --panel: rgba(36, 14, 19, 0.78); --panel-2: rgba(22, 9, 12, 0.72);
  --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.14);
  --muted: rgba(240, 220, 222, 0.6); --muted-2: rgba(240, 220, 222, 0.4);
  --text: rgba(248, 236, 236, 0.96);
  --brand: #a41034; --brand-2: #c8153f;
  --accent: #f1b24a; --accent-2: #e6845b;
  --on-brand: #ffffff;
  --font-display: "Playfair Display", "Instrument Serif", serif;
  --font-sans: "GT Maru", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --display-italic: italic; --display-weight: 500;
  --particle: rgba(200, 21, 63, 0.7);
  --particle-link: rgba(200, 21, 63, 0.18);
  --code-bg: #120609; --code-fg: #f5e6e8;
  --code-comment: #8a5a62; --code-keyword: #f1b24a; --code-string: #8cd17d;
  --code-number: #ffb37a; --code-function: #ff91a4; --code-op: #e6845b; --code-tag: #ff91a4;
}

/* ---------- STANFORD — cardinal red thin headlines on cream (light) ---------- */
[data-theme="stanford"] {
  color-scheme: light;
  --bg: #f7f2ea; --bg-soft: #ffffff;
  --panel: rgba(255, 255, 255, 0.78); --panel-2: rgba(255, 255, 255, 0.6);
  --line: rgba(20, 10, 10, 0.08); --line-strong: rgba(20, 10, 10, 0.14);
  --muted: rgba(40, 20, 20, 0.6); --muted-2: rgba(40, 20, 20, 0.44);
  --text: rgba(25, 15, 15, 0.92);
  --brand: #8c1515; --brand-2: #b83a3a;
  --accent: #175e54; --accent-2: #2e7d32;
  --on-brand: #ffffff;
  --font-display: "Avenir Next", "SF Pro Display", "Helvetica Neue", "Source Serif 4", serif;
  --font-sans: "GT Maru", "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --display-italic: normal; --display-weight: 300;
  --particle: rgba(140, 21, 21, 0.55);
  --particle-link: rgba(140, 21, 21, 0.14);
  --code-bg: #1a1113; --code-fg: #f5ece8;
  --code-comment: #8a7a72; --code-keyword: #e06c75; --code-string: #98c379;
  --code-number: #d19a66; --code-function: #61afef; --code-op: #56b6c2; --code-tag: #e06c75;
}

/* ---------- MIT — engineering gray + red (thin book titles) ---------- */
[data-theme="mit"] {
  color-scheme: dark;
  --bg: #0b0c0e; --bg-soft: #131519;
  --panel: rgba(24, 26, 31, 0.78); --panel-2: rgba(15, 17, 20, 0.72);
  --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.16);
  --muted: rgba(220, 225, 232, 0.58); --muted-2: rgba(220, 225, 232, 0.4);
  --text: rgba(240, 244, 250, 0.96);
  --brand: #a31f34; --brand-2: #d03451;
  --accent: #8a8b8c; --accent-2: #00a9ce;
  --on-brand: #ffffff;
  --font-display: "Avenir Next", "SF Pro Display", "Helvetica Neue", "Inter", system-ui, sans-serif;
  --font-sans: "GT Maru", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --display-italic: normal; --display-weight: 300;
  --particle: rgba(0, 169, 206, 0.6);
  --particle-link: rgba(0, 169, 206, 0.16);
  --code-bg: #06070a; --code-fg: #e6edf3;
  --code-comment: #6e7681; --code-keyword: #ff7b72; --code-string: #a5d6ff;
  --code-number: #79c0ff; --code-function: #d2a8ff; --code-op: #ffa657; --code-tag: #7ee787;
}
/* (hero line font is intentionally locked in .hero-line above) */

/* ---------- FYNBOS SAKURA — proteas + sakura ink + sage (dark) ----------
   Headline font is Comfortaa — a rounded geometric sans — because the
   user asked for a soft, modern thin-rounded look (closer to Avenir Next
   round / Helvetica Thin), not the serif we had before. */
[data-theme="fynbos-sakura"] {
  color-scheme: dark;
  --bg: #0b0810; --bg-soft: #120e18;
  --panel: rgba(28, 22, 38, 0.8); --panel-2: rgba(18, 14, 24, 0.72);
  --line: rgba(230, 210, 230, 0.08); --line-strong: rgba(230, 210, 230, 0.16);
  --muted: rgba(238, 220, 232, 0.6); --muted-2: rgba(238, 220, 232, 0.42);
  --text: rgba(246, 234, 246, 0.96);
  --brand: #e57383; --brand-2: #ffa3ad;
  --accent: #6fa387; --accent-2: #4a7ab5;
  --on-brand: #17080f;
  --font-display: "Comfortaa", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --font-sans: "GT Maru", "Outfit", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  /* Per user direction 2026-04-25: thin / ultra-thin headline. Comfortaa's
     lightest weight is 300 (Light); pair it with positive letter-spacing so
     it reads as airy/thin like Avenir Next UltraLight even on Linux/Win
     where Avenir isn't installed. */
  --display-italic: normal; --display-weight: 300; --display-letter: 0.01em;
  --particle: rgba(229, 115, 131, 0.7);
  --particle-link: rgba(229, 115, 131, 0.18);
  --code-bg: #070509; --code-fg: #f4eaf1;
  --code-comment: #7b6a7a; --code-keyword: #ffa3ad; --code-string: #a7d1b5;
  --code-number: #f3c28c; --code-function: #7fb6d6; --code-op: #6fa387; --code-tag: #e57383;
}

/* ---------- TUKS — University of Pretoria, light: tuks blue + old gold + red ----------
   Bright, ceremonial palette pulled from the UP coat of arms: tuks blue
   primary, warm gold accent, and a confident red for emphasis. Light
   background like a campus paper / programme. */
[data-theme="tuks"] {
  color-scheme: light;
  --bg: #f5f1e6;          /* warm cream programme paper */
  --bg-soft: #ffffff;
  --panel: rgba(255, 254, 250, 0.92);
  --panel-2: rgba(245, 240, 226, 0.78);
  --line: rgba(20, 36, 70, 0.10);
  --line-strong: rgba(20, 36, 70, 0.18);
  --muted: rgba(20, 36, 70, 0.62);
  --muted-2: rgba(20, 36, 70, 0.42);
  --text: rgba(14, 24, 50, 0.94);
  --brand: #1c3a8a;       /* tuks blue (Pantone-ish UP navy-blue) */
  --brand-2: #2a52be;
  --accent: #d4a73a;      /* tuks old-gold */
  --accent-2: #c8102e;    /* UP ceremonial red */
  --on-brand: #ffffff;
  --font-display: "Playfair Display", "Instrument Serif", Georgia, serif;
  --font-sans:    "GT Maru", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --display-italic: italic;
  --display-weight: 600;
  --particle: rgba(28, 58, 138, 0.55);
  --particle-link: rgba(28, 58, 138, 0.14);
  --code-bg: #0c142a; --code-fg: #f1ead0;
  --code-comment: #6b7a96; --code-keyword: #ecc35a; --code-string: #a5d6ff;
  --code-number: #f5d98a; --code-function: #6688c0; --code-op: #c8102e; --code-tag: #ffb199;
}

/* ---------- MAX PLANCK — Minerva emerald + ink + brushed bronze (dark) ----------
   The Max Planck Society's identity is built on Minerva-green, ivory and
   restrained Bauhaus typography. We translate that into a dark theme:
   - Background is deep "research-night" ink with a faint teal undertone
     (not pure black — pure black is the Terracotta Firefly territory).
   - Primary brand is Max-Planck Minerva Emerald (#00786C) — a confident
     scientific green that feels distinct from anything else in the set.
   - Accent is brushed bronze / antique gold (#C9A86A) — lifted from the
     bronze Minerva sculptures that crown MPI buildings; warm enough to
     anchor the green without competing with it.
   - Type pairing: Avenir Next Ultralight for display (Bauhaus / Albers
     "less but better" feel), GT Maru for body, IBM Plex Mono for code.
   - Lines are quiet, panel backgrounds carry just a hint of emerald wash.
   The result reads as restrained, elegant, scientific — close in spirit
   to Terracotta Firefly but with its own clear signature.
---------------------------------------------------------------------- */
[data-theme="max-planck"] {
  color-scheme: dark;
  --bg: #0a1612;          /* research-night ink */
  --bg-soft: #0d1c17;
  --panel: rgba(14, 28, 23, 0.84);
  --panel-2: rgba(10, 22, 18, 0.74);
  --line: rgba(0, 168, 148, 0.10);
  --line-strong: rgba(0, 168, 148, 0.22);
  --muted: rgba(232, 234, 230, 0.62);
  --muted-2: rgba(232, 234, 230, 0.40);
  --text: rgba(244, 246, 242, 0.98);
  --brand: #00786C;        /* Minerva emerald */
  --brand-2: #00a892;      /* lighter emerald */
  --accent: #C9A86A;        /* brushed bronze */
  --accent-2: #8B7140;
  --on-brand: #f4f6f2;
  --font-display: "Avenir Next", "Avenir", "Helvetica Neue", system-ui, sans-serif;
  --font-sans:    "GT Maru", "Avenir Next", "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-italic: normal;
  --display-weight: 100;    /* ultralight — the Bauhaus rigour */
  --particle: rgba(0, 168, 148, 0.55);
  --particle-link: rgba(201, 168, 106, 0.18);
  --code-bg: #08110e; --code-fg: #e8eae6;
  --code-comment: #4a6a60; --code-keyword: #00a892; --code-string: #C9A86A;
  --code-number: #C9A86A; --code-function: #6abfaf; --code-op: #00786C; --code-tag: #00a892;
}

/* ---------- KURUMAN HILLS — expensive royal purple + antique gold (dark) ----------
   A sibling of Max Planck in structural feel (quiet, scientific, elegant)
   but re-keyed around deep Northern Cape night — the Kuruman hills at
   dusk: purple-black ink ground, a single confident royal-purple brand
   accent, antique-gold highlights. Lines are whisper-quiet lilac.
   Type pairing matches Max Planck's Bauhaus rigour (Avenir Next
   Ultralight display, GT Maru body, IBM Plex Mono code) so the two
   read as a considered pair from the same studio.
---------------------------------------------------------------------- */
[data-theme="kuruman-hills"] {
  color-scheme: dark;
  --bg: #100820;           /* deep Kuruman-night ink (royal purple-black) */
  --bg-soft: #180e2c;
  --panel: rgba(30, 20, 56, 0.84);
  --panel-2: rgba(22, 14, 42, 0.74);
  --line: rgba(180, 140, 250, 0.10);
  --line-strong: rgba(180, 140, 250, 0.22);
  --muted: rgba(232, 226, 246, 0.62);
  --muted-2: rgba(232, 226, 246, 0.40);
  --text: rgba(248, 244, 252, 0.98);
  --brand: #8a4fff;         /* royal electric purple — the luxury note */
  --brand-2: #a874ff;       /* lighter purple */
  --accent: #d4b36b;        /* antique gold — treasure against the night */
  --accent-2: #8b7140;
  --on-brand: #0d0720;
  --font-display: "Avenir Next", "Avenir", "Helvetica Neue", system-ui, sans-serif;
  --font-sans:    "GT Maru", "Avenir Next", "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-italic: normal;
  --display-weight: 100;    /* ultralight — same rigour as Max Planck */
  --particle: rgba(168, 116, 255, 0.55);
  --particle-link: rgba(212, 179, 107, 0.18);
  --code-bg: #0a0518; --code-fg: #ece8f6;
  --code-comment: #6a548a; --code-keyword: #a874ff; --code-string: #d4b36b;
  --code-number: #d4b36b; --code-function: #b896ff; --code-op: #8a4fff; --code-tag: #a874ff;
}

/* ---------- UNIBO — light purple paper with Comfortaa airiness ----------
   The light counterpart to Fynbos Sakura: same thin / ultralight display
   via Comfortaa (airy, rounded), but re-keyed to a purple scholarly
   paper palette — barely-tinted white ground, deep royal purple ink for
   text + brand, soft orchid accent, antique grape tone for the second
   accent. Reads like an elegant thesis from a humanities faculty on
   fine stock paper.
---------------------------------------------------------------------- */
[data-theme="unibo"] {
  color-scheme: light;
  --bg: #faf6fc;            /* purple-white stock paper */
  --bg-soft: #ffffff;
  --panel: rgba(254, 252, 255, 0.92);
  --panel-2: rgba(248, 242, 252, 0.78);
  --line: rgba(90, 40, 140, 0.10);
  --line-strong: rgba(90, 40, 140, 0.20);
  --muted: rgba(44, 22, 78, 0.62);
  --muted-2: rgba(44, 22, 78, 0.42);
  --text: rgba(32, 14, 60, 0.94);
  --brand: #6a2a9c;         /* royal purple ink */
  --brand-2: #8a4fc8;       /* lighter royal purple */
  --accent: #c07fe3;        /* soft orchid */
  --accent-2: #4a1d78;      /* antique grape */
  --on-brand: #ffffff;
  --font-display: "Comfortaa", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --font-sans:    "GT Maru", "Outfit", sans-serif;
  --font-mono:    "IBM Plex Mono", monospace;
  /* Same airy thin treatment as Fynbos Sakura — Comfortaa's lightest
     weight is 300; positive letter-spacing keeps it reading ultralight
     on platforms without optical sizes. */
  --display-italic: normal;
  --display-weight: 300;
  --display-letter: 0.01em;
  --particle: rgba(106, 42, 156, 0.55);
  --particle-link: rgba(106, 42, 156, 0.16);
  --code-bg: #1b0c2c; --code-fg: #f4ebff;
  --code-comment: #8b6ea8; --code-keyword: #c07fe3; --code-string: #a874ff;
  --code-number: #d4b36b; --code-function: #b896ff; --code-op: #6a2a9c; --code-tag: #c07fe3;
}

/* ============================================================
   LIGHT-THEMES PREMIUM CANVAS — Stanford / Tuks / Unibo
   ----------------------------------------------------------
   Hope's directive: "fix the screen for light themes — make it
   cream white and premium."

   The base `.bg-orb` + `.bg-grid` are tuned for dark themes, so
   on cream pages they bleed heavy coloured blobs and dark grid
   lines that look cheap. Here we:

     · soften the ambient orbs to whisper-faint warm tints,
     · replace the grey grid with an ivory paper-grain + subtle
       cream radial wash,
     · add a gentle warm vignette for depth at the edges,
     · ensure the page body itself reads as richer layered cream
       rather than a flat hex swatch.

   One rule set, targets all three light themes.
   ============================================================ */
[data-theme="stanford"] body,
[data-theme="tuks"]     body,
[data-theme="unibo"]    body {
  /* Layered cream: very subtle radial highlight top-center +
     soft warm vignette at the edges, painted on top of the flat
     --bg so each theme's hue (ivory, paper, purple-white) keeps
     its identity underneath. */
  background:
    radial-gradient(1200px 700px at 50% -10%,
      color-mix(in oklab, #fff 82%, var(--brand) 8%) 0%,
      transparent 60%),
    radial-gradient(900px 600px at 100% 100%,
      color-mix(in oklab, var(--accent) 7%, transparent) 0%,
      transparent 55%),
    radial-gradient(900px 600px at 0% 100%,
      color-mix(in oklab, var(--brand) 5%, transparent) 0%,
      transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* Tone the ambient orbs WAY down on light themes so they're
   barely-there warm breath rather than heavy blurry discs. */
[data-theme="stanford"] .bg-orb,
[data-theme="tuks"]     .bg-orb,
[data-theme="unibo"]    .bg-orb {
  opacity: 0.14;
  filter: blur(160px);
}
[data-theme="stanford"] .orb-a,
[data-theme="tuks"]     .orb-a,
[data-theme="unibo"]    .orb-a {
  background: radial-gradient(circle,
    color-mix(in oklab, var(--brand) 38%, transparent),
    transparent 60%);
}
[data-theme="stanford"] .orb-b,
[data-theme="tuks"]     .orb-b,
[data-theme="unibo"]    .orb-b {
  background: radial-gradient(circle,
    color-mix(in oklab, var(--accent) 32%, transparent),
    transparent 60%);
}

/* Warmer, fainter grid — ivory paper lines instead of grey. */
[data-theme="stanford"] .bg-grid,
[data-theme="tuks"]     .bg-grid,
[data-theme="unibo"]    .bg-grid {
  background-image:
    linear-gradient(color-mix(in oklab, var(--brand) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--brand) 6%, transparent) 1px, transparent 1px);
  opacity: 0.35;
}

/* Paper-grain vignette — layered pseudo-element on body that
   adds the tiniest texture + corner darkening for a premium
   stock-paper feel. Pointer-events: none so it never swallows
   clicks; z-index 0 so content stays above. */
[data-theme="stanford"] body::before,
[data-theme="tuks"]     body::before,
[data-theme="unibo"]    body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* Faint grain via tiny noise-dot pattern (pure CSS, no image). */
    radial-gradient(1px 1px at 17% 23%, color-mix(in oklab, var(--text) 4%, transparent) 50%, transparent 52%),
    radial-gradient(1px 1px at 63% 81%, color-mix(in oklab, var(--text) 4%, transparent) 50%, transparent 52%),
    radial-gradient(1px 1px at 42% 55%, color-mix(in oklab, var(--text) 3%, transparent) 50%, transparent 52%),
    /* Soft corner-darkening for depth. */
    radial-gradient(ellipse at center, transparent 55%,
      color-mix(in oklab, var(--brand) 4%, transparent) 100%);
  background-size: 180px 180px, 220px 220px, 140px 140px, 100% 100%;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* Premium panel elevation — on cream pages the flat --panel reads
   washed out. Lift it with a subtle layered gradient + crisper
   shadow + warmer border so surfaces feel like fine card stock. */
[data-theme="stanford"] .nav,
[data-theme="tuks"]     .nav,
[data-theme="unibo"]    .nav {
  background: color-mix(in oklab, #fff 90%, var(--brand) 4%);
  border-bottom-color: color-mix(in oklab, var(--brand) 12%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklab, #fff 80%, var(--brand) 5%) inset,
              0 8px 24px -18px color-mix(in oklab, var(--brand) 40%, transparent);
}

/* ============================================================
   FAST MODE CARD on LIGHT themes — black fonts on cream panel
   ----------------------------------------------------------
   Hope's directive (revised): the locked midnight Shepherd card
   reads UGLY on cream / paper / purple-white pages. On light
   themes flip the card to its native cream surface with BLACK
   text, no shadow. The midnight lock above (.a-card { --text:..; })
   applies to dark themes only — we re-override here for light.

   Also: NO box-shadow on light themes. Hope's call: "no shadow,
   rather make fonts black." A shadow on a cream page over a
   cream card just reads as smudge.
   ============================================================ */
[data-theme="stanford"] .shepherd-card .a-card,
[data-theme="tuks"]     .shepherd-card .a-card,
[data-theme="unibo"]    .shepherd-card .a-card {
  /* Reset the variable lock so the card reads on the cream surface
     with crisp BLACK text. Each token is rewritten to a near-black
     ink + warm cream paper so all descendants (intro, body, closing,
     refs) inherit the right contrast automatically. */
  --bg:          var(--bg);
  --bg-soft:     var(--bg-soft);
  --panel:       color-mix(in oklab, #fff 96%, var(--brand) 2%);
  --panel-2:     color-mix(in oklab, #fff 92%, var(--brand) 3%);
  --line:        color-mix(in oklab, #1a0f00 8%, transparent);
  --line-strong: color-mix(in oklab, #1a0f00 16%, transparent);
  --muted:       rgba(20, 14, 6, 0.58);
  --muted-2:     rgba(20, 14, 6, 0.42);
  --text:        rgba(8, 4, 0, 0.94);   /* near-black ink */
  color-scheme: light;
  color: var(--text);

  background: var(--panel);
  border-color: var(--line);
  /* No shadow — Hope's call: "no shadow, rather make fonts black." */
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Inline follow-up Shepherd reply inside ANY card on light themes —
   keep the answer body legible on cream too. The .card-answer
   subtle-aqua tinted block stays, but the body text flips to black
   so it reads against the cream backing. */
[data-theme="stanford"] .card-answer,
[data-theme="tuks"]     .card-answer,
[data-theme="unibo"]    .card-answer {
  --text: rgba(8, 4, 0, 0.92);
  color: var(--text);
}

/* ============================================================
   DID YOU KNOW on LIGHT themes — rich espresso-copper ink
   ----------------------------------------------------------
   Hope's directive: "gold does not show well on white." On
   cream / paper / purple-white pages the gold shimmer washes
   into the background. Replace it with a deep editorial
   espresso → saddle-brown → russet gradient that reads like
   ink on a vintage book page. Same shimmer animation, but the
   palette is warm earth tones that pop against cream. Only
   the DYK block changes — Hope's call: "change only did u know."
   ============================================================ */
[data-theme="stanford"] .dyk-block,
[data-theme="tuks"]     .dyk-block,
[data-theme="unibo"]    .dyk-block {
  background:
    linear-gradient(135deg,
      rgba(110, 60, 20, 0.08) 0%,
      rgba(140, 80, 30, 0.04) 60%,
      rgba(110, 60, 20, 0.08) 100%),
    color-mix(in oklab, #fff 92%, var(--brand) 4%);
  border-color: color-mix(in oklab, #6b3d1a 35%, transparent);
}
[data-theme="stanford"] .dyk-block p,
[data-theme="tuks"]     .dyk-block p,
[data-theme="unibo"]    .dyk-block p {
  color: #4a2f12;   /* deep espresso for body — high contrast on cream */
}
[data-theme="stanford"] .dyk-block p strong,
[data-theme="tuks"]     .dyk-block p strong,
[data-theme="unibo"]    .dyk-block p strong,
[data-theme="stanford"] .dyk-block p b,
[data-theme="tuks"]     .dyk-block p b,
[data-theme="unibo"]    .dyk-block p b {
  color: #2d1a08;   /* near-black ink for emphasis */
}
[data-theme="stanford"] .dyk-block .dyk-heading,
[data-theme="tuks"]     .dyk-block .dyk-heading,
[data-theme="unibo"]    .dyk-block .dyk-heading {
  /* Espresso → russet → copper → espresso — vintage book ink shimmer.
     Reads beautifully on cream where gold disappears. */
  background: linear-gradient(92deg,
    #3d2817 0%,
    #6b3d1a 28%,
    #a3551c 52%,
    #6b3d1a 76%,
    #3d2817 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* DYK M-mark halo on light themes — warm cream tile so the white
   M-LOGO pops without disappearing. */
[data-theme="stanford"] .dyk-mark,
[data-theme="tuks"]     .dyk-mark,
[data-theme="unibo"]    .dyk-mark {
  background: color-mix(in oklab, #6b3d1a 18%, transparent);
}
/* Invert the M-logo on light themes (it ships white → make it dark
   espresso so it reads on the cream halo). */
[data-theme="stanford"] .dyk-mark img,
[data-theme="tuks"]     .dyk-mark img,
[data-theme="unibo"]    .dyk-mark img {
  filter:
    brightness(0) saturate(100%)
    invert(18%) sepia(30%) saturate(820%) hue-rotate(8deg) brightness(85%) contrast(95%);
}

/* ---------- TERRACOTTA FIREFLY — deep black + gold, white text (dark) ---------- */
[data-theme="terracotta-firefly"] {
  color-scheme: dark;
  --bg: #030303;          /* super black */
  --bg-soft: #070706;
  --panel: rgba(14, 12, 8, 0.82);
  --panel-2: rgba(8, 7, 5, 0.72);
  --line: rgba(230, 190, 100, 0.09);
  --line-strong: rgba(230, 190, 100, 0.18);
  --muted: rgba(250, 248, 242, 0.62);
  --muted-2: rgba(250, 248, 242, 0.40);
  --text: rgba(252, 252, 250, 0.98);
  --brand: #e5b454;       /* gold-yellow */
  --brand-2: #f4cd6e;
  --accent: #b9843a;
  --accent-2: #7a5a2e;
  --on-brand: #0a0703;
  --font-display: "Avenir Next", "Avenir", "IBM Plex Mono", ui-monospace, monospace;
  --font-sans:    "GT Maru", "Avenir Next", "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-italic: normal;
  --display-weight: 200;  /* thin/ultralight for titles */
  --particle: rgba(229, 180, 84, 0.6);
  --particle-link: rgba(229, 180, 84, 0.16);
  --code-bg: #050402; --code-fg: #fcf8ee;
  --code-comment: #7a6a48; --code-keyword: #f4cd6e; --code-string: #e5b454;
  --code-number: #f4cd6e; --code-function: #f5d98a; --code-op: #b9843a; --code-tag: #e5b454;
}

/* ============================================================
   DICTIONARY CARD
   ------------------------------------------------------------
   Oxford-inspired layout: small headword block, prominent
   phonetic row, part-of-speech chip, numbered senses, italic
   examples, and a synonym trail underneath. Sits on the shared
   .extras-card shell, so theme vars carry through automatically.
   ============================================================ */
.dict-card { padding: 22px 22px 18px; }

.dict-head-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.dict-source-hint {
  font-size: 12.5px; color: var(--muted-2); margin-top: 2px;
}

.dict-headword {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.dict-word {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: var(--display-italic);
  font-size: 34px; line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}
.dict-phonetic-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dict-phonetic {
  font-family: var(--font-mono);
  font-size: 15px; color: color-mix(in oklab, var(--muted) 80%, var(--text));
  letter-spacing: 0.01em;
}
.dict-audio {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  color: var(--brand);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, color 0.15s;
}
.dict-audio:hover {
  background: color-mix(in oklab, var(--brand) 26%, transparent);
  color: var(--text); transform: scale(1.06);
}
.dict-audio svg { width: 12px; height: 12px; }
.dict-audio[hidden] { display: none !important; }

.dict-meanings {
  display: flex; flex-direction: column; gap: 22px;
}
.dict-meaning { display: flex; flex-direction: column; gap: 10px; }
.dict-pos {
  display: inline-flex; align-items: center; gap: 8px;
}
.dict-pos-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: color-mix(in oklab, var(--muted) 60%, var(--text));
  letter-spacing: 0.005em;
}
/* The definition reads like a Bible verse — large, generous line-height,
   paragraph (not list). One thought, one definition, done. */
.dict-def {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: var(--display-italic);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.002em;
}
.dict-example {
  margin: 6px 0 0;
  padding-left: 12px;
  border-left: 2px solid color-mix(in oklab, var(--brand) 55%, var(--line));
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.55;
}
.dict-empty {
  padding: 30px 10px; text-align: center;
  color: var(--muted); font-style: italic;
}

/* ============================================================
   FACT-CHECKER CARD
   ------------------------------------------------------------
   Verdict-first layout: a giant chip (TRUE / FALSE / MIXED /
   UNVERIFIED) colour-coded by stance, a confidence meter, a
   one-sentence summary, and then the actual scraped sources
   grouped by their individual stance.
   ============================================================ */
.fact-card { padding: 22px 22px 18px; }
/* Compact variant: tighter paddings so the card reads more like a
   shareable social-card than a dashboard panel. */
.fact-card-compact { padding: 18px 18px 14px; }
.fact-card-compact .extras-head { margin-bottom: 14px; }

.fact-verdict-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px; align-items: center;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* Iconic verdict badge (SVG). Sized for scan-at-a-glance + screenshots. */
.fact-verdict-icon {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px;
}
.fact-verdict-icon .v-icon {
  width: 72px; height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.4));
  animation: v-pop 0.45s cubic-bezier(.2,.9,.3,1.2) both;
}
/* PNG verdict assets: keep aspect ratio and render crisp on hi-dpi. */
img.v-icon { image-rendering: -webkit-optimize-contrast; }
@keyframes v-pop {
  0%   { transform: scale(0.3) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(3deg);  opacity: 1; }
  100% { transform: scale(1)    rotate(0);       opacity: 1; }
}

/* Legacy pill block — kept but now unused by the fact card. Left here so
   any external reference still styles gracefully. */
.fact-verdict {
  --v-hue: var(--muted);
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 16px 22px;
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--v-hue) 55%, var(--line));
  background: color-mix(in oklab, var(--v-hue) 18%, transparent);
  color: var(--v-hue);
  min-width: 140px;
  box-shadow: 0 0 32px -12px color-mix(in oklab, var(--v-hue) 55%, transparent);
}
.fact-verdict[data-v="TRUE"]        { --v-hue: #4ad29a; }
.fact-verdict[data-v="FALSE"]       { --v-hue: #ff6b8a; }
.fact-verdict[data-v="MIXED"]       { --v-hue: #ffc773; }
.fact-verdict[data-v="UNVERIFIED"]  { --v-hue: #8ec9ff; }
.fact-verdict-label {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: 0.01em;
  font-size: 22px;
  line-height: 1;
}
.fact-verdict-sub {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in oklab, var(--v-hue) 70%, var(--muted));
  opacity: 0.8;
}
.fact-claim {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: normal;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0;
}
.fact-claim::before {
  content: "“";
  color: color-mix(in oklab, var(--brand) 70%, var(--muted));
  font-size: 40px; line-height: 0; vertical-align: -10px; margin-right: 2px;
}
.fact-claim::after {
  content: "”";
  color: color-mix(in oklab, var(--brand) 70%, var(--muted));
  font-size: 40px; line-height: 0; vertical-align: -10px; margin-left: 2px;
}

.fact-meter-wrap { margin-bottom: 16px; }
.fact-meter-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.fact-meter {
  height: 6px; border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border: 1px solid var(--line);
  overflow: hidden;
}
.fact-meter-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--brand) 55%, transparent),
    var(--brand));
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Degraded summary: no confidence meter, no verdict icon — just the
   server-supplied "sources gathered" message rendered as a calm lead-in
   to the source list. Slightly larger, brand-tinted left accent so users
   know this card is intentional, not broken. */
.fact-summary--degraded {
  padding: 12px 14px;
  border-left: 3px solid color-mix(in oklab, var(--brand) 60%, var(--line, transparent));
  background: color-mix(in oklab, var(--text) 3%, transparent);
  border-radius: 4px 10px 10px 4px;
  color: color-mix(in oklab, var(--text) 85%, var(--muted));
  margin-top: 4px;
}
.fact-summary {
  font-size: 15.5px; line-height: 1.65;
  color: color-mix(in oklab, var(--text) 92%, transparent);
  margin: 0 0 18px;
}

.fact-sources-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.fact-sources { display: flex; flex-direction: column; gap: 6px; }
.fact-source {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  text-decoration: none;
  transition: border-color 0.18s, background 0.18s, transform 0.15s;
}
.fact-source:hover {
  border-color: color-mix(in oklab, var(--brand) 40%, var(--line-strong));
  background: color-mix(in oklab, var(--bg) 35%, transparent);
  transform: translateX(2px);
}
.fact-source-body {
  min-width: 0;
  display: flex; align-items: center; gap: 8px;
}
.fact-source-title {
  font-size: 13px; color: var(--text);
  font-weight: 500;
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.fact-source:hover .fact-source-title { color: var(--brand); }
.fact-source-domain {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--muted-2); letter-spacing: 0.04em;
  flex-shrink: 0;
}

.fact-degraded {
  margin-top: 14px; padding: 10px 12px;
  border-left: 2px solid #ffc773;
  background: color-mix(in oklab, #ffc773 10%, transparent);
  font-size: 12.5px; color: var(--muted);
  border-radius: 0 6px 6px 0;
}

/* Loading / skeleton states shared by both cards ----------- */
.dict-card.is-loading .dict-meanings,
.fact-card.is-loading .fact-sources-head,
.fact-card.is-loading .fact-sources {
  display: none;
}
.dict-skel, .fact-skel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 0 4px;
}
.dict-skel-line, .fact-skel-line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--bg) 55%, transparent) 0%,
    color-mix(in oklab, var(--brand) 12%, transparent) 50%,
    color-mix(in oklab, var(--bg) 55%, transparent) 100%);
  background-size: 200% 100%;
  animation: card-skel 1.4s linear infinite;
}
.dict-skel-line:nth-child(1), .fact-skel-line:nth-child(1) { width: 40%; }
.dict-skel-line:nth-child(2), .fact-skel-line:nth-child(2) { width: 92%; }
.dict-skel-line:nth-child(3), .fact-skel-line:nth-child(3) { width: 80%; }
.dict-skel-line:nth-child(4), .fact-skel-line:nth-child(4) { width: 65%; }
@keyframes card-skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* Round, compact source favicon — no more ugly ticks next to it. */
.fact-source-fav {
  width: 18px; height: 18px;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  box-shadow: 0 0 0 1px var(--line);
}

/* Expand-more button for the hidden source tail ------------ */
.fact-sources-more[data-hidden="true"] { display: none; }
.fact-sources-more[data-hidden="false"] {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
  animation: fact-expand 0.28s ease-out;
}
@keyframes fact-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.fact-sources-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.fact-sources-toggle:hover {
  color: var(--text);
  border-color: color-mix(in oklab, var(--brand) 50%, var(--line));
  background: color-mix(in oklab, var(--brand) 14%, transparent);
}
.fact-sources-toggle svg { transition: transform 0.22s; }
.fact-sources-toggle.is-open svg { transform: rotate(180deg); }

/* Synthesizing GIF (top-left of fact card, while scanning) - */
.fact-head-left {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.fact-synth {
  width: 54px; height: 54px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  box-shadow: 0 0 0 1px var(--line),
              0 8px 22px -10px color-mix(in oklab, var(--brand) 60%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.fact-synth-gif {
  width: 100%; height: 100%;
  object-fit: cover;          /* preserves aspect ratio, fills the square */
}

/* Perplexity-style favicon roll (bottom, before footer) ---- */
.fact-favroll {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
}
.fact-favroll-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.fact-favroll-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.fact-favroll-item {
  width: 26px; height: 26px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.fact-favroll-item:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
  box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--brand) 60%, transparent);
}
.fact-favroll-item img { width: 16px; height: 16px; display: block; }

/* Inline upvote cluster — lives in the card footer, bottom-right, right
   next to the share button. "Upvoted by 32k people · help verify the
   truth" on one line, then the compact thumb-up pill with the count. */
.fact-upvote-inline {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: auto;     /* push the whole cluster to the right */
}
.fact-upvote-inline .fact-upvote-hint {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 320px;
}
.fact-upvote-inline .fact-upvote-hint b {
  color: var(--brand);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.fact-upvote {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--brand) 40%, var(--line));
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, background 0.18s, color 0.18s, border-color 0.18s;
}
.fact-upvote:hover {
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--brand) 24%, transparent);
}
.fact-upvote.is-voted {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}
.fact-upvote.is-voted svg { stroke: var(--on-brand); }
.fact-upvote-count { font-weight: 700; }

/* Fact-card footer: allow the inline upvote cluster + share + stamp to
   sit in a tidy right-hand row even when the hint is long. */
.fact-card .extras-foot { flex-wrap: wrap; row-gap: 8px; }

@media (max-width: 640px) {
  .fact-verdict-wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .fact-verdict-icon .v-icon { width: 64px; height: 64px; }
  .dict-word { font-size: 28px; }
  .fact-synth { width: 44px; height: 44px; }
  .fact-claim { font-size: 19px; }
  .fact-upvote-inline .fact-upvote-hint { max-width: 180px; font-size: 10px; }
}

/* ============================================================
   LYRICS CARD
   ------------------------------------------------------------
   Songbook layout: album-art hero with title / artist, copy
   button, then verse blocks separated by generous whitespace.
   Section headers like (Chorus) / [Verse 1] become small caps
   labels so the song structure is instantly readable.
   ============================================================ */
.lyrics-card { padding: 22px 22px 18px; }

.lyrics-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px; align-items: center;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.lyrics-cover {
  width: 72px; height: 72px; border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
  border: 1px solid var(--line);
}
.lyrics-hero-body { min-width: 0; }
.lyrics-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: var(--display-italic);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lyrics-artist {
  font-size: 14.5px;
  color: color-mix(in oklab, var(--muted) 60%, var(--text));
  letter-spacing: 0.01em;
}
.lyrics-meta {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.lyrics-meta-dot { color: var(--line-strong); margin: 0 2px; }
.lyrics-meta-link {
  color: var(--brand);
  text-decoration: none;
}
.lyrics-meta-link:hover { text-decoration: underline; }

.lyrics-copy {
  align-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  color: var(--muted);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.lyrics-copy:hover {
  color: var(--text);
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
  background: color-mix(in oklab, var(--brand) 18%, transparent);
}

.lyrics-text {
  display: flex; flex-direction: column; gap: 22px;
}
.lyrics-verse p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: var(--display-italic);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.7;
  color: color-mix(in oklab, var(--text) 94%, transparent);
  white-space: normal;
}
.lyrics-head {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 6px;
}
.lyrics-empty {
  padding: 30px 10px; text-align: center;
  color: var(--muted); font-style: italic;
}
.lyrics-skel { padding: 12px 0; display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 640px) {
  .lyrics-hero { grid-template-columns: auto 1fr; }
  .lyrics-copy { grid-column: 1 / -1; justify-self: end; margin-top: 4px; }
  .lyrics-cover { width: 56px; height: 56px; }
}

/* ============================================================
   MUSIC CARD — Spotify-backed
   ------------------------------------------------------------
   Hero album cover + title + meta, then a tight tracklist (for
   albums) or artist discography grid. Every field is live data,
   never hallucinated.
   ============================================================ */
.music-card { padding: 22px 22px 18px; }

.music-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px; align-items: center;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.music-cover {
  width: 118px; height: 118px; border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 14px 40px -10px rgba(0,0,0,0.55);
  border: 1px solid var(--line);
}
.music-cover-round { border-radius: 50%; }
.music-hero-body { min-width: 0; }
.music-hero-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.music-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: var(--display-italic);
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 4px;
}
.music-artist {
  font-size: 15px;
  color: color-mix(in oklab, var(--muted) 55%, var(--text));
  margin-bottom: 4px;
}
.music-artist a { color: inherit; text-decoration: none; }
.music-artist a:hover { color: var(--brand); }
.music-meta {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.music-meta b { color: var(--text); font-weight: 600; }
.music-dot { color: var(--line-strong); margin: 0 2px; }
.music-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.music-chip {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  color: color-mix(in oklab, var(--brand) 80%, var(--text));
  font-size: 11.5px;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}
.music-spot-link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  text-decoration: none;
}
.music-spot-link:hover { text-decoration: underline; }

.music-section { margin-top: 18px; }
.music-section-title {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.music-tracks {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.music-track {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 9px 4px;
  border-bottom: 1px solid color-mix(in oklab, var(--line) 55%, transparent);
  font-size: 14.5px;
}
.music-track:last-child { border-bottom: 0; }
.music-tracks-tight .music-track { padding: 7px 4px; }
.music-track:hover {
  background: color-mix(in oklab, var(--bg) 45%, transparent);
}
.music-track-n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-2);
  text-align: right;
}
.music-track-name {
  min-width: 0;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.music-track-name a { color: inherit; text-decoration: none; }
.music-track-name a:hover { color: var(--brand); }
.music-explicit {
  display: inline-block; margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.04em;
  color: var(--muted-2);
  background: color-mix(in oklab, var(--muted) 22%, transparent);
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: 1px;
}
.music-track-dur {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
}
.music-preview {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  color: var(--brand);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.music-preview:hover { transform: scale(1.08); background: color-mix(in oklab, var(--brand) 28%, transparent); }
.music-preview.is-playing {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 0 18px -2px color-mix(in oklab, var(--brand) 70%, transparent);
}

.music-discog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 14px;
}
.music-discog-item {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 6px;
  border-radius: 10px;
  transition: transform 0.2s;
}
.music-discog-item:hover { transform: translateY(-2px); }
.music-discog-item img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,0.4);
  border: 1px solid var(--line);
}
.music-discog-fallback {
  width: 100%; aspect-ratio: 1/1;
  border-radius: 8px;
  background: color-mix(in oklab, var(--bg) 50%, transparent);
  border: 1px dashed var(--line);
}
.music-discog-meta { min-width: 0; }
.music-discog-name {
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.music-discog-year {
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--muted-2);
  letter-spacing: 0.06em;
}

@media (max-width: 640px) {
  .music-hero { grid-template-columns: auto 1fr; }
  .music-cover { width: 84px; height: 84px; }
  .music-track { grid-template-columns: 24px 1fr auto auto; font-size: 13.5px; }
}

/* ============================================================
   RECIPE CARD (TheMealDB) + MOVIE CARD (TMDB)
   ------------------------------------------------------------
   Shared hero layout with the music card (grid of cover + meta)
   plus per-card sections for ingredients/steps/cast/related.
   Reuses .music-chip / .music-meta / .music-dot for chip rows.
   ============================================================ */
.recipe-card, .movie-card { padding: 22px 22px 18px; }

.recipe-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px; align-items: center;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.recipe-cover {
  width: 140px; height: 140px; border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 14px 40px -10px rgba(0,0,0,0.55);
}
.recipe-hero-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.recipe-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text); margin: 0;
}
.recipe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.recipe-links { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 4px; }
.recipe-link {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--brand); text-decoration: none;
}
.recipe-link:hover { color: color-mix(in oklab, var(--brand) 70%, var(--text)); }

.recipe-section { margin-top: 18px; }
.recipe-section-title {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}

/* Ingredients grid — per-ingredient thumbnail pill. */
.recipe-ingredients {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px 12px;
}
.recipe-ing {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--text) 3%, transparent);
  border: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
  font-size: 13.5px;
}
.recipe-ing img { width: 28px; height: 28px; object-fit: contain; }
.recipe-ing-name { color: var(--text); text-transform: capitalize; }
.recipe-ing-measure {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted-2); letter-spacing: 0.04em; white-space: nowrap;
}

/* Steps — numbered list, generous spacing. */
.recipe-steps {
  margin: 0; padding: 0 0 0 22px;
  font-size: 14.5px; line-height: 1.6; color: var(--text);
}
.recipe-steps li { margin-bottom: 8px; }
.recipe-steps li::marker {
  color: var(--brand); font-weight: 700;
  font-family: var(--font-mono); font-size: 12px;
}

/* Related recipes grid — clickable cards that rerun the search. */
.recipe-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.recipe-related-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px; border-radius: 10px;
  background: color-mix(in oklab, var(--text) 3%, transparent);
  border: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
  color: var(--text);
  cursor: pointer; text-align: left;
  font-family: inherit; font-size: 12.5px; line-height: 1.3;
  transition: transform 0.15s, border-color 0.18s, background 0.18s;
}
.recipe-related-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--brand) 40%, var(--line));
  background: color-mix(in oklab, var(--brand) 6%, transparent);
}
.recipe-related-item img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px;
}
.recipe-related-item small {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--muted-2);
}

/* ----- Movie card specifics ----- */
.movie-hero {
  position: relative;
  isolation: isolate;
}
.movie-hero::before {
  content: "";
  position: absolute; inset: -22px -22px 0 -22px;
  background: var(--backdrop, none) center/cover no-repeat;
  opacity: 0.12; filter: blur(2px) saturate(1.1);
  z-index: -1;
  pointer-events: none;
}
.movie-poster { width: 150px; height: 225px; border-radius: 10px; }
.movie-year {
  font-weight: 400; color: var(--muted-2);
  font-size: 0.72em;
}
.movie-tagline {
  font-style: italic; color: var(--muted);
  font-size: 14px; line-height: 1.4;
}
.movie-rating {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in oklab, #f6c453 14%, transparent);
  border: 1px solid color-mix(in oklab, #f6c453 30%, var(--line));
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--text);
  width: fit-content;
}
.movie-rating b { font-size: 14px; }
.movie-rating-max { color: var(--muted-2); font-size: 11px; }
.movie-director { font-size: 13px; color: var(--muted); }
.movie-director b { color: var(--text); font-weight: 600; }
.movie-overview {
  font-size: 14.5px; line-height: 1.6;
  color: var(--text);
  margin: 0 0 4px; padding: 0;
}

.movie-cast {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}
.movie-cast-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.movie-cast-item img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover;
  border-radius: 8px;
}
.movie-cast-fallback {
  width: 100%; aspect-ratio: 2/3; border-radius: 8px;
  background: color-mix(in oklab, var(--text) 8%, transparent);
}
.movie-cast-name {
  font-size: 12.5px; color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.movie-cast-char {
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 640px) {
  .recipe-hero { grid-template-columns: auto 1fr; }
  .recipe-cover { width: 100px; height: 100px; }
  .movie-poster { width: 110px; height: 165px; }
  .recipe-ingredients { grid-template-columns: 1fr 1fr; }
  .recipe-related { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .movie-cast { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}

/* ============================================================
   SHEPHERD ANSWER CARD
   ------------------------------------------------------------
   The core DNA45 answer experience. Every assistant reply is
   composed of a few clearly-named slots:
     .a-heading   — big, editorial display title (rephrased Q)
     .a-intro     — warm opening paragraph, aligns with user
     .a-body      — flowing prose (or .a-steps for tutorials)
     .a-closing   — forward-looking one-liner
     .a-refs      — numbered sources as cards
     .a-followups — suggested next questions as pill chips
   Bullet points / numbered lists are BANNED inside the prose
   slots — if the LLM slips one through it renders as paragraphs
   via CSS resets below.
   ============================================================ */
.shepherd-card .a-heading {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 600);
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  /* Warm amber→brand gradient so the Shepherd's rephrased question
     reads as a distinct "page title" and doesn't mirror the user's
     original question bubble above it. */
  background: linear-gradient(92deg,
    color-mix(in oklab, var(--brand) 92%, #ffb86b 8%) 0%,
    color-mix(in oklab, var(--brand) 55%, #f59e0b 45%) 55%,
    color-mix(in oklab, var(--brand) 80%, #c084fc 20%) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  margin: 6px 0 22px;
  padding: 0;
  max-width: 40ch;
}
@media (prefers-color-scheme: light) {
  .shepherd-card .a-heading {
    background: linear-gradient(92deg,
      color-mix(in oklab, var(--brand) 85%, #d97706 15%) 0%,
      color-mix(in oklab, var(--brand) 60%, #b45309 40%) 100%);
    -webkit-background-clip: text;
            background-clip: text;
  }
}
/* Ghost-background behind the heading so it reads like a page title. */
.shepherd-card .a-heading::after {
  content: "";
  display: block;
  width: 52px; height: 2px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--brand), transparent);
  border-radius: 2px;
  opacity: 0.85;
}

/* Intro, body, and closing share the same prose typography, but with
   subtly different weights so the story has rhythm. */
.shepherd-card .a-intro,
.shepherd-card .a-body,
.shepherd-card .a-closing,
.shepherd-card .step-body {
  font-family: var(--font-body, inherit);
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--text);
}
.shepherd-card .a-intro {
  font-size: 17px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--text) 92%, var(--muted));
  margin-bottom: 18px;
}
.shepherd-card .a-body { margin-bottom: 18px; }
.shepherd-card .a-closing {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed color-mix(in oklab, var(--text) 12%, transparent);
  color: color-mix(in oklab, var(--text) 88%, var(--muted));
  font-style: italic;
}
.shepherd-card .a-intro p,
.shepherd-card .a-body p,
.shepherd-card .a-closing p,
.shepherd-card .step-body p {
  margin: 0 0 14px;
}
.shepherd-card .a-intro p:last-child,
.shepherd-card .a-body p:last-child,
.shepherd-card .a-closing p:last-child,
.shepherd-card .step-body p:last-child {
  margin-bottom: 0;
}

/* Nuke stray bullet / numbered lists the LLM might slip into the prose
   slots — render them as plain paragraphs so the story stays smooth. */
.shepherd-card .a-intro ul,
.shepherd-card .a-intro ol,
.shepherd-card .a-body ul,
.shepherd-card .a-body ol,
.shepherd-card .a-closing ul,
.shepherd-card .a-closing ol,
.shepherd-card .step-body ul,
.shepherd-card .step-body ol {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.shepherd-card .a-intro li,
.shepherd-card .a-body li,
.shepherd-card .a-closing li,
.shepherd-card .step-body li {
  display: block;
  margin: 0 0 8px;
  padding: 0;
}
.shepherd-card .a-intro li::marker,
.shepherd-card .a-body li::marker,
.shepherd-card .a-closing li::marker,
.shepherd-card .step-body li::marker { content: ""; }

/* Inline citation chips — the [1] [2] markers rendered mid-sentence by
   linkifyRefs(). Each one gets a pill background in the same 7-hue cycle
   the bottom-of-card reference list uses, so a reader can eye-link a
   sentence citation to its source chip without counting. */
.ref-cite {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin: 0 1px;
  border-radius: 5px;
  /* Book-weight (500), white on colored ground — reads as a clean index
     marker, not a loud bold stamp. */
  font: 500 10px/1.4 var(--font-mono, ui-monospace);
  letter-spacing: 0.02em;
  color: #fff !important;
  background: var(--brand);
  text-decoration: none;
  vertical-align: 1px;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.ref-cite:hover { transform: translateY(-1px); filter: brightness(1.08); color: #fff !important; }
.ref-cite:visited { color: #fff !important; }
.ref-cite[data-ref-n="1"] { background: #f59e0b; }
.ref-cite[data-ref-n="2"] { background: #22c55e; }
.ref-cite[data-ref-n="3"] { background: #3b82f6; }
.ref-cite[data-ref-n="4"] { background: #a855f7; }
.ref-cite[data-ref-n="5"] { background: #ec4899; }
.ref-cite[data-ref-n="6"] { background: #06b6d4; }
.ref-cite[data-ref-n="7"] { background: #ef4444; }

/* Step tabs — the tutorial-mode tab strip. */
.shepherd-card .a-steps { margin-bottom: 18px; }
/* "Recommended Steps" badge above the tab strip — signals tutorial mode.
   Deliberately tiny: a subtle marker, not a banner. */
.shepherd-card .a-steps-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px;
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  background: linear-gradient(92deg,
    color-mix(in oklab, var(--brand) 14%, transparent),
    color-mix(in oklab, #22c55e 14%, transparent));
  border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
  color: color-mix(in oklab, var(--brand) 82%, var(--text) 18%);
  font: 600 9.5px/1 var(--font-body, inherit);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shepherd-card .a-steps-label svg {
  width: 10px; height: 10px;
  color: color-mix(in oklab, #22c55e 78%, var(--brand) 22%);
  flex: 0 0 auto;
}
.shepherd-card .step-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--text) 3.5%, transparent);
  border: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
  margin-bottom: 16px;
}
.shepherd-card .step-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: color-mix(in oklab, var(--text) 72%, var(--muted));
  font: 500 12.5px/1.2 var(--font-mono, ui-monospace);
  letter-spacing: 0.02em;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, transform 0.16s;
  white-space: nowrap;
}
.shepherd-card .step-tab:hover {
  background: color-mix(in oklab, var(--text) 6%, transparent);
  color: var(--text);
}
.shepherd-card .step-tab[aria-selected="true"] {
  background: var(--text);
  color: var(--bg);
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--text) 40%, transparent);
}
.shepherd-card .step-body.is-transitioning {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
}

/* References block — numbered source cards with host badge. */
.shepherd-card .a-refs {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
}
.shepherd-card .a-section-title {
  font: 600 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2, var(--muted));
  margin: 0 0 12px;
}
.shepherd-card .a-ref-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.shepherd-card .a-ref-list li { margin: 0; }
.shepherd-card .a-ref-list a {
  display: grid;
  /* num · favicon · label · host */
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  background: color-mix(in oklab, var(--text) 3%, transparent);
  border: 1px solid color-mix(in oklab, var(--text) 6%, transparent);
  transition: border-color 0.18s, background 0.18s, transform 0.15s;
}
/* Favicon puck — 20×20 rounded frame containing Google's favicon service
   output. Letter-mark fallback renders when both CDN favicons 404. */
.shepherd-card .a-ref-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 5px;
  background: color-mix(in oklab, var(--text) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
  overflow: hidden;
  flex: 0 0 auto;
}
.shepherd-card .a-ref-fav img {
  width: 16px; height: 16px;
  object-fit: contain;
  display: block;
}
.shepherd-card .a-ref-fav-letter {
  font: 700 11px/1 var(--font-mono, ui-monospace);
  color: color-mix(in oklab, var(--text) 72%, var(--muted));
}
.shepherd-card .a-ref-list a:hover {
  border-color: color-mix(in oklab, var(--brand) 40%, var(--line, transparent));
  background: color-mix(in oklab, var(--brand) 6%, transparent);
  transform: translateX(2px);
}
/* Reference number chip — small colored pill per source. Each <li>
   gets a distinct hue via :nth-child so [1] [2] [3]… read as a vibrant
   index strip rather than a monochrome monospace list. */
.shepherd-card .a-ref-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  font: 700 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--brand);
  border: 1px solid color-mix(in oklab, var(--brand) 60%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklab, #000 10%, transparent) inset;
  flex: 0 0 auto;
}
.shepherd-card .a-ref-list > li:nth-child(7n+1) .a-ref-num { background: #f59e0b; border-color: color-mix(in oklab, #f59e0b 70%, transparent); }
.shepherd-card .a-ref-list > li:nth-child(7n+2) .a-ref-num { background: #22c55e; border-color: color-mix(in oklab, #22c55e 70%, transparent); }
.shepherd-card .a-ref-list > li:nth-child(7n+3) .a-ref-num { background: #3b82f6; border-color: color-mix(in oklab, #3b82f6 70%, transparent); }
.shepherd-card .a-ref-list > li:nth-child(7n+4) .a-ref-num { background: #a855f7; border-color: color-mix(in oklab, #a855f7 70%, transparent); }
.shepherd-card .a-ref-list > li:nth-child(7n+5) .a-ref-num { background: #ec4899; border-color: color-mix(in oklab, #ec4899 70%, transparent); }
.shepherd-card .a-ref-list > li:nth-child(7n+6) .a-ref-num { background: #06b6d4; border-color: color-mix(in oklab, #06b6d4 70%, transparent); }
.shepherd-card .a-ref-list > li:nth-child(7n+7) .a-ref-num { background: #ef4444; border-color: color-mix(in oklab, #ef4444 70%, transparent); }
.shepherd-card .a-ref-label {
  font-size: 13.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shepherd-card .a-ref-host {
  font: 500 10.5px/1 var(--font-mono, ui-monospace);
  color: var(--muted-2, var(--muted));
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--text) 6%, transparent);
  white-space: nowrap;
}

/* References + follow-ups are hidden during ghost-typing reveal so they
   don't flash in before the prose finishes. The `.is-revealing` class
   stays on the card until the last ink-bleed step resolves, at which
   point it's swapped for `.is-revealed` and these sections fade in. */
.shepherd-card.is-revealing .a-refs,
.shepherd-card.is-revealing .a-followups {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: none;
}
.shepherd-card.is-revealed .a-refs,
.shepherd-card.is-revealed .a-followups {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Follow-up question chips. */
.shepherd-card .a-followups {
  margin-top: 22px;
}
/* Stacked one-per-row strips: each follow-up reads as a single clean
   line the user can scan top-to-bottom, instead of a wall of wrapped
   chips. Long questions ellipsize; the full text stays in `title`. */
.shepherd-card .a-followup-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shepherd-card .a-followup-chip {
  appearance: none;
  border: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
  background: color-mix(in oklab, var(--text) 2.5%, transparent);
  color: var(--text);
  font: 500 13.5px/1.4 var(--font-body, inherit);
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  transition: border-color 0.18s, background 0.18s, transform 0.14s;
}
.shepherd-card .a-followup-chip:hover {
  border-color: color-mix(in oklab, var(--brand) 50%, var(--line, transparent));
  background: color-mix(in oklab, var(--brand) 7%, transparent);
  transform: translateY(-1px);
}
.shepherd-card .a-followup-chip:active { transform: translateY(0); }
.shepherd-card .a-followup-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
          line-clamp: 1;
  -webkit-box-orient: vertical;
}
.shepherd-card .a-followup-arrow {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: color-mix(in oklab, var(--text) 45%, var(--muted));
  transition: color 0.18s, transform 0.18s;
}
.shepherd-card .a-followup-chip:hover .a-followup-arrow {
  color: var(--brand);
  transform: translateX(2px);
}

/* ============================================================
   INK-BLEED REVEAL ANIMATION
   ------------------------------------------------------------
   Unique to DNA45 — replaces the generic typewriter. Each word
   starts slightly below its line with a soft blur + low opacity,
   then "lights up" into place when we flip `.is-lit`. Creates
   the feeling of words being written onto parchment rather
   than clacked out on a keyboard.
   ============================================================ */
.ink-word {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(4px);
  transition:
    opacity 0.52s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter  0.52s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.52s cubic-bezier(0.2, 0.7, 0.2, 1),
    color 0.52s ease;
}
.ink-word.is-lit {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
/* Tiny golden flash on the instant a word "lands" — subtle but warm. */
@keyframes ink-word-flash {
  0%   { color: color-mix(in oklab, var(--brand) 72%, var(--text)); }
  100% { color: var(--text); }
}
.ink-word.is-lit {
  animation: ink-word-flash 0.6s ease both;
}

/* Fast Mode: aqua ink while typing, all words cool to white when paragraph done */
.shepherd-card.mode-fast .ink-word {
  color: #4dd9ff;
}
.shepherd-card.mode-fast .ink-word.is-lit {
  animation: none;
}
.shepherd-card.mode-fast .is-revealed-text .ink-word {
  color: var(--text);
  transition: color 0.8s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ink-word {
    opacity: 1; filter: none; transform: none; transition: none; animation: none;
  }
}

/* ============================================================
   SHEPHERD TYPEWRITER — char-by-char reveal + aqua cursor
   ------------------------------------------------------------
   ONLY used by the prompt-button (per-card "Ask Shepherd")
   answer path. Fast-mode and chat answers continue to use the
   word-level ink-bleed above — that pipeline is iconic and
   untouched.
   ============================================================ */
.ink-char {
  display: inline;
  opacity: 0;
  transition: opacity 0.14s ease-out, color 0.3s ease;
}
.ink-char.is-lit {
  opacity: 1;
  animation: shep-char-kiss 0.45s ease both;
}
@keyframes shep-char-kiss {
  0%   { color: color-mix(in oklab, #00d4ff 65%, var(--text)); }
  100% { color: var(--text); }
}
.shep-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  vertical-align: -0.14em;
  margin-left: 1px;
  background: #00d4ff;
  border-radius: 1px;
  box-shadow:
    0 0 6px rgba(0, 212, 255, 0.65),
    0 0 14px rgba(0, 212, 255, 0.35);
  animation: shep-cursor-blink 0.9s steps(2, jump-none) infinite;
  pointer-events: none;
  transition: opacity 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
.shep-cursor.is-done {
  opacity: 0;
  box-shadow: none;
  background: transparent;
}
@keyframes shep-cursor-blink {
  0%, 45%  { opacity: 1; }
  55%, 100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ink-char { opacity: 1; transition: none; animation: none; }
  .shep-cursor { display: none; }
}

@media (max-width: 640px) {
  .shepherd-card .a-heading { font-size: clamp(22px, 6vw, 30px); }
  .shepherd-card .a-intro { font-size: 15.5px; }
  .shepherd-card .a-body, .shepherd-card .step-body { font-size: 15px; }
  .shepherd-card .step-tabs { gap: 4px; padding: 4px; }
  .shepherd-card .step-tab { padding: 7px 10px; font-size: 11.5px; }
  .shepherd-card .a-followup-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CARD PROMPT — per-card follow-up composer
   ------------------------------------------------------------
   Injected by window.DNA45Prompt into the Shepherd card's
   .a-actions row, next to Share. Styled to match the other
   action buttons (no custom color, no glow). The composer
   panel uses the card's own theme tokens.
   ============================================================ */
.a-btn-prompt[aria-expanded="true"] {
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  border-color: color-mix(in oklab, var(--brand) 38%, var(--line));
  color: color-mix(in oklab, var(--brand) 70%, var(--text) 30%);
}

/* Inline composer panel — sits below the action row, inherits the card's
   surface so it melts into the Shepherd card instead of shouting. */
.card-prompter {
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 2.5%, transparent);
}
.card-prompter[hidden] { display: none; }
.card-prompter-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.card-prompter-input {
  flex: 1;
  min-width: 0;
  resize: none;
  min-height: 40px;
  max-height: 140px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  /* Use the card surface so the input contrast always flips with the theme:
     on dark themes --card-bg is near-black and --text is near-white, on
     light themes it flips automatically. No per-theme overrides needed. */
  background: var(--card-bg, var(--bg));
  color: var(--text);
  font: 500 14px/1.5 var(--font-body, inherit);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.card-prompter-input:focus {
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 18%, transparent);
}
.card-prompter-input::placeholder {
  color: color-mix(in oklab, var(--text) 50%, var(--muted));
}
.card-prompter-send {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 4%, transparent);
  color: var(--text);
  font: 600 12.5px/1 var(--font-body, inherit);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.card-prompter-send:hover {
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  border-color: color-mix(in oklab, var(--brand) 40%, var(--line));
  transform: translateY(-1px);
}
.card-prompter-send:active { transform: translateY(0); }
.card-prompter-send svg { flex: 0 0 auto; }

/* External variant — mounted as a sibling AFTER its card (not inside)
   so grid-layout cards like .know-card don't squish the composer into
   one of their columns. Matches the card's own width. */
.card-prompter--external {
  margin: 10px 0 0;
  width: 100%;
}
.card-prompt-bar--external {
  margin: 8px 0 0;
  padding: 0;
  justify-content: flex-end;
}

/* ============================================================
   WEB SEARCH — Shepherd's Page-Rank card
   ------------------------------------------------------------
   A premium, Google-challenger result list. Each row is a
   crisp 3-line page entry with rank, favicon, title, domain,
   freshness, snippet, and trust badge. Built to feel like a
   New-York-Times-y reading experience, not a SERP wall.
   ============================================================ */
.web-search-card {
  padding: 22px 22px 16px;
}
.web-search-card .dict-head-label {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.websearch-kind-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font: 600 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--brand) 70%, var(--text) 30%);
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--line));
}

/* Shepherd's take — the synthesised answer paragraph at the top. */
.websearch-take {
  margin: 14px 0 16px;
  padding: 14px 16px 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 3%, transparent);
  border-left: 3px solid var(--brand);
}
.websearch-take-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--brand) 75%, var(--text) 25%);
  margin-bottom: 8px;
}
.websearch-take-body {
  margin: 0;
  font: 500 14.5px/1.6 var(--font-body, inherit);
  color: var(--text);
}

/* Result list — a stack of pill-card rows. */
.websearch-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.websearch-result {
  position: relative;
  display: grid;
  grid-template-columns: 22px 22px 1fr auto;
  grid-template-areas: "rank fav main visit";
  align-items: start;
  gap: 12px;
  padding: 14px 14px 14px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.14s;
}
.websearch-result:hover {
  border-color: color-mix(in oklab, var(--brand) 34%, var(--line));
  background: color-mix(in oklab, var(--brand) 5%, transparent);
  transform: translateY(-1px);
}
.websearch-result:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
}
.websearch-rank {
  grid-area: rank;
  font: 700 14px/1 var(--font-mono, ui-monospace);
  color: color-mix(in oklab, var(--text) 42%, var(--muted));
  padding-top: 2px;
  text-align: center;
}
.websearch-result:hover .websearch-rank {
  color: var(--brand);
}
.websearch-fav {
  grid-area: fav;
  width: 22px; height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: color-mix(in oklab, var(--text) 6%, transparent);
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.websearch-fav img { width: 18px; height: 18px; display: block; }
.websearch-main {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.websearch-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.websearch-title {
  margin: 0;
  font: 600 15px/1.35 var(--font-body, inherit);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
}
.websearch-result:hover .websearch-title {
  color: color-mix(in oklab, var(--brand) 80%, var(--text) 20%);
}
.websearch-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11.5px/1 var(--font-mono, ui-monospace);
  color: color-mix(in oklab, var(--text) 52%, var(--muted));
  letter-spacing: 0.02em;
}
.websearch-domain { color: color-mix(in oklab, var(--brand) 60%, var(--text) 40%); }
.websearch-published { font-style: italic; }
.websearch-dot { opacity: 0.5; }
.websearch-snippet {
  margin: 2px 0 0;
  font: 400 13.5px/1.55 var(--font-body, inherit);
  color: color-mix(in oklab, var(--text) 78%, var(--muted));
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
}
.websearch-visit {
  grid-area: visit;
  align-self: center;
  color: color-mix(in oklab, var(--text) 36%, var(--muted));
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.18s, transform 0.18s, color 0.15s;
}
.websearch-result:hover .websearch-visit {
  opacity: 1;
  transform: translate(0, 0);
  color: var(--brand);
}

/* Badges — "Trusted" and "Fresh" on individual results. */
.websearch-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  font: 600 10px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.websearch-badge-trusted {
  color: #0a7a3a;
  background: color-mix(in oklab, #22c55e 16%, transparent);
  border: 1px solid color-mix(in oklab, #22c55e 35%, transparent);
}
.websearch-badge-fresh {
  color: #9a5a00;
  background: color-mix(in oklab, #f59e0b 18%, transparent);
  border: 1px solid color-mix(in oklab, #f59e0b 40%, transparent);
}
@media (prefers-color-scheme: dark) {
  .websearch-badge-trusted { color: #6ee7a3; }
  .websearch-badge-fresh   { color: #fcd34d; }
}

.websearch-meta-footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font: 500 11px/1.5 var(--font-mono, ui-monospace);
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--text) 50%, var(--muted));
}

/* Skeleton rows while loading. */
.websearch-skel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.websearch-skel-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 10px;
}
.websearch-skel-fav {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--text) 8%, transparent);
  animation: ws-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
.websearch-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.websearch-skel-line {
  height: 10px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--text) 7%, transparent);
  animation: ws-pulse 1.2s ease-in-out infinite;
}
.websearch-skel-line-1 { width: 70%; height: 14px; }
.websearch-skel-line-2 { width: 45%; height: 10px; }
.websearch-skel-line-3 { width: 92%; height: 10px; }
@keyframes ws-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@media (max-width: 640px) {
  .web-search-card { padding: 18px 16px 14px; }
  .websearch-result {
    grid-template-columns: 20px 22px 1fr;
    grid-template-areas: "rank fav main" ". . main";
  }
  .websearch-visit { display: none; }
  .websearch-title { font-size: 14.5px; }
  .websearch-snippet { font-size: 13px; }
}

/* ============================================================
   WARM FALLBACK CARD (error replacement)
   ------------------------------------------------------------
   Non-red, calm, on-brand. Replaces every *-error div that used
   to flash red. Shown when a data provider 404s, rate-limits,
   or times out. Always offers actionable suggestions that
   re-submit through submit().
   ============================================================ */
.warm-fallback {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px 16px 18px;
  margin: 8px 0;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--text) 4%, transparent);
}
.warm-fallback .warm-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.warm-fallback .warm-icon img { width: 26px; height: 26px; display: block; }
.warm-fallback .warm-title {
  margin: 0 0 4px;
  font: 600 15.5px/1.35 var(--font-body, inherit);
  color: var(--text);
}
.warm-fallback .warm-copy {
  margin: 0 0 12px;
  font: 400 13.5px/1.55 var(--font-body, inherit);
  color: color-mix(in oklab, var(--text) 80%, var(--muted));
  max-width: 60ch;
}
.warm-fallback .warm-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.warm-suggest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 3%, transparent);
  color: var(--text);
  font: 500 12.5px/1 var(--font-body, inherit);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.warm-suggest:hover {
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  border-color: color-mix(in oklab, var(--brand) 36%, var(--line));
  transform: translateY(-1px);
}
.warm-suggest svg {
  color: color-mix(in oklab, var(--brand) 70%, var(--text) 30%);
  flex-shrink: 0;
}
.warm-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: color-mix(in oklab, var(--text) 50%, var(--muted));
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.warm-close:hover {
  background: color-mix(in oklab, var(--text) 5%, transparent);
  color: var(--text);
  border-color: var(--line);
}

/* Warm fallback rendered inside a card (via inline follow-up failure). */
.warm-fallback--inline {
  margin: 10px 0 0;
  padding: 12px 14px 10px 12px;
  background: transparent;
  box-shadow: none;
}
.warm-fallback--inline .warm-icon { width: 32px; height: 32px; border-radius: 10px; }
.warm-fallback--inline .warm-icon img { width: 18px; height: 18px; }

/* ============================================================
   CARD CLOSE BUTTON (X)
   ------------------------------------------------------------
   Floats in the top-right corner of every card. Subtle by
   default, darkens on hover, animates the card out on click.
   Docked ABOVE share/stamp elements so it's always reachable.
   ============================================================ */
.card-close-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: color-mix(in oklab, var(--text) 46%, var(--muted));
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s, background 0.15s, color 0.15s, border-color 0.15s;
  z-index: 20;
}
/* Parent must be positioned for the X to float inside it. All card variants
   get this via the shared rule below. */
.shepherd-card, .extras-card, .know-card, .weather-card,
.sports-card, .finance-card, .map-card,
[class$="-card"], [class*="-card "] {
  position: relative;
}
/* Reveal X on hover/focus so the UI stays clean when idle. */
.shepherd-card:hover .card-close-x,
.extras-card:hover .card-close-x,
.know-card:hover .card-close-x,
.weather-card:hover .card-close-x,
.sports-card:hover .card-close-x,
.finance-card:hover .card-close-x,
.map-card:hover .card-close-x,
[class$="-card"]:hover > .card-close-x,
.card-close-x:focus-visible {
  opacity: 1;
}
.card-close-x:hover {
  background: color-mix(in oklab, var(--text) 6%, transparent);
  color: var(--text);
  border-color: var(--line);
}
.card-close-x:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
}
.card-dismissing {
  opacity: 0;
  transform: translateY(-4px) scale(0.995);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

/* ============================================================
   INLINE CARD ANSWER (short follow-up reply inside a card)
   ------------------------------------------------------------
   When the user hits the Prompt button on an extras card and
   asks a quick question, the Shepherd answers in 1-4 lines
   RIGHT INSIDE the card (no new card is created). For longer
   replies the user can click "Open full answer" to escalate
   to a standard Shepherd answer card.
   ============================================================ */
.card-answer-host {
  margin-top: 10px;
}
.card-answer-think {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--text) 4%, transparent);
  color: color-mix(in oklab, var(--text) 60%, var(--muted));
  font: 500 12px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.02em;
}
.card-answer-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: card-answer-bounce 1.1s ease-in-out infinite;
}
.card-answer-dot:nth-child(2) { animation-delay: 0.12s; }
.card-answer-dot:nth-child(3) { animation-delay: 0.24s; }
.card-answer-label { margin-left: 4px; }
@keyframes card-answer-bounce {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-3px); }
}
.card-answer {
  padding: 12px 14px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--brand) 5%, transparent);
  border-left: 3px solid var(--brand);
}
.card-answer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.card-answer-mark {
  width: 20px; height: 20px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--brand) 16%, transparent);
  display: grid; place-items: center;
}
.card-answer-mark img {
  width: 14px; height: 14px; display: block;
  /* Aqua tint — the M-LOGO ships white, so we hue-rotate it via filter
     into the brand's aqua so it always reads as "Shepherd is here". */
  filter:
    brightness(0) saturate(100%)
    invert(58%) sepia(85%) saturate(420%) hue-rotate(155deg) brightness(95%) contrast(92%);
}

/* Tiny faint-aqua user-question line above Shepherd's inline answer.
   Hope's UX direction: "sometimes you see the answer but wish to see
   ur question — just put it above shepherd's answer in tiny font,
   faint aqua blue, that's cute." */
.card-answer-q {
  font: 500 11px/1.4 var(--font-body, inherit);
  letter-spacing: 0.01em;
  color: color-mix(in oklab, var(--brand) 60%, var(--muted, #8aa) 40%);
  opacity: 0.78;
  margin: 0 0 8px;
  /* No italic, no border, no quote-marks — just the bare aqua line.
     Hope's UX direction: tiny font + aqua blue is the recognizable
     signature on its own; anything more is noise. */
}

/* Aqua M-mark trailing the Prompt label on every prompt button. The
   M is DNA45's signature "Shepherd is nearby" glyph — same tint and
   sizing on the button as in DYK panels and inline answers so the eye
   trains on it. */
.prompt-mark {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  margin-left: 4px;
  /* Same aqua-tint pipeline as .card-answer-mark img — keeps the glyph
     visually consistent everywhere it appears. */
  filter:
    brightness(0) saturate(100%)
    invert(58%) sepia(85%) saturate(420%) hue-rotate(155deg) brightness(95%) contrast(92%);
}
/* Slightly smaller in the extras-card foot row so it matches the share-btn scale. */
.share-btn--inline .prompt-mark { width: 12px; height: 12px; }

/* M-mark inside the DYK gold-foil heading. The heading itself uses
   background-clip:text for the shimmer, so the mark sits as a sibling
   `<span>` to keep the gradient intact. Aqua glyph on the gold band
   reads as "Shepherd is whispering this fact to you". */
.dyk-block .dyk-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dyk-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* Soft warm halo so the white glyph has a subtle gold-tile backing. */
  background: color-mix(in oklab, #d4af37 14%, transparent);
  flex: 0 0 auto;
}
.dyk-mark img {
  width: 22px;
  height: 22px;
  display: block;
  /* WHITE M-logo on the DYK heading — Hope's direction: aqua M lives
     ONLY on the prompt button + next to Shepherd in inline answers.
     The DYK glyph stays its natural white so it reads cleanly on the
     gold-foil heading. */
}
.card-answer-role {
  font: 600 11px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--brand) 75%, var(--text) 25%);
}
.card-answer-expand {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: color-mix(in oklab, var(--text) 66%, var(--muted));
  font: 600 11px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.card-answer-expand:hover {
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  border-color: color-mix(in oklab, var(--brand) 36%, var(--line));
  color: var(--text);
}
.card-answer-body {
  margin: 0;
  font: 400 14px/1.55 var(--font-body, inherit);
  color: var(--text);
  white-space: pre-wrap;
}

/* Synthesised action bar for cards with no native footer — hosts the
   Prompt pill so it's always reachable. */
.card-prompt-bar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 14px 12px;
  border-top: 1px dashed var(--line);
  margin-top: 10px;
}

/* ============================================================
   Speak-answer button — sits inside .a-actions next to Copy.
   ============================================================ */
.a-btn.a-listen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.a-btn.a-listen .ico-speak,
.a-btn.a-listen .ico-stop {
  width: 14px;
  height: 14px;
}
.a-btn.a-listen.is-playing {
  background: color-mix(in oklab, var(--brand) 16%, transparent);
  border-color: color-mix(in oklab, var(--brand) 50%, var(--line));
  color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 14%, transparent);
}
.a-btn.a-listen.is-playing .ico-stop {
  color: color-mix(in oklab, var(--brand) 80%, var(--text) 20%);
  animation: listen-pulse 1.1s ease-in-out infinite;
}
@keyframes listen-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(0.9); opacity: 0.7; }
}

/* ============================================================
   NAV MIC — voice input lives in the nav so the search shells
   stay minimal. Same aqua identity as the narrate toggle.
   ============================================================ */
.nav-pill.nav-mic { position: relative; gap: 6px; }
.nav-pill.nav-mic .mic-wave {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.nav-pill.nav-mic .mic-wave span {
  width: 2px; height: 4px; border-radius: 1px;
  background: #1ad1ff;
  animation: nav-mic-wave 1s ease-in-out infinite;
}
.nav-pill.nav-mic .mic-wave span:nth-child(2) { animation-delay: .12s; }
.nav-pill.nav-mic .mic-wave span:nth-child(3) { animation-delay: .24s; }
.nav-pill.nav-mic .mic-wave span:nth-child(4) { animation-delay: .36s; }
@keyframes nav-mic-wave {
  0%, 100% { height: 4px;  }
  50%      { height: 12px; }
}
.nav-pill.nav-mic.is-listening {
  background: color-mix(in oklab, #1ad1ff 20%, transparent);
  border-color: color-mix(in oklab, #1ad1ff 60%, var(--line));
  color: #1ad1ff;
  box-shadow:
    0 0 0 3px color-mix(in oklab, #1ad1ff 18%, transparent),
    0 0 22px -4px color-mix(in oklab, #1ad1ff 50%, transparent);
  animation: nav-mic-pulse 1.4s ease-in-out infinite;
}
.nav-pill.nav-mic.is-listening .mic-ico { display: none; }
.nav-pill.nav-mic.is-listening .mic-wave { display: inline-flex; }
@keyframes nav-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, #1ad1ff 18%, transparent),
                         0 0 22px -4px color-mix(in oklab, #1ad1ff 50%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, #1ad1ff  9%, transparent),
                         0 0 26px -2px color-mix(in oklab, #1ad1ff 65%, transparent); }
}
/* Hide the label on narrow screens so the mic stays a tight icon chip. */
@media (max-width: 780px) {
  .nav-pill.nav-mic .mic-label { display: none; }
}
/* Nav-flavour toast — docks below the pill, no affordance clashes. */
.voice-mic-toast--nav {
  top: calc(100% + 6px);
  bottom: auto;
  right: 0;
  left: auto;
}

/* Live-mic caret affordance for whichever input is currently being
   dictated into. Mirrors the mic's aqua identity. */
[data-voice-capturing="true"] {
  caret-color: #1ad1ff;
}

/* ============================================================
   NARRATE TOGGLE — nav pill with animated wave while ON
   ============================================================ */
.nav-pill.narrate-toggle {
  position: relative;
  gap: 6px;
}
.nav-pill.narrate-toggle .narrate-wave {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.nav-pill.narrate-toggle .narrate-wave span {
  width: 2px;
  height: 4px;
  border-radius: 1px;
  background: color-mix(in oklab, var(--brand) 85%, var(--text) 15%);
  animation: nav-wave 1s ease-in-out infinite;
}
.nav-pill.narrate-toggle .narrate-wave span:nth-child(2) { animation-delay: .12s; }
.nav-pill.narrate-toggle .narrate-wave span:nth-child(3) { animation-delay: .24s; }
.nav-pill.narrate-toggle .narrate-wave span:nth-child(4) { animation-delay: .36s; }
@keyframes nav-wave {
  0%, 100% { height: 4px;  }
  50%      { height: 12px; }
}
.nav-pill.narrate-toggle.is-on {
  background: color-mix(in oklab, var(--brand) 18%, transparent);
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
  color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 14%, transparent);
}
.nav-pill.narrate-toggle.is-on .narrate-ico { display: none; }
.nav-pill.narrate-toggle.is-on .narrate-wave { display: inline-flex; }

/* ============================================================
   INLINE SIRI INDICATOR — lives next to the Speak-answer button
   in the card's action row. Only visible while the card is
   actively narrating.
   ============================================================ */
.siri-inline {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 45%, var(--line));
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s ease, transform .3s ease;
}
.shepherd-card.is-narrating .siri-inline {
  display: inline-flex;
  opacity: 1;
  transform: translateX(0);
  animation: siri-inline-in .35s ease;
}
@keyframes siri-inline-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0);    }
}
/* Narrating state — soft aqua glow on the inner card body. No ring,
   no blur on the card itself. The caption overlaps at the bottom of
   the card and owns the attention on its own. */
.shepherd-card.is-narrating .a-card {
  box-shadow: 0 0 60px -14px color-mix(in oklab, #1ad1ff 55%, transparent);
  transition: box-shadow .6s ease;
}
.siri-inline .siri-orb   { width: 18px; height: 18px; }
.siri-inline .siri-wave  { height: 16px; }
.siri-inline .siri-label { font-size: 10px; letter-spacing: 0.1em; }
.siri-inline .siri-wave span { width: 1.5px; }

.siri-orb {
  position: relative;
  width: 22px;
  height: 22px;
}
.siri-orb::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    color-mix(in oklab, var(--brand) 90%, white 10%) 0%,
    color-mix(in oklab, var(--brand) 70%, var(--text) 30%) 60%,
    color-mix(in oklab, var(--brand) 40%, transparent) 100%);
  box-shadow: 0 0 12px color-mix(in oklab, var(--brand) 60%, transparent);
  animation: siri-core 1.6s ease-in-out infinite;
}
.siri-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--brand) 50%, transparent);
  opacity: 0;
  animation: siri-ring 1.8s ease-out infinite;
}
.siri-ring.r2 { animation-delay: .3s; }
.siri-ring.r3 { animation-delay: .6s; }
@keyframes siri-ring {
  0%   { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0;   }
}
@keyframes siri-core {
  0%, 100% { transform: scale(1);    filter: brightness(1);   }
  50%      { transform: scale(1.18); filter: brightness(1.3); }
}
.siri-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
}
.siri-wave span {
  width: 2px;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--brand) 80%, var(--text) 20%);
  animation: siri-bar 900ms ease-in-out infinite;
}
.siri-wave span:nth-child(1) { animation-delay: .00s; }
.siri-wave span:nth-child(2) { animation-delay: .08s; }
.siri-wave span:nth-child(3) { animation-delay: .16s; }
.siri-wave span:nth-child(4) { animation-delay: .24s; }
.siri-wave span:nth-child(5) { animation-delay: .32s; }
.siri-wave span:nth-child(6) { animation-delay: .40s; }
.siri-wave span:nth-child(7) { animation-delay: .48s; }
.siri-wave span:nth-child(8) { animation-delay: .56s; }
.siri-wave span:nth-child(9) { animation-delay: .64s; }
@keyframes siri-bar {
  0%, 100% { height: 4px;  opacity: 0.6; }
  50%      { height: 18px; opacity: 1;   }
}
.siri-label {
  font: 600 11px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--brand) 70%, var(--text) 30%);
}
@media (max-width: 560px) {
  .siri-inline { padding: 3px 8px 3px 5px; gap: 6px; }
  .siri-inline .siri-label { display: none; }
  .siri-inline .siri-wave { height: 14px; }
}

/* ============================================================
   VOICE CAPTION — live transcript of the spoken round-off
   Aqua-blue per-word highlight follows the Cartesia audio.
   ============================================================ */
.voice-caption {
  --vc-aqua: #1ad1ff;
  position: relative;
  margin: 14px 18px 4px;
  padding: 14px 18px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--vc-aqua) 8%, var(--bg) 92%) 0%,
    color-mix(in oklab, var(--brand) 6%, var(--bg) 94%) 100%);
  border: 1px solid color-mix(in oklab, var(--vc-aqua) 35%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--vc-aqua) 20%, transparent),
    0 10px 40px -12px color-mix(in oklab, var(--vc-aqua) 30%, transparent);
  opacity: 0;
  transform: translateY(-6px);
  animation: vc-in .45s ease forwards;
}
@keyframes vc-in {
  to { opacity: 1; transform: translateY(0); }
}
.voice-caption.is-dismissing {
  animation: vc-out .4s ease forwards;
}
@keyframes vc-out {
  to { opacity: 0; transform: translateY(-4px); }
}
.voice-caption-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.voice-caption-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--vc-aqua) 70%, var(--text) 30%);
}
.voice-caption .vc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vc-aqua);
  box-shadow: 0 0 10px color-mix(in oklab, var(--vc-aqua) 80%, transparent);
  animation: vc-dot 1.3s ease-in-out infinite;
}
@keyframes vc-dot {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.4); opacity: 0.55;}
}
.voice-caption-status {
  font: 500 11px/1.2 var(--font-mono, ui-monospace);
  color: var(--muted);
  letter-spacing: 0.02em;
}
.voice-caption-text {
  font: 500 16px/1.65 var(--font-body, inherit);
  color: color-mix(in oklab, var(--text) 45%, transparent);
  max-height: 180px;
  overflow-y: auto;
  scroll-behavior: smooth;
  word-spacing: 0.01em;
}
/* Each sentence is its own line. Starts hidden and slides in the
   moment Theo is about to speak it, so the caption reveals
   line-by-line instead of all at once. */
.voice-caption-text .vc-sentence {
  display: block;
  opacity: 0;
  transform: translateY(6px);
  max-height: 0;
  overflow: hidden;
  transition:
    opacity .32s ease,
    transform .32s ease,
    max-height .4s ease,
    margin .3s ease;
  margin: 0;
}
.voice-caption-text .vc-sentence.is-visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 200px;
  margin: 0 0 6px;
}

.voice-caption-text .vc-word {
  display: inline-block;
  color: inherit;
  filter: blur(0);
  will-change: filter, color, opacity;
  transition:
    color .14s ease,
    opacity .14s ease,
    filter .14s ease,
    text-shadow .14s ease;
}
/* Currently-spoken word — bleeds into focus with a fast ink-blur
   reveal (same feel as the fast-mode writing animation). Single word
   at a time, but it FLIES between words because the animation is
   kept under 220ms end-to-end. */
.voice-caption-text .vc-word.is-spoken {
  color: var(--vc-aqua);
  opacity: 1;
  text-shadow:
    0 0 6px  color-mix(in oklab, var(--vc-aqua) 75%, transparent),
    0 0 18px color-mix(in oklab, var(--vc-aqua) 45%, transparent);
  animation: vc-bleed-in .22s cubic-bezier(.2, .7, .2, 1);
}
@keyframes vc-bleed-in {
  0%   { filter: blur(5px); opacity: .45; letter-spacing: .02em; }
  60%  { filter: blur(1.5px); opacity: .9; }
  100% { filter: blur(0);    opacity: 1;  letter-spacing: normal; }
}
/* Already-spoken words — soft aqua trail. Smooth transition from
   active → past so nothing flickers. */
.voice-caption-text .vc-word.is-past {
  color: color-mix(in oklab, var(--vc-aqua) 42%, var(--text) 58%);
  opacity: 0.88;
  text-shadow: none;
  filter: blur(0);
}

/* ============================================================
   BLUR VEIL — progressive disclosure for long fast-mode answers
   ============================================================ */
.blur-wrap {
  position: relative;
  margin-top: 8px;
  padding-bottom: 36px;
}
.blur-content {
  filter: blur(6px);
  opacity: 0.55;
  cursor: pointer;
  max-height: 120px;
  overflow: hidden;
  transition:
    filter .5s ease,
    opacity .5s ease,
    max-height .6s ease;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
  pointer-events: auto;
}
.blur-content:hover {
  filter: blur(4px);
  opacity: 0.75;
}
.blur-reveal-cta {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 22%, var(--bg));
  border: 1px solid color-mix(in oklab, var(--brand) 50%, var(--line));
  font: 700 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px -10px color-mix(in oklab, var(--brand) 60%, transparent);
  transition: transform .2s ease, box-shadow .2s ease;
  z-index: 2;
}
.blur-reveal-cta:hover {
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 10px 28px -10px color-mix(in oklab, var(--brand) 70%, transparent);
}
.blur-reveal-cta svg {
  transition: transform .25s ease;
}
.blur-wrap.is-revealed .blur-content {
  filter: blur(0);
  opacity: 1;
  max-height: 4000px;
  -webkit-mask-image: none;
          mask-image: none;
  pointer-events: auto;
  cursor: default;
}
.blur-wrap.is-revealed .blur-reveal-cta {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}

@media (max-width: 560px) {
  .voice-caption { margin: 12px 12px 4px; padding: 12px 14px 14px; }
  .voice-caption-text { font-size: 15px; max-height: 150px; }
}

/* ============================================================
   COMPANION CARDS — AGI autonomous surfacing during narration
   ============================================================ */
.companion-slot {
  margin-top: 10px;
  min-height: 0;
  position: relative;
}
.companion-card {
  --c-aqua: #1ad1ff;
  position: relative;
  display: block;
  padding: 12px 14px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--c-aqua) 10%, var(--bg) 90%) 0%,
    color-mix(in oklab, var(--c-aqua) 4%, var(--bg) 96%) 100%);
  border: 1px solid color-mix(in oklab, var(--c-aqua) 40%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--c-aqua) 18%, transparent),
    0 14px 40px -14px color-mix(in oklab, var(--c-aqua) 35%, transparent);
  opacity: 0;
  transform: translateY(6px) scale(0.985);
  filter: blur(4px);
  transition:
    opacity .38s cubic-bezier(.2,.7,.2,1),
    transform .38s cubic-bezier(.2,.7,.2,1),
    filter .38s cubic-bezier(.2,.7,.2,1);
}
.companion-card.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.companion-card.is-dismissing {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  filter: blur(3px);
  pointer-events: none;
}
.companion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.companion-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 10px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--c-aqua) 70%, var(--text) 30%);
}
.companion-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-aqua);
  box-shadow: 0 0 8px var(--c-aqua);
  animation: companion-pulse 1.1s ease-in-out infinite;
}
@keyframes companion-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.35); }
}
.companion-title {
  margin: 0 0 4px;
  font: 700 14px/1.3 var(--font-body, inherit);
  color: var(--text);
  letter-spacing: -0.005em;
}
.companion-author {
  margin: 2px 0 0;
  font: 500 12px/1.3 var(--font-body, inherit);
  color: color-mix(in oklab, var(--c-aqua) 55%, var(--text) 45%);
  letter-spacing: 0.02em;
}
.companion-body {
  margin: 0;
  font: 500 13.5px/1.55 var(--font-body, inherit);
  color: color-mix(in oklab, var(--text) 80%, transparent);
}
.companion-quote {
  margin: 0;
  font: 500 15px/1.55 var(--font-body, inherit);
  font-style: italic;
  color: var(--text);
  padding-left: 10px;
  border-left: 2px solid color-mix(in oklab, var(--c-aqua) 65%, transparent);
}
.companion-skeleton {
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 560px) {
  .companion-card { padding: 10px 12px 12px; }
  .companion-quote { font-size: 14px; }
  .companion-body  { font-size: 13px; }
}

/* ============================================================
   VOICE MIC BUTTON — docks inside the search shell next to Send.
   Idle: a calm outlined mic. Listening: aqua ring + wave bars.
   ============================================================ */
.voice-mic-btn {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--text) 4%, transparent);
  color: color-mix(in oklab, var(--text) 70%, var(--muted));
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.voice-mic-btn:hover {
  background: color-mix(in oklab, #1ad1ff 14%, transparent);
  border-color: color-mix(in oklab, #1ad1ff 45%, var(--line));
  color: var(--text);
}
.voice-mic-btn:active { transform: translateY(0.5px); }
.voice-mic-btn .mic-ico { display: block; }
.voice-mic-btn .mic-wave {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.voice-mic-btn .mic-wave span {
  display: inline-block;
  width: 2px;
  height: 4px;
  border-radius: 2px;
  background: #1ad1ff;
  animation: mic-wave 1s ease-in-out infinite;
}
.voice-mic-btn .mic-wave span:nth-child(2) { animation-delay: .1s; }
.voice-mic-btn .mic-wave span:nth-child(3) { animation-delay: .2s; }
.voice-mic-btn .mic-wave span:nth-child(4) { animation-delay: .3s; }
@keyframes mic-wave {
  0%, 100% { height: 4px;  opacity: 0.6; }
  50%      { height: 16px; opacity: 1;   }
}
.voice-mic-btn.is-listening {
  background: color-mix(in oklab, #1ad1ff 22%, transparent);
  border-color: #1ad1ff;
  color: #1ad1ff;
  box-shadow: 0 0 0 3px color-mix(in oklab, #1ad1ff 22%, transparent),
              0 0 24px -4px color-mix(in oklab, #1ad1ff 60%, transparent);
  animation: mic-pulse 1.4s ease-in-out infinite;
}
.voice-mic-btn.is-listening .mic-ico { display: none; }
.voice-mic-btn.is-listening .mic-wave { display: inline-flex; }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, #1ad1ff 18%, transparent),
                         0 0 22px -4px color-mix(in oklab, #1ad1ff 55%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, #1ad1ff 10%, transparent),
                         0 0 30px -2px color-mix(in oklab, #1ad1ff 75%, transparent); }
}
/* Tiny status toast anchored above the mic button. */
.voice-mic-toast {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--bg) 30%, #0a0f1a);
  border: 1px solid color-mix(in oklab, #1ad1ff 35%, var(--line));
  color: var(--text);
  font: 600 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 10;
}
.voice-mic-toast.is-visible { opacity: 1; transform: translateY(0); }
.voice-mic-toast[data-tone="warn"] {
  border-color: color-mix(in oklab, #ff6b6b 55%, var(--line));
  color: #ffb3b3;
}

/* ============================================================
   AGENTIC CARD — reuses the fast-mode Shepherd frame 1:1 so the
   card looks identical whether the user is in voice or text mode.
   Only the .a-body gets filled progressively beat-by-beat.
   ============================================================ */
.shepherd-card.is-agentic .a-body > * + * { margin-top: 10px; }
.agentic-segment {
  position: relative;
  padding: 2px 0;
}
.agentic-segment + .agentic-segment {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in oklab, #1ad1ff 22%, var(--line));
}
.agentic-segment > *:first-child { margin-top: 0; }
.agentic-segment > *:last-child  { margin-bottom: 0; }

/* ============================================================
   SIDE CARDS — floating mini panels docked left/right of the
   Shepherd card while it performs. They anchor to the card's
   position so they scroll with it. On narrow screens they
   collapse under the card as a horizontal rail.
   ============================================================ */
.shepherd-card { position: relative; }
.side-slot {
  position: absolute;
  top: 60px;                      /* below the .a-head row */
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;           /* slot is inert — cards opt-in */
  z-index: 3;
}
.side-slot.side-left  { right: calc(100% + 18px); }
.side-slot.side-right { left:  calc(100% + 18px); }
.side-slot .side-card { pointer-events: auto; }

@media (max-width: 1200px) {
  /* Not enough room for true left/right gutters — collapse both
     slots into a horizontal rail below the card. */
  .side-slot {
    position: static;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 14px;
  }
  .side-slot.side-left,
  .side-slot.side-right { left: auto; right: auto; }
  .side-slot .side-card { flex: 0 1 260px; }
}

.side-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg,
    color-mix(in oklab, #1ad1ff 8%, var(--bg)) 0%,
    color-mix(in oklab, #1ad1ff 3%, var(--bg)) 100%);
  border: 1px solid color-mix(in oklab, #1ad1ff 32%, var(--line));
  box-shadow:
    0 14px 34px -16px color-mix(in oklab, #1ad1ff 40%, transparent),
    0 0 0 1px color-mix(in oklab, #1ad1ff 14%, transparent);
  color: var(--text);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.side-card.is-in { opacity: 1; transform: translateY(0) scale(1); }
.side-card.is-dismissing {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transition: opacity .3s ease, transform .3s ease;
}
.side-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.side-card-kind {
  font: 700 10px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, #1ad1ff 80%, var(--text));
}
.side-card-pulse {
  width: 6px; height: 6px; border-radius: 999px;
  background: #1ad1ff;
  box-shadow: 0 0 0 0 color-mix(in oklab, #1ad1ff 60%, transparent);
  animation: side-pulse 1.6s ease-in-out infinite;
}
@keyframes side-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, #1ad1ff 55%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, #1ad1ff 0%,  transparent); }
}
.side-card-title {
  margin: 0;
  font: 700 14px/1.3 var(--font-body, inherit);
  color: var(--text);
}
.side-card-body {
  margin: 0;
  font: 400 13px/1.55 var(--font-body, inherit);
  color: color-mix(in oklab, var(--text) 78%, var(--muted));
}
.side-card-quote {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid color-mix(in oklab, #1ad1ff 45%, var(--line));
  font: italic 500 14px/1.5 var(--font-body, inherit);
  color: var(--text);
}
.side-card-author {
  font: 600 11.5px/1.3 var(--font-mono, ui-monospace);
  color: color-mix(in oklab, var(--text) 65%, var(--muted));
}
.side-card-list {
  margin: 0;
  padding-left: 18px;
  font: 400 13px/1.5 var(--font-body, inherit);
  color: color-mix(in oklab, var(--text) 82%, var(--muted));
}
.side-card-skeleton {
  color: color-mix(in oklab, var(--text) 50%, var(--muted));
  font-style: italic;
}
.side-card-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in oklab, var(--text) 50%, var(--muted));
  cursor: pointer;
  transition: background .15s, color .15s;
}
.side-card-close:hover {
  background: color-mix(in oklab, var(--text) 8%, transparent);
  color: var(--text);
}
.side-card-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.side-card-img,
.side-card-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  object-fit: cover;
  background: color-mix(in oklab, var(--text) 4%, transparent);
  display: block;
}
.side-card-img-wrap.side-card-skeleton {
  background: linear-gradient(
    110deg,
    color-mix(in oklab, var(--text) 4%, transparent) 0%,
    color-mix(in oklab, var(--text) 10%, transparent) 50%,
    color-mix(in oklab, var(--text) 4%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: side-card-shimmer 1.4s linear infinite;
}
@keyframes side-card-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.side-card-figure figcaption {
  font-weight: 600;
}
.side-card-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
  background: #000;
  display: block;
}
.side-card-cal {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 10px;
  align-items: baseline;
  padding: 6px 0 2px;
}
.side-cal-mon {
  grid-row: 1;
  font: 800 11px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.18em;
  color: color-mix(in oklab, #ff6b6b 80%, var(--text));
}
.side-cal-day {
  grid-row: 1 / span 2;
  grid-column: 1;
  font: 800 38px/1 var(--font-body, inherit);
  color: var(--text);
  margin-right: 6px;
}
.side-cal-year {
  grid-row: 2;
  font: 600 11px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.12em;
  color: color-mix(in oklab, var(--text) 60%, var(--muted));
}

/* ================================================================
   Rap Analyzer card (specialist knowledge card)
   Triggered by explicit "rap analyzer:" / "score bars:" prefixes or
   multi-line verses with an analyze instruction. Reads well across
   all themes via semantic CSS variables; rhyme-group highlights are
   intentionally vivid (set inline by the renderer).
   ================================================================ */
.rap-card {
  margin: 18px 0;
  padding: 22px 22px 16px;
  border: 1.5px solid color-mix(in oklab, var(--brand) 45%, var(--border));
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--brand) 18%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 50px -22px rgba(0, 0, 0, 0.45),
    0 6px 22px -8px color-mix(in oklab, var(--brand) 28%, transparent);
  position: relative;
  overflow: hidden;
}
body.is-light-theme .rap-card {
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--brand) 22%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 18px 40px -24px rgba(20, 10, 10, 0.18),
    0 6px 18px -10px color-mix(in oklab, var(--brand) 32%, transparent);
}
.rap-card.is-loading,
.rap-card.is-error { padding: 18px 22px; }
.rap-loading {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--muted);
}

/* Theme-aware mic icon for the rap analyzer brand row.
   Both <img>s render; the wrong one is hidden via CSS. The
   body.is-light-theme class is set by applyTheme() so any
   future light theme picks up the white mic automatically. */
.rap-card .rap-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.rap-card .rap-mic-img {
  width: 70px; height: 70px;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}
.rap-card .rap-engine-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 10px;
  margin: 4px 0 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 28%, transparent);
  white-space: nowrap;
}
.rap-card .rap-mic--light { display: none; }
body.is-light-theme .rap-card .rap-mic--dark  { display: none; }
body.is-light-theme .rap-card .rap-mic--light { display: block; }

/* Legacy emoji holder kept for fallback only (error toast, etc.). */
.rap-card .rap-spark {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent, #d97706) 18%, transparent);
}

.rap-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.rap-brand { display: flex; align-items: flex-start; gap: 16px; }
.rap-brand-text { display: flex; flex-direction: column; min-width: 0; }
.rap-brand .rap-title {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: #4ad6ff;
  text-shadow: 0 0 18px color-mix(in oklab, #4ad6ff 35%, transparent);
}
.rap-brand strong { display: block; font-size: 16px; letter-spacing: -0.01em; }
.rap-brand .rap-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; max-width: 46ch; }
.rap-grade { text-align: right; }
/* Old static grade — only used as a fallback if renderScoreDial isn't applied.
   The new dial below replaces this on every modern render. */
.rap-grade-num { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.rap-grade-num span.rap-score-suffix { font-size: 16px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.rap-grade-label { font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: 0.02em; }

.rap-verdict {
  font-size: 14px; line-height: 1.55;
  margin: 0 0 16px; padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--text) 4%, transparent);
  border: 1px solid var(--border);
}
.rap-verdict p { margin: 0; }

.rap-section { margin: 16px 0; }
.rap-h4 {
  font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted);
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.rap-tag {
  display: inline-block; font-size: 11px; padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--text) 8%, transparent);
  color: var(--text); letter-spacing: 0; text-transform: none;
}

.rap-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rap-bar {
  display: grid; grid-template-columns: 32px 1fr auto;
  align-items: baseline; gap: 12px;
  padding: 6px 8px; border-radius: 10px;
}
.rap-bar:hover { background: color-mix(in oklab, var(--text) 4%, transparent); }
.rap-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--muted); letter-spacing: 0.05em;
}
.rap-line { font-size: 15px; line-height: 1.7; }
.rap-w { display: inline-block; padding: 1px 4px; border-radius: 5px; transition: background 120ms ease; }
.rap-w.is-end { font-weight: 700; padding: 2px 8px; border-radius: 7px; }
.rap-w.is-internal {
  background: color-mix(in oklab, var(--text) 7%, transparent);
  border-bottom: 1px dashed color-mix(in oklab, var(--text) 35%, transparent);
}
.rap-w.is-allit {
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--text) 25%, transparent);
  text-underline-offset: 3px;
}

.rap-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.rap-syl { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rap-group {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: 6px;
  font-weight: 700; font-size: 11px;
}
.rap-group.is-empty { color: var(--muted); border-style: dashed; }

.rap-scheme {
  margin-top: 10px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--muted);
}
.rap-scheme-label { text-transform: uppercase; letter-spacing: 0.1em; }
.rap-scheme-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--text);
  background: color-mix(in oklab, var(--text) 6%, transparent);
  padding: 3px 8px; border-radius: 6px;
  letter-spacing: 0.15em; word-break: break-all;
}

.rap-meters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
}
.rap-meter {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--text) 3%, transparent);
}
.rap-meter-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 6px; }
.rap-meter-label { color: var(--text); }
.rap-meter-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--accent, #d97706); }
.rap-meter-bar { height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--text) 8%, transparent); overflow: hidden; }
.rap-meter-fill {
  height: 100%;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent, #d97706) 75%, var(--text)),
    var(--accent, #d97706));
  border-radius: 999px;
  transition: width 600ms cubic-bezier(.2,.7,.2,1);
}
.rap-meter-hint { font-size: 11px; color: var(--muted); margin-top: 6px; }

.rap-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px;
}
.rap-stats li {
  display: flex; justify-content: space-between; align-items: baseline;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; font-size: 13px;
}
.rap-stats li span { color: var(--muted); }
.rap-stats li b { font-weight: 700; }

.rap-tips { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; }

.rap-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--muted);
}

@media (max-width: 600px) {
  /* Stack the brand on top and center the score dial underneath so
     screenshots of the rap card are framed around the score — that's
     the part everyone shares. */
  .rap-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .rap-brand { align-items: center; text-align: center; }
  .rap-brand-text { align-items: center; }
  .rap-brand .rap-sub { max-width: none; }
  .rap-grade { text-align: center; }
  .rap-score-dial { margin: 4px auto 0; }
  .rap-bar { grid-template-columns: 28px 1fr; }
  .rap-meta { grid-column: 2 / 3; padding-left: 0; }
}

/* ============================================================
   Rap Analyzer — Soul Script v2 additions
   ============================================================ */

/* Per-bar score chip — colored by tier so the writer sees which
   bars are doing the heavy lifting. Sits next to the syl/group meta. */
.rap-bar-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 7px;
  font: 700 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  border-radius: 999px; border: 1px solid currentColor;
  letter-spacing: 0.02em;
}
.rap-bar-score.is-fire   { color: #16a34a; background: rgba(22,163,74,.12);  }
.rap-bar-score.is-strong { color: #0ea5e9; background: rgba(14,165,233,.12); }
.rap-bar-score.is-ok     { color: #d97706; background: rgba(217,119,6,.12);  }
.rap-bar-score.is-weak   { color: #dc2626; background: rgba(220,38,38,.10);  }

/* Literary devices — definition card per spotted device. */
.rap-devices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rap-dev {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--text) 3%, transparent);
}
.rap-dev-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rap-dev-type {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent, #d97706);
}
.rap-dev-bar {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in oklab, var(--text) 8%, transparent);
  color: var(--muted);
}
.rap-dev-bar.is-soft { background: transparent; border: 1px dashed var(--border); }
.rap-dev-quote {
  margin: 0 0 6px; padding: 6px 10px;
  border-left: 3px solid var(--accent, #d97706);
  font-style: italic; font-size: 13.5px; line-height: 1.45;
  color: var(--text);
}
.rap-dev-explain { margin: 0 0 4px; font-size: 13px; line-height: 1.5; }
.rap-dev-def { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.rap-dev-def em { font-style: normal; font-weight: 600; color: var(--text); }

/* Style + references chip rows. */
.rap-style-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.rap-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.2;
  background: transparent; color: var(--text);
}
.rap-chip.is-primary {
  border-color: var(--accent, #d97706); color: var(--accent, #d97706);
  background: color-mix(in oklab, var(--accent, #d97706) 10%, transparent);
  font-weight: 600;
}
.rap-chip.is-soft { color: var(--muted); }

/* Genre chips — warm amber/orange so the region/style is instantly
   distinguishable from artist names sitting beside them. */
.rap-chip.is-genre {
  background: color-mix(in oklab, #ff8a3d 18%, transparent);
  border-color: color-mix(in oklab, #ff8a3d 45%, transparent);
  color: #ffb27a;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rap-chip.is-genre.is-primary {
  background: color-mix(in oklab, #ff8a3d 30%, transparent);
  border-color: #ff8a3d;
  color: #ffd2ad;
  box-shadow: 0 0 14px -6px color-mix(in oklab, #ff8a3d 60%, transparent);
}
body.is-light-theme .rap-chip.is-genre { color: #b94a00; }
body.is-light-theme .rap-chip.is-genre.is-primary { color: #7a3000; }

/* Artist chips — aqua so the cross-region roster reads at a glance
   and is visually separate from the genre row. */
.rap-chip.is-artist {
  background: color-mix(in oklab, #4ad6ff 16%, transparent);
  border-color: color-mix(in oklab, #4ad6ff 42%, transparent);
  color: #9be3ff;
  font-weight: 600;
}
body.is-light-theme .rap-chip.is-artist { color: #0a6c99; }
.rap-style-evidence { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* Strengths reuses .rap-tips but in a lifted tone. */
.rap-strengths li::marker { color: #16a34a; }

/* Recommendations — bar-tagged, polite. */
.rap-recs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rap-rec {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: start;
  font-size: 13.5px; line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 10px;
}
.rap-rec-tip { color: var(--text); }

/* Closing encouragement line. */
.rap-closing {
  margin: 8px 0 0;
  font-size: 13.5px; line-height: 1.55;
  color: var(--muted);
  font-style: italic;
  padding: 10px 12px;
  border-left: 3px solid var(--accent, #d97706);
  background: color-mix(in oklab, var(--accent, #d97706) 6%, transparent);
  border-radius: 0 8px 8px 0;
}

/* "Question this analysis" action button. */
.rap-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
.rap-question-btn {
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  font: 600 12.5px/1 var(--font-sans, inherit);
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.rap-question-btn:hover {
  border-color: var(--accent, #d97706);
  background: color-mix(in oklab, var(--accent, #d97706) 10%, transparent);
}
.rap-question-btn:active { transform: scale(0.98); }

/* ============================================================
   MANKIND ORB — domain loader overlay
   ----------------------------------------------------------
   Plays for ~2s before the result card on "show-y" services
   (weather, sports, finance, games, rap, wiki, image, recipe).
   Background uses --panel so it reads against every theme;
   the orb itself glows in the active --brand.
   ============================================================ */
.orb-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 36px 24px;
  margin: 12px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  animation: orb-in 0.4s ease both;
  position: relative;
  overflow: visible;
  /* Sticky nav (~60-70px tall) was pushing the GIF half off-screen
     when scrollIntoView landed the orb top at viewport top. Reserve
     enough margin so the orb clears the nav AND has breathing room
     above. Hope spec 2026-05-15: "push it high a bit". */
  scroll-margin-top: 110px;
}
.orb-overlay.is-leaving { animation: orb-out 0.28s ease both; }
.orb-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative; z-index: 1;
}
.orb-gif {
  max-width: 432px;
  max-height: 432px;
  width: auto;
  height: auto;
  filter:
    drop-shadow(0 0 28px color-mix(in oklab, var(--brand) 55%, transparent))
    drop-shadow(0 0 60px color-mix(in oklab, var(--accent, var(--brand)) 28%, transparent));
  animation: orb-float 3s ease-in-out infinite;
  user-select: none;
  pointer-events: none;
}
.orb-meta { text-align: center; }
/* Rolling stage title — sits ABOVE the SUPACORE label, cycles every
   ~420ms via startLoader. First entry is always "Instantiating
   Shepherd Contract"; subsequent entries are domain-specific. */
.orb-stage {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  /* lower-case display: the JS feeds lowercase strings; we DO NOT
     uppercase them — Hope spec 2026-05-11: keep the mechanical
     terminal feel, all lowercase. */
  text-transform: none;
  color: #d4af37;                          /* gold accent */
  opacity: 0.95;
  text-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
  /* Lock a minimum width so successive stage swaps don't jitter the
     orb layout. Falls back gracefully on narrow viewports. */
  min-height: 1.2em;
  animation: orb-stage-in 120ms ease-out both;
}
.orb-stage.is-in {
  animation: orb-stage-in 120ms ease-out both;
}
@keyframes orb-stage-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 0.95; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .orb-stage,
  .orb-stage.is-in { animation: none; }
}
.orb-label {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--brand);
  opacity: 0.92;
}
.orb-sub {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted);
}
@keyframes orb-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes orb-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-6px) scale(0.98); }
}
@keyframes orb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (max-width: 640px) {
  .orb-overlay { padding: 24px 16px; }
  .orb-gif { max-width: 312px; max-height: 312px; }
}

/* ============================================================
   RAP ANALYZER — score halo + animated reveal for stats
   ----------------------------------------------------------
   The score is the single most-looked-at number on the card,
   so it gets a theme-agnostic gold halo that reads on every
   palette (cream Stanford, navy MIT, dark Sakura, etc.).
   Stats counters and the score itself fade-up + count-from-zero
   on first paint via the animateStats() runtime; this block
   provides the entrance polish.
   ============================================================ */
.rap-score-value,
.rap-overall-score,
.rap-score-num {
  background: linear-gradient(135deg, #ffd75e 0%, #ff7a59 50%, #ff3b8a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 18px color-mix(in oklab, #ff7a59 28%, transparent);
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
[data-theme="stanford"] .rap-score-value,
[data-theme="stanford"] .rap-overall-score,
[data-theme="stanford"] .rap-score-num,
[data-theme="tuks"]     .rap-score-value,
[data-theme="tuks"]     .rap-overall-score,
[data-theme="tuks"]     .rap-score-num,
[data-theme="unibo"]    .rap-score-value,
[data-theme="unibo"]    .rap-overall-score,
[data-theme="unibo"]    .rap-score-num {
  background: linear-gradient(135deg, #c8102e 0%, #1c3a8a 60%, #d4a73a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 12px color-mix(in oklab, #c8102e 22%, transparent);
}

/* Stats reveal — applied by the animateStats() runtime. */
.rap-stat-num.is-animating,
.rap-counter.is-animating {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  animation: rap-stat-pop 0.5s ease both;
}
@keyframes rap-stat-pop {
  0%   { opacity: 0; transform: translateY(6px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(-1px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}

/* ============================================================
   RAP ANALYZER — lyric highlight (karaoke slab)
   ----------------------------------------------------------
   The bar text gets a light aqua slab with forced-black ink so
   the lyrics read like karaoke. Works on every theme — black
   text on aqua is high-contrast everywhere.
   ============================================================ */
.rap-card .rap-line {
  background: #d6f5f0;          /* light aqua-blue */
  color: #0b1418 !important;    /* black-on-aqua, theme-overrides ignored */
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid #1c3a8a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.rap-card .rap-line .rap-w { color: #0b1418; }
.rap-card .rap-line .rap-w.is-end {
  background: #fff7c2;          /* warm yellow for end-rhymes */
  color: #0b1418;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.rap-card .rap-line .rap-w.is-internal {
  background: #cdebd6;          /* light lime for internal rhymes */
  color: #0b1418;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}
.rap-card .rap-line .rap-w.is-allit {
  text-decoration-color: rgba(0, 0, 0, 0.45);
}
.rap-card .rap-bar { padding: 4px 0; }
.rap-card .rap-bar:hover { background: transparent; }
.rap-card .rap-bar:hover .rap-line {
  background: #c7f2eb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 4px 14px -8px rgba(28, 58, 138, 0.45);
}

/* ============================================================
   RAP ANALYZER — Score Dial (huge headline meter)
   ----------------------------------------------------------
   Replaces the small top-right grade with a big circular meter.
   The SVG ring fills via stroke-dashoffset transition; the
   number inside is animated by animateNumber(). Lands last.
   ============================================================ */
.rap-score-dial {
  position: relative;
  width: 184px;
  height: 184px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.rap-score-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rap-ring-track {
  stroke: color-mix(in oklab, var(--text) 10%, transparent);
}
.rap-ring-fill {
  transition: stroke-dashoffset 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.rap-score-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px;
  text-align: center;
}
.rap-score-dial .rap-grade-num {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.rap-score-dial .rap-grade-num .rap-score-num {
  background: linear-gradient(135deg, #ffd75e 0%, #ff7a59 50%, #ff3b8a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 122, 89, 0.55))
          drop-shadow(0 0 28px rgba(255, 59, 138, 0.32));
  font-variant-numeric: tabular-nums;
}
.rap-score-dial .rap-score-suffix {
  font-size: 18px;
  color: var(--muted);
  font-weight: 600;
  -webkit-text-fill-color: currentColor;
}
.rap-score-dial .rap-grade-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 130px;
}
[data-theme="stanford"] .rap-score-dial .rap-grade-num .rap-score-num,
[data-theme="tuks"]     .rap-score-dial .rap-grade-num .rap-score-num,
[data-theme="unibo"]    .rap-score-dial .rap-grade-num .rap-score-num {
  background: linear-gradient(135deg, #c8102e 0%, #1c3a8a 60%, #d4a73a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(200, 16, 46, 0.5))
          drop-shadow(0 0 26px rgba(28, 58, 138, 0.32));
}

@media (max-width: 600px) {
  .rap-score-dial { width: 158px; height: 158px; }
  .rap-score-dial .rap-grade-num { font-size: 52px; }
}

/* ============================================================
   RAP ANALYZER — Tier gauges (WordSmith Level + Pen Game)
   ============================================================ */
.rap-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.rap-tier {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--text) 3%, transparent);
}
.rap-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rap-tier-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.rap-tier-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--text) 5%, transparent);
}
.rap-tier-pill.is-beginner { color: #6b7280; border-color: #6b7280; background: rgba(107,114,128,0.10); }
.rap-tier-pill.is-average  { color: #c97a17; border-color: #c97a17; background: rgba(201,122,23,0.12); }
.rap-tier-pill.is-pro      { color: #1d4ed8; border-color: #1d4ed8; background: rgba(29,78,216,0.12); }
.rap-tier-pill.is-vet      {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #ff7a59, #ff3b8a 60%, #1c3a8a);
  box-shadow: 0 4px 16px -6px rgba(255, 59, 138, 0.55);
}
.rap-tier-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--text) 8%, transparent);
  overflow: hidden;
}
.rap-tier-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd75e 0%, #ff7a59 50%, #ff3b8a 100%);
  box-shadow: 0 0 16px rgba(255, 122, 89, 0.45);
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.rap-tier-mark {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(0, 0, 0, 0.14);
}
.rap-tier-foot {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.rap-tier-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 20px;
  background: linear-gradient(135deg, #ffd75e, #ff7a59 50%, #ff3b8a);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.rap-tier-tip {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-align: right;
}

/* ============================================================
   HISTORY CARD v2 — DNA45's iconic museum exhibit.
   Eight sections, each color-coded so the eye learns the rhythm:
     1. Hero (movie-poster: blurred bg + sharp boxed portrait + title)
     2. Quick infobox (When / Where / Who / Outcome) — 4 accent stripes
     3. Timeline (collapsible accordion of date-ranged chapters)
     4. Cause -> Event -> Effect triptych
     5. Key figures (clickable avatars chain into bios)
     6. Did You Know? (gold-spark cards — the screenshot zone)
     7. Meanwhile in the world (parallel events)
     8. Legacy + Ask deeper (follow-up pills)
   Palette: deep ink card, saturated section accents
   (cyan/coral/violet/amber/gold/teal) and serif body type.
   ============================================================ */
/* Per-section accent palette \u2014 referenced by stripes, badges, glows. */
.hist-card {
  --hist-cyan:   #4ad6ff;
  --hist-coral:  #ff6b8a;
  --hist-violet: #c084fc;
  --hist-amber:  #ffb74d;
  --hist-gold:   #ffd75e;
  --hist-teal:   #34d6c2;
  --hist-rose:   #ff8fb1;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--panel) 92%, #ff6b8a 8%) 0%,
    color-mix(in oklab, var(--panel) 96%, #4ad6ff 4%) 35%,
    var(--panel) 100%
  );
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
}
.hist-card .hist-section { padding: 0 24px; }
.hist-card > .hist-info,
.hist-card > .hist-foot { padding: 0 24px; }

/* 1) HERO \u2014 movie-poster split (blurred bg + sharp boxed portrait) - */
.hist-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  /* Saturated rainbow back-glow that bleeds through the blurred photo */
  background:
    radial-gradient(ellipse at 12% 0%,  color-mix(in oklab, #ff6b8a 35%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 10%, color-mix(in oklab, #4ad6ff 35%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, color-mix(in oklab, #ffd75e 28%, transparent) 0%, transparent 60%),
    color-mix(in oklab, #0a0612 90%, transparent);
}
.hist-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(28px) saturate(1.35) brightness(0.55);
  transform: scale(1.18);
  z-index: 0;
  opacity: 0.85;
}
.hist-hero-bg-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in oklab, #000 25%, transparent) 0%, color-mix(in oklab, #000 60%, transparent) 100%),
    radial-gradient(ellipse at 20% 100%, color-mix(in oklab, #c084fc 20%, transparent) 0%, transparent 55%);
  z-index: 1;
}
.hist-hero-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 22px;
  align-items: center;
  padding: 28px 28px 30px;
  color: #fff;
}
.hist-hero-poster {
  margin: 0;
  width: 200px; height: 240px;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in oklab, #000 60%, transparent);
  border: 1px solid color-mix(in oklab, #fff 18%, transparent);
  box-shadow:
    0 18px 40px -16px color-mix(in oklab, #000 80%, transparent),
    0 0 0 1px color-mix(in oklab, var(--hist-gold) 40%, transparent),
    0 0 32px -8px color-mix(in oklab, var(--hist-gold) 50%, transparent);
}
.hist-hero-poster img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.hist-hero-poster:hover img { transform: scale(1.05); }
.hist-hero-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hist-hero--noimg {
  display: block;
  padding: 28px 24px 8px;
  color: var(--text);
}
.hist-hero--noimg .hist-hero-title { color: var(--text); }
.hist-hero--noimg .hist-hero-frame { color: var(--muted); }

.hist-era-chip {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1a0e00;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--hist-gold) 0%, var(--hist-amber) 100%);
  border: 1px solid color-mix(in oklab, var(--hist-gold) 70%, transparent);
  margin-bottom: 4px;
  box-shadow:
    0 6px 18px -6px color-mix(in oklab, var(--hist-amber) 80%, transparent),
    inset 0 1px 0 color-mix(in oklab, #fff 50%, transparent);
  font-weight: 700;
}

.hist-hero-title {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.04;
  text-shadow: 0 2px 22px color-mix(in oklab, #000 70%, transparent);
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in oklab, #fff 80%, var(--hist-gold) 20%) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hist-hero-frame {
  margin: 4px 0 0;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.55;
  max-width: 56ch;
  opacity: 0.94;
  color: #f1edff;
}
.hist-hero-locus {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}
.hist-locus-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, #fff 22%, transparent);
  background: color-mix(in oklab, #000 35%, transparent);
  color: #fff;
}
.hist-locus-when  { border-color: color-mix(in oklab, var(--hist-cyan)  70%, transparent); color: var(--hist-cyan); }
.hist-locus-where { border-color: color-mix(in oklab, var(--hist-amber) 70%, transparent); color: var(--hist-amber); }

/* 2) QUICK INFOBOX ------------------------------------------ */
.hist-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: -6px;
}
.hist-info-cell {
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  border: 1px solid var(--border);
}
.hist-info-cell .hist-info-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.hist-info-cell .hist-info-v {
  font-family: var(--font-sans, system-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.hist-info-when    { border-left: 3px solid #4ad6ff; }
.hist-info-where   { border-left: 3px solid #ffb74d; }
.hist-info-who     { border-left: 3px solid #c084fc; }
.hist-info-outcome { border-left: 3px solid #f87171; }

/* Generic section title — colored variants live below for each section. */
.hist-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 0;
  position: relative;
}
.hist-section-title::before {
  content: "";
  display: inline-block;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.7;
}
.hist-title-timeline  { color: var(--hist-cyan); }
.hist-title-dyk       { color: var(--hist-gold); }
.hist-title-parallels { color: var(--hist-amber); }
.hist-title-legacy    { color: var(--hist-rose); }

/* 3) TIMELINE \u2014 horizontal infographic chart-strip ----------
   Layout: each chapter is a card. Cards sit in a horizontal row
   connected by a coloured rail. Cards rotate through 6 accent
   colours (cyan/coral/violet/amber/teal/gold) so the whole strip
   reads like a chromatic flow chart. Each card has its own
   "Ask Shepherd" button \u2014 the data-q on the button re-enters the
   pipeline asking specifically about that period.

   Desktop  : horizontal scroll, snap-x, 280px columns
   Mobile   : vertical column with the rail rotating 90\u00b0 to a
              left-side connector + dots between cells.
   ============================================================ */
.hist-tl-scroll {
  margin: 0 -24px;
  padding: 0 24px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--hist-cyan) 40%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
  /* Isolate paint so chapter-card mounts don't reflow the whole panel. */
  contain: layout paint style;
}
.hist-tl-scroll::-webkit-scrollbar { height: 8px; }
.hist-tl-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--hist-coral), var(--hist-violet), var(--hist-cyan));
  border-radius: 8px;
}
.hist-timeline-strip {
  list-style: none;
  margin: 0;
  padding: 6px 4px 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: 0;
  align-items: stretch;
}
.hist-tl-cell {
  position: relative;
  scroll-snap-align: start;
  /* GPU layer per chapter card — prevents the flashing-square repaint
     artifact during fast horizontal drags. */
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: content;
  display: grid;
  grid-template-rows: 36px 1fr;
  padding: 0 12px;
}
/* Per-cell accent palette \u2014 cycles through 6 hues. */
.hist-tl-cell                     { --c: var(--hist-cyan);   }
.hist-tl-cell:nth-child(6n+2)     { --c: var(--hist-coral);  }
.hist-tl-cell:nth-child(6n+3)     { --c: var(--hist-violet); }
.hist-tl-cell:nth-child(6n+4)     { --c: var(--hist-amber);  }
.hist-tl-cell:nth-child(6n+5)     { --c: var(--hist-teal);   }
.hist-tl-cell:nth-child(6n+6)     { --c: var(--hist-gold);   }

/* Rail row: dot pinned at center, two horizontal lines extending
   left and right. The lines blend the current cell's colour with
   the next/prev colour by using currentColor + opacity tricks. */
.hist-tl-rail {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hist-tl-line {
  position: absolute;
  top: 50%;
  height: 3px;
  background: var(--c);
  border-radius: 3px;
  opacity: 0.7;
  transform: translateY(-50%);
}
.hist-tl-line--left  { left:  -12px; right: 50%; margin-right: 9px; }
.hist-tl-line--right { right: -12px; left:  50%; margin-left:  9px; }
.hist-tl-line.is-hidden { display: none; }
.hist-tl-dot {
  position: relative;
  width: 18px; height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff 0%, var(--c) 50%, color-mix(in oklab, var(--c) 55%, #000 45%) 100%);
  border: 2px solid var(--panel);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--c) 18%, transparent),
    0 0 16px -2px color-mix(in oklab, var(--c) 80%, transparent);
  z-index: 1;
}
.hist-tl-dot::after {
  /* Outer halo pulse \u2014 subtle, calls attention to the chart */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--c) 60%, transparent);
  opacity: 0;
  animation: histTLPulse 3.6s ease-out infinite;
  animation-delay: calc(var(--cell-i, 0) * 0.4s);
}
@keyframes histTLPulse {
  0%   { transform: scale(0.8); opacity: 0.7; }
  60%  { transform: scale(1.6); opacity: 0;   }
  100% { transform: scale(1.6); opacity: 0;   }
}

/* The card itself */
.hist-tl-card {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--c) 35%, transparent);
  background:
    radial-gradient(ellipse at top, color-mix(in oklab, var(--c) 14%, transparent) 0%, transparent 60%),
    linear-gradient(160deg,
      color-mix(in oklab, var(--bg) 60%, transparent) 0%,
      color-mix(in oklab, var(--bg) 80%, transparent) 100%);
  box-shadow:
    0 6px 22px -14px color-mix(in oklab, var(--c) 70%, transparent),
    inset 0 1px 0 color-mix(in oklab, #fff 6%, transparent);
  position: relative;
  isolation: isolate;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hist-tl-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px -14px color-mix(in oklab, var(--c) 75%, transparent),
    inset 0 1px 0 color-mix(in oklab, #fff 8%, transparent);
}
.hist-tl-range {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--c);
  white-space: nowrap;
  text-transform: uppercase;
}
.hist-tl-headline {
  margin: 0;
  font-family: var(--font-sans, system-ui);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.hist-tl-details-text {
  margin: 0;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted-2, var(--muted));
  /* Cap to 6 lines so cards stay roughly equal height */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hist-tl-shepherd {
  appearance: none;
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--c) 50%, transparent);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--c) 18%, transparent) 0%,
    color-mix(in oklab, var(--c) 8%, transparent) 100%);
  color: var(--c);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
}
.hist-tl-shepherd:hover {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--c) 32%, transparent) 0%,
    color-mix(in oklab, var(--c) 18%, transparent) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--c) 60%, transparent);
}
.hist-tl-shepherd-spark {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c);
  color: #0a0612;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--c) 70%, transparent));
}

/* Mobile \u2014 vertical stack with a left rail. Same colour rotation,
   just rotated 90\u00b0. */
@media (max-width: 720px) {
  .hist-tl-scroll {
    margin: 0;
    padding: 0;
    overflow-x: visible;
  }
  .hist-timeline-strip {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 4px 0;
  }
  .hist-tl-cell {
    grid-template-rows: auto;
    grid-template-columns: 32px 1fr;
    padding: 0;
    gap: 0;
  }
  .hist-tl-rail {
    height: auto;
    width: 32px;
    align-self: stretch;
    flex-direction: column;
  }
  .hist-tl-line {
    position: absolute;
    left: 50%;
    width: 3px;
    height: auto;
    transform: translateX(-50%);
  }
  .hist-tl-line--left  { top: -14px; bottom: 50%; margin-bottom: 11px; left: 50%; right: auto; }
  .hist-tl-line--right { top:  50%; bottom: -14px; margin-top:    11px; left: 50%; right: auto; }
  .hist-tl-card { margin-top: 0; }
}

/* 6.5) DID YOU KNOW \u2014 the screenshot section. -------------- */
.hist-section--dyk {
  position: relative;
}
.hist-dyk-spark {
  display: inline-block;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--hist-gold) 80%, transparent));
  animation: histSpark 2.4s ease-in-out infinite;
}
@keyframes histSpark {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(6deg)  scale(1.12); }
}
.hist-dyk-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.hist-dyk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 14px 56px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in oklab, var(--hist-gold) 22%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, color-mix(in oklab, var(--hist-amber) 14%, transparent) 0%, color-mix(in oklab, var(--hist-rose) 8%, transparent) 100%);
  border: 1px solid color-mix(in oklab, var(--hist-gold) 35%, transparent);
  box-shadow: 0 8px 24px -16px color-mix(in oklab, var(--hist-gold) 60%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hist-dyk-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px color-mix(in oklab, var(--hist-gold) 80%, transparent);
}
.hist-dyk-shepherd {
  appearance: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--hist-gold) 55%, transparent);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--hist-gold) 22%, transparent) 0%,
    color-mix(in oklab, var(--hist-amber) 12%, transparent) 100%);
  color: #6b4c00;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}
body:not(.is-light-theme) .hist-dyk-shepherd { color: var(--hist-gold); }
.hist-dyk-shepherd:hover {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--hist-gold) 35%, transparent) 0%,
    color-mix(in oklab, var(--hist-amber) 22%, transparent) 100%);
  transform: translateY(-1px);
}
.hist-dyk-shepherd-spark {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hist-gold), var(--hist-amber));
  color: #1a0e00;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}
.hist-dyk-num {
  position: absolute;
  top: 12px; left: 14px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--hist-gold) 0%, var(--hist-amber) 100%);
  color: #1a0e00;
  box-shadow: 0 4px 12px -2px color-mix(in oklab, var(--hist-amber) 70%, transparent);
}
.hist-dyk-text {
  margin: 0;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
}
body.is-light-theme .hist-dyk-card { background:
  radial-gradient(ellipse at 0% 0%, color-mix(in oklab, var(--hist-gold) 30%, transparent) 0%, transparent 60%),
  linear-gradient(135deg, color-mix(in oklab, var(--hist-amber) 22%, transparent) 0%, color-mix(in oklab, var(--hist-rose) 14%, transparent) 100%);
}

/* 4) CAUSE -> EVENT -> EFFECT triptych ---------------------- */
.hist-triptych {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.hist-tri {
  position: relative;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.hist-tri p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.hist-tri-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.hist-tri--cause  { border-left: 3px solid #f87171; }
.hist-tri--effect { border-left: 3px solid #4ade80; }
.hist-tri--event {
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent);
  box-shadow: 0 8px 30px -14px color-mix(in oklab, var(--brand) 60%, transparent);
}
.hist-tri--event .hist-tri-label { color: var(--brand); font-weight: 700; }
/* Connecting chevrons between the three boxes (desktop only) */
.hist-tri--cause::after,
.hist-tri--event::after {
  content: "";
  position: absolute;
  top: 50%; right: -12px;
  width: 24px; height: 24px;
  transform: translateY(-50%);
  background-image: linear-gradient(135deg, transparent 45%, color-mix(in oklab, var(--brand) 60%, transparent) 45% 55%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* 5) KEY FIGURES ------------------------------------------- */
.hist-figures {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.hist-figure-btn {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.hist-figure-btn:hover {
  background: color-mix(in oklab, #c084fc 14%, transparent);
  border-color: color-mix(in oklab, #c084fc 55%, transparent);
  transform: translateY(-2px);
}
.hist-figure-avatar {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #c084fc 0%, #4ad6ff 100%);
  color: #0a0e1a;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  box-shadow: 0 0 18px -6px color-mix(in oklab, #c084fc 70%, transparent);
}
.hist-figure-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hist-figure-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.hist-figure-role {
  font-size: 12.5px; line-height: 1.35; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}

/* 6) MEANWHILE IN THE WORLD --------------------------------- */
.hist-parallels {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.hist-parallel {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 10px 14px;
  border-left: 2px dashed color-mix(in oklab, var(--brand) 40%, transparent);
  background: color-mix(in oklab, var(--bg) 35%, transparent);
  border-radius: 0 10px 10px 0;
}
.hist-parallel-where {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffb74d;
  align-self: center;
}
.hist-parallel-event { font-size: 13.5px; line-height: 1.5; color: var(--text); }

/* 7) LEGACY + ASK DEEPER ------------------------------------ */
.hist-legacy { padding-bottom: 6px; }
.hist-legacy-text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  font-family: var(--font-serif, Georgia, serif);
}
.hist-ask-row {
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in oklab, #4ad6ff 10%, transparent);
  border: 1px dashed color-mix(in oklab, #4ad6ff 40%, transparent);
}
.hist-ask-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4ad6ff;
  margin-bottom: 10px;
}
.hist-ask-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hist-ask-pill {
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, #4ad6ff 14%, transparent);
  border: 1px solid color-mix(in oklab, #4ad6ff 45%, transparent);
  color: #9be3ff;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.hist-ask-pill:hover {
  background: color-mix(in oklab, #4ad6ff 28%, transparent);
  border-color: #4ad6ff;
  transform: translateY(-1px);
}
body.is-light-theme .hist-ask-pill { color: #0a6c99; }

.hist-fallback-p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}

/* Footer */
.hist-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 24px 18px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.hist-foot a { color: var(--brand); text-decoration: none; }
.hist-foot a:hover { text-decoration: underline; }

.hist-foot-credit a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in oklab, var(--brand) 50%, transparent);
}
.hist-foot-credit a:hover { border-bottom-color: var(--brand); }

/* Mobile tuning -------------------------------------------- */
@media (max-width: 720px) {
  .hist-info { grid-template-columns: repeat(2, 1fr); }
  .hist-triptych { grid-template-columns: 1fr; }
  .hist-tri--cause::after,
  .hist-tri--event::after { display: none; }
  .hist-parallel { grid-template-columns: 1fr; gap: 4px; }
  .hist-parallel-where { font-size: 10px; }
  /* Hero stacks: poster centered above title text */
  .hist-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 24px 20px 26px;
  }
  .hist-hero-poster {
    width: 160px; height: 200px;
    margin: 0 auto;
  }
  .hist-hero-text { align-items: center; }
  .hist-era-chip { align-self: center; }
  .hist-hero-locus { justify-content: center; }
  .hist-hero-frame { max-width: none; }
  /* Timeline: shrink the date column so headlines breathe */
  .hist-tl-summary { grid-template-columns: 100px 1fr 24px; gap: 10px; padding: 12px 14px; }
  .hist-tl-range { font-size: 11px; }
  .hist-tl-headline { font-size: 14px; }
}
@media (max-width: 480px) {
  .hist-card .hist-section,
  .hist-card > .hist-info,
  .hist-card > .hist-foot { padding-left: 16px; padding-right: 16px; }
  .hist-info { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hist-figures { grid-template-columns: 1fr; }
  .hist-dyk-list { grid-template-columns: 1fr; }
  /* Stack range above headline so neither truncates on small phones */
  .hist-tl-summary {
    grid-template-columns: 1fr 24px;
    grid-template-areas:
      "range chev"
      "head  head";
    row-gap: 6px;
  }
  .hist-tl-range    { grid-area: range; }
  .hist-tl-chevron  { grid-area: chev; }
  .hist-tl-headline { grid-area: head; }
}

/* ============================================================
   FREEDOM DAY FINEPRINT (27 April only \u2014 24h window)
   ------------------------------------------------------------
   Tiny one-line credit pinned to the very bottom of the viewport
   on the LANDING page only. Rainbow shimmer text - NO background,
   NO border, NO chrome. Hidden off-season AND on the results view.
   Gated by `is-freedom-day-d1` which lives only on April 27 - so
   it auto-disappears 24h later on the 28th.
   ============================================================ */
.freedom-fineprint {
  display: none;
}
body.is-freedom-day-d1:not([data-view="results"]) .freedom-fineprint {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 6px;
  z-index: 5;
  text-align: center;
  pointer-events: none;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  /* Rainbow shimmer: SA flag colours + a touch of violet, animated
     across the text via background-clip. No fill colour - the gradient
     IS the text. */
  background: linear-gradient(
    90deg,
    #de3831 0%,    /* red    */
    #ffb81c 20%,   /* gold   */
    #007a4d 40%,   /* green  */
    #00209b 60%,   /* blue   */
    #8a3ffc 80%,   /* violet */
    #de3831 100%   /* loop   */
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: freedomFineprintShimmer 6s linear infinite;
}
@keyframes freedomFineprintShimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
@media (max-width: 520px) {
  body.is-freedom-day-d1:not([data-view="results"]) .freedom-fineprint {
    font-size: 8.5px;
    letter-spacing: 0.14em;
    bottom: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.is-freedom-day-d1 .freedom-fineprint { animation: none; }
}

/* ============================================================
   SASSA GRANTS CARD
   ----------------------------------------------------------
   Most-searched topic in SA. Built dignified — large legible
   date hero, gold/teal accent palette inspired by SASSA's
   brand without aping it, full-width on mobile. Logo swaps:
   white logo on dark themes, black logo on light themes.
   ============================================================ */
.sassa-card {
  padding: 22px 22px 18px;
  /* Mood vars — used for tasteful gradients only. SASSA's official
     accent is teal; we pair with old gold (--accent fallback) for the
     warm dignified feeling. */
  --sassa-teal: #0a7a76;
  --sassa-teal-soft: #14a39e;
  --sassa-gold: #d4a73a;
  --sassa-warm: #fff7e6;
}
.sassa-card::before {
  background:
    radial-gradient(560px 280px at -10% -10%, color-mix(in oklab, var(--sassa-teal) 24%, transparent), transparent 55%),
    radial-gradient(420px 220px at 110% 110%, color-mix(in oklab, var(--sassa-gold) 22%, transparent), transparent 55%);
}
/* Payday accent: when today IS payday, the entire card lifts with a
   warm gold halo. Subtle but unmistakable. */
.sassa-card.is-payday::before {
  background:
    radial-gradient(560px 280px at -10% -10%, color-mix(in oklab, var(--sassa-gold) 36%, transparent), transparent 55%),
    radial-gradient(420px 220px at 110% 110%, color-mix(in oklab, var(--sassa-teal) 28%, transparent), transparent 55%);
}

/* ----- Header ----- */
.sassa-head { align-items: flex-start; }
.sassa-head-left {
  display: flex; align-items: center; gap: 12px;
  min-width: 0; flex: 1 1 auto;
}
.sassa-logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  /* Big enough to actually read the SASSA badge — Hope's note: people
     must see the logo. Was 56 → 96. No box, no padding — let the logo
     breathe directly against the card surface. */
  width: 96px; height: 96px;
  flex-shrink: 0;
}
.sassa-logo {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  /* Subtle drop shadow so the silhouette has a tiny lift without
     looking like a button. */
  filter: drop-shadow(0 2px 8px color-mix(in oklab, var(--sassa-teal) 28%, transparent));
}
/* By default (dark themes), show the WHITE logo and hide the black one. */
.sassa-logo-light { display: none; }
.sassa-logo-dark  { display: block; }
/* Light themes: swap. Match the same theme set used elsewhere for the
   DNA45 main logo. */
[data-theme="stanford"] .sassa-logo-light,
[data-theme="tuks"]     .sassa-logo-light,
[data-theme="unibo"]    .sassa-logo-light { display: block; }
[data-theme="stanford"] .sassa-logo-dark,
[data-theme="tuks"]     .sassa-logo-dark,
[data-theme="unibo"]    .sassa-logo-dark  { display: none; }

.sassa-head-titles { min-width: 0; }
.sassa-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sassa-teal-soft) 80%, var(--muted));
  margin-bottom: 4px;
}
.sassa-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
  line-height: 1.15;
}

/* ----- HERO ----- */
.sassa-hero {
  margin: 6px 0 22px;
  padding: 24px 20px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--sassa-teal) 22%, var(--bg-soft)) 0%,
    color-mix(in oklab, var(--sassa-gold) 14%, var(--bg-soft)) 100%);
  border: 1px solid color-mix(in oklab, var(--sassa-teal) 30%, var(--line));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sassa-hero::after {
  /* Faint stripe pattern reminiscent of an official document. */
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in oklab, var(--sassa-gold) 6%, transparent) 0,
    color-mix(in oklab, var(--sassa-gold) 6%, transparent) 1px,
    transparent 1px, transparent 14px);
  pointer-events: none;
}
.sassa-hero > * { position: relative; z-index: 1; }
.sassa-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sassa-gold) 80%, var(--text));
  font-weight: 700;
  margin-bottom: 8px;
}
.sassa-hero-countdown {
  display: flex; align-items: baseline; justify-content: center;
  gap: 10px;
  margin: 4px 0 12px;
}
.sassa-hero-num {
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(64px, 12vw, 110px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--sassa-gold) 92%, #fff) 0%,
    color-mix(in oklab, var(--sassa-teal-soft) 70%, #000) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px color-mix(in oklab, var(--sassa-gold) 16%, transparent);
}
.sassa-hero-unit {
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--text) 80%, transparent);
}
.sassa-hero-today {
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(56px, 11vw, 96px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 4px 0 12px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--sassa-gold) 95%, #fff) 0%,
    color-mix(in oklab, var(--sassa-gold) 70%, #000) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sassaPulse 1.6s ease-in-out infinite alternate;
}
@keyframes sassaPulse {
  from { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
  to   { filter: drop-shadow(0 6px 16px color-mix(in oklab, var(--sassa-gold) 55%, transparent)); transform: scale(1.015); }
}
.sassa-hero-date {
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(16px, 2.6vw, 22px);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--text);
  margin-bottom: 8px;
}
.sassa-hero-stream {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--sassa-teal) 22%, transparent);
  border: 1px solid color-mix(in oklab, var(--sassa-teal) 35%, var(--line));
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}
/* ----- Mini live timer (the "source of hope" ticker) -----
   Sits beneath the big N-days number. Quiet, monospace, tabular nums
   so the digits don't jitter. The whole row pulses very faintly so
   the eye registers it as alive without being noisy. */
.sassa-mini-timer {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  margin: 4px auto 10px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--text);
  letter-spacing: 0.04em;
  animation: sassaMiniBreathe 2.4s ease-in-out infinite alternate;
}
@keyframes sassaMiniBreathe {
  from { opacity: 0.85; }
  to   { opacity: 1; }
}
.sassa-mini-cell {
  display: inline-flex; align-items: baseline; gap: 2px;
}
.sassa-mini-num {
  font-weight: 800;
  font-size: 14px;
  color: color-mix(in oklab, var(--sassa-gold) 60%, var(--text));
  min-width: 1.6em;
  text-align: center;
}
.sassa-mini-lab {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
}
.sassa-mini-sep {
  color: color-mix(in oklab, var(--sassa-teal) 60%, var(--muted));
  font-weight: 700;
  margin: 0 1px;
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .sassa-mini-timer { animation: none; }
}

/* ----- Section titles ----- */
.sassa-section-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 16px; font-weight: 800;
  letter-spacing: 0.005em;
  margin: 18px 0 12px;
  color: var(--text);
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
}
.sassa-section-sub {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----- This Month: 3 stream cards ----- */
.sassa-stream-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sassa-stream-card {
  position: relative;
  padding: 14px 12px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg-soft) 70%, transparent);
  border: 1px solid var(--line);
  text-align: center;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.sassa-stream-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--sassa-teal) 40%, var(--line));
}
.sassa-stream-card.is-past {
  opacity: 0.55;
  background: color-mix(in oklab, var(--bg-soft) 90%, transparent);
}
.sassa-stream-card.is-hit {
  border-color: var(--sassa-gold);
  box-shadow: 0 0 0 1px var(--sassa-gold), 0 8px 24px color-mix(in oklab, var(--sassa-gold) 20%, transparent);
  background: color-mix(in oklab, var(--sassa-gold) 14%, var(--bg-soft));
}
/* ----- SASSA icons (black PNG by default; inverted to white on dark
   themes so they read against the panel). Used everywhere we used to
   have an emoji. No fallback character — these always render through
   <img>, which lets us scale and theme freely. */
.sassa-icon {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}
/* Default behaviour (dark themes): invert the black silhouette to
   white. Brightness bump compensates for the loss in pure-invert. */
.sassa-icon {
  filter: invert(1) brightness(1.05);
}
/* Light themes (Stanford/Tuks): keep the icons black so they read on
   the cream background. */
[data-theme="stanford"] .sassa-icon,
[data-theme="tuks"]     .sassa-icon,
[data-theme="unibo"]    .sassa-icon {
  filter: none;
}

/* Stream card icon block — centered above the day number. */
.sassa-stream-icon-wrap {
  width: 38px; height: 38px;
  margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
}
/* Amount card icon block — top-left of the card. */
.sassa-amount-icon-wrap {
  width: 30px; height: 30px;
  margin-bottom: 6px;
  display: flex; align-items: center; justify-content: flex-start;
}
/* Hero pill icon — tiny inline glyph. */
.sassa-hero-icon-wrap {
  width: 16px; height: 16px;
  display: inline-flex;
}
.sassa-hero-icon-wrap .sassa-icon { width: 100%; height: 100%; }
.sassa-stream-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.sassa-stream-day {
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(36px, 6vw, 52px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sassa-stream-month {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em;
  font-weight: 700;
  color: color-mix(in oklab, var(--sassa-teal-soft) 80%, var(--text));
  margin-top: 2px;
}
.sassa-stream-status {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--muted-2);
}
.sassa-stream-card.is-hit .sassa-stream-status {
  color: var(--sassa-gold);
  font-weight: 700;
}
.sassa-stream-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--sassa-teal) 8%, transparent);
  border-left: 3px solid color-mix(in oklab, var(--sassa-teal) 60%, var(--line));
  border-radius: 6px;
  font-size: 13px; line-height: 1.5;
  color: color-mix(in oklab, var(--text) 85%, var(--muted));
}

/* ----- Amounts grid ----- */
.sassa-amounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.sassa-amount-card {
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg-soft) 70%, transparent);
  border: 1px solid var(--line);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.sassa-amount-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--sassa-gold) 40%, var(--line));
}
.sassa-amount-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  min-height: 26px;
}
.sassa-amount-value {
  display: flex; align-items: baseline; gap: 2px;
  margin-bottom: 4px;
}
.sassa-amount-currency {
  font-family: var(--font-display, var(--font-body));
  font-size: 18px; font-weight: 700;
  color: color-mix(in oklab, var(--sassa-gold) 75%, var(--text));
  margin-right: 1px;
}
.sassa-amount-num {
  font-family: var(--font-display, var(--font-body));
  font-size: 30px; font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sassa-amount-delta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  margin-bottom: 4px;
}
.sassa-amount-prev {
  color: var(--muted-2);
  text-decoration: line-through;
}
.sassa-amount-up {
  color: #16a34a;
  font-weight: 700;
}
.sassa-amount-note {
  font-size: 11.5px; line-height: 1.4;
  color: var(--muted);
}

/* ----- Schedule (collapsible) ----- */
.sassa-schedule { margin-top: 18px; }
.sassa-schedule-toggle {
  appearance: none;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--sassa-teal) 10%, var(--bg-soft));
  border: 1px solid color-mix(in oklab, var(--sassa-teal) 25%, var(--line));
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text);
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.sassa-schedule-toggle:hover {
  background: color-mix(in oklab, var(--sassa-teal) 18%, var(--bg-soft));
}
.sassa-schedule-toggle-caret {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}
.sassa-schedule-toggle.is-open .sassa-schedule-toggle-caret {
  transform: rotate(180deg);
}
.sassa-schedule-body {
  margin-top: 10px;
  animation: fadeUp 0.32s ease both;
}
.sassa-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.sassa-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.sassa-table thead th {
  position: sticky; top: 0;
  background: color-mix(in oklab, var(--sassa-teal) 16%, var(--bg-soft));
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  border-bottom: 1px solid color-mix(in oklab, var(--sassa-teal) 30%, var(--line));
  white-space: nowrap;
}
.sassa-th-icon { margin-right: 4px; }
.sassa-table tbody th[scope="row"] {
  text-align: left;
  padding: 9px 12px;
  font-weight: 700;
  color: var(--text);
  background: color-mix(in oklab, var(--bg-soft) 80%, transparent);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.sassa-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.sassa-table .sassa-cell-day {
  font-family: var(--font-display, var(--font-body));
  font-size: 18px; font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
.sassa-table .sassa-cell-mon {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.sassa-table tr.is-past-row { opacity: 0.55; }
.sassa-table tr.is-current-row {
  background: color-mix(in oklab, var(--sassa-gold) 10%, transparent);
}
.sassa-table tr.is-current-row th[scope="row"] {
  background: color-mix(in oklab, var(--sassa-gold) 16%, var(--bg-soft));
  color: color-mix(in oklab, var(--sassa-gold) 70%, var(--text));
}
.sassa-table td.is-today {
  background: var(--sassa-gold);
}
.sassa-table td.is-today .sassa-cell-day,
.sassa-table td.is-today .sassa-cell-mon {
  color: #1a1410;
  font-weight: 800;
}

/* ----- Info section ----- */
.sassa-info { margin-top: 22px; }
.sassa-info-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sassa-info-col {
  padding: 14px 16px;
  background: color-mix(in oklab, var(--bg-soft) 60%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.sassa-info-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 13.5px; font-weight: 800;
  letter-spacing: 0.005em;
  color: var(--text);
  margin: 0 0 8px;
}
.sassa-info-list {
  margin: 0; padding-left: 18px;
  font-size: 13px; line-height: 1.6;
  color: color-mix(in oklab, var(--text) 85%, var(--muted));
}
.sassa-info-list li { margin-bottom: 4px; }
.sassa-info-list li:last-child { margin-bottom: 0; }
.sassa-info-list strong { color: var(--text); font-weight: 700; }
.sassa-link {
  color: color-mix(in oklab, var(--sassa-teal-soft) 90%, var(--text));
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid color-mix(in oklab, var(--sassa-teal-soft) 30%, transparent);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.sassa-link:hover {
  color: var(--sassa-gold);
  border-bottom-color: color-mix(in oklab, var(--sassa-gold) 60%, transparent);
}

/* ----- SASSA brand pill (uses .sassa-pill modifier on brandChip) ----- */
.sassa-pill .brand-chip-dot,
.brand-chip.sassa-pill {
  background: color-mix(in oklab, var(--sassa-teal) 25%, transparent);
  border-color: color-mix(in oklab, var(--sassa-teal) 50%, var(--line));
  color: color-mix(in oklab, var(--sassa-teal-soft) 80%, var(--text));
}

/* ----- Mobile ----- */
@media (max-width: 640px) {
  .sassa-card { padding: 18px 16px 14px; }
  .sassa-logo-chip { width: 48px; height: 48px; }
  .sassa-title { font-size: 18px; }
  .sassa-hero { padding: 20px 16px 18px; }
  .sassa-stream-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sassa-stream-card { padding: 10px 6px; }
  .sassa-stream-icon { font-size: 22px; }
  .sassa-stream-label { font-size: 9.5px; letter-spacing: 0.04em; }
  .sassa-stream-day { font-size: 32px; }
  .sassa-stream-month { font-size: 10px; }
  .sassa-stream-status { font-size: 9.5px; }
  .sassa-amounts-grid { grid-template-columns: 1fr 1fr; }
  .sassa-info-cols { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .sassa-amounts-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   TAXI FARES CARD
   ========================================================== */
.taxi-card {
  --taxi-yellow: #ffd54a;
  --taxi-yellow-soft: color-mix(in oklab, var(--taxi-yellow) 14%, transparent);
  --taxi-yellow-line: color-mix(in oklab, var(--taxi-yellow) 35%, var(--line));
  position: relative;
  padding: 18px;
  border: 1px solid var(--taxi-yellow-line);
  border-radius: 18px;
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--taxi-yellow) 5%, var(--bg)) 0%,
    var(--bg-soft) 60%);
  box-shadow: 0 12px 40px color-mix(in oklab, var(--taxi-yellow) 12%, transparent);
}
.taxi-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 14px;
}
.taxi-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.taxi-head-titles { min-width: 0; }
.taxi-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.taxi-title {
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 800; margin: 0; color: var(--text);
  letter-spacing: 0.005em; line-height: 1.2;
}
.taxi-arrow {
  display: inline-block; margin: 0 4px;
  color: color-mix(in oklab, var(--taxi-yellow) 70%, var(--muted));
  font-weight: 700;
}
.taxi-logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  /* Hope's 2026-05-05 nudge: chip a touch bigger so the Quantum
     silhouette reads instantly on the far left. */
  width: 108px; height: 108px; flex: 0 0 108px;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 30%,
    color-mix(in oklab, var(--taxi-yellow) 30%, transparent) 0%, transparent 60%);
  padding: 6px;
}
.taxi-logo {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 12px color-mix(in oklab, var(--taxi-yellow) 35%, transparent));
}
.taxi-pill { flex: 0 0 auto; align-self: flex-start; }

/* ----------------------------------------------------------------
   SANTACO wordmark panel — dead-center of the taxi card header,
   sandwiched between the Quantum chip on the far left and the
   DNA45 · TaxiFares pill on the far right. Wide dark slab so the
   white-rendered SANTACO.png reads cleanly across every theme with
   zero per-theme overrides (same policy as the Gautrain wordmark).
   ---------------------------------------------------------------- */
.taxi-head-center {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}
.taxi-logo-panel {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(160px, 24vw, 220px);
  height: clamp(56px, 8.5vw, 76px);
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(160deg, #0d1018 0%, #1c2033 100%);
  border: 1px solid color-mix(in oklab, var(--taxi-yellow) 22%, #000);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
/* SANTACO.png is already white-on-transparent, so we render it
   untouched — no invert / brightness manipulation, just a subtle
   shadow. `object-fit: contain` letterboxes inside the panel without
   ever distorting the bitmap's aspect ratio (Hope's 2026-05-05 rule). */
.santaco-logo {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.taxi-hero {
  text-align: center; padding: 24px 12px 20px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--taxi-yellow) 6%, var(--bg-soft));
  border: 1px solid color-mix(in oklab, var(--taxi-yellow) 18%, var(--line));
  margin-bottom: 18px;
}
.taxi-fare-amount {
  display: inline-flex; align-items: baseline; justify-content: center;
  gap: 4px;
  font-family: var(--font-display, var(--font-body));
  font-weight: 900; letter-spacing: -0.01em;
  color: var(--text); line-height: 1; margin-bottom: 12px;
}
.taxi-fare-currency {
  font-size: clamp(36px, 5.5vw, 48px);
  color: color-mix(in oklab, var(--taxi-yellow) 70%, var(--muted));
  font-weight: 800;
}
.taxi-fare-num {
  font-size: clamp(72px, 12vw, 132px);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--taxi-yellow) 80%, var(--text)) 0%,
    var(--text) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--text);
}
.taxi-fare-unknown .taxi-fare-num {
  background: none; -webkit-text-fill-color: var(--muted); color: var(--muted);
}
.taxi-hero-sub {
  font-size: 14px; color: var(--text);
  max-width: 480px; margin: 0 auto; line-height: 1.45;
}
.taxi-hero-sub strong {
  color: color-mix(in oklab, var(--taxi-yellow) 60%, var(--text));
  font-weight: 700;
}
.taxi-hero-note { margin-top: 8px; font-size: 11px; color: var(--muted); font-style: italic; }
.taxi-section-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 14px; font-weight: 800;
  margin: 0 0 10px; color: var(--text);
  letter-spacing: 0.005em;
}
.taxi-related { margin-bottom: 18px; }
.taxi-related-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.taxi-related-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--bg-soft) 70%, transparent);
  border: 1px solid var(--line);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.taxi-related-row:hover { border-color: var(--taxi-yellow-line); transform: translateX(2px); }
.taxi-related-route {
  font-size: 13px; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.taxi-related-fare {
  font-family: var(--font-mono);
  font-weight: 800; font-size: 14px;
  color: color-mix(in oklab, var(--taxi-yellow) 60%, var(--text));
  flex: 0 0 auto;
}
.taxi-alert-wrap {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px; border-radius: 12px;
  background: var(--taxi-yellow-soft);
  border: 1px solid var(--taxi-yellow-line);
}
.taxi-alert-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, var(--taxi-yellow) 0%, color-mix(in oklab, var(--taxi-yellow) 80%, #000) 100%);
  color: #1a1304;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px color-mix(in oklab, var(--taxi-yellow) 30%, transparent);
  flex: 0 0 auto;
}
.taxi-alert-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in oklab, var(--taxi-yellow) 40%, transparent); }
.taxi-alert-btn:active { transform: translateY(0); }
.taxi-alert-btn.is-fired { animation: taxiAlertPulse 0.9s ease-out; }
@keyframes taxiAlertPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--taxi-yellow) 60%, transparent); }
  60%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 4px 14px color-mix(in oklab, var(--taxi-yellow) 30%, transparent); }
}
.taxi-alert-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: #c81e1e;
  animation: taxiDotPing 1.6s ease-out infinite;
}
@keyframes taxiDotPing {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, #c81e1e 80%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.taxi-alert-meta {
  font-size: 12px; color: var(--muted);
  flex: 1 1 200px; line-height: 1.45;
}
.taxi-alert-meta strong { color: var(--text); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .taxi-alert-btn.is-fired { animation: none; }
  .taxi-alert-dot { animation: none; }
}
@media (max-width: 540px) {
  /* Mobile: chip a bit smaller than desktop but still the new bigger
     baseline (was 64 — bumping to 80 to match the desktop boost). */
  .taxi-logo-chip { width: 80px; height: 80px; flex-basis: 80px; }
  /* Stack the taxi header on narrow screens: chip + pill stay on the
     top row, the SANTACO panel drops to its own full-width row below,
     centered horizontally (matches Hope's Gautrain mobile call). */
  .taxi-head { flex-wrap: wrap; gap: 10px; }
  .taxi-head-center {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }
  .taxi-logo-panel {
    width: clamp(140px, 44vw, 180px);
    height: clamp(44px, 12vw, 60px);
    padding: 8px 10px;
  }
  .taxi-fare-num { font-size: clamp(64px, 18vw, 110px); }
}

/* ==========================================================
   GAUTRAIN CARD
   ----------------------------------------------------------
   Gautrain palette: deep blue (#003a70) + gold accent. Big
   centered HH:MM, mini date below, live countdown ticker, then
   the trip-stops rail and follow-on departures.
   ========================================================== */
.gautrain-card {
  --gt-blue: #003a70;
  --gt-blue-2: #0061a0;
  --gt-gold: #d4af37;
  --gt-blue-soft: color-mix(in oklab, var(--gt-blue) 16%, transparent);
  --gt-blue-line: color-mix(in oklab, var(--gt-blue) 40%, var(--line));
  /* Per Hope's 2026-05-05 polish pass: lock the entire Gautrain card to
     the same airy Comfortaa-300 treatment that Sakura/Unibo themes use
     for headlines, regardless of which theme is active. The previous
     bold + gradient-clip times read as ugly/chunky; thin Comfortaa with
     wide tracking is what "elegant transit board" looks like. */
  --gt-font-display: "Comfortaa", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --gt-thin: 300;
  --gt-medium: 400;
  position: relative;
  padding: 18px;
  border: 1px solid var(--gt-blue-line);
  border-radius: 18px;
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--gt-blue) 8%, var(--bg)) 0%,
    var(--bg-soft) 60%);
  box-shadow: 0 12px 40px color-mix(in oklab, var(--gt-blue) 18%, transparent);
}
/* ----------------------------------------------------------------
   HEADER — small train chip on the LEFT (instant brand recognition),
   title block in the middle, wide wordmark panel pinned to the FAR
   RIGHT. Both logo surfaces are dark navy slabs so the white-rendered
   logos read identically on every theme — no per-theme overrides.
   ---------------------------------------------------------------- */
.gautrain-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
}
.gautrain-head-left  {
  display: flex; align-items: center; gap: 12px;
  min-width: 0; flex: 1 1 auto;
}
.gautrain-head-titles { min-width: 0; }
.gautrain-head-right  { flex: 0 0 auto; display: flex; align-items: center; }

.gautrain-eyebrow {
  font-family: var(--gt-font-display);
  font-size: 10.5px; letter-spacing: 0.18em;
  font-weight: var(--gt-medium);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--gt-blue-2) 50%, var(--muted));
  margin-bottom: 4px;
}
.gautrain-title {
  font-family: var(--gt-font-display);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: var(--gt-thin); margin: 0;
  color: var(--text);
  letter-spacing: 0.04em; line-height: 1.2;
}
.gautrain-subtitle {
  margin-top: 4px;
  font-family: var(--gt-font-display);
  font-weight: var(--gt-thin);
  letter-spacing: 0.04em;
  font-size: 12px;
  color: var(--muted);
}

/* Square train-icon chip on the left of the header. Dark navy slab so
   the existing PNG glyph reads bright against it on every theme. */
.gautrain-logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  flex: 0 0 56px;
  border-radius: 12px;
  padding: 6px;
  background: linear-gradient(160deg, var(--gt-blue) 0%, #001f3d 100%);
  border: 1px solid color-mix(in oklab, var(--gt-blue) 60%, #000);
  box-shadow: 0 4px 14px color-mix(in oklab, var(--gt-blue) 40%, transparent);
}
.gautrain-chip-img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* Wide wordmark panel pinned to the far right. Same dark navy slab as
   the chip — that way both brand pieces sit on the same background and
   the white-rendered wordmark reads cleanly across every theme. */
.gautrain-logo-panel {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(140px, 22vw, 200px);
  height: clamp(52px, 8vw, 72px);
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--gt-blue) 0%, #001f3d 100%);
  border: 1px solid color-mix(in oklab, var(--gt-blue) 60%, #000);
  box-shadow: 0 4px 14px color-mix(in oklab, var(--gt-blue) 40%, transparent);
}
/* The shipped wordmark PNG is already white-on-transparent (per Hope's
   2026-05-05 update — Gautrain_Bitmap.png), so we render it untouched.
   No invert, no brightness modulation, just a subtle shadow so it sits
   cleanly on the dark navy slab without losing its source fidelity.
   `object-fit: contain` letterboxes inside the panel without ever
   distorting the bitmap's aspect ratio. */
.gautrain-logo {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* ----------------------------------------------------------------
   RAIL — a direction block. Primary = the outbound lane (Park →
   Hatfield) rendered big. Secondary = the reverse lane (Hatfield →
   Park) rendered compact right beneath it. Both carry their own
   live countdown timer bound by gautrainBindCountdown().
   ---------------------------------------------------------------- */
.gautrain-rail {
  padding: 22px 16px 18px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--gt-blue) 9%, var(--bg-soft));
  border: 1px solid color-mix(in oklab, var(--gt-blue) 24%, var(--line));
  margin-bottom: 14px;
  text-align: center;
}
.gautrain-rail.is-secondary {
  padding: 14px 16px;
  background: color-mix(in oklab, var(--gt-blue) 5%, var(--bg-soft));
  border-color: color-mix(in oklab, var(--gt-blue) 18%, var(--line));
}
.gautrain-rail-headline {
  font-family: var(--gt-font-display);
  font-size: 11px; letter-spacing: 0.16em;
  font-weight: var(--gt-thin);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--gt-blue-2) 55%, var(--muted));
  margin-bottom: 12px;
  line-height: 1.5;
  padding: 0 8px;
}
.gautrain-rail.is-secondary .gautrain-rail-headline {
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.gautrain-rail-headline strong {
  color: var(--text);
  font-weight: var(--gt-medium);
  letter-spacing: 0.12em;
}

/* Departure time — thin Comfortaa with wide tracking. Identical
   typographic treatment on primary + secondary rails; only the
   font-size differs so the visual hierarchy comes from scale alone.
   The previous weight-900 gradient-clip read as ugly/chunky; flat ink
   + Light weight is the elegant transit-board treatment Hope asked
   for, matching the Sakura/Unibo headline feel. */
.gautrain-rail-time {
  display: block;
  font-family: var(--gt-font-display);
  font-weight: var(--gt-thin);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text);
  margin: 6px 0;
}
.gautrain-rail.is-primary   .gautrain-rail-time { font-size: clamp(72px, 14vw, 148px); }
.gautrain-rail.is-secondary .gautrain-rail-time { font-size: clamp(48px, 9vw,  84px); }

.gautrain-rail-meta {
  font-family: var(--gt-font-display);
  font-size: 12px; color: var(--text);
  font-weight: var(--gt-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.gautrain-rail.is-secondary .gautrain-rail-meta { font-size: 11px; color: var(--muted); }

/* Legacy hero classes — kept around in case anything else still
   references them, but the active card no longer uses them. */
.gautrain-hero {
  text-align: center;
  padding: 24px 12px 16px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--gt-blue) 8%, var(--bg-soft));
  border: 1px solid color-mix(in oklab, var(--gt-blue) 24%, var(--line));
  margin-bottom: 18px;
}
.gautrain-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.gautrain-hero-time {
  display: inline-flex; align-items: baseline; justify-content: center;
  margin-bottom: 6px;
}
.gautrain-hero-time-num {
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(72px, 14vw, 148px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--gt-gold) 80%, var(--text)) 0%,
    color-mix(in oklab, var(--gt-blue-2) 70%, var(--text)) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--text);
}
.gautrain-hero-date {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.gautrain-mini-timer {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.04em;
  animation: gautrainBreathe 2.4s ease-in-out infinite alternate;
}
@keyframes gautrainBreathe {
  from { opacity: 0.85; }
  to   { opacity: 1; }
}
.gautrain-mini-cell { display: inline-flex; align-items: baseline; gap: 2px; }
.gautrain-mini-num {
  font-family: var(--gt-font-display);
  font-weight: var(--gt-medium); font-size: 15px;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--gt-gold) 60%, var(--text));
  min-width: 1.6em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.gautrain-mini-lab {
  font-family: var(--gt-font-display);
  font-size: 9px; font-weight: var(--gt-medium);
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.gautrain-mini-sep { color: var(--muted); }

/* Stops rail — vertical list of all stations on the trip with a
   highlight on the queried station + destination. */
.gautrain-section-title {
  font-family: var(--gt-font-display);
  font-size: 13px; font-weight: var(--gt-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 12px; color: color-mix(in oklab, var(--text) 80%, var(--muted));
}
.gautrain-stops { margin-bottom: 18px; }
.gautrain-stops-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 4px;
  position: relative;
}
.gautrain-stops-list::before {
  content: ""; position: absolute;
  left: 14px; top: 14px; bottom: 14px;
  width: 2px;
  background: color-mix(in oklab, var(--gt-blue) 30%, var(--line));
  border-radius: 2px;
}
.gautrain-stop {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  position: relative;
  transition: background 0.18s ease;
}
.gautrain-stop-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid color-mix(in oklab, var(--gt-blue) 50%, var(--muted));
  margin-left: 4px;
  z-index: 1;
}
.gautrain-stop-name {
  font-family: var(--gt-font-display);
  font-weight: var(--gt-thin);
  letter-spacing: 0.04em;
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gautrain-stop-time {
  font-family: var(--gt-font-display);
  font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: var(--gt-medium);
  letter-spacing: 0.04em;
  color: var(--text);
}
.gautrain-stop.is-here {
  background: color-mix(in oklab, var(--gt-gold) 14%, transparent);
}
.gautrain-stop.is-here .gautrain-stop-dot {
  background: var(--gt-gold);
  border-color: var(--gt-gold);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--gt-gold) 25%, transparent);
}
.gautrain-stop.is-here .gautrain-stop-name { font-weight: var(--gt-medium); }
.gautrain-stop.is-dest {
  background: color-mix(in oklab, var(--gt-blue) 14%, transparent);
}
.gautrain-stop.is-dest .gautrain-stop-dot {
  background: var(--gt-blue);
  border-color: var(--gt-blue);
}
.gautrain-stop.is-dest .gautrain-stop-name { font-weight: var(--gt-medium); }

/* Following-departures table. */
.gautrain-upcoming { margin-bottom: 16px; }
.gautrain-up-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 4px;
}
.gautrain-up-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--bg-soft) 70%, transparent);
  border: 1px solid var(--line);
}
.gautrain-up-time {
  font-family: var(--gt-font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: var(--gt-medium); font-size: 14px;
  color: color-mix(in oklab, var(--gt-gold) 50%, var(--text));
  flex: 0 0 auto;
  min-width: 56px;
}
.gautrain-up-line {
  font-family: var(--gt-font-display);
  font-weight: var(--gt-thin);
  letter-spacing: 0.06em;
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto;
}

/* (Direction-switch buttons removed — the card now shows both rails
   simultaneously, so there is no manual flip action any more.) */

@media (max-width: 540px) {
  /* On narrow screens stack the header so the chip stays anchored top-
     left and the wordmark drops below it on the right. Times shrink
     in lockstep so the same hierarchy holds. */
  .gautrain-head { flex-wrap: wrap; gap: 10px; }
  /* Center the wordmark on mobile (Hope's 2026-05-05 call) — it was
     flush-right before and looked dislocated once the row wrapped
     beneath the chip/title; centered reads as intentional symmetry. */
  .gautrain-head-right { flex-basis: 100%; justify-content: center; }
  .gautrain-logo-chip { width: 48px; height: 48px; flex-basis: 48px; }
  .gautrain-logo-panel {
    width: clamp(120px, 40vw, 160px);
    height: clamp(40px, 11vw, 52px);
    padding: 8px 10px;
  }
  .gautrain-rail.is-primary   .gautrain-rail-time { font-size: clamp(54px, 16vw, 96px); }
  .gautrain-rail.is-secondary .gautrain-rail-time { font-size: clamp(34px, 10vw, 56px); }
  .gautrain-rail-headline { font-size: 10px; padding: 0 4px; }
}

/* ==========================================================
   AUTH PILL — Google sign-in in the nav
   ----------------------------------------------------------
   Signed-out: Google "G" glyph + "Sign in" (picks up .nav-pill).
   Signed-in:  circular avatar + first name; hover tints red to
               signal "click to sign out".
   ========================================================== */
.auth-pill.is-signed-in { padding-left: 4px; gap: 7px; }
.auth-pill .auth-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in oklab, var(--brand) 40%, var(--bg));
  color: #fff;
  font-weight: 700; font-size: 11px;
  line-height: 1;
  border: 1px solid var(--line);
}
.auth-pill .auth-name {
  max-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.auth-pill.is-signed-in:hover {
  background: color-mix(in oklab, #c81e1e 12%, transparent);
  border-color: color-mix(in oklab, #c81e1e 40%, var(--line));
}
/* Hide the auth pill on small phones — the dedicated /login page
   carries the full sign-in flow there. */
@media (max-width: 560px) {
  .auth-pill { display: none !important; }
}

/* ==========================================================
   /login · /about · /privacy — Mankind Research Labs aesthetic
   ----------------------------------------------------------
   GT Maru everywhere (300 light for body, 400 regular for
   headings). Numbered section markers (01., 02., 03.), tight
   hairline rules, wide gutters, all-caps tracked-out eyebrows,
   no italics, no serifs, no flourishes. Built to match the
   institutional research-lab look of mankindresearch.org.
   Real server-rendered HTML so Google indexes actual content.
   ========================================================== */
:root {
  --page-font: "GT Maru", "GT Maru Trial", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", "Inter", sans-serif;
  --page-bg:        #0e0b08;    /* warm near-black canvas */
  --page-bg-alt:    #15110b;    /* slightly raised — cells, code blocks */
  --page-fg:        #f3ecde;    /* warm cream ink */
  --page-fg-soft:   rgba(243, 236, 222, 0.74);
  --page-fg-muted:  rgba(243, 236, 222, 0.50);
  --page-fg-faint:  rgba(243, 236, 222, 0.26);
  --page-rule:        rgba(243, 236, 222, 0.10);
  --page-rule-strong: rgba(243, 236, 222, 0.22);
  --page-accent:        #d35a3d;   /* terracotta */
  --page-accent-amber:  #f4a14a;   /* firefly amber */
  --page-accent-soft:   #e89b75;   /* peach */
  --page-accent-aqua:   #9bc7d4;   /* subtle desaturated sky-aqua, used sparingly */
  /* Firefly glows — soft, asymmetric, layered. */
  --page-glow-amber:    rgba(244, 161, 74, 0.22);
  --page-glow-terra:    rgba(211, 90, 61, 0.20);
  --page-glow-peach:    rgba(232, 155, 117, 0.14);
}

/* ----------------------------------------------------------------
   Light mode — opt-in via the sun/moon toggle in the docs topbar.
   ----------------------------------------------------------------
   Dark is the brand default. Light is a deliberate choice the reader
   makes — typically to print a policy or read on a bright screen. We
   no longer auto-flip on OS preference because the dark canvas IS the
   product surface; users who want cream paper ask for it explicitly.

   Palette philosophy for light mode (per direction 2026-05-06):
     creamy paper-white background, warm pencil-grey ink, with
     EMPHASIS in deep moss-green (primary) and confident aqua-blue
     (secondary). No terracotta in light mode — that lives in dark.

   Tokens below replace the dark equivalents at `:root` whenever the
   `data-docs-theme="light"` attribute is set on the document, so every
   component that uses them (callouts, ribbons, sidebar, hero, search
   bar, etc.) inherits the cream palette with green + aqua emphasis
   without a single component rewrite.
   ---------------------------------------------------------------- */
:root[data-docs-theme="light"] {
  --page-bg:        #fbf6ec;    /* creamy paper-white, warm undertone */
  --page-bg-alt:    #f4ecdc;    /* slightly darker cream — raised cells */
  --page-fg:        #2a2622;    /* warm pencil-grey ink */
  --page-fg-soft:   rgba(42, 38, 34, 0.74);
  --page-fg-muted:  rgba(42, 38, 34, 0.52);
  --page-fg-faint:  rgba(42, 38, 34, 0.28);
  --page-rule:        rgba(42, 38, 34, 0.12);
  --page-rule-strong: rgba(42, 38, 34, 0.24);
  /* Emphasis: deep moss green (primary) + confident aqua (secondary).
     The terracotta + amber pair from dark mode is intentionally
     retired here — green and aqua read more elegantly against cream
     and carry the editorial tone the policy pages want. */
  --page-accent:        #2d6b4f;   /* deep moss green — primary emphasis */
  --page-accent-amber:  #3a7e90;   /* aqua-blue, repurposed in this slot */
  --page-accent-soft:   #6ba383;   /* mid sage — soft variant */
  --page-accent-aqua:   #3a7e90;   /* aqua-blue — secondary emphasis */
  /* Glows softened so the wash doesn't overcook the cream. */
  --page-glow-amber:    rgba(58, 126, 144, 0.10);   /* aqua wash */
  --page-glow-terra:    rgba(45, 107, 79, 0.08);    /* moss wash */
  --page-glow-peach:    rgba(107, 163, 131, 0.05);  /* sage wash */
}

/* Smooth the swap so the click feels considered, not abrupt. */
body.page,
body.page * {
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease;
}

/* Lift the warm grain a touch — paper-tooth look without overcooking
   contrast. Default rule lives on `body.page::after` and uses the
   dark canvas; in light we just dial the opacity down. */
:root[data-docs-theme="light"] body.page::after { opacity: 0.35; }

/* Score-ribbon meter track — the default uses cream-on-dark alpha,
   which becomes invisible on cream-on-cream. Switch to ink alpha
   so the track is visible behind the gradient fill. */
:root[data-docs-theme="light"] .score-ribbon-meter {
  background: rgba(42, 38, 34, 0.10);
}
:root[data-docs-theme="light"] .score-ribbon {
  background:
    linear-gradient(180deg,
      rgba(42, 38, 34, 0.025) 0%,
      rgba(42, 38, 34, 0.005) 100%);
}
:root[data-docs-theme="light"] .score-ribbon[data-band="model"] {
  --score-ribbon-stripe: rgba(42, 38, 34, 0.40);
  --score-ribbon-fill: linear-gradient(90deg,
    rgba(42, 38, 34, 0.35) 0%,
    rgba(42, 38, 34, 0.55) 100%);
  --score-ribbon-glow: rgba(42, 38, 34, 0.10);
}

/* Body links — green underline on cream so they sit in the same
   emphasis family as the rest of the light palette. */
:root[data-docs-theme="light"] .docs-body a {
  border-bottom-color: rgba(45, 107, 79, 0.32);
}
:root[data-docs-theme="light"] .docs-feedback-actions button:hover {
  background: rgba(45, 107, 79, 0.06);
}

/* ----------------------------------------------------------------
   Logo swaps that follow the docs theme.
   ----------------------------------------------------------------
   Top-left brand wordmark: the cream/light variant uses the dark-ink
   wordmark so it reads on cream paper. Dark mode keeps the standard
   cream-on-dark wordmark.

   Sidebar foot: the Mankind logo above the "Mankind Research" tag.
   The asset is shipped in its dark-on-transparent form so it reads
   correctly in light mode. In dark mode we filter it to white so it
   still reads against the warm-black canvas. */
:root[data-docs-theme="light"] .docs-brand-logo--wordmark {
  content: url("/logos/DNA45_DARKLOGO.png");
}
:root[data-docs-theme="light"] .docs-brand-logo--mark {
  content: url("/logos/dark/M-LOGO_DARK.png");
}
/* Dark mode default — the Mankind asset ships dark, so invert it to
   read as white on the warm-black sidebar. (Height / width / display
   are set on the base `.docs-sidebar-foot-logo` rule further down.) */
.docs-sidebar-foot-logo {
  filter: brightness(0) invert(1);
}
:root[data-docs-theme="light"] .docs-sidebar-foot-logo {
  /* Light mode — render the asset as designed (dark ink). */
  filter: none;
}

/* ----------------------------------------------------------------
   Sun / moon theme toggle — sits in the docs topbar nav.
   ----------------------------------------------------------------
   Minimal circular button. Shows the icon of the *target* state
   (sun = "click to switch to light", moon = "click to go dark") so
   the affordance reads at a glance. */
.docs-theme-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  margin-left: 8px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--page-rule-strong);
  border-radius: 999px;
  color: var(--page-fg-muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease,
              background-color 0.18s ease, transform 0.18s ease;
}
.docs-theme-toggle:hover {
  color: var(--page-accent);
  border-color: var(--page-accent);
  background: color-mix(in oklab, var(--page-accent) 6%, transparent);
}
.docs-theme-toggle:active { transform: scale(0.94); }
.docs-theme-toggle svg {
  width: 16px; height: 16px;
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
}
/* Default (dark mode): show sun (target = light), hide moon. */
.docs-theme-toggle .icon-sun  { display: inline-block; }
.docs-theme-toggle .icon-moon { display: none; }
/* Light mode: show moon (target = dark), hide sun. */
:root[data-docs-theme="light"] .docs-theme-toggle .icon-sun  { display: none; }
:root[data-docs-theme="light"] .docs-theme-toggle .icon-moon { display: inline-block; }

/* Print: force the cream/grey palette regardless of toggle state, so a
   user printing from dark mode still gets the elegant paper version. */
@media print {
  :root {
    --page-bg:        #ffffff;
    --page-bg-alt:    #f7f3eb;
    --page-fg:        #1f1c19;
    --page-fg-soft:   rgba(31, 28, 25, 0.78);
    --page-fg-muted:  rgba(31, 28, 25, 0.55);
    --page-rule:        rgba(31, 28, 25, 0.18);
    --page-rule-strong: rgba(31, 28, 25, 0.30);
    --page-accent:        #2d6b4f;
    --page-accent-aqua:   #3a7e90;
  }
  .docs-theme-toggle,
  .docs-search,
  .docs-sidebar,
  .docs-feedback-actions { display: none !important; }
  .docs-shell { grid-template-columns: 1fr !important; }
  body.page::after { display: none !important; }
}
body.page {
  min-height: 100vh;
  display: flex; flex-direction: column;
  font-family: var(--page-font);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--page-fg);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "kern", "liga";
}
/* Firefly mesh-gradient wash — amber glow top-right, terracotta
   bottom-centre, soft peach top-left. Sits behind everything; warm,
   asymmetric, breathing. Adobe Firefly / Anthropic dark cadence. */
body.page::before {
  content: "";
  position: fixed; inset: -10vh -10vw;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60vw 55vh at 95% -5%,  var(--page-glow-amber) 0%, transparent 62%),
    radial-gradient(70vw 55vh at 50% 115%, var(--page-glow-terra) 0%, transparent 65%),
    radial-gradient(55vw 45vh at -5% 5%,   var(--page-glow-peach) 0%, transparent 65%);
  filter: blur(40px) saturate(1.05);
  opacity: 0.95;
}
/* Faint warm grain so the dark canvas isn't dead-flat. */
body.page::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0 0.70  0 0 0 0.40 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.page > * { position: relative; z-index: 1; }

/* ---------- Top bar: wide, hairline-ruled, hairline-tracked --------- */
.page-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 56px);
  border-bottom: 1px solid var(--page-rule);
}
.page-top .page-top-logo {
  height: 22px; width: auto;
  opacity: 0.92;
  filter: brightness(1.1);
}
.page-top-nav {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 32px);
}
.page-top-nav a,
.page-top .page-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--page-fg-muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.page-top-nav a:hover,
.page-top .page-back:hover { color: var(--page-fg); }
.page-top .page-back svg { stroke-width: 1.5; }

/* ---------- Main column ---------- */
.page-main {
  flex: 1 1 auto;
  display: block;
  padding: clamp(72px, 12vw, 140px) clamp(20px, 5vw, 56px) clamp(56px, 8vw, 96px);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* ---------- Hero block ---------- */
.page-hero {
  margin: 0 0 clamp(72px, 10vw, 120px);
  padding-bottom: clamp(48px, 7vw, 88px);
  border-bottom: 1px solid var(--page-rule);
}
.page-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--page-accent);
  margin: 0 0 36px;
}
.page-eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--page-accent);
}
.page-hero h1 {
  font-family: var(--page-font);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  color: var(--page-fg);
  max-width: 14ch;
}
.page-hero .page-lede {
  font-family: var(--page-font);
  font-weight: 300;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--page-fg-soft);
  max-width: 56ch;
  margin: 0;
}
.page-hero .page-lede + .page-lede { margin-top: 14px; }

/* ---------- Numbered section system ---------- */
.page-section {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--page-rule);
}
.page-section:first-of-type { border-top: 0; padding-top: 0; }
.page-section-marker {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--page-fg-muted);
  position: sticky; top: 24px;
  align-self: start;
  display: flex; flex-direction: column; gap: 8px;
}
.page-section-marker .page-section-num {
  font-size: 13px;
  color: var(--page-accent);
  font-weight: 400;
  letter-spacing: 0.05em;
}
.page-section-body { max-width: 64ch; }
.page-section-body h2 {
  font-family: var(--page-font);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 0 0 24px;
  color: var(--page-fg);
}
.page-section-body p,
.page-prose p {
  font-family: var(--page-font);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -0.003em;
  color: var(--page-fg-soft);
  margin: 0 0 18px;
}
.page-section-body p:last-child,
.page-prose p:last-child { margin-bottom: 0; }
.page-section-body strong,
.page-prose strong { color: var(--page-fg); font-weight: 400; }

/* Pull-quote block. Terracotta rail picks up the firefly accent. */
.page-quote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--page-accent);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--page-fg);
}

/* Lists: hairline-divided rows, em-dash bullet, no padding. */
.page-section-body ul,
.page-prose ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 24px;
  border-top: 1px solid var(--page-rule);
}
.page-section-body ul li,
.page-prose ul li {
  position: relative;
  padding: 14px 0 14px 32px;
  border-bottom: 1px solid var(--page-rule);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--page-fg-soft);
}
.page-section-body ul li::before,
.page-prose ul li::before {
  content: "—";
  position: absolute;
  left: 0; top: 14px;
  color: var(--page-fg-muted);
  font-weight: 300;
}
.page-section-body ul li strong,
.page-prose ul li strong {
  color: var(--page-fg);
  font-weight: 400;
  display: block;
  margin-bottom: 2px;
}

/* Two-column principle grid (used in /about). */
.page-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--page-rule);
  border: 1px solid var(--page-rule);
  margin: 24px 0;
}
.page-grid-cell {
  background: var(--page-bg);
  padding: 28px 24px;
}
.page-grid-cell h3 {
  font-family: var(--page-font);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--page-fg);
  margin: 0 0 10px;
}
.page-grid-cell p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--page-fg-soft);
  margin: 0;
}
@media (max-width: 700px) {
  .page-grid { grid-template-columns: 1fr; }
}

/* Inline links — hairline border, lights up to terracotta on hover. */
.page-section-body a,
.page-prose a,
.page-hero .page-lede a {
  color: var(--page-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--page-rule-strong);
  transition: border-bottom-color 0.18s ease, color 0.18s ease;
}
.page-section-body a:hover,
.page-prose a:hover,
.page-hero .page-lede a:hover {
  color: var(--page-accent);
  border-bottom-color: var(--page-accent);
}

.page-prose code {
  font-family: "IBM Plex Mono", "GT Maru", monospace;
  font-size: 13px;
  padding: 1px 6px;
  border: 1px solid var(--page-rule);
  border-radius: 2px;
  background: var(--page-bg-alt);
  color: var(--page-fg);
}

/* ---------- /login: page-card sits in a hero-style block ---------- */
.page-card {
  max-width: 440px;
  margin: 36px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.google-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px 24px;
  border-radius: 0;
  border: 1px solid var(--page-accent);
  background: var(--page-accent);
  color: var(--page-fg);
  font-family: var(--page-font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 12px 40px rgba(211, 90, 61, 0.25);
}
.google-btn:hover {
  background: transparent;
  color: var(--page-accent);
  border-color: var(--page-accent);
  box-shadow: 0 14px 50px rgba(211, 90, 61, 0.35);
}
.google-btn:active { transform: translateY(1px); }
.google-btn svg { width: 16px; height: 16px; }
.google-btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }
.page-fineprint {
  margin-top: 24px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: -0.003em;
  color: var(--page-fg-muted);
  max-width: 440px;
}
.page-fineprint a {
  color: var(--page-fg-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--page-rule-strong);
}
.page-fineprint a:hover { color: var(--page-fg); border-bottom-color: var(--page-fg); }

/* ---------- Footer ---------- */
.page-bottom {
  padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 56px) clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--page-rule);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.page-bottom-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: clamp(48px, 6vw, 72px);
}
.page-bottom-col h4 {
  font-family: var(--page-font);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--page-fg-muted);
  margin: 0 0 18px;
}
.page-bottom-col p,
.page-bottom-col a {
  font-family: var(--page-font);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--page-fg-soft);
  margin: 0 0 6px;
  display: block;
  text-decoration: none;
  transition: color 0.18s ease;
}
.page-bottom-col a:hover { color: var(--page-fg); }
.page-bottom-mark {
  font-family: var(--page-font);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--page-fg);
  display: block;
  margin-bottom: 8px;
}
.page-bottom-tag {
  font-size: 12px;
  font-weight: 300;
  color: var(--page-fg-muted);
  line-height: 1.5;
  max-width: 32ch;
}
.page-bottom-base {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--page-rule);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--page-fg-muted);
}
.page-bottom-base .page-bottom-motto {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--page-fg-soft);
}
@media (max-width: 700px) {
  .page-bottom-grid { grid-template-columns: 1fr 1fr; }
  .page-bottom-col:first-child { grid-column: 1 / -1; }
}

/* On smaller screens: stack the section marker above the body. */
@media (max-width: 760px) {
  .page-section { grid-template-columns: 1fr; gap: 18px; }
  .page-section-marker { position: static; }
}

/* ==========================================================
   DOCS / Help-Center layout — Perplexity-style article shell.
   ----------------------------------------------------------
   Used by /about, /privacy, /data, /terms. Top brand row +
   help-center nav, hero with search bar, two-column shell:
   sidebar of categorised links (left) and article body
   (right) with breadcrumb + byline. Inherits the warm dark
   firefly canvas + GT Maru from the .page block above.
   ========================================================== */

/* ==============================================================
   Docs page entrance — pure fade-in, zero scroll interference.
   ==============================================================
   A single subtle opacity fade runs on `.docs-hero` and `.docs-shell`
   at page load so content arrives onto the canvas instead of
   appearing all at once. NO view-transitions, NO smooth-scroll, NO
   scroll-margin overrides — those caused visible content shift on
   cross-page navigation. Just an opacity ramp. The browser handles
   scroll position natively, exactly as the user expects.

   The global `prefers-reduced-motion` rule earlier in this file
   neutralises the fade for readers who request reduced motion.
   ============================================================== */
@keyframes docsPageSettleIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.docs .docs-hero,
body.docs .docs-shell {
  animation: docsPageSettleIn 0.32s ease-out both;
}
body.docs .docs-shell { animation-delay: 0.04s; }

/* Top: full-width, brand on left, help-center context nav on right. */
body.docs { background: var(--page-bg); }
.docs-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 56px);
  border-bottom: 1px solid var(--page-rule);
  position: relative; z-index: 2;
}
.docs-top-left { display: flex; align-items: center; gap: 18px; }
.docs-brand {
  font-family: var(--page-font);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--page-fg);
  text-decoration: none;
}
.docs-brand-mark {
  display: inline-flex; align-items: center; gap: 10px;
}
.docs-brand-mark .docs-brand-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--page-accent);
  box-shadow: 0 0 14px var(--page-accent);
}
.docs-brand-logo {
  height: 26px; width: auto;
  display: block;
}

/* Sidebar logo lockups: dark-final at the top, wordmark at the bottom. */
.docs-sidebar-top-logo {
  display: block;
  height: 44px; width: auto;
  margin: 0 0 24px;
}
.docs-sidebar-foot {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--page-rule);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.docs-sidebar-foot-logo {
  height: 22px; width: auto;
  display: block;
  opacity: 0.95;
}
.docs-sidebar-foot-tag {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--page-fg-muted);
}
.docs-top-divider {
  width: 1px; height: 18px;
  background: var(--page-rule-strong);
}
.docs-top-context {
  font-size: 14px;
  font-weight: 300;
  color: var(--page-fg-soft);
  letter-spacing: -0.005em;
}
.docs-top-nav {
  display: flex; align-items: center; gap: clamp(16px, 2.5vw, 28px);
}
.docs-top-nav a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--page-fg-soft);
  text-decoration: none;
  transition: color 0.18s ease;
}
.docs-top-nav a:hover { color: var(--page-fg); }
.docs-top-nav a.is-active { color: var(--page-fg); }
.docs-top-cta {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--page-fg);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--page-rule-strong);
  border-radius: 999px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.docs-top-cta:hover { border-color: var(--page-accent); color: var(--page-accent); }

/* Search hero: small, focused; submitting routes to /?q=... so the
   homepage SearchAction pipeline picks it up. */
.docs-hero {
  padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 56px) clamp(32px, 4vw, 48px);
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}
.docs-hero h1 {
  font-family: var(--page-font);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 0 24px;
  color: var(--page-fg);
  max-width: 18ch;
}
.docs-hero p {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--page-fg-soft);
  max-width: 56ch;
  margin: 0 0 32px;
}
.docs-search {
  display: flex; align-items: center; gap: 12px;
  max-width: 640px;
  padding: 14px 18px;
  background: rgba(243, 236, 222, 0.04);
  border: 1px solid var(--page-rule-strong);
  border-radius: 12px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.docs-search:focus-within {
  border-color: var(--page-accent);
  background: rgba(243, 236, 222, 0.06);
  box-shadow: 0 0 0 3px rgba(211, 90, 61, 0.18);
}
.docs-search svg {
  width: 18px; height: 18px;
  color: var(--page-fg-muted);
  flex-shrink: 0;
}
.docs-search input {
  flex: 1;
  background: transparent;
  border: 0; outline: none;
  font-family: var(--page-font);
  font-size: 15px;
  font-weight: 300;
  color: var(--page-fg);
  letter-spacing: -0.005em;
}
.docs-search input::placeholder { color: var(--page-fg-muted); }
.docs-search button {
  background: var(--page-accent);
  color: var(--page-fg);
  border: 0;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--page-font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.docs-search button:hover { background: var(--page-accent-amber); }
.docs-search button:active { transform: translateY(1px); }

/* Two-column shell: sticky sidebar + article body. */
.docs-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(32px, 5vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 48px) clamp(20px, 5vw, 56px) clamp(72px, 10vw, 120px);
  width: 100%;
}
@media (max-width: 880px) {
  .docs-shell { grid-template-columns: 1fr; }
}

/* Sidebar: collections of links, sticky on desktop. */
.docs-sidebar {
  position: sticky; top: 24px;
  align-self: start;
  border-right: 1px solid var(--page-rule);
  padding-right: clamp(20px, 3vw, 32px);
}
@media (max-width: 880px) {
  .docs-sidebar {
    position: static; border-right: 0; padding-right: 0;
    padding-bottom: 24px; border-bottom: 1px solid var(--page-rule);
    margin-bottom: 24px;
  }
}
.docs-sidebar-section { margin: 0 0 28px; }
.docs-sidebar-section:last-child { margin-bottom: 0; }
.docs-sidebar-title {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--page-fg-muted);
  margin: 0 0 12px;
  padding: 0;
}
.docs-sidebar-section a {
  display: block;
  padding: 8px 12px;
  margin: 0 -12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--page-fg-soft);
  text-decoration: none;
  letter-spacing: -0.003em;
  transition: background 0.18s ease, color 0.18s ease;
}
.docs-sidebar-section a:hover {
  background: rgba(243, 236, 222, 0.04);
  color: var(--page-fg);
}
.docs-sidebar-section a.is-active {
  color: var(--page-accent);
  background: rgba(211, 90, 61, 0.08);
}

/* Article column. */
.docs-article {
  max-width: 720px;
  width: 100%;
}
.docs-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13px;
  font-weight: 300;
  color: var(--page-fg-muted);
  margin: 0 0 24px;
}
.docs-breadcrumb a {
  color: var(--page-fg-muted);
  text-decoration: none;
  transition: color 0.18s ease;
}
.docs-breadcrumb a:hover { color: var(--page-fg); }
.docs-breadcrumb .docs-breadcrumb-sep {
  color: var(--page-fg-faint);
  font-size: 11px;
}
.docs-breadcrumb .docs-breadcrumb-current { color: var(--page-fg); }

.docs-article h1 {
  font-family: var(--page-font);
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--page-fg);
}
.docs-article-subtitle {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--page-fg-soft);
  margin: 0 0 32px;
  max-width: 60ch;
}

/* Hero subtitle, Confidence Score page only — subtle aqua tint that lifts
   it out of the muted cream of the surrounding hero copy without shouting.
   Scoped via the body's `data-view="confidence"` attribute so other docs
   heroes keep their default cream subtitle. */
.page[data-view="confidence"] .docs-hero p {
  color: var(--page-accent-aqua);
}

/* Byline strip. */
.docs-byline {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0;
  margin: 0 0 36px;
  border-top: 1px solid var(--page-rule);
  border-bottom: 1px solid var(--page-rule);
}
.docs-byline-avatar {
  width: 36px; height: 36px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.docs-byline-text {
  display: flex; flex-direction: column; gap: 2px;
}
.docs-byline-name {
  font-size: 14px;
  font-weight: 400;
  color: var(--page-fg);
  letter-spacing: -0.005em;
}
.docs-byline-meta {
  font-size: 12px;
  font-weight: 300;
  color: var(--page-fg-muted);
  letter-spacing: 0;
}

/* Article body — long-form prose. */
.docs-body {
  font-family: var(--page-font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.003em;
  color: var(--page-fg-soft);
}
.docs-body > p { margin: 0 0 18px; }
.docs-body h2 {
  font-family: var(--page-font);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 40px 0 16px;
  color: var(--page-fg);
}
.docs-body h3 {
  font-family: var(--page-font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.008em;
  margin: 28px 0 10px;
  color: var(--page-fg);
}
.docs-body strong { color: var(--page-fg); font-weight: 400; }
.docs-body a {
  color: var(--page-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(211, 90, 61, 0.32);
  transition: border-bottom-color 0.18s ease, color 0.18s ease;
}
.docs-body a:hover { color: var(--page-accent-amber); border-bottom-color: var(--page-accent-amber); }
.docs-body ul, .docs-body ol {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.docs-body ul li, .docs-body ol li {
  position: relative;
  padding: 4px 0 4px 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--page-fg-soft);
}
.docs-body ul li::before {
  content: "—";
  position: absolute;
  left: 0; top: 4px;
  color: var(--page-accent);
  font-weight: 300;
}
.docs-body ol { counter-reset: docol; }
.docs-body ol li {
  counter-increment: docol;
  padding-left: 32px;
}
.docs-body ol li::before {
  content: counter(docol, decimal-leading-zero) ".";
  position: absolute;
  left: 0; top: 4px;
  color: var(--page-accent);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.docs-body code {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  padding: 1px 6px;
  border: 1px solid var(--page-rule);
  border-radius: 4px;
  background: var(--page-bg-alt);
  color: var(--page-fg);
}
.docs-body blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--page-accent);
  font-size: 17px;
  font-weight: 300;
  font-style: normal;
  color: var(--page-fg);
  letter-spacing: -0.005em;
}

/* Highlight callout. */
.docs-callout {
  margin: 28px 0;
  padding: 20px 22px;
  border: 1px solid var(--page-rule-strong);
  border-radius: 10px;
  background: rgba(243, 236, 222, 0.03);
  position: relative;
  overflow: hidden;
}
.docs-callout::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--page-accent-amber) 0%, var(--page-accent) 100%);
}
.docs-callout-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--page-accent);
  margin: 0 0 8px;
}
.docs-callout p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--page-fg-soft); }

/* Related articles. */
.docs-related {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--page-rule);
}
.docs-related-title {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--page-fg-muted);
  margin: 0 0 18px;
}
.docs-related-list {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--page-rule);
  border: 1px solid var(--page-rule);
  border-radius: 8px;
  overflow: hidden;
}
.docs-related-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--page-bg);
  font-size: 14px;
  font-weight: 400;
  color: var(--page-fg);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background 0.18s ease, color 0.18s ease;
}
.docs-related-list a:hover {
  background: var(--page-bg-alt);
  color: var(--page-accent);
}
.docs-related-list a::after {
  content: "→";
  color: var(--page-fg-muted);
  font-size: 14px;
  transition: color 0.18s ease, transform 0.18s ease;
}
.docs-related-list a:hover::after { color: var(--page-accent); transform: translateX(2px); }

/* Help-feedback strip — Perplexity has this at the bottom. */
.docs-feedback {
  margin: 48px 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--page-rule);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.docs-feedback-q {
  font-size: 13px;
  font-weight: 400;
  color: var(--page-fg-soft);
  letter-spacing: -0.003em;
}
.docs-feedback-actions { display: flex; gap: 8px; }
.docs-feedback-actions button {
  background: transparent;
  border: 1px solid var(--page-rule-strong);
  color: var(--page-fg-soft);
  padding: 8px 18px;
  font-family: var(--page-font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.docs-feedback-actions button:hover {
  border-color: var(--page-accent);
  color: var(--page-accent);
  background: rgba(211, 90, 61, 0.06);
}

/* ----------------------------------------------------------------
   Confidence-Score ribbons (used inside /confidence)
   ----------------------------------------------------------------
   Three-up grid of card-style ribbons that visualise example scores.
   Each ribbon has: an uppercase label, a big tabular percentage, a
   slim meter bar that fills to the score, and a tiny band caption
   ("Well backed", "Partially backed", etc.). The fill colour is keyed
   off `data-band` so adding new bands later is one CSS rule, not a
   refactor. Designed to read on the warm docs palette without
   fighting the existing terracotta accents.
   ---------------------------------------------------------------- */
.score-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 22px 0 28px;
}
.score-ribbon {
  position: relative;
  padding: 16px 18px 14px;
  border: 1px solid var(--page-rule-strong);
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      rgba(243, 236, 222, 0.04) 0%,
      rgba(243, 236, 222, 0.015) 100%);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.score-ribbon::before {
  /* Slim coloured stripe pinned to the left edge — same convention as
     `.docs-callout` so the ribbon reads as part of the same family. */
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--score-ribbon-stripe, var(--page-accent));
}
.score-ribbon:hover { transform: translateY(-1px); }

.score-ribbon-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.score-ribbon-label {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--page-fg-soft);
  font-weight: 500;
}
.score-ribbon-pct {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--page-fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.score-ribbon-pct-sym {
  font-size: 16px;
  font-weight: 500;
  color: var(--page-fg-soft);
  margin-left: 1px;
}
.score-ribbon-meter {
  height: 6px;
  border-radius: 999px;
  background: rgba(243, 236, 222, 0.08);
  overflow: hidden;
}
.score-ribbon-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--score-ribbon-fill, var(--page-accent));
  transition: width 0.4s ease;
  box-shadow: 0 0 12px var(--score-ribbon-glow, rgba(211, 90, 61, 0.35));
}
.score-ribbon-foot {
  margin-top: 10px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--page-fg-soft);
  font-weight: 500;
}

/* Band palettes — each band defines stripe, fill gradient, and glow.
   Strong = emerald, Well = amber/terracotta (page-native), Partial =
   warning amber, Model = muted neutral so a low score doesn't shout. */
.score-ribbon[data-band="strong"] {
  --score-ribbon-stripe: #34d399;
  --score-ribbon-fill: linear-gradient(90deg, #10b981 0%, #34d399 100%);
  --score-ribbon-glow: rgba(16, 185, 129, 0.35);
}
.score-ribbon[data-band="well"] {
  --score-ribbon-stripe: var(--page-accent-amber);
  --score-ribbon-fill: linear-gradient(90deg,
    var(--page-accent) 0%,
    var(--page-accent-amber) 100%);
  --score-ribbon-glow: rgba(244, 161, 74, 0.32);
}
.score-ribbon[data-band="partial"] {
  --score-ribbon-stripe: #f59e0b;
  --score-ribbon-fill: linear-gradient(90deg, #d97706 0%, #fbbf24 100%);
  --score-ribbon-glow: rgba(251, 191, 36, 0.28);
}
.score-ribbon[data-band="model"] {
  --score-ribbon-stripe: rgba(243, 236, 222, 0.4);
  --score-ribbon-fill: linear-gradient(90deg,
    rgba(243, 236, 222, 0.32) 0%,
    rgba(243, 236, 222, 0.5) 100%);
  --score-ribbon-glow: rgba(243, 236, 222, 0.12);
}

/* Footer for docs pages — minimal, single line. */
.docs-foot {
  border-top: 1px solid var(--page-rule);
  padding: 32px clamp(20px, 5vw, 56px);
  max-width: 1180px;
  margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.docs-foot-mark {
  font-size: 13px;
  font-weight: 400;
  color: var(--page-fg);
  letter-spacing: -0.005em;
}
.docs-foot-tag {
  font-size: 11px;
  font-weight: 300;
  color: var(--page-fg-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.docs-foot-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.docs-foot-nav a {
  font-size: 12px;
  font-weight: 300;
  color: var(--page-fg-muted);
  text-decoration: none;
  transition: color 0.18s ease;
}
.docs-foot-nav a:hover { color: var(--page-fg); }

/* ==========================================================
   DOCS SEARCH — in-page highlight + status line.
   ----------------------------------------------------------
   The search form on /about /privacy /data /terms /login
   filters the current article client-side. Each match is
   wrapped in <mark class="docs-hit"> and the first one is
   scrolled into view. A small muted status line appears
   just below the search bar reporting the count.
   ========================================================== */
.docs-body mark.docs-hit {
  background: color-mix(in oklab, var(--page-accent) 28%, transparent);
  color: var(--page-fg);
  padding: 1px 4px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--page-accent) 55%, transparent);
}
.docs-search-status {
  max-width: 720px;
  margin: 10px auto 0;
  padding: 0 clamp(20px, 5vw, 32px);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--page-fg-muted);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}
.docs-search-status strong { color: var(--page-fg); font-weight: 400; }
.docs-search-status .docs-search-clear {
  background: transparent;
  border: 1px solid var(--page-rule-strong);
  color: var(--page-fg-soft);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.docs-search-status .docs-search-clear:hover {
  color: var(--page-accent);
  border-color: var(--page-accent);
}

/* ==========================================================
   LOGO SWAP — default state.
   ----------------------------------------------------------
   Desktop shows the DNA45 wordmark; the compact M-mark
   sibling is hidden until the mobile sweep flips it in.
   ========================================================== */
.nav-logo--mark,
.docs-brand-logo--mark { display: none; }

/* ==========================================================
   CARD NUMBERS — GT Maru Light (300) across every card family.
   ----------------------------------------------------------
   Replaces the bulky 800-900 Helvetica / Display-serif numbers
   with thin GT Maru strokes. Tabular nums so digit widths stay
   aligned; -0.01em tracking to tighten the thin weight.
   Currency glyphs + labels step up to GT Maru Regular (400).
   User direction 2026-05-01: "thin fonts on those numbers bro".
   ========================================================== */
.derby-hero-score,
.sassa-amount-num,
.taxi-fare-num,
.gautrain-hero-time-num,
.yt-odometer-num,
.w-now .w-temp {
  font-family: "GT Maru", "Inter", system-ui, -apple-system, sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.015em !important;
  font-variant-numeric: tabular-nums;
}

/* Taxi fare used a gradient text-fill that muddied the thin
   stroke; flatten to solid text colour so the weight reads
   cleanly. Colour tinting on derby scores (w/l/d) remains
   because those variants set color on a modifier class. */
.taxi-fare-num {
  background: none !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
}

/* Adjacent currency / secondary glyphs — GT Maru Regular (400).
   .gautrain-mini-num intentionally NOT included here any more: the
   Gautrain card now uses thin Comfortaa across all of its numerics so
   the countdown reads as one elegant family with the time. */
.taxi-fare-currency,
.sassa-amount-currency {
  font-family: "GT Maru", "Inter", system-ui, -apple-system, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* ==========================================================
   MOBILE SWEEP (<= 640px) — aggressive space recovery.
   ----------------------------------------------------------
   Built from direct user feedback: DNA45 must breathe on
   phones. Cards drop their loud "DNA45 · DOMAIN" brand
   chips. The main nav keeps only the M-mark + theme pill.
   Docs pages drop the duplicated "Help Center" label.
   Individual card families (YouTube, Derby, Taxi, SASSA,
   Gautrain, Weather) get tightened spacing and type scale.
   ========================================================== */
@media (max-width: 640px) {

  /* ---- Docs / Help-Center pages ---- */
  .docs-top-context,
  .docs-top-nav a.is-active { display: none; }
  .docs-top         { padding: 14px 18px; }
  .docs-top-nav     { gap: 14px; }
  .docs-hero        { padding: 32px 20px 20px; }
  .docs-hero h1     { font-size: 32px; max-width: 100%; }
  .docs-search      { padding: 10px 14px; border-radius: 10px; }
  .docs-search input { font-size: 14px; }
  .docs-search button { padding: 8px 12px; font-size: 11px; letter-spacing: 0.12em; }
  .docs-shell       { padding: 24px 18px 60px; gap: 24px; }
  .docs-article h1  { font-size: 28px; }
  .docs-article-subtitle { font-size: 15px; }
  .docs-sidebar-top-logo { height: 36px; }
  .docs-byline-avatar { width: 30px; height: 30px; }

  /* ---- Main app nav + most docs pages ----
     Main app + /privacy /data /terms /login swap the DNA45
     wordmark for the compact M-mark on phones so the bar can
     breathe. /about keeps its wordmark on mobile because the
     page has no --mark sibling in its markup — the CSS swap
     is a natural no-op there. */
  .nav-logo--wordmark,
  .docs-brand-logo--wordmark { display: none !important; }
  .nav-logo--mark        { display: block !important; height: 32px; width: auto; }
  .docs-brand-logo--mark { display: block !important; height: 30px; width: auto; }

  /* Drop everything except the theme switcher. */
  .nav-right > #newChatBtn,
  .nav-right > .auth-pill,
  .nav-right > .nav-powered,
  .nav-right > .nav-mic,
  .nav-right > .narrate-toggle { display: none !important; }
  .nav-right { gap: 8px; }
  .theme-btn { padding: 6px 10px; font-size: 12px; }
  .theme-btn #themeName { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---- Shared card branding: hide the generic "DNA45 · DOMAIN"
     chip on mobile to buy back vertical space. Exceptions:
     .taxi-pill and .gautrain-pill stay visible because they
     are now the primary header label on those cards (the
     duplicated eyebrow + title were removed upstream). ---- */
  .brand-chip:not(.taxi-pill):not(.gautrain-pill) { display: none !important; }

  /* Research-panel subtitle ("DNA45 YouTube · query" etc.)
     — keep the bold 't' line, drop the mono subtitle. */
  .research-title .s { display: none; }

  /* Generic kind labels that some cards print above content. */
  .side-card-kind,
  .card-kind,
  .card-brand-bar { display: none !important; }

  /* ---- YouTube card ---- */
  .yt-head { gap: 0; }
  .yt-title { font-size: 15px; line-height: 1.3; }
  .yt-sub   { font-size: 11.5px; flex-wrap: wrap; gap: 4px; }
  .yt-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .yt-foot-left, .yt-foot-right { width: 100%; justify-content: space-between; }
  .yt-odometer-num { font-size: 22px; }

  /* ---- Derby card ---- */
  .derby-hero { padding: 14px; gap: 14px; }
  .derby-hero-title { font-size: 22px; }
  .derby-hero-team { padding: 10px 12px; gap: 10px; }
  .derby-hero-badge,
  .derby-hero-badge--ringed { width: 52px; height: 52px; }
  .derby-hero-score { font-size: 44px; min-width: 40px; }
  .derby-hero-name { font-size: 13px; }
  .derby-hero-nick,
  .derby-hero-founded { font-size: 10px; }
  .derby-hero-vs { font-size: 16px; }
  .derby-stat-grid { grid-template-columns: 1fr; }
  .derby-arc-grid { grid-template-columns: 1fr; }

  /* ---- Taxi / SASSA / Gautrain / Weather card headers ----
     Most of these cards print a brand-chip at the top that
     is already suppressed above. The following tightens any
     remaining oversized hero panels. ---- */
  .taxi-card,
  .sassa-card,
  .gautrain-card,
  .weather-card { padding: 14px !important; }
  .taxi-fare-num,
  .sassa-amount-num,
  .gautrain-hero-time-num { font-size: clamp(48px, 15vw, 96px) !important; letter-spacing: -0.015em !important; }
  .taxi-fare-currency,
  .sassa-amount-currency { font-size: clamp(18px, 4.5vw, 24px) !important; }

  /* ---- q-block (the "You asked · timestamp" question header) ---- */
  .q-label { font-size: 10px; letter-spacing: 0.14em; }
  .q-text  { font-size: 20px; line-height: 1.25; }

  /* ---- Landing ---- */
  .landing { padding: clamp(24px, 8vw, 48px) 20px; }
}

/* ==========================================================
   .site-fineprint — legal/nav footer pinned to the bottom of
   the landing viewport. Only visible on the landing view so
   the results/chat UI stays clean. Tiny and muted by default
   — the point is Google's crawler + the OAuth branding
   verifier need a clickable /privacy link in static HTML.
   ========================================================== */
.site-fineprint {
  position: fixed;
  left: 0; right: 0; bottom: 14px;
  z-index: 4;
  display: flex; justify-content: center; align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  pointer-events: none;       /* spans + gaps don't block clicks */
}
.site-fineprint a {
  pointer-events: auto;
  color: var(--muted);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
.site-fineprint a:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--text) 5%, transparent);
}
.site-fineprint span { opacity: 0.5; }

/* Hide once the user is inside the results view so the composer
   doesn't collide with it. The landing view is the default. */
body[data-view="results"] .site-fineprint { display: none; }

/* On small phones: keep it but shrink further. */
@media (max-width: 560px) {
  .site-fineprint { font-size: 10px; bottom: 8px; gap: 6px; }
  .site-fineprint a { padding: 2px 3px; }
}

/* When Freedom Day fineprint is active, slide our footer up a
   row so both can be visible without overlap. */
body.is-freedom-day .site-fineprint { bottom: 32px; }

/* ============================================================
   AUTH CARD + GATE MODAL
   ------------------------------------------------------------
   Shared visual language between the standalone /login page
   and the soft-paywall modal that fires after 5 searches or
   5 minutes of active use. One card. Two surfaces. GT Maru
   throughout, terracotta accent, animated cream/terracotta
   gradient halo behind the card.
   ============================================================ */
.auth-stage {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 6vw, 48px);
  overflow: hidden;
  isolation: isolate;
}
.auth-stage::before,
.auth-stage::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 40% at 22% 28%, rgba(211, 90, 61, 0.32), transparent 70%),
    radial-gradient(36% 36% at 78% 22%, rgba(243, 236, 222, 0.10), transparent 70%),
    radial-gradient(48% 48% at 30% 82%, rgba(211, 90, 61, 0.18), transparent 72%),
    radial-gradient(40% 40% at 82% 78%, rgba(243, 236, 222, 0.08), transparent 72%);
  filter: blur(32px) saturate(1.05);
  animation: auth-halo-drift 22s ease-in-out infinite alternate;
}
.auth-stage::after {
  animation-duration: 34s;
  animation-direction: alternate-reverse;
  opacity: 0.7;
  background:
    radial-gradient(45% 45% at 60% 40%, rgba(211, 90, 61, 0.20), transparent 70%),
    radial-gradient(35% 35% at 18% 62%, rgba(243, 236, 222, 0.10), transparent 70%);
}
@keyframes auth-halo-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.00); }
  50%  { transform: translate3d( 2%,  2%, 0) scale(1.06); }
  100% { transform: translate3d( 1%, -2%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-stage::before,
  .auth-stage::after { animation: none; }
}

/* Premium glass card — barely-there surface, light blur, hairline
   border. The animated wallpaper reads through cleanly. */
.auth-card {
  position: relative;
  width: min(420px, 100%);
  background: rgba(14, 11, 8, 0.22);
  border: 1px solid rgba(243, 236, 222, 0.07);
  border-radius: 20px;
  padding: clamp(32px, 5vw, 44px) clamp(24px, 4.5vw, 40px) clamp(28px, 4vw, 36px);
  text-align: center;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(243, 236, 222, 0.05) inset;
  animation: auth-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);     }
}
.auth-card-logo {
  display: block;
  width: 88px;
  height: auto;
  margin: 0 auto 22px;
  user-select: none;
  pointer-events: none;
}
.auth-card h2 {
  font-family: "GT Maru", var(--page-font);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--page-fg);
  margin: 0 0 10px;
}
.auth-card .auth-card-lede {
  font-family: "GT Maru", var(--page-font);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--page-fg-soft);
  max-width: 32ch;
  margin: 0 auto 26px;
}
.auth-card-providers {
  display: flex; flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}
.auth-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  border-radius: 12px;
  border: 1px solid var(--page-rule-strong);
  background: var(--page-fg);
  color: #0e0b08;
  font-family: "GT Maru", var(--page-font);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
.auth-btn:active { transform: translateY(0); }
.auth-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
  background: rgba(243, 236, 222, 0.08);
  color: var(--page-fg-muted);
  border-color: var(--page-rule);
  box-shadow: none;
  transform: none;
}
.auth-btn[disabled]:hover { transform: none; box-shadow: none; }
.auth-btn--apple {
  background: #1a1a1a;
  color: var(--page-fg);
  border-color: rgba(243, 236, 222, 0.18);
}
.auth-btn--apple:hover { background: #000; }
.auth-btn-tag {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--page-fg-muted);
  font-weight: 400;
}
.auth-card-fineprint {
  font-family: "GT Maru", var(--page-font);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--page-fg-muted);
  margin: 18px 0 0;
}
.auth-card-fineprint a {
  color: var(--page-fg-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--page-rule-strong);
}
.auth-card-fineprint a:hover { color: var(--page-fg); border-bottom-color: var(--page-fg); }

/* Modal version — floats over the app instead of filling the page. */
.auth-gate {
  position: fixed; inset: 0;
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  background: rgba(14, 11, 8, 0.72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  animation: auth-gate-in 0.32s ease-out both;
}
@keyframes auth-gate-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.auth-gate[hidden] { display: none; }
.auth-gate-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--page-rule);
  background: rgba(14, 11, 8, 0.6);
  color: var(--page-fg-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.auth-gate-close:hover {
  color: var(--page-fg);
  border-color: var(--page-rule-strong);
  background: rgba(14, 11, 8, 0.85);
}
.auth-gate-close svg { width: 14px; height: 14px; }
.auth-gate .auth-card {
  /* the modal already has a backdrop; let the card animate from
     a slightly larger pop */
  animation: auth-modal-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes auth-modal-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);     }
}
.auth-gate-eyebrow {
  display: inline-block;
  font-family: "GT Maru", var(--page-font);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--page-accent);
  margin: 0 0 14px;
}

/* Apple button — active (no longer greyed). Black pill, cream glyph. */
.auth-btn--apple {
  background: #0a0a0a;
  color: var(--page-fg);
  border-color: rgba(243, 236, 222, 0.22);
}
.auth-btn--apple:hover { background: #000; border-color: rgba(243, 236, 222, 0.35); }

/* "Coming soon" fineprint beneath the providers — hidden until the
   Apple button is clicked, then fades in with a subtle pulse. */
.auth-soon {
  margin: 14px 0 0;
  font-family: "GT Maru", var(--page-font);
  font-size: 12px;
  font-weight: 300;
  color: var(--page-fg-muted);
  letter-spacing: -0.003em;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.auth-soon.is-pulse {
  opacity: 1;
  animation: auth-soon-pulse 1.6s ease-out;
}
@keyframes auth-soon-pulse {
  0%   { opacity: 0;  transform: translateY(4px); }
  20%  { opacity: 1;  transform: translateY(0);   color: var(--page-accent); }
  100% { opacity: 1;  transform: translateY(0);   color: var(--page-fg-muted); }
}

/* Two thin chasing stripes along the card perimeter — one cyan, one
   magenta, running 180° apart so they appear to chase each other.
   The rest of the border stays transparent; only a short arc of each
   conic-gradient is visible and it rotates continuously. Uses the
   mask-composite trick to keep the ring on the border only. */
@property --auth-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.auth-card::before,
.auth-card::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;                 /* stripe thickness */
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: auth-chase 4.5s linear infinite;
}
.auth-card::before {
  background: conic-gradient(
    from var(--auth-angle),
    transparent 0deg,
    transparent 300deg,
    rgba(0, 212, 255, 0.00) 318deg,
    rgba(0, 212, 255, 0.85) 340deg,
    rgba(255, 255, 255, 1.00) 355deg,
    rgba(0, 212, 255, 0.00) 360deg
  );
}
.auth-card::after {
  background: conic-gradient(
    from calc(var(--auth-angle) + 180deg),
    transparent 0deg,
    transparent 300deg,
    rgba(255, 0, 110, 0.00) 318deg,
    rgba(255, 0, 110, 0.85) 340deg,
    rgba(255, 255, 255, 1.00) 355deg,
    rgba(255, 0, 110, 0.00) 360deg
  );
}
@keyframes auth-chase { to { --auth-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .auth-card::before,
  .auth-card::after { animation: none; }
}

/* Stubborn-modal shake. Applied by auth-gate.js when the user clicks
   on the backdrop or hits Escape — instead of dismissing the modal
   we replay this short horizontal shimmy so the card "says no" with
   visual feedback. Subtle by design (small amplitude, short duration)
   so it nudges rather than scolds. */
.auth-card.is-shake {
  animation: auth-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes auth-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px);  }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px);  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card.is-shake { animation: none; }
}

/* Keep the nav visible above the modal so the user never loses their
   bearings. The modal's backdrop-blur still softens everything behind
   it, but the nav stays crisp and interactive. */
body.is-auth-gate-open .nav { z-index: 9500; }

/* ============================================================
   Auto-hide nav while in YouTube expanded + cinema modes.
   Reuses the existing .nav-reveal mousemove flow so any cursor
   nudge brings the nav back for ~2.6s before it slides away
   again. Hover over .nav holds it open. Pure CSS — JS already
   wires .nav-reveal site-wide.
   ============================================================ */
/* Expanded mode hard-hides the nav. We dropped the
   `:not(.nav-reveal)` carve-out — that was letting any mousemove
   pop the nav back into view, which read to the user as "nav is
   persistent in both expanded and cinema". Hope's rule: nav stays
   hidden in expanded, full stop. Cinema's !important rule below
   still overrides this when cinema is on, so the cinema+expanded
   combo (karaoke flow) keeps the nav visible. */
body.is-yt-expanded .nav {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
/* Cinema mode: FORCE the nav to stay visible, no matter what.
   Overrides the wallpaper auto-hide rule (body.wall-active:not
   (.nav-reveal) .nav) and any other auto-hide that might trigger
   while cinema is on. Also bumps the nav above the fullscreen
   .yt-card.is-expanded layer (z-index: 9000, position: fixed,
   inset: 0) — without this, opacity:1 isn't enough because the
   expanded card sits on top of the sticky nav. Hope's rule: nav
   must stay at the top in cinema, NO auto-hide behaviour. */
body.is-yt-cinema .nav {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 9100 !important;
}
/* Same auto-hide treatment for the YT card's own top info strip
   (title + views + sub-line) while in cinema or expanded. Mouse
   movement reveals it via the site-wide .nav-reveal flow. */
.yt-card.is-cinema .yt-head,
.yt-card.is-expanded .yt-head {
  transition: opacity 0.45s ease, transform 0.45s ease;
}
body.is-yt-expanded:not(.nav-reveal) .yt-card.is-expanded .yt-head,
body.is-yt-cinema:not(.nav-reveal) .yt-card.is-cinema .yt-head {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

/* ============================================================
   QUOTE CARDS
   ----------------------------------------------------------
   A quote card has three layers:
     1. .quote-bg     — the patterned background (1 of 20)
     2. .quote-body   — the actual quote + author + topic
     3. .quote-foot   — Copy / New Quote / DNA45 stamp
   The pattern is chosen deterministically by the renderer from
   the quote's text hash, so the same quote always looks the
   same — repeat encounters feel familiar.
   ============================================================ */
.quote-card {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 18px auto;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-sans);
  color: #fff;
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(255, 255, 255, 0.04) inset;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.quote-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.quote-body {
  position: relative;
  z-index: 1;
  padding: 38px 40px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quote-topic {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.78;
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.quote-mark {
  opacity: 0.32;
  margin: -4px 0 -10px -4px;
  color: #fff;
}
.quote-text {
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-size: 26px;
  line-height: 1.38;
  font-weight: 500;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.005em;
}
.quote-author {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.92;
  margin-top: 6px;
}
.quote-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.quote-foot .dna-stamp { margin-left: auto; color: rgba(255,255,255,0.7); }
.quote-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, transform 0.08s;
}
.quote-action:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.32); }
.quote-action:active { transform: translateY(1px); }
.quote-action.is-ok  { background: rgba(34, 197, 94, 0.32); border-color: #22c55e; }
.quote-card.is-error {
  background: #1a0a0a;
  color: #ff8a8a;
  padding: 22px;
  border-radius: 14px;
}
.quote-error { font-family: var(--font-mono); font-size: 13px; }

@media (max-width: 640px) {
  .quote-body { padding: 28px 24px 20px; }
  .quote-text { font-size: 21px; line-height: 1.36; }
  .quote-author { font-size: 13px; }
}

/* ----------------------------------------------------------
   20 BACKGROUND PATTERNS
   Each .is-pattern-N defines:
     - .quote-bg gradient (the canvas)
     - optional ::before / ::after layers (dots, lines, shapes)
   Palette spans warm/cool/neutral so the deck never feels
   one-note. Hash → pattern in JS keeps results stable.
   ---------------------------------------------------------- */

/* 1 — Indigo violet w/ soft dots */
.quote-card.is-pattern-1 .quote-bg {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.16), transparent 50%),
    linear-gradient(135deg, #312e81 0%, #6d28d9 100%);
}
.quote-card.is-pattern-1 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.12) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.6;
}

/* 2 — Ocean teal w/ diagonal lines */
.quote-card.is-pattern-2 .quote-bg {
  background: linear-gradient(135deg, #0f172a 0%, #0e7490 60%, #06b6d4 100%);
}
.quote-card.is-pattern-2 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 12px);
}

/* 3 — Sunset peach w/ sun-rays */
.quote-card.is-pattern-3 .quote-bg {
  background: linear-gradient(160deg, #f97316 0%, #ec4899 60%, #7c3aed 100%);
}
.quote-card.is-pattern-3 .quote-bg::before {
  content: ""; position: absolute; inset: -50%;
  background: conic-gradient(from 220deg at 80% 110%, rgba(255,255,255,0.18), transparent 30%, rgba(255,255,255,0.18) 60%, transparent 90%);
  opacity: 0.5;
}

/* 4 — Forest moss w/ grid */
.quote-card.is-pattern-4 .quote-bg {
  background: linear-gradient(135deg, #052e1f 0%, #166534 70%, #22c55e 100%);
}
.quote-card.is-pattern-4 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* 5 — Royal purple w/ radial halo */
.quote-card.is-pattern-5 .quote-bg {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(232, 121, 249, 0.45), transparent 50%),
    linear-gradient(135deg, #1e1b4b 0%, #6b21a8 100%);
}

/* 6 — Charcoal crosshatch */
.quote-card.is-pattern-6 .quote-bg {
  background: linear-gradient(180deg, #0a0a0a 0%, #262626 100%);
}
.quote-card.is-pattern-6 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient( 45deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 8px);
}

/* 7 — Burgundy gold */
.quote-card.is-pattern-7 .quote-bg {
  background: linear-gradient(135deg, #450a0a 0%, #7c2d12 60%, #d97706 100%);
}
.quote-card.is-pattern-7 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,215,128,0.18) 1px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: 0.7;
}

/* 8 — Navy circles */
.quote-card.is-pattern-8 .quote-bg {
  background: linear-gradient(135deg, #020617 0%, #1e3a8a 100%);
}
.quote-card.is-pattern-8 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 90% 90%, rgba(96,165,250,0.4), transparent 30%),
    radial-gradient(circle at 10% 10%, rgba(167,139,250,0.3), transparent 30%);
}

/* 9 — Coral mint */
.quote-card.is-pattern-9 .quote-bg {
  background: linear-gradient(135deg, #fb7185 0%, #f59e0b 50%, #34d399 100%);
}
.quote-card.is-pattern-9 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(120deg, rgba(255,255,255,0.08) 0 4px, transparent 4px 22px);
}

/* 10 — Slate sky w/ noise */
.quote-card.is-pattern-10 .quote-bg {
  background: linear-gradient(180deg, #1e293b 0%, #475569 60%, #94a3b8 100%);
}
.quote-card.is-pattern-10 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.6px);
  background-size: 6px 6px;
}

/* 11 — Emerald deep */
.quote-card.is-pattern-11 .quote-bg {
  background:
    radial-gradient(ellipse at 30% 70%, rgba(16,185,129,0.5), transparent 55%),
    linear-gradient(135deg, #022c22 0%, #064e3b 100%);
}

/* 12 — Magenta orange */
.quote-card.is-pattern-12 .quote-bg {
  background: linear-gradient(120deg, #d946ef 0%, #ec4899 50%, #f97316 100%);
}
.quote-card.is-pattern-12 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.18) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  opacity: 0.55;
}

/* 13 — Mint cream (light, switches text color) */
.quote-card.is-pattern-13 { color: #0f172a; }
.quote-card.is-pattern-13 .quote-bg {
  background: linear-gradient(160deg, #ecfdf5 0%, #a7f3d0 70%, #34d399 100%);
}
.quote-card.is-pattern-13 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(15,23,42,0.06) 0 1px, transparent 1px 14px);
}
.quote-card.is-pattern-13 .quote-text { text-shadow: none; }
.quote-card.is-pattern-13 .quote-topic { background: rgba(15,23,42,0.08); color: #064e3b; }
.quote-card.is-pattern-13 .quote-mark { color: #064e3b; }
.quote-card.is-pattern-13 .quote-foot { background: rgba(15,23,42,0.08); border-top-color: rgba(15,23,42,0.08); }
.quote-card.is-pattern-13 .quote-action { color: #0f172a; border-color: rgba(15,23,42,0.18); background: rgba(15,23,42,0.04); }
.quote-card.is-pattern-13 .quote-action:hover { background: rgba(15,23,42,0.1); }
.quote-card.is-pattern-13 .dna-stamp { color: rgba(15,23,42,0.65); }

/* 14 — Rose gold */
.quote-card.is-pattern-14 .quote-bg {
  background: linear-gradient(135deg, #831843 0%, #be185d 60%, #f59e0b 100%);
}
.quote-card.is-pattern-14 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-radial-gradient(circle at 80% 20%, rgba(255,215,170,0.2) 0 2px, transparent 2px 18px);
}

/* 15 — Deep blue stars */
.quote-card.is-pattern-15 .quote-bg {
  background: linear-gradient(180deg, #020617 0%, #0c4a6e 100%);
}
.quote-card.is-pattern-15 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(white 0.6px, transparent 1px) 0 0/40px 40px,
    radial-gradient(white 0.5px, transparent 1px) 12px 18px/60px 60px;
  opacity: 0.5;
}

/* 16 — Olive tan */
.quote-card.is-pattern-16 { color: #fef3c7; }
.quote-card.is-pattern-16 .quote-bg {
  background: linear-gradient(135deg, #1c1917 0%, #44403c 50%, #78716c 100%);
}
.quote-card.is-pattern-16 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(254,243,199,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(254,243,199,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* 17 — Cyan purple electric */
.quote-card.is-pattern-17 .quote-bg {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(34,211,238,0.55), transparent 50%),
    radial-gradient(ellipse at 100% 0%,  rgba(192,132,252,0.55), transparent 50%),
    #0b1020;
}

/* 18 — Crimson black */
.quote-card.is-pattern-18 .quote-bg {
  background: linear-gradient(135deg, #000000 0%, #7f1d1d 100%);
}
.quote-card.is-pattern-18 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(248,113,113,0.08) 0 1px, transparent 1px 14px);
}

/* 19 — Ivory gold (light) */
.quote-card.is-pattern-19 { color: #44403c; }
.quote-card.is-pattern-19 .quote-bg {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 60%, #fde68a 100%);
}
.quote-card.is-pattern-19 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(120,113,108,0.18) 1px, transparent 1.4px);
  background-size: 18px 18px;
  opacity: 0.6;
}
.quote-card.is-pattern-19 .quote-text { text-shadow: none; color: #1c1917; }
.quote-card.is-pattern-19 .quote-topic { background: rgba(28,25,23,0.1); color: #78350f; }
.quote-card.is-pattern-19 .quote-mark { color: #92400e; }
.quote-card.is-pattern-19 .quote-foot { background: rgba(28,25,23,0.06); border-top-color: rgba(28,25,23,0.08); }
.quote-card.is-pattern-19 .quote-action { color: #1c1917; border-color: rgba(28,25,23,0.2); background: rgba(28,25,23,0.04); }
.quote-card.is-pattern-19 .quote-action:hover { background: rgba(28,25,23,0.1); }
.quote-card.is-pattern-19 .dna-stamp { color: rgba(28,25,23,0.65); }

/* 20 — Aurora rainbow soft */
.quote-card.is-pattern-20 .quote-bg {
  background:
    conic-gradient(from 200deg at 50% 50%,
      #22d3ee 0deg, #a78bfa 90deg, #f472b6 180deg, #fbbf24 270deg, #22d3ee 360deg);
  filter: saturate(0.85);
}
.quote-card.is-pattern-20 .quote-bg::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

/* ============================================================
   TIME CARD — live world clock + timezone conversion
   ------------------------------------------------------------
   Three modes, all live-ticking:
     • now      → single large clock + city + date
     • convert  → two clocks side by side with offset diff badge
     • strip    → responsive grid of compact clocks
   The visual language matches the other cards (panel + line +
   shadow + footer) but the digit display borrows GT Maru Light
   at large size so the time reads like editorial typography,
   not a digital appliance.
   ============================================================ */
.time-card {
  display: flex; flex-direction: column; gap: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 22px 24px 18px;
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.5s ease both;
}
.time-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(620px 280px at 92% -22%,
    color-mix(in oklab, var(--brand) 16%, transparent), transparent 62%);
  pointer-events: none;
}

/* Header: mode label on top, raw query echoed underneath as a small
   muted line so the user sees their question above the answer. */
.t-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
  position: relative;
}
.t-head-mode {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.t-head-q {
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: var(--display-italic);
  font-weight: var(--display-weight);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.2; letter-spacing: -0.005em;
  color: var(--text);
}

/* Body — mode wrappers laid out by mode */
.t-body { position: relative; }

/* ---- Mode: now (single large clock) ---- */
.t-now-wrap {
  display: grid; grid-template-columns: 1fr;
  justify-items: center; align-items: center;
  padding: 8px 0 4px;
}
.t-now-wrap .t-zone-clock { width: 240px; }
.t-now-wrap .t-time-hm { font-size: clamp(56px, 7vw, 84px); }
.t-now-wrap .t-time-sec { font-size: clamp(22px, 3vw, 32px); }
.t-now-wrap .t-zone-meta { margin-top: 14px; align-items: center; text-align: center; }

/* ---- Mode: convert (two clocks + arrow) ---- */
.t-convert-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  padding: 4px 0 2px;
}
.t-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.t-side-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.t-side-from .t-time-hm { font-size: clamp(28px, 3.6vw, 40px); }
.t-side-from .t-time-sec { font-size: clamp(14px, 1.6vw, 18px); }
.t-side-to .t-time-hm { font-size: clamp(34px, 4.2vw, 50px); color: var(--text); }
.t-side-to .t-time-sec { font-size: clamp(16px, 1.8vw, 20px); }
.t-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted);
}
.t-arrow svg { width: 36px; height: auto; }
.t-diff {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--brand) 70%, var(--text));
  text-align: center;
  max-width: 14ch;
  line-height: 1.35;
}
@media (max-width: 640px) {
  .t-convert-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
  }
  .t-arrow { transform: rotate(90deg); margin: 4px 0; }
}

/* ---- Mode: strip (responsive grid) ---- */
.t-strip-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  padding: 4px 0 2px;
}
.t-strip-wrap .t-zone-clock { width: 110px; margin: 0 auto; }
.t-strip-wrap .t-time-hm { font-size: 22px; }
.t-strip-wrap .t-time-sec { font-size: 13px; }
.t-strip-wrap .t-zone-meta { align-items: center; text-align: center; margin-top: 8px; }

/* ---- Single zone block (used by every mode) ---- */
.t-zone {
  display: flex; flex-direction: column;
  position: relative;
  min-width: 0;
}
.t-zone-clock {
  position: relative;
  width: 140px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  isolation: isolate;
}
.t-zone-clock::after {
  /* Subtle day/night halo behind the dial — pure mood, no info weight. */
  content: "";
  position: absolute; inset: -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--brand) 9%, transparent), transparent 70%);
  z-index: -1;
  pointer-events: none;
  transition: background 0.6s ease;
}
.t-zone[data-daynight="night"] .t-zone-clock::after {
  background: radial-gradient(closest-side,
    color-mix(in oklab, #1c2a4a 28%, transparent), transparent 70%);
}

/* ---- Analog clock face (CSS-driven, plain divs) ---- */
.t-clock {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%,
      color-mix(in oklab, var(--bg-soft, var(--bg)) 65%, transparent) 0%,
      color-mix(in oklab, var(--bg-soft, var(--bg)) 90%, transparent) 100%);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 2px color-mix(in oklab, var(--text) 4%, transparent),
    0 6px 22px color-mix(in oklab, var(--text) 6%, transparent);
}

/* Twelve tick marks rotated around the dial center. Each tick is a thin
   div anchored at the top center that pivots from the bottom (clock
   center). Its visible mark is drawn near the rim with ::before. */
.t-tick {
  position: absolute;
  top: 0; left: 50%;
  width: 0; height: 50%;
  transform-origin: 0 100%;
  transform: rotate(calc(var(--i) * 30deg));
  pointer-events: none;
}
.t-tick::before {
  content: "";
  position: absolute;
  left: -1px; top: 6%;
  width: 2px; height: 9%;
  background: color-mix(in oklab, var(--text) 32%, transparent);
  border-radius: 1px;
}
.t-tick-major::before {
  width: 2.5px; height: 12%;
  background: var(--text);
}

/* Three hands. bottom:50% places the bottom edge at the dial center; the
   transform-origin sits on that bottom edge so a CSS rotate() pivots the
   hand around the dial center as expected. */
.t-hand {
  position: absolute;
  bottom: 50%; left: 50%;
  background: var(--text);
  transform: rotate(0deg);
  transform-origin: 50% 100%;
  transition: transform 0.5s cubic-bezier(0.4, 1.5, 0.4, 1);
  border-radius: 4px;
  pointer-events: none;
}
.t-hand-hour {
  height: 28%;
  width: 4px;
  margin-left: -2px;
  z-index: 3;
}
.t-hand-min {
  height: 38%;
  width: 2.6px;
  margin-left: -1.3px;
  z-index: 4;
}
.t-hand-sec {
  height: 42%;
  width: 1.4px;
  margin-left: -0.7px;
  background: var(--brand);
  border-radius: 2px;
  z-index: 5;
  /* The second hand snaps with a brisk overshoot — the only "wristwatch"
     beat on the dial. */
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.t-pin {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin-top: -4px; margin-left: -4px;
  background: var(--text);
  border-radius: 50%;
  z-index: 6;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--bg) 80%, transparent);
}

/* ---- Digital readout (24-hour, GT Maru Light) ---- */
.t-zone-digital {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--text);
  text-align: center;
}
.t-zone-digital .t-time {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.t-time-hm {
  font-size: clamp(34px, 4.2vw, 48px);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.t-time-sec {
  font-size: clamp(16px, 1.9vw, 22px);
  font-weight: 300;
  color: var(--muted);
  letter-spacing: -0.01em;
}
.t-tick-track {
  margin: 10px auto 0;
  width: 64%;
  max-width: 200px;
  height: 2px;
  border-radius: 1px;
  background: color-mix(in oklab, var(--text) 8%, transparent);
  overflow: hidden;
}
.t-tick-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--brand) 80%, transparent),
    var(--brand));
  border-radius: 1px;
  transition: width 0.9s linear;
}
.t-zone-offset {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}

/* Where + date metadata */
.t-zone-meta {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 14px;
  min-width: 0;
}
.t-zone-where {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.t-flag {
  width: 22px; height: auto;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  flex-shrink: 0;
}
.t-zone-where-text {
  display: flex; flex-direction: column; min-width: 0;
}
.t-city {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px; letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-country {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--muted-2);
}
.t-date {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Footer — same shape as the other cards. */
.t-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.t-foot a { color: var(--muted); text-decoration: none; }
.t-foot a:hover { color: var(--text); }
.t-foot .foot-sep { opacity: 0.4; padding: 0 6px; }
.t-foot .dna-stamp { color: var(--muted-2); letter-spacing: 0.06em; }

/* The header pill */
.time-card .t-pill { align-self: start; }

/* ============================================================
 * DID YOU KNOW — gold-foil tangential-fact block
 * Renders the "## Did you know?" trailing section in a warm,
 * subtle gold-leaf treatment so the eye lands on it after the
 * answer body. The block is wrapped by app.js renderMarkdown
 * post-processing into <aside class="dyk-block">.
 * ============================================================ */
.dyk-block {
  margin: 1.4rem 0 0.4rem;
  padding: 14px 18px 16px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(255, 215, 0, 0.04) 50%, rgba(184, 134, 11, 0.06) 100%),
    var(--panel, rgba(20, 20, 28, 0.4));
  border: 1px solid rgba(212, 175, 55, 0.22);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.06) inset,
    0 8px 24px -12px rgba(212, 175, 55, 0.18);
  position: relative;
  /* Easter-egg reveal — Hope spec 2026-05-12: the gold-foil DYK
     should fade in LAST, ~3s after the rest of the answer card
     has painted, so it lands as a delayed gift. `fill-mode: both`
     keeps the block fully invisible during the delay so the
     reveal feels intentional, not janky. */
  animation: dyk-reveal 900ms ease 3000ms both;
}
@keyframes dyk-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .dyk-block { animation: none; }
}
.dyk-block::before {
  content: "✦";
  position: absolute;
  top: 12px; right: 16px;
  font-size: 13px;
  color: #d4af37;
  opacity: 0.55;
}
.dyk-block .dyk-heading,
.dyk-block h2.dyk-heading {
  margin: 0 0 8px;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  background: linear-gradient(92deg, #f4d68a 0%, #d4af37 30%, #fff5c2 55%, #c9a227 80%, #f4d68a 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: dyk-shimmer 6s linear infinite;
}
.dyk-block p {
  margin: 0;
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.55;
  color: #e8d8a4;
}
.dyk-block p strong,
.dyk-block p b {
  color: #f4d68a;
  font-weight: 700;
  font-style: normal;
}
@keyframes dyk-shimmer {
  0%   { background-position:   0% center; }
  100% { background-position: 200% center; }
}

/* ============================================================
 * STRAIN CARD — DNA45 THC Strain Wiki (Leafly-style)
 * Landscape dashboard card. Hero banner top, "nutrition info"
 * stat ribbon, then a responsive grid of panels (effects,
 * helps with, flavors+aromas, terpenes, lineage).
 * ============================================================ */
.strain-card {
  --strn-leaf:   #4caf6a;
  --strn-leaf-2: #2e8b57;
  --strn-bud:    #1d6f3a;
  --strn-line:   color-mix(in oklab, #4caf6a 22%, transparent);
  --strn-panel:  color-mix(in oklab, #4caf6a 6%, var(--panel, #16181c));
  --strn-thc:    #c84e3c;
  --strn-cbd:    #4a90e2;
  --strn-pos:    #43c281;
  --strn-neg:    #e08a4a;
  display: block;
  margin: 18px 0;
  border-radius: 18px;
  background: var(--strn-panel);
  border: 1px solid var(--strn-line);
  box-shadow:
    0 18px 48px -16px rgba(20, 60, 30, 0.32),
    0 0 0 1px rgba(76, 175, 106, 0.05) inset;
  overflow: hidden;
  contain: layout paint style;
}

/* HERO ─ image + name + type badge banner ─────────────────── */
.strain-card .strn-hero {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  /* BLACK hero header on dark themes — Hope's directive: strain-card
     top must match the black bud-photo area beside it so the whole
     hero reads as one continuous slab. The faint radial green whisper
     from the top-left corner stays so there's still a subtle growing
     warmth, but the base tone is pure black to match .strn-hero-media.
     Light themes (Stanford/Tuks/Unibo) override this further down with
     cream — this rule is only seen by dark themes. */
  background:
    radial-gradient(140% 90% at 0% 0%, rgba(76, 175, 106, 0.08), transparent 55%),
    #000;
  border-bottom: 1px solid var(--strn-line);
}
.strn-hero-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* Solid black backdrop — Hope's strain images are transparent PNGs
     (cut-out buds), so they need a uniform dark canvas to feel like
     studio product shots. The radial green glow sits on top of black
     for a subtle depth without competing with the bud silhouette. */
  background:
    radial-gradient(circle at 30% 30%, rgba(76, 175, 106, 0.18), transparent 65%),
    #000;
  transform: translateZ(0);
  contain: content;
}
.strn-hero-img {
  width: 100%;
  height: 100%;
  /* contain (not cover) so transparent-PNG buds always appear whole —
     never cropped by the square frame. The black hero bg handles any
     letterboxing for non-square aspect ratios. */
  object-fit: contain;
  padding: 8%;
  display: block;
  transition: transform 0.6s cubic-bezier(.2, .85, .25, 1);
  /* Subtle green inner glow so transparent buds pop against the black bg. */
  filter: drop-shadow(0 6px 20px rgba(76, 175, 106, 0.22));
}
.strain-card:hover .strn-hero-img { transform: scale(1.04); }

/* PLACEHOLDER state — fills the entire square frame edge-to-edge
   (Hope's PLACEHOLDER.png is itself a square graphic so it should
   be cover-fit, not contained). The "Image Coming Soon" caption
   floats over the bottom edge so users know this slot is in flight. */
.strn-hero-img.is-placeholder {
  object-fit: cover;
  padding: 0;
  background: #000;
  filter: none;
}
.strain-card:hover .strn-hero-img.is-placeholder {
  /* Subtler hover — placeholders shouldn't zoom like photos do. */
  transform: scale(1.015);
}
.strn-hero-coming-soon {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 12px 10px;
  text-align: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 70%);
  pointer-events: none;
  z-index: 2;
}

/* TIER SENTENCE — semi-bold one-liner under the hero meta block ─
   Reads "A {tier} {type} Cannabis Strain with a THC Level of {x%}".
   The tier word is the only colored span — its color matches the THC
   arc tier band so the meter and the prose reinforce each other. */
.strn-tier-sentence {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--text, #e8efe5);
  letter-spacing: 0.005em;
}
.strn-tier-sentence .strn-tier-word {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.strn-tier-sentence .strn-tier-thc {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 700;
  color: color-mix(in oklab, #4caf6a 75%, var(--text));
}
/* Tier-band colours — match thc-arc / thc-stamp colour grading. */
.strn-tier-sentence.is-t1 .strn-tier-word { color: #6fd49a; }
.strn-tier-sentence.is-t2 .strn-tier-word { color: #5cd0e0; }
.strn-tier-sentence.is-t3 .strn-tier-word { color: #f4c272; }
.strn-tier-sentence.is-t4 .strn-tier-word { color: #ff7a59; }

/* BRAND ROW — DNA45 wordmark pinned to the FAR RIGHT ───────── */
.strn-brand-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 0;
}

/* H1 LEAF — pointer-leaf inline before the green strain name.
   Theme-aware: white pointer on dark theme, black on light. The
   leaf itself stays neutral; the H1 text keeps its existing green. */
.strn-name {
  display: flex;
  align-items: center;
  gap: 12px;
}
.strn-name-leaf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Sized off the H1 font-size so it always tracks the title's scale. */
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.strn-name-leaf-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.strn-name-leaf-img.is-light { display: none; }
.strn-name-leaf-img.is-dark  { display: block; }
:root[data-theme="light"] .strn-name-leaf-img.is-dark,
.theme-light .strn-name-leaf-img.is-dark { display: none; }
:root[data-theme="light"] .strn-name-leaf-img.is-light,
.theme-light .strn-name-leaf-img.is-light { display: block; }
.strn-name-text { min-width: 0; }

/* Promote the hero to a 3-column grid when the THC arc meter is
   present — image | meta | arc. Falls back to 2-column when the
   strain has no THC data so the card stays balanced either way. */
.strain-card .strn-hero.has-arc {
  grid-template-columns: 200px 1fr 200px;
}
.strn-hero-meta {
  padding: 22px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.strn-tagline {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, #4caf6a 80%, var(--text));
  font-weight: 700;
}
.strn-name {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Green gradient lives on the inner span now that the H1 is a flex
   container with a sibling pointer-leaf. background-clip: text on a
   flex parent doesn't paint child elements, so we move the gradient
   onto `.strn-name-text` directly. */
.strn-name-text {
  background: linear-gradient(92deg, #4caf6a 0%, #2e8b57 60%, #1d6f3a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.strn-hero-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.strn-type-badge {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.strn-type-badge.is-hybrid {
  color: #4caf6a;
  background: color-mix(in oklab, #4caf6a 12%, transparent);
}
.strn-type-badge.is-indica {
  color: #9a7bd6;
  background: color-mix(in oklab, #9a7bd6 12%, transparent);
}
.strn-type-badge.is-sativa {
  color: #e0a93a;
  background: color-mix(in oklab, #e0a93a 14%, transparent);
}
.strn-rating {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  font-weight: 700;
  color: #f4c860;
}
.strn-rating-count { color: var(--muted-2, #8a9590); font-weight: 500; }
.strn-shortcode {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted, #97a59c);
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
.strn-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.strn-tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted, #97a59c);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(76, 175, 106, 0.08);
  border: 1px solid rgba(76, 175, 106, 0.18);
}

/* RIBBON ─ "nutrition info" stat strip ─────────────────────── */
.strn-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  background:
    linear-gradient(180deg, rgba(76, 175, 106, 0.04) 0%, transparent 100%),
    color-mix(in oklab, #4caf6a 4%, var(--panel, #1a1f1c));
  border-bottom: 1px solid var(--strn-line);
}
.strn-stat {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--strn-line);
}
.strn-stat:last-child { border-right: none; }
.strn-stat-k {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2, #7a8580);
  font-weight: 600;
}
.strn-stat-v {
  font-size: 19px;
  font-weight: 800;
  color: var(--text, #e8efe5);
  letter-spacing: -0.005em;
}
.strn-stat-v.is-thc { color: var(--strn-thc); }
.strn-stat-v.is-cbd { color: var(--strn-cbd); }
.strn-stat-v.is-terp {
  background: linear-gradient(92deg, #4caf6a, #2e8b57);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* PANELS GRID ──────────────────────────────────────────────── */
.strn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.strn-panel {
  padding: 18px 22px 16px;
  border-right: 1px solid var(--strn-line);
  border-bottom: 1px solid var(--strn-line);
  contain: layout paint;
}
.strn-panel:last-child { border-bottom: none; }
.strn-about { grid-column: 1 / -1; border-right: none; }
.strn-panel-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in oklab, #4caf6a 78%, var(--text));
}
.strn-sublabel {
  margin: 12px 0 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2, #7a8580);
}
.strn-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text, #d8e0d4);
}

/* PILL ROWS — effects, flavors, aromas ─────────────────────── */
.strn-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.strn-pill {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid transparent;
  background: rgba(76, 175, 106, 0.10);
  color: color-mix(in oklab, #4caf6a 60%, var(--text));
}
.strn-pill.is-pos {
  background: rgba(67, 194, 129, 0.14);
  border-color: rgba(67, 194, 129, 0.30);
  color: #6fd49a;
}
.strn-pill.is-neg {
  background: rgba(224, 138, 74, 0.12);
  border-color: rgba(224, 138, 74, 0.28);
  color: #e8a373;
}
.strn-pill.is-flavor {
  background: rgba(244, 188, 96, 0.10);
  border-color: rgba(244, 188, 96, 0.24);
  color: #f4c272;
}
.strn-pill.is-aroma {
  background: rgba(154, 123, 214, 0.10);
  border-color: rgba(154, 123, 214, 0.24);
  color: #b29ce0;
}

/* MOOD AXIS — calming↔energizing ─────────────────────────── */
.strn-axis {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.strn-axis-end {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.strn-axis-end.is-cool { color: #4a90e2; }
.strn-axis-end.is-warm { color: #e0a93a; }
.strn-axis-rail {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4a90e2 0%, #6b6bb3 50%, #e0a93a 100%);
  opacity: 0.55;
}
.strn-axis-dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1a1f1c;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* HELPS WITH — condition + percent bars ─────────────────────── */
.strn-help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.strn-help-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.strn-help-label {
  color: var(--text, #d8e0d4);
  font-weight: 600;
}
.strn-help-bar {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: rgba(76, 175, 106, 0.10);
  overflow: hidden;
}
.strn-help-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4caf6a, #2e8b57);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(.2, .85, .25, 1);
}
.strn-help-pct {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 700;
  color: color-mix(in oklab, #4caf6a 78%, var(--text));
}
.strn-help-tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted, #97a59c);
  grid-column: 2 / -1;
}
.strn-disclaimer {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted-2, #7a8580);
  font-style: italic;
}

/* TERPENES — semantic-tagged cards ─────────────────────────── */
.strn-terp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.strn-terp-card {
  position: relative;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--strn-line);
  background: rgba(76, 175, 106, 0.04);
  contain: content;
}
.strn-terp-card.is-dominant {
  background: rgba(76, 175, 106, 0.10);
  border-color: rgba(76, 175, 106, 0.34);
}
.strn-terp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.strn-terp-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text, #e8efe5);
}
.strn-terp-tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.strn-terp-card.is-herbal  .strn-terp-tag { color: #6fd49a; background: rgba(67, 194, 129, 0.16); }
.strn-terp-card.is-citrus  .strn-terp-tag { color: #f4c272; background: rgba(244, 188, 96, 0.16); }
.strn-terp-card.is-pepper  .strn-terp-tag { color: #e08a4a; background: rgba(224, 138, 74, 0.18); }
.strn-terp-card.is-pine    .strn-terp-tag { color: #6fb38a; background: rgba(46, 139, 87, 0.18); }
.strn-terp-card.is-floral  .strn-terp-tag { color: #b29ce0; background: rgba(154, 123, 214, 0.18); }
.strn-terp-card.is-earthy  .strn-terp-tag { color: #b08a5a; background: rgba(176, 138, 90, 0.18); }
.strn-terp-dom {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(92deg, #4caf6a, #2e8b57);
  color: #0c1410;
  font-weight: 800;
}
.strn-terp-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #97a59c);
}

/* LINEAGE — key/value rows ─────────────────────────────────── */
.strn-line-grid { display: grid; gap: 8px; }
.strn-line-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}
.strn-line-k {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2, #7a8580);
  font-weight: 700;
}
.strn-line-v { color: var(--text, #d8e0d4); }

/* FOOTER ──────────────────────────────────────────────────── */
.strn-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 22px;
  background: rgba(76, 175, 106, 0.04);
  border-top: 1px solid var(--strn-line);
  font-size: 11px;
  color: var(--muted-2, #7a8580);
}
.strn-foot-stamp {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in oklab, #4caf6a 70%, var(--text));
}
.strn-foot-sep { color: var(--muted-2, #7a8580); opacity: 0.6; }
.strn-foot-disclaimer { flex: 1 1 320px; line-height: 1.5; }

/* THC STAMP — top-right age-restriction mark on hero ──────── */
.strn-thc-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  transform: translateZ(0);
}
.strn-thc-stamp-img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}
.strn-thc-stamp-img.is-light { display: none; }
.strn-thc-stamp-img.is-dark  { display: block; }
:root[data-theme="light"] .strn-thc-stamp,
.theme-light .strn-thc-stamp {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .strn-thc-stamp-img.is-dark,
.theme-light .strn-thc-stamp-img.is-dark { display: none; }
:root[data-theme="light"] .strn-thc-stamp-img.is-light,
.theme-light .strn-thc-stamp-img.is-light { display: block; }

/* WARNING PANEL — yellow cannasign + regulatory text ───────── */
.strn-warning {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 22px;
  background:
    linear-gradient(90deg, rgba(244, 196, 48, 0.14) 0%, rgba(244, 196, 48, 0.04) 100%),
    color-mix(in oklab, #f4c430 6%, var(--panel, #1a1f1c));
  border-top: 1px solid rgba(244, 196, 48, 0.28);
  border-bottom: 1px solid rgba(244, 196, 48, 0.18);
}
.strn-warning-sign {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  /* Subtle wobble draws the eye on first paint, then settles. */
  animation: strn-wobble 2.4s ease-in-out 1;
}
@keyframes strn-wobble {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(-4deg); }
  40%  { transform: rotate(3deg); }
  60%  { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}
.strn-warning-text { display: flex; flex-direction: column; gap: 4px; }
.strn-warning-line {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text, #e8efe5);
}
.strn-warning-line strong {
  font-weight: 800;
  color: #f4c430;
  letter-spacing: 0.04em;
}
.strn-warning-line.is-age {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f4c430;
  font-weight: 700;
  padding-top: 2px;
  border-top: 1px dashed rgba(244, 196, 48, 0.30);
  margin-top: 4px;
}
:root[data-theme="light"] .strn-warning,
.theme-light .strn-warning {
  background:
    linear-gradient(90deg, rgba(244, 196, 48, 0.22) 0%, rgba(244, 196, 48, 0.08) 100%),
    #fffbe8;
  border-top-color: rgba(186, 140, 0, 0.40);
  border-bottom-color: rgba(186, 140, 0, 0.28);
}
:root[data-theme="light"] .strn-warning-line strong,
.theme-light .strn-warning-line strong { color: #b87b00; }
:root[data-theme="light"] .strn-warning-line.is-age,
.theme-light .strn-warning-line.is-age {
  color: #8a5a00;
  border-top-color: rgba(186, 140, 0, 0.30);
}

/* THC ARC METER — right side of hero ────────────────────────
   Modeled on the Rap Analyzer score dial. Background ring is a
   faint track; foreground ring tweens stroke-dashoffset from
   full → final on mount. The number counts up in sync.
   Tier colours (t1/t2/t3/t4) drive the gradient stops via
   ::part-flavored CSS classes on the <stop> elements. */
.strn-thc-meter {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  contain: layout paint;
}
.strn-thc-svg {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
}
.strn-thc-ring-bg {
  stroke: rgba(255, 255, 255, 0.06);
}
.strn-thc-ring-fill {
  /* Initial state set inline via stroke-dashoffset; JS swaps the
     transition + final offset on mount for the calibrate animation. */
  will-change: stroke-dashoffset;
}
/* Tier-keyed gradient stops. The two <stop>s share the same className
   convention as the wrapper — bright→deep at t1, hot→molten at t4. */
.is-t1 .strn-thc-grad-a { stop-color: #6fd49a; }
.is-t1 .strn-thc-grad-b { stop-color: #43a570; }
.is-t2 .strn-thc-grad-a { stop-color: #5cd0e0; }
.is-t2 .strn-thc-grad-b { stop-color: #4a90e2; }
.is-t3 .strn-thc-grad-a { stop-color: #f4c272; }
.is-t3 .strn-thc-grad-b { stop-color: #e08a4a; }
.is-t4 .strn-thc-grad-a { stop-color: #ff7a59; }
.is-t4 .strn-thc-grad-b { stop-color: #ff3b3b; }
/* Tier-keyed glow boost — Expert burns brighter than Beginner. */
.is-t1 { --strn-thc-glow: rgba(67, 165, 112, 0.35); }
.is-t2 { --strn-thc-glow: rgba(74, 144, 226, 0.40); }
.is-t3 { --strn-thc-glow: rgba(224, 138, 74, 0.50); }
.is-t4 { --strn-thc-glow: rgba(255, 59, 59, 0.65); }
.strn-thc-meter::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--strn-thc-glow) 0%, transparent 65%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
.strn-thc-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.strn-thc-num {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--text, #f0f5ec);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.strn-thc-suffix { font-size: 18px; opacity: 0.65; font-weight: 700; }
.strn-thc-kicker {
  margin-top: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted-2, #8a9590);
}
.strn-thc-tier {
  margin-top: 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  /* Multi-word labels ("Beginner Friendly", "Seasoned Smoker", "Expert
     Smoker") were busting the inner safe-zone of the arc and breaking
     to two lines, leaving the second word riding the meter ring. Drop
     the size, tighten the tracking, allow a soft wrap, and clamp the
     line-height so two-word labels still sit cleanly inside the arc. */
  font-size: 8.5px;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  text-align: center;
  padding: 0 6px;
  max-width: 92px;
  white-space: normal;
  word-spacing: -0.02em;
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}
.strn-thc-tier.is-pending { opacity: 0; transform: translateY(4px); }
.is-t1 .strn-thc-tier { color: #6fd49a; }
.is-t2 .strn-thc-tier { color: #5cd0e0; }
.is-t3 .strn-thc-tier { color: #f4c272; }
.is-t4 .strn-thc-tier { color: #ff7a59; }

/* POINTER LEAF — tiny inline icon next to strain names ─────── */
.strn-leaf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  vertical-align: middle;
}
.strn-leaf-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.85;
}
.strn-leaf-img.is-light { display: none; }
.strn-leaf-img.is-dark  { display: block; }
:root[data-theme="light"] .strn-leaf-img.is-dark,
.theme-light .strn-leaf-img.is-dark { display: none; }
:root[data-theme="light"] .strn-leaf-img.is-light,
.theme-light .strn-leaf-img.is-light { display: block; }

/* PARENT PILLS — same visual treatment as "You may also like" cards
   so long parent names ("Northern Lights", "Granddaddy Purple") never
   feel cramped. Stacked vertically inside the Lineage panel. */
.strn-parent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.strn-parent-card .strn-similar-sub {
  color: color-mix(in oklab, #4caf6a 70%, var(--muted, #97a59c));
}

/* SIMILAR STRAINS — "You may also like" panel ──────────────── */
.strn-similar-panel { min-height: 120px; }
.strn-similar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.strn-similar-list.is-loading {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: var(--muted, #97a59c);
  font-size: 12.5px;
}
.strn-similar-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(76, 175, 106, 0.18);
  border-top-color: #4caf6a;
  animation: strn-spin 0.9s linear infinite;
}
.strn-similar-status {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.strn-similar-empty {
  color: var(--muted-2, #7a8580);
  font-size: 12.5px;
  font-style: italic;
}
.strn-similar-pill {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--strn-line);
  background: rgba(76, 175, 106, 0.04);
  color: var(--text, #e8efe5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.strn-similar-pill:hover {
  background: rgba(76, 175, 106, 0.12);
  border-color: color-mix(in oklab, #4caf6a 45%, transparent);
  transform: translateY(-1px);
}
.strn-similar-pill .strn-leaf { width: 16px; height: 16px; }
.strn-similar-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.strn-similar-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text, #e8efe5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strn-similar-sub {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2, #8a9590);
  font-weight: 700;
}
.strn-similar-pill.is-indica .strn-similar-sub { color: #b29ce0; }
.strn-similar-pill.is-sativa .strn-similar-sub { color: #f4c272; }
.strn-similar-pill.is-hybrid .strn-similar-sub { color: #6fd49a; }

/* DID YOU KNOW panel ─────────────────────────────────────── */
.strn-dyk-panel {
  background:
    linear-gradient(135deg, rgba(76, 175, 106, 0.08) 0%, rgba(244, 196, 48, 0.05) 100%),
    var(--strn-panel-bg, transparent);
  border: 1px solid color-mix(in oklab, #4caf6a 22%, transparent);
}
.strn-dyk-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.strn-dyk-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px;
  flex-shrink: 0;
  display: block;
}
.strn-dyk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.strn-dyk-item {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text, #d8e0d4);
}
.strn-dyk-item::before {
  content: "›";
  position: absolute;
  left: 4px;
  top: -1px;
  color: color-mix(in oklab, #4caf6a 70%, var(--text));
  font-weight: 800;
  font-size: 14px;
}
.strn-dyk-item strong { color: var(--text, #f0f5ec); }
.strn-dyk-item em {
  font-style: normal;
  color: color-mix(in oklab, #f4c430 75%, var(--text));
}

/* SKELETON — shown while the 8910-strain DB is fetching ────── */
.strn-skeleton .strn-skeleton-body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
}
.strn-skeleton-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(76, 175, 106, 0.18);
  border-top-color: #4caf6a;
  animation: strn-spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes strn-spin { to { transform: rotate(360deg); } }
.strn-skeleton-text { display: flex; flex-direction: column; gap: 4px; }
.strn-skeleton-eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, #4caf6a 70%, var(--muted));
  font-weight: 700;
}
.strn-skeleton-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(92deg, #4caf6a 0%, #2e8b57 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* MOBILE — collapse hero to single column, shrink ribbon ───── */
@media (max-width: 720px) {
  .strain-card .strn-hero,
  .strain-card .strn-hero.has-arc {
    grid-template-columns: 1fr;
  }
  .strn-hero-media {
    aspect-ratio: 16 / 9;
  }
  .strn-name { font-size: 26px; }
  .strn-stat { padding: 11px 13px; }
  .strn-stat-v { font-size: 16px; }
  .strn-help-row { grid-template-columns: 100px 1fr 40px; }
  .strn-line-row { grid-template-columns: 80px 1fr; }
  .strn-thc-meter { padding: 16px; }
  .strn-thc-svg { max-width: 160px; }
}

/* ============================================================
 * CANNABIS WIKI — LIGHT-THEME OVERRIDES
 * ----------------------------------------------------------
 * The real DNA45 light themes are Stanford / Tuks / Unibo (see
 * the theme palette block above). Earlier overrides used a
 * non-existent `[data-theme="light"]` selector, so the wiki was
 * inheriting dark-theme rules on cream pages — that's why Hope
 * saw black image backdrops, invisible white pointers, and the
 * green gradient bleeding through.
 *
 * Goals here:
 *   • Pointers swap to BLACK on light themes (visible on cream)
 *   • THC stamp, leaf icons, parent-card mark all invert too
 *   • Strain card surface = theme cream (not green-tinted)
 *   • Hero block surface = clean cream (no green radial overlay)
 *   • Hero image bg = WHITE (not black) — transparent PNG buds
 *     read better on white when paired with cream surrounds
 *   • Did You Know panel goes elegant cream + warm gold accent
 *     to match the privacy / about page treatment
 * ============================================================ */
/* NOTE: We DON'T use :where() here — it zeros specificity, and the
   base `.strain-card .strn-hero` selector (specificity 0,2,0) would
   beat it, leaving the green radial gradient visible on light themes.
   Each rule below is written long-form with the theme attribute as
   ancestor + the actual element selector to comfortably out-rank the
   dark-theme defaults. The `!important` on the hero/media background
   is belt-and-braces because there's a multi-layer gradient stack we
   need to fully replace, not merge with. */

/* — STRAIN CARD : pure cream surface, no green tint —————————— */
[data-theme="stanford"] .strain-card,
[data-theme="tuks"]     .strain-card,
[data-theme="unibo"]    .strain-card {
  background: var(--bg-soft, #fffefb);
  box-shadow:
    0 18px 48px -16px rgba(80, 60, 30, 0.14),
    0 0 0 1px rgba(20, 10, 0, 0.06) inset;
}
/* — HERO HEADER : cream gradient instead of green radial —————— */
[data-theme="stanford"] .strain-card .strn-hero,
[data-theme="tuks"]     .strain-card .strn-hero,
[data-theme="unibo"]    .strain-card .strn-hero {
  background: linear-gradient(180deg, var(--bg-soft, #fffefb) 0%, var(--bg, #f7f2ea) 100%) !important;
  border-bottom-color: rgba(20, 10, 0, 0.06);
}
/* — HERO IMAGE FRAME : transparent — bud sits raw on cream panel.
     No background, no white box. The transparent PNG bud reads
     directly against the hero's cream gradient. */
[data-theme="stanford"] .strain-card .strn-hero-media,
[data-theme="tuks"]     .strain-card .strn-hero-media,
[data-theme="unibo"]    .strain-card .strn-hero-media {
  background: transparent !important;
}
[data-theme="stanford"] .strn-hero-img,
[data-theme="tuks"]     .strn-hero-img,
[data-theme="unibo"]    .strn-hero-img {
  filter: drop-shadow(0 4px 14px rgba(20, 20, 20, 0.12));
}
[data-theme="stanford"] .strn-hero-img.is-placeholder,
[data-theme="tuks"]     .strn-hero-img.is-placeholder,
[data-theme="unibo"]    .strn-hero-img.is-placeholder {
  background: transparent;
}

/* — POINTERS : swap to BLACK so they read on cream ——————————— */
[data-theme="stanford"] .strn-name-leaf-img.is-dark,
[data-theme="tuks"]     .strn-name-leaf-img.is-dark,
[data-theme="unibo"]    .strn-name-leaf-img.is-dark,
[data-theme="stanford"] .strn-leaf-img.is-dark,
[data-theme="tuks"]     .strn-leaf-img.is-dark,
[data-theme="unibo"]    .strn-leaf-img.is-dark {
  display: none;
}
[data-theme="stanford"] .strn-name-leaf-img.is-light,
[data-theme="tuks"]     .strn-name-leaf-img.is-light,
[data-theme="unibo"]    .strn-name-leaf-img.is-light,
[data-theme="stanford"] .strn-leaf-img.is-light,
[data-theme="tuks"]     .strn-leaf-img.is-light,
[data-theme="unibo"]    .strn-leaf-img.is-light {
  display: block;
}
[data-theme="stanford"] .strn-leaf-img,
[data-theme="tuks"]     .strn-leaf-img,
[data-theme="unibo"]    .strn-leaf-img {
  opacity: 1;
}

/* — THC STAMP : black-logo asset on cream-tinted bg ——————————— */
[data-theme="stanford"] .strn-thc-stamp,
[data-theme="tuks"]     .strn-thc-stamp,
[data-theme="unibo"]    .strn-thc-stamp {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(20, 10, 0, 0.10);
}
[data-theme="stanford"] .strn-thc-stamp-img.is-dark,
[data-theme="tuks"]     .strn-thc-stamp-img.is-dark,
[data-theme="unibo"]    .strn-thc-stamp-img.is-dark { display: none; }
[data-theme="stanford"] .strn-thc-stamp-img.is-light,
[data-theme="tuks"]     .strn-thc-stamp-img.is-light,
[data-theme="unibo"]    .strn-thc-stamp-img.is-light { display: block; }

/* — H1 STRAIN NAME : deep-emerald gradient (kept on purpose) ——— */
[data-theme="stanford"] .strn-name-text,
[data-theme="tuks"]     .strn-name-text,
[data-theme="unibo"]    .strn-name-text {
  background: linear-gradient(92deg, #2e8b57 0%, #1d6f3a 55%, #154d28 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* — DID YOU KNOW : warm cream + antique-gold trim, no green ——— */
[data-theme="stanford"] .strn-dyk-panel,
[data-theme="tuks"]     .strn-dyk-panel,
[data-theme="unibo"]    .strn-dyk-panel {
  background:
    linear-gradient(135deg, rgba(184, 134, 11, 0.08) 0%, rgba(212, 175, 55, 0.05) 60%, rgba(184, 134, 11, 0.08) 100%),
    rgba(255, 250, 235, 0.85) !important;
  border-color: rgba(184, 134, 11, 0.30);
}
[data-theme="stanford"] .strn-dyk-mark,
[data-theme="tuks"]     .strn-dyk-mark,
[data-theme="unibo"]    .strn-dyk-mark {
  background: rgba(184, 134, 11, 0.08);
}

/* — PANEL TILES : warm ivory instead of dark slabs ——————————— */
[data-theme="stanford"] .strn-panel,
[data-theme="stanford"] .strn-similar-pill,
[data-theme="stanford"] .strn-parent-card,
[data-theme="tuks"]     .strn-panel,
[data-theme="tuks"]     .strn-similar-pill,
[data-theme="tuks"]     .strn-parent-card,
[data-theme="unibo"]    .strn-panel,
[data-theme="unibo"]    .strn-similar-pill,
[data-theme="unibo"]    .strn-parent-card {
  background: rgba(255, 254, 250, 0.92);
  border-color: rgba(20, 10, 0, 0.08);
}
[data-theme="stanford"] .strn-similar-pill:hover,
[data-theme="stanford"] .strn-parent-card:hover,
[data-theme="tuks"]     .strn-similar-pill:hover,
[data-theme="tuks"]     .strn-parent-card:hover,
[data-theme="unibo"]    .strn-similar-pill:hover,
[data-theme="unibo"]    .strn-parent-card:hover {
  background: rgba(255, 252, 244, 1);
  border-color: rgba(184, 134, 11, 0.35);
}
[data-theme="stanford"] .strn-parent-card .strn-similar-sub,
[data-theme="tuks"]     .strn-parent-card .strn-similar-sub,
[data-theme="unibo"]    .strn-parent-card .strn-similar-sub {
  color: rgba(60, 50, 30, 0.62);
}
[data-theme="stanford"] .strn-tier-sentence,
[data-theme="tuks"]     .strn-tier-sentence,
[data-theme="unibo"]    .strn-tier-sentence {
  color: rgba(20, 15, 0, 0.82);
}
[data-theme="stanford"] .strn-tag,
[data-theme="stanford"] .strn-shortcode,
[data-theme="tuks"]     .strn-tag,
[data-theme="tuks"]     .strn-shortcode,
[data-theme="unibo"]    .strn-tag,
[data-theme="unibo"]    .strn-shortcode {
  background: rgba(20, 10, 0, 0.05);
  border-color: rgba(20, 10, 0, 0.10);
  color: rgba(20, 10, 0, 0.78);
}

/* ============================================================
 * LETTRINE — ornamental drop-cap on the first letter of fast-mode
 * answers. The letter fades + scales in from a muted manuscript
 * state to a crisp gold-leaf finish, then holds for ~900ms before
 * the rest of the paragraph ink-bleeds in. One lettrine per card,
 * injected by inkBleedReveal when { lettrine: true }.
 * ============================================================ */
.a-body .lettrine,
.a-intro .lettrine,
.step-body .lettrine {
  float: left;
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  margin: 0.02em 0.06em -0.08em 0;
  /* Warm antique-gold gradient, subtly animated to catch the eye */
  background: linear-gradient(135deg, #f4d68a 0%, #d4af37 45%, #c9a227 70%, #b8860b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Soft drop-shadow keeps it legible on dark panels without a solid fill */
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
  /* Hidden state — scale + fade. Entrance triggered by .is-lit. */
  opacity: 0;
  transform: scale(0.55) translateY(8px) rotate(-2deg);
  transform-origin: top left;
  transition:
    opacity 520ms cubic-bezier(.2, .85, .25, 1),
    transform 620ms cubic-bezier(.18, 1.05, .32, 1);
  will-change: opacity, transform;
  user-select: none;
}
.a-body .lettrine.is-lit,
.a-intro .lettrine.is-lit,
.step-body .lettrine.is-lit {
  opacity: 1;
  transform: scale(1) translateY(0) rotate(0);
}

/* J has a descender — give it breathing room so it doesn't clip */
.a-body .lettrine[data-letter="J"],
.a-intro .lettrine[data-letter="J"],
.step-body .lettrine[data-letter="J"] {
  line-height: 1.0;
  padding-bottom: 0.06em;
}

/* Light theme — deeper antique gold for contrast on parchment */
:root[data-theme="light"] .a-body .lettrine,
:root[data-theme="light"] .a-intro .lettrine,
:root[data-theme="light"] .step-body .lettrine,
.theme-light .a-body .lettrine,
.theme-light .a-intro .lettrine,
.theme-light .step-body .lettrine {
  background: linear-gradient(135deg, #8a6d12 0%, #b8860b 45%, #6b4f10 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.08));
}

/* Respect motion-reduce — snap into place without the scale dance */
@media (prefers-reduced-motion: reduce) {
  .a-body .lettrine,
  .a-intro .lettrine,
  .step-body .lettrine {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* Light-theme adjustments */
:root[data-theme="light"] .dyk-block,
.theme-light .dyk-block {
  background:
    linear-gradient(135deg, rgba(184, 134, 11, 0.10) 0%, rgba(212, 175, 55, 0.06) 60%, rgba(184, 134, 11, 0.10) 100%),
    rgba(255, 250, 235, 0.75);
  border-color: rgba(184, 134, 11, 0.35);
}
:root[data-theme="light"] .dyk-block p,
.theme-light .dyk-block p {
  color: #6b4f10;
}
:root[data-theme="light"] .dyk-block .dyk-heading,
.theme-light .dyk-block .dyk-heading {
  background: linear-gradient(92deg, #8a6d12 0%, #b8860b 30%, #d4af37 55%, #8a6d12 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   PERIODIC TABLE CARD — element wiki, iconic block hero
   ----------------------------------------------------------
   Landscape card rendered by periodic.js. Reads like a
   museum-grade element profile: the hero is a literal
   periodic-table block (huge symbol, atomic number, mass,
   name) sized big enough to be iconic, then a mini periodic
   grid showing the element's position, a Bohr-model electron
   diagram, properties ribbon, and a Wikipedia photo with
   attribution. Color-coded by element category via .cat-*
   classes the JS attaches to the card root.

   Category palette is tuned to be readable on both dark and
   light themes — saturated mid-tones with subtle gradient
   lift, matching the museum-card-stock feel of the rest of
   the app.
   ============================================================ */
.periodic-card {
  --pe-accent: #74c0fc;
  --pe-accent-soft: color-mix(in oklab, var(--pe-accent) 14%, transparent);
  --pe-accent-strong: color-mix(in oklab, var(--pe-accent) 88%, #000 12%);
  --pe-ink: var(--text);
  --pe-tile-bg: linear-gradient(160deg,
    color-mix(in oklab, var(--pe-accent) 28%, var(--panel)) 0%,
    color-mix(in oklab, var(--pe-accent) 14%, var(--panel-2)) 100%);

  position: relative;
  display: block;
  margin: 16px 0;
  padding: 24px 24px 18px;
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--pe-accent) 24%, var(--line));
  background:
    radial-gradient(900px 400px at 100% 0%, var(--pe-accent-soft), transparent 55%),
    var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--pe-ink);
  box-shadow:
    0 1px 0 color-mix(in oklab, #fff 8%, transparent) inset,
    0 28px 60px -32px color-mix(in oklab, var(--pe-accent) 60%, transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.periodic-card.is-revealed {
  opacity: 1;
  transform: none;
}

/* Category accent — drives hero tile colour, border halo, ambient
   glow. Each category gets a recognisable mid-tone so the card
   reads at a glance. */
.periodic-card.cat-alkali           { --pe-accent: #ff6b6b; }
.periodic-card.cat-alkaline-earth   { --pe-accent: #ffa94d; }
.periodic-card.cat-lanthanide       { --pe-accent: #ffd43b; }
.periodic-card.cat-actinide         { --pe-accent: #ff8787; }
.periodic-card.cat-transition       { --pe-accent: #74c0fc; }
.periodic-card.cat-posttrans        { --pe-accent: #a5d8ff; }
.periodic-card.cat-metalloid        { --pe-accent: #69db7c; }
.periodic-card.cat-nonmetal         { --pe-accent: #8ce99a; }
.periodic-card.cat-halogen          { --pe-accent: #ffd866; }
.periodic-card.cat-noble            { --pe-accent: #b197fc; }
.periodic-card.cat-unknown          { --pe-accent: #adb5bd; }

/* ── HERO ─ iconic periodic-table block + meta ────────────── */
.pe-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 26px;
  align-items: start;
}

/* The iconic tile — looks exactly like a real periodic-table
   block: atomic number top-left, huge symbol centred, name
   below the symbol, atomic mass at the bottom. Stays sharp on
   any background via crisp 1px border and gentle inner glow. */
.pe-tile {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  width: 220px;
  height: 220px;
  padding: 14px 18px 16px;
  border-radius: 14px;
  background: var(--pe-tile-bg);
  border: 1.5px solid color-mix(in oklab, var(--pe-accent) 70%, transparent);
  box-shadow:
    0 2px 0 color-mix(in oklab, #fff 14%, transparent) inset,
    0 0 0 1px color-mix(in oklab, var(--pe-accent) 22%, transparent) inset,
    0 18px 36px -18px color-mix(in oklab, var(--pe-accent) 55%, #000 30%);
  overflow: hidden;
}
.pe-tile::after {
  /* Faint shine across the top half — like a polished tile. */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in oklab, #fff 18%, transparent) 0%, transparent 45%);
  pointer-events: none;
}
.pe-tile-num {
  font: 700 18px/1 var(--font-mono, ui-monospace);
  color: color-mix(in oklab, var(--text) 92%, var(--pe-accent) 8%);
  letter-spacing: 0.03em;
  align-self: start;
  z-index: 1;
}
.pe-tile-symbol {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-weight: 700;
  font-size: clamp(64px, 9vw, 96px);
  line-height: 1;
  text-align: center;
  align-self: center;
  color: color-mix(in oklab, var(--text) 96%, var(--pe-accent) 4%);
  text-shadow: 0 2px 24px color-mix(in oklab, var(--pe-accent) 35%, transparent);
  z-index: 1;
  /* Stop ultra-wide symbols (e.g. three-letter element symbols
     like "Uut") from busting the tile. */
  letter-spacing: -0.01em;
}
.pe-tile-name {
  font: 600 12px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: color-mix(in oklab, var(--text) 80%, var(--pe-accent) 20%);
  z-index: 1;
}
.pe-tile-mass {
  font: 500 13px/1 var(--font-mono, ui-monospace);
  text-align: center;
  color: color-mix(in oklab, var(--text) 70%, transparent);
  margin-top: 4px;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}

/* Hero meta — kicker, name display, category, period/group, summary */
.pe-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.pe-kicker {
  font: 600 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--pe-accent) 80%, var(--muted));
}
.pe-name {
  margin: 0;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-weight: var(--display-weight, 700);
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.05;
  letter-spacing: var(--display-letter, -0.01em);
  color: var(--text);
}
.pe-cat {
  font: 500 14px/1.3 var(--font-body, inherit);
  color: color-mix(in oklab, var(--pe-accent) 70%, var(--text) 30%);
  text-transform: capitalize;
}
.pe-coords {
  font: 500 12px/1.3 var(--font-mono, ui-monospace);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.pe-summary {
  margin: 8px 0 0;
  font: 400 14.5px/1.6 var(--font-body, inherit);
  color: color-mix(in oklab, var(--text) 88%, var(--muted));
  max-width: 70ch;
}

/* ── STATS RIBBON ─ phase / density / melt / boil ────────── */
.pe-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 18px 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--pe-accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--pe-accent) 18%, var(--line));
}
.pe-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 8px;
  border-left: 2px solid color-mix(in oklab, var(--pe-accent) 50%, transparent);
}
.pe-stat:first-child { border-left: 0; padding-left: 4px; }
.pe-stat-l {
  font: 600 9.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pe-stat-v {
  font: 600 14px/1.2 var(--font-body, inherit);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pe-temp-c {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
  margin-left: 4px;
}

/* ── TWO-PANEL GRID ─ mini table + Bohr model ────────────── */
.pe-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  margin-top: 4px;
}
.pe-panel {
  padding: 14px 16px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel-2) 70%, transparent);
}
.pe-panel-title {
  margin: 0 0 12px;
  font: 600 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2, var(--muted));
}

/* ── MINI PERIODIC TABLE ─ 18×10 grid, target highlighted ── */
.pe-mini {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  aspect-ratio: 18 / 10;
  width: 100%;
  margin-bottom: 12px;
}
.pe-mini-cell {
  display: block;
  background: color-mix(in oklab, var(--text) 6%, transparent);
  border-radius: 1px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  min-width: 0;
  min-height: 0;
}
.pe-mini-cell.pe-mini-empty { background: transparent; }
.pe-mini-cell.cat-alkali           { background: #ff6b6b; }
.pe-mini-cell.cat-alkaline-earth   { background: #ffa94d; }
.pe-mini-cell.cat-lanthanide       { background: #ffd43b; }
.pe-mini-cell.cat-actinide         { background: #ff8787; }
.pe-mini-cell.cat-transition       { background: #74c0fc; }
.pe-mini-cell.cat-posttrans        { background: #a5d8ff; }
.pe-mini-cell.cat-metalloid        { background: #69db7c; }
.pe-mini-cell.cat-nonmetal         { background: #8ce99a; }
.pe-mini-cell.cat-halogen          { background: #ffd866; }
.pe-mini-cell.cat-noble            { background: #b197fc; }
.pe-mini-cell.cat-unknown          { background: #adb5bd; }
.pe-mini-cell:not(.pe-mini-empty) {
  opacity: 0.42;
  filter: saturate(0.7);
}
.pe-mini-cell.is-target {
  opacity: 1;
  filter: saturate(1) brightness(1.15);
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow:
    0 0 0 1px #000,
    0 0 14px 3px color-mix(in oklab, var(--pe-accent) 70%, transparent);
  z-index: 2;
  position: relative;
  transform: scale(1.45);
}
.pe-mini-cell:hover:not(.pe-mini-empty):not(.is-target) {
  opacity: 0.78;
  transform: scale(1.15);
}
.pe-mini-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font: 500 10.5px/1.4 var(--font-mono, ui-monospace);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.pe-legend-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2px;
  vertical-align: -1px;
  margin-right: 3px;
}
.pe-legend-dot.cat-alkali           { background: #ff6b6b; }
.pe-legend-dot.cat-alkaline-earth   { background: #ffa94d; }
.pe-legend-dot.cat-lanthanide       { background: #ffd43b; }
.pe-legend-dot.cat-actinide         { background: #ff8787; }
.pe-legend-dot.cat-transition       { background: #74c0fc; }
.pe-legend-dot.cat-posttrans        { background: #a5d8ff; }
.pe-legend-dot.cat-metalloid        { background: #69db7c; }
.pe-legend-dot.cat-nonmetal         { background: #8ce99a; }
.pe-legend-dot.cat-halogen          { background: #ffd866; }
.pe-legend-dot.cat-noble            { background: #b197fc; }

/* ── BOHR MODEL ─ SVG diagram of electron shells ─────────── */
.pe-panel-bohr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pe-bohr {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}
.pe-bohr-orbit {
  fill: none;
  stroke: color-mix(in oklab, var(--pe-accent) 35%, var(--line));
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.7;
}
.pe-bohr-nucleus {
  fill: var(--pe-accent);
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--pe-accent) 60%, transparent));
}
.pe-bohr-z {
  font: 700 12px/1 var(--font-mono, ui-monospace);
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.4);
  stroke-width: 0.5px;
}
.pe-bohr-e {
  fill: color-mix(in oklab, var(--pe-accent) 90%, #fff 10%);
  filter: drop-shadow(0 0 3px color-mix(in oklab, var(--pe-accent) 70%, transparent));
}
.pe-shells {
  font: 600 14px/1.2 var(--font-mono, ui-monospace);
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--pe-accent) 70%, var(--text) 30%);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.pe-config {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  font: 500 11px/1.3 var(--font-mono, ui-monospace);
  text-align: center;
}
.pe-config-l {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.pe-config code {
  font-family: var(--font-mono, ui-monospace);
  font-size: 12.5px;
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--pe-accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--pe-accent) 22%, var(--line));
  word-break: break-all;
  max-width: 100%;
}

/* ── PHOTO panel ── */
.pe-panel-photo { margin-top: 16px; }
.pe-photo {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 16px;
  align-items: start;
}
.pe-photo img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 10px;
  background: color-mix(in oklab, #000 18%, var(--panel-2));
  border: 1px solid var(--line);
}
.pe-photo figcaption {
  font: 400 11px/1.4 var(--font-mono, ui-monospace);
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 8px;
  grid-column: 1;
}
.pe-appearance {
  margin: 0;
  font: 400 14px/1.6 var(--font-body, inherit);
  color: color-mix(in oklab, var(--text) 86%, var(--muted));
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* ── FOOTER ── */
.pe-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in oklab, var(--text) 12%, transparent);
  font: 400 12.5px/1.4 var(--font-body, inherit);
  color: color-mix(in oklab, var(--text) 80%, var(--muted));
}
.pe-discovered { flex: 1 1 auto; min-width: 0; }
.pe-discovered strong { color: var(--text); font-weight: 600; }
.pe-source {
  font: 600 11.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.06em;
  color: var(--pe-accent);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--pe-accent) 36%, var(--line));
  background: color-mix(in oklab, var(--pe-accent) 8%, transparent);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.pe-source:hover {
  background: color-mix(in oklab, var(--pe-accent) 16%, transparent);
  border-color: color-mix(in oklab, var(--pe-accent) 60%, var(--line));
}
.periodic-card .dna-stamp {
  font: 600 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.22em;
  color: var(--muted-2, var(--muted));
}

/* ── RESPONSIVE ── */
@media (max-width: 880px) {
  .pe-hero { grid-template-columns: 1fr; }
  .pe-tile { width: 100%; max-width: 280px; height: auto; aspect-ratio: 1 / 1; }
  .pe-grid { grid-template-columns: 1fr; }
  .pe-photo { grid-template-columns: 1fr; }
  .pe-photo figcaption { grid-column: 1; }
  .pe-appearance { grid-column: 1; grid-row: auto; }
}
@media (max-width: 520px) {
  .periodic-card { padding: 18px 16px 14px; }
  .pe-name { font-size: clamp(26px, 7vw, 36px); }
  .pe-tile-symbol { font-size: clamp(54px, 14vw, 80px); }
}

/* Light-theme adjustments — boost ink contrast on cream pages
   and reduce the dark glow halo so the card reads premium. */
[data-theme="stanford"] .periodic-card,
[data-theme="tuks"]     .periodic-card,
[data-theme="unibo"]    .periodic-card {
  box-shadow:
    0 1px 0 #fff inset,
    0 12px 30px -22px color-mix(in oklab, var(--pe-accent) 50%, transparent);
}
[data-theme="stanford"] .pe-tile,
[data-theme="tuks"]     .pe-tile,
[data-theme="unibo"]    .pe-tile {
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--pe-accent) 38%, #fff) 0%,
      color-mix(in oklab, var(--pe-accent) 18%, #fff) 100%);
  box-shadow:
    0 1px 0 #fff inset,
    0 0 0 1px color-mix(in oklab, var(--pe-accent) 35%, transparent) inset,
    0 14px 28px -18px color-mix(in oklab, var(--pe-accent) 60%, transparent);
}

/* ============================================================
   ARXIV CARD — research paper hero, PDF reader, section cards
   ----------------------------------------------------------
   Three card classes coordinate to give the user a research-
   paper experience that beats arxiv.org's own UI:

     .arxiv-card            — the main metadata + abstract card
     .arxiv-pdf-card        — embedded inline PDF reader
     .arxiv-section-card    — one card per section of the paper,
                              each with its own Prompt pill so
                              Shepherd can answer questions
                              section-by-section
     .arxiv-section-index   — clickable TOC that links to the
                              section cards below it

   Palette: arXiv-red (#b31b1b) as the brand accent, paired with
   warm parchment tones in light mode and a deep ink panel in
   dark mode. Display type is the same Playfair-Display serif
   used elsewhere — research papers should feel BOOKISH, not
   chat-app-flat.
   ============================================================ */
.arxiv-card,
.arxiv-pdf-card,
.arxiv-section-card,
.arxiv-section-index {
  --ax-accent: #b31b1b;          /* arXiv brand red */
  --ax-accent-soft: color-mix(in oklab, var(--ax-accent) 12%, transparent);
  --ax-accent-deep: #8a1212;
  --ax-ink: var(--text);
  --ax-paper: var(--panel);
  --ax-paper-2: var(--panel-2);
  --ax-rule: color-mix(in oklab, var(--ax-accent) 22%, var(--line));
}

.arxiv-card {
  position: relative;
  display: block;
  margin: 16px 0;
  padding: 26px 28px 18px;
  border-radius: 18px;
  border: 1px solid var(--ax-rule);
  background:
    radial-gradient(900px 320px at -10% -10%, var(--ax-accent-soft), transparent 55%),
    radial-gradient(700px 280px at 110% 0%, color-mix(in oklab, #d4af37 12%, transparent), transparent 55%),
    var(--ax-paper);
  color: var(--ax-ink);
  box-shadow:
    0 1px 0 color-mix(in oklab, #fff 8%, transparent) inset,
    0 28px 60px -34px color-mix(in oklab, var(--ax-accent) 55%, transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.arxiv-card.is-revealed { opacity: 1; transform: none; }

/* Vertical accent rule on the left — arXiv-red ribbon, gives the
   card a museum-tag feel and reads instantly as a research paper. */
.arxiv-card::before {
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--ax-accent) 0%, var(--ax-accent-deep) 100%);
  opacity: 0.85;
}

/* ── BRAND CHIP ── (DNA45 Research Mode) */
.ax-brand-row { display: flex; align-items: center; margin-bottom: 12px; }
.ax-brand-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ax-accent) 30%, var(--line));
  background: color-mix(in oklab, var(--ax-accent) 10%, var(--panel-2));
  font: 600 11px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ax-accent) 70%, var(--text));
}
.ax-brand-mark {
  /* Hope's spec (2026-05-10): DO NOT put a circle behind it,
     DO NOT change its color. Just the bare feather icon next
     to the "DNA45 Research" label. */
  width: 24px; height: 24px;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* ── HERO LAYOUT ── (arc meter on the left, meta on the right) */
.ax-hero {
  display: grid;
  grid-template-columns: 188px 1fr;
  gap: 22px;
  align-items: start;
}
.ax-hero-media {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-top: 4px;
}
.ax-hero-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (max-width: 640px) {
  .ax-hero { grid-template-columns: 1fr; gap: 14px; }
  .ax-hero-media { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; gap: 14px; }
}

.ax-eyebrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 600 11px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.ax-source {
  color: #fff;
  background: linear-gradient(135deg, var(--ax-accent) 0%, var(--ax-accent-deep) 100%);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.10em;
  font-size: 10.5px;
  box-shadow: 0 1px 0 color-mix(in oklab, #fff 25%, transparent) inset;
}
.ax-id {
  color: var(--muted-2, var(--muted));
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.ax-version {
  color: color-mix(in oklab, var(--ax-accent) 70%, var(--text));
  background: color-mix(in oklab, var(--ax-accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--ax-accent) 30%, transparent);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.ax-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 4px;
  /* GT Maru per Hope's direction (2026-05-09) — not thin. We only
     ship Light (300) and Regular (400) faces, so we set Regular and
     let the browser synthesise weight 600 for headline gravitas.
     The faux-bold is acceptable here because GT Maru's geometric
     skeleton stays clean under synthesis. */
  font-family: "GT Maru", "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--text);
}
/* Dove-leaf pointer that sits flush with the first line of the title.
   The image artwork is small (~48px native) so we render it crisp at
   that size — translateY tucks it visually onto the cap-line of the
   serif so it reads like a botanical ornament, not a misaligned bullet. */
.ax-name-leaf {
  flex: 0 0 auto;
  width: clamp(28px, 3.5vw, 40px);
  height: clamp(28px, 3.5vw, 40px);
  display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(0.18em);
}
.ax-name-leaf img {
  width: 100%; height: 100%; object-fit: contain;
  /* Tints the leaf into the arxiv-red accent on dark theme;
     light themes get the natural illustration colour back. */
  filter: drop-shadow(0 1px 2px rgba(179, 27, 27, 0.35));
}
.ax-name-text { flex: 1 1 auto; min-width: 0; }

.ax-authors {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 6px 0 4px;
  font: 500 14.5px/1.55 var(--font-body, inherit);
  /* Hope's spec (2026-05-10): authors must be AQUA BLUE so they
     pop against the dark research card. White-on-dark was
     reading as muted body copy and getting lost. */
  color: #00d4ff;
  font-style: italic;
}
.ax-authors-icon {
  width: 16px; height: 16px;
  object-fit: contain;
  margin-top: 3px;
  opacity: 0.75;
  flex: 0 0 auto;
}
.ax-and-others { font-style: normal; color: var(--muted); font-weight: 500; }

.ax-cats {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.ax-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel-2) 55%, transparent);
  font: 500 12px/1.2 var(--font-body, inherit);
  color: color-mix(in oklab, var(--text) 80%, var(--muted));
}
.ax-chip.is-primary {
  background: color-mix(in oklab, var(--ax-accent) 14%, transparent);
  border-color: color-mix(in oklab, var(--ax-accent) 36%, var(--line));
  color: color-mix(in oklab, var(--ax-accent) 75%, var(--text));
  font-weight: 600;
}
.ax-chip-code {
  font: 600 9.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--text) 8%, transparent);
  color: var(--muted-2, var(--muted));
}
.ax-chip.is-primary .ax-chip-code {
  background: color-mix(in oklab, var(--ax-accent) 22%, transparent);
  color: color-mix(in oklab, var(--ax-accent) 80%, var(--text));
}
.ax-date {
  margin-top: 8px;
  display: block;
  font: 400 12.5px/1.4 var(--font-body, inherit);
  color: var(--muted);
  letter-spacing: 0.01em;
}
.ax-date strong { color: var(--text); font-weight: 600; }

/* ── ABSTRACT ── */
.ax-abstract {
  margin: 18px 0 4px;
  padding: 18px 20px 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ax-accent);
  background: color-mix(in oklab, var(--panel-2) 55%, transparent);
}
.ax-section-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
  font: 600 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ax-accent) 70%, var(--muted));
}
.ax-section-title img {
  width: 16px; height: 16px; object-fit: contain;
  opacity: 0.85;
  flex: 0 0 auto;
}
.ax-abstract p {
  margin: 0;
  font: 400 15.5px/1.7 var(--font-body, "Inter", system-ui, sans-serif);
  color: color-mix(in oklab, var(--text) 92%, var(--muted));
  /* Generous reading column — not full-width — keeps eye return short. */
  max-width: 75ch;
  /* Drop-cap on the very first letter, vintage journal vibe. */
}
.ax-abstract p::first-letter {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-weight: 700;
  font-size: 3.1em;
  float: left;
  line-height: 0.9;
  margin: 0.05em 0.10em 0 0;
  color: var(--ax-accent);
}

/* ── META TABLE ── (Comments / Journal / DOI / Cite as) */
.ax-meta {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 14px;
  margin: 14px 0 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--panel-2) 50%, transparent);
  border: 1px solid var(--line);
  font: 400 13px/1.45 var(--font-body, inherit);
}
.ax-meta dt {
  margin: 0;
  font: 600 10.5px/1.45 var(--font-mono, ui-monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}
.ax-meta dd {
  margin: 0;
  color: color-mix(in oklab, var(--text) 92%, var(--muted));
  word-break: break-word;
}
.ax-link {
  color: var(--ax-accent);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in oklab, var(--ax-accent) 50%, transparent);
}
.ax-link:hover { border-bottom-style: solid; }
.ax-cite {
  font: 600 12.5px/1.3 var(--font-mono, ui-monospace);
  padding: 3px 8px;
  border-radius: 5px;
  background: color-mix(in oklab, var(--ax-accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--ax-accent) 22%, var(--line));
  color: color-mix(in oklab, var(--ax-accent) 60%, var(--text));
  font-variant-numeric: tabular-nums;
}

/* ── ACTIONS ── */
.ax-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 8px;
}
.ax-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--panel-2) 65%, transparent);
  color: var(--text);
  font: 600 13px/1 var(--font-body, inherit);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.ax-btn:hover { background: color-mix(in oklab, var(--ax-accent) 10%, var(--panel-2)); border-color: var(--ax-rule); transform: translateY(-1px); }
.ax-btn:active { transform: none; }
.ax-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.ax-btn-primary {
  background: linear-gradient(135deg, var(--ax-accent) 0%, var(--ax-accent-deep) 100%);
  color: #fff;
  border-color: var(--ax-accent-deep);
  box-shadow: 0 6px 14px -8px color-mix(in oklab, var(--ax-accent) 80%, transparent);
}
.ax-btn-primary:hover {
  background: linear-gradient(135deg, color-mix(in oklab, var(--ax-accent) 90%, #fff 10%) 0%, var(--ax-accent) 100%);
  border-color: var(--ax-accent);
}
.ax-btn-ghost {
  background: transparent;
  font-size: 12px;
  padding: 7px 12px;
  color: var(--muted);
}
.ax-btn-ghost:hover { color: var(--text); background: color-mix(in oklab, var(--text) 4%, transparent); }

.ax-spin {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklab, currentColor 30%, transparent);
  border-top-color: currentColor;
  animation: ax-spin 0.7s linear infinite;
}
@keyframes ax-spin { to { transform: rotate(360deg); } }

/* ── FOOTER ── */
.ax-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in oklab, var(--text) 12%, transparent);
  font: 400 12px/1.3 var(--font-body, inherit);
  color: var(--muted);
}
.arxiv-card .dna-stamp,
.arxiv-pdf-card .dna-stamp,
.arxiv-section-card .dna-stamp,
.arxiv-section-index .dna-stamp {
  font: 600 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.22em;
  color: var(--muted-2, var(--muted));
}

/* ── PDF READER CARD ── */
.arxiv-pdf-card {
  margin: 12px 0;
  border-radius: 16px;
  border: 1px solid var(--ax-rule);
  background: var(--ax-paper);
  overflow: hidden;
  box-shadow: 0 24px 50px -32px color-mix(in oklab, var(--ax-accent) 50%, transparent);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.arxiv-pdf-card.is-revealed { opacity: 1; transform: none; }
.ax-pdf-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--ax-accent) 6%, var(--panel-2)) 0%,
    var(--panel-2) 100%);
  border-bottom: 1px solid var(--line);
}
.ax-pdf-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ax-pdf-kicker {
  font: 600 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in oklab, var(--ax-accent) 70%, var(--muted));
}
.ax-pdf-title {
  margin: 2px 0 0;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.25;
  color: var(--text);
  /* Truncate runaway titles in the PDF header bar. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ax-pdf-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-pdf-frame-wrap {
  position: relative;
  width: 100%;
  height: clamp(520px, 75vh, 900px);
  background: #1a1a1a;
}
.ax-pdf-frame { width: 100%; height: 100%; border: 0; display: block; background: #1a1a1a; }
.ax-pdf-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 18px;
  font: 400 11.5px/1.3 var(--font-body, inherit);
  color: var(--muted);
  background: var(--panel-2);
  border-top: 1px solid var(--line);
}

/* ── SECTION INDEX ── */
.arxiv-section-index {
  margin: 12px 0;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid var(--ax-rule);
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--ax-accent) 8%, transparent) 0%, transparent 60%),
    var(--panel);
}
.ax-idx-title {
  margin: 0 0 10px;
  font: 600 11px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ax-accent) 70%, var(--muted));
}
.ax-idx-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 18px;
  font: 400 13.5px/1.5 var(--font-body, inherit);
}
.ax-idx-list li {
  margin: 0;
  list-style: decimal;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ax-idx-list li::marker {
  color: color-mix(in oklab, var(--ax-accent) 60%, var(--muted));
  font-weight: 700;
}
.ax-idx-list a {
  color: color-mix(in oklab, var(--text) 92%, var(--muted));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.ax-idx-list a:hover {
  color: var(--ax-accent);
  border-bottom-color: color-mix(in oklab, var(--ax-accent) 50%, transparent);
}
.ax-idx-foot { margin-top: 10px; text-align: right; }

/* ── SECTION CARDS ── */
.arxiv-section-card {
  position: relative;
  margin: 12px 0;
  padding: 22px 26px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--ax-accent) 4%, transparent) 0%, transparent 80px),
    var(--panel);
  box-shadow: 0 1px 0 color-mix(in oklab, #fff 6%, transparent) inset;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.arxiv-section-card.is-revealed { opacity: 1; transform: none; }
.arxiv-section-card::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: color-mix(in oklab, var(--ax-accent) 55%, transparent);
  opacity: 0.55;
}
.ax-sec-head { margin-bottom: 10px; }
.ax-sec-kicker {
  display: block;
  font: 600 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ax-accent) 60%, var(--muted));
  margin-bottom: 4px;
}
.ax-sec-title {
  margin: 0;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.005em;
}
.ax-sec-body {
  font: 400 15.5px/1.75 var(--font-body, "Inter", system-ui, sans-serif);
  color: color-mix(in oklab, var(--text) 90%, var(--muted));
  max-width: 78ch;
}
.ax-sec-body p { margin: 0 0 0.9em; }
.ax-sec-body h3, .ax-sec-body h4 {
  margin: 1.2em 0 0.4em;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-weight: 600;
  font-size: 1.15em;
  color: var(--text);
}
.ax-sec-body h2 {
  margin: 1.3em 0 0.5em;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-weight: 700;
  font-size: 1.25em;
  color: var(--text);
}
.ax-sec-body a {
  color: var(--ax-accent);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in oklab, var(--ax-accent) 45%, transparent);
}
.ax-sec-body a:hover { border-bottom-style: solid; }
.ax-sec-body ul, .ax-sec-body ol { padding-left: 22px; margin: 0 0 0.9em; }
.ax-sec-body li { margin: 0.3em 0; }
.ax-sec-body code, .ax-sec-body .ltx_text[font-family="monospace"] {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--text) 8%, transparent);
}
.ax-sec-body pre {
  margin: 0.8em 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--text) 10%, transparent);
  border: 1px solid var(--line);
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.5;
}
/* LaTeXML inline math + display math get a quiet container so they
   don't shock the type rhythm. */
.ax-sec-body .ltx_Math,
.ax-sec-body math { font-family: "Latin Modern Math", "Cambria Math", serif; }
.ax-sec-body .ltx_equation,
.ax-sec-body .ltx_equationgroup {
  display: block;
  margin: 14px 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--ax-accent) 4%, transparent);
  border-left: 3px solid color-mix(in oklab, var(--ax-accent) 50%, transparent);
  overflow-x: auto;
  font-size: 14px;
}
.ax-sec-body .ltx_equation .ltx_eqn_eqno {
  float: right;
  color: var(--muted);
  font: 600 11px/1 var(--font-mono, ui-monospace);
}
.ax-sec-body figure, .ax-sec-body .ltx_figure {
  margin: 1.2em 0;
  padding: 14px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--panel-2) 60%, transparent);
  border: 1px solid var(--line);
  text-align: center;
}
.ax-sec-body figure img,
.ax-sec-body .ltx_figure img,
.ax-sec-body img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 6px;
  background: #fff;
}
.ax-sec-body figcaption,
.ax-sec-body .ltx_caption {
  margin-top: 10px;
  font: 400 12.5px/1.5 var(--font-body, inherit);
  color: var(--muted);
  text-align: left;
}
.ax-sec-body .ltx_tag { font-weight: 700; color: var(--ax-accent); margin-right: 4px; }
.ax-sec-body table, .ax-sec-body .ltx_tabular {
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 13.5px;
  line-height: 1.45;
  width: 100%;
}
.ax-sec-body th, .ax-sec-body td {
  border: 1px solid var(--line);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}
.ax-sec-body th {
  background: color-mix(in oklab, var(--ax-accent) 8%, var(--panel-2));
  font-weight: 600;
}
.ax-sec-body blockquote {
  margin: 1em 0;
  padding: 6px 14px;
  border-left: 3px solid color-mix(in oklab, var(--ax-accent) 50%, transparent);
  color: color-mix(in oklab, var(--text) 80%, var(--muted));
  font-style: italic;
}
.ax-sec-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in oklab, var(--text) 10%, transparent);
  /* Hope's spec (2026-05-10): "Prompt & DNA45.com are not aligned
     on expanded sections — please do a thorough fix on this".
     The Prompt button + dna-stamp + title span were on three
     mismatched baselines. Centering vertically + locking the
     two right-side controls into a flex-end cluster fixes it. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  font: 400 11.5px/1.3 var(--font-body, inherit);
  color: var(--muted);
}
.ax-sec-foot > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ax-sec-foot .card-prompt-foot,
.ax-sec-foot .dna-stamp,
.ax-foot     .card-prompt-foot,
.ax-foot     .dna-stamp,
.ax-rel-foot .card-prompt-foot,
.ax-rel-foot .dna-stamp,
.ax-pdf-foot .card-prompt-foot,
.ax-pdf-foot .dna-stamp {
  flex: 0 0 auto;
  align-self: center;
  /* Equalise vertical metrics so the Prompt pill and the
     dna45.com link sit on the same baseline regardless of their
     individual font/padding differences. */
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* ── SKELETON ── */
.ax-skeleton { animation: none; }
.ax-skel-pill, .ax-skel-line {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--text) 8%, transparent) 0%,
    color-mix(in oklab, var(--text) 16%, transparent) 50%,
    color-mix(in oklab, var(--text) 8%, transparent) 100%);
  background-size: 200% 100%;
  animation: ax-skel-shimmer 1.5s linear infinite;
}
.ax-skel-pill { width: 90px; height: 14px; }
.ax-skel-line { height: 14px; margin: 10px 0; width: 92%; }
.ax-skel-line-xl { height: 28px; width: 80%; margin: 14px 0 8px; }
.ax-skel-line-md { width: 65%; }
.ax-skel-line-sm { width: 40%; }
.ax-skel-status {
  margin-top: 10px;
  font: 500 12px/1.4 var(--font-mono, ui-monospace);
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
}
@keyframes ax-skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── ARC METER ── (citations dial in the hero) */
.ax-meter {
  position: relative;
  width: 168px; height: 168px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.ax-meter-svg { width: 100%; height: 100%; }
.ax-meter-bg { stroke: color-mix(in oklab, var(--text) 10%, transparent); }
.ax-meter-fill { transition: stroke-dashoffset 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ax-meter-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 14px;
}
.ax-meter-num {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ax-meter-kicker {
  margin-top: 4px;
  font: 700 9.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.22em;
  color: var(--muted);
}
.ax-meter-tier {
  margin-top: 6px;
  font: 800 9.5px/1.15 var(--font-mono, ui-monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 6px;
  max-width: 110px;
  white-space: normal;
  word-spacing: -0.02em;
}
/* Single-treatment arc — the gradient runs arxiv-red → bright
   crimson regardless of citation count. Hope's direction was
   "the score IS the citation count" — no tier bands, just one
   confident sweep of red. */
.ax-meter-grad-a { stop-color: #b31b1b; }
.ax-meter-grad-b { stop-color: #ff5e5e; }
.ax-meter-source {
  margin-top: 6px;
  font: 700 8.5px/1.2 var(--font-mono, ui-monospace);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 110px;
  text-align: center;
}

/* Zero-citation state — Hope's spec: "if there are zero citations
   do not leave a '-', rather leave 'Zero Citations' or big '0'".
   We render a confident, large "0" inside a faintly-traced ring;
   the arc fill drops to nil so there's no false signal of motion. */
.ax-meter.is-zero .ax-meter-num {
  font-size: clamp(40px, 4vw, 52px);
  color: color-mix(in oklab, var(--text) 60%, var(--muted));
}
.ax-meter.is-zero .ax-meter-fill { opacity: 0.18; }
.ax-meter.is-zero .ax-meter-source {
  color: color-mix(in oklab, var(--ax-accent) 50%, var(--muted));
  font-weight: 800;
}

/* Pending state — placeholder em-dash while we fetch. Slightly
   muted so the eye knows it's not the final value yet. */
.ax-meter.is-pending .ax-meter-num { color: var(--muted); }

/* Gas-pump roll-up glow — fires for ~1.6s while the digits tween
   from 0 to the real citation count. The arc gets a subtle
   brightness pulse so the visual lock-step feels deliberate. */
@keyframes ax-meter-pump {
  0%, 100% { filter: brightness(1)   drop-shadow(0 0 0 transparent); }
  50%      { filter: brightness(1.25) drop-shadow(0 0 14px color-mix(in oklab, var(--ax-accent) 60%, transparent)); }
}
.ax-meter.is-pumping .ax-meter-svg {
  animation: ax-meter-pump 1.6s ease-out 1;
}
.ax-meter.is-pumping .ax-meter-num {
  /* Tabular numerals so the digit columns don't dance horizontally
     while the count rolls — feels mechanical, like a real pump. */
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px color-mix(in oklab, var(--ax-accent) 35%, transparent);
}

/* DNA45 stamp inside arXiv research cards — Hope's request
   (2026-05-09): "the highlighting color remove it all together".
   The card foot already has its own ink + chrome; the brand-tinted
   pill background was reading as a button instead of a stamp.
   Strip the background and padding, keep the typography so the
   hover affordance still tells the user it's a link. */
.ax-foot     .dna-stamp,
.ax-sec-foot .dna-stamp,
.ax-rel-foot .dna-stamp,
.ax-pdf-foot .dna-stamp,
.ax-idx-foot .dna-stamp {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: color-mix(in oklab, var(--text) 60%, var(--muted)) !important;
}
.ax-foot     .dna-stamp:hover,
.ax-sec-foot .dna-stamp:hover,
.ax-rel-foot .dna-stamp:hover,
.ax-pdf-foot .dna-stamp:hover,
.ax-idx-foot .dna-stamp:hover {
  background: transparent !important;
  color: var(--ax-accent) !important;
  transform: none;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────
   ARXIV-RESEARCH FEATURES — concept highlights, popup card,
   selection-anchored "Ask Shepherd" pill.

   Lives at the END of the arxiv block so it inherits all theme
   tokens (--ax-accent, --panel, --line, etc.) defined above.
   ───────────────────────────────────────────────────────────── */

/* ── Concept span ───────────────────────────────────────────
   Inline anchors that auto-detect named entities in the paper
   body. We use the arxiv-red accent + a dotted underline so the
   concept reads as "interactive prose" rather than a button.
   The hover state nudges the reader: this is clickable. */
.ax-concept {
  cursor: pointer;
  color: color-mix(in oklab, var(--ax-accent) 70%, var(--text));
  font-weight: 600;
  text-decoration: underline dotted color-mix(in oklab, var(--ax-accent) 40%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
  transition: background 0.15s ease, color 0.15s ease, text-decoration-color 0.15s ease;
}
.ax-concept:hover,
.ax-concept:focus {
  background: color-mix(in oklab, var(--ax-accent) 12%, transparent);
  color: var(--ax-accent);
  text-decoration-color: var(--ax-accent);
  outline: none;
}
.ax-concept:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--ax-accent) 50%, transparent);
  outline-offset: 2px;
}

/* ── Concept popup card ─────────────────────────────────────
   Draggable, lightly-glassmorphic. Anchored to the click via JS
   (position:absolute on body) so it doesn't reflow with scroll
   while the user is reading. The grip + close + ask-shepherd
   trio mirrors the Miro tool palette feel. */
.ax-cpop {
  position: absolute;
  z-index: 9999;
  width: 360px;
  max-width: calc(100vw - 32px);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--panel) 96%, transparent) 0%,
      color-mix(in oklab, var(--panel-2) 96%, transparent) 100%);
  border: 1px solid color-mix(in oklab, var(--ax-accent) 18%, var(--line));
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 60px -18px rgba(0, 0, 0, 0.6),
    0 4px 14px -4px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  animation: ax-cpop-in 0.2s ease-out;
}
@keyframes ax-cpop-in {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.ax-cpop[hidden] { display: none; }
.ax-cpop.is-dragging { user-select: none; }
/* Bump animation — fired when the user clicks a concept that
   already has a card open. Tells the eye "this is the one you
   wanted" without opening a duplicate. */
@keyframes ax-cpop-bump {
  0%   { transform: translateY(0)    scale(1); }
  35%  { transform: translateY(-3px) scale(1.02); }
  100% { transform: translateY(0)    scale(1); }
}
.ax-cpop.is-bumped { animation: ax-cpop-bump 0.35s ease-out; }

/* Aqua M-logo in the popup header — Shepherd's signature mark
   so the user knows the gloss came from DNA45's intelligence,
   not a generic dictionary lookup. Black-circle backdrop matches
   the M's treatment elsewhere in the app. */
.ax-cpop-mlogo {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  background: #0a0a0c;
  border-radius: 50%;
  padding: 3px;
  border: 1px solid color-mix(in oklab, #00d4ff 30%, transparent);
  box-shadow: 0 0 12px -2px rgba(0, 212, 255, 0.45);
}

/* Typewriter cursor — blinking aqua bar that trails the typed
   text. Removed when typing finishes via JS so the steady-state
   reads as a normal definition. */
.ax-cpop-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: #00d4ff;
  animation: ax-cpop-blink 0.9s steps(2) infinite;
}
@keyframes ax-cpop-blink {
  0%, 50%  { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.ax-cpop-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  cursor: grab;
  user-select: none;
}
.ax-cpop-head:active { cursor: grabbing; }
.ax-cpop-grip {
  font-family: var(--font-mono, monospace);
  color: var(--muted);
  letter-spacing: -0.1em;
  font-size: 14px;
  flex: 0 0 auto;
}
.ax-cpop-term {
  margin: 0;
  flex: 1 1 auto;
  font-family: "GT Maru", "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.012em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ax-cpop-close {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ax-cpop-close:hover {
  background: color-mix(in oklab, var(--text) 8%, transparent);
  color: var(--text);
}

.ax-cpop-body {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  align-items: flex-start;
}
.ax-cpop-thumb {
  flex: 0 0 auto;
  width: 88px; height: 88px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.ax-cpop-thumb[hidden] { display: none; }
.ax-cpop-text {
  flex: 1 1 auto;
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--text) 92%, var(--muted));
  /* Limit to ~6 lines of body so the card stays compact; the
     user can always click "Ask Shepherd" for the long form. */
  max-height: 168px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.ax-cpop-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 9px 12px 11px;
  border-top: 1px solid var(--line);
}
.ax-cpop-source {
  font: 600 10px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ax-cpop-ask {
  border: 1px solid color-mix(in oklab, var(--ax-accent) 35%, var(--line));
  background: color-mix(in oklab, var(--ax-accent) 12%, transparent);
  color: color-mix(in oklab, var(--ax-accent) 70%, var(--text));
  font: 600 11.5px/1 var(--font-body, "Inter", sans-serif);
  letter-spacing: 0.02em;
  padding: 7px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.ax-cpop-ask:hover {
  background: color-mix(in oklab, var(--ax-accent) 22%, transparent);
  color: var(--ax-accent);
}
.ax-cpop-ask:active { transform: translateY(1px); }

/* ── Selection prompt floater ──────────────────────────────
   Shows above the user's text selection inside any arxiv card.
   Styled like a control-bar pill — small, confident, arxiv-red
   accented. The float-in animation is deliberately quick
   (180ms) so it doesn't feel like it's chasing the cursor. */
.ax-sel-btn {
  position: absolute;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ax-accent) 40%, var(--line));
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--panel) 95%, transparent),
      color-mix(in oklab, var(--panel-2) 95%, transparent));
  color: color-mix(in oklab, var(--ax-accent) 70%, var(--text));
  font: 600 12px/1 var(--font-body, "Inter", sans-serif);
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    0 8px 24px -8px rgba(0, 0, 0, 0.45),
    0 2px 8px -2px rgba(179, 27, 27, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: ax-sel-btn-in 0.18s ease-out;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
@keyframes ax-sel-btn-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.ax-sel-btn[hidden] { display: none; }
.ax-sel-btn:hover {
  background: color-mix(in oklab, var(--ax-accent) 18%, transparent);
  color: var(--ax-accent);
}
.ax-sel-btn:active { transform: translateY(1px); }
.ax-sel-btn svg { flex: 0 0 auto; }

/* Light-theme pass for popup + sel-btn — cream paper feel,
   black ink. Border tightens to keep contrast on cream. */
[data-theme="stanford"] .ax-cpop,
[data-theme="tuks"]     .ax-cpop,
[data-theme="unibo"]    .ax-cpop,
:root[data-theme="light"] .ax-cpop,
[data-theme="stanford"] .ax-sel-btn,
[data-theme="tuks"]     .ax-sel-btn,
[data-theme="unibo"]    .ax-sel-btn,
:root[data-theme="light"] .ax-sel-btn {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.97),
      color-mix(in oklab, #fff 96%, var(--brand) 3%));
  color: #2a1908;
  border-color: color-mix(in oklab, #b31b1b 22%, var(--line));
}
[data-theme="stanford"] .ax-cpop-text,
[data-theme="tuks"]     .ax-cpop-text,
[data-theme="unibo"]    .ax-cpop-text,
:root[data-theme="light"] .ax-cpop-text { color: #2a1908; }

/* ── TIER SENTENCE ── (one-line interpretation, mirrors the
   strain card's "An Indica-leaning Cannabis Strain…" pattern) */
.ax-tier-slot { margin-top: 4px; }
.ax-tier-sentence {
  margin: 0;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-weight: 500;
  font-size: clamp(14.5px, 1.4vw, 17px);
  line-height: 1.45;
  color: color-mix(in oklab, var(--text) 88%, var(--muted));
  font-style: italic;
}
.ax-tier-word {
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: color-mix(in oklab, var(--ax-accent) 70%, var(--text));
  font-variant-numeric: tabular-nums;
}
.ax-tier-field {
  font-style: italic;
  font-weight: 500;
  color: color-mix(in oklab, var(--ax-accent) 55%, var(--text));
}
.ax-tier-sentence.is-pending {
  opacity: 0.7;
}
.ax-tier-sentence.is-blocked {
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}

/* ── STAT RIBBON ── (citations / influential / refs / year / version) */
.ax-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  margin: 18px 0 4px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}
.ax-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--panel-2) 60%, transparent);
  min-width: 0;
}
.ax-stat-k {
  font: 600 10px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ax-stat-v {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ax-stat[data-stat="citations"] .ax-stat-v,
.ax-stat[data-stat="influential"] .ax-stat-v {
  color: color-mix(in oklab, var(--ax-accent) 55%, var(--text));
}

/* ── TLDR + DID YOU KNOW ── (lifted from the periodic / element
   card pattern; same gold-tint accent block but in arxiv-red) */
.ax-tldr,
.ax-dyk {
  margin: 14px 0 4px;
  padding: 14px 18px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid color-mix(in oklab, var(--ax-accent) 60%, transparent);
  background:
    radial-gradient(420px 200px at 0% 0%, color-mix(in oklab, var(--ax-accent) 6%, transparent), transparent 60%),
    color-mix(in oklab, var(--panel-2) 50%, transparent);
}
.ax-dyk {
  border-left-color: color-mix(in oklab, #d4af37 70%, transparent);
  background:
    radial-gradient(420px 200px at 0% 0%, color-mix(in oklab, #d4af37 7%, transparent), transparent 60%),
    color-mix(in oklab, var(--panel-2) 55%, transparent);
}
.ax-tldr-text,
.ax-dyk-text {
  margin: 0;
  font: 400 15px/1.65 var(--font-body, "Inter", system-ui, sans-serif);
  color: color-mix(in oklab, var(--text) 92%, var(--muted));
  max-width: 75ch;
}
.ax-tldr-text { font-style: italic; }
.ax-tldr-source {
  display: inline-block;
  margin-top: 8px;
  font: 600 10px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ax-dyk-text strong {
  font-weight: 700;
  color: color-mix(in oklab, #d4af37 60%, var(--text));
}
.ax-dyk-text em {
  font-style: italic;
  color: color-mix(in oklab, var(--text) 85%, var(--muted));
}

/* ── ICON TINTING ──────────────────────────────────────────
   Per Hope's direction (2026-05-09): every PNG icon used by the
   arXiv card must read as WHITE on dark themes and BLACK on light
   themes — regardless of the artwork's source colour. We use the
   classic `brightness(0)` (collapses any colour to pure black while
   preserving alpha) and chain `invert(1)` for white. Both filters
   are applied via a CSS variable so light themes can flip a single
   knob instead of overriding every selector.

   Default = white (dark themes are the dominant surface). Light
   themes flip the var to keep the artwork legible on cream paper. */
:root {
  --ax-icon-filter: brightness(0) invert(1);
}
[data-theme="stanford"],
[data-theme="tuks"],
[data-theme="unibo"],
:root[data-theme="light"] {
  --ax-icon-filter: brightness(0);
}

.ax-btn-icon,
.ax-name-leaf img,
.ax-section-title img,
.ax-authors-icon,
.ax-rel-icon {
  filter: var(--ax-icon-filter);
}
/* .ax-brand-mark intentionally NOT filtered — Hope's spec:
   "Use this icon, do not change its color or put a circle behind it." */

/* ── BUTTON ICONS ── */
.ax-btn-icon {
  width: 16px; height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
}
/* Hero PDF icon — Hope wanted the PDF affordance unmissable. The
   icon now reads as a poster ornament (28px) docked next to the
   "View PDF" label. The button itself gets a heavier presence:
   bigger padding, semibold label. */
.ax-btn-icon--xl {
  width: 28px; height: 28px;
}
.ax-btn--pdf-hero {
  padding: 12px 20px 12px 14px;
  gap: 12px;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.ax-btn--pdf-hero .ax-btn-label {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ── RELATED PAPERS CARD ── */
.arxiv-related-card {
  margin: 12px 0;
  padding: 18px 22px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background:
    radial-gradient(700px 280px at 100% 0%, color-mix(in oklab, var(--ax-accent) 6%, transparent), transparent 55%),
    var(--panel);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.arxiv-related-card.is-revealed { opacity: 1; transform: none; }
.ax-rel-head {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 12px;
}
.ax-rel-icon {
  width: 36px; height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
  margin-top: 2px;
}
.ax-rel-kicker {
  display: block;
  font: 600 10.5px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ax-accent) 70%, var(--muted));
}
.ax-rel-h {
  margin: 4px 0 0;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-weight: 700;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.2;
  color: var(--text);
}
.ax-rel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ax-rel-item {
  padding: 10px 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--text) 10%, transparent);
}
.ax-rel-item:last-child { border-bottom: 0; }
.ax-rel-title {
  display: block;
  font: 600 14.5px/1.4 var(--font-body, "Inter", system-ui, sans-serif);
  color: var(--text);
  text-decoration: none;
  margin-bottom: 4px;
}
a.ax-rel-title:hover { color: var(--ax-accent); }
.ax-rel-meta {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  font: 400 12px/1.3 var(--font-body, inherit);
  color: var(--muted);
}
.ax-rel-auth {
  font-style: italic;
  color: color-mix(in oklab, var(--text) 75%, var(--muted));
  flex: 1 1 220px;
  min-width: 0;
}
.ax-rel-year { font-variant-numeric: tabular-nums; }
.ax-rel-venue {
  font-style: italic;
  color: color-mix(in oklab, var(--text) 70%, var(--muted));
}
.ax-rel-cit {
  font-weight: 700;
  color: color-mix(in oklab, var(--ax-accent) 60%, var(--text));
  font-variant-numeric: tabular-nums;
}
.ax-rel-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in oklab, var(--text) 10%, transparent);
  display: flex; justify-content: space-between; gap: 10px;
  font: 400 11.5px/1.3 var(--font-body, inherit);
  color: var(--muted);
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .arxiv-card { padding: 20px 18px 16px; }
  .arxiv-section-card { padding: 18px 18px 14px; }
  .ax-meta { grid-template-columns: 1fr; gap: 2px 0; }
  .ax-meta dt { padding-top: 6px; }
  .ax-pdf-frame-wrap { height: clamp(420px, 70vh, 720px); }
  .ax-abstract p::first-letter { font-size: 2.6em; }
  .ax-meter { width: 140px; height: 140px; }
  .ax-ribbon { grid-template-columns: repeat(2, 1fr); }
}

/* ── LIGHT THEMES (Stanford / Tuks / Unibo / generic light) ──
   Cream-paper card stock, near-black ink, the arXiv-red accent
   stays bright but the surrounds warm up to feel like a printed
   journal. Drop-cap stays red so it pops on cream. */
[data-theme="stanford"] .arxiv-card,
[data-theme="tuks"]     .arxiv-card,
[data-theme="unibo"]    .arxiv-card,
:root[data-theme="light"] .arxiv-card {
  background:
    radial-gradient(900px 320px at -10% -10%, rgba(179, 27, 27, 0.08), transparent 55%),
    radial-gradient(700px 280px at 110% 0%, rgba(212, 175, 55, 0.10), transparent 55%),
    color-mix(in oklab, #fff 92%, var(--brand) 4%);
  border-color: color-mix(in oklab, #b31b1b 25%, var(--line));
  box-shadow:
    0 1px 0 #fff inset,
    0 16px 36px -28px rgba(179, 27, 27, 0.35);
}
[data-theme="stanford"] .arxiv-section-card,
[data-theme="tuks"]     .arxiv-section-card,
[data-theme="unibo"]    .arxiv-section-card,
:root[data-theme="light"] .arxiv-section-card {
  background:
    linear-gradient(180deg, rgba(179, 27, 27, 0.05) 0%, transparent 80px),
    color-mix(in oklab, #fff 94%, var(--brand) 3%);
}
[data-theme="stanford"] .arxiv-section-index,
[data-theme="tuks"]     .arxiv-section-index,
[data-theme="unibo"]    .arxiv-section-index,
:root[data-theme="light"] .arxiv-section-index {
  background:
    linear-gradient(135deg, rgba(179, 27, 27, 0.08) 0%, transparent 60%),
    color-mix(in oklab, #fff 92%, var(--brand) 4%);
}
[data-theme="stanford"] .arxiv-pdf-card,
[data-theme="tuks"]     .arxiv-pdf-card,
[data-theme="unibo"]    .arxiv-pdf-card,
:root[data-theme="light"] .arxiv-pdf-card {
  background: color-mix(in oklab, #fff 96%, var(--brand) 2%);
}
/* Boost ink contrast in light mode — cream backgrounds need darker
   body copy than the dark theme's mid-grey. */
[data-theme="stanford"] .ax-abstract p,
[data-theme="tuks"]     .ax-abstract p,
[data-theme="unibo"]    .ax-abstract p,
:root[data-theme="light"] .ax-abstract p,
[data-theme="stanford"] .ax-sec-body,
[data-theme="tuks"]     .ax-sec-body,
[data-theme="unibo"]    .ax-sec-body,
:root[data-theme="light"] .ax-sec-body {
  color: #2a1908;
}
[data-theme="stanford"] .ax-authors,
[data-theme="tuks"]     .ax-authors,
[data-theme="unibo"]    .ax-authors,
:root[data-theme="light"] .ax-authors {
  /* Light themes get a deeper teal/aqua so the names stay
     legible on cream paper while still reading as "aqua blue". */
  color: #007a99;
}
[data-theme="stanford"] .ax-sec-body th,
[data-theme="tuks"]     .ax-sec-body th,
[data-theme="unibo"]    .ax-sec-body th,
:root[data-theme="light"] .ax-sec-body th {
  background: rgba(179, 27, 27, 0.06);
}
[data-theme="stanford"] .ax-sec-body img,
[data-theme="tuks"]     .ax-sec-body img,
[data-theme="unibo"]    .ax-sec-body img,
:root[data-theme="light"] .ax-sec-body img {
  background: #fff;
  box-shadow: 0 1px 6px -2px rgba(0, 0, 0, 0.18);
}
/* Related card + stat ribbon + meter inner — boost ink contrast on cream. */
[data-theme="stanford"] .arxiv-related-card,
[data-theme="tuks"]     .arxiv-related-card,
[data-theme="unibo"]    .arxiv-related-card,
:root[data-theme="light"] .arxiv-related-card {
  background:
    radial-gradient(700px 280px at 100% 0%, rgba(179, 27, 27, 0.07), transparent 55%),
    color-mix(in oklab, #fff 95%, var(--brand) 3%);
  border-color: color-mix(in oklab, #b31b1b 20%, var(--line));
}
[data-theme="stanford"] .ax-rel-title,
[data-theme="tuks"]     .ax-rel-title,
[data-theme="unibo"]    .ax-rel-title,
:root[data-theme="light"] .ax-rel-title {
  color: #2a1908;
}
[data-theme="stanford"] .ax-stat-v,
[data-theme="tuks"]     .ax-stat-v,
[data-theme="unibo"]    .ax-stat-v,
:root[data-theme="light"] .ax-stat-v,
[data-theme="stanford"] .ax-meter-num,
[data-theme="tuks"]     .ax-meter-num,
[data-theme="unibo"]    .ax-meter-num,
:root[data-theme="light"] .ax-meter-num {
  color: #2a1908;
}
[data-theme="stanford"] .ax-tier-sentence,
[data-theme="tuks"]     .ax-tier-sentence,
[data-theme="unibo"]    .ax-tier-sentence,
:root[data-theme="light"] .ax-tier-sentence {
  color: #5a3a1a;
}
[data-theme="stanford"] .ax-tldr-text,
[data-theme="tuks"]     .ax-tldr-text,
[data-theme="unibo"]    .ax-tldr-text,
:root[data-theme="light"] .ax-tldr-text,
[data-theme="stanford"] .ax-dyk-text,
[data-theme="tuks"]     .ax-dyk-text,
[data-theme="unibo"]    .ax-dyk-text,
:root[data-theme="light"] .ax-dyk-text {
  color: #2a1908;
}
[data-theme="stanford"] .ax-meter-bg,
[data-theme="tuks"]     .ax-meter-bg,
[data-theme="unibo"]    .ax-meter-bg,
:root[data-theme="light"] .ax-meter-bg {
  stroke: rgba(0, 0, 0, 0.10);
}

/* ============================================================
   BOOK CARD — landscape book wiki
   ------------------------------------------------------------
   Hope's spec (2026-05-11): "MAKE IT SUPER AMAZING LANDSCAPE
   INFORMATIVE BOOK WIKI CARD... Cos books represents our
   identity as the shepherd of knowledge."
   
   Layout: poster-style cover rail on the left (sticky on tall
   cards), rich content rail on the right. Collapses to stacked
   on narrow viewports so the cover always leads.
   ============================================================ */
.book-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 28px;
  padding: 28px 28px 24px;
  margin: 14px 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 212, 255, 0.05), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255, 196, 86, 0.04), transparent 55%),
    var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.book-card::before {
  /* Subtle parchment grain in the background. */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.025'/></svg>");
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: overlay;
}

/* ---- Cover rail (left) ---- */
.bk-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 1;
}
.bk-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  background: linear-gradient(140deg, #1c1408 0%, #0c0a06 100%);
  transform: perspective(900px) rotateY(-3deg) rotateX(1.2deg);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.book-card:hover .bk-cover-wrap {
  transform: perspective(900px) rotateY(0deg) rotateX(0deg) scale(1.012);
}
.bk-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bk-cover-none {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: 88px;
  font-weight: 600;
  color: rgba(255, 196, 86, 0.8);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}
.bk-cover-glow {
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 0%, rgba(0, 212, 255, 0.25), transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.7;
}

.bk-read-free {
  display: block;
  padding: 9px 12px;
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.18), rgba(0, 212, 255, 0.08));
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 8px;
  color: #6ee5ff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: all 0.2s ease;
}
.bk-read-free:hover {
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.28), rgba(0, 212, 255, 0.14));
  border-color: rgba(0, 212, 255, 0.55);
  transform: translateY(-1px);
}

/* Buy buttons intentionally removed (Hope spec 2026-05-11 #4) —
   DNA45 does not partner with commercial retailers. */

/* ---- Main rail (right) ---- */
.bk-main {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.bk-head {
  margin-bottom: 18px;
}
.bk-kicker {
  margin-bottom: 8px;
}
.bk-title {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  margin: 0 0 4px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text, #f5e9d2);
}
.bk-subtitle {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-style: italic;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}
.bk-author {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 14.5px;
  margin-top: 6px;
}
.bk-by {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}
.bk-author-name {
  font-weight: 600;
  color: #ffd57a;
  letter-spacing: 0.01em;
}
.bk-author-life {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12.5px;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.bk-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.bk-meta-pill {
  font-size: 11.5px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.01em;
}
.bk-meta-pill--rating {
  background: rgba(255, 196, 86, 0.12);
  border-color: rgba(255, 196, 86, 0.3);
  color: #ffd57a;
  font-weight: 600;
}
.bk-meta-pill--accent {
  /* Bestseller / Pulitzer / sales-record highlight — leads the eye. */
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.1));
  border-color: rgba(212, 175, 55, 0.55);
  color: #ffe28a;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10.5px;
  padding: 4px 11px;
}

/* Section common — arxiv-style PNG icon + uppercase serif label */
.bk-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 212, 255, 0.78);
}
.bk-section-title img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.9;
  flex: 0 0 auto;
  /* On dark themes the dark-line icons need to read as bright. */
  filter: brightness(0) saturate(100%) invert(82%) sepia(48%) saturate(515%) hue-rotate(155deg) brightness(101%) contrast(94%);
}
.book-card section {
  margin-top: 22px;
}

/* DNA45 pick reason — only shown for ?recommend=... lookups.
   Sits above the Intro and gives the librarian's justification
   ("Strayed's letters meet heartbreak where it actually lives…"). */
.bk-pick {
  margin: 0 0 6px;
  padding: 16px 18px;
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.04));
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-left: 3px solid rgba(212, 175, 55, 0.85);
  border-radius: 0 12px 12px 0;
}
.bk-pick-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 226, 138, 0.95);
}
.bk-pick-label img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  opacity: 0.95;
  filter: brightness(0) saturate(100%) invert(82%) sepia(36%) saturate(602%) hue-rotate(8deg) brightness(101%) contrast(94%);
}
.bk-pick-reason {
  margin: 0;
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: 17px;
  line-height: 1.5;
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
}
[data-theme="stanford"] .bk-pick-reason,
[data-theme="tuks"]     .bk-pick-reason,
[data-theme="unibo"]    .bk-pick-reason,
:root[data-theme="light"] .bk-pick-reason { color: rgba(42, 25, 8, 0.92); }
[data-theme="stanford"] .bk-pick-label,
[data-theme="tuks"]     .bk-pick-label,
[data-theme="unibo"]    .bk-pick-label,
:root[data-theme="light"] .bk-pick-label { color: rgba(139, 80, 20, 0.95); }

/* Intro hook */
.bk-intro p {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: 18.5px;
  line-height: 1.5;
  font-style: italic;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid rgba(0, 212, 255, 0.5);
}

/* Opening line quote */
.bk-firstline {
  position: relative;
}
.bk-firstline-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 196, 86, 0.6);
  margin-bottom: 6px;
}
.bk-firstline blockquote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  line-height: 1.45;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 2px solid rgba(255, 196, 86, 0.5);
}
.bk-firstline blockquote::before {
  content: "\201C";
  color: rgba(255, 196, 86, 0.5);
  font-size: 28px;
  margin-right: 4px;
  line-height: 0;
  vertical-align: -10px;
}

/* Abstract */
.bk-abstract p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 10px;
}
.bk-abstract p:last-child { margin-bottom: 0; }

/* Did you know — single short fact (Hope spec 2026-05-11 #2) */
.bk-dyk-text {
  margin: 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.02));
  border-left: 3px solid rgba(212, 175, 55, 0.7);
  border-radius: 0 10px 10px 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

/* Themes (subject chips) */
.bk-subj-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bk-subj-chip {
  padding: 5px 11px;
  background: rgba(255, 196, 86, 0.08);
  border: 1px solid rgba(255, 196, 86, 0.22);
  border-radius: 999px;
  font-size: 12px;
  color: #ffd57a;
  letter-spacing: 0.01em;
}

/* Related books — plain numbered text list, max 4 (Hope spec 2026-05-11 #2) */
.bk-rel-list {
  counter-reset: bk-rel;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bk-rel-list li {
  counter-increment: bk-rel;
}
.bk-rel-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-left: 2px solid rgba(255, 196, 86, 0.35);
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: all 0.16s ease;
}
.bk-rel-item:hover {
  background: rgba(255, 196, 86, 0.06);
  border-color: rgba(255, 196, 86, 0.18);
  border-left-color: rgba(255, 196, 86, 0.85);
  transform: translateX(3px);
}
.bk-rel-num::before {
  content: counter(bk-rel, decimal-leading-zero) " –";
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 196, 86, 0.6);
  flex: 0 0 auto;
}
.bk-rel-text {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text, #f5e9d2);
}
.bk-rel-title {
  font-weight: 600;
}
.bk-rel-author {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}
.bk-rel-year {
  color: rgba(255, 196, 86, 0.55);
  font-size: 12.5px;
  letter-spacing: 0.03em;
}

/* Ask-Shepherd chips */
.bk-ask-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bk-ask-chip {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.bk-ask-chip:hover {
  background: rgba(0, 212, 255, 0.12);
  border-color: rgba(0, 212, 255, 0.4);
  color: #6ee5ff;
  transform: translateY(-1px);
}

/* Footer */
.bk-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}
.bk-foot a {
  color: rgba(0, 212, 255, 0.7);
  text-decoration: none;
}
.bk-foot a:hover { color: #6ee5ff; }
.bk-foot .foot-sep { margin: 0 4px; opacity: 0.5; }
.bk-foot .dna-stamp {
  color: rgba(255, 196, 86, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10.5px;
}

/* ---- Responsive: stack the cover above content on narrow screens ---- */
@media (max-width: 720px) {
  .book-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px 18px 20px;
  }
  .bk-rail {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
  }
  .bk-cover-wrap {
    width: 130px;
    flex-shrink: 0;
    transform: none;
  }
  .book-card:hover .bk-cover-wrap { transform: none; }
  .bk-rail > :not(.bk-cover-wrap) {
    flex: 1;
    min-width: 0;
  }
  .bk-title { font-size: 24px; }
  .bk-rel-text { font-size: 13.5px; }
}

/* ---- Light themes: re-tint for parchment readability ---- */
[data-theme="stanford"] .book-card,
[data-theme="tuks"]     .book-card,
[data-theme="unibo"]    .book-card,
:root[data-theme="light"] .book-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 130, 180, 0.06), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(200, 90, 30, 0.05), transparent 55%),
    rgba(252, 245, 232, 0.96);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
[data-theme="stanford"] .bk-title,
[data-theme="tuks"]     .bk-title,
[data-theme="unibo"]    .bk-title,
:root[data-theme="light"] .bk-title { color: #2a1908; }
[data-theme="stanford"] .bk-subtitle,
[data-theme="tuks"]     .bk-subtitle,
[data-theme="unibo"]    .bk-subtitle,
:root[data-theme="light"] .bk-subtitle { color: rgba(42, 25, 8, 0.7); }
[data-theme="stanford"] .bk-author-name,
[data-theme="tuks"]     .bk-author-name,
[data-theme="unibo"]    .bk-author-name,
:root[data-theme="light"] .bk-author-name { color: #8b1a1a; }
[data-theme="stanford"] .bk-intro p,
[data-theme="tuks"]     .bk-intro p,
[data-theme="unibo"]    .bk-intro p,
:root[data-theme="light"] .bk-intro p { color: rgba(42, 25, 8, 0.88); }
[data-theme="stanford"] .bk-abstract p,
[data-theme="tuks"]     .bk-abstract p,
[data-theme="unibo"]    .bk-abstract p,
:root[data-theme="light"] .bk-abstract p { color: rgba(42, 25, 8, 0.82); }
[data-theme="stanford"] .bk-dyk-text,
[data-theme="tuks"]     .bk-dyk-text,
[data-theme="unibo"]    .bk-dyk-text,
:root[data-theme="light"] .bk-dyk-text {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.02));
  border-left-color: rgba(180, 130, 30, 0.7);
  color: rgba(42, 25, 8, 0.88);
}
[data-theme="stanford"] .bk-section-title img,
[data-theme="tuks"]     .bk-section-title img,
[data-theme="unibo"]    .bk-section-title img,
:root[data-theme="light"] .bk-section-title img {
  /* On parchment themes the icons need to be dark, not aqua. */
  filter: brightness(0) saturate(100%) invert(15%) sepia(48%) saturate(1800%) hue-rotate(345deg) brightness(95%) contrast(95%);
}
[data-theme="stanford"] .bk-section-title,
[data-theme="tuks"]     .bk-section-title,
[data-theme="unibo"]    .bk-section-title,
:root[data-theme="light"] .bk-section-title {
  color: rgba(139, 26, 26, 0.85);
}
[data-theme="stanford"] .bk-rel-title,
[data-theme="tuks"]     .bk-rel-title,
[data-theme="unibo"]    .bk-rel-title,
:root[data-theme="light"] .bk-rel-title { color: #2a1908; }
[data-theme="stanford"] .bk-rel-author,
[data-theme="tuks"]     .bk-rel-author,
[data-theme="unibo"]    .bk-rel-author,
:root[data-theme="light"] .bk-rel-author { color: rgba(42, 25, 8, 0.55); }
[data-theme="stanford"] .bk-meta-pill,
[data-theme="tuks"]     .bk-meta-pill,
[data-theme="unibo"]    .bk-meta-pill,
:root[data-theme="light"] .bk-meta-pill {
  background: rgba(42, 25, 8, 0.05);
  border-color: rgba(42, 25, 8, 0.12);
  color: rgba(42, 25, 8, 0.75);
}
[data-theme="stanford"] .bk-ask-chip,
[data-theme="tuks"]     .bk-ask-chip,
[data-theme="unibo"]    .bk-ask-chip,
:root[data-theme="light"] .bk-ask-chip {
  background: rgba(42, 25, 8, 0.04);
  border-color: rgba(42, 25, 8, 0.15);
  color: rgba(42, 25, 8, 0.85);
}
/* bk-buy light-theme overrides removed alongside the buy buttons. */

/* ==========================================================
   DNA45 GOVERNANCE — Security overlay + Analytics dashboard
   ========================================================== */
.gov-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  z-index: 9999;
  animation: gov-in 0.35s ease both;
}
@keyframes gov-in { from { opacity: 0; } to { opacity: 1; } }
.gov-overlay.is-leaving { animation: gov-out 0.28s ease both; }
@keyframes gov-out { from { opacity: 1; } to { opacity: 0; } }

.gov-frame {
  display: flex; flex-direction: column;
  align-items: center; gap: 24px;
  padding: 24px;
  max-width: 520px; width: 100%;
}

.gov-gif {
  display: block;
  max-width: 320px; max-height: 320px;
  width: 100%; height: auto;
  min-width: 120px; min-height: 120px;
  object-fit: contain;
  background: transparent;
}
.gov-gif--once { animation: none; }

.gov-meta {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  text-align: center;
}

.gov-stage {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.gov-stage.is-in {
  opacity: 1;
  transform: translateY(0);
}

.gov-label {
  font-family: var(--font-display, var(--font-body));
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff;
}

.gov-sub {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Login box */
.gov-login-box {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  width: 100%; max-width: 380px;
  padding: 36px 28px;
  border: 1px solid color-mix(in oklab, var(--brand) 30%, #333);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #0a0a12 0%, #000 100%);
  box-shadow: 0 24px 80px color-mix(in oklab, var(--brand) 12%, transparent);
}

.gov-login-icon {
  color: var(--brand);
  margin-bottom: 4px;
}
.gov-login-icon img {
  width: 80px; height: 80px;
  object-fit: contain;
  border-radius: 12px;
}

.gov-login-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 20px; font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
}

.gov-login-sub {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.gov-login-email {
  font-family: var(--font-mono);
  font-size: 12.5px; color: var(--brand);
  padding: 8px 16px;
  border: 1px solid color-mix(in oklab, var(--brand) 25%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--brand) 5%, transparent);
}

.gov-login-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0a0a12;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gov-login-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 15%, transparent);
}

.gov-login-error {
  font-family: var(--font-mono);
  font-size: 11.5px; color: #ff6b6b;
  min-height: 18px;
}

.gov-login-btn {
  width: 100%;
  padding: 12px 20px;
  border: none; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand) 70%, var(--accent)));
  color: #fff; font-weight: 700; font-size: 13.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s, transform 0.2s;
}
.gov-login-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.gov-login-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Dashboard */
.gov-dashboard {
  display: flex; flex-direction: column; gap: 20px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1);
  animation: fadeUp 0.5s ease both;
}
.gov-dashboard.is-leaving { animation: fadeOut 0.28s ease both; }

.gov-dash-header {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.gov-dash-title {
  font-family: var(--font-display, var(--font-body));
  font-size: 22px; font-weight: 800;
  color: var(--text);
  letter-spacing: 0.02em;
}

.gov-dash-sub {
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--muted);
  letter-spacing: 0.08em; text-transform: uppercase;
}

.gov-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 640px) {
  .gov-stats-row { grid-template-columns: repeat(2, 1fr); }
}

.gov-stat {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 8%, transparent), color-mix(in oklab, var(--accent) 5%, transparent));
  border: 1px solid color-mix(in oklab, var(--brand) 15%, var(--line));
  text-align: center;
}

.gov-stat-num {
  font-family: var(--font-display, var(--font-body));
  font-size: 28px; font-weight: 800;
  color: var(--brand);
  line-height: 1;
}

.gov-stat-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.gov-dash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 720px) {
  .gov-dash-grid { grid-template-columns: 1fr; }
}

.gov-dash-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}

.gov-dash-panel--wide { grid-column: 1 / -1; }

.gov-panel-title {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.gov-bar-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 1fr auto;
  align-items: center; gap: 10px;
  padding: 6px 0;
}

.gov-bar-name {
  font-size: 12px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.gov-bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.gov-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 60%, var(--accent)));
  transition: width 0.6s ease;
}

.gov-bar-num {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--muted);
  min-width: 28px; text-align: right;
}

.gov-empty {
  font-size: 12px; color: var(--muted-2);
  padding: 12px 0;
  text-align: center;
}

.gov-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand) 8%, var(--bg-soft));
  border: 1px solid color-mix(in oklab, var(--brand) 15%, var(--line));
  font-size: 12px;
}

.gov-pill-name { color: var(--text); }

.gov-pill-num {
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--brand);
  font-weight: 700;
}

.gov-dash-tabs {
  display: flex; gap: 8px;
  margin-top: 12px;
}

.gov-tab {
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gov-tab:hover {
  border-color: color-mix(in oklab, var(--brand) 30%, var(--line));
  color: var(--text);
}
.gov-tab.is-active {
  border-color: var(--brand);
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 8%, var(--bg-soft));
}

.gov-dash-footer {
  display: flex; justify-content: center; gap: 12px;
  padding-top: 8px;
}

.gov-close-btn {
  padding: 10px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.gov-close-btn:hover {
  background: color-mix(in oklab, var(--brand) 10%, var(--bg-soft));
  color: var(--text);
}

.gov-log-btn {
  padding: 10px 24px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand) 70%, var(--accent)));
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s;
}
.gov-log-btn:hover { filter: brightness(1.1); }