@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* What Happened Next — "Late edition" restyle.
   Drop-in replacement for /sites/what-happened-next/styles.css.
   Same selectors as the original, dark editorial treatment.
   The shared timeline library (/libraries/timeline/timeline.css) is not
   covered here — see the overrides block at the end of this file. */

:root {
  --bg: #000000;
  --card: #000000;
  --panel: #070706;
  --ink: #efeae0;
  --ink-2: #bdb7ac;
  --muted: #8f8a80;
  --border: #23211d;
  --border-2: #35322c;
  --accent: #f2c230;
  --accent-ink: #000000;
  --accept: #86d6a4;
  --reject: #ef8b7f;
  --shadow: none;
  --display: 'Instrument Serif', Georgia, serif;
  --body: Archivo, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
a:hover { color: var(--ink); }

/* The oversized "...?" mark: pinned to the bottom of the viewport, behind
   everything, and sitting fully inside the bottom edge. */
body::before {
  content: '...?';
  position: fixed;
  right: 3vw;
  bottom: -0.05em;
  z-index: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: min(46vw, 620px);
  line-height: 1;
  white-space: nowrap;
  color: var(--accent);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
}
.site-header, .view, .site-footer { position: relative; z-index: 1; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* header / footer */
.site-header {
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand {
  font-family: var(--display);
  font-weight: 400;
  font-size: 23px;
  letter-spacing: 0;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand:hover { color: var(--ink); }
/* Full title normally; when the header's too tight for it (small screens,
   or a signed-in account name/badge crowding the bar), swap to just the
   "...?" mark rather than let the title wrap. */
.brand-short { display: none; }
@media (max-width: 560px) {
  .brand-full { display: none; }
  .brand-short { display: inline; }
}
/* On the home page, the header brand stays invisible while the big hero
   title is showing, and fades in once you scroll past it — see .home-hero
   below, which is the thing that's actually visible at that point. */
body.home-route .site-header .brand { opacity: 0; transition: opacity 0.35s ease; }
body.home-route.home-scrolled .site-header .brand { opacity: 1; }

/* home hero — the big title on the Shows page. Fades/shrinks away once you
   scroll, timed with the header brand fading in above, so it reads as the
   title shrinking into the nav bar. Only opacity/transform are animated
   (never height/padding) — those are compositor-only and don't reflow the
   page, so the space they occupy stays fixed and scrolling underneath it
   never jitters. */
.home-hero {
  text-align: center;
  padding: 12vh 24px 10vh;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.home-hero-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 9vw, 104px);
  line-height: 1.05;
  color: var(--accent);
}
.home-hero-sub {
  margin: 18px auto 0;
  max-width: 560px;
  font-family: var(--body);
  font-size: clamp(15px, 2.2vw, 19px);
  color: #ffffff;
}
body.home-scrolled .home-hero {
  opacity: 0;
  transform: translateY(-24px) scale(0.85);
  pointer-events: none;
}
.bar-left { display: flex; align-items: center; gap: 22px; }
.main-nav { font-size: 14px; }
.main-nav a { color: var(--muted); text-decoration: none; }
.main-nav a:hover { color: var(--ink); }
.search-form { flex: 1; display: flex; justify-content: center; min-width: 0; }
.search-form input {
  width: 100%; max-width: 280px; font: inherit; font-size: 14px;
  padding: 6px 0; border: none; border-bottom: 1px solid var(--border-2);
  border-radius: 0; background: transparent; color: var(--ink);
}
.search-form input::placeholder { color: var(--muted); }
.search-form input:focus { border-color: var(--accent); outline: none; }
.search-form button {
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  padding: 6px 10px; border: none; border-bottom: 1px solid var(--border-2);
  border-radius: 0; background: transparent; color: var(--accent);
}
.search-form button:hover { color: var(--ink); }
/* On narrow screens, expand the search over the rest of the bar on focus. */
@media (max-width: 640px) {
  .search-form:focus-within {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #000;
    z-index: 60;
  }
  .search-form:focus-within input { max-width: none; flex: 1; }
  /* Small and empty: the arrow is a fiddly extra touch target next to the
     input in that cramped state, so hide it until there's something to
     submit or the box has expanded (focused) and there's room for it. */
  .search-form:not(:focus-within) input:placeholder-shown ~ button {
    display: none;
  }
}
.auth { font-size: 14px; color: var(--muted); position: relative; display: flex; align-items: center; gap: 10px; }
.auth a { text-decoration: none; }
/* Signed in: the hamburger (all role-gated links + Sign out, in its
   dropdown) always shows, on the same line as the account name — `.auth`
   above is a flex row precisely so a block-level `.auth-burger` doesn't
   drop to its own line under the name. The name itself only shows when
   there's room for it (see the media query below). */
.auth-name { display: none; white-space: nowrap; }
.auth-burger { display: block; }
.burger-btn {
  border: none; background: none; color: var(--ink); font-size: 20px; line-height: 1;
  cursor: pointer; padding: 4px 2px;
}
.auth-burger-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  width: max-content; max-width: calc(100vw - 32px);
  background: var(--panel); border: 1px solid var(--border); border-radius: 4px;
  padding: 14px 16px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}
.auth-burger-menu[hidden] { display: none; }
.auth-burger-name { color: var(--ink-2); padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.auth-burger-menu a, .auth-burger-menu .link-btn { color: var(--ink); font-size: 14px; text-align: left; }
.auth-burger-menu a:hover, .auth-burger-menu .link-btn:hover { color: var(--accent); }
/* Enough room to also show "Signed in as <name>" next to the hamburger. */
@media (min-width: 641px) {
  .auth-name { display: inline; }
}
.badge {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--accent); color: var(--accent-ink); padding: 2px 6px; border-radius: 0;
}
.link-btn { border: none; background: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.link-btn:hover { text-decoration: underline; }

.view { padding: 34px 24px 64px; min-height: 60vh; }
.view h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 0 0 10px;
}
.view h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  margin: 0 0 14px;
}
.muted { color: var(--muted); }
.small { font-size: 12px; }
.back {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-decoration: none;
  margin-bottom: 6px;
}
.back:hover { color: var(--accent); }
.opt { color: var(--muted); font-weight: 400; font-size: 0.85em; }

.site-footer { padding: 26px 0 56px; color: #75706a; font-size: 13px; border-top: 1px solid var(--border); margin-top: 40px; }
.site-footer code { background: var(--panel); border: 1px solid var(--border); padding: 1px 6px; border-radius: 0; font-family: var(--mono); font-size: 0.9em; }

/* Admin-only build watermark — small, out of the way, never intercepts clicks. */
.git-watermark {
  position: fixed; bottom: 6px; right: 8px; z-index: 40;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
  color: var(--muted); opacity: 0.55; pointer-events: none; user-select: none;
}

/* panels */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 24px;
  margin-top: 20px;
}
.timeline-panel { overflow-x: auto; }

/* about page */
.about h2 { margin-top: 28px; }
.about h2:first-child { margin-top: 0; }
.about p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; max-width: 68ch; color: var(--ink-2); }

