/* Self-hosted Inconsolata (variable, latin) — no external Google Fonts
   request, so the app paints instantly and works fully offline. */
@font-face {
  font-family: "Inconsolata";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inconsolata-latin.woff2") format("woff2");
}

/* ---- 2.0 Aesop-inspired editorial palette. Warm cream light theme,
   warm charcoal dark theme; clay accent used sparingly. Variable NAMES are
   load-bearing (the vice/glitch keypad themes override them) — only the
   values changed in the redesign. ---- */
:root {
  /* typography (system editorial stack — no external fonts) */
  --font-display: "New York", "Iowan Old Style", Georgia,
                  "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               system-ui, sans-serif;
  /* palette — warm cream */
  --bg: #f6f2ea;
  --bg-elev: #fbf8f2;
  --card: #fffdf8;
  --text: #252017;
  --muted: #7d745f;
  --line: #e8e0d0;
  --line-strong: #d5cab4;
  --ink: #3a3324;
  --accent: #9c6b3f;          /* clay — sparingly */
  --accent-soft: rgba(156, 107, 63, .12);
  --accent-glow: rgba(156, 107, 63, .32);
  --rate-ai: #4a82c4;         /* legacy (kept for keypad themes) */
  /* status colors — the ONLY sanctioned green/red (system health, not
     content). Themed below so banners stay readable in dark mode. */
  --ok: #2e7d32;
  --bad: #b3261e;
  --bad-bg: #b3261e;  --bad-ink: #ffffff;
  --warn-bg: #f6c453; --warn-ink: #3a2a00;
  --badge-google: #4285f4;
  --shadow: 0 1px 2px rgba(58, 47, 26, .05), 0 10px 26px rgba(58, 47, 26, .08);
  --shadow-sm: 0 1px 2px rgba(58, 47, 26, .06);
  /* spacing scale — use these instead of arbitrary pixel values */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px;
  /* radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --radius: var(--r-lg);  /* legacy alias */
  /* type scale */
  --fs-xs: 10.5px; --fs-sm: 12px; --fs-md: 13px;
  --fs-df: 14px;   --fs-lg: 16px; --fs-xl: 20px;
}
html[data-theme="dark"] {
  /* warm charcoal — same warmth, inverted values */
  --bg: #181611;
  --bg-elev: #1e1b15;
  --card: #201d16;
  --text: #e9e4d8;
  --muted: #9a917c;
  --line: #2e2a20;
  --line-strong: #423c2d;
  --ink: #d5cdba;
  --accent: #c89a62;
  --accent-soft: rgba(200, 154, 98, .14);
  --accent-glow: rgba(200, 154, 98, .38);
  --rate-ai: #6ba3e0;
  --ok: #7fbf87;
  --bad: #ef7b73;
  --bad-bg: #7f221c;  --bad-ink: #ffe9e7;
  --warn-bg: #5c4813; --warn-ink: #ffe9b8;
  --badge-google: #7ba8f7;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 14px 30px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg:#181611; --bg-elev:#1e1b15; --card:#201d16; --text:#e9e4d8;
    --muted:#9a917c; --line:#2e2a20; --line-strong:#423c2d; --ink:#d5cdba;
    --accent:#c89a62; --accent-soft:rgba(200,154,98,.14);
    --accent-glow:rgba(200,154,98,.38); --rate-ai:#6ba3e0;
    --ok:#7fbf87; --bad:#ef7b73;
    --bad-bg:#7f221c; --bad-ink:#ffe9e7;
    --warn-bg:#5c4813; --warn-ink:#ffe9b8;
    --badge-google:#7ba8f7;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 30px rgba(0,0,0,.5);
  }
}

/* render native controls (selects, date pickers, scrollbars) in the active
   theme's light/dark mode — keeps form controls consistent with the theme */
:root { color-scheme: light; }
html[data-theme="dark"], html[data-theme="vice"],
html[data-theme="glitch"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] { color-scheme: dark; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); transition: background .3s ease; }
body {
  font-family: var(--font-body);
  background: transparent; color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: color .3s ease;
}
/* editorial serif for display type: card titles, article titles, brand */
.title, .article-title, .brand-name { font-family: var(--font-display); }
/* the keypad LCD keeps its terminal character */
.keypad-lcd { font-family: "Inconsolata", ui-monospace, Menlo, monospace; }

/* ---- ambient background (default / dark / system themes only) ----
   Soft drifting gradient layer behind everything so cards/header/sidebar
   feel like they're sitting on top of something. Skips vice/glitch which
   already own body::before/::after. */
html:not([data-theme="vice"]):not([data-theme="glitch"]) body::before {
  content: ""; position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  /* Ooika mill mark tiled as a subtle watermark — black on light themes
     for a slightly-darker shade, swapped to white below for dark themes. */
  background-image: url("/static/img/ooika-mark-black.png");
  background-size: 110px 110px;
  background-repeat: repeat;
  opacity: .028;
  animation: ambient-drift 80s linear infinite;
  will-change: background-position;
}
html[data-theme="dark"] body::before {
  background-image: url("/static/img/ooika-mark-white.png");
  opacity: .032;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body::before {
    background-image: url("/static/img/ooika-mark-white.png");
    opacity: .032;
  }
}
/* Diagonal drift: end position must equal an integer multiple of the
   tile size so the loop is seamless (110px × 2 = 220px on both axes). */
@keyframes ambient-drift {
  from { background-position: 0 0; }
  to   { background-position: 220px 220px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="vice"]):not([data-theme="glitch"]) body::before {
    animation: none;
  }
}

/* ---- top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-6);
  padding: var(--s-3) var(--s-6);
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: var(--s-2);
  text-decoration: none; color: inherit; flex-shrink: 0; }
.brand-name { font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1; }
.brand-logo { width: 30px; height: 30px; object-fit: cover;
  border-radius: 7px; display: block; }

/* consistent tool nav (Intel · Wire · Science · Creator) — identical on every page */
.tool-nav { display: flex; align-items: center; gap: 2px; margin-right: auto;
  flex-wrap: wrap; }
.nav-link { padding: 6px 13px; border-radius: var(--r-md);
  font-size: var(--fs-df); font-weight: 600; color: var(--muted);
  text-decoration: none; transition: color .15s, background .15s; }
.nav-link:hover { color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent); }
.nav-link.active { color: var(--text); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-strong); }
/* the brand logo is now a self-contained photo composite (white wheel baked
   in) — it must NOT theme-invert, so no filter rules here. */
.brand h1 { font-size: var(--fs-xl); letter-spacing: -.02em;
  line-height: 1.1; }
.keypad-btn { opacity: .35; transition: opacity .2s; }
.keypad-btn:hover { opacity: 1; }
.clocks { display: flex; gap: var(--s-4); }
.clock { display: flex; flex-direction: column; line-height: 1.15; }
.clock .city { font-size: 10px; text-transform: uppercase;
  letter-spacing: .13em; color: var(--muted); }
.clock span:last-child { font-variant-numeric: tabular-nums;
  font-size: var(--fs-df); font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: var(--s-2); }
/* visual separator between primary actions and the secondary cluster */
.top-actions .sep { width: 1px; height: 22px; background: var(--line);
  margin: 0 4px; }
.search-wrap input {
  width: 280px; max-width: 34vw; padding: 9px var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--text); font-size: var(--fs-df);
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.search-wrap input:focus { outline: none; border-color: var(--line-strong);
  box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---- consistent keyboard focus (final-release accessibility polish) ---- */
.btn:focus-visible, .view:focus-visible, .chip:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---- dropdowns: custom chevron so selects look designed, not OS-default ---- */
select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%238b939b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1 5 5 9 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 28px !important; cursor: pointer; }

/* ---- buttons + shimmer ---- */
.btn {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  padding: 9px 15px; border-radius: 10px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: transform .14s, box-shadow .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow);
  border-color: var(--line-strong); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink); border-color: var(--ink);
  color: var(--bg-elev); }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; margin-top: var(--s-3); }
.btn-sm { padding: 5px 10px; font-size: var(--fs-sm); }
/* icon-only buttons (⚙ ◐ ▦ etc.) — square-ish, no inner shimmer chrome */
.btn-icon { padding: 7px 10px; font-size: 16px; line-height: 1;
  min-width: 36px; }
.btn-icon::after { display: none; }
.btn::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%,
    color-mix(in srgb, var(--text) 14%, transparent) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .6s ease; }
.btn:hover::after { transform: translateX(130%); }
.btn.busy { pointer-events: none; opacity: .75; }

/* ---- shared interaction states (all controls, all pages) ---- */
button:disabled, input:disabled, textarea:disabled, select:disabled {
  opacity: .6; cursor: not-allowed; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; border-color: var(--line-strong);
  box-shadow: 0 0 0 3px var(--accent-soft); }
.btn.busy .btn-label::after { content: ""; display: inline-block;
  width: 12px; height: 12px; margin-left: 8px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; vertical-align: -2px;
  animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Settings: tab bar ---- */
.stab-bar { display: flex; gap: var(--s-1); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line); }
.stab { padding: 6px 12px; background: none; border: none;
  border-bottom: 2px solid transparent; color: var(--muted);
  font: inherit; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; }
