/*
 * The show's own world, not a dashboard kit: the 1991 title card (red italic
 * on a yellow oval), Jerry's Paper White walls and Coventry Grey trim, the
 * navy couch as ink, and Monk's booth brown for warmth. Dark mode is the
 * diner at night rather than a tech grey.
 */
:root {
  color-scheme: light dark;
  --bg: #fcfcfb;          /* near-white, the Claude Code client's: the page */
  --bg2: #ffffff;         /* panels */
  --bg3: #f2f2f0;         /* insets, trim */
  --border: #e3e3e1;       /* panel edges: decorative */
  --border-strong: #8c8577; /* the edge of a control you can press: 3:1 */
  --text: #1b2a47;        /* the couch */
  --muted: #5c6675;       /* Coventry Grey, dark enough for 4.5:1 on the paper */
  --accent: #c9352b;      /* title-card red: links, speakers */
  --accent-dim: #f6e7d9;  /* the ground a selected thing sits on */
  --action: #f5c53a;      /* title-card yellow: the one action colour */
  --action-ink: #1b1b1b;
  --highlight: rgba(245, 197, 58, 0.35);
  --danger: #b3261e;
  --radius: 10px;
  --radius-sm: 4px;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-cond: "Archivo Narrow", "Archivo", sans-serif;
  /* actions: yellow is the one primary, navy every secondary */
  --secondary: #1b2a47;
  --secondary-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141311;
    --bg2: #201b16;
    --bg3: #2b241d;
    --border: #3a312a;
    --border-strong: #6b6157;
    --text: #f0eae0;
    --muted: #a2988a;
    --accent: #e5695c;
    --accent-dim: #3a2f22;
    --action: #f5c53a;
    --action-ink: #1b1b1b;
    --highlight: rgba(245, 197, 58, 0.22);
    --danger: #e5695c;
    --secondary: #33497a;
    --secondary-ink: #ffffff;
  }
}

* { box-sizing: border-box; }

/* One visible focus ring for every control on every page. */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Announced, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100%;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  font-size: 1.3rem;
  line-height: 0;
  text-decoration: none;
  display: inline-block;
}
.brand:hover { text-decoration: none; }
.brand img { height: 1.9em; width: auto; display: block; }
/* Back, for the iOS app, which has no browser around it (native.js marks <html>). */
.back-btn { display: none; }
html[data-native] .back-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -0.6rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.back-btn svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav-menu { margin-left: auto; }
.topbar nav { display: flex; gap: 1rem; }

