/* ============================================================= *
 *  kweb wikify — editorial dark UI
 *  Layout + typography led. Hairlines, not boxes.
 * ============================================================= */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 620;
  font-display: swap;
  font-style: normal;
}

:root {
  /* type + spacing — theme-independent */
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif, 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'DejaVu Sans', 'Segoe UI Symbol', 'Apple Symbols';
  --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif, 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'DejaVu Sans', 'Segoe UI Symbol', 'Apple Symbols';
  /* A symbol fallback at the END of every stack. The UI leans on glyphs like ✦ ☰ ◇ ⇩,
     and a browser only reaches fonts that are actually IN the stack — on Linux the
     preferred faces carry none of them, so without this the browser falls back to
     whatever it likes and some render as empty boxes. DejaVu is on every Linux desktop;
     the Noto and Apple faces cover macOS, Windows and Android. */
  --sym: 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'DejaVu Sans', 'Segoe UI Symbol', 'Apple Symbols';
  --mono:  'JetBrains Mono', 'Fira Mono', ui-monospace, Menlo, monospace, var(--sym);
  --pad: clamp(18px, 5vw, 30px);

  /* DARK is the base (auto on a dark device, or forced) */
  color-scheme: dark;
  --bg:        #0b0b14;
  --bg-lift:   #12121e;
  --ink:       #ece9e4;   /* warm off-white for reading */
  --ink-dim:   #9997a6;
  --ink-faint: #5f5d6e;
  --ink-rgb:   236, 233, 228;
  --bg-rgb:    11, 11, 20;
  --line:      rgba(236, 233, 228, .09);
  --line-soft: rgba(236, 233, 228, .05);
  --cyan:      #63e6d3;
  --purple:    #b39dfb;
  --amber:     #e6b17e;
  --green:     #7fd88f;
}
/* LIGHT — device preference (auto) unless the user forced dark */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:        #f6f3ec;
    --bg-lift:   #efeae0;
    --ink:       #1b1b24;
    --ink-dim:   #5c5a6b;
    --ink-faint: #8f8d9e;
    --ink-rgb:   27, 27, 36;
    --bg-rgb:    246, 243, 236;
    --line:      rgba(20, 18, 40, .13);
    --line-soft: rgba(20, 18, 40, .07);
    --cyan:      #0f8576;
    --purple:    #6a4fce;
    --amber:     #a2622a;
    --green:     #3f9350;
  }
}
/* LIGHT — forced (wins even on a dark device) */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-rgb:    246, 243, 236;
  --bg:        #f6f3ec;
  --bg-lift:   #efeae0;
  --ink:       #1b1b24;
  --ink-dim:   #5c5a6b;
  --ink-faint: #8f8d9e;
  --ink-rgb:   27, 27, 36;
  --line:      rgba(20, 18, 40, .13);
  --line-soft: rgba(20, 18, 40, .07);
  --cyan:      #0f8576;
  --purple:    #6a4fce;
  --amber:     #a2622a;
  --green:     #3f9350;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100dvh;
  padding-bottom: 92px;
  overflow-x: hidden; /* nothing should scroll the page sideways on a phone */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* subtle top-of-page glow — depth without a box */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 320px;
  background: radial-gradient(120% 100% at 50% -40%, rgba(99, 230, 211, .07), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- type helpers ---------- */
.serif { font-family: var(--serif); font-optical-sizing: auto; }
.quiet { color: var(--ink-dim); }
.label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* section header: a quiet label with a hairline reaching across */
.section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 12px;
}
.section-head .label { flex: none; }
.section-head .rule { flex: 1; height: 1px; background: var(--line-soft); }
.section-head .acts { display: flex; gap: 12px; flex: none; }
.section-head .act {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
}
.section-head .act:hover { color: var(--cyan); }
.section-head .act + .act { margin-left: 10px; }

/* ---------- top bar ---------- */
#topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px var(--pad) 14px;
  background: var(--bg);
}
#back {
  appearance: none;
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px 4px 0;
  transition: color .15s, transform .15s;
}
#back:hover { color: var(--ink); transform: translateX(-2px); }
#brand {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink-dim);
}
#brand b { color: var(--ink); font-weight: 600; letter-spacing: .01em; }
#brand .brand-sub { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-left: 4px; }
.star { color: var(--amber); }
#brand .mark { width: 20px; height: 20px; vertical-align: -4px; margin-right: 2px; }
/* compact "now playing" identity that replaces the brand while a show is playing */
#topbar-np { display: flex; align-items: center; gap: 9px; min-width: 0; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
#topbar-np[hidden] { display: none; }
#tnp-art { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; background: var(--bg-lift); flex: none; }
#tnp-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
#tnp-feed { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tnp-title { font-family: var(--serif); font-optical-sizing: auto; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#topbar-np:hover #tnp-title { color: var(--cyan); }
/* focus mode: playing collapses the big episode header so the knowledge fills the screen */
.np-collapsed #np-head, .np-collapsed #np-desc { display: none; }
#topbar-sub {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

button { font-family: var(--mono); }

.view {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 4px var(--pad) 40px;
  animation: viewIn .4s cubic-bezier(.2, .7, .3, 1);
}
/* opacity-only (no transform) so it never creates a containing block that would break
   the sticky globe/timeline HUD inside the view */
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }

.intro {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(19px, 5.2vw, 24px);
  font-weight: 380;
  line-height: 1.34;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 14px 0 30px;
  max-width: 30ch;
}
.intro em { font-style: italic; color: var(--cyan); }

/* ---------- feeds index ---------- */
.list { display: flex; flex-direction: column; }

.feed-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  cursor: pointer;
  transition: opacity .15s;
}
.feed-card:first-child { border-top: none; }
.feed-card:hover { opacity: .72; }
/* left column = logo width: artwork, then ★ and follow stacked under it */
.feed-card .fc-left { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 9px; width: 58px; }
.feed-card img {
  width: 58px; height: 58px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-lift);
}
/* right column takes the whole rest of the width */
.feed-card .fc-right { min-width: 0; }
.feed-card h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 20px;
  font-weight: 480;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.feed-card .author {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 4px 0 8px;
}
.feed-card .tagline { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }

/* compact artwork grid for shows you follow — cover-forward, no descriptions */
.feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px 12px; margin: 6px 0 10px; }
.feed-tile { display: flex; flex-direction: column; gap: 7px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit; }
.ft-art { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg-lift); box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }
.ft-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.feed-tile:hover .ft-art img { transform: scale(1.04); }
.ft-badge { position: absolute; top: 6px; right: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--cyan); background: rgba(11, 11, 20, .72); backdrop-filter: blur(6px); padding: 2px 6px; border-radius: 999px; }
.ft-title { font-family: var(--serif); font-optical-sizing: auto; font-size: 14px; line-height: 1.2; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* coverage meter: one bar, cyan = knowledge layer, green = transcribed */
.cov-meter { margin-top: 9px; max-width: 320px; }
.cov-bar { height: 4px; border-radius: 3px; background: var(--line-soft); overflow: hidden; display: flex; }
.cov-bar .cov-l { background: var(--cyan); height: 100%; }
.cov-bar .cov-t { background: color-mix(in srgb, var(--green, #7fd88f) 78%, transparent); height: 100%; }
.cov-nums { font-family: var(--mono); font-size: 10px; letter-spacing: .02em; color: var(--ink-faint); margin-top: 4px; }
.cov-nums b { font-weight: 400; }
.cov-nums b.l { color: var(--cyan); }
.cov-nums b.t { color: var(--green, #7fd88f); }

/* admin health line */
.admin-health { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-dim); margin-top: 14px; }
.admin-health:empty { display: none; }
.ah-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ah-dot.up { background: #7fd88f; box-shadow: 0 0 6px #7fd88f88; }
.ah-dot.down { background: #e6737e; }
.ah-err { color: var(--amber); }

/* source attribution on an article card */
.k-attr { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 10px; }
.k-attr[hidden] { display: none; }
/* credits line in Settings › about */
#set-credits-note { font-size: 11.5px; line-height: 1.55; color: var(--ink-faint); margin: 12px 0 4px; }
#set-credits-note a { color: var(--ink-dim); text-decoration: underline; text-decoration-color: var(--line); }
#set-credits-note a:hover { color: var(--cyan); }

/* full-size article image lightbox */
#k-thumb { cursor: zoom-in; }
#img-modal {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(3, 4, 10, .92); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out;
}
#img-modal[hidden] { display: none; }
#img-full {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  animation: imgIn .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes imgIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* "what's playing?" mic FAB + listen sheet */
#mic-fab {
  position: fixed; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 55;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg-lift); color: var(--ink-dim); font-size: 20px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: color .2s, border-color .2s, transform .15s;
}
#mic-fab:hover { color: var(--ink); transform: translateY(-2px); }
#mic-fab.on { color: var(--cyan); border-color: var(--cyan); animation: micPulse 1.4s ease-in-out infinite; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(99,230,211,.35); } 50% { box-shadow: 0 0 0 10px rgba(99,230,211,0); } }
#listen-modal { position: fixed; inset: 0; z-index: 56; background: rgba(7,7,14,.82); backdrop-filter: blur(8px); display: flex; align-items: flex-end; justify-content: center; }
#listen-modal[hidden] { display: none; }
#listen-sheet { width: 100%; max-width: 560px; background: var(--bg-lift); border: 1px solid var(--line); border-bottom: none; border-radius: 18px 18px 0 0; padding: 18px var(--pad) calc(28px + env(safe-area-inset-bottom)); animation: sheetUp .3s cubic-bezier(.2,.7,.3,1); }
.ls-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ls-head h3 { font-family: var(--serif); font-optical-sizing: auto; font-size: 19px; font-weight: 500; flex: 1; }
.ls-head #listen-close { background: none; border: none; color: var(--ink-dim); font-size: 20px; cursor: pointer; padding: 4px 6px; margin: -4px -6px -4px 0; }
.ls-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); flex: none; animation: micPulse 1.4s ease-in-out infinite; }
.ls-heard { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); line-height: 1.5; min-height: 36px; margin: 10px 0; }
#ls-match { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 6px; }
#ls-match[hidden] { display: none; }
.ls-found { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.ls-found .ls-name { font-family: var(--serif); font-optical-sizing: auto; font-size: 18px; font-weight: 500; }
.ls-found .ls-at { font-family: var(--mono); font-size: 12px; color: var(--cyan); flex: none; margin-left: auto; }

/* one-time PWA install nudge — a slim, dismissible bar */
#install-nudge {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
}
/* never cover the player or the tab bar — sit above whichever is showing */
body.is-playing #install-nudge { bottom: calc(var(--pb-h, 122px) + env(safe-area-inset-bottom)); border-bottom: 1px solid var(--line); }
body:not(.is-play) #install-nudge { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
#install-nudge {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg-lift); border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.4;
}
#install-nudge .in-text { flex: 1; color: var(--ink-dim); }
#install-nudge .in-text b { color: var(--ink); font-weight: 500; }
#install-nudge .in-act { flex: none; }