.stab:hover { color: var(--text); }
.stab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ---- card just-read confirmation blink ---- */
.just-read { animation: just-read .8s ease; }
@keyframes just-read {
  0% { opacity: 1; } 30% { opacity: .45; } 100% { opacity: 1; }
}

/* ---- schedule-vs-server mismatch warning (Settings → System) ---- */
.sys-warn { color: var(--warn-ink); background: var(--warn-bg);
  padding: 6px 10px; border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; }
.sys-warn.hidden { display: none; }

/* ---- Settings: System & maintenance rows ---- */
.sys-row { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); padding: 6px 0; border-bottom: 1px solid var(--line); }
.sys-label { color: var(--muted); font-size: var(--fs-sm); }
.sys-val { font-weight: 700; font-size: var(--fs-sm); text-align: right; }
.sys-val.sys-good { color: var(--ok); }
.sys-val.sys-bad { color: var(--bad); }
#sysAlwaysOnHint code { display: block; margin-top: 4px; padding: 6px 8px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-md); font-size: 11px; word-break: break-all; }

/* ---- AI health banner (chrome.js, shared across pages) ---- */
.ai-banner { display: flex; align-items: center; gap: var(--s-4);
  padding: 6px var(--s-6); font-size: var(--fs-sm); font-weight: 600;
  color: var(--bad-ink); background: var(--bad-bg);
  border-bottom: 1px solid var(--line); }
.ai-banner.warn { color: var(--warn-ink); background: var(--warn-bg); }
.ai-banner.hidden { display: none; }
.ai-banner-msg { flex: 1; min-width: 0; line-height: 1.35; }
.ai-banner-btn { flex-shrink: 0; background: rgba(255,255,255,.92);
  color: #222; border: 1px solid rgba(0,0,0,.25); border-radius: var(--r-md);
  padding: 3px 10px; font-weight: 700; cursor: pointer; }
.ai-banner-btn:disabled { opacity: .6; cursor: default; }

/* ---- scan bar ---- */
.scanbar { position: relative; height: 30px;
  display: flex; align-items: center;
  padding: 0 var(--s-6);
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--bg-elev));
  color: var(--accent);
  font-size: var(--fs-sm); font-weight: 700; overflow: hidden;
  border-bottom: 1px solid var(--line); }
/* The real-fill bar: width is set by JS to (done/total)%. Eased so the
   jump between sources feels intentional, not jittery. */
.scanbar-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--accent) 28%, transparent));
  border-right: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  transition: width .6s cubic-bezier(.22,.61,.36,1); }
/* Shimmer that travels across whatever portion of the bar is filled —
   keeps the bar feeling "alive" while the AI works on each source. */
.scanbar-fill::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%,
    color-mix(in srgb, var(--accent) 55%, transparent) 50%,
    transparent 62%);
  animation: scan-sweep 1.6s ease-in-out infinite; }
@keyframes scan-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
/* Sparkle layer — tiny moving dots over the whole bar for a bit of life. */
.scanbar::after { content: ""; position: absolute; inset: 0;
  pointer-events: none; opacity: .8;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 50%,
      color-mix(in srgb, var(--accent) 95%, white), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 30%,
      color-mix(in srgb, var(--accent) 90%, white), transparent 60%),
    radial-gradient(1.1px 1.1px at 64% 70%,
      color-mix(in srgb, var(--accent) 95%, white), transparent 60%),
    radial-gradient(1.4px 1.4px at 82% 40%,
      color-mix(in srgb, var(--accent) 90%, white), transparent 60%),
    radial-gradient(1.0px 1.0px at 96% 60%,
      color-mix(in srgb, var(--accent) 95%, white), transparent 60%);
  animation: scan-sparkle 2.4s ease-in-out infinite alternate; }
@keyframes scan-sparkle {
  from { opacity: .35; transform: translateX(-3px); }
  to   { opacity: .95; transform: translateX(3px); }
}
#scanbar-text { position: relative; z-index: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) {
  .scanbar-fill::before, .scanbar::after { animation: none; }
}

/* ---- view bar ---- */
.viewbar { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 32px 0; max-width: 1560px; margin: 0 auto; }
.views { display: flex; gap: 6px; }
/* right side of the viewbar: sort controls + the Wire-only actions
   (Refresh / + Add card), which moved off the shared header */
.viewbar-right { display: flex; align-items: center; gap: var(--s-4); }
.wire-actions { display: flex; align-items: center; gap: var(--s-2); }
.view { border: 1px solid var(--line); background: var(--card);
  color: var(--muted); padding: 7px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.view:hover { color: var(--text); border-color: var(--line-strong); }
.view.on { background: var(--ink); color: var(--bg-elev);
  border-color: var(--ink); }
.view i { font-style: normal; font-size: 11px; opacity: .7;
  margin-left: 5px; font-variant-numeric: tabular-nums; }
/* ---- layout: generous negative space (the 2.0 mandate) ---- */
.layout { display: grid; grid-template-columns: 224px 1fr;
  gap: 44px; padding: 28px 32px 56px;
  max-width: 1560px; margin: 0 auto; }
.filters { position: sticky; top: 130px; align-self: start;
  display: flex; flex-direction: column; gap: var(--s-5);
  /* keep topics/locations reachable when the list exceeds the viewport */
  max-height: calc(100vh - 150px); overflow-y: auto;
  padding-right: var(--s-1); scrollbar-width: thin; }
.filters::-webkit-scrollbar { width: 6px; }
.filters::-webkit-scrollbar-thumb { background: var(--line-strong);
  border-radius: var(--r-pill); }
.filter-block { display: flex; flex-direction: column; gap: var(--s-2); }
.filter-title { font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); font-weight: 700; }
.filters select, .filters input[type=date] { padding: 7px var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background-color: var(--card);
  color: var(--text); font-size: var(--fs-md); font-family: inherit; }
.filters select:focus, .filters input[type=date]:focus {
  outline: none; border-color: var(--line-strong);
  box-shadow: 0 0 0 3px var(--accent-soft); }
.date-row { display: flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-sm); color: var(--muted); }
.date-row input { flex: 1; min-width: 0; }
.chip-set { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.chip { border: 1px solid var(--line); background: var(--card);
  padding: 4px var(--s-2); border-radius: var(--r-pill);
  font-size: var(--fs-sm); cursor: pointer;
  transition: all .15s; user-select: none; }
.chip:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.chip.on { background: var(--ink); color: var(--bg-elev);
  border-color: var(--ink); }
.result-count { font-size: var(--fs-sm); color: var(--muted); }

/* ---- cluster expander on cards ---- */
.cluster-more { display: inline-block; margin-left: 8px; font-size: 11px;
  color: var(--muted); cursor: pointer; padding: 1px 7px;
  border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .15s, color .15s; }
.cluster-more:hover { color: var(--text);
  border-color: var(--line-strong); }
.cluster-list { display: none; flex-direction: column; gap: 4px;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--line); font-size: 12px; }
.cluster-list.open { display: flex; }
.cluster-list a { color: var(--text); text-decoration: none;
  border-bottom: 1px dotted var(--line); padding-bottom: 2px; }
.cluster-list a:hover { color: var(--accent);
  border-color: var(--accent); }
.cluster-list .src { color: var(--muted); margin-right: 6px;
  font-weight: 600; }

/* ---- feed: spacious editorial grid (~3 per row) ---- */
.feed { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 36px 28px; align-items: start; }
.empty { text-align: center; padding: var(--s-7) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
  align-items: center; grid-column: 1 / -1; }
.empty p:first-child { font-size: var(--fs-lg); font-weight: 600; }
.empty .muted { margin-top: var(--s-1); max-width: 460px; line-height: 1.55; }
.muted { color: var(--muted); font-size: var(--fs-md); }

/* loading skeleton — thumb-shaped while /api/articles is in-flight */
.skeleton { position: relative; overflow: hidden; border-radius: var(--r-lg); }
.skeleton::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 38%,
    color-mix(in srgb, var(--text) 7%, transparent) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: skel-sweep 1.4s ease-in-out infinite; z-index: 1; }
.skeleton .sk-line { height: 11px; border-radius: 4px;
  background: var(--line); margin: var(--s-2) 0 0; }
.skeleton .sk-line.w70 { width: 70%; }
.skeleton .sk-line.w55 { width: 55%; }
.skeleton .sk-line.tall { height: 15px; margin-top: var(--s-3); }
.skeleton .sk-img { aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  background: var(--line); }
@keyframes skel-sweep { to { transform: translateX(100%); } }

/* ---- the 2.0 card: borderless & editorial — a 16:9 image with quiet
   text beneath (thumbnail · source · serif title · date). ---- */