/* ---- Search, in the top bar of every page but the home page ---- */
.top-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 34rem;
}
.top-search input {
  width: 100%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  background: var(--bg3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.5rem 0.8rem 0.5rem 2.2rem;
  outline: none;
}
.top-search input:focus { border-color: var(--action); }
.lens {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.top-search .lens {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.topbar nav a { color: var(--muted); font-size: 0.9rem; }
.topbar nav a:hover, .topbar nav a.active { color: var(--text); }
/* On a phone the box gives way to a lens that goes to the home page's. */
.top-search-go { display: none; color: var(--muted); }
.top-search-go .lens { width: 1.25rem; height: 1.25rem; }
/* The links' toggle: only a phone shows it (chrome.ts). */
.nav-toggle {
  display: none;
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle::marker { content: ""; }
.nav-menu[open] .nav-toggle { background: var(--accent-dim); }
.nav-toggle:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.burger {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
@media (min-width: 641px) {
  /* A closed <details> hides what it holds; here the links are the bar itself. */
  .nav-menu::details-content { content-visibility: visible; }
}
@media (max-width: 640px) {
  .topbar { gap: 0.25rem; }
  .topbar .top-search { display: none; }
  .brand { margin-right: auto; }
  .nav-menu { position: relative; margin-left: 0; }
  /* 44px: the smallest touch target Apple recommends. */
  .topbar .top-search-go,
  .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; }
  .topbar .session { margin-left: 0.25rem; padding-left: 0.6rem; }
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.05;
  margin: 0 0 0.35rem;
}
.sub { color: var(--muted); margin-bottom: 1.5rem; }

.search-box {
  position: relative;
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.search-box input {
  flex: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  background: var(--bg3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.85rem 1rem;
  outline: none;
}
.search-box input:focus { border-color: var(--action); }
.search-box button, .btn {
  background: var(--action);
  color: var(--action-ink);
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}
.search-box button:hover, .btn:hover { filter: brightness(1.05); }

.btn.ghost:hover { border-color: var(--action); }
.btn.sm { padding: 0.4rem 0.7rem; font-size: 0.8rem; }

.empty { color: var(--muted); padding: 2rem 0; text-align: center; }

/* Studio layout — HTML order is aside then transcript; areas swap on desktop */
.studio {
  display: grid;
  /* the preview is the hero now: give it room, the lines take the rest */
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  grid-template-areas:
    "transcript preview"
    "transcript clips";
  gap: 1rem;
  align-items: start;
}
.transcript-panel { grid-area: transcript; min-width: 0; }
.clips-panel { grid-area: clips; min-width: 0; }
.studio-aside {
  grid-area: preview;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel h2, .preview-heading {
  font-family: var(--font-cond);
  margin: 0;
  padding: 0.65rem 0.9rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.preview {
  aspect-ratio: 16/9;
  position: relative;
  background: #000;
  overflow: hidden;
  display: block;
}
.preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  z-index: 0;
}
.preview-fallback {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
  background: #000;
}
/* One rule for everything the pages hide, rather than one per component. */
.hidden,
[hidden] {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}
/* Copy-to-clipboard buttons wait until Copycat is there to do the copying. */
html:not([data-copycat="on"]) .copycat-only {
  display: none !important;
}

.play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
  z-index: 4;
  padding: 0;
  line-height: 52px;
  text-align: center;
}
.play-overlay:hover { background: rgba(0,0,0,0.7); }
/* Do not display:none — iOS Safari often fails to load or decode hidden media. */
.preview.is-loading video {
  opacity: 0;
  pointer-events: none;
}
/* Offered only when the browser refused to start with sound. */
.sound-pill {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 4;
  border: 0;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  min-height: 36px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.actions {
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  border-top: 1px solid var(--border);
}
.clips-list {
  padding: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

/* Mobile: preview + trim sticky; transcript scrolls under */
@media (max-width: 860px) {
  .wrap {
    padding: 0.85rem 0.75rem calc(1.25rem + env(safe-area-inset-bottom));
  }
  .topbar {
    padding: 0.65rem 0.85rem;
    padding-top: calc(0.65rem + env(safe-area-inset-top));
  }
  h1 { font-size: 1.25rem; }
  .sub { margin-bottom: 0.85rem; font-size: 0.9rem; }
  .studio {
    grid-template-columns: 1fr;
    grid-template-areas:
      "preview"
      "transcript"
      "clips";
    gap: 0.75rem;
  }
  /* Sticky on the aside, not the panel inside it: a sticky element only sticks
     within its parent, and the aside is exactly as tall as the panel, so the
     panel had nowhere to stick and scrolled away with the lines. */
  .studio-aside {
    position: sticky;
    top: calc(52px + env(safe-area-inset-top, 0px));
    z-index: 5;
  }
  .preview-panel {
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    scroll-margin-top: calc(52px + env(safe-area-inset-top, 0px));
  }
  .preview-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .search-box {
    flex-direction: column;
  }
  .search-box input, .top-search input {
    font-size: 16px; /* prevent iOS zoom */
  }
  .search-box button, .actions .btn {
    min-height: 44px;
  }

  .result {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .actions { gap: 0.35rem; }
  .actions .btn { flex: 1 1 auto; text-align: center; }
}

.preview-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 0.85rem;
}
.spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: var(--action);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.site-footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.25rem 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  display: flex;
  gap: 0.75rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.site-footer #buildSha {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
}
.btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Kill native big-play / scrubber chrome (iOS paints these even without controls) */
.preview video::-webkit-media-controls,
.preview video::-webkit-media-controls-enclosure,
.preview video::-webkit-media-controls-start-playback-button,
.preview video::-webkit-media-controls-overlay-play-button,
.preview video::-webkit-media-controls-panel,
.preview video::-webkit-media-controls-timeline {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Admin — fixed sidebar + section panels */
.admin-shell {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 4.5rem);
}
.admin-sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 220px;
  flex: 0 0 220px;
  min-height: calc(100vh - 4.5rem);
  padding: 1.1rem 0.85rem 1.35rem;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 5;
}
.admin-sidebar-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
}
.admin-brand {
  font-family: var(--font-cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.95rem;
}
.admin-nav-toggle { display: none; }
.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}
.admin-nav a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-nav a:hover { color: var(--text); background: var(--bg3); }
.admin-nav a.active {
  color: var(--text);
  background: var(--bg3);
  border: 1px solid var(--border-strong);
}
.admin-sidebar-foot {
  padding: 0.85rem 0.75rem 0.15rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.admin-signed-as {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  word-break: break-all;
  line-height: 1.35;
  padding: 0 0.1rem;
}
.admin-main {
  flex: 1;
  min-width: 0;
  padding-top: 1.15rem;
}
.admin-lead { margin-top: 0; margin-bottom: 1rem; }
/* One inset for the whole card — titles/body share the same left edge */
.admin-page .admin-card {
  margin-bottom: 1rem;
  padding: 1.25rem 1.35rem 1.4rem;
}
.admin-page h1 {
  font-family: var(--font-cond);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.35rem;
  padding: 0;
}
.admin-page h2 {
  font-family: var(--font-cond);
  font-size: 0.8rem;
  margin: 1.15rem 0 0.7rem;
  padding: 0.95rem 0 0;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-top: 1px solid var(--border);
  border-bottom: none;
}
/* First section under the page title: tighten the gap above the first rule */
.admin-page .admin-card > h1 + h2,
.admin-page .admin-card > h1 + .admin-toolbar {
  margin-top: 0.75rem;
}
.admin-dl {
  display: grid;
  gap: 0.95rem 1.35rem;
  margin: 0;
  padding: 0;
  /* fixed tracks: six stats fill two rows evenly, three fill one */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-dl > div { display: flex; flex-direction: column; gap: 0.25rem; }
.admin-dl dt { margin: 0; font-size: 0.7rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); }
.admin-dl dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem; color: var(--text); word-break: break-all; }
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  align-items: center;
  margin: 1.15rem 0 0.7rem;
  padding: 0.95rem 0 0;
  border-top: 1px solid var(--border);
}
.admin-page .admin-card > .admin-toolbar:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.admin-page .admin-toolbar h1,
.admin-page .admin-toolbar h2 {
  flex: 1;
  margin: 0;
  padding: 0;
  border: none;
}
.admin-note {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0 0 0.85rem;
  padding: 0;
  line-height: 1.5;
}
.admin-log {
  margin: 0;
  padding: 0.85rem 1rem;
  max-height: 48vh;
  overflow: auto;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-overflow-scrolling: touch;
}
.admin-log-filters {
  padding: 0;
  margin: 0 0 0.75rem;
}
.admin-log-search {
  padding: 0;
  margin: 0 0 0.9rem;
}
.admin-search-input {
  width: 100%;
  max-width: 28rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg3);
  color: var(--text);
  font-size: 0.9rem;
}
.admin-table-wrap {
  margin: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg3);
  -webkit-overflow-scrolling: touch;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.admin-table th, .admin-table td {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.admin-table th {
  font-family: var(--font-cond);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg2);
  position: sticky;
  top: 0;
}
.admin-table td.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  word-break: break-all;
}
.admin-table .admin-empty {
  color: var(--muted);
  text-align: center;
  padding: 1.6rem 1.1rem;
}
.admin-bad { color: var(--danger); }
.admin-muted { opacity: 0.55; }
@media (max-width: 820px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    flex: none;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0.85rem;
  }
  .admin-nav-toggle { display: inline-flex; }
  .admin-nav { display: none; }
  .admin-sidebar.open .admin-nav { display: flex; }
  .admin-sidebar-foot { display: none; }
  .admin-sidebar.open .admin-sidebar-foot {
    display: block;
    border-top: 1px solid var(--border);
    padding: 0.85rem 0.75rem 0.25rem;
  }
  .admin-page .admin-card { padding: 1.1rem 1.1rem 1.2rem; }
}


/* Export: progress while encoding, then the result and what to do with it. */
.job-card {
  padding: 0.65rem 0.75rem;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.job-head, .job-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.job-head > span, .job-foot .job-line { color: var(--muted); }
.job-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.job-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--bg3);
  overflow: hidden;
}
.job-bar i {
  display: block;
  height: 100%;
  background: var(--action);
  transition: width 0.3s linear;
}
/* Copy GIF · Save GIF · Copy link under Share: three equal buttons. */
.job-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
html:not([data-copycat="on"]) .job-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.job-acts .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; white-space: nowrap; padding-inline: 0.3rem; }
.job-note { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--accent); }
.job-note.ok { color: var(--muted); }
.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn.fat { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.75rem 1rem; font-size: 1.05rem; }
.btn.fat .ico { width: 18px; height: 18px; }