/* add-feed: quiet note under the search + the share-offer bottom sheet */
.af-note { font-size: 11.5px; line-height: 1.4; color: var(--ink-faint); margin: 8px 2px 2px; }
#share-prompt { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .45); padding: 0 12px calc(14px + env(safe-area-inset-bottom)); }
#share-prompt[hidden] { display: none; }
.sp-card { width: 100%; max-width: 440px; background: var(--bg-lift); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); animation: viewIn .25s ease; }
.sp-txt { font-size: 14px; line-height: 1.5; color: var(--ink); }
.sp-txt b { font-weight: 600; }
.sp-sub { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-dim); }
.sp-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.sp-keep, .sp-share { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; padding: 9px 16px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); }
.sp-keep { background: none; color: var(--ink-dim); }
.sp-keep:hover { color: var(--ink); }
.sp-share { background: var(--cyan); color: #04120f; border-color: var(--cyan); font-weight: 600; }
.sp-share:hover { filter: brightness(1.08); }
#install-nudge .in-x { flex: none; background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 15px; padding: 2px 4px; }
#install-nudge .in-x:hover { color: var(--ink); }

/* admin stats — coverage bars + request log */
#view-stats #latest-head { flex-wrap: wrap; }
#stats-totals { flex-basis: 100%; margin-top: 4px; }
.stat-row { padding: 11px 0; border-top: 1px solid var(--line-soft); }
.stat-row:first-child { border-top: none; }
.stat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.stat-name { font-family: var(--serif); font-optical-sizing: auto; font-size: 15.5px; font-weight: 480; }
/* realtime "now processing" banner in the stats panel */
#stats-now { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 4px; }
#stats-now[hidden] { display: none; }
.now-row { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; padding: 8px 11px; border-radius: 8px; background: var(--bg-lift); }
.now-row .now-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; animation: livepulse 1.5s ease-in-out infinite; }
.now-row.gloss .now-dot { background: var(--cyan); }
.now-row.trans .now-dot { background: var(--green); }
.now-row .now-lab { letter-spacing: .04em; flex: none; }
.now-row.gloss .now-lab { color: var(--cyan); }
.now-row.trans .now-lab { color: var(--green); }
.now-row .now-show { color: var(--ink); font-family: var(--sans); font-weight: 500; white-space: nowrap; }
.now-row .now-ep { color: var(--ink-dim); font-family: var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.now-row .now-pct { color: var(--ink-faint); flex: none; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .now-row .now-dot { animation: none; } }
.stat-nums { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; flex: none; }
.stat-nums b { font-weight: 400; }
.stat-nums b.g { color: var(--cyan); }
.stat-nums b.t { color: var(--green, #7fd88f); }
.stat-nums .stat-tot { color: var(--ink-faint); }
.stat-bar { height: 4px; border-radius: 3px; background: var(--line-soft); overflow: hidden; display: flex; }
.stat-bar .sb-g { background: var(--cyan); height: 100%; }
.stat-bar .sb-t { background: color-mix(in srgb, var(--green, #7fd88f) 75%, transparent); height: 100%; }
.req-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.req-row:first-child { border-top: none; }
.req-who { font-family: var(--mono); font-size: 11px; color: var(--cyan); }
.req-title { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); white-space: nowrap; }

/* crossings — recurring entities across episodes */
.cross-intro { font-family: var(--serif); font-optical-sizing: auto; color: var(--ink-dim); font-size: 15px; line-height: 1.55; margin: 4px 0 18px; }
.cross-intro em { font-style: italic; color: var(--ink); }
.cross-row { border-top: 1px solid var(--line-soft); }
.cross-row:first-child { border-top: none; }
.cross-head {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  background: none; border: none; cursor: pointer; text-align: left; padding: 13px 0; color: var(--ink);
}
.cross-name { font-family: var(--serif); font-size: 18px; font-weight: 480; letter-spacing: -.01em; line-height: 1.2; }
.cross-row.open .cross-name { color: var(--cyan); }
.cross-reach { flex: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.cross-reach b { color: var(--amber); font-weight: 400; }
.cross-eps { padding: 0 0 12px; display: flex; flex-direction: column; gap: 1px; }
.cross-ep {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
  background: none; border: none; cursor: pointer; text-align: left; padding: 8px 10px; border-radius: 8px;
  transition: background .12s;
}
.cross-ep:hover { background: var(--bg-lift); }
.ce-feed { grid-column: 1; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.ce-title { grid-column: 1; font-size: 13.5px; color: var(--ink); line-height: 1.35; }
.ce-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--mono); font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.cross-ep:hover .ce-go { color: var(--cyan); }

/* star + follow, stacked under the logo in the 58px column */
/* favourite star on the artwork corner: outline (☆) when not faved, filled amber
   (★) when faved. A dark stroke behind a light fill keeps it legible on any cover,
   light or dark — paint-order puts the fill on top so the outline stays crisp. */
.fav-btn {
  position: absolute; top: 2px; right: 3px; z-index: 2;
  width: 26px; height: 26px; padding: 0; border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; color: #fff;
  -webkit-text-stroke: 1.1px rgba(0, 0, 0, .78); paint-order: stroke fill;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  cursor: pointer; transition: color .15s, transform .1s;
}
.fav-btn:hover { transform: scale(1.14); }
.fav-btn.on { color: var(--amber); -webkit-text-stroke-color: rgba(0, 0, 0, .6); }
.fav-btn:active { transform: scale(1.28); }

/* follow toggle on a show */
.sub-btn {
  width: 100%; text-align: center; white-space: nowrap;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink-dim); background: none; border: 1px solid var(--line-soft);
  padding: 6px 3px; border-radius: 999px; cursor: pointer; transition: color .15s, border-color .15s;
}
.sub-btn:hover { color: var(--ink); }
.sub-btn.on { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }

#np-wikify { margin-top: 16px; }
#no-layer .wikify-btn { font-size: 12px; padding: 9px 15px; }

/* can't-afford wikify button */
.wikify-btn.cant { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); opacity: .8; }

/* admin panel */
#admin-panel { padding-top: 4px; }
.admin-new { display: flex; gap: 8px; margin: 12px 0; }
.admin-new input[type=text] { flex: 1; min-width: 0; }
.admin-new input[type=number] { width: 62px; }
.admin-new input {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: var(--bg-lift); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px;
}
.admin-new input:focus { outline: none; border-color: var(--cyan); }
.admin-new .act, #admin-invite .act {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--cyan);
  background: none; border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; white-space: nowrap;
}
#admin-invite { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; flex-wrap: wrap; }
#admin-invite b { color: var(--ink); }
.admin-row { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-soft); }
/* deep analytics rows: name+actions line, then seen/listened/glossed, then (tap) episodes */
.admin-row.deep { display: block; }
.admin-row.deep.open-able { cursor: pointer; }
.au-line1 { display: flex; align-items: center; gap: 8px; }
.au-line1 .au-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; flex: none; }
.au-tag.adm { color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); }
.au-tag.unused { color: var(--ink-faint); border: 1px dashed var(--line); }
.au-line2 { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); }
.au-eps { margin: 8px 0 2px; border-left: 2px solid var(--line-soft); padding-left: 10px; }
.au-ep { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12px; }
.au-ep .aue-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); }
.au-ep .aue-m { flex: none; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
/* who-am-I chip in the top bar */
#who { width: 27px; height: 27px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--cyan) 45%, var(--line));
  background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--cyan);
  font-family: var(--mono); font-size: 12px; font-weight: 700; cursor: pointer;
  display: grid; place-items: center; padding: 0; flex: none; }
#who.adm { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent); }
#who[hidden] { display: none; }
.au-btn.rm { color: var(--ink-faint); border-color: var(--line-soft); }
.au-btn.rm:hover { color: var(--coral, #e0736a); border-color: var(--coral, #e0736a); }
.au-name { font-size: 14px; }
.au-cr { font-family: var(--mono); font-size: 11px; color: var(--purple); font-variant-numeric: tabular-nums; }
.au-btn {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim);
  background: none; border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 10px; cursor: pointer;
}
.au-btn:hover { color: var(--cyan); border-color: var(--cyan); }

/* ---------- feed header + episode index ---------- */
#feed-head {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 16px;
  align-items: center;
  margin: 10px 0 8px;
}
#feed-refresh {
  flex: none; align-self: start; margin-top: 4px;
  font-size: 16px; line-height: 1; color: var(--ink-dim); background: none;
  border: 1px solid var(--line-soft); border-radius: 999px; width: 34px; height: 34px;
  cursor: pointer; transition: color .15s, border-color .15s;
}
#feed-refresh:hover { color: var(--cyan); border-color: var(--cyan); }
.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#feed-head img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: var(--bg-lift); }
#feed-head h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 24px; font-weight: 480; letter-spacing: -.015em; line-height: 1.15;
}
#feed-head .author {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cyan); margin-top: 5px;
}

.ep-card {
  display: block;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
  cursor: pointer;
}
.ep-card:hover .ep-title { color: var(--cyan); }
.ep-card .ep-title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 20px; font-weight: 460; letter-spacing: -.012em; line-height: 1.22;
  transition: color .15s;
}
.ep-card .ep-title .badge { color: var(--amber); margin-right: 8px; font-size: .85em; vertical-align: 1px; }
.ep-card .ep-meta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--ink-faint); display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 6px;
}
.ep-card .ep-meta .badge { color: var(--purple); }
.ep-card .ep-desc {
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: 14px; color: var(--ink-dim); line-height: 1.5;
  max-height: 3em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ep-card.has-layer .ep-title .badge { color: var(--cyan); }

/* on-demand wikify: button + live progress on an episode row */
.wikify-btn {
  display: inline-block; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan); background: none; border: 1px solid var(--line-soft);
  padding: 5px 11px; border-radius: 999px; cursor: pointer; margin-top: 4px;
  transition: border-color .15s, color .15s;
}
.wikify-btn:hover { border-color: var(--cyan); }
.wikify-btn:disabled { opacity: .5; cursor: default; }
.wikify-job { margin-top: 10px; }
/* in the icon-grid layout (Latest), appended controls must span both columns —
   otherwise they land in the 52px icon column and wrap into a mangled stack */
.ep-card.has-art .wikify-btn, .ep-card.has-art .wikify-job { grid-column: 1 / -1; }
.ep-card.has-art .wikify-btn { justify-self: start; }
.wikify-job .wj-bar {
  height: 2px; background: var(--line-soft); border-radius: 2px; overflow: hidden;
}
.wikify-job .wj-bar > span {
  display: block; height: 100%; width: 3%; background: var(--cyan);
  transition: width .5s ease;
}
.wikify-job.done .wj-bar > span { background: var(--green, #7fd88f); }
.wikify-job.err .wj-bar { display: none; }
.wikify-job .wj-line {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  color: var(--ink-dim); margin-top: 7px;
}
.wikify-job.done .wj-line { color: var(--cyan); }
.wikify-job.err .wj-line { color: var(--amber); }

/* glanceable credits + model picker */
.credits-line {
  display: block; width: 100%; text-align: right;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--ink-faint); background: none; border: none; cursor: pointer;
  padding: 4px 0 2px;
}
.credits-line:empty { display: none; }
.credits-line.low { color: var(--amber); }
.mpick { display: flex; gap: 6px; flex: none; }
.mpick button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--ink-dim); background: none; border: 1px solid var(--line-soft);
  padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: color .15s, border-color .15s;
}
.mpick button.on { color: var(--cyan); border-color: var(--cyan); }
.setting .act {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--ink-dim); background: none; border: 1px solid var(--line-soft);
  padding: 5px 12px; border-radius: 999px; cursor: pointer; flex: none;
  transition: color .15s, border-color .15s;
}
.setting .act:hover { color: var(--cyan); border-color: var(--cyan); }

/* latest view + home entry */
.latest-link {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  background: none; border: none; border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft); padding: 16px 0; margin: 4px 0 20px;
  cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: 19px; font-weight: 460; color: var(--ink);
  transition: color .15s;
}
.latest-link:hover { color: var(--cyan); }
.latest-link .sub {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
#latest-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 0 6px;
}
#latest-head h2 {
  font-family: var(--serif); font-size: 26px; font-weight: 480; letter-spacing: -.015em;
}
#latest-head .act {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--ink-dim);
  background: none; border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; transition: color .15s, border-color .15s;
}
#latest-head .act:hover { color: var(--cyan); border-color: var(--cyan); }
.ep-card .ep-meta .badge.subs { color: var(--green, #7fd88f); border: 1px solid color-mix(in srgb, var(--green, #7fd88f) 40%, transparent); border-radius: 4px; padding: 0 5px; font-size: .82em; }
.ep-card .ep-meta .badge.curated { color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius: 4px; padding: 0 5px; font-size: .82em; letter-spacing: .03em; }
/* the show name is a real control: tap it for that show's episodes */
.ep-card .ep-meta .ep-feed {
  color: var(--cyan); background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  border-bottom: 1px solid transparent; transition: border-color .15s;
}
.ep-card .ep-meta .ep-feed:hover { border-bottom-color: var(--cyan); }

/* episode filters: dim-or-hide listened, glossed-only */
.ep-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 4px 0 14px; }
.epf {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  background: none; color: var(--ink-faint); cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
  transition: color .15s, border-color .15s;
}
.epf:hover { color: var(--ink-dim); }
.epf.on { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 55%, var(--line)); }
.epf-note { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.ep-card .ep-meta .ep-note { color: var(--amber); }
/* listened / in-progress state */
.ep-card.heard { opacity: .45; }
.ep-card.heard:hover { opacity: .72; }
.ep-card .ep-meta .ep-listened { color: var(--green, #7fd88f); }
.ep-card .ep-meta .ep-progress { color: var(--cyan); }
#library-count { align-self: center; }

/* add-a-podcast form */
#add-feed-form { padding: 4px 0 20px; display: flex; flex-direction: column; gap: 12px; }
#add-feed-url, #add-feed-search {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: var(--bg-lift); border: 1px solid var(--line-soft); border-radius: 9px; padding: 11px 13px;
}
#add-feed-search { font-family: var(--sans); font-size: 15px; }
#add-feed-url:focus, #add-feed-search:focus { outline: none; border-color: var(--cyan); }
/* search results — tap a show to add it */
#add-feed-results:not(:empty) { display: flex; flex-direction: column; gap: 2px; margin-top: -4px; max-height: 60vh; overflow-y: auto; }
.af-hint { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); padding: 8px 2px; }
.af-result { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; background: none; border: none; cursor: pointer; text-align: left; width: 100%; transition: background .12s; }
.af-result:hover { background: var(--bg-lift); }
.af-result img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--bg-lift); flex: none; }
.afr-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.afr-name { font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afr-by { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.af-result .afr-add-OLD { font-size: 18px; color: var(--cyan); flex: none; width: 22px; text-align: center; }
.af-result.adding { opacity: .6; }
.af-adv { font-size: 12.5px; color: var(--ink-dim); }
.af-adv summary { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-faint); padding: 4px 0; }
.af-adv summary:hover { color: var(--cyan); }
.af-adv[open] { display: flex; flex-direction: column; gap: 10px; }
.af-priv { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-dim); cursor: pointer; }
.af-priv input { width: 17px; height: 17px; accent-color: var(--cyan); }
.af-row { display: flex; align-items: center; gap: 14px; }
#add-feed-go {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--cyan);
  background: none; border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  border-radius: 9px; padding: 9px 16px; cursor: pointer;
}
#add-feed-go:disabled { opacity: .5; }
.af-status { font-family: var(--mono); font-size: 11px; color: var(--amber); }
.priv-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--amber); margin-left: 9px; vertical-align: 2px; white-space: nowrap; }

/* transient toast */
#toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(8px);
  background: var(--bg-lift); color: var(--ink); border: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 12px; letter-spacing: .03em;
  padding: 9px 16px; border-radius: 999px; z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- now playing ---------- */
#np-head { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; margin: 6px 0 16px; }
#np-desc { margin: 0 0 24px; }
#np-desc[hidden] { display: none; }
/* clamp to a few lines with a full-strength last line (no dim fade), "more" expands */
#np-desc-text {
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  cursor: pointer;
}
#np-desc-text.open { -webkit-line-clamp: unset; overflow: visible; cursor: default; }
#np-desc-more {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--cyan);
  background: none; border: none; padding: 6px 0 0; cursor: pointer;
}
#np-desc-more[hidden] { display: none; }
#np-art { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--bg-lift); }
#np-feed {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 3px;
}
#np-title {
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: 22px; font-weight: 480; letter-spacing: -.015em; line-height: 1.15;
}

/* transcript — a lit rule, no box */
#cap-row { display: flex; align-items: baseline; gap: 8px 12px; margin-bottom: 8px; flex-wrap: wrap; }
#cap-row .label { flex: none; }
/* transcript accordion — collapse the whole transcript (caption + controls); remembered */
#cap-ctl { display: inline-flex; align-items: baseline; gap: 12px; margin-left: auto; }
body.tx-off #cap-overlay, body.tx-off #sync-pop { display: none !important; }
#sync-ctl { display: inline-flex; gap: 4px; }
#sync-ctl button, #karaoke-toggle {
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); padding: 2px 3px;
}
#sync-ctl button:hover, #karaoke-toggle:hover { color: var(--cyan); }
#sync-label.active { color: var(--purple); }
#karaoke-toggle.on { color: var(--cyan); }
/* collapsible knowledge-timing panel, revealed by the ◎ sync link */
#sync-pop { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: -2px 0 9px; padding: 8px 11px; border-radius: 8px; background: rgba(var(--ink-rgb), .05); }
#sync-pop[hidden] { display: none; }
#sync-pop .sp-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-faint); flex: 1 1 auto; min-width: 0; }
#sync-pop #sync-ctl { flex: none; margin-left: auto; }
/* skip-intro: a real one-tap action (jump past the ads), so give it a tappable
   outlined pill rather than the bare-text look of the fine sync nudges */

/* movie-style subtitles: a single centred segment in a dark pill above the player bar.
   Fixed dark styling in BOTH themes — that's what subtitles look like. */