.card { position: relative; background: transparent; border: none;
  padding: 0; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
/* freshly-ingested cards during a scan pop in with a quick scale-fade */
.card.card-fresh { animation: card-pop-in .6s
  cubic-bezier(.22,.61,.36,1) both; }
.card.card-fresh .thumb { box-shadow: 0 0 0 2px var(--accent-soft),
  0 0 22px -6px var(--accent-glow); }
@keyframes card-pop-in {
  0%   { opacity: 0; transform: translateY(10px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* a card pinned to the top by a ?focus= deep-link — lingering accent ring */
.card.card-focused .thumb { box-shadow: 0 0 0 2px var(--accent),
  0 0 26px -4px var(--accent-glow); }
@media (prefers-reduced-motion: reduce) {
  .card.card-fresh { animation: none; }
}

/* unread = a quiet accent dot by the title, nothing louder */
.card.unread .unread-dot { display: inline-block; }
.unread-dot { display: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  margin-right: var(--s-2); vertical-align: 3px; }

/* ---- thumbnail ---- */
.thumb { position: relative; overflow: hidden; border-radius: var(--r-lg);
  aspect-ratio: 16 / 9; background: var(--bg-elev);
  border: 1px solid var(--line);
  transition: box-shadow .25s ease; }
.card:hover .thumb { box-shadow: var(--shadow); }
.thumb-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .5s ease; }
.card:not(.card-locked):hover .thumb-img { transform: scale(1.035); }
/* deterministic placeholder: warm duotone + big serif initial */
.thumb-ph { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; }
.thumb-ph-init { font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 84px); font-weight: 600; line-height: 1;
  color: rgba(255, 253, 248, .82); text-shadow: 0 1px 8px rgba(0,0,0,.10); }
.ph-0 { background: linear-gradient(135deg, #c9b68f, #9c6b3f); }
.ph-1 { background: linear-gradient(135deg, #a9b494, #5f7050); }
.ph-2 { background: linear-gradient(135deg, #d6c2a2, #8a6a48); }
.ph-3 { background: linear-gradient(135deg, #b4a284, #6f5b3e); }
.ph-4 { background: linear-gradient(135deg, #9baf9d, #4e6353); }
.ph-5 { background: linear-gradient(135deg, #d0b7a4, #96683f); }
.ph-6 { background: linear-gradient(135deg, #b9b09b, #767053); }
.ph-7 { background: linear-gradient(135deg, #a8b6ac, #5b6b52); }
html[data-theme="dark"] .thumb-ph { filter: brightness(.72) saturate(.9); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .thumb-ph { filter: brightness(.72) saturate(.9); }
}
/* hover: the AI synopsis rises over the image on a soft scrim */
.thumb-syn { position: absolute; inset: auto 0 0 0; padding:
  clamp(28px, 4vw, 44px) var(--s-4) var(--s-4);
  color: #fffdf8; font-size: var(--fs-md); line-height: 1.55;
  background: linear-gradient(to top, rgba(20, 16, 8, .82),
    rgba(20, 16, 8, .55) 55%, transparent);
  opacity: 0; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  display: -webkit-box; -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden; }
.card:hover .thumb-syn { opacity: 1; transform: translateY(0); }
/* "✓ EN" — translation-ready badge, top-left of the thumbnail */
.thumb .en-chip { position: absolute; top: var(--s-2); left: var(--s-2);
  z-index: 2; }
.en-chip { font-size: 10px; font-weight: 700; letter-spacing: .03em;
  color: #fffdf8; border: none;
  background: rgba(20, 16, 8, .55); backdrop-filter: blur(4px);
  padding: 3px 8px; border-radius: var(--r-pill);
  white-space: nowrap; cursor: help; }
/* paywalled-teaser badge — bottom-left so it never fights the EN chip */
.thumb .pw-chip { position: absolute; bottom: var(--s-2); left: var(--s-2);
  z-index: 2; }
.pw-chip { font-size: 10px; font-weight: 700; letter-spacing: .03em;
  color: #ffe9c4; border: none;
  background: rgba(20, 16, 8, .55); backdrop-filter: blur(4px);
  padding: 3px 8px; border-radius: var(--r-pill);
  white-space: nowrap; cursor: help; }
/* meta-row lock — the list view's stand-in for the thumbnail badge */
.pw-lock { font-size: 11px; line-height: 1; cursor: help; }
.feed:not(.is-list) .pw-lock { display: none; }
/* "Hide paywalled" checkbox in the filters sidebar */
.filter-check { display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  cursor: pointer; user-select: none; }
.filter-check input { accent-color: var(--accent); }

/* star + archive — fade in on the thumbnail's top-right corner */
.card-acts { position: absolute; top: calc(var(--s-2) + 1px);
  right: var(--s-2); z-index: 3; display: inline-flex; gap: 2px;
  padding: 2px; border-radius: var(--r-pill);
  background: rgba(20, 16, 8, .48); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease; }
.card:hover .card-acts,
.card-acts:focus-within { opacity: 1; transform: translateY(0); }
.card-acts .act { color: #fffdf8; width: 28px; height: 28px; }
.card-acts .act:hover { background: rgba(255, 253, 248, .18);
  transform: none; border-color: transparent; }
.card-acts .act.on { color: #f4c667; }

/* uniform icon buttons (shared with settings etc.) */
.act { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: none; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--muted);
  border: 1px solid transparent; border-radius: var(--r-pill);
  transition: color .15s, transform .15s, background .15s, border-color .15s; }
.act:hover { color: var(--text); background: var(--accent-soft); }
.act:focus-visible { outline: none;
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.act.on { color: var(--accent); }

/* ---- meta row: favicon · source · date ---- */
.card-meta { display: flex; align-items: center; gap: var(--s-2);
  min-height: 18px; padding: 0 2px; }
.ticon.fav { width: 16px; height: 16px; border-radius: 4px;
  object-fit: contain; flex-shrink: 0; }
.card-src { font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 55%; }
.card-date { font-size: var(--fs-sm); color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-date::before { content: "·"; margin-right: var(--s-2);
  opacity: .55; }
.cluster-more { margin-left: auto; }

/* ---- serif title, two-line clamp; the full headline lives in the tip ---- */
.title { font-size: 17px; line-height: 1.35; font-weight: 600;
  letter-spacing: -.008em; cursor: pointer; padding: 0 2px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }

.tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.tag { font-size: 11px; padding: 3px var(--s-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--muted); }
/* Location chips are display-only on the article page (no click handler) —
   no pointer cursor / hover highlight advertising interactivity. */
.tag.loc { transition: color .15s, border-color .15s; }

/* --- research details (ARTICLE PAGE only in 2.0) --- */
.sci-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: -4px; }
.sci-findings { margin: 0; padding-left: 1.15em;
  display: flex; flex-direction: column; gap: 5px; }
.sci-findings li { font-size: var(--fs-md); line-height: 1.45;
  color: var(--text); }
.sci-findings li::marker { color: var(--accent); }
.sci-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.sci-chip { font-size: 11px; padding: 3px var(--s-2);
  border-radius: var(--r-md); line-height: 1.35;
  border: 1px solid var(--line); background: var(--accent-soft);
  color: var(--text); }
.sci-chip b { color: var(--muted); font-weight: 600; }

/* ---- date group headers (discovery-day buckets) ---- */
.feed-day { grid-column: 1 / -1;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--muted);
  margin-top: var(--s-3); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line); }
.feed-day:first-child { margin-top: 0; }
#feed-sentinel { height: 1px; }

/* ---- inbox (list) layout: same card DOM, compact editorial rows ---- */
.feed.is-list { display: flex; flex-direction: column; gap: 0; }
.feed.is-list .feed-day { margin-top: var(--s-4); }
.feed.is-list .card { flex-direction: row; align-items: center;
  gap: var(--s-3); padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--line); border-radius: 0; }
.feed.is-list .card:hover { background: var(--bg-elev); }
.feed.is-list .thumb { display: none; }
.feed.is-list .cluster-list { display: none !important; }
.feed.is-list .card-meta { order: 2; flex: 0 0 auto; min-width: 200px;
  justify-content: flex-end; }
.feed.is-list .card-src { max-width: none; }
.feed.is-list .title { order: 1; flex: 1 1 auto; font-size: var(--fs-df);
  -webkit-line-clamp: 1; padding: 0; }
.feed.is-list .card-acts { position: static; order: 3; opacity: 0;
  transform: none; background: transparent; backdrop-filter: none; }
.feed.is-list .card:hover .card-acts { opacity: 1; }
.feed.is-list .card-acts .act { color: var(--muted); }
.feed.is-list .card-acts .act:hover { color: var(--text);
  background: var(--accent-soft); }
.feed.is-list .card-acts .act.on { color: var(--accent); }

/* ---- keyboard selection (j/k): ring + always-visible actions so the
   s / e shortcuts have visible targets. Placed after the list-view rules
   so it wins their hover-only opacity at equal specificity. ---- */
.card.kb-selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.card.kb-selected .card-acts { opacity: 1; transform: translateY(0); }

/* ---- Connections panel (Settings): live paywall-login status ---- */
.conn-list { display: flex; flex-direction: column; gap: var(--s-2);
  margin-bottom: var(--s-2); }
.conn-row { display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--card); }
.conn-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.conn-dot.conn-ok { background: var(--ok);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 60%, transparent); }
.conn-dot.conn-bad { background: var(--bad);
  box-shadow: 0 0 6px color-mix(in srgb, var(--bad) 60%, transparent); }
.conn-dot.conn-unknown { background: var(--warn-bg); }
.conn-dot.conn-none { background: var(--line-strong); }
.conn-name { font-weight: 600; font-size: var(--fs-df); flex-shrink: 0; }
.conn-status { flex: 1; text-align: right; font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* cursor-following tooltip */
#tip { position: fixed; z-index: 90; pointer-events: none;
  background: var(--ink); color: var(--bg-elev); font-size: 12px;
  font-weight: 600; padding: 6px 10px; border-radius: 8px;
  max-width: 260px; line-height: 1.35; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease; }
#tip.show { opacity: 1; transform: translateY(0); }

/* ================================================================== */
/* Article page (2.0) — the dedicated /article/<id> view.             */
/* Editorial column; also the auto-PDF's print layout via .article-pdf */
/* ================================================================== */
.article-page { padding: var(--s-6) var(--s-5) var(--s-7); }
.article-col { max-width: 65ch; margin: 0 auto; }
.article-topbar .topbar-spacer { flex: 1; }
/* Paywalled-teaser notice at the top of the reader */
.article-paywall-note { font-size: var(--fs-sm); font-weight: 600;
  color: var(--muted); background: var(--accent-soft);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); }
.article-paywall-note a { color: var(--accent); }

/* Prev/Next between articles (present only when opened from the feed) */
.article-pn { margin-right: 0; flex-wrap: nowrap; }
.nav-link.is-disabled { opacity: .35; pointer-events: none; }
#artStar.on { color: var(--accent); }
.article-head { margin-bottom: var(--s-5); }
.article-meta { display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; font-size: var(--fs-md); color: var(--muted);
  margin-bottom: var(--s-3); font-variant-numeric: tabular-nums; }
.article-source { font-weight: 700; color: var(--text); }
.dot-sep { opacity: .5; }
.translated-badge { font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line));
  border-radius: var(--r-pill); padding: 2px 9px; }
.article-title { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.22;
  letter-spacing: -.015em; margin: 0 0 var(--s-2); }
.article-subtitle { font-size: var(--fs-lg); color: var(--muted);
  line-height: 1.45; margin: 0 0 var(--s-3); }
.article-actions { display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; margin-top: var(--s-3); }
.article-orig-top { margin-left: auto; }
/* translation progress — calm, realistic */
.article-xlate { margin-top: var(--s-3); }
.article-xlate-fill { height: 4px; width: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-glow)); }
.article-xlate-label { display: block; margin-top: var(--s-1);
  font-size: var(--fs-sm); color: var(--muted); }
.article-hero { width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--line);
  margin-bottom: var(--s-5); background: var(--bg-elev); }
.article-body p { font-size: 17px; line-height: 1.8;
  margin: 0 0 var(--s-4); letter-spacing: .004em; }
.article-body-ja p { line-height: 1.95; }
.article-nobody { font-size: var(--fs-md) !important; }
/* description panel — the YouTube-style "about" under the body */
.article-desc { margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--line); display: flex;
  flex-direction: column; gap: var(--s-4); }
.article-desc-title { font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  margin: 0; }
.article-syn { font-size: var(--fs-md); line-height: 1.6; margin: 0; }
.article-quotes { display: flex; flex-direction: column; gap: var(--s-2);
  border-left: 2px solid var(--line-strong); padding-left: var(--s-3); }
.article-quotes .quote .en { font-size: var(--fs-md); font-style: italic;
  line-height: 1.5; }
.article-quotes .quote .ja { font-size: 12px; color: var(--muted);
  margin-top: 2px; }
.article-stats { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.article-foot { margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--line); }
.article-orig { color: var(--accent); text-decoration: none;
  font-weight: 600; }
.article-orig:hover { text-decoration: underline; }
/* PDF variant (?pdf=1): pure document — light ink, no chrome */
.article-pdf { padding: 0; }
.article-pdf .article-col { max-width: none; }
.article-pdf, .article-pdf .article-title, .article-pdf .article-body p {
  color: #1b1f24; }
.article-pdf .article-hero { max-height: 300px; border: none; }
.article-pdf-credit { font-size: 11px; color: #6a7178; margin: 0; }
.article-pdf-url { font-size: 10px; color: #9aa1a8;
  word-break: break-all; margin: 4px 0 0; }

/* article/translation block elements (server-rendered; shared classes) */
.reader-takeaways { background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--r-md); padding: var(--s-4) var(--s-4) var(--s-4) 0;
  margin-bottom: var(--s-5); }
.reader-takeaways-label { font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--accent);
  margin: 0 0 var(--s-2) var(--s-4); }
.reader-takeaways ul { margin: 0; padding-left: calc(var(--s-4) + 18px); }
.reader-takeaways li { font-size: var(--fs-df); line-height: 1.55;
  margin-bottom: 4px; }
/* rich-reader block elements (Phase D — used by the article page) */
.reader-h { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.35;
  font-weight: 700; margin: var(--s-5) 0 var(--s-2); letter-spacing: -.01em; }
.reader-list { margin: 0 0 var(--s-4); padding-left: calc(var(--s-4) + 6px); }
.reader-list li { font-size: 16px; line-height: 1.7; margin-bottom: 4px; }
.reader-figure { margin: var(--s-4) 0; }
.reader-inline-img { width: 100%; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg-elev); }
.reader-figure figcaption { font-size: var(--fs-md); color: var(--muted);
  margin-top: var(--s-2); text-align: center; font-style: italic; }
/* Claude vision read-out for charts / infographics */
.reader-img-desc { font-size: var(--fs-df); line-height: 1.6;
  color: var(--ink); background: var(--accent-soft);
  border-radius: var(--r-md); padding: var(--s-2) var(--s-3);
  margin-top: var(--s-2); }
.reader-img-desc-lab { font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.reader-blockquote { margin: var(--s-4) 0; padding: var(--s-2) var(--s-4);
  border-left: 3px solid var(--accent); color: var(--ink);
  font-size: 16px; line-height: 1.7; font-style: italic; }
.reader-table-wrap { overflow-x: auto; margin: var(--s-4) 0; }
.reader-table { border-collapse: collapse; width: 100%;
  font-size: var(--fs-df); }
.reader-table th, .reader-table td { border: 1px solid var(--line);
  padding: var(--s-2) var(--s-3); text-align: left; vertical-align: top; }
.reader-table th { background: var(--bg-elev); font-weight: 700; }
.reader-table tr:nth-child(even) td { background: var(--accent-soft); }
.reader-links { margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line); }
.reader-links-label { font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  margin-bottom: var(--s-2); }
.reader-links ul { margin: 0; padding-left: calc(var(--s-4) + 6px); }
.reader-links a { color: var(--accent); text-decoration: none;
  font-size: var(--fs-df); line-height: 1.8; word-break: break-word; }
.reader-links a:hover { text-decoration: underline; }

/* ---- modals ---- */
.modal { position: fixed; inset: 0; z-index: 60;
  background: rgba(8,10,12,.6);
  backdrop-filter: blur(2px);
  display: flex; align-items: center;
  justify-content: center; padding: var(--s-6);
  animation: modal-fade .15s ease-out; }
@keyframes modal-fade { from { opacity: 0 } to { opacity: 1 } }
.modal-card { background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); width: min(640px,100%); max-height: 88vh;
  overflow: auto; box-shadow: var(--shadow);
  animation: modal-pop .18s ease-out; }
@keyframes modal-pop {
  from { transform: translateY(6px) scale(.985); opacity: 0 }
  to   { transform: translateY(0)   scale(1);    opacity: 1 }
}
.modal-narrow { width: min(460px,100%); }
.modal-head { display: flex; justify-content: space-between;
  align-items: center;
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg-elev);
  z-index: 1; }
.modal-head h2 { font-size: var(--fs-lg); letter-spacing: -.01em; }
.modal-body { padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-7); }
.modal-body section { display: flex; flex-direction: column; gap: var(--s-2);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line); }
.modal-body section:last-child { padding-bottom: 0; border-bottom: none; }
.modal-body h3 { font-size: var(--fs-df); letter-spacing: -.005em; }
.modal-body input, .modal-body textarea, .modal-body select {
  padding: 8px var(--s-3); border: 1px solid var(--line);
  border-radius: var(--r-md);
  background-color: var(--card); color: var(--text); font-size: var(--fs-md);
  font-family: inherit; width: 100%; }
.modal-body input:focus, .modal-body textarea:focus,
.modal-body select:focus {
  outline: none; border-color: var(--line-strong);
  box-shadow: 0 0 0 3px var(--accent-soft); }
.modal-body textarea { resize: vertical; line-height: 1.5; }
.refresh-tools { display: flex; gap: var(--s-2); }
.src-list { display: flex; flex-direction: column; gap: 4px; }
.src-group { margin: var(--s-3) 0 var(--s-1);
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.src-group:first-child { margin-top: 0; }
.src-row { display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-sm);
  padding: 6px var(--s-3); border: 1px solid var(--line);
  border-radius: var(--r-md); cursor: pointer;
  background: var(--card);
  transition: border-color .15s, background .15s; }
.src-row:hover { border-color: var(--line-strong);
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--card)); }
/* checked rows get a faint amber wash so it's obvious which ones will scan */
.src-row:has(input:checked) { background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.src-row input[type="checkbox"] { width: 15px; height: 15px;
  accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
  margin: 0; }
.src-row .nm { flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500; }
.src-row .ty { color: var(--muted); font-size: 10px;
  border: 1px solid var(--line); padding: 1px 7px;
  border-radius: var(--r-pill); flex-shrink: 0; }

.toast { position: fixed; bottom: var(--s-6); left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink); color: var(--bg-elev);
  padding: 10px var(--s-5); border-radius: var(--r-pill);
  font-size: var(--fs-df); font-weight: 600;
  z-index: 80; box-shadow: var(--shadow);
  opacity: 0; transition: opacity .2s, transform .2s; }
.toast:not(.hidden) { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Optional action button inside a toast (e.g. Undo). color:inherit keeps the
   vice/glitch/garfield toast recolors legible without extra overrides. */
.toast-action { background: none; border: none; color: inherit;
  font: inherit; font-weight: 700; text-decoration: underline;
  margin-left: var(--s-3); padding: 0; cursor: pointer; }
.hidden { display: none !important; }

/* Visually hidden but exposed to assistive tech (screen-reader page heading,
   labels). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  border: 0; }

@media (max-width: 920px) {
  .layout { grid-template-columns: 1fr; }
  .filters { position: static; flex-direction: row; flex-wrap: wrap; }
  .clocks { display: none; }
  .search-wrap input { width: 160px; }
  .viewbar { flex-wrap: wrap; }
  /* Long chip sets become one horizontally-scrollable line instead of
     pushing the feed halfway down the page. */
  .filter-block { min-width: 0; max-width: 100%; }
  .chip-set { flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
}

/* Phone widths: the topbar row (brand + nav + search + buttons) can't fit
   on one line — wrap, with the search box taking a full row of its own. */
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; row-gap: var(--s-2); }
  .search-wrap { order: 9; flex: 1 1 100%; }
  .search-wrap input { width: 100%; max-width: none; }
}