/* The export settings: format, Remix, then the card (Generate or the file's actions). */
.export { border-top: 1px solid var(--border); }
.export .job-card { border-top: 0; padding-top: 0; }
.export-row { display: flex; gap: 0.5rem; padding: 0.65rem 0.75rem; }
.format-seg { display: flex; flex: 1; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; background: var(--bg2); }
.format-seg button { flex: 1; border: 0; background: transparent; padding: 0.35rem 0.25rem; font: inherit; color: var(--text); display: grid; line-height: 1.15; cursor: pointer; }
.format-seg button + button { border-left: 1px solid var(--border); }
.format-seg b { font-size: 0.9rem; }
.format-seg i { font-style: normal; font-size: 0.7rem; color: var(--muted); }
.format-seg button[aria-checked="true"] { background: var(--action); color: var(--action-ink); }
.format-seg button[aria-checked="true"] i { color: var(--action-ink); opacity: 0.75; }
.format-seg button:disabled { opacity: 0.4; cursor: default; }
.format-seg button:focus-visible { outline: 2px solid var(--text); outline-offset: -3px; }
.remix-toggle { white-space: nowrap; }
.remix-toggle[aria-pressed="true"] { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.export .remix-panel { padding-top: 0; }

/* Subtitles in the file: a CC switch at the end of the trim row. */
/* The readout on its own line, the nudges and the CC switch under it, CC at the far end. */
.clip-bar:has(.cc-toggle) .clip-meta { flex-basis: 100%; }
.clip-bar:has(.cc-toggle) .nudges { flex: 1; }
.cc-toggle { margin-left: auto; display: inline-grid; place-items: center; width: 40px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg2); color: var(--muted); cursor: pointer; }
.cc-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cc-toggle[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.cc-toggle[aria-pressed="true"] .cc-slash { display: none; }
.cc-toggle:disabled { opacity: 0.4; cursor: default; }
/* A thumbnail beside a couple of lines of text: used for clips and for lines. */
.thumb-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.thumb-row img {
  width: 68px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  background: var(--bg3);
}
.thumb-row-text { min-width: 0; display: grid; gap: 0.1rem; }
.thumb-row-text b {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thumb-row-text i { font-style: normal; color: var(--muted); font-size: 0.78rem; }
@media (prefers-reduced-motion: reduce) {
  .job-bar i { transition: none; }
}

/* The clip is a run of lines: each row is a button you tap to extend it. */
.panel-hint {
  margin: 0;
  padding: 0 0.9rem 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.lines {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 0.5rem 0.5rem;
  display: grid;
  gap: 0.25rem;
}
.line { cursor: pointer; }
.line:hover { background: var(--bg3); }
.line.in {
  background: var(--highlight);
  border-color: var(--action);
}
.line .thumb-row-text b {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.line.in .thumb-row-text b { color: var(--text); }
.line .thumb-row-text span { overflow-wrap: anywhere; white-space: normal; }
/* Reaching past the window of lines the page opened on. Quiet enough to read
   as part of the list rather than as an action, and gone once that end of the
   episode is reached — its absence is how you know you are at the start. */
.more-lines {
  appearance: none;
  width: 100%;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.12s, background 0.12s;
}
.more-lines:hover { color: var(--text); background: var(--bg3); }
.more-lines:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.more-lines.is-busy { opacity: 0.5; pointer-events: none; }

.line-when {
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* How long the clip is, and the quarter-second nudges at its edges. */
.clip-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.clip-meta { color: var(--muted); font-variant-numeric: tabular-nums; }
.nudges { display: flex; align-items: center; gap: 0.25rem; }
.nudge-label {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 0.1rem;
}
.btn.xs {
  padding: 0.2rem 0.5rem;
  font-size: 0.85rem;
  line-height: 1.2;
  min-width: 32px;
}
.btn.primary {
  background: var(--action);
  color: var(--action-ink);
  font-weight: 700;
}
.actions .btn.primary { flex: 1 1 auto; }

@media (max-width: 860px) {
  .admin-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lines { max-height: none; }
  .btn.xs { min-width: 44px; min-height: 44px; }
}

/* Search results are the frame you will export, with the line on the picture. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.9rem;
}
.card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--border);
}
.card:hover { border-color: var(--action); text-decoration: none; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 0.7rem 0.6rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  text-shadow: 0 1px 2px #000;
}
.card-who, .card-where {
  position: absolute;
  top: 0.5rem;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
}
.card-who { right: 0.5rem; background: var(--action); color: var(--action-ink); }
.card-where { left: 0.5rem; background: rgba(0,0,0,0.6); color: #fff; }

/* Chips: the shortcuts you reach for before you have typed anything. */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.chip {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
}
.chip:hover { border-color: var(--action); }
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.section-label {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.5rem 0 0.6rem;
}
.more-wrap { display: flex; justify-content: center; margin: 1.2rem 0; }

/* A label with its one action on the right. */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 0.6rem;
}
.section-head .section-label { margin: 0; }

/* ---- Scenes, at random: the first thing under the search ---- */
.scenes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}
/* An empty slot keeps its shape, so the row does not jump as frames arrive. */
.scene-slot { aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--bg3); }
.scenes .card { animation: scene-in 0.45s ease-out; }
@keyframes scene-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Three across is too small to read on a phone: a row you swipe instead. */
@media (max-width: 640px) {
  .scenes {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .scene-slot { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .scenes .card { animation: none; }
}

.site-footer a { color: var(--muted); font-size: 0.85rem; }

.search-box input::placeholder, .top-search input::placeholder { color: var(--muted); opacity: 1; }

@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
  .chip { min-height: 40px; }
}

/* The clips page: a row per clip, with what you can do with it. */
.clip-list { display: grid; gap: 0.5rem; margin-bottom: 1.25rem; }
.clip-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
}
.clip-item-acts { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
@media (max-width: 860px) {
  .clip-item { grid-template-columns: 1fr; }
  .clip-item-acts { justify-content: flex-start; }
}

/* Who you are signed in as, and the way out. Rendered server-side. */
.session {
  position: relative;
  margin-left: 0.3rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--border);
}

/* The avatar: one letter, and the only thing in the bar that is round. */
.session-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg2);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
/* Safari still draws the disclosure triangle without this. */
.session-avatar::-webkit-details-marker { display: none; }
.session-avatar::marker { content: ""; }
.session[open] .session-avatar,
.session-avatar:hover { box-shadow: 0 0 0 2px var(--action); }
.session-avatar:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }

/* The account menu, and on a phone the links' (only a phone can open them). */
.session-menu,
.nav-menu[open] > nav {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 20;
  min-width: max(12rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.35rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}
.session-menu .session-who {
  padding: 0.45rem 0.6rem 0.55rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}
.session-menu a,
.nav-menu[open] > nav a {
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
}
.session-menu a:hover,
.nav-menu[open] > nav a:hover,
.nav-menu[open] > nav a.active {
  background: var(--accent-dim);
  text-decoration: none;
}
@media (max-width: 640px) {
  /* A finger, not a pointer: each entry at least 44px tall. */
  .session-menu a,
  .nav-menu[open] > nav a { padding: 0.8rem; font-size: 1rem; }
  .session-avatar { width: 40px; height: 40px; }
}

@media (max-width: 480px) {
  .admin-dl { grid-template-columns: 1fr; }
}

/* ---- The library: what there is to search, before you have searched ---- */
/* A poster wall. The cover is cover.jpg in the show's own directory; there is
   no generated fallback, so a show without one gets a drawn placeholder. */
.library-rail { position: relative; margin: 0 0 1.6rem; }
.library {
  display: grid;
  /* One row you scroll, not a wall that wraps — the same swipe-row shape as
     .scenes above, kept at every width rather than only on a phone. */
  grid-auto-flow: column;
  grid-auto-columns: clamp(92px, 12vw, 140px);
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* The filtering poster's ring is drawn outside its box, and a scroll
     container clips it. Room for it, taken back off the page's margins so the
     posters still line up with everything above them. */
  padding: 4px;
  margin: -4px;
  /* Without this the first poster snaps against that padding and the row rests
     at scrollLeft 4, which reads as "there is something to your left". */
  scroll-padding: 4px;
}
.library::-webkit-scrollbar { display: none; }
.lib-item { scroll-snap-align: start; }
.see-all { font-weight: 600; font-size: 0.9rem; }

/* /library: every title as a wall that wraps, the rail's cards in a grid. */
.library-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1.5rem 1rem;
  margin-top: 1.5rem;
}
.library-wall .empty { grid-column: 1 / -1; }