#cap-overlay {
  position: fixed; left: 0; right: 0; z-index: 39;
  bottom: calc(118px + env(safe-area-inset-bottom));
  display: none; justify-content: center; align-items: flex-end;
  padding: 0 14px; pointer-events: none;
}
body.is-play:not(.tx-off) #cap-overlay:has(#caption.live) { display: flex; }
#caption {
  pointer-events: auto;
  max-width: min(88%, 500px);
  /* standard subtitle look: plain sans, no shadow, and the shade hugs each LINE of
     text (box-decoration-break on the inline wrapper), not a box around the block */
  background: none; border-radius: 0; padding: 0; text-shadow: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px; font-weight: 500; line-height: 1.5; text-align: center;
  color: rgba(255, 255, 255, .94);
}
#caption .cap-in {
  display: inline; background: rgba(8, 8, 14, .78);
  padding: 2px 8px; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
#caption span[data-s] { color: rgba(255, 255, 255, .55); transition: color .15s; }
#caption span.sung { color: rgba(255, 255, 255, .95); }
/* the timing sheet opens as a fixed panel just above the subtitles */
#view-play #sync-pop {
  position: fixed; left: 12px; right: 12px; z-index: 44;
  bottom: calc(150px + env(safe-area-inset-bottom));
  background: var(--card, var(--bg-lift)); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}

/* ---------- knowledge ---------- */
#knowledge { position: relative; min-height: 90px; }
#k-empty {
  text-align: center; color: var(--ink-faint);
  font-size: 13px; padding: 30px 10px;
}
#k-empty .star { display: block; font-size: 20px; margin-bottom: 8px; opacity: .7; }
#k-empty p { max-width: 26ch; margin: 0 auto; }

/* related / cross-episode line under the card */
/* named connections: how this node relates to the rest of the story, in words */
#k-connections { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px 7px; align-items: baseline; }
#k-connections .conn-lead {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); width: 100%; margin-bottom: 1px;
}
#k-connections .conn {
  font: inherit; font-size: 12.5px; color: var(--ink-dim); cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid transparent; padding: 0; text-align: left;
}
#k-connections .conn:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
#k-connections .conn .rel {
  font-family: var(--mono); font-size: 10.5px; color: var(--purple); font-style: normal;
}
#k-connections .conn.in .rel { color: var(--amber, #e6b17e); }
#k-connections .conn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* hidden for now: the "jump to N:NN" line is redundant — scrolling to the bottom
   already lands you on the live node */
#k-related { display: none; margin-top: 12px; flex-direction: column; gap: 5px; }
#k-related .rel-line { font-size: 12px; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
#k-related .rel-line .lead { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
#k-related a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid transparent; cursor: pointer; }
#k-related a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
#k-related .heard a { color: var(--purple); }
#k-jump {
  align-self: flex-start;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--cyan); background: none; border: none; cursor: pointer; padding: 2px 0;
}
#k-jump:hover { text-decoration: underline; }

/* continue listening */
#continue { margin-bottom: 26px; }
/* continue-listening HERO — image-forward, most-recent item */
.cont-hero {
  position: relative; margin: 6px 0 16px; border-radius: 14px; overflow: hidden;
  cursor: pointer; touch-action: pan-y;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.cont-hero.swiping { transition: none; }
.cont-hero.dismiss { transform: translateX(-110%); opacity: 0; }
.cont-hero.heard { opacity: .5; }
.cont-hero:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(230, 177, 126, .16); }
.cont-hero .ch-art { position: absolute; inset: 0; background: var(--bg-lift); overflow: hidden; }
/* the square cover, lightly blurred, fills the wide frame as an ambient colour
   wash — enough to read the show's palette; the CRISP cover thumbnail on top is
   what you actually identify it by */
.cont-hero .ch-art img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; filter: blur(7px) saturate(1.35) brightness(.85); transform: scale(1.18); }
.cont-hero .ch-art img.loaded { opacity: 1; }
.cont-hero .ch-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,11,20,.78) 0%, rgba(11,11,20,.5) 55%, rgba(11,11,20,.42) 100%),
    linear-gradient(0deg, rgba(11,11,20,.78), rgba(11,11,20,.15) 70%);
}
/* foreground row: crisp cover · text · play — sits above the wash */
.cont-hero .ch-fg { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 16px; aspect-ratio: 5 / 2; box-sizing: border-box; }
.cont-hero .ch-cover {
  width: 88px; height: 88px; flex: none; border-radius: 9px; object-fit: cover;
  background: rgba(0,0,0,.25); box-shadow: 0 6px 20px rgba(0,0,0,.45);
  opacity: 0; transition: opacity .4s ease;
}
.cont-hero .ch-cover.loaded { opacity: 1; }
.cont-hero .ch-body { min-width: 0; flex: 1; }
/* over an always-dark wash → light text in BOTH themes */
.cont-hero .ch-show { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #63e6d3; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.cont-hero .ch-title { font-family: var(--serif); font-optical-sizing: auto; font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; color: #f4f1ec; text-shadow: 0 1px 16px rgba(0,0,0,.7); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cont-hero .ch-meta { font-family: var(--mono); font-size: 11px; color: rgba(244,241,236,.72); margin-top: 6px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.cont-hero .ch-play {
  flex: none; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; background: var(--amber); color: #1a130a;
  display: flex; align-items: center; justify-content: center; font-size: 15px; padding-left: 3px;
  box-shadow: 0 6px 20px rgba(230, 177, 126, .4); transition: transform .2s;
}
.cont-hero:hover .ch-play { transform: scale(1.1); }
.cont-hero .ch-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.25); z-index: 3; }
.cont-hero .ch-prog span { display: block; height: 100%; background: #63e6d3; }

.cont-card {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 13px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--line-soft); cursor: pointer;
  touch-action: pan-y; transition: transform .18s ease, opacity .18s ease;
}
.cont-card.heard { opacity: .5; }
.cont-card.swiping { transition: none; }
.cont-card.dismiss { transform: translateX(-110%); opacity: 0; }
.cont-card:first-of-type { border-top: none; }
.cont-card:hover .cont-title { color: var(--cyan); }
.cont-card img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; background: var(--bg-lift); }
.cont-title { font-family: var(--serif); font-optical-sizing: auto; font-size: 15px; font-weight: 480; }
.cont-sub { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; }
.cont-prog { width: 34px; height: 34px; }
.cont-x { background: none; border: none; color: var(--ink-faint); font-size: 15px; cursor: pointer; padding: 4px; }
.cont-x:hover { color: var(--ink); }

/* swipe-between-articles affordance */
#k-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  min-height: 16px;
}
#k-nav button {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  color: var(--ink-faint); padding: 2px 0; max-width: 46%;
  transition: color .15s;
}
#k-nav button:hover { color: var(--cyan); }
#k-nav button[disabled] { display: none; }
#k-nav .chev { font-size: 15px; line-height: 1; color: var(--ink-dim); }
#k-nav .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#k-next { margin-left: auto; text-align: right; }

/* main knowledge card — layout, not a box */
#k-card {
  /* the image floats and long text WRAPS under it — the empty left gutter under
     the picture (grid layout) wasted half the card on tall articles */
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 4px 0 2px;
  animation: kIn .4s cubic-bezier(.2, .7, .3, 1);
  touch-action: pan-y;
  will-change: transform;
}
#k-card::after { content: ''; display: block; clear: both; }
.k-body { min-width: 0; }
#k-card.swipe-left { animation: swipeL .28s ease; }
#k-card.swipe-right { animation: swipeR .28s ease; }
@keyframes swipeL { from { opacity: .3; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes swipeR { from { opacity: .3; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes kIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#k-thumb {
  float: left; margin: 4px 14px 6px 0;
  width: 88px; height: 88px; border-radius: 12px; object-fit: cover;
  background: var(--bg-lift);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16); /* a hint of lift, not a floating slab */
}
#k-thumb[hidden] { display: none; }
.k-kicker {
  display: flex; gap: 12px; align-items: baseline;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 4px;
}
/* typed kicker: coloured dot + TYPE · occupation pill · era flag ...... relevance */
.kc { --tc: var(--purple); }
.kc[data-type="place"]  { --tc: var(--cyan); }
.kc[data-type="org"] { --tc: var(--amber); }
.kc[data-type="thing"] { --tc: var(--amber); }
.kc[data-type="unknown"] { --tc: var(--ink-dim); }
.kc[data-type="event"]  { --tc: var(--amber); }
.kc[data-type="idea"]   { --tc: var(--green); }
.kc-kick { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; }
.kc-type { display: inline-flex; align-items: center; gap: 5px; color: var(--tc); font-weight: 500; }
.kc-type::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 8px -1px var(--tc); }
.kc-type:empty { display: none; }
.kc-occ { color: var(--ink-dim); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; letter-spacing: .05em; }
.kc-occ[hidden], .kc-occ:empty { display: none; }
.kc-flag { height: 13px; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(128,128,128,.35); align-self: center; }
.kc-flag[hidden] { display: none; }
.kc-rel { margin-left: auto; color: var(--ink-faint); letter-spacing: .06em;
  font-size: 8.5px; opacity: .55; cursor: help; } /* a debug whisper, not a grade */
.ep-markheard { font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; color: var(--ink-faint);
  border: 1px dashed var(--line); border-radius: 999px; padding: 1px 7px; cursor: pointer; }
.ep-markheard:hover { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); }
.ep-listened { cursor: pointer; }

/* the Wikipedia badge: a serif W in a small square — the same mark everywhere */
.wg { display: inline-grid; place-items: center; width: 13px; height: 13px; border: 1px solid currentColor;
  border-radius: 3px; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 9.5px;
  margin-right: 4px; vertical-align: -2px; line-height: 1; }
.kh-w .wg { width: 12px; height: 12px; font-size: 9px; margin-right: 1px; }

/* explicit source links — mono, quiet, unmistakably links */
.kc-wsrc { display: inline-block; margin-top: 3px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .05em; color: var(--cyan); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); }
.kc-wsrc:hover { border-bottom-style: solid; border-bottom-color: var(--cyan); }
.kc-wsrc[hidden] { display: none; }
.kh-w { font-family: var(--mono); font-size: 9.5px; color: var(--cyan); text-decoration: none;
  opacity: .8; padding: 2px 3px; }
.kh-w:hover { opacity: 1; text-decoration: underline; }
.now-row.queued .now-lab, .now-row.idle .now-lab { color: var(--ink-faint); }
.now-dot.dim { background: var(--ink-faint); animation: none; opacity: .5; }
.now-dot.warn { background: var(--amber); }
.now-row.tx .now-lab { color: var(--cyan); }
.now-dot.tx { background: var(--cyan); }
/* coverage rows being worked right now breathe in their lane's colour */
.stat-row.working-tx .stat-name, .stat-row.working-gloss .stat-name { animation: rowbreathe 1.8s ease-in-out infinite; }
.stat-row.working-tx .stat-name { color: var(--cyan); }
.stat-row.working-gloss .stat-name { color: var(--amber); }
.stat-row.working-tx .stat-name::after { content: ' ☰'; }
.stat-row.working-gloss .stat-name::after { content: ' ✦'; }
@keyframes rowbreathe { 50% { opacity: .55; } }
#stats-tp { display: flex; flex-wrap: wrap; gap: 5px 18px; align-items: baseline; margin: 10px 0 4px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
#stats-tp b { color: var(--ink); }
#stats-tp i { font-style: normal; color: var(--ink-faint); font-size: 10px; }
.tp-lab { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.now-row.blocked .now-lab { color: var(--amber); }
.now-ep.nq { white-space: normal; font-size: 11px; color: var(--ink-faint); }

/* the TELLING's people — quiet chips at the very top of the flow */
#k-hostrow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; margin: 2px 2px 12px; opacity: .75; }
#k-hostrow[hidden] { display: none; }
.hr-kick { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.n-chip.meta .nc-nm { border-bottom-style: dashed; }
body.settled #k-hostrow { display: none; }

/* the episode's cited sources — a quiet reading list at the very end */
#k-sources { margin: 26px 0 8px; }
#k-sources[hidden] { display: none; }
.src-row { padding: 9px 0; border-top: 1px solid var(--line-soft); }
.src-row:first-of-type { border-top: none; }
.src-t { font-family: var(--serif); font-optical-sizing: auto; font-size: 15px; color: var(--ink);
  text-decoration: none; }
a.src-t { border-bottom: 1px dotted color-mix(in srgb, var(--cyan) 50%, transparent); }
a.src-t:hover { border-bottom-style: solid; color: var(--cyan); }
.src-a { font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); margin-left: 10px; }
.src-read { font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
  border-radius: 999px; padding: 2px 7px; margin-left: 10px; }
.src-g { font-family: var(--serif); font-optical-sizing: auto; font-size: 13px; line-height: 1.5;
  color: var(--ink-dim); margin-top: 3px; }
body.settled #k-sources { display: none; }

/* jump back to where a past node was said */
.kh-jump { display: inline-block; margin-top: 5px; background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-dim); }
.kh-jump:hover { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); }
#k-card.hi .kc-rel { color: var(--cyan); }
/* "jump to now" — appears when you're viewing an older node while playback moved on */
#k-live {
  /* floats over the story instead of shoving it down — appearing must not reflow.
     Lives just ABOVE the subtitle zone: the top slot obstructed the timeline HUD */
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(186px + env(safe-area-inset-bottom)); z-index: 38;
  display: flex; align-items: center; gap: 9px; max-width: 86vw; text-align: left;
  background: color-mix(in srgb, var(--cyan) 12%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent);
  border-radius: 999px; padding: 8px 15px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; color: var(--cyan);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: background .15s;
}
#k-live .kl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#k-live[hidden] { display: none; }
#k-live:hover { background: color-mix(in srgb, var(--cyan) 15%, transparent); }
#k-live .kl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex: none; animation: livepulse 1.5s ease-in-out infinite; }
@keyframes livepulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { #k-live .kl-dot { animation: none; } }
#k-live .kl-lead { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; color: var(--ink-dim); }
#k-live .kl-name { flex: 1; min-width: 0; color: var(--ink); font-family: var(--sans); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#k-live .kl-arrow { color: var(--cyan); font-size: 14px; }

#k-title {
  display: inline-block;
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: 26px; font-weight: 500; letter-spacing: -.016em; line-height: 1.08; margin-bottom: 3px;
  color: inherit; text-decoration: none;
}
#k-title:hover { text-decoration: underline; text-decoration-color: var(--tc); text-underline-offset: 3px; }
/* dates · flag + country name, on one row with a bit of distance between them */
.kc-dates-row { display: flex; align-items: center; gap: 14px; margin-top: 1px; }
.kc-dates-row:not(:has(.kc-dates:not([hidden]))):not(:has(.kc-natwrap:not([hidden]))) { display: none; }
.kc-dates { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--amber); font-variant-numeric: tabular-nums; }
.kc-dates[hidden], .kc-dates:empty { display: none; }
.kc-natwrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.kc-natwrap[hidden] { display: none; }
.kc-nat { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-nat:empty { display: none; }
#k-gloss {
  font-family: var(--serif); font-optical-sizing: auto; font-style: italic;
  font-size: 14.5px; line-height: 1.5; color: var(--cyan); margin-top: 9px;
}
#k-gloss:empty { display: none; }
/* the single most-important connection, surfaced above the fold */
/* collapsed drawer (full extract + all connections), revealed on pause / tap */
.kc-more { margin-top: 11px; }
.kc-toggle { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); background: none; border: none; cursor: pointer; padding: 4px 0; display: inline-flex; align-items: center; gap: 6px; }
.kc-toggle[hidden] { display: none; }
.kc-toggle:hover { color: var(--tc); }
.cev { transition: transform .28s ease; display: inline-block; }
#k-card.open .kc-toggle .cev { transform: rotate(180deg); }
.kc-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.kc-drawer > div { overflow: hidden; }
#k-card.open .kc-drawer { grid-template-rows: 1fr; }
#k-extract { font-family: var(--serif); font-optical-sizing: auto; font-size: 14.5px; color: var(--ink-dim); line-height: 1.6; margin: 12px 0 0; }
#k-extract:empty { display: none; }
.kc-connlead { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 16px 0 8px; }
.kc-connlead[hidden] { display: none; }
.kc-conns { display: flex; flex-wrap: wrap; gap: 7px; }
.kc-conn { font-size: 12px; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line); color: var(--ink-dim); background: var(--bg-lift); cursor: pointer; font-family: var(--sans); }
.kc-conn .rel { color: var(--ink-faint); font-family: var(--mono); font-size: 10px; }
.kc-conn:hover { color: var(--tc); border-color: var(--tc); }