/* ---- touch devices: hover doesn't exist, so the card actions must be
   visible and comfortably tappable at rest. (Also true on touch-screen
   laptops with a mouse attached — cosmetic and acceptable.) ---- */
@media (pointer: coarse) {
  .card-acts { opacity: 1; transform: none; }
  .feed.is-list .card-acts { opacity: 1; }
  .card-acts .act { width: 40px; height: 40px; font-size: 17px; }
  .feed.is-list .card-acts .act { width: 40px; height: 40px; }
  /* The hover synopsis can't be summoned by touch — never let it sit
     invisibly over the thumbnail and swallow taps. */
  .thumb-syn { pointer-events: none; }
}

/* ---- mystery keypad ---- */
.keypad-card { width: min(320px, 100%); }
.keypad-lcd { font-family: "Courier New", monospace; font-size: 30px;
  letter-spacing: 6px; text-align: center; color: #7dffb0;
  background: #0a1410; border: 2px solid #1d3a2c; border-radius: 8px;
  padding: 14px 0; margin-bottom: 16px;
  text-shadow: 0 0 8px rgba(125, 255, 176, .7);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .7); }
.keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; }
.kp { font-family: "Courier New", monospace; font-size: 20px;
  font-weight: 700; padding: 16px 0; cursor: pointer; color: #2b2b2b;
  background: linear-gradient(#efe9dc, #cfc7b2);
  border: 1px solid #b3a98c; border-radius: 8px;
  box-shadow: 0 3px 0 #9c917320, 0 4px 6px rgba(0, 0, 0, .25); }
.kp:active { transform: translateY(2px);
  box-shadow: 0 1px 0 #9c917320 inset; }
.kp-fn { background: linear-gradient(#3a3a3a, #1f1f1f); color: #ffd166;
  border-color: #111; }
.keypad-card.shake { animation: kpshake .4s; }
@keyframes kpshake { 0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-9px)} 40%,80%{transform:translateX(9px)} }

/* ---- secret VICE theme (keypad 1337) ---- */
html[data-theme="vice"] {
  --bg: #150726; --bg-elev: rgba(40, 14, 74, .62);
  --card: rgba(46, 16, 86, .55); --text: #f3e6ff; --muted: #c39bff;
  --line: rgba(255, 46, 196, .38); --line-strong: #ff2ec4;
  --ink: #ff2ec4; --accent: #ff2ec4;
  --accent-soft: rgba(0, 229, 255, .16); --accent-glow: rgba(255, 46, 196, .6);
  --ok: #7dffb0; --bad: #ff6b8a;
  --bad-bg: #5c1030; --bad-ink: #ffd7e4;
  --warn-bg: #4a3a08; --warn-ink: #ffe9a8;
  --badge-google: #7ba8f7;
  --shadow: 0 0 22px rgba(255, 46, 196, .35),
    0 10px 30px rgba(10, 0, 25, .6); --radius: 16px;
}
html[data-theme="vice"] body { background: #150726; }
html[data-theme="vice"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle at 50% 78%, #ff8a3d 0 6%,
      rgba(255, 90, 160, .55) 14%, transparent 32%),
    linear-gradient(180deg, #2a0a4d 0%, #6d1466 38%, #b3186e 56%,
      #ff5aa0 70%, #1a0730 71%, #0a0420 100%);
}
/* synthwave horizon grid on the lower half */
html[data-theme="vice"] body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 46vh;
  z-index: -1; pointer-events: none; opacity: .55;
  background:
    repeating-linear-gradient(transparent, transparent 38px,
      rgba(0, 229, 255, .7) 39px, transparent 40px),
    repeating-linear-gradient(90deg, transparent, transparent 38px,
      rgba(0, 229, 255, .55) 39px, transparent 40px);
  transform: perspective(280px) rotateX(62deg); transform-origin: bottom;
  animation: vgrid 1.1s linear infinite;
}
@keyframes vgrid { to { background-position: 0 40px, 0 0; } }
html[data-theme="vice"] .topbar {
  background: linear-gradient(90deg, rgba(108,20,102,.6),
    rgba(255,46,196,.35), rgba(0,229,255,.3));
  border-bottom-color: var(--line-strong);
  backdrop-filter: blur(8px) saturate(1.5); }
html[data-theme="vice"] .card {
  backdrop-filter: blur(7px) saturate(1.4);
  box-shadow: 0 0 14px rgba(255,46,196,.28),
    inset 0 0 0 1px rgba(0,229,255,.18); }
html[data-theme="vice"] .card:hover {
  box-shadow: 0 0 26px rgba(255,46,196,.55),
    inset 0 0 0 1px rgba(0,229,255,.4); }
html[data-theme="vice"] .btn,
html[data-theme="vice"] .badge,
html[data-theme="vice"] .ctype,
html[data-theme="vice"] .tag {
  box-shadow: 0 0 9px rgba(255,46,196,.5); }
html[data-theme="vice"] h1,
html[data-theme="vice"] .card h3 {
  text-shadow: 0 0 9px rgba(0,229,255,.7); }
html[data-theme="vice"] .toast {
  background: linear-gradient(90deg, #ff2ec4, #00e5ff); color: #150726;
  box-shadow: 0 0 22px rgba(255,46,196,.7); }
/* sparkle layer */
html[data-theme="vice"] .feed::before {
  content: ""; position: fixed; inset: 0 0 40vh 0; z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 72% 12%, #b3f7ff, transparent),
    radial-gradient(1.2px 1.2px at 40% 30%, #ffd1f3, transparent),
    radial-gradient(1.5px 1.5px at 88% 26%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 26% 8%, #9bf, transparent);
  animation: twinkle 2.4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .35 } to { opacity: 1 } }

/* ---- secret GLITCH theme (keypad 6666) ---- */
html[data-theme="glitch"] {
  --bg: #050505; --bg-elev: rgba(10, 10, 10, .9);
  --card: rgba(15, 15, 15, .88); --text: #f0f0f0; --muted: #888;
  --line: rgba(255, 0, 170, .55); --line-strong: #00ff66;
  --ink: #00ff66; --accent: #ff00aa;
  --accent-soft: rgba(0, 255, 102, .18);
  --accent-glow: rgba(255, 0, 170, .6);
  --ok: #00ff66; --bad: #ff3366;
  --bad-bg: #33000f; --bad-ink: #ffb3c6;
  --warn-bg: #332b00; --warn-ink: #ffee88;
  --badge-google: #7ba8f7;
  --shadow: 0 0 16px rgba(0, 255, 102, .35),
    0 0 32px rgba(255, 0, 170, .25); --radius: 6px;
}
html[data-theme="glitch"] body {
  background: #050505;
  animation: gjit 1.7s steps(8, end) infinite;
}
@keyframes gjit {
  0%,90%,100% { transform: translate3d(0,0,0); filter: none; }
  91% { transform: translate3d(-2px,0,0); filter: hue-rotate(40deg); }
  93% { transform: translate3d(3px,1px,0); filter: hue-rotate(-30deg); }
  95% { transform: translate3d(-1px,-1px,0); filter: invert(.05); }
  97% { transform: translate3d(2px,0,0); filter: hue-rotate(80deg); }
}
/* scanlines + chromatic noise */
html[data-theme="glitch"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    radial-gradient(800px circle at 30% 20%,
      rgba(255,0,170,.07), transparent 60%),
    radial-gradient(700px circle at 75% 80%,
      rgba(0,255,102,.07), transparent 60%);
}
/* random glitch bar that jumps */
html[data-theme="glitch"] body::after {
  content: ""; position: fixed; left: 0; right: 0; height: 14px;
  z-index: -1; pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(0,255,255,.35), rgba(255,0,170,.45),
    rgba(0,255,102,.35), transparent);
  mix-blend-mode: screen;
  animation: gbar 2.1s steps(1, end) infinite;
}
@keyframes gbar {
  0%   { top: 18%; opacity: .9; transform: scaleY(2); }
  10%  { top: 18%; opacity: 0; }
  22%  { top: 64%; opacity: .8; transform: scaleY(1); }
  30%  { top: 64%; opacity: 0; }
  44%  { top: 41%; opacity: .85; transform: scaleY(3); }
  52%  { top: 41%; opacity: 0; }
  70%  { top: 82%; opacity: .8; transform: scaleY(1); }
  78%  { top: 82%; opacity: 0; }
  92%  { top: 7%;  opacity: .9; transform: scaleY(2); }
  100% { top: 7%;  opacity: 0; }
}
/* RGB-split text + jittery cards */
html[data-theme="glitch"] h1,
html[data-theme="glitch"] .card h3,
html[data-theme="glitch"] .badge,
html[data-theme="glitch"] .ctype {
  text-shadow: 2px 0 rgba(255,0,170,.85),
    -2px 0 rgba(0,255,255,.85);
  animation: gtext 2.6s steps(20, end) infinite;
}
@keyframes gtext {
  0%,88%,100% { text-shadow: 2px 0 rgba(255,0,170,.85),
                              -2px 0 rgba(0,255,255,.85); }
  90% { text-shadow: 4px 1px rgba(255,0,170,1),
                     -4px -1px rgba(0,255,255,1); }
  94% { text-shadow: -3px 0 rgba(0,255,102,1),
                     3px 0 rgba(255,0,170,1); }
}
html[data-theme="glitch"] .topbar {
  background: rgba(5,5,5,.85);
  border-bottom: 1px solid var(--line-strong);
  animation: ghue 3.3s steps(6, end) infinite;
}
@keyframes ghue {
  0%,100% { filter: none; }
  40%     { filter: hue-rotate(35deg) saturate(1.4); }
  60%     { filter: hue-rotate(-25deg) saturate(1.5); }
  80%     { filter: invert(.04) hue-rotate(60deg); }
}
html[data-theme="glitch"] .card {
  border: 1px solid var(--line);
  box-shadow: -3px 0 0 rgba(255,0,170,.25),
              3px 0 0 rgba(0,255,255,.25),
              0 0 14px rgba(0,255,102,.18);
  animation: gcard 4.7s steps(40, end) infinite;
}
@keyframes gcard {
  0%,93%,100% { transform: none; }
  94% { transform: translate3d(-2px,0,0); }
  96% { transform: translate3d(2px,1px,0); }
}
html[data-theme="glitch"] .card:hover {
  border-color: var(--line-strong);
  box-shadow: -3px 0 0 rgba(255,0,170,.55),
              3px 0 0 rgba(0,255,255,.55),
              0 0 22px rgba(0,255,102,.4);
}
html[data-theme="glitch"] .toast {
  background: #000; color: #00ff66;
  border: 1px solid #ff00aa; font-family: "Courier New", monospace;
  text-shadow: 2px 0 #ff00aa, -2px 0 #00ffff;
  box-shadow: 0 0 18px rgba(0,255,102,.6); }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="glitch"] body,
  html[data-theme="glitch"] body::after,
  html[data-theme="glitch"] .topbar,
  html[data-theme="glitch"] .card,
  html[data-theme="glitch"] h1,
  html[data-theme="glitch"] .card h3,
  html[data-theme="glitch"] .badge,
  html[data-theme="glitch"] .ctype { animation: none; }
}

/* ---- secret GARFIELD theme (keypad 1978) — warm orange + black-stripe
   homage; the animated cats/lasagna live in #gf-layer, built by JS ---- */
html[data-theme="garfield"] {
  --bg: #fff3da; --bg-elev: #fffaf0; --card: #fffdf7;
  --text: #3a2914; --muted: #9b7c4c; --line: #f0d6a0;
  --line-strong: #e3b85f; --ink: #5a3d1d;
  --accent: #ef8a17;                       /* Garfield orange */
  --accent-soft: rgba(239, 138, 23, .14);
  --accent-glow: rgba(239, 138, 23, .42);
  --rate-ai: #5b86c4;                      /* keep AI-guess distinct */
  --shadow: 0 1px 2px rgba(120, 70, 10, .08),
    0 12px 28px rgba(120, 70, 10, .14);
}
/* faint diagonal tiger-stripe wash on the page */
html[data-theme="garfield"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    repeating-linear-gradient(48deg,
      rgba(58, 41, 20, .045) 0 14px, transparent 14px 46px),
    radial-gradient(900px circle at 80% 0,
      rgba(239, 138, 23, .10), transparent 60%);
}
html[data-theme="garfield"] .topbar {
  background: linear-gradient(90deg,
    rgba(239, 138, 23, .22), rgba(255, 209, 122, .35));
  border-bottom-color: var(--line-strong); }
html[data-theme="garfield"] .card:hover {
  box-shadow: 0 0 0 1px var(--accent-soft),
    0 10px 26px -6px var(--accent-glow); }
html[data-theme="garfield"] .toast {
  background: linear-gradient(90deg, #ef8a17, #ffb43d);
  color: #3a2914; box-shadow: 0 0 22px rgba(239, 138, 23, .5);
  font-weight: 700; }

/* --- animated layer (cats / lasagna / pop-ups); click-through --- */
#gf-layer { position: fixed; inset: 0; z-index: 40;
  pointer-events: none; overflow: hidden; }
#gf-layer .gf-cat { position: absolute; top: 0; left: 0; line-height: 1;
  user-select: none; filter: drop-shadow(0 4px 5px rgba(120, 70, 10, .3)); }
#gf-layer .gf-walk { position: absolute; left: 0; line-height: 1;
  font-size: 40px; animation: gf-walk-x linear forwards;
  filter: drop-shadow(0 4px 5px rgba(120, 70, 10, .3)); }