/* Fade whichever edge still has posters behind it. Set from syncRail(), so an
   edge that cannot move is never dimmed. */
.library-rail.can-fwd .library {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
}
.library-rail.can-back .library {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent);
}
.library-rail.can-back.can-fwd .library {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}

/* Centred on the artwork rather than on the rail, which is taller by however
   many lines the longest name runs to. */
.rail-arrow {
  position: absolute;
  top: calc((100% - 2.6rem) / 2);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 0 2px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg2);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.rail-arrow.back { left: -6px; }
.rail-arrow.fwd { right: -6px; }
.rail-arrow:hover { border-color: var(--action); }
.library-rail:hover .rail-arrow,
.rail-arrow:focus-visible { opacity: 1; }
/* A thumb has no hover to reveal them with, and swiping is the obvious thing. */
@media (hover: none) {
  .rail-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-arrow { transition: none; }
}
.lib-item {
  position: relative;
  display: block;
  color: inherit;
  border-radius: var(--radius);
  /* a grid cell stretches: a two-line name would leave the others taller */
  align-self: start;
}
.lib-art {
  /* block, not the span default: aspect-ratio and height do nothing on an
     inline box, so the cover would spill out of the grid at its natural size. */
  display: block;
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg3);
  border: 1px solid var(--border);
}
.lib-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* No cover.jpg: the title itself, set large, is the artwork. */
.lib-art.blank {
  display: grid;
  place-items: center;
  padding: 0.7rem;
  background: linear-gradient(160deg, var(--bg3), var(--bg2));
}
.lib-art.blank span {
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 3.2vw, 1rem);
  line-height: 1.15;
  text-align: center;
  color: var(--muted);
}
.lib-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0.35rem 0 0;
  font-family: var(--font-cond);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .library { gap: 0.6rem; }
}
.lib-item:hover .lib-art,
.lib-item:focus-visible .lib-art { border-color: var(--action); }
.lib-item:hover { text-decoration: none; }