/* meta strip — host / sources, transient & quiet */
#k-meta {
  display: flex; gap: 12px; align-items: center;
  text-decoration: none; color: inherit;
  padding: 8px 0; margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  opacity: .85;
  animation: kIn .35s ease;
}
#k-meta-thumb { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; filter: grayscale(.4); }
#k-meta .k-kicker { margin: 0; }
#k-meta .k-kicker span { color: var(--ink-faint); }
#k-meta-title { font-family: var(--serif); font-size: 15px; }
#k-meta-gloss { font-size: 11.5px; color: var(--ink-faint); }

.chip.minor { opacity: .55; font-size: 10.5px; } /* a passing mention, not a headline */

/* ---------- always-on "when & where" strip ---------- */
/* globe + timeline stay pinned above the story feed while it scrolls */
#nowstrip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* edge to edge: the instruments deserve the whole width */
  margin: 0 calc(-1 * var(--pad));
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
  /* welded flush under the topbar: tuck up under it (topbar z-index 30 hides the
     overlap) and use a solid bg so scrolling content never shows through the seam */
  position: sticky; top: 54px; z-index: 20;
  padding: 10px 0 9px; background: var(--bg);
  /* a hairline, not a drop shadow — the shadow smeared over the story text
     scrolling underneath and clipped the line right below it */
  border-bottom: 1px solid var(--line-soft);
}
/* ---------- story-so-far history feed ---------- */
#k-history { display: flex; flex-direction: column; margin-top: 4px; }
/* the connective thread between two nodes — centred, arrows drop downward */
/* new nodes unfold: grow in height + fade, so the feed never jumps */
.k-between { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint);
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .5s ease, max-height .5s cubic-bezier(.2, .7, .3, 1), padding .5s ease; }
.k-between.in { opacity: 1; max-height: 64px; padding: 5px 0; }
.k-between .ln { color: var(--tc); }
.k-between .arw { color: var(--tc); opacity: .5; }
.k-between.nolink .ln { display: none; }
.k-hist { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 0 8px; margin: 0 -8px; cursor: pointer;
  border-radius: 10px; opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .5s ease, max-height .55s cubic-bezier(.2, .7, .3, 1), padding .5s ease, background .2s ease; }
.k-hist.in { opacity: .38; max-height: 200px; padding: 6px 8px; }
/* the node immediately before the live one is the one you actually read; older nodes
   stay in the list but recede so the current node still dominates */
.k-hist.in.prev { opacity: .78; }
.k-hist.in.prev2 { opacity: .54; }
.k-hist.focus, #k-card.focus { opacity: 1; background: color-mix(in srgb, var(--tc) 12%, transparent); }
.k-hist.focus { box-shadow: inset 2px 0 0 var(--tc); }
#k-card.focus { border-radius: 12px; padding: 6px 8px; margin: 0 -8px; }
.k-hist[data-type="org"], .k-hist[data-type="thing"] { --tc: var(--amber); }
.k-hist[data-type="unknown"] { --tc: var(--ink-dim); }
.k-hist[data-type="place"] { --tc: var(--cyan); } .k-hist[data-type="event"] { --tc: var(--amber); }
.k-hist[data-type="idea"] { --tc: var(--green); } .k-hist:not([data-type]) , .k-hist[data-type="person"] { --tc: var(--purple); }
.kh-ph { width: 34px; height: 34px; border-radius: 8px; background: var(--bg-lift); overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: var(--tc); font-size: 17px; }
.kh-ph img { width: 100%; height: 100%; object-fit: cover; }
.kh-kick { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc); }
.kh-nm { font-family: var(--serif); font-optical-sizing: auto; font-size: 15px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; margin: 2px 0 1px; }
.kh-dt { font-family: var(--mono); font-size: 10.5px; color: var(--amber); }
.kh-gl { font-family: var(--serif); font-optical-sizing: auto; font-size: 12.5px; line-height: 1.4; color: var(--ink-dim); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* deliberately expanded (chip → card) or focused-to-read: you asked to learn more —
   no clamp, no "…", the whole gloss */
.k-hist.in .kh-gl, .k-hist.focus .kh-gl { -webkit-line-clamp: unset; overflow: visible; display: block; }
@media (prefers-reduced-motion: reduce) { .k-between, .k-hist { transition: none; } }

/* "coming up" preview — the first node shown dim during the intro; tap to jump to it */
#k-upnext { --tc: var(--purple); display: block; width: 100%; text-align: left; margin: 8px 0 2px;
  padding: 10px 12px; background: none; border: 1px dashed var(--line); border-radius: 12px;
  cursor: pointer; opacity: .52; transition: opacity .2s ease, border-color .2s ease; }
#k-upnext[hidden] { display: none; }
#k-upnext:hover, #k-upnext:active { opacity: .9; border-color: color-mix(in srgb, var(--tc) 55%, var(--line)); }
#k-upnext[data-type="place"] { --tc: var(--cyan); } #k-upnext[data-type="event"] { --tc: var(--amber); } #k-upnext[data-type="idea"] { --tc: var(--green); }
.un-lead { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--tc); margin-bottom: 8px; }
.un-row { display: flex; align-items: center; gap: 12px; }
.un-ph { width: 40px; height: 40px; flex: none; border-radius: 9px; background: var(--bg-lift); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--tc); font-size: 16px; }
.un-ph img { width: 100%; height: 100%; object-fit: cover; }
.un-b { flex: 1; min-width: 0; }
.un-kick, .un-nm, .un-gl { display: block; }
.un-kick { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc); }
.un-nm { font-family: var(--serif); font-optical-sizing: auto; font-size: 17px; font-weight: 500; line-height: 1.12; margin: 1px 0; }
.un-gl { font-size: 11.5px; line-height: 1.35; color: var(--ink-dim); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.un-go { flex: none; font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--tc);
  border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); border-radius: 50%;
  width: 30px; height: 30px; display: grid; place-items: center; }
#now-row { display: flex; align-items: center; gap: 14px; }
#now-geo { position: relative; flex: none; display: flex; }
#geo-cap {
  position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-align: center;
  color: var(--ink-faint); pointer-events: none;
}
#geo-cap:empty { display: none; }
#now-row > * { min-width: 0; }
/* Shared caption: what the timeline / globe are pointing at right now.
   Its space is RESERVED — fixed height, never hidden, always one line — so the
   timeline and globe below can never jump when the caption appears, changes or
   clears. It fades instead of taking/releasing layout. */
/* the NAME never gets an ellipsis; the secondary detail gives way instead */

#nowtime {
  flex: 1;
  height: 50px;
  min-width: 0;
  cursor: pointer;
}
/* the BIG timeline: full width, tall, explorable — the globe steps aside */
body.tl-big #nowtime { height: 150px; touch-action: none; cursor: grab; }
body.tl-big #nowtime:active { cursor: grabbing; }
body.tl-big #now-geo { align-self: center; } /* globe stays — no need to hide it */
#tl-close { position: absolute; top: 2px; right: 2px; z-index: 5; width: 26px; height: 26px;
  display: grid; place-items: center; padding: 0; background: rgba(11,11,20,.6);
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink-dim); cursor: pointer; font-size: 12px; }
#tl-close[hidden] { display: none; }
#nowglobe {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #16233a, #05060f 75%);
  box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0, 0, 0, .35);
  transition: box-shadow .2s, transform .1s;
}
#nowglobe:hover { box-shadow: 0 0 0 1px var(--cyan), 0 6px 22px rgba(99, 230, 211, .2); }
#nowglobe:active { transform: scale(.96); }

/* connections (web) — opt-in */
/* coverage & requests — a clean cyan pill (in Settings) */
#open-stats {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan); background: none; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--cyan) 34%, transparent); border-radius: 999px;
  padding: 8px 15px; transition: background .15s, border-color .15s;
}
#open-stats:hover { background: color-mix(in srgb, var(--cyan) 10%, transparent); border-color: var(--cyan); }
/* connections accordion header — matches the transcript accordion (label + chevron) */
#web-open { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 0; margin: 22px 0 0; }
#web-open .cev { font-size: 8px; opacity: .7; transition: transform .2s; }
#web-open.open .cev { transform: rotate(180deg); }

/* version row + changelog */
#set-version { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-soft); color: inherit; font: inherit; }
#version-line { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--ink-faint); }
#changelog-modal {
  position: fixed; inset: 0; z-index: 80; background: rgba(5, 6, 15, .72);
  display: flex; align-items: flex-end; justify-content: center;
}
#changelog-sheet {
  width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--bg-lift, #12121e); border: 1px solid var(--line);
  border-radius: 20px 20px 0 0; overflow: hidden;
}
#changelog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--line-soft); flex: none;
}
#changelog-head h2 { font-family: var(--serif); font-size: 20px; font-weight: 500; }
#changelog-close { background: none; border: none; color: var(--ink-dim); font-size: 20px; cursor: pointer; }
#changelog-body { overflow-y: auto; padding: 8px 20px calc(28px + env(safe-area-inset-bottom)); }
#changelog-body h1 { display: none; } /* the sheet header already says it */
#changelog-body h2 {
  font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--ink);
  margin: 22px 0 4px; letter-spacing: -.01em;
}
#changelog-body h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin: 16px 0 4px; }
#changelog-body p { font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); margin: 6px 0; }
#changelog-body ul { margin: 6px 0 10px; padding: 0; list-style: none; }
#changelog-body li { font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); margin: 5px 0; padding-left: 16px; position: relative; }
#changelog-body li::before { content: '·'; position: absolute; left: 4px; color: var(--ink-faint); }
#changelog-body b { color: var(--ink); font-weight: 600; }
#changelog-body hr { border: none; border-top: 1px solid var(--line-soft); margin: 18px 0 4px; }
#changelog-body a { color: var(--cyan); }
#changelog-body .cl-img { width: 100%; border-radius: 10px; border: 1px solid var(--line-soft); margin: 10px 0; display: block; }

/* first-visit welcome */
#welcome-modal {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 28px; overflow-y: auto; /* tall content (the demo) scrolls; button always reachable */
}
#welcome-sheet { margin: auto; } /* vertically centred when it fits, scrolls from top when not */
#welcome-modal[hidden] { display: none; }
#welcome-sheet { max-width: 400px; text-align: center; }
#welcome-sheet .w-star { color: var(--amber); font-size: 34px; margin-bottom: 10px; }
#welcome-sheet h2 { font-family: var(--serif); font-size: 40px; font-weight: 500; letter-spacing: -.02em; }
#welcome-sheet .w-tag { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin: 6px 0 22px; }
#welcome-sheet .w-body { font-size: 15.5px; line-height: 1.6; color: var(--ink-dim); margin: 0 0 26px; }
#welcome-sheet .w-body b { color: var(--ink); }
#welcome-sheet .w-body em { font-style: italic; color: var(--cyan); }
#welcome-go {
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--bg);
  background: var(--cyan); border: none; border-radius: 999px; padding: 12px 26px; cursor: pointer;
}

/* welcome demo — a narration line, glossed live */
#w-demo { margin: 20px 0 22px; text-align: left; }

/* feedback row (a link styled like a setting) */
#set-feedback { text-decoration: none; }
#set-feedback .act:hover { color: var(--cyan); }

/* sign in */
#signin-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--cyan);
  background: none; border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  border-radius: 999px; padding: 6px 13px; cursor: pointer; margin-left: auto; margin-right: 4px;
}
#signin-btn[hidden] { display: none; }
#signin-modal {
  position: fixed; inset: 0; z-index: 90; background: rgba(5, 6, 15, .72);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#signin-modal[hidden] { display: none; }
#signin-sheet {
  width: 100%; max-width: 440px; padding: 22px;
  background: var(--bg-lift, #12121e); border: 1px solid var(--line); border-radius: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
#signin-head { display: flex; align-items: center; justify-content: space-between; }
#signin-head h2 { font-family: var(--serif); font-size: 21px; font-weight: 500; }
#signin-close { background: none; border: none; color: var(--ink-dim); font-size: 20px; cursor: pointer; }
.signin-lead { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; margin: 0; }
#signin-input {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: var(--bg-lift); border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 13px;
}
#signin-input:focus { outline: none; border-color: var(--cyan); }
.signin-row { display: flex; align-items: center; gap: 14px; }
#signin-go {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--cyan);
  background: none; border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  border-radius: 10px; padding: 10px 18px; cursor: pointer;
}
#signin-status { font-family: var(--mono); font-size: 11px; color: var(--amber); }
.signin-note { font-size: 12px; color: var(--ink-faint); margin: 2px 0 0; }
#set-signout { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-soft); color: inherit; font: inherit; }
#set-signout[hidden] { display: none; }
#set-signout .act:hover { color: var(--coral, #e0736a); }