#gf-layer .gf-walk span { display: inline-block;
  animation: gf-bob .5s ease-in-out infinite; }
#gf-layer .gf-pop { position: absolute; display: flex;
  flex-direction: column; align-items: center; gap: 2px;
  font-size: 22px; font-weight: 800; color: #b5520a;
  text-shadow: 0 2px 0 #ffd591; animation: gf-pop 3s ease forwards; }
#gf-layer .gf-pop .em { font-size: 48px; }
#gf-layer .gf-fall { position: absolute; top: -48px; line-height: 1;
  animation: gf-fall linear forwards; }
@keyframes gf-walk-x {
  from { transform: translateX(-14vw); }
  to   { transform: translateX(114vw); } }
@keyframes gf-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); } }
@keyframes gf-pop {
  0%   { opacity: 0; transform: scale(.4) rotate(-8deg); }
  15%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
  30%  { transform: scale(1) rotate(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-34px) scale(.92); } }
@keyframes gf-fall {
  to { transform: translateY(112vh) rotate(360deg); opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
  #gf-layer .gf-pop { animation-duration: 4.5s; }
}

/* ---- brief-mode article summary (free/paid readers): the AI summary is
   the article they get, so it reads large and leads the page. ---- */
.brief-summary { margin: var(--s-6) 0 var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg); }
.brief-summary-label { font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--s-3); }
.brief-summary-text { font-size: clamp(17px, 2vw, 20px); line-height: 1.65;
  font-weight: 500; color: var(--text); margin: 0 0 var(--s-4); }