/* ---- Greatest hits as Library chips ---- */
.chip:hover { text-decoration: none; }
a.chip { display: inline-flex; align-items: center; }
.quote-chip { max-width: min(22rem, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: inherit; }
/* a.chip is inline-flex, where text-overflow never shows: a block cuts the line with "…",
   and a line as tall as the chip's inside keeps the text centred as align-items did. */
a.chip.quote-chip { display: inline-block; line-height: calc(34px - 0.7rem - 2px); }
@media (max-width: 860px) { a.chip.quote-chip { line-height: calc(40px - 0.7rem - 2px); } }

/* ---- A title's page: the player and its rail on the left, a panel of greatest
   hits and the script by scene on the right that scrolls on its own. Below
   900 px, one column: the player and rail pinned, the panel scrolling with the page. ---- */
.tp-head {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.4rem 1.25rem 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  align-items: flex-end;
}
.tp-name { flex: 1 1 16rem; min-width: 0; }
.tp-cover { width: 64px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.tp-head h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.5rem); overflow-wrap: anywhere; }
.tp-meta { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tp-meta i { font-style: normal; color: var(--border-strong); }
.tp-actions { display: flex; gap: 0.5rem; }
/* The page's own pills, apart from the app's .btn: outlined, yellow for the action. */
.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg2);
  color: var(--text);
  font: 500 14px/1.2 var(--font);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.tp-btn:hover { text-decoration: none; border-color: var(--action); }
.tp-btn.yellow { background: var(--action); color: var(--action-ink); border-color: transparent; }
.tp-btn.yellow:hover { filter: brightness(1.05); }
.tp-btn.small { padding: 5px 11px; font-size: 13px; }
.tp-btn:disabled { opacity: 0.55; cursor: default; filter: none; }

.tp-stage {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.25rem 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* The player stays put; its `top` follows the top bar's height (--tp-top). */
.watch { position: sticky; top: calc(var(--tp-top, 0px) + 0.75rem); z-index: 5; background: var(--bg); }
.watch-player {
  position: relative;
  aspect-ratio: 16/9;
  max-height: 60vh;
  margin-inline: auto;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.watch-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* The app's system player takes a moment to open: a ring says the tap was heard. */
.watch-player.is-preparing::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border: 3px solid var(--accent-dim);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: preparing-spin 0.9s linear infinite;
  pointer-events: none;
}
@keyframes preparing-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .watch-player.is-preparing::after { animation-duration: 3s; }
}

.episode-pick { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0 0; }
.episode-pick .section-label { margin: 0; }
.episode-pick select {
  flex: 0 1 28rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg2);
  color: var(--text);
  font: inherit;
}
.episode-pick select:focus { border-color: var(--action); }