/* speed picker */
#speed-pop {
  position: fixed; right: 8px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 70;
  width: 196px; padding: 12px;
  background: var(--bg-lift, #12121e); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: 10px;
}
#speed-pop[hidden] { display: none; }
.sp-dial { display: flex; align-items: center; justify-content: space-between; }
.sp-dial button {
  width: 42px; height: 42px; border-radius: 11px; font-size: 24px; line-height: 1;
  background: none; border: 1px solid var(--line-soft); color: var(--ink); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.sp-dial button:hover { border-color: var(--cyan); }
.sp-dial button:active { background: color-mix(in srgb, var(--cyan) 14%, transparent); }
#sp-val { font-family: var(--mono); font-size: 19px; color: var(--cyan); font-variant-numeric: tabular-nums; }
.sp-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sp-presets button {
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
  background: none; border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 0; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.sp-presets button.on { color: var(--cyan); border-color: var(--cyan); }
.sp-foot { display: flex; align-items: center; justify-content: space-between; }
#sp-step {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim);
  background: none; border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 11px; cursor: pointer;
}
#sp-step:hover { color: var(--ink); }
#sp-default { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--green, #7fd88f); }

/* full globe modal */
#globe-modal {
  position: fixed; inset: 0; z-index: 60;
  background: #05060f; /* fully opaque — nothing from the page bleeds through */
  display: flex;
}
#globe-close {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 16px; z-index: 4;
  background: rgba(11,11,20,.55); backdrop-filter: blur(6px); width: 36px; height: 36px; border-radius: 50%;
  border: none; color: var(--ink); font-size: 20px; cursor: pointer;
}
#globe-close:hover { color: var(--ink); }
/* the globe fills the whole modal — all available space */
#globe-modal #globe-box { position: relative; flex: 1; width: 100%; height: 100%; }
#globe-modal #globe { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; border-radius: 0; overflow: hidden; }

/* ---------- viz sections (no boxes) ---------- */
#tl-wrap, #web-wrap, #globe-wrap { margin-top: 8px; }

#timeline { touch-action: none; overflow: hidden; padding: 4px 0 2px; }
.tl-row { position: relative; height: 27px; cursor: pointer; border-radius: 5px; animation: tlin .4s ease; }
@keyframes tlin { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.tl-row.unseen { display: none; }
.tl-row:hover { background: rgba(var(--ink-rgb), .03); }
.tl-row.active { background: rgba(99, 230, 211, .06); }
.tl-track { position: absolute; inset: 0; }
.tl-name {
  position: absolute; top: 1px; right: 0;
  font-family: var(--mono); font-size: 9.5px; line-height: 13px;
  color: var(--ink-faint); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; pointer-events: none;
}
.tl-row.active .tl-name { color: var(--ink); }
.tl-row.sel .tl-name { color: var(--cyan); }
.tl-bar { position: absolute; top: 16px; height: 5px; border-radius: 3px; background: var(--cyan); opacity: .7; min-width: 2px; }
.tl-bar.span { background: var(--purple); }
.tl-bar.open { background: linear-gradient(90deg, var(--cyan) 70%, transparent); }
.tl-point { position: absolute; top: 15px; width: 7px; height: 7px; background: var(--purple); transform: rotate(45deg) translateX(-4px); border-radius: 1px; }
.tl-row.sel .tl-bar, .tl-row.sel .tl-point { background: var(--cyan); opacity: 1; }
.tl-axis { position: relative; height: 16px; border-top: 1px solid var(--line-soft); margin-top: 3px; }
.tl-tick { position: absolute; top: 3px; font-family: var(--mono); font-size: 9px; color: var(--ink-faint); transform: translateX(-50%); }

/* wrap the canvas in a sized box so it always gets real pixel dimensions
   (aspect-ratio on a bare <canvas> collapses to 0 height in some mobile browsers) */
#web-box { position: relative; width: 100%; aspect-ratio: 4 / 3; }
#web-box.fs {
  position: fixed; inset: 0; z-index: 300; width: auto; height: auto;
  aspect-ratio: auto; background: var(--bg); padding: env(safe-area-inset-top) 4px 4px;
}
#web-box.fs #web { border-radius: 0; }
#web {
  position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: grab; touch-action: none;
  border-radius: 14px; background: rgba(var(--ink-rgb), .02);
}

#globe-box { position: relative; }
#globe {
  width: 100%; aspect-ratio: 1 / 1; max-height: 56vh;
  border-radius: 14px; overflow: hidden; background: #05060f;
}
/* just a hint — must NOT capture pointer events, or drags never reach the Cesium
   canvas beneath it and the globe looks like a dead static map */
#globe-lock {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 16px;
  background: linear-gradient(transparent 60%, rgba(5, 6, 15, .35));
}
#globe-lock span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: rgba(11, 11, 20, .7); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px;
}
#globe-done {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: rgba(11, 11, 20, .72); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 16px; padding: 5px 12px; cursor: pointer;
}
#globe .cesium-widget-credits, #globe .cesium-viewer-bottom { display: none !important; }
#globe canvas { border-radius: 14px; }
#globe-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-family: var(--mono); font-size: 12px; }
#globe-crumb {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(12px + env(safe-area-inset-top)); z-index: 3;
  display: flex; gap: 7px; align-items: center;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-dim);
  background: rgba(11, 11, 20, .66);
  backdrop-filter: blur(8px);
  border-radius: 999px; padding: 6px 14px;
  pointer-events: none; max-width: calc(100% - 84px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .35s;
}
#globe-crumb.show { opacity: 1; }
#globe-crumb .sep { color: var(--ink-faint); opacity: .6; }
#globe-crumb .cur { color: var(--cyan); }
/* era badge (which year's borders are shown) — bottom-left, amber to match the borders */
#globe-era {
  position: absolute; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 3;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--amber); background: rgba(11, 11, 20, .66); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent);
  border-radius: 999px; padding: 5px 12px; pointer-events: none;
  opacity: 0; transition: opacity .35s;
}
#globe-era.show { opacity: 1; }

#no-layer { text-align: center; color: var(--ink-faint); font-size: 13px; padding: 36px 16px; }
#no-layer .badge { color: var(--cyan); }

/* ---------- episode fingerprint ---------- */
.fp {
  display: block; width: 100%; max-width: 360px; margin-top: 12px;
  border-radius: 8px; cursor: zoom-in; opacity: .95;
}
.fp:hover { opacity: 1; }

#fp-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(7, 7, 14, .9); backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 20px 16px 48px;
}
#fp-sheet { width: 100%; max-width: 720px; animation: kIn .35s ease; }
#fp-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
#fp-modal-title { font-family: var(--serif); font-optical-sizing: auto; font-size: 22px; font-weight: 500; letter-spacing: -.015em; }
#fp-modal-sub { font-size: 12px; margin-top: 2px; }
#fp-close { background: none; border: none; color: var(--ink-dim); font-size: 20px; cursor: pointer; padding: 0 4px; }
#fp-close:hover { color: var(--ink); }
.fp-section-label { margin: 22px 0 8px; }
#fp-big-time, #fp-big-map { display: block; width: 100%; border-radius: 10px; }

/* ---------- player bar ---------- */
:root { --tab-h: 54px; }
#playerbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: rgba(var(--bg-rgb), .86);
  backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
/* on browse views the mini-player sits ABOVE the tab bar; in the play view it's the
   bottom bar itself */
body:not(.is-play) #playerbar { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: 0; }

/* sticky bottom tab bar */
#tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 41;
  display: flex; align-items: stretch;
  background: rgba(var(--bg-rgb), .92); backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
#tabbar[hidden] { display: none; }
#tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; cursor: pointer; padding: 7px 0 6px; height: var(--tab-h);
  color: var(--ink-faint); transition: color .15s;
}
#tabbar .tab .ti { width: 22px; height: 22px; }
#tabbar .tab .tl { margin-top: 1px; }
#tabbar .tab .tl { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
#tabbar .tab:hover { color: var(--ink-dim); }
#tabbar .tab.active { color: var(--cyan); }
/* keep content clear of the fixed bars */
#view-home, #view-latest, #view-library, #view-crossings, #view-feed { padding-bottom: calc(var(--tab-h) + 24px); }
body.is-playing #view-home, body.is-playing #view-latest, body.is-playing #view-library,
body.is-playing #view-crossings, body.is-playing #view-feed { padding-bottom: calc(var(--tab-h) + 82px); }
/* the play view ends above the subtitle zone, so content never collides with the subs */
#view-play { padding-bottom: 190px; }

/* Crossings showcase — a visual bridge between two shows that share a node */
#cross-showcase[hidden] { display: none; }
.xc {
  display: block; width: 100%; text-align: left; background: none; cursor: pointer;
  border: none; border-top: 1px solid var(--line-soft); padding: 14px 2px 15px; color: inherit;
}
.xc:first-of-type { border-top: none; }
.xc:hover .xc-node { color: var(--cyan); }
.xc-node {
  display: block; font-family: var(--serif); font-optical-sizing: auto;
  font-size: 21px; font-weight: 500; letter-spacing: -.01em; line-height: 1.1;
  margin-bottom: 11px; transition: color .15s;
}
.xc-bridge { display: flex; align-items: flex-start; gap: 10px; }
.xc-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.xc-art { display: block; width: 42px; height: 42px; border-radius: 8px; overflow: hidden; background: var(--bg-lift); }
.xc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xc-show { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-ep { font-size: 12.5px; line-height: 1.35; color: var(--ink-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xc-link { flex: none; align-self: center; color: var(--purple); font-size: 15px; opacity: .8; padding-top: 12px; }
.xc-more { display: block; margin-top: 10px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
/* deep-linked crossing row gets a brief highlight so you see where you landed */
.cross-row.flash { animation: xflash 1.6s ease; }
@keyframes xflash { 0%, 40% { background: color-mix(in srgb, var(--cyan) 12%, transparent); } 100% { background: transparent; } }

/* curated "start here" strip on home */
#curated[hidden] { display: none; }
/* the curated set is the first thing a new listener should try — give it a real
   header and a warm tint so it reads as a featured shelf, not another list */
#curated { margin: 4px -10px 20px; padding: 13px 10px 4px; border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 8%, transparent), transparent 72%); }
.cur-head { margin: 0 0 6px; display: flex; flex-direction: column; gap: 3px; }
.cur-head .label { color: var(--amber); }
.cur-sub { font-size: 12px; line-height: 1.45; color: var(--ink-dim); }
#curated .list { margin-bottom: 4px; }
/* minor-mention chips in the story feed: word-sized, thumb + dotted name; the one
   being spoken right now lights cyan; tap → expands into a full card */
.n-chips { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 6px 2px 10px; opacity: .45; }
.n-chips.live { opacity: 1; }
.n-chips.prev { opacity: .7; }
.n-chip { display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  padding: 2px 0; cursor: pointer; font-family: var(--serif); font-size: 14.5px; color: var(--ink-dim); }
.n-chip .nc-ph { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; display: grid;
  place-items: center; font-size: 10px; color: var(--ink-faint); background: var(--bg-lift); flex: none; }
.n-chip .nc-ph img { width: 100%; height: 100%; object-fit: cover; }
.n-chip .nc-nm { border-bottom: 1px dotted color-mix(in srgb, var(--ink) 32%, transparent);
  white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.n-chip.now .nc-nm { color: var(--cyan); border-color: var(--cyan); }
.n-chip.now .nc-ph { box-shadow: 0 0 0 1.5px var(--cyan); }
.n-chips .k-hist { flex: 1 1 100%; }
/* ---------- auto glance ("settled") ----------
   Leave the phone alone while playing → the play view becomes a poster: big image,
   name, dates; map & timeline carry the where/when; the reading layers fade far
   back. Any touch removes body.settled instantly (see f-player). */
body.settled #view-play { animation: settleIn .9s ease; }
@keyframes settleIn { from { opacity: .55; } to { opacity: 1; } }
body.settled #k-card { grid-template-columns: 1fr; gap: 10px; }
body.settled #k-thumb {
  /* full-bleed: edge to edge, no frame — the image IS the screen in ambient */
  width: calc(100% + 2 * var(--pad)); margin-left: calc(-1 * var(--pad));
  height: min(52vh, 390px); border-radius: 0;
  box-shadow: none;
}
body.settled .kc-name { font-size: 34px; line-height: 1.08; }
body.settled .kc-dates-row { font-size: 15px; }
body.settled #k-gloss, body.settled .kc-more, body.settled #k-related { display: none; }
/* the story list gives up its SPACE too — the poster must fit above the fold */
body.settled #k-history, body.settled #k-livechips, body.settled #view-play .section-head { display: none; }
body.settled #cap-overlay { opacity: .85; }
/* the instruments get a touch more presence — they ARE the glance layer */
body.settled #nowglobe:not(.big) { width: 96px; height: 96px; }

/* scrub landed on this node — a brief wash so the eye finds it */
.k-hist.reveal, #k-card.reveal { animation: revealFlash 1.7s ease; border-radius: 10px; }
@keyframes revealFlash {
  0% { background: color-mix(in srgb, var(--cyan) 20%, transparent); }
  100% { background: transparent; }
}

/* returning listeners know what Gloss is — the demo shelf compresses to slim rows */
#curated.compact { padding: 8px 10px 2px; margin-bottom: 12px; }
#curated.compact .ep-desc, #curated.compact .fp, #curated.compact .wikify-btn { display: none; }
#curated.compact .ep-card { padding: 9px 0; }
#curated.compact .ep-card .ep-art { width: 38px; height: 38px; }
/* "next from <show>" card in jump-back-in */
.cont-card.next-up .cont-sub { color: var(--amber); }
.next-chip { font-family: var(--mono); font-size: 12px; color: var(--cyan);
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); border-radius: 50%;
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
#seek { position: relative; height: 16px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
#seek-fill { position: absolute; left: 0; top: 7px; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--purple)); width: 0; pointer-events: none; transition: height .1s, top .1s; }
#seek.scrubbing #seek-fill { height: 4px; top: 6px; }
/* grab handle at the play head — shows on hover / while scrubbing */
#seek-fill::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--purple); box-shadow: 0 1px 5px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .12s; }
#seek:hover #seek-fill::after, #seek.scrubbing #seek-fill::after { opacity: 1; }
#seek-ticks { position: absolute; inset: 0; pointer-events: none; }
/* a nudge moves the marks by a sub-pixel amount on a long episode — flash them so you
   can see the sync actually changed */
#seek-ticks.bumped .tick { animation: tickBump .55s ease; }
@keyframes tickBump {
  0% { background: var(--cyan); opacity: 1; transform: scaleY(2.4); }
  100% { background: var(--purple); transform: scaleY(1); }
}
.tick { position: absolute; top: 4px; width: 1.5px; height: 5px; background: var(--purple); opacity: .5; }
/* scrubbing: the nearest node's tick lights up and names itself. The label sits WELL
   above the bar — your finger is on the bar — in the spot the subtitles vacate. */
.tick.lit { opacity: 1 !important; background: var(--cyan); transform: scaleY(1.8) scaleX(1.6); transition: transform .12s ease; }
body.scrubbing #cap-overlay { display: none !important; }
#seek-label { position: absolute; bottom: 75px; font-family: var(--mono); font-size: 13px;
  color: var(--ink); background: var(--bg-lift); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 13px; white-space: nowrap; pointer-events: none; z-index: 46; max-width: 78vw;
  overflow: hidden; text-overflow: ellipsis; box-shadow: 0 8px 26px rgba(0,0,0,.35); }
#seek-label[hidden] { display: none; }
/* desktop hover: no finger in the way — the name hugs the bar, just above the tick */
#seek-label.near { bottom: 22px; font-size: 11.5px; padding: 4px 9px; text-align: center; }
/* #pb-titleline is gone: #pb-now says the show AND the episode, so the old title
   line was a second copy of the name — visible on browse views, where both rendered. */
/* IN the play view the header already names the show and episode, and the art is
   right there — repeating both in the bar stole the room the controls needed
   (speed pushed off-screen, ±s and the sleep timer unreachable). The mini-player
   on other views still needs them, so this is scoped to .is-play. */
/* the art is gone from the bar entirely — in the play view the header carries it,
   and on other views the title alone names the episode well enough */
#pb-art { display: none; }
body.is-play #pb-time { margin-top: 0; }
body.is-play #playerbar-row { padding-top: 10px; }
/* and the row must never overflow: the transport keeps its size, the clock gives way */
#playerbar-row { flex-wrap: nowrap; }
#pb-meta { flex: 0 1 auto; min-width: 0; }
#pb-time { overflow: hidden; text-overflow: ellipsis; }
#pb-back15, #pb-fwd30, #pb-play { flex: none; }
#playerbar-row { display: flex; align-items: center; gap: 9px; padding: 6px 12px 12px; max-width: 640px; margin: 0 auto; }
#pb-art { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--bg-lift); }
#pb-meta { flex: 1; min-width: 64px; }
#pb-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pb-time { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); letter-spacing: .02em; white-space: nowrap; margin-top: 22px; position: relative; z-index: 1; }
#pb-play {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--cyan); border: none; color: #08131a;
  cursor: pointer; transition: transform .12s, filter .15s;
  padding: 0;
}
#pb-play:hover { filter: brightness(1.08); }
#pb-play:active { transform: scale(.94); }
#pb-play svg { width: 18px; height: 18px; display: block; }
/* the two skip buttons: real targets, sized for a thumb on the move */
#pb-back15, #pb-fwd30 {
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-dim); cursor: pointer; padding: 7px 9px; flex: none; line-height: 1;
}
#pb-back15:hover, #pb-fwd30:hover { color: var(--cyan); border-color: var(--cyan); }
/* cc + the ±s timing nudge stack in one slim column; on/off must be unmistakable:
   ON is a filled pill, OFF is a hollow outline with a dimmed glyph */