/* Key points — the richer briefing's bullet list (2.5; only on new rows) */
.brief-takeaways { margin: 0 0 var(--s-4); }
.brief-takeaways-label { font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--s-2); }
.brief-takeaways ul { margin: 0; padding-left: 22px; }
.brief-takeaways li { font-size: var(--fs-md); line-height: 1.6;
  margin: 5px 0; color: var(--text); }
.brief-free-note { margin: var(--s-3) 0 0; font-size: var(--fs-sm);
  color: var(--muted); }
.brief-free-note a { color: var(--accent); font-weight: 600; }

/* brief-view section labels ("What they said" / "The numbers") */
.article-sub-label { font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin: var(--s-4) 0 var(--s-2); }

/* Free-tier upgrade band on every free article view — matcha, like /join */
.article-upgrade { display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap; margin: var(--s-5) 0;
  padding: var(--s-5) var(--s-5);
  background: linear-gradient(135deg, #4b6b43, #3a5533);
  border-radius: var(--r-lg); color: #fff; }
.article-upgrade-copy { flex: 1 1 320px; display: flex;
  flex-direction: column; gap: 4px; }
.article-upgrade-copy b { font-size: var(--fs-lg); }
.article-upgrade-copy span { color: rgba(255,255,255,.85);
  font-size: var(--fs-md); line-height: 1.5; }
.article-upgrade-btn { background: #fff !important;
  border-color: #fff !important; color: #3a5533 !important;
  white-space: nowrap; }
.article-upgrade-btn:hover { background: rgba(255,255,255,.9) !important; }

/* ---- website tiers: locked cards (free tier) ---- */
.card-locked { cursor: pointer; }
.card-locked .thumb { opacity: .85; }
/* Blur the real thumbnail for the locked effect; scale up so the blur has
   no soft transparent edge, and clip to the thumb. */
.locked-blur { filter: blur(14px); transform: scale(1.15); }
.card-locked .thumb { overflow: hidden; }
.card-locked .title { color: var(--muted); }
.locked-lines { display: flex; flex-direction: column; gap: 6px;
  padding: 0 2px 4px; }
.locked-lines span { height: 10px; border-radius: 5px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  filter: blur(2px); }
.locked-lines span:nth-child(2) { width: 85%; }
.locked-lines span:nth-child(3) { width: 60%; }

/* ---- website tiers: god-only chrome hidden below god (server-rendered
   data-role on <body> means zero flicker — no button ever flashes then
   disappears). Read-only controls (search, filters, layout, view tabs)
   stay visible to every tier; only mutating/admin buttons are god-only. */
body:not([data-role="god"]) .god-only { display: none !important; }

/* ---- account menu (topbar) ---- */
.account { position: relative; }
.account-btn { display: inline-flex; align-items: center; gap: var(--s-2);
  max-width: 220px; }
.account-email { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 130px; color: var(--muted);
  font-weight: 600; }
.account-role { font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent); }
.account-role.role-god { background: color-mix(in srgb, #d9a441 22%, transparent);
  color: #b5822a; }
.account-caret { font-size: 9px; color: var(--muted); }
.account-menu { position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow); padding: var(--s-2);
  z-index: 90; }
.account-menu-email { padding: var(--s-2) var(--s-3); font-size: var(--fs-sm);
  color: var(--muted); border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-1); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.account-menu-item { display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--text); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); }