/* lists of shows / episodes */
.list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 0; }
.card {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  background: transparent; border: none; border-top: 1px solid var(--border); border-radius: 0;
  padding: 20px 4px; text-decoration: none; color: var(--ink); box-shadow: none;
  transition: background-color 0.12s ease;
}
.list > .row:last-child .card,
.list > li:last-child .card { border-bottom: 1px solid var(--border); }
.card:hover { background: var(--panel); }
.card:active { background: #0e0d0a; }
.card-title { font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1.05; flex: 1; }
.card-count { font-family: var(--mono); color: var(--muted); font-size: 12px; white-space: nowrap; }
.card-arrow { color: var(--accent); font-size: 15px; }

/* Episode and segment rows sit inside a season, where a serif display size
   would fight the season heading — step them down. */
.season-eps .card-title,
.segment-eps .card-title { font-family: var(--body); font-size: 17px; line-height: 1.35; }
.segment-eps .card-title { font-family: var(--display); font-size: 21px; }

.badge-closed {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: #4a120d; border: 1px solid #6e1c14; color: #ffb4a8;
  padding: 2px 6px; border-radius: 0; margin-left: 8px; vertical-align: middle;
}
.badge-confidence {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: transparent; border: 1px solid var(--border-2); color: var(--ink-2);
  padding: 2px 6px; border-radius: 0;
}
.badge-confidence-low { border-color: #4a2b26; color: var(--reject); }
.badge-confidence-medium { background: #3a362c; border-color: #58513f; color: #efe8d6; }
.badge-confidence-high { border-color: #4a4326; color: var(--accent); }

.badge-status {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: transparent; border: 1px solid var(--border-2); color: var(--ink-2);
  padding: 2px 6px; border-radius: 0;
}
.badge-status-accepted { border-color: #1f4a2b; color: var(--accept); }
.badge-status-pending { border-color: var(--border-2); color: var(--ink-2); }
.badge-status-rejected { border-color: #4a2b26; color: var(--reject); }

.segment-location {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px;
}
.segment-description-block { max-width: 62ch; margin: 0 0 20px; }
.segment-description { color: var(--ink-2); font-size: 17px; line-height: 1.55; margin: 0; position: relative; }
.segment-description.is-collapsed { max-height: 3.1em; overflow: hidden; }
.segment-description.is-collapsed::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.55em;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.segment-description-toggle {
  display: inline-block; margin-top: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em;
}
.segment-links {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em;
  color: var(--muted); margin: 0 0 20px;
}
.segment-links a { color: var(--accent); text-decoration: none; }
.segment-links a:hover { color: var(--ink); text-decoration: underline; }

.show-events-toggle {
  display: inline-flex; align-items: center; font-size: 13px; color: var(--muted); cursor: pointer;
  white-space: nowrap;
}
.show-events-toggle input { margin-right: 8px; vertical-align: middle; accent-color: var(--accent); }

/* search results */
.search-show-group { margin-top: 26px; }
.search-show-group h3 {
  font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); margin: 0 0 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.search-seg-matches { margin: 8px 2px 0; }
.search-seg-link { color: var(--accent); text-decoration: none; }
.search-seg-link:hover { text-decoration: underline; }

.search-events { gap: 0; }
.search-event {
  background: transparent; border: none; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none;
}
.search-events > .search-event:last-child { border-bottom: 1px solid var(--border); }
.search-event-link { display: block; padding: 18px 4px; text-decoration: none; color: inherit; }
.search-event-link:hover { background: var(--panel); }
.search-event-ctx { margin-bottom: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.search-event-title { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.15; margin-bottom: 6px; }
.search-event-snippet { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* fix page — each bad-date event as a full editable card */
.fix-item .date-ctx { font-family: var(--mono); font-size: 13px; font-weight: 500; margin-bottom: 16px; color: var(--accent); }
.fix-link { color: var(--accent); text-decoration: none; }
.fix-link:hover { text-decoration: underline; }
.fix-form input.fix-bad { border-color: var(--reject); }
.fix-form textarea { min-height: 170px; }
.fix-item.fixed { opacity: 0.5; }
.fix-item.fixed .date-ctx { text-decoration: line-through; }

/* forms */
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .auth-grid { grid-template-columns: 1fr; } }
.form-panel label {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
}
.form-panel input, .form-panel select, .form-panel textarea {
  display: block; width: 100%; margin-top: 8px;
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--border-2); border-radius: 0; background: var(--panel);
  text-transform: none; letter-spacing: normal;
}
.form-panel input:focus, .form-panel select:focus, .form-panel textarea:focus {
  outline: none; border-color: var(--accent);
}
.form-panel textarea { resize: vertical; }
.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grid-form .full { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.form-msg { font-size: 13px; }
.form-msg.ok { color: var(--accept); }
.form-msg.err { color: var(--reject); }
.signin-hint { margin-top: 26px; font-size: 16px; color: var(--ink-2); }
.empty { padding: 28px 0; }

.seg-edit-form { margin-bottom: 20px; }
.seg-link-rows { margin: 8px 0 12px; }
.seg-link-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.seg-link-row input { margin-top: 0; }
.seg-link-row .seg-link-name { flex: 0 0 160px; }
.seg-link-row .seg-link-url { flex: 1; }
.seg-link-row .seg-link-remove { font-size: 18px; line-height: 1; padding: 0 4px; }

/* buttons */
.btn {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 18px; border-radius: 0; border: 1px solid var(--border-2);
  background: transparent; color: var(--ink); cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); color: #000; }
.btn-accept { color: var(--accept); border-color: #2c4a38; }
.btn-accept:hover { border-color: var(--accept); color: var(--accept); }
.btn-reject { color: var(--reject); border-color: #4a2b26; }
.btn-reject:hover { border-color: var(--reject); color: var(--reject); }

/* moderation queue */
.pending-list { gap: 0; }
.pending {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  background: transparent; border: none; border-top: 1px solid var(--border); border-radius: 0;
  padding: 20px 4px; box-shadow: none;
}
.pending-list > .pending:last-child { border-bottom: 1px solid var(--border); }
.pending.done { opacity: 0.5; }
.pending-head { margin-bottom: 6px; }
.pending-desc { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.pending-desc :first-child { margin-top: 0; }
.pending-desc :last-child { margin-bottom: 0; }
.pending-actions { display: flex; gap: 10px; flex-shrink: 0; }
.done-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.done-Accepted { color: var(--accept); }
.done-Rejected { color: var(--reject); }

.imp {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: transparent; border: 1px solid var(--border-2); color: var(--ink-2);
  padding: 2px 7px; border-radius: 0; vertical-align: middle;
}
.imp-low { color: var(--muted); }
.imp-medium { color: var(--ink-2); }
.imp-high { border-color: #4a4326; color: var(--accent); }

.error-box { border: 1px solid var(--border); border-left: 2px solid var(--reject); }

/* settings — MCP tokens */
.token-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.token-form input {
  flex: 1 1 240px; width: auto; margin: 0; font: inherit; font-size: 15px;
  padding: 10px 12px; border: 1px solid var(--border-2); border-radius: 0;
  background: var(--panel); color: var(--ink);
}
.new-token { border: 1px solid #2c4a38; background: var(--panel); border-radius: 0; padding: 16px 18px; margin-bottom: 20px; }
.new-token-head { font-size: 14px; margin-bottom: 10px; color: var(--accept); }
.new-token-row { display: flex; gap: 10px; }
.new-token-row input {
  flex: 1; width: auto; margin: 0; font-family: var(--mono); font-size: 13px;
  padding: 10px 12px; border: 1px solid var(--border-2); border-radius: 0;
  background: #000; color: var(--ink);
}
.token-list { gap: 0; }
.token-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: transparent; border: none; border-top: 1px solid var(--border);
  border-radius: 0; padding: 14px 4px;
}
.token-list > .token-item:last-child { border-bottom: 1px solid var(--border); }
.token-prefix { background: var(--panel); border: 1px solid var(--border); padding: 2px 6px; border-radius: 0; font-family: var(--mono); font-size: 0.9em; }

/* delete / flag controls */
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; flex-wrap: wrap; }
.head-row h1 { margin: 0; }
.head-title { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.row { display: flex; align-items: stretch; gap: 12px; }
.row .card { flex: 1; }
.btn-sm { padding: 8px 12px; font-size: 11px; align-self: center; }
/* Narrow screens: compact the list rows — a trash icon instead of the
   "Delete" label, no decorative arrow (there's no room for it once the
   title wraps), and the "Closed" badge shrinks to an icon-only mark. Flag
   (non-admin) keeps its text — there's no obvious universal icon for it. */
@media (max-width: 640px) {
  .act-delete { font-size: 0; padding: 8px 10px; }
  /* An SVG mask, not the 🗑 emoji — emoji glyphs render in their own fixed
     (often blue/grey) colors on most platforms and ignore `color`, so the
     "red" request couldn't be satisfied with text content alone. */
  .act-delete::before {
    content: "";
    display: inline-block;
    width: 15px; height: 15px;
    background-color: var(--reject);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
    vertical-align: middle;
  }
  .card-arrow { display: none; }
  /* List rows only — the segment page's own "Closed" (.badge-closed-full)
     always shows the full word, there's no icon crowding to save space from. */
  .badge-closed:not(.badge-closed-full) {
    font-size: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; padding: 0; border-radius: 6px;
    background: var(--reject); border: none; vertical-align: middle;
  }
  .badge-closed:not(.badge-closed-full)::before { content: "✕"; font-size: 11px; line-height: 1; color: #1a0503; font-family: var(--body); }
}
.mt { margin-top: 34px; }
.flag-type {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: #d8a24a;
  background: transparent; border: 1px solid #4a3a1e; padding: 2px 7px; border-radius: 0; vertical-align: middle;
}
.manage-list { gap: 0; margin-top: 8px; }
.manage-item {
  display: flex; align-items: center; gap: 16px; background: transparent;
  border: none; border-top: 1px solid var(--border); border-radius: 0; padding: 14px 4px;
}
.manage-list > .manage-item:last-child { border-bottom: 1px solid var(--border); }
.mi-when { font-family: var(--mono); color: var(--accent); font-size: 12px; min-width: 130px; white-space: nowrap; }
.mi-title { flex: 1; font-family: var(--display); font-size: 22px; line-height: 1.2; font-weight: 400; }

/* collapsible seasons */
.season {
  background: transparent; border: none; border-top: 1px solid var(--border);
  border-radius: 0; box-shadow: none; margin-top: 0;
}
.season:last-of-type { border-bottom: 1px solid var(--border); }
.season-summary {
  cursor: pointer; padding: 22px 4px; font-weight: 400; list-style: none;
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--display); font-size: 30px; line-height: 1;
}
.season-summary::-webkit-details-marker { display: none; }
.season-summary::before { content: '+'; color: var(--accent); font-family: var(--body); font-size: 15px; }
.season[open] > .season-summary::before { content: '−'; }
.season-count { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--muted); margin-left: auto; }
.season-title { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--ink-2); font-style: italic; }
.season-eps { margin: 0; padding: 0 0 16px 22px; }

/* moderation-queue account-type sections (Verified/Unverified/Shadow Banned/Banned) */
.pending-section {
  background: transparent; border: none; border-top: 1px solid var(--border);
  border-radius: 0; box-shadow: none; margin-top: 0; padding-bottom: 16px;
}
.pending-section:last-of-type { border-bottom: 1px solid var(--border); }
.pending-section-summary {
  cursor: pointer; padding: 18px 4px; font-weight: 400; list-style: none;
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--display); font-size: 24px; line-height: 1;
}
.pending-section-summary::-webkit-details-marker { display: none; }
.pending-section-summary::before { content: '+'; color: var(--accent); font-family: var(--body); font-size: 15px; }
.pending-section[open] > .pending-section-summary::before { content: '−'; }

/* collapsible segments within an episode */
.segment-group { background: transparent; border: none; border-radius: 0; box-shadow: none; }
.segment-summary {
  cursor: pointer; padding: 15px 4px 15px 22px; font-weight: 400; list-style: none;
  display: flex; align-items: center; gap: 12px; border-top: 1px solid #1a1916;
}
.segment-summary::-webkit-details-marker { display: none; }
.segment-summary::before { content: '+'; color: var(--accent); font-size: 14px; }
.segment-group[open] > .segment-summary::before { content: '−'; }
.seg-ep-title { flex: 1; font-size: 17px; }
.segment-eps { margin: 0; padding: 0 0 12px 24px; }

/* moderation: grouped by submitter */
.pending-group { margin-top: 26px; }
.group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.group-title strong { font-family: var(--display); font-weight: 400; font-size: 24px; }
.group-actions { display: flex; gap: 10px; }

/* user management */
.user-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* analytics */
.analytics-range { margin: 20px 0; }
.analytics-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.analytics-table th, .analytics-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.analytics-table th {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.analytics-table td:nth-child(2), .analytics-table td:nth-child(3),
.analytics-table th:nth-child(2), .analytics-table th:nth-child(3) { text-align: right; }

/* ---------------------------------------------------------------------------
   Timeline library re-theme.
   timeline.css exposes its colours, dot size and line colour as custom
   properties on .tl-timeline / .tl-list-root, so this is a token pass — the
   library file itself is untouched. The rules after the token block cover the
   few things it hard-codes: the system font stack, light-mode shadows,
   rounded pills and the blue focus ring.
   --------------------------------------------------------------------------- */
.tl-timeline,
.tl-list-root {
  --tl-line: #35322c;
  --tl-bg: #000000;
  --tl-text: var(--ink);
  --tl-muted: var(--muted);
  --tl-border: var(--border);

  --tl-low: #6f6a60;
  --tl-medium: #a49f96;
  --tl-high: var(--accent);

  --tl-dot: 13px;

  font-family: var(--body);
}

/* Flat on black: the library's drop shadows and rounding read as light-mode. */
.tl-dot { box-shadow: none; }
.tl-node.tl-active .tl-dot:first-of-type { box-shadow: 0 0 0 4px rgba(242, 194, 48, 0.22); }
.tl-node:focus-visible .tl-dot:first-of-type { box-shadow: 0 0 0 3px rgba(242, 194, 48, 0.5); }
.tl-count {
  border-radius: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.tl-date { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; }

.tl-flag-body {
  border-radius: 0;
  box-shadow: none;
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.15;
  padding: 8px 12px;
}
a.tl-flag-title { color: var(--accent); }

.tl-popup { border-radius: 0; box-shadow: none; padding: 20px 22px; }
.tl-popup-close { border-radius: 0; }
.tl-popup-close:hover { background: rgba(255, 255, 255, 0.07); }
.tl-popup-title { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.15; }
a.tl-popup-link { color: var(--accent); }
.tl-popup-date { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
.tl-popup-desc { color: var(--ink-2); font-size: 15px; }
.tl-popup-desc a { color: var(--accent); }

/* Importance badges: outlined mono, matching .badge-confidence above. */
.tl-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
  background: transparent; border: 1px solid var(--border-2); color: var(--ink-2);
  border-radius: 0; padding: 2px 6px;
}
.tl-badge.tl-imp-low { color: var(--muted); }
.tl-badge.tl-imp-high { border-color: #4a4326; color: var(--accent); }

.tl-empty { padding: 56px 24px; }

/* Event list beneath the timeline. */
.tl-list { gap: 0; }
.tl-list-item {
  padding: 20px 0 20px 18px;
  border-left: none;
  border-top: 1px solid var(--border);
}
.tl-list > .tl-list-item:last-child { border-bottom: 1px solid var(--border); }
.tl-list-head { gap: 12px; }
.tl-list-date { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.04em; }
.tl-list-title { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.1; }
a.tl-list-title { color: var(--ink); }
a.tl-list-title:hover { color: var(--accent); text-decoration: none; }
.tl-list-meta { margin-top: 6px; font-family: var(--mono); font-size: 12px; }
.tl-list-desc { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 68ch; }
.tl-list-desc a { color: var(--accent); }