#sync-open[hidden] { display: none; }
#sync-open.nudged { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); opacity: 1; }

#pb-back15:hover, #pb-fwd30:hover, #pb-speed:hover { color: var(--cyan); }
#pb-fwd30:focus-visible, #pb-back15:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- episode artwork (only when a feed has distinct per-episode art) ---------- */
.ep-card.has-art {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-areas:
    "art  head"
    "rest rest";
  column-gap: 14px; row-gap: 7px;
  align-items: start;
}
.ep-card.has-art .ep-art { grid-area: art; }
.ep-card.has-art .ep-head { grid-area: head; align-self: center; }
.ep-card.has-art .ep-rest { grid-area: rest; }
.ep-card .ep-art { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; background: var(--bg-lift); margin-top: 3px; }

/* ---------- settings ---------- */
#gear {
  background: none; border: none; color: var(--ink-dim); cursor: pointer;
  font-size: 16px; padding: 10px 9px; margin: -8px -6px -8px auto; line-height: 1;
}
#gear:hover { color: var(--cyan); }
#ambient {
  background: none; border: none; color: var(--ink-dim); cursor: pointer;
  font-size: 15px; padding: 10px 7px; margin: -8px 0; line-height: 1;
}
#ambient:hover { color: var(--cyan); }
#ambient[hidden] { display: none; }
/* the gear normally pushes itself right with margin-left:auto — when ambient is
   showing, IT takes that job so the pair sits together */
#ambient:not([hidden]) { margin-left: auto; }
#ambient:not([hidden]) ~ #gear { margin-left: 0; }
#settings-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(7, 7, 14, .82); backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
}
#settings-sheet {
  width: 100%; max-width: 560px;
  max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-lift);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 0 var(--pad) calc(28px + env(safe-area-inset-bottom));
  animation: sheetUp .3s cubic-bezier(.2, .7, .3, 1);
}
@keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
/* sticky so the close ✕ is ALWAYS reachable no matter how far you scroll */
#settings-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0 12px; margin-bottom: 2px;
  background: var(--bg-lift); border-bottom: 1px solid var(--line-soft);
}
#settings-head h2 { font-family: var(--serif); font-optical-sizing: auto; font-size: 20px; font-weight: 500; }
#settings-close {
  background: none; border: none; color: var(--ink-dim); font-size: 22px; cursor: pointer;
  line-height: 1; padding: 6px 8px; margin: -6px -8px -6px 0; /* ~40px tap target */
}
#settings-close:hover { color: var(--ink); }
/* section labels inside settings sit tighter than the page-level ones */
.sh-set { margin: 20px 0 4px; }
.sh-set:first-of-type { margin-top: 12px; }
/* stacked setting (e.g. model picker): sub-text full width, controls below */
.setting-stack { flex-direction: column; align-items: stretch; gap: 12px; }
.setting-stack .mpick { display: flex; gap: 8px; }
.setting {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line-soft); cursor: pointer;
  /* Half these rows are <button> and half are <a>, and the class never undid the
     browser's own button chrome — so the button ones rendered as grey boxes with hard
     borders, centred monospace text, while their neighbours looked like the app. Reset
     to "a row of text", whatever element it happens to be. */
  width: 100%; box-sizing: border-box; text-align: left;
  background: none; border-left: 0; border-right: 0; border-bottom: 0;
  font: inherit; color: inherit; -webkit-appearance: none; appearance: none;
}
.setting:hover .setting-text { color: var(--cyan); }
a.setting, a.setting:visited { color: inherit; text-decoration: none; }
.setting-text { font-size: 14px; }
.setting-sub { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.toggle {
  flex: none; width: 42px; height: 24px; border-radius: 13px;
  background: var(--line); border: none; position: relative; cursor: pointer; transition: background .2s;
}
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-dim); transition: transform .2s, background .2s; }
.toggle.on { background: rgba(99, 230, 211, .3); }
.toggle.on::after { transform: translateX(18px); background: var(--cyan); }

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

/* exact sync by ear: tap the word you just heard */
#sync-byword { display: block; margin: 10px 0 0; }
#sync-byword.open .cev { transform: rotate(180deg); }
#sync-words { margin-top: 8px; }
#sync-words[hidden] { display: none; }
.sw-hint { display: block; font-size: 11.5px; line-height: 1.45; color: var(--ink-faint); margin-bottom: 8px; }
.sw-strip { display: flex; flex-wrap: wrap; gap: 4px 5px; max-height: 132px; overflow-y: auto; }
.sw {
  font: inherit; font-size: 13px; cursor: pointer; color: var(--ink-dim);
  background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px 5px;
}
.sw:hover { color: var(--ink); border-color: var(--line); }
.sw.at { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }

/* honest audio status — the rest of the view is usable while this buffers */
/* it lives in the CLOCK row now — that row is blank exactly while audio loads, so
   the label has the space to itself instead of sitting on top of cc / 1× */
#pb-load { font-family: var(--mono); font-size: 10.5px; color: var(--cyan); white-space: nowrap; margin: 0 auto; }
#pb-load[hidden] { display: none; }
#pb-load::after { content: ''; display: inline-block; width: 4px; height: 4px; margin-left: 5px;
  border-radius: 50%; background: currentColor; animation: pbPulse 1s ease-in-out infinite; }
@keyframes pbPulse { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }

/* tap-to-enlarge globe: big enough to read, overlapping the story rather than
   taking over the screen. Drag to move, bottom-right corner to resize. */
#now-row { position: relative; }
/* the enlarged globe: a live Cesium viewer in a TRANSPARENT box — only the sphere
   itself covers anything. Handles do move/resize; the surface belongs to Cesium. */
#globe-big-box {
  position: absolute; right: 0; top: -4px; z-index: 26;
  width: 250px; height: 250px; background: transparent;
}
#globe-big-box[hidden] { display: none; }
#globe-mini { width: 100%; height: 100%; }
#globe-mini .cesium-viewer, #globe-mini .cesium-widget, #globe-mini canvas { width: 100% !important; height: 100% !important; }
#globe-mini .cesium-widget-credits, #globe-mini .cesium-viewer-bottom { display: none !important; }
#globe-big-box > button {
  position: absolute; z-index: 3; width: 28px; height: 28px;
  display: grid; place-items: center; padding: 0;
  background: rgba(11, 11, 20, .74); border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink-dim); cursor: pointer; font-size: 13px; line-height: 1;
}
#globe-big-box .gb-x { top: 0; right: 0; }
#globe-big-box .gb-move { bottom: 0; left: 0; cursor: grab; touch-action: none; }
#globe-big-box .gb-move:active { cursor: grabbing; }
#globe-big-box .gb-size { bottom: 0; right: 0; cursor: nwse-resize; touch-action: none; }
/* era + breadcrumb, compacted for the box */
#globe-big-box #globe-crumb { top: 2px; max-width: calc(100% - 60px); padding: 4px 10px; font-size: 10px; }
#globe-big-box #globe-era { left: 50%; transform: translateX(-50%); bottom: 3px; padding: 3px 9px; font-size: 9.5px; }
#globe-expand {
  position: absolute; right: 6px; top: 6px; z-index: 27;
  background: rgba(11, 11, 20, .72); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 8px; color: var(--cyan);
  font-size: 13px; line-height: 1; padding: 5px 7px; cursor: pointer;
}
#globe-expand[hidden] { display: none; }
/* the enlarged globe overlaps what's below, so give the feed a little breathing room */
body.globe-big #k-history { margin-top: 160px; }
/* while the big Cesium globe is open, the mini globe is redundant — it steps aside
   and the timeline takes the full width */
body.globe-big #nowglobe, body.globe-big #geo-cap { display: none; }

/* "N trailers & promos hidden" — a quiet line with the choices right there */
.promo-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin: 22px 0 4px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.pn-txt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.pn-act {
  font-family: var(--mono); font-size: 11px; letter-spacing: .03em; cursor: pointer;
  background: none; color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; transition: color .15s, border-color .15s;
}
.pn-act:hover { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 50%, var(--line)); }
.pn-always { color: var(--ink-faint); }

/* "should be saying …" — live proof of what the current offset lines up with */
#sync-now { font-size: 13px; line-height: 1.5; color: var(--ink-faint); margin: 9px 0 2px; }
#sync-now:empty { display: none; }
.sn-lab { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
#sync-now .sn-at { color: var(--cyan); font-weight: 600; }

/* entity words in the caption are links into the knowledge layer — a quiet dotted
   underline, NOT a colour change (coloured words inside subtitles read as noise) */
#caption span.ent { cursor: pointer;
  text-decoration: underline dotted rgba(255, 255, 255, .5);
  text-underline-offset: 3px; }
#caption span.ent:hover { text-decoration-style: solid; }

/* welcome demo — the real app in miniature */
#w-demo { text-align: left; margin: 18px 0 6px; }
.wd-cap { font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--ink-faint); min-height: 4.6em; }
.wd-cap span { transition: color .2s; }
.wd-cap span.spoken { color: var(--ink); }
.wd-cap span.now { color: var(--cyan); }
.wd-hud { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.wd-tl { flex: 1; height: 40px; min-width: 0; }
.wd-gl { flex: none; width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.wd-node { min-height: 92px; opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; }
.wd-node.show { opacity: 1; transform: none; }
.wd-kick { font-family: var(--mono); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; }
.wd-name { font-family: var(--serif); font-size: 19px; font-weight: 500; margin: 2px 0 1px; }
.wd-dates { font-family: var(--mono); font-size: 10.5px; color: var(--amber); }
.wd-gloss { font-size: 12px; line-height: 1.4; color: var(--ink-dim); margin-top: 3px; }

/* search results: the ＋ is a real button now, and the row invites a look inside */
.afr-add {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; font-size: 19px; line-height: 1;
  background: color-mix(in srgb, var(--cyan) 14%, transparent);
  color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--line));
  cursor: pointer;
}
.afr-add:active { transform: scale(.94); }

/* your web — the home teaser for the personal graph */
#your-web .yw-line { display: block; padding: 12px 2px 14px; color: var(--ink); text-decoration: none; font-size: 14px; }
#your-web .yw-line b { color: var(--cyan); font-family: var(--mono); }
#your-web .yw-open { display: block; margin-top: 4px; color: var(--dim); font-size: 12px; letter-spacing: .03em; }
#your-web .yw-line:active .yw-open, #your-web .yw-line:hover .yw-open { color: var(--cyan); }

.au-summary { display: flex; justify-content: space-between; padding: 10px 2px; font-size: 13px; color: var(--dim); border-bottom: 1px solid var(--line-soft); }
.au-summary b { color: var(--cyan); font-family: var(--mono); }
.au-wl { padding: 4px 2px 8px; border-bottom: 1px solid var(--line-soft); }

/* connection peek — tap a line in the web, see where the link comes from */
#web-box { position: relative; }
#conn-peek {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px;
  backdrop-filter: blur(6px);
}
#conn-peek[hidden] { display: none; }
#conn-peek .cp-label { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); text-align: center; padding: 2px 0 6px; }
#conn-peek .cp-label.dim { color: var(--dim); }
#conn-peek .cp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: none; border: 0; border-top: 1px solid var(--line-soft);
  padding: 7px 2px; cursor: pointer; text-align: left;
}
#conn-peek .cp-nm { font-family: var(--serif); font-size: 14.5px; color: var(--ink); }
#conn-peek .cp-jump { font-family: var(--mono); font-size: 11px; white-space: nowrap; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
#conn-peek .cp-jump.past { color: var(--cyan); }
#conn-peek .cp-jump.ahead { color: var(--dim); }