.account-menu-item:hover { background: var(--accent-soft); }
/* On phone widths the topbar wraps and the account button sits on the left,
   so a right-aligned menu would clip off-screen — align it left there. */
@media (max-width: 560px) {
  .account-menu { right: auto; left: 0; }
}

/* ---- login page: branded matcha card ---- */
.login-page { display: grid; place-items: center; min-height: 82vh;
  padding: 8vh var(--s-5); }
.login-card { width: min(380px, 100%); display: flex;
  flex-direction: column; gap: var(--s-4); align-items: stretch;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-7) var(--s-6);
  box-shadow: var(--shadow); }
.login-brand { display: flex; flex-direction: column; align-items: center;
  gap: var(--s-2); margin-bottom: var(--s-2); }
.login-brand img { width: 52px; height: 52px; border-radius: 14px; }
.login-brand .login-name { font-family: var(--serif, Georgia, serif);
  font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; }
.login-brand .login-sub { font-size: var(--fs-sm); color: var(--muted);
  text-align: center; }
.login-card h1 { display: none; }
.login-card input { padding: 11px var(--s-4); font-size: var(--fs-df);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--text); }
.login-card input:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft); }
.login-card .btn { margin-top: var(--s-1); padding: 11px; }
.login-status { min-height: 18px; text-align: center; font-size: var(--fs-sm); }
.login-foot { text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.login-foot a { color: var(--accent); }

/* ================================================================== */
/* Landing / sales page (/join) — its own scoped design system.       */
/* ================================================================== */
.lp { --matcha: #4b6b43; --matcha-deep: #3a5533;
  --lp-cream: var(--bg); --lp-ink: var(--ink);
  max-width: 1120px; margin: 0 auto; padding: 0 var(--s-5);
  font-family: var(--font-body); color: var(--text); }
.lp a { color: var(--matcha-deep); }
.lp .btn-primary { background: var(--matcha); border-color: var(--matcha);
  color: #fff; }
.lp .btn-primary:hover { background: var(--matcha-deep);
  border-color: var(--matcha-deep); }
/* Dark themes: the fixed dark-green accent TEXT (links, eyebrow, price name,
   highlight) drops below AA on the dark bg. Lift just the text colors to a
   lighter green — the token itself stays for button/border FILLS (which keep
   #fff-on-green contrast). .lp-final sits on a fixed dark photo, so its links
   stay white regardless of theme. */
html[data-theme="dark"] .lp a:not(.btn),
html[data-theme="vice"] .lp a:not(.btn),
html[data-theme="glitch"] .lp a:not(.btn),
html[data-theme="dark"] .lp-eyebrow,
html[data-theme="vice"] .lp-eyebrow,
html[data-theme="glitch"] .lp-eyebrow,
html[data-theme="dark"] .lp-hl,
html[data-theme="vice"] .lp-hl,
html[data-theme="glitch"] .lp-hl,
html[data-theme="dark"] .lp-mock-badge,
html[data-theme="vice"] .lp-mock-badge,
html[data-theme="glitch"] .lp-mock-badge,
html[data-theme="dark"] .lp-price-name,
html[data-theme="vice"] .lp-price-name,
html[data-theme="glitch"] .lp-price-name { color: #8fbf7d; }
html[data-theme="dark"] .lp-final a,
html[data-theme="vice"] .lp-final a,
html[data-theme="glitch"] .lp-final a,
html[data-theme="dark"] .lp-final .lp-microcopy a,
html[data-theme="vice"] .lp-final .lp-microcopy a,
html[data-theme="glitch"] .lp-final .lp-microcopy a { color: #fff; }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .lp a:not(.btn),
  html[data-theme="system"] .lp-eyebrow,
  html[data-theme="system"] .lp-hl,
  html[data-theme="system"] .lp-mock-badge,
  html[data-theme="system"] .lp-price-name { color: #8fbf7d; }
  html[data-theme="system"] .lp-final a,
  html[data-theme="system"] .lp-final .lp-microcopy a { color: #fff; }
}

/* nav */
.lp-nav { display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) 0; }
.lp-brand { display: flex; align-items: center; gap: var(--s-2);
  text-decoration: none; color: var(--text); }
.lp-brand img { width: 34px; height: 34px; border-radius: 9px; }
.lp-brand span { font-family: var(--font-display); font-size: 20px;
  font-weight: 700; }
.lp-nav-links { display: flex; align-items: center; gap: var(--s-5); }
.lp-nav-links a { text-decoration: none; font-weight: 600;
  font-size: var(--fs-df); color: var(--muted); }
.lp-nav-links a:hover { color: var(--text); }
.lp-nav-links .btn-primary { color: #fff; }

/* hero */
.lp-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-7);
  align-items: center; padding: clamp(var(--s-6), 6vw, 96px) 0 var(--s-7); }
.lp-eyebrow { text-transform: uppercase; letter-spacing: .12em;
  font-size: 12px; font-weight: 800; color: var(--matcha);
  margin-bottom: var(--s-3); }
.lp-hero h1 { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 5.2vw, 60px); line-height: 1.06;
  letter-spacing: -.02em; margin: 0 0 var(--s-4); }
.lp-hl { color: var(--matcha); display: block; }
.lp-sub { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6;
  color: var(--muted); max-width: 34em; margin: 0 0 var(--s-5); }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-bottom: var(--s-3); }
.lp-cta { padding: 13px 26px; font-size: var(--fs-lg); font-weight: 700; }
.lp-microcopy { font-size: var(--fs-sm); color: var(--muted); }

/* hero mock */
.lp-hero-art { display: flex; justify-content: center; }
.lp-mock { display: flex; flex-direction: column; gap: var(--s-3);
  width: 100%; max-width: 360px; transform: rotate(1.2deg); }
.lp-mock-card { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-4);
  box-shadow: 0 18px 40px rgba(58,47,26,.10); }
.lp-mock-badge { display: inline-block; font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; color: var(--matcha); background: rgba(75,107,67,.12);
  padding: 2px 7px; border-radius: var(--r-pill); margin-bottom: var(--s-3); }