/* The rail: how much is said along the episode, and where the greatest hits are. */
.tp-rail-wrap { margin-top: 0.75rem; padding: 0.75rem 0.9rem 0.6rem; overflow: visible; }
.tp-rail-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font: 600 0.75rem/1 var(--font-cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.tp-rail { position: relative; height: 38px; }
.tp-density { position: absolute; inset: 14px 0 6px; display: flex; align-items: flex-end; gap: 1px; }
.tp-density i { flex: 1; min-height: 1px; background: var(--bg3); border-radius: 1px; }
.tp-mark {
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  padding: 0;
  border-radius: 50%;
  background: var(--action);
  border: 2px solid var(--bg2);
  box-shadow: 0 0 0 1px var(--border-strong);
  cursor: pointer;
}
/* A finger needs more than 12 px to hit. */
.tp-mark::after { content: ""; position: absolute; inset: -10px; }
.tp-mark.on { background: var(--accent); transform: scale(1.25); }
.tp-playhead { position: absolute; top: 10px; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; }
.tp-tip {
  position: absolute;
  bottom: 44px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.8rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 2;
}
.tp-tip.shown { opacity: 1; }
.tp-rail-times { display: flex; justify-content: space-between; margin-top: 2px; color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }

/* The line playing now, with the one before and the one after. */
.tp-now { margin-top: 0.75rem; padding: 0.9rem 1rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1rem; align-items: center; }
.tp-now-ctx { grid-column: 1; color: var(--muted); font-size: 0.875rem; }
.tp-now-line { grid-column: 1; font-size: 1.15rem; font-weight: 500; }
.tp-now-ctx, .tp-now-line { overflow-wrap: anywhere; }
.tp-now-acts { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 0.5rem; }

/* The panel: as tall as the screen under the top bar; only its body scrolls. */
.tp-side {
  position: sticky;
  top: calc(var(--tp-top, 0px) + 0.75rem);
  height: calc(100vh - var(--tp-top, 0px) - 1.5rem);
  display: flex;
  flex-direction: column;
}
.tp-side-top { padding: 0.75rem 0.75rem 0; border-bottom: 1px solid var(--border); }
.tp-find { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border-radius: 999px; background: var(--bg3); color: var(--muted); }
.tp-find:focus-within { outline: 2px solid var(--action); }
.tp-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.tp-tabs { display: flex; gap: 0.25rem; margin-top: 0.6rem; }
.tp-tab {
  padding: 0.65rem 0.75rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font: 600 0.875rem/1 var(--font-cond);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.tp-tab[aria-selected="true"] { color: var(--text); border-color: var(--action); }
.tp-tab .n { margin-left: 0.3rem; font-family: var(--font); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.tp-side-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.tp-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; align-items: center; padding: 0.6rem 0.9rem; color: var(--muted); font-size: 0.8rem; }
.tp-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.tp-seg button { padding: 0.25rem 0.65rem; border: 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.tp-seg button[aria-pressed="true"] { background: var(--bg3); color: var(--text); }
.tp-follow { display: inline-flex; gap: 0.4rem; align-items: center; cursor: pointer; }
.tp-side .empty { padding: 1.8rem 0.9rem; }

/* A greatest hit: its frame and time, the dialogue a speaker a line, Watch and Clip. */
.hit { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0.75rem; padding: 0.6rem 0.9rem; border-top: 1px solid var(--border); cursor: pointer; }
.hit:hover { background: var(--bg); }
.hit.on { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
.hit-frame { position: relative; display: block; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: #000; }
.hit-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hit-frame b { position: absolute; right: 4px; bottom: 4px; padding: 3px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.72); color: #fff; font: 500 0.7rem/1 var(--font); font-variant-numeric: tabular-nums; }
.hit-body { display: block; min-width: 0; }
.hit-code { display: block; color: var(--accent); font: 600 0.8rem/1.3 var(--font-cond); letter-spacing: 0.04em; }
.hit-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.95rem; overflow-wrap: anywhere; }
.hit-text span { display: block; }
.hit-text span + span { color: var(--muted); }
.hit-acts { display: none; gap: 0.4rem; margin-top: 0.5rem; }
.hit:hover .hit-acts, .hit.on .hit-acts, .hit:focus-within .hit-acts { display: flex; }

/* The script, a scene of five minutes at a time. */
.tp-scene { border-top: 1px solid var(--border); }
.tp-scene-head {
  width: 100%;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tp-scene-head:hover { background: var(--bg); }
.tp-when { font: 600 0.8rem/1 var(--font-cond); letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.tp-first { color: var(--muted); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-stars, .tp-star { color: var(--accent); font-size: 0.75rem; font-weight: 400; }
.tp-scene.open > .tp-scene-head { position: sticky; top: 0; z-index: 1; background: var(--bg2); border-bottom: 1px solid var(--border); }
.tp-scene.open .tp-first { visibility: hidden; }
.tp-ln { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 1.9rem; gap: 0.5rem; align-items: start; padding: 0.4rem 0.9rem; cursor: pointer; }
.tp-ln:hover { background: var(--bg); }
.tp-ln.is-now { background: var(--highlight); box-shadow: inset 3px 0 0 var(--action); }
.tp-t { padding: 0.15rem 0 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.75rem; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; }
.tp-tx { overflow-wrap: anywhere; }
/* Only the line playing, or under the pointer, shows its ✂: a screenful of lines is not a screenful of links. */
.tp-x { text-align: center; color: var(--accent); visibility: hidden; }
.tp-ln:hover .tp-x, .tp-ln.is-now .tp-x { visibility: visible; }

/* A phone, or a narrow window: one column, the player and rail pinned under the top bar. */
@media (max-width: 899.98px) {
  .tp-head { padding: 0.9rem 1rem 0.6rem; }
  .tp-actions { flex-basis: 100%; }
  .tp-stage { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 2rem; }
  .watch { top: var(--tp-top, 0px); }
  .watch-player { border-radius: 0; max-height: 40vh; }
  /* Not pinned: show.html moves it under the rail, at the top of what scrolls. */
  .episode-pick { margin: 0; padding: 0.6rem 1rem; }
  .episode-pick .section-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .episode-pick select { flex: 1 1 auto; width: 100%; }
  /* Pinned: the player and a compact rail, nothing else. */
  .tp-rail-wrap { margin-top: 0; padding: 6px 1rem 4px; border-radius: 0; border-inline: 0; border-top: 0; }
  .tp-rail-label { margin-bottom: 4px; font-size: 0.68rem; }
  .tp-rail { height: 28px; }
  .tp-density { inset: 10px 0 4px; }
  .tp-playhead { top: 8px; }
  .tp-tip { bottom: 32px; }
  .tp-rail-times { margin-top: 0; font-size: 0.68rem; line-height: 1.1; }
  .tp-now { display: none; }
  .tp-side { position: static; height: auto; border-radius: 0; border-inline: 0; }
  .tp-side-body { overflow: visible; }
  .tp-scene.open > .tp-scene-head { position: static; }
  .hit .tp-btn { min-height: 44px; }
  .hit-acts { display: flex; }
}

/* The query grammar, spelled out under the box. */
.syntax {
  margin: -0.35rem 0 1.25rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.7;
}
.syntax b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: 0.95em;
  color: var(--accent);
}

/* ---- The phone apps: a badge each, on the home page ---- */
.get-app { margin-top: 2.5rem; }
.get-app-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Black pill, white text, a glyph and two lines: the shape a store badge has,
   drawn in our own hand rather than borrowed from theirs. */
.get-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.1rem;
  min-height: 58px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  text-align: left;
}
.get-app-badge:hover { background: #1b1b1b; text-decoration: none; }
.get-app-badge:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.get-app-badge svg { width: 28px; height: 28px; flex: none; }
.get-app-badge i {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}
.get-app-badge b { font-family: var(--font-cond); font-size: 1.3rem; font-weight: 600; letter-spacing: 0.01em; }
@media (max-width: 480px) {
  .get-app-badge { flex: 1 1 100%; }
}

/* ---- @show autocomplete ---- */
.ac {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--bg2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  max-height: 15rem;
  overflow-y: auto;
}
.ac[hidden] { display: none; }
.ac li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ac li[aria-selected="true"] { background: var(--accent-dim); }
.ac .ac-title { font-weight: 600; }
.ac .ac-slug { color: var(--muted); font-size: 0.85em; }

/* ---- remix ---------------------------------------------------------- */
@font-face {
  font-family: "Anton";
  src: url("/fonts/Anton-Regular.ttf") format("truetype");
  font-display: block;
}
.meme-layer { position: absolute; pointer-events: none; overflow: hidden; }
.meme-line {
  position: absolute; left: 0; right: 0; margin: 0;
  font-family: "Anton", Impact, sans-serif; font-weight: 400;
  line-height: normal; white-space: pre; text-align: center;
  paint-order: stroke fill; -webkit-text-stroke-color: var(--meme-outline);
  color: var(--meme-fill);
}
.meme-white { --meme-fill: #fff; --meme-outline: #000; }
.meme-black { --meme-fill: #000; --meme-outline: #fff; }
/* Remix on a phone: the editor takes what the keyboard leaves of the screen
   (the visual viewport, --vv-* set by studio.html), the video pinned at the top
   and the controls scrolling under it, so the text being typed stays in view. */
@media (max-width: 860px) {
  .remixing .studio-aside {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--vv-top, 0px);
    height: var(--vv-height, 100dvh);
    z-index: 60;
    padding: max(0.5rem, env(safe-area-inset-top)) 0.75rem 0.5rem;
    background: var(--bg);
  }
  .remixing .preview-panel { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
  .remixing .preview { position: sticky; top: 0; z-index: 2; }
}
.remix-panel { display: grid; gap: 10px; padding: 12px 16px; }
.remix-panel.hidden { display: none; }
.remix-field { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; }
.remix-field input[type="text"] { font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.remix-step { min-width: 2.25rem; font-weight: 700; }
.remix-count { grid-column: 1 / -1; font-size: 0.8rem; color: var(--muted); }
.remix-count.over { color: var(--accent); }
.badge { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--accent); color: #1b1b1b; font-size: 0.75rem; font-weight: 600; }