/* topic-first listening — one node, every episode that touches it */
.topic-hd { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px 0 10px; align-items: start; }
.topic-hd:not(:has(.topic-ph:not([hidden]))) { grid-template-columns: 1fr; }
.topic-ph img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
.topic-nm { font-family: var(--serif); font-size: 26px; margin: 2px 0 4px; }
.topic-meta { color: var(--dim); font-size: 12.5px; }
.topic-meta a { color: var(--cyan); text-decoration: none; }
.topic-line { font-family: var(--serif); font-style: italic; color: var(--dim); font-size: 14px; margin-top: 7px; line-height: 1.55; max-width: 56ch; }
.topic-ep { display: flex; gap: 12px; padding: 12px 2px 13px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.topic-ep .te-art { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; background: var(--bg-lift); }
.topic-ep .te-art-none { background: var(--bg-lift); }
.topic-ep .te-body { flex: 1; min-width: 0; }
.topic-ep .te-meta { display: flex; gap: 10px; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin: 0 0 7px; }
/* an episode you've already heard should never look identical to one you haven't */
.topic-ep.heard { opacity: .62; }
.topic-ep .te-heard { font-family: var(--mono); font-size: 9px; color: var(--green, #7fd88f); letter-spacing: .04em; }
.topic-ep .te-heard.part { color: var(--cyan); }
.topic-sort { display: flex; align-items: center; gap: 8px; padding: 10px 0 4px; flex-wrap: wrap; }
.topic-sort button {
  background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-dim);
  font-family: var(--mono); font-size: 10.5px; padding: 4px 10px; cursor: pointer;
}
.topic-sort button.on { color: var(--cyan); border-color: var(--cyan); }
.topic-sort .label { margin-right: auto; }
.topic-ep .te-top { display: flex; gap: 8px; align-items: baseline; }
.topic-ep .te-show { color: var(--amber); font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }
.topic-ep .te-core { color: var(--cyan); font-family: var(--mono); font-size: 9px; border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); border-radius: 999px; padding: 0 6px; }
.topic-ep .te-title { font-family: var(--serif); font-size: 16.5px; line-height: 1.35; margin: 3px 0 7px; cursor: pointer; }
.topic-ep .te-title:hover { color: var(--cyan); }
.topic-ep .te-jumps { display: flex; flex-wrap: wrap; gap: 6px; }
.topic-ep .te-jump { font-family: var(--mono); font-size: 11px; color: var(--dim); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.topic-ep .te-jump:hover { color: var(--cyan); border-color: var(--cyan); }

/* the invite-only note for anonymous visitors */
#invite-note { font-family: var(--serif); font-size: 14px; line-height: 1.6; color: var(--ink-dim);
  padding: 12px 2px 14px; border-bottom: 1px solid var(--line-soft); }
#invite-note .in-mark { color: var(--cyan); }
#invite-note b { color: var(--ink); font-weight: 600; }
#invite-note a { color: var(--cyan); }

.ep-queue { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: 13px; padding: 2px 10px; cursor: pointer; font-family: var(--mono); line-height: 1.3; }
.ep-queue:hover { color: var(--cyan); border-color: var(--cyan); }
/* up next — one quiet line in the play view */
#up-next { display: flex; align-items: center; gap: 8px; padding: 10px 2px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--dim); cursor: pointer; }
#up-next:hover .un-title { color: var(--cyan); }
#up-next .un-lab { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
#up-next .un-title { color: var(--ink); font-family: var(--serif); }
#up-next .un-skip { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; background: none; cursor: pointer; }

.sp-sleep { display: flex; gap: 5px; align-items: center; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.sp-sleep-lab { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-right: 2px; }
.sp-sleep button { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-family: var(--mono); font-size: 10px; padding: 3px 8px; cursor: pointer; }
.sp-sleep button.on { color: var(--cyan); border-color: var(--cyan); }
#sp-thisshow { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-family: var(--mono); font-size: 10px; padding: 3px 8px; cursor: pointer; }
#sp-thisshow.on { color: var(--amber); border-color: var(--amber); }

/* episode ＋ menu (queue / playlists) */
#ep-menu { position: fixed; z-index: 60; background: var(--card, var(--bg-lift)); border: 1px solid var(--line); border-radius: 12px; padding: 5px; min-width: 190px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
#ep-menu .epm-row { display: flex; justify-content: space-between; gap: 10px; width: 100%; background: none; border: 0; text-align: left; padding: 9px 11px; font-size: 13.5px; color: var(--ink); cursor: pointer; border-radius: 8px; }
#ep-menu .epm-row:hover { background: color-mix(in srgb, var(--cyan) 10%, transparent); }
#ep-menu .epm-n { color: var(--dim); font-family: var(--mono); font-size: 11px; }
#ep-menu .epm-sep { border-top: 1px solid var(--line-soft); margin: 4px 6px; }
/* playlists in the library */
.pl-row { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.pl-name { font-family: var(--serif); font-size: 16.5px; }
.pl-n { color: var(--dim); font-family: var(--mono); font-size: 11px; }
.pl-play { margin-left: auto; }
.pl-del { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 13px; }
.pl-items { padding: 0 2px 8px; }
.pl-item { display: flex; gap: 10px; align-items: baseline; padding: 5px 0 5px 14px; font-size: 13px; }
.pli-t { color: var(--ink); }
.pli-s { color: var(--dim); font-size: 11px; }
.pli-rm { margin-left: auto; background: none; border: 0; color: var(--faint); cursor: pointer; }
/* folder chips on the feed page */
#feed-folders { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.fold-chip { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-family: var(--mono); font-size: 10px; padding: 2px 9px; cursor: pointer; }
.fold-chip.on { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, transparent); }
.fold-chip.add:hover { color: var(--cyan); border-color: var(--cyan); }

/* ask the library */
#lib-search { padding: 10px 0 4px; position: relative; }
#node-q { width: 100%; background: var(--bg-lift); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-family: var(--serif); font-size: 14.5px; padding: 10px 16px; }
#node-q:focus { outline: none; border-color: color-mix(in srgb, var(--cyan) 60%, transparent); }
#node-hits { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--card, var(--bg-lift)); border: 1px solid var(--line); border-radius: 14px; margin-top: 4px; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,.3); }
.nq-hit { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; background: none; border: 0; border-top: 1px solid var(--line-soft); padding: 10px 14px; cursor: pointer; text-align: left; }
.nq-hit:first-child { border-top: 0; }
.nq-hit:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.nq-name { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.nq-meta { font-family: var(--mono); font-size: 10px; color: var(--dim); white-space: nowrap; }
#node-recent { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px 2px; scrollbar-width: none; }
#node-recent::-webkit-scrollbar { display: none; }
.nr-lab { font-family: var(--mono); font-size: 9.5px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; align-self: center; }
.nr-chip { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: 12px; padding: 3px 11px; cursor: pointer; white-space: nowrap; font-family: var(--serif); }
.nr-chip:hover { color: var(--cyan); border-color: var(--cyan); }

/* home paints ONCE, whole — sections stacking in one at a time was 0.84 CLS */
#view-home:not(.ready) > * { visibility: hidden; }
#view-home:not(.ready)::after { content: '⁂'; display: block; text-align: center; padding: 60px 0; color: var(--dim); font-size: 22px; animation: homebreathe 1.2s ease-in-out infinite; }
@keyframes homebreathe { 50% { opacity: .35; } }

/* connections accordion off on touch — coming back improved (see /todo) */
@media (pointer: coarse) {
  #web-open, #web-wrap { display: none !important; }
}

#ep-search { flex: 1 1 100%; background: var(--bg-lift); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-family: var(--serif); font-size: 13.5px; padding: 8px 14px; margin-bottom: 6px; }
#ep-search:focus { outline: none; border-color: color-mix(in srgb, var(--cyan) 55%, transparent); }
.ep-filters { flex-wrap: wrap; }

/* the clock, on the slider's shoulders — elapsed left, remaining right (negative),
   the way every serious player does it. Frees the transport row entirely. */
#pb-times {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  max-width: 640px; margin: 0 auto; padding: 2px 8px 1px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); letter-spacing: .02em;
}
#pb-remain { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
#pb-remain:hover { color: var(--cyan); }
body:not(.is-playing) #pb-times { display: none; }

/* the sleep timer is a control, not a secret in the speed pop-up */
#pb-sleep {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-dim); font-size: 13px; padding: 6px 10px; cursor: pointer; flex: none; line-height: 1;
}
#pb-sleep.on { color: var(--cyan); border-color: var(--cyan); }
#sleep-pop {
  position: fixed; z-index: 60; background: var(--card, var(--bg-lift));
  border: 1px solid var(--line); border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,.35); min-width: 170px;
}
#sleep-pop[hidden] { display: none; }
#sleep-pop button {
  display: block; width: 100%; background: none; border: 0; text-align: left;
  padding: 9px 12px; font-size: 14px; color: var(--ink); cursor: pointer; border-radius: 8px;
  font-family: var(--serif);
}
#sleep-pop button:hover { background: color-mix(in srgb, var(--cyan) 10%, transparent); }
#sleep-pop button.on { color: var(--cyan); }
#sleep-pop .sp-head { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 6px 12px 2px; }

/* ---------- the player bar: two rows, and the width finally does some work ----------
   Row 1: the clock alone, on the slider's shoulders (elapsed / −remaining).
   Row 2: one line of everything pressable. There was a lane of empty space either
   side of the play button, so the utilities live there — cc and speed to the left,
   the sleep timer to the right — and the play button stays dead centre. */
#pb-transport {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 640px; margin: 0 auto; padding: 0 8px 4px;
}
#pb-transport #pb-meta { position: absolute; left: 12px; pointer-events: none; }
.pb-utils { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; }
.pb-utils:first-of-type { justify-content: flex-start; }   /* left lane  */
.pb-utils:last-of-type { justify-content: flex-end; }      /* right lane */
.pb-utils button {
  white-space: nowrap; background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-dim); font-family: var(--mono); font-size: 10.5px;
  padding: 4px 9px; cursor: pointer; line-height: 1.3; min-width: 28px;
  /* a lane that runs out of room must give way, never sit on top of the transport */
  flex: 0 1 auto; min-width: 0; overflow: hidden;
}
.pb-utils button:hover { color: var(--cyan); border-color: var(--cyan); }
.pb-utils #pb-cc.on { background: #0f8f7d; color: #fff; border-color: #0f8f7d; font-weight: 700; }
.pb-utils #pb-cc:not(.on) { opacity: .75; }
.pb-utils #pb-sleep.on { color: var(--cyan); border-color: var(--cyan); }
/* Narrow phones: the ± sync pill is an alignment tool, not transport — it gives up
   its place before anything can crowd the 30⟳ button. (It stays reachable: the sync
   panel opens from the knowledge card too.) */
@media (max-width: 389px) {
  #sync-open { display: none; }
  .pb-utils button { padding: 4px 7px; font-size: 10px; }
  #pb-transport { gap: 8px; }
}
#playerbar-row { display: none; }

/* ---------- uploads: the sheet you confirm in, the strip you watch ---------- */
#up-sheet {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(4,4,10,.62); backdrop-filter: blur(3px);
}
#up-sheet[hidden] { display: none; }
#up-card {
  width: 100%; max-width: 460px; background: var(--bg-lift); border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
#up-card .uc-head { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
#uc-name { font-family: var(--serif); font-size: 18px; margin: 8px 0 2px; word-break: break-word; }
#uc-size { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); margin-bottom: 14px; }
#up-card .uc-go {
  display: block; width: 100%; text-align: left; margin-bottom: 8px; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  color: var(--ink); font-family: var(--serif); font-size: 14.5px; line-height: 1.35;
}
#up-card .uc-go:hover { border-color: var(--cyan); }
#up-card .uc-go.alt { color: var(--ink-dim); }
#up-card .uc-cancel {
  display: block; width: 100%; background: none; border: 0; cursor: pointer; padding: 10px;
  color: var(--faint); font-family: var(--mono); font-size: 11px;
}
/* the strip: one hairline of truth about a transfer that can take ten minutes */
#up-strip {
  position: fixed; left: 0; right: 0; bottom: 0; /* JS parks it exactly on top of whatever bar is showing */
  z-index: 55; background: var(--bg-lift); border-top: 1px solid var(--line);
  padding: 7px 12px 8px;
}
#up-strip[hidden] { display: none; }
#up-strip .us-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
#us-name { font-family: var(--serif); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#us-pct { font-family: var(--mono); font-size: 11px; color: var(--cyan); flex: none; }
#us-bar { height: 2px; background: var(--line); margin: 6px 0 4px; overflow: hidden; }
#us-bar i { display: block; height: 100%; width: 0; background: var(--cyan); transition: width .25s linear; }
#us-bar.wait i { width: 35%; animation: us-sweep 1.4s ease-in-out infinite; }
@keyframes us-sweep { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
#us-note { font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); }
#us-retry {
  flex: none; background: none; border: 1px solid var(--cyan); border-radius: 999px;
  color: var(--cyan); font-family: var(--mono); font-size: 10.5px; padding: 3px 10px; cursor: pointer;
}
#us-retry[hidden] { display: none; }

/* the ask bar's non-result states — a search that says nothing looks broken */
#node-hits.nq-note-box { border: 0; background: none; padding: 0; }
.nq-note { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); padding: 8px 12px; }

/* one row: look anything up, or ＋ to add a show */
#lib-search .ls-row { display: flex; align-items: center; gap: 8px; }
#lib-search .ls-row #node-q { flex: 1 1 auto; min-width: 0; }
#add-feed-toggle {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: none; border: 1px solid var(--line); color: var(--ink-dim);
  font-size: 17px; line-height: 1; cursor: pointer; display: flex;
  align-items: center; justify-content: center; padding: 0;
}
#add-feed-toggle:hover { color: var(--cyan); border-color: var(--cyan); }

/* Listen keeps one skeleton — a section with nothing in it still holds its place */
.sec-empty { font-family: var(--mono); font-size: 11px; color: var(--faint); padding: 6px 0 14px; }
#home-top { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; }
#home-top .seg, #home-top #add-feed-toggle {
  flex: 1 1 auto; background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-dim); font-family: var(--mono); font-size: 12px; padding: 9px 12px;
  cursor: pointer; white-space: nowrap; width: auto; height: auto;
}
#home-top .seg:hover, #home-top #add-feed-toggle:hover { color: var(--cyan); border-color: var(--cyan); }
/* the ask bar is the hero of its own room now */
#view-look #lib-search { margin: 14px 0 18px; }
#view-look #node-q { width: 100%; }
#look-graph { margin-top: 18px; display: block; }

.look-scale { font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink-dim); margin: 0 0 18px; }
.look-scale b { color: var(--ink); font-weight: 600; }

.yours-intro { font-family: var(--serif); font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); margin: 2px 0 18px; }