.lp-mock-badge.sci { color: #6b5aa8; background: rgba(107,90,168,.12); }
.lp-mock-line { height: 11px; border-radius: 5px; background: var(--line-strong);
  margin-bottom: 7px; }
.lp-mock-line.w90 { width: 90%; } .lp-mock-line.w80 { width: 80%; }
.lp-mock-line.w70 { width: 70%; } .lp-mock-line.w60 { width: 60%; }
.lp-mock-line.w50 { width: 50%; } .lp-mock-line.w40 { width: 40%; }
.lp-mock-line.blur { filter: blur(3px); }
.lp-mock-sum { font-size: 13px; line-height: 1.5; color: var(--muted);
  margin-top: var(--s-2); }
.lp-mock-locked { position: relative; }
.lp-mock-lock { position: absolute; top: var(--s-4); right: var(--s-4);
  font-size: 15px; }

/* trust bar */
.lp-trust { display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-4) var(--s-7); padding: var(--s-5) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: var(--fs-df); }
.lp-trust b { color: var(--text); }

/* generic section */
.lp-section-title { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.015em;
  text-align: center; margin: 0 0 var(--s-6); }
.lp section { padding: clamp(var(--s-6), 6vw, 84px) 0; }

.lp-problem { text-align: center; max-width: 780px; margin: 0 auto; }
.lp-problem h2 { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.25;
  letter-spacing: -.015em; margin: 0 0 var(--s-4); }
.lp-problem p { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.65;
  color: var(--muted); }

/* how it works */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5); }
.lp-step { text-align: center; }
.lp-step-n { width: 46px; height: 46px; margin: 0 auto var(--s-3);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--matcha); color: #fff; font-weight: 800; font-size: 19px; }
.lp-step h3 { font-family: var(--font-display); font-size: 20px;
  margin: 0 0 var(--s-2); }
.lp-step p { color: var(--muted); line-height: 1.6; font-size: var(--fs-lg); }

/* benefits grid */
.lp-benefits { background: var(--bg-elev);
  border-radius: var(--r-lg); padding: clamp(var(--s-6),5vw,72px) var(--s-6); }
.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5); }
.lp-benefit { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5); }
.lp-benefit-ic { font-size: 26px; margin-bottom: var(--s-3); }
.lp-benefit h3 { font-family: var(--font-display); font-size: 19px;
  margin: 0 0 var(--s-2); }
.lp-benefit p { color: var(--muted); line-height: 1.6; font-size: var(--fs-df); }

/* pricing */
.lp-price-cards { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5); max-width: 760px; margin: 0 auto; align-items: start; }
.lp-price-card { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6); }
.lp-price-featured { border: 2px solid var(--matcha); position: relative;
  box-shadow: 0 20px 44px rgba(58,47,26,.10); }
.lp-price-ribbon { position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%); background: var(--matcha); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 14px; border-radius: var(--r-pill); white-space: nowrap; }
.lp-price-name { font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; font-size: 12px; margin-bottom: var(--s-2); }
.lp-price-amt { font-family: var(--font-display); font-size: 46px;
  font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--s-4); }
.lp-price-amt span { font-size: 17px; color: var(--muted); font-weight: 600;
  font-family: var(--font-body); }
.lp-price-feats { list-style: none; padding: 0; margin: 0 0 var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2); }
.lp-price-feats li { padding-left: 26px; position: relative; line-height: 1.5;
  color: var(--text); }
.lp-price-feats li::before { content: "✓"; position: absolute; left: 0;
  color: var(--matcha); font-weight: 800; }
.lp-price-foot { text-align: center; margin-top: var(--s-3);
  font-size: var(--fs-sm); color: var(--muted); }

/* faq */
.lp-faq-list { max-width: 760px; margin: 0 auto; display: flex;
  flex-direction: column; gap: var(--s-4); }
.lp-faq-item { border-bottom: 1px solid var(--line); padding-bottom: var(--s-4); }
.lp-faq-item h3 { font-family: var(--font-display); font-size: 19px;
  margin: 0 0 var(--s-2); }
.lp-faq-item p { color: var(--muted); line-height: 1.6; }

/* farm photo band — Ooika's own photos from Hoshino/Yame/Oishi visits.
   One wide hero shot + three uprights; heights equalize via object-fit. */
.lp-photos { margin: var(--s-6) 0; }
.lp-photo-grid { display: grid; gap: var(--s-3);
  grid-template-columns: 2fr 1fr 1fr 1fr; }
.lp-photo { margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-elev); }
.lp-photo img { display: block; width: 100%; height: 260px;
  object-fit: cover; }
.lp-photo-cap { text-align: center; color: var(--muted);
  font-size: var(--fs-sm); margin: var(--s-3) 0 0; }
@media (max-width: 820px) {
  .lp-photo-grid { grid-template-columns: 1fr 1fr; }
  .lp-photo-wide { grid-column: 1 / -1; }
  .lp-photo img { height: 200px; }
}

/* final cta — Marc's own sencha-cup photo under a deep-matcha wash keeps
   the white copy readable while grounding the pitch in the real thing. */
.lp-final { text-align: center;
  background:
    linear-gradient(rgba(26, 36, 22, .84), rgba(26, 36, 22, .90)),
    url("/static/img/farms/sencha-cup.jpg") center 35% / cover no-repeat,
    var(--matcha-deep);
  color: #fff; border-radius: var(--r-lg);
  padding: clamp(var(--s-6),6vw,80px) var(--s-5); margin: var(--s-6) 0; }
.lp-final h2 { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4vw, 44px); margin: 0 0 var(--s-3); }
.lp-final p { color: rgba(255,255,255,.82); font-size: var(--fs-lg);
  margin: 0 0 var(--s-5); }
.lp-final .lp-microcopy { color: rgba(255,255,255,.72); margin-top: var(--s-4); }
.lp-final .lp-microcopy a, .lp-final a { color: #fff; text-decoration: underline; }
.lp-final .btn-primary { background: #fff; border-color: #fff;
  color: var(--matcha-deep); }
.lp-final .btn-primary:hover { background: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.9); }

/* footer */
.lp-foot { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s-3); padding: var(--s-6) 0; border-top: 1px solid var(--line);
  color: var(--muted); font-size: var(--fs-sm); }
.lp-foot-links a { color: var(--muted); text-decoration: none; }
.lp-foot-links a:hover { color: var(--text); }

@media (max-width: 860px) {
  .lp-hero { grid-template-columns: 1fr; gap: var(--s-6); }
  .lp-hero-art { order: -1; }
  .lp-steps, .lp-grid { grid-template-columns: 1fr; }
  .lp-price-cards { grid-template-columns: 1fr; }
  /* Hide only the redundant "Browse free" (mirrors the hero CTA); keep
     "Sign in" so a returning subscriber has a top-of-page entry on mobile. */
  .lp-nav-links a:not(.btn):first-child { display: none; }
}
.article-locked-cta { display: flex; gap: var(--s-3); justify-content: center;
  margin-top: var(--s-4); flex-wrap: wrap; }

/* ================================================================== */
/* Ooika content + shop ad cards                                      */
/* ================================================================== */
/* OOIKA badge — on cards and the article meta row */
.ooika-chip, .ooika-badge { font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; color: #fff; background: #4b6b43;
  padding: 2px 7px; border-radius: var(--r-pill); white-space: nowrap; }
.thumb .ooika-chip { position: absolute; top: var(--s-2); left: var(--s-2);
  z-index: 2; }
.ooika-badge { margin-left: 2px; vertical-align: middle; }

/* Shop ad card — clearly marked, free tier only */
.card-ad { cursor: pointer; }
.card-ad .thumb { background: var(--bg-elev); }
.card-ad .thumb-img { object-fit: contain; padding: 6px; }
.ad-label { position: absolute; top: var(--s-2); left: var(--s-2); z-index: 2;
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: #fff;
  background: rgba(20, 16, 8, .6); backdrop-filter: blur(4px);
  padding: 2px 8px; border-radius: var(--r-pill); }
.card-ad .card-src { color: var(--accent); font-weight: 700; }
.ad-price { font-weight: 700; color: var(--text); margin-left: auto; }

/* Legal pages (Terms, Privacy) — a plain, readable long-form document. */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 24px 72px; }
.legal-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.legal-nav .brand-logo { width: 30px; height: 30px; border-radius: 7px; }
.legal-nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.legal-nav a:hover { color: var(--text); }
.legal-nav .legal-home { margin-left: auto; }
.legal h1 { font-size: 30px; margin: 0 0 6px; }
.legal .legal-meta { color: var(--muted); font-size: 13.5px; margin: 0 0 8px; }
.legal h2 { font-size: 18px; margin: 30px 0 8px; }
.legal p, .legal li { color: var(--ink, var(--text)); line-height: 1.65;
  font-size: 15px; }
.legal ul { padding-left: 22px; }
.legal li { margin: 5px 0; }
.legal a { color: var(--accent); }
.legal .legal-foot { margin-top: 40px; padding-top: 18px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.legal .legal-foot a { color: var(--accent); }

/* Email-verification banner — non-blocking, subscribers only. */
.verify-banner { display: flex; align-items: center; gap: 12px;
  padding: 9px 18px; background: var(--warn-bg, #f6c453);
  color: var(--warn-ink); font-size: 14px; font-weight: 500; }
.verify-banner span { flex: 1; }
.verify-banner .btn { color: var(--warn-ink); border-color: currentColor; }
.verify-banner .btn:hover {
  background: color-mix(in srgb, var(--warn-ink) 10%, transparent); }