.af-opml { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* ⇩ on an episode row: quiet until it means something */
.ep-dl { background: none; border: 0; color: var(--ink-faint); font-family: var(--mono); font-size: 11px; cursor: pointer; padding: 0 2px; }
.ep-dl:hover { color: var(--cyan); }
.ep-dl.on { color: var(--cyan); }

.sp-audio { display: flex; gap: 8px; padding: 8px 10px 10px; border-top: 1px solid var(--line); margin-top: 6px; }
.sp-audio button {
  flex: 1 1 0; background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-dim); font-family: var(--mono); font-size: 10.5px; padding: 6px 8px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-audio button.on { color: var(--cyan); border-color: var(--cyan); }

/* chapters: the show's own structure, when it publishes one */
#chapters { margin: 6px 0 18px; }
#chapters[hidden] { display: none; }
#chapters .ch-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
#chapters .ch-now { font-family: var(--serif); font-size: 13px; color: var(--cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chapters .ch-list { display: flex; flex-direction: column; }
#chapters .ch-row {
  display: flex; gap: 10px; align-items: baseline; text-align: left; width: 100%;
  background: none; border: 0; border-top: 1px solid var(--line); padding: 7px 2px; cursor: pointer;
  color: var(--ink-dim); font-family: var(--serif); font-size: 13.5px;
}
#chapters .ch-row:hover { color: var(--ink); }
#chapters .ch-row.on { color: var(--cyan); }
#chapters .ch-t { font-family: var(--mono); font-size: 10.5px; color: var(--faint); flex: none; min-width: 42px; }
#chapters .ch-row.on .ch-t { color: var(--cyan); }

/* the identity line inside the player bar */
#pb-now {
  display: flex; align-items: center; gap: 8px; width: 100%; max-width: 640px;
  margin: 0 auto; padding: 5px 8px 2px; background: none; border: 0; cursor: pointer;
  text-align: left; color: inherit;
}
#pb-now[hidden] { display: none; }
#pb-now img { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; flex: none; background: var(--bg-lift); }
/* STACKED, one line each — side by side truncated both of them at once ("Fantasy
   draft: 2028 presidential r…" next to "TODAY, EXPLAIN…"), which is the one thing the
   line exists to prevent. Show above, small; episode below, in full width. */
#pb-now-meta { min-width: 0; display: flex; flex-direction: column; gap: 0; overflow: hidden; }
#pb-now-feed {
  order: -1; font-family: var(--mono); font-size: 8px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#pb-now-title {
  font-family: var(--serif); font-size: 13px; line-height: 1.25; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.is-play #topbar #brand, body.is-play #topbar #topbar-np, body.is-play #topbar #who, body.is-play #topbar #signin-btn { display: none; }
/* the bar's identity line appears on the play view only while the header is collapsed
   — so the episode is named exactly once, never zero times */
body.is-play #pb-now { display: none; }
body.is-play #pb-now.show-on-play { display: flex; }

/* the episode, legible: art beside a title that is allowed to wrap */
body.is-play #np-head { display: grid; grid-template-columns: 56px 1fr; gap: 13px; align-items: start; margin: 2px 0 12px; }
body.is-play #np-head img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--bg-lift); }
body.is-play #np-feed { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 3px; }
body.is-play #np-title { font-family: var(--serif); font-size: 19px; line-height: 1.25; margin: 0; font-weight: 500; }

/* When there is no layer, the play view was a sentence marooned in a blank screen.
   The description and chapters are RIGHT THERE and were being hidden by focus mode —
   which only makes sense once a layer exists to take the space. */
body.is-play:not(.has-layer) #np-desc { display: block; }
body.is-play:not(.has-layer) #np-desc-text { -webkit-line-clamp: 12; line-clamp: 12; }
body.is-play:not(.has-layer) #chapters { display: block; }
body.is-play:not(.has-layer) #k-empty { padding: 18px 10px 8px; }

/* one episode, at rest */
.epv-head { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: start; margin: 8px 0 16px; }
.epv-art { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; background: var(--bg-lift); }
.epv-show { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.epv-title { font-family: var(--serif); font-size: 22px; line-height: 1.22; margin: 4px 0 8px; font-weight: 500; }
.epv-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
#ep-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
#ep-actions .act { font-size: 12px; padding: 8px 14px; }
.epv-desc { font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--ink-dim); margin: 0 0 10px; }
.epv-desc.clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.epv-more { font-size: 11px; padding: 4px 12px; margin-bottom: 18px; }
.epv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.epv-chip {
  background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-dim);
  font-family: var(--serif); font-size: 13px; padding: 4px 11px; cursor: pointer;
}
.epv-chip:hover { color: var(--cyan); border-color: var(--cyan); }

/* the index: a wall of names, no canvas involved */
.idx-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0 8px; }
.idx-bar .label { margin-right: auto; }
.idx-bar button { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-dim); font-family: var(--mono); font-size: 10.5px; padding: 4px 10px; cursor: pointer; }
.idx-bar button.on { color: var(--cyan); border-color: var(--cyan); }
.idx-wall { display: flex; flex-wrap: wrap; gap: 5px 6px; }
.idx-name {
  background: none; border: 1px solid var(--line-soft); border-radius: 999px; cursor: pointer;
  color: var(--ink-dim); font-family: var(--serif); font-size: 12.5px; padding: 3px 9px;
  display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%;
}
.idx-name:hover { color: var(--cyan); border-color: var(--cyan); }
.idx-name .idx-n { font-family: var(--mono); font-size: 8.5px; color: var(--faint); }
.idx-pager { display: flex; gap: 8px; justify-content: center; padding: 14px 0 4px; }
.idx-pager button { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-dim); font-family: var(--mono); font-size: 11px; padding: 5px 14px; cursor: pointer; }

/* ============================================================================
   BIG SCREENS — a television is not a big phone.
       ┌────────────────────────────────────────────────────────────┐
       │ TIMELINE — full width: when, for the whole episode          │
       ├──────────────┬──────────────────────────────┬──────────────┤
       │ WEB          │ THE STORY                    │ GLOBE        │
       │ how it hangs │ what is being said NOW       │ where        │
       │ together     │ (and what just was)          │ + caption    │
       ├──────────────┴──────────────────────────────┴──────────────┤
       │ SUBTITLES — the biggest text on the screen                  │
       │ TRANSPORT                                                   │
       └────────────────────────────────────────────────────────────┘
   Nobody scrolls a TV, so this is a fixed frame that updates in place. It is
   watched from three metres, so nothing is phone-sized. And the audio is the
   programme — the columns inform the middle, they don't compete with it.
   ========================================================================== */
@media (min-width: 1100px) {
  .view { max-width: 1180px; }
  #view-play { max-width: none; padding: 4px 30px 0; }

  body.is-play #knowledge {
    display: grid;
    grid-template-columns: 23% 1fr 28%;
    grid-template-rows: auto 1fr;
    column-gap: 30px;
    align-items: start;
  }
  /* row 1: the timeline, the whole width, alone */
  body.is-play #nowstrip {
    grid-column: 1 / -1; grid-row: 1;
    position: static; margin: 0; padding: 0 0 10px !important; background: none; border: 0;
  }
  body.is-play #now-row { display: block; }
  body.is-play #nowtime { width: 100%; }

  /* row 2: web · story · globe */
  body.is-play #rail-left  { grid-column: 1; grid-row: 2; position: sticky; top: 76px; }
  body.is-play #rail-right { grid-column: 3; grid-row: 2; position: sticky; top: 76px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  body.is-play #k-empty, body.is-play #k-live, body.is-play #k-nav,
  body.is-play #k-card, body.is-play #k-history, body.is-play #k-livechips,
  body.is-play #k-upnext, body.is-play #k-related, body.is-play #k-hostrow { grid-column: 2; }
  /* NEWEST FIRST on a big screen. The phone's feed grows downward and you scroll to
     follow it; nobody scrolls a television, so a growing feed just pushes the live node
     off the bottom — which is exactly what "the flow doesn't follow along" was. The
     live card sits at the top and the story recedes beneath it. */
  body.is-play #k-card { order: -1; }
  body.is-play #k-history { display: flex; flex-direction: column-reverse; max-height: 52vh; overflow: hidden; }
  body.is-play #k-history > * { flex: none; }

  /* the globe is the right column's whole job */
  body.is-play #rail-right #nowglobe { width: 100%; height: auto; aspect-ratio: 1; max-width: 420px; }
  body.is-play #rail-right #geo-cap { font-size: 16px; text-align: center; }
  body.is-play #rail-left #web-wrap { position: static; }
  body.is-play #rail-left #web-box { height: min(52vh, 560px); }

  /* the story, at reading distance */
  body.is-play #k-card .k-name { font-size: 32px; }
  body.is-play #k-card .k-gloss { font-size: 18px; line-height: 1.5; }
  body.is-play .k-hist .kh-name { font-size: 19px; }
  body.is-play #np-head { max-width: none; }
  #playerbar #pb-now, #playerbar #pb-times, #playerbar #pb-transport { max-width: 1100px; }

  /* SUBTITLES: the text you actually read, so the biggest on the screen */
  #caption { max-width: min(80%, 1100px); font-size: 30px; line-height: 1.45; }
}

/* three metres away, not thirty centimetres */
@media (min-width: 1600px) {
  body.is-play #k-card .k-name { font-size: 40px; }
  body.is-play #k-card .k-gloss { font-size: 21px; line-height: 1.55; }
  body.is-play .k-hist .kh-name { font-size: 22px; }
  body.is-play #rail-right #geo-cap { font-size: 19px; }
  #caption { font-size: 40px; max-width: min(74%, 1400px); }
  #playerbar #pb-now-title { font-size: 18px; }
  #playerbar #pb-now-feed { font-size: 11px; }
}

/* ---------- lean-back chrome: hidden transport, visible progress ---------- */
/* On a big screen (and in ambient anywhere) the buttons go away when nobody is
   reaching for them. The tick bar and the clock stay: they answer "still playing,
   how far in" without asking you to do anything — which is the whole difference
   between a control and an indicator. */
body.chrome-hidden #pb-transport,
body.chrome-hidden #pb-now,
body.settled #pb-transport,
body.settled #pb-now { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
body.chrome-hidden #playerbar,
body.settled #playerbar { background: none; border-top: 0; backdrop-filter: none; }
body.chrome-hidden #pb-times,
body.settled #pb-times { opacity: .55; transition: opacity .5s ease; }
#pb-transport, #pb-now, #pb-times, #playerbar { transition: opacity .35s ease, background .35s ease; }
/* the install strip never belongs on a television */
@media (min-width: 1100px) { #install-nudge { display: none !important; } }

/* ---------- what an episode is about ---------- */
/* The title is what the publisher called it; this is what it IS. Sits directly under
   the title, ahead of the metadata, because it is the second thing you read — and each
   name is a door into every other episode that touches the same thing. */
.ep-about { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 3px 0 5px; line-height: 1.3; }
.ea-lab { font: 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.ep-about i { color: var(--ink-faint); font-style: normal; }
.ea-node { background: none; border: 0; padding: 0; font: 500 14px/1.25 var(--serif); color: var(--cyan); cursor: pointer; text-align: left; }
.ea-node:hover { text-decoration: underline; text-underline-offset: 2px; }
#np-about { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 5px; }
#np-about .ea-node { font-size: 16px; }

/* ---------- add another device ---------- */
#device-modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 20px; }
#device-sheet { background: var(--bg-lift); border: 1px solid var(--line); border-radius: 14px; padding: 20px; max-width: 380px; width: 100%; text-align: center; }
#device-sheet #signin-head { display: flex; align-items: center; justify-content: space-between; text-align: left; }
#device-qr { display: block; margin: 16px auto 12px; border-radius: 6px; }
.device-warn { font: 11.5px/1.5 var(--mono); color: var(--amber); opacity: .9; margin: 0 0 14px; text-align: left; }

/* language shelf switch — same chrome as the episode filters, but it governs the whole library */
.lang-filters { margin: 2px 0 14px; }
.lang-filters .epf { font-variant: small-caps; letter-spacing: .04em; }

/* new-for-you sits at the top of Listen; the old "latest episodes" button is retired */
#home-new { margin: 2px 0 18px; }
.sec-more { margin-left: auto; background: none; border: 0; color: var(--cyan); font: 11px/1 var(--mono); letter-spacing: .08em; cursor: pointer; padding: 4px 0; }
.sec-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the coarse tier, visibly its own thing ---------- */
/* Machine-read names from publishers' own transcripts. It sits below the glossed hits,
   dimmer and marked, because it promises less and must never be mistaken for a layer. */
.nq-rough-head { font: 10px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: 10px 2px 4px; border-top: 1px solid var(--line-soft); margin-top: 6px; }
.nq-hit.nq-coarse .nq-name { color: var(--ink-dim); font-weight: 400; }
.nq-hit.nq-coarse .nq-meta::after { content: ' ◇'; opacity: .6; }
.coarse-note { font: 11.5px/1.55 var(--mono); color: var(--amber); opacity: .85; margin-top: 8px; max-width: 46em; }
.coarse-ep { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.ce-show { font: 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.ce-title { font: 400 16px/1.35 var(--serif); color: var(--ink); margin: 2px 0 3px; }
.ce-meta { font: 11px/1.3 var(--mono); color: var(--ink-faint); }

/* cover art in search: which SHOWS talk about this name, answered before you read it */
.nq-hit { display: flex; align-items: center; gap: 10px; }
.nq-art { display: inline-flex; flex: none; }
.nq-art img { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; background: var(--bg-lift); }
.nq-art img + img { margin-left: -9px; box-shadow: -2px 0 0 var(--bg); }
.nq-hit .nq-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nq-hit .nq-meta { flex: none; }

/* Until a real percentage exists, the bar SWEEPS rather than sitting at 3%. A frozen bar
   and a broken bar look identical; a moving one cannot be mistaken for nothing happening. */
.wikify-job.waiting .wj-bar > span { width: 34%; animation: wj-sweep 1.1s ease-in-out infinite; }
@keyframes wj-sweep { 0% { margin-left: -34%; } 100% { margin-left: 100%; } }
.wikify-job .wj-bar { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .wikify-job.waiting .wj-bar > span { animation: none; width: 100%; opacity: .45; }
}

/* A dev build must announce itself. Two identical-looking apps on one home screen is how
   you end up debugging the wrong one, or worse, trusting a test result from production. */
#env-badge { margin-left: 8px; padding: 2px 6px; border-radius: 4px; background: var(--amber); color: #171009;
  font: 700 9px/1 var(--mono); letter-spacing: .12em; vertical-align: 3px; }
body.is-dev { border-top: 2px solid var(--amber); }