/* Generated by scripts/build-css.js. Edit the source files listed in styles/styles.css. */

/* source: base.css */
@charset "UTF-8";

@property --glow-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --glow-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes hero-glow {
  from { --glow-x: 0%;  --glow-y: -2%; }
  to   { --glow-x: 7%;  --glow-y: 13%; }
}

:root {
  --bg: #f7f3ec;
  --surface: #fffdf8;
  --surface-strong: #ffffff;
  --ink: #18201b;
  --muted: #66706a;
  --line: #ded6c8;
  --accent: #176b5b;
  --accent-strong: #0f4f43;
  /* Ink used on accent-filled controls. Dark mode flips the accent to a
     light teal, so the ink must flip to dark or text becomes unreadable. */
  --on-accent: #ffffff;
  --gold: #c89b3c;
  --rose: #a6484f;
  --shadow: 0 18px 45px rgba(24, 32, 27, 0.1);
  /* Neutral dropdown/menu surfaces (search autocomplete, etc.) — kept
     grayscale on purpose so menus read like YouTube's, not tinted green. */
  --menu-bg: #ffffff;
  --menu-line: #e3e3e3;
  --menu-hover: rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101714;
    --surface: #17211d;
    --surface-strong: #1d2a25;
    --ink: #eef4ed;
    --muted: #aab8b0;
    --line: #33433c;
    --accent: #6cc4ad;
    --accent-strong: #9de1d0;
    --on-accent: #101714;
    --gold: #d7b45c;
    --rose: #e08c94;
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    /* Kept in sync with :root[data-theme="dark"] below — without these the
       no-JS fallback path renders menus with the light palette. */
    --menu-bg: #212121;
    --menu-line: #3d3d3d;
    --menu-hover: rgba(255, 255, 255, 0.1);
  }
}

:root[data-theme="dark"] {
  --bg: #101714;
  --surface: #17211d;
  --surface-strong: #1d2a25;
  --ink: #eef4ed;
  --muted: #aab8b0;
  --line: #33433c;
  --accent: #6cc4ad;
  --accent-strong: #9de1d0;
  --on-accent: #101714;
  --gold: #d7b45c;
  --rose: #e08c94;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  --menu-bg: #212121;
  --menu-line: #3d3d3d;
  --menu-hover: rgba(255, 255, 255, 0.1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(200, 155, 60, 0.18), transparent 38rem),
    linear-gradient(180deg, #fbf8f0 0%, var(--bg) 38%, #f4efe5 100%);
  color: var(--ink);
  font-family: Inter, Arial, Helvetica, sans-serif;
  /* 2 alternate iterations: drifts out and back once, then stops repainting. */
  animation: hero-glow 16s ease-in-out 2 alternate;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background:
      radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(108, 196, 173, 0.11), transparent 36rem),
      linear-gradient(180deg, #101714 0%, var(--bg) 44%, #0c1210 100%);
  }
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(108, 196, 173, 0.11), transparent 36rem),
    linear-gradient(180deg, #101714 0%, var(--bg) 44%, #0c1210 100%);
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.is-hidden {
  display: none !important;
}

/* source: nav.css */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(222, 214, 200, 0.8);
  background: rgba(247, 243, 236, 0.92);
  backdrop-filter: blur(18px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header {
    border-bottom-color: rgba(51, 67, 60, 0.82);
    background: rgba(16, 23, 20, 0.9);
  }
}

:root[data-theme="dark"] .site-header {
  border-bottom-color: rgba(51, 67, 60, 0.82);
  background: rgba(16, 23, 20, 0.9);
}

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1280px, calc(100% - 32px));
  min-height: 64px;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inria Serif", Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 700;
}

.brand img {
  width: 1.45em;
  height: 1.45em;
  border-radius: 8px;
}

.nav-settings-link {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--muted);
  border-radius: 8px;
  transition: color 150ms ease, background 150ms ease;
}

.nav-settings-link:hover,
.nav-settings-link:focus-visible {
  color: var(--ink);
  background: rgba(23, 107, 91, 0.08);
}

.nav-settings-link.is-active {
  color: var(--accent);
}

@media (max-width: 600px) {
  .nav-settings-link {
    display: flex;
  }
}

.back-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: 2px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  transition: color 150ms ease, background 150ms ease;
}

.back-button:hover,
.back-button:focus-visible {
  color: var(--ink);
  background: rgba(23, 107, 91, 0.08);
}

@media (max-width: 600px) {
  .back-button {
    display: flex;
  }
}

.site-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-menu a {
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 10px 12px;
}

.site-menu a:hover,
.site-menu a:focus-visible {
  background: rgba(23, 107, 91, 0.08);
  color: var(--accent-strong);
  outline: none;
}

.site-menu a.is-active {
  color: var(--accent);
}

.nav-more {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-streak-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 48px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(102, 112, 106, 0.06);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  padding: 8px 11px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.nav-streak-btn:hover,
.nav-streak-btn:focus-visible {
  border-color: var(--gold);
  color: var(--ink);
  outline: none;
  transform: translateY(-1px);
}

.nav-streak-btn.is-active,
.nav-streak-btn.is-complete {
  border-color: rgba(200, 155, 60, 0.55);
  background: rgba(200, 155, 60, 0.14);
  color: var(--accent-strong);
}

.nav-streak-btn .streak-flame {
  color: currentColor;
}

.streak-panel-open {
  overflow: hidden;
}

.streak-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.streak-panel.is-hidden {
  display: none;
}

.streak-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 23, 20, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.streak-panel-sheet {
  position: relative;
  width: min(620px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
  box-shadow: 0 28px 70px rgba(16, 23, 20, 0.22);
  padding: 20px;
}

.streak-panel-head,
.streak-panel-summary,
.leaderboard-opt,
.leaderboard-row {
  display: flex;
  align-items: center;
}

.streak-panel-head {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.streak-panel-head h2 {
  margin: 2px 0 0;
  font-family: "Inria Serif", Georgia, serif;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
}

.streak-panel-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}

.streak-panel-close:hover,
.streak-panel-close:focus-visible {
  border-color: var(--accent);
  color: var(--ink);
  outline: none;
}

.streak-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 4px;
  margin-bottom: 18px;
}

.streak-tabs button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  padding: 10px 12px;
}

.streak-tabs button.is-active {
  background: var(--accent);
  color: var(--on-accent);
}

.streak-panel-body {
  display: grid;
  gap: 16px;
}

.streak-panel-summary {
  gap: 16px;
  border: 1px solid rgba(200, 155, 60, 0.35);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(200, 155, 60, 0.15), rgba(23, 107, 91, 0.08));
  padding: 16px;
}

.streak-panel-orb {
  --streak-progress: 0%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--surface-strong) 0 56%, transparent 57%),
    conic-gradient(var(--gold) var(--streak-progress), rgba(102, 112, 106, 0.18) 0);
  color: var(--muted);
}

.streak-panel-orb.is-active {
  color: var(--accent);
}

.streak-panel-orb strong {
  font-family: "Inria Serif", Georgia, serif;
  font-size: 1.8rem;
  line-height: 1;
}

.streak-panel-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.streak-panel-copy small,
.streak-heatmap-head span,
.leaderboard-opt span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.streak-panel-copy h3,
.leaderboard-intro h3 {
  margin: 0;
  font-family: "Inria Serif", Georgia, serif;
  font-size: 1.45rem;
}

.streak-panel-copy p,
.streak-panel-note,
.leaderboard-intro p,
.leaderboard-empty {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.leaderboard-retry {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.streak-panel-track {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(23, 107, 91, 0.12);
}

.streak-panel-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

.streak-panel-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.streak-panel-stats span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.streak-panel-stats strong {
  font-size: 1.25rem;
}

.streak-panel-stats small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.streak-rank-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.streak-rank-badge.rank-iron {
  background: rgba(102, 112, 106, 0.16);
  color: var(--muted);
}

.streak-rank-badge.rank-bronze {
  background: rgba(176, 108, 62, 0.18);
  color: #a3612f;
}

.streak-rank-badge.rank-silver {
  background: rgba(148, 158, 156, 0.22);
  color: #5f6b69;
}

.streak-rank-badge.rank-platinum {
  background: linear-gradient(135deg, rgba(23, 107, 91, 0.18), rgba(200, 155, 60, 0.18));
  color: var(--accent-strong);
}

.streak-rank-next {
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 800;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .streak-rank-badge.rank-bronze {
    color: #e0985c;
  }
  :root:not([data-theme="light"]) .streak-rank-badge.rank-silver {
    color: #c3ccca;
  }
}

:root[data-theme="dark"] .streak-rank-badge.rank-bronze {
  color: #e0985c;
}

:root[data-theme="dark"] .streak-rank-badge.rank-silver {
  color: #c3ccca;
}

.streak-heatmap-wrap {
  display: grid;
  gap: 10px;
}

.streak-heatmap-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.streak-heatmap {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.streak-day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 6px;
  background: rgba(102, 112, 106, 0.1);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.streak-day.is-partial {
  background: rgba(200, 155, 60, 0.18);
  color: var(--ink);
}

.streak-day.is-complete {
  background: var(--accent);
  color: var(--on-accent);
}

.streak-day.is-future {
  opacity: 0.42;
}

.quran-streak-view {
  display: grid;
  gap: 16px;
}

.quran-streak-intro,
.quran-clock-in-card {
  display: flex;
  align-items: center;
}

.quran-streak-intro {
  gap: 12px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: rgba(23, 107, 91, 0.08);
  padding: 12px 14px;
}

.quran-streak-intro > svg {
  flex: 0 0 auto;
  color: var(--accent);
}

.quran-streak-intro div,
.quran-clock-in-card div {
  display: grid;
  gap: 3px;
}

.quran-streak-intro p,
.quran-clock-in-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.quran-streak-summary {
  border-color: rgba(23, 107, 91, 0.34);
  background: linear-gradient(135deg, rgba(23, 107, 91, 0.14), rgba(200, 155, 60, 0.08));
}

.quran-streak-orb {
  background:
    radial-gradient(circle at 50% 50%, var(--surface-strong) 0 56%, transparent 57%),
    conic-gradient(var(--accent) var(--streak-progress), rgba(102, 112, 106, 0.18) 0);
}

.quran-streak-orb .quran-streak-book {
  width: 19px;
  height: 19px;
}

.quran-clock-in-card {
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 13px 14px;
}

.quran-clock-in-card button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  padding: 10px 17px;
}

.quran-clock-in-card button:hover:not(:disabled),
.quran-clock-in-card button:focus-visible:not(:disabled) {
  background: var(--accent-strong);
  outline: none;
}

.quran-clock-in-card button:disabled {
  cursor: default;
  background: rgba(23, 107, 91, 0.12);
  color: var(--accent-strong);
}

.quran-clock-in-status {
  margin: -8px 0 0;
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 800;
}

.quran-clock-in-status:empty {
  display: none;
}

.quran-streak-note strong {
  color: var(--ink);
}

.leaderboard-intro,
.leaderboard-list {
  display: grid;
  gap: 10px;
}

.leaderboard-opt {
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.leaderboard-opt div {
  display: grid;
  gap: 3px;
}

.leaderboard-opt button {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  padding: 10px 16px;
}

.leaderboard-opt button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.leaderboard-row {
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 11px 12px;
}

.leaderboard-row.is-you {
  border-color: var(--gold);
  background: rgba(200, 155, 60, 0.1);
}

.leaderboard-rank {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(23, 107, 91, 0.1);
  color: var(--accent);
  font-weight: 900;
}

.leaderboard-name {
  flex: 1;
  min-width: 0;
  font-weight: 800;
}

.leaderboard-name em {
  color: var(--gold);
  font-style: normal;
  margin-left: 6px;
}

.leaderboard-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.leaderboard-name-wrap .leaderboard-name {
  flex: initial;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-edit-btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--muted);
  transition: border-color 0.15s, color 0.15s;
}

.leaderboard-edit-btn:hover,
.leaderboard-edit-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.leaderboard-name-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.leaderboard-name-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  padding: 6px 9px;
}

.leaderboard-name-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.15);
}

.leaderboard-name-save,
.leaderboard-name-cancel {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.leaderboard-name-save {
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
}

.leaderboard-name-cancel {
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--muted);
}

.leaderboard-name-cancel:hover,
.leaderboard-name-cancel:focus-visible {
  border-color: var(--rose);
  color: var(--rose);
  outline: none;
}

.nav-more-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 8px 11px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.nav-more-trigger:hover,
.nav-more-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  background: rgba(23, 107, 91, 0.06);
  color: var(--accent-strong);
}

.nav-more-icon-menu {
  display: none;
}

.nav-more-trigger svg {
  transition: transform 200ms ease;
}

.nav-more-trigger[aria-expanded="true"] .nav-more-icon-chevron {
  transform: rotate(180deg);
}

.nav-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 172px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
  box-shadow: 0 12px 32px rgba(24, 32, 27, 0.13);
  overflow: hidden;
  z-index: 40;
}

.nav-more-menu[hidden] {
  display: none;
}

.nav-more-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s, color 0.12s;
}

.nav-more-menu a:last-child {
  border-bottom: none;
}

.nav-more-menu a:hover,
.nav-more-menu a:focus-visible {
  background: rgba(23, 107, 91, 0.06);
  color: var(--accent-strong);
  outline: none;
}

.nav-more-menu a svg {
  flex-shrink: 0;
  color: var(--muted);
}

/* More is an overflow menu: hide destinations already exposed by the
   navigation treatment visible at the current breakpoint. */
.nav-more-menu a.more-link--tablet-only,
.nav-more-menu a.more-link--mobile-only,
.nav-more-menu a.more-link--compact-tablet-only {
  display: none;
}

@media (min-width: 601px) and (max-width: 1199px) {
  .nav-more-menu a.more-link--tablet-only {
    display: flex;
  }
}

/* Narrow tablets: the header cannot hold six inline links, the wordmark and the
   account controls at once -- the wordmark was wrapping onto two lines and the
   bar itself overflowed. History and Saved move into the overflow menu here and
   return to the row at 1100px, where they fit again. */
@media (min-width: 601px) and (max-width: 1099px) {
  .site-menu a.nav-link--wide-tablet-only {
    display: none;
  }

  .nav-more-menu a.more-link--compact-tablet-only {
    display: flex;
  }

  .brand {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .site-menu {
    gap: 2px;
  }

  .site-menu a {
    padding: 10px 7px;
    font-size: 0.82rem;
  }
}

/* Small tablets and split-screen windows. Four links, the account controls and
   a full wordmark still do not fit here, and the wordmark is the one piece with
   a graceful degradation: the mark alone still identifies the site, and it is
   what the phone header falls back to as well. */
@media (min-width: 601px) and (max-width: 719px) {
  .brand span {
    display: none;
  }
}

@media (max-width: 600px) {
  .nav-more-menu a.more-link--mobile-only {
    display: flex;
  }
}

@media (min-width: 401px) and (max-width: 600px), (min-width: 1200px) {
  .nav-more-menu a.more-link--settings-fallback {
    display: none;
  }
}

@media (min-width: 1600px) {
  .nav-more-menu a.more-link--expanded-sidebar-duplicate {
    display: none;
  }
}

@media (max-width: 460px) {
  .nav-more-trigger {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
  }

  .nav-more-label,
  .nav-more-icon-chevron {
    display: none;
  }

  .nav-more-icon-menu {
    display: block;
  }
}

@media (max-width: 400px) {
  .back-button {
    width: 44px;
    height: 44px;
    margin-right: 0;
  }

  .nav-settings-link {
    display: none;
  }
}

@media (max-width: 360px) {
  .nav-shell {
    gap: 4px;
  }

  .brand {
    min-width: 0;
    margin-right: auto;
  }

  .brand span {
    display: none;
  }

  .brand img {
    width: 32px;
    height: 32px;
  }

}

/* ─── Bottom navigation (mobile) ─────────────────────────────────────────── */

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  border-top: 1px solid var(--line);
  background: rgba(247, 243, 236, 0.96);
  backdrop-filter: blur(18px);
  padding-bottom: env(safe-area-inset-bottom);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bottom-nav {
    border-top-color: rgba(51, 67, 60, 0.82);
    background: rgba(16, 23, 20, 0.94);
  }
}

:root[data-theme="dark"] .bottom-nav {
  border-top-color: rgba(51, 67, 60, 0.82);
  background: rgba(16, 23, 20, 0.94);
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 9px 4px 11px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bottom-nav-item.is-active {
  color: var(--accent);
}

.bottom-nav-item svg {
  flex-shrink: 0;
}

/* Desktop application shell ------------------------------------------------ */

.desktop-nav-search,
.desktop-sidebar {
  display: none;
}

/* The header search starts one breakpoint below the desktop shell so landscape
   iPads keep a search box: their homepage no longer carries the hero that used
   to hold the only one. Below this the inline nav links and the search cannot
   share a row, so narrow tablets and phones search from the Explore tab. */
@media (min-width: 1100px) {
  .desktop-nav-search {
    display: flex;
    flex: 1 1 520px;
    align-items: center;
    min-width: 260px;
    max-width: 680px;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-strong);
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }

  .desktop-nav-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.1);
  }

  .desktop-nav-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--ink);
    outline: 0;
    padding: 10px 16px;
  }

  .desktop-nav-search button {
    display: grid;
    place-items: center;
    align-self: stretch;
    width: 54px;
    border: 0;
    border-left: 1px solid var(--line);
    background: rgba(102, 112, 106, 0.06);
    color: var(--ink);
  }

  .desktop-nav-search button:hover,
  .desktop-nav-search button:focus-visible {
    background: rgba(23, 107, 91, 0.1);
    color: var(--accent-strong);
    outline: 0;
  }
}

/* Tablet still shows the inline destination links, so the search shares the row
   rather than owning the middle of it. The wordmark and the link row give up a
   little width to pay for it -- without this the brand wrapped onto two lines. */
@media (min-width: 1100px) and (max-width: 1199px) {
  .nav-shell {
    gap: 10px;
  }

  .brand {
    flex-shrink: 0;
    font-size: 1.05rem;
    white-space: nowrap;
  }

  .site-menu {
    gap: 2px;
  }

  .site-menu a {
    padding: 10px 7px;
    font-size: 0.82rem;
  }

  .desktop-nav-search {
    flex: 1 1 220px;
    min-width: 150px;
    max-width: 340px;
  }

  .desktop-nav-search input {
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .desktop-nav-search button {
    width: 42px;
  }
}

@media (min-width: 1200px) {
  body {
    --desktop-sidebar-width: 72px;
  }

  .nav-shell {
    width: calc(100% - 32px);
    gap: 12px;
  }

  .site-menu {
    display: none;
  }

  /* Public pages use the left rail at this width. The extra class keeps the
     later .page-menu compatibility rule from restoring duplicate top links. */
  .site-menu.sidebar-replaced-menu {
    display: none;
  }

  .desktop-sidebar {
    position: fixed;
    inset: 64px auto 0 0;
    z-index: 19;
    display: flex;
    flex-direction: column;
    width: var(--desktop-sidebar-width);
    overflow-y: auto;
    border-right: 1px solid var(--line);
    background: var(--bg);
    padding: 8px 4px 14px;
  }

  .desktop-sidebar-nav {
    display: grid;
    gap: 4px;
  }

  .desktop-sidebar-heading,
  .desktop-sidebar-footer {
    display: none;
  }

  .desktop-sidebar-link {
    display: flex;
    min-height: 68px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    transition: background 150ms ease, color 150ms ease;
  }

  .desktop-sidebar-link:hover,
  .desktop-sidebar-link:focus-visible {
    background: rgba(23, 107, 91, 0.08);
    color: var(--ink);
    outline: 0;
  }

  .desktop-sidebar-link.is-active {
    background: rgba(23, 107, 91, 0.12);
    color: var(--accent-strong);
  }

  .desktop-sidebar-link svg {
    flex: 0 0 auto;
  }

  .desktop-sidebar-divider {
    margin: 5px 6px;
    border-top: 1px solid var(--line);
  }

  .desktop-sidebar + main,
  .desktop-sidebar ~ .site-footer {
    margin-left: var(--desktop-sidebar-width);
  }
}

@media (min-width: 1600px) {
  body {
    --desktop-sidebar-width: 204px;
  }

  .nav-shell .brand {
    width: 216px;
    flex: 0 0 216px;
  }

  .nav-shell .brand span {
    white-space: nowrap;
  }

  .desktop-sidebar {
    padding: 18px 12px;
  }

  .desktop-sidebar-nav {
    gap: 5px;
  }

  .desktop-sidebar-heading {
    display: block;
    margin: 6px 12px 4px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .desktop-sidebar-link {
    min-height: 44px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 9px 12px;
    font-size: 0.9rem;
    line-height: 1.2;
    text-align: left;
  }

  .desktop-sidebar-divider {
    margin: 9px 8px 4px;
  }

  .desktop-sidebar-footer {
    display: block;
    margin: auto 8px 0;
    border-top: 1px solid var(--line);
    padding: 18px 4px 2px;
  }

  .desktop-sidebar-footer-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 10px;
  }

  .desktop-sidebar-footer a {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.35;
  }

  .desktop-sidebar-footer a:hover,
  .desktop-sidebar-footer a:focus-visible {
    color: var(--accent-strong);
    outline: 0;
  }

  .desktop-sidebar-footer p {
    margin: 15px 0 0;
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.4;
  }

  .nav-more {
    display: none;
  }

  .desktop-sidebar ~ .site-footer:not(.site-footer--admin) {
    display: none;
  }
}

/* source: layout.css */
.hero {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(42px, 8vw, 92px) 0 26px;
}

/* Returning visitors already know the pitch — compact the hero so
   "Continue learning" sits near the fold. First visits are unchanged. */
body.has-watch-history .hero {
  padding: clamp(22px, 3vw, 40px) 0 18px;
}

body.has-watch-history .hero h1 {
  font-size: clamp(1.9rem, 2.6vw, 2.7rem);
}

body.has-watch-history .hero-copy {
  display: none;
}

.hero-content {
  max-width: 760px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  font-family: "Inria Serif", Georgia, serif;
  line-height: 1.02;
}

h1 {
  max-width: 820px;
  font-size: clamp(2.65rem, 7vw, 5.9rem);
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.hero-copy {
  max-width: 660px;
  margin: 18px 0 24px;
  color: #3e4842;
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.65;
}

@media (min-width: 900px) {
  .hero {
    padding: clamp(36px, 4vw, 52px) 0 10px;
  }

  .hero h1 {
    font-size: clamp(3rem, 4.6vw, 4.1rem);
  }

  .hero-copy {
    margin: 14px 0 18px;
  }
}

.search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 680px);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.search-form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 16px 36px rgba(24, 32, 27, 0.12);
}

.search-form input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 13px 12px;
  outline: none;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  gap: 4px;
  max-height: min(360px, 62vh);
  overflow-y: auto;
  border: 1px solid var(--menu-line, var(--line));
  border-radius: 8px;
  background: var(--menu-bg, var(--surface-strong));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
  padding: 6px;
}

.search-suggestions[hidden] {
  display: none;
}

.search-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: 11px 12px;
  text-align: left;
}

.search-suggestion span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.search-suggestion small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.search-suggestion:hover,
.search-suggestion:focus-visible,
.search-suggestion.is-active {
  background: var(--menu-hover, rgba(0, 0, 0, 0.06));
  outline: none;
}

.search-form > button,
.retry-button {
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  padding: 12px 18px;
}

.search-form > button:hover,
.retry-button:hover {
  background: var(--accent-strong);
}

body.search-mode .hero {
  padding: 24px 0 8px;
}

body.search-mode .hero-content {
  max-width: none;
}

body.search-mode .hero .eyebrow,
body.search-mode .hero h1,
body.search-mode .hero-copy {
  display: none;
}

body.search-mode .search-form {
  width: min(100%, 860px);
}

body.search-mode .continue-section,
body.search-mode .streak-section,
body.search-mode #categories {
  display: none;
}

body.search-mode .series-section {
  padding-top: 16px;
}

body.search-mode .row-heading {
  align-items: center;
  padding-bottom: 6px;
}

body.search-mode #active-category-label {
  color: var(--rose);
}

.content-section {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0;
}

.continue-section {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: 16px 0 26px;
}

.section-heading {
  margin-bottom: 16px;
}

.row-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.result-count {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}

.ai-search-spinner {
  display: inline-block;
  vertical-align: -2px;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ai-spin 0.8s linear infinite;
}

@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-search-spinner {
    animation: none;
  }
}

.status-message {
  display: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
  line-height: 1.5;
  padding: 18px;
}

.status-message.is-visible {
  display: block;
}

.series-section {
  padding-top: 12px;
  padding-bottom: 56px;
}

#categories {
  padding-bottom: 4px;
}

.page-menu {
  display: flex;
}

.primary-link,
.quiet-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 800;
}

.primary-link {
  background: var(--accent);
  color: var(--on-accent);
  padding: 13px 18px;
}

.primary-link:hover,
.primary-link:focus-visible {
  background: var(--accent-strong);
  outline: none;
}

.quiet-link {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--accent-strong);
  padding: 11px 15px;
}

.quiet-link:hover,
.quiet-link:focus-visible {
  border-color: var(--accent);
  outline: none;
}

@media (min-width: 1200px) {
  .home-page .hero,
  .home-page .content-section,
  .home-page .continue-section {
    width: calc(100% - 48px);
  }

  .home-page .hero {
    padding: 28px 0 12px;
  }

  .home-page .hero h1 {
    max-width: 760px;
    font-size: clamp(2.35rem, 3.3vw, 3.45rem);
    line-height: 1.03;
  }

  .home-page .hero-copy {
    max-width: 620px;
    margin: 10px 0 0;
    font-size: 1rem;
  }

  .home-page .hero .search-form {
    display: none;
  }

  .home-page.has-watch-history .hero,
  .home-page.search-mode .hero {
    display: none;
  }

  .home-page #categories {
    position: sticky;
    top: 64px;
    z-index: 12;
    padding-top: 12px;
    padding-bottom: 8px;
    background: var(--bg);
  }

  .home-page .series-section {
    padding-top: 8px;
  }

  .home-page .home-learning-overview {
    display: grid;
    grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.65fr);
    align-items: start;
    gap: 24px;
    width: calc(100% - 48px);
    margin: 0 auto;
    padding: 18px 0 8px;
  }

  .home-page .home-learning-overview > .content-section,
  .home-page .home-learning-overview > .continue-section {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .home-page .home-learning-overview > .streak-section:not([hidden]) + .continue-section[hidden],
  .home-page .home-learning-overview > .streak-section[hidden] + .continue-section:not([hidden]) {
    grid-column: 1 / -1;
  }

  .home-page .home-learning-overview .section-heading {
    margin-bottom: 10px;
  }

  .home-page .home-learning-overview .section-heading h2 {
    font-size: 1.5rem;
  }

  .home-page .series-section .row-heading {
    margin-bottom: 12px;
  }

  .home-page .series-section .row-heading h2 {
    font-size: 1.8rem;
  }
}

/* At compact desktop widths, placing the streak beside two information-rich
   resume cards leaves too little room for either card's title and timestamp.
   Stack the overview rows until the desktop canvas is genuinely wide enough. */
@media (min-width: 1200px) and (max-width: 1450px) {
  .home-page .home-learning-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* source: home.css */
/* Continue-learning cards are landscape: a 16:9 thumbnail beside the title.
   The thumbnail column is sized *from* the card height (--continue-thumb-h)
   rather than as a percentage of the card width, so the image keeps its native
   ratio at every breakpoint instead of being cropped by whatever height the
   wrapping text happened to produce. The text is clamped for the same reason —
   a title that grows to three lines used to stretch the card and crop the
   thumbnail with it. */
.continue-strip {
  --continue-thumb-h: 104px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.continue-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  box-shadow: 0 10px 28px rgba(24, 32, 27, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.15s;
}

.continue-card-link {
  display: grid;
  color: inherit;
  text-decoration: none;
}

.continue-card:hover,
.continue-card:focus-within {
  border-color: var(--accent);
}

.continue-card-link:focus-visible {
  outline: none;
}

.continue-remove {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(13, 15, 14, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.continue-remove::before {
  content: "";
  position: absolute;
  inset: -9px;
}

.continue-card:hover .continue-remove {
  opacity: 1;
}

.continue-remove:hover,
.continue-remove:focus-visible {
  background: rgba(166, 72, 79, 0.85);
  outline: none;
}

@media (hover: none) {
  .continue-remove {
    opacity: 1;
  }
}

.continue-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #e5ded0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .continue-thumb {
    background: #1d2a25;
  }
}

:root[data-theme="dark"] .continue-thumb {
  background: #1d2a25;
}

.continue-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.continue-body {
  display: grid;
  gap: 5px;
  padding: 12px 13px 16px;
}

.continue-body small {
  overflow: hidden;
  color: var(--rose);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.continue-body strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 0.98rem;
  line-height: 1.35;
}

.continue-body em {
  overflow: hidden;
  color: var(--accent);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  /* One logical line ("Resume at 0:28 · 40 min left"). Letting it wrap was the
     other thing pushing the body past the card's fixed height. */
  text-overflow: ellipsis;
  white-space: nowrap;
}

.continue-hero {
  grid-column: 1 / -1;
}

.continue-hero .continue-card-link {
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  align-items: stretch;
}

.continue-hero .continue-thumb {
  height: 100%;
  aspect-ratio: auto;
  min-height: 180px;
}

.continue-hero .continue-body {
  gap: 8px;
  align-content: center;
  padding: 20px 24px;
}

.continue-hero .continue-body strong {
  font-family: "Inria Serif", Georgia, serif;
  font-size: 1.45rem;
  line-height: 1.25;
}

.continue-hero .continue-body em {
  font-size: 0.85rem;
}

.continue-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(13, 15, 14, 0.35);
}

.continue-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.continue-resume-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin-top: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.85rem;
  font-weight: 700;
  transition: background 0.15s;
}

.continue-hero:hover .continue-resume-btn,
.continue-hero:focus-within .continue-resume-btn {
  background: var(--accent-strong);
}

/* Tablet and desktop: keep resume choices short and scannable. Landscape cards
   leave more of the lecture feed visible, including in a half-width window. */
@media (min-width: 601px) {
  /* One card per row on narrow tablets. Two columns here left roughly 165px for
     the text beside the thumbnail, which is not enough for a lecture title: the
     fixed-height grid compressed the title row and clipped it mid-line. Scoped
     to the resume list — the pathway shelf shares .continue-strip but renders
     four items. */
  #continue-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .continue-hero {
    grid-column: auto;
  }

  /* Fixed height, not min-height: the card is as tall as its thumbnail, so the
     thumbnail can never be stretched (and therefore cropped) by a title that
     wrapped onto an extra line. --continue-thumb-h is set large enough for the
     clamped eyebrow + two title lines + resume line to sit beside it. */
  .continue-card-link,
  .continue-hero .continue-card-link {
    grid-template-columns: calc(var(--continue-thumb-h) * 16 / 9) minmax(0, 1fr);
    align-items: stretch;
    height: var(--continue-thumb-h);
  }

  .continue-thumb,
  .continue-hero .continue-thumb {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .continue-body,
  .continue-hero .continue-body {
    gap: 5px;
    align-content: center;
    overflow: hidden;
    padding: 11px 42px 11px 13px;
  }

  .continue-hero .continue-body strong {
    font-family: inherit;
    font-size: 0.98rem;
    line-height: 1.35;
  }

  .continue-hero .continue-body em {
    font-size: 0.78rem;
  }

  /* The whole card is the resume link, so the separate button is redundant
     once the card becomes compact. */
  .continue-hero .continue-resume-btn {
    display: none;
  }
}

@media (min-width: 901px) {
  .continue-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Wide enough for two side by side, with a taller thumbnail to match. */
  #continue-list {
    --continue-thumb-h: 112px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .home-page .continue-strip {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 580px));
    gap: 16px;
  }

  .home-page #continue-list {
    --continue-thumb-h: 124px;
  }

  .home-page .continue-card {
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(24, 32, 27, 0.1);
  }

  .home-page .streak-card {
    min-height: 160px;
    border-radius: 14px;
    background:
      radial-gradient(circle at 92% 12%, rgba(200, 155, 60, 0.22), transparent 44%),
      linear-gradient(135deg, rgba(200, 155, 60, 0.17), rgba(23, 107, 91, 0.11)),
      var(--surface-strong);
    box-shadow: 0 14px 36px rgba(24, 32, 27, 0.1);
  }
}

/* The streak card is a three-column grid (orb | copy | counter+action) whose
   middle column is whatever is left over. Between 1200px and here the leftovers
   are too narrow for the copy to sit on its intended lines, so the card grows
   past the 160px it is meant to hold and overhangs the Continue learning shelf
   beside it. The upper bound used to be 1450px, but the counter that this block
   hides reappears there and takes ~48px straight back out of the copy column --
   so 1451-1750px was actually the worst case (193px at 1500px) rather than the
   safe one. Past 1750px the card is wide enough to carry everything full size. */
@media (min-width: 1200px) and (max-width: 1750px) {
  /* The three-column card left the copy about 147px at the narrow end of this
     band, so the label and heading both wrapped and pushed the card past the
     160px it is meant to hold -- taller than the Continue learning shelf beside
     it. Tightening the card's own gutters buys the copy back ~16px, which is
     enough for the heading to sit on one line; the paragraph was already scaled
     down here for the same reason, and the heading needed it more. */
  .home-page .streak-card {
    gap: 10px;
    padding-inline: 12px;
  }

  .home-page .streak-copy h2 {
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .home-page .streak-copy p {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .home-page .streak-stats span {
    display: none;
  }

  .home-page .streak-action {
    padding-inline: 12px;
  }
}

/* Canonical Continue Learning layout. The shelf contains at most two items, so
   a stable grid is clearer than a horizontally scrolling strip: every card,
   timestamp and progress state is visible without exposing a native scrollbar.
   These selectors intentionally come after the legacy hero-card breakpoints so
   both saved items now follow one predictable component model. */
#continue-list {
  --continue-card-h: 116px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  overflow: visible;
  padding: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

#continue-list .continue-card {
  min-width: 0;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(24, 32, 27, 0.09);
}

#continue-list .continue-card-link,
#continue-list .continue-hero .continue-card-link {
  grid-template-columns: calc(var(--continue-card-h) * 16 / 9) minmax(0, 1fr);
  align-items: stretch;
  height: var(--continue-card-h);
  min-height: var(--continue-card-h);
}

#continue-list .continue-thumb,
#continue-list .continue-hero .continue-thumb {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

#continue-list .continue-body,
#continue-list .continue-hero .continue-body {
  align-content: center;
  gap: 5px;
  overflow: hidden;
  padding: 12px 42px 12px 14px;
}

#continue-list .continue-body small,
#continue-list .continue-hero .continue-body small {
  display: block;
  font-size: 0.64rem;
}

#continue-list .continue-body strong,
#continue-list .continue-hero .continue-body strong {
  font-family: inherit;
  font-size: clamp(0.88rem, 1.5vw, 1rem);
  line-height: 1.28;
}

.continue-timecode {
  position: absolute;
  right: 7px;
  bottom: 9px;
  border-radius: 5px;
  background: rgba(8, 11, 9, 0.82);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  padding: 4px 6px;
}

.continue-meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.continue-resume {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 800;
}

#continue-list .continue-resume-btn {
  display: none;
}

#continue-list .continue-remove {
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
}

@media (min-width: 700px) {
  #continue-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  #continue-list {
    --continue-card-h: 124px;
  }
}

.streak-section {
  padding-top: 0;
}

.streak-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  border: 1px solid rgba(200, 155, 60, 0.4);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(200, 155, 60, 0.16), rgba(23, 107, 91, 0.08)),
    var(--surface-strong);
  box-shadow: 0 12px 34px rgba(24, 32, 27, 0.09);
  padding: 14px 16px;
}

.streak-orb {
  --streak-progress: 0%;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--surface-strong) 0 56%, transparent 57%),
    conic-gradient(var(--gold) var(--streak-progress), rgba(200, 155, 60, 0.18) 0);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(200, 155, 60, 0.25);
}

.streak-orb svg {
  margin-bottom: -4px;
  color: var(--gold);
}

.streak-orb strong {
  font-family: "Inria Serif", Georgia, serif;
  font-size: 1.3rem;
  line-height: 1;
}

.streak-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.streak-copy small {
  color: var(--rose);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.streak-copy h2 {
  margin: 0;
  font-family: "Inria Serif", Georgia, serif;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.streak-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.streak-track {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(23, 107, 91, 0.12);
}

/* Unfilled portion of the streak bar — the light tint reads as nothing on a
   dark surface, so the bar looks like it has no track at all. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .streak-track {
    background: rgba(108, 196, 173, 0.16);
  }
}

:root[data-theme="dark"] .streak-track {
  background: rgba(108, 196, 173, 0.16);
}

.streak-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

.streak-stats {
  display: grid;
  /* Counter and action sat stacked, making this column the tallest thing in
     the card. Side by side, the card is driven by its copy instead. */
  grid-auto-flow: column;
  align-items: center;
  gap: 14px;
  justify-items: end;
}

.streak-stats span {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.streak-stats strong {
  font-size: 1.25rem;
}

.streak-stats small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.streak-action {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.86rem;
  font-weight: 800;
  padding: 10px 16px;
  transition: background 0.15s, transform 0.15s;
}

.streak-action:hover,
.streak-action:focus-visible {
  background: var(--accent-strong);
  outline: none;
  transform: translateY(-1px);
}

/* ─── Homepage shelf cards ───────────────────────────────────────────────── */

.shelf-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 236px;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.shelf-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(24, 32, 27, 0.08);
  scroll-snap-align: start;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.15s;
}

.shelf-card:hover,
.shelf-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  outline: none;
}

.shelf-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.shelf-card-body {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 11px 12px 14px;
}

.shelf-card-body small {
  color: var(--rose);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shelf-card-body strong {
  font-size: 0.92rem;
  line-height: 1.35;
}

.shelf-card-body em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 600;
}

/* ─── Episode search results ────────────────────────────────────────────── */

.episode-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.episode-result-card {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  padding: 12px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(24, 32, 27, 0.08);
}

.episode-result-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
}

.episode-result-card small {
  display: block;
  color: var(--rose);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.episode-result-card strong {
  display: block;
  margin-top: 4px;
  font-size: 0.98rem;
  line-height: 1.35;
}

.episode-result-card:hover strong,
.episode-result-card:focus-visible strong {
  color: var(--accent);
}

.episode-result-speaker {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.8rem;
}

/* ─── Transcript search results ─────────────────────────────────────────── */

.transcript-results {
  display: grid;
  gap: 14px;
}

.transcript-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  padding: 14px;
  box-shadow: 0 10px 28px rgba(24, 32, 27, 0.08);
}

.transcript-card-head {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.transcript-card-head img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
}

.transcript-card-head small {
  display: block;
  color: var(--rose);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.transcript-card-head strong {
  display: block;
  margin-top: 4px;
  font-size: 0.98rem;
  line-height: 1.35;
}

.transcript-card-head:hover strong,
.transcript-card-head:focus-visible strong {
  color: var(--accent);
}

.transcript-moments {
  display: grid;
  gap: 8px;
}

.transcript-moment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 9px;
  color: inherit;
  text-decoration: none;
}

.transcript-moment:hover,
.transcript-moment:focus-visible {
  border-color: var(--accent);
  background: rgba(23, 107, 91, 0.08);
  outline: none;
}

.transcript-time {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.transcript-snippet {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.transcript-snippet mark {
  background: rgba(23, 107, 91, 0.16);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 700;
}

/* source: cards.css */
/* ─── Category strip ─────────────────────────────────────────────────────── */

.category-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 52px), transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black calc(100% - 52px), transparent 100%);
}

.category-strip {
  scrollbar-width: none;
}

.category-strip::-webkit-scrollbar {
  display: none;
}

.category-carousel {
  min-width: 0;
}

.category-scroll-button {
  display: none;
}

.speaker-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.speaker-profile-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  padding: 14px;
  box-shadow: 0 10px 28px rgba(24, 32, 27, 0.08);
}

.speaker-profile-card:hover,
.speaker-profile-card:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.speaker-profile-card img {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  object-fit: cover;
}

.speaker-profile-card strong,
.speaker-profile-card em {
  display: block;
}

.speaker-profile-card strong {
  font-size: 1rem;
}

.speaker-profile-card em {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  font-style: normal;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.category-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 7px 13px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.category-button:hover,
.category-button:focus-visible,
.category-button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  outline: none;
}

/* ─── Series grid & cards ────────────────────────────────────────────────── */

.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  column-gap: 18px;
  row-gap: 34px;
}
.catalog-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.catalog-pagination[hidden] {
  display: none;
}

.catalog-pagination-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.catalog-load-more {
  min-width: 180px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 11px 20px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.catalog-load-more:hover,
.catalog-load-more:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(23, 107, 91, 0.2);
  outline: 3px solid rgba(23, 107, 91, 0.2);
  outline-offset: 2px;
}

.related-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.related-divider::before,
.related-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

.series-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  box-shadow: 0 10px 28px rgba(24, 32, 27, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.15s;
}

.home-page .series-card {
  cursor: pointer;
}

@media (min-width: 901px) {
  .category-carousel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0;
  }

  /* Pin each child to its own column. The previous arrow is display:none until
     the strip has been scrolled, and without explicit placement that removed it
     from the grid entirely: the strip slid into column 1, which is `auto` and
     therefore sized to the full width of the chips, and the next arrow was
     pushed past the container -- giving the whole page a few pixels of
     horizontal scroll. */
  .category-scroll-previous {
    grid-column: 1;
  }

  .category-strip {
    grid-column: 2;
  }

  .category-scroll-next {
    grid-column: 3;
  }

  .category-strip {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px 0 12px;
    scroll-behavior: smooth;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .category-scroll-button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface-strong);
    color: var(--ink);
    box-shadow: 0 5px 16px rgba(24, 32, 27, 0.08);
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
  }

  .category-scroll-previous {
    margin-right: 8px;
  }

  .category-scroll-next {
    margin-left: 8px;
  }

  .category-scroll-button:hover,
  .category-scroll-button:focus-visible {
    border-color: var(--accent);
    background: rgba(23, 107, 91, 0.08);
    color: var(--accent-strong);
    outline: 0;
  }

  .category-scroll-button:disabled {
    display: none;
  }

  .series-card {
    overflow: visible;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    transition:
      transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1),
      box-shadow 220ms cubic-bezier(0.2, 0.75, 0.25, 1),
      border-color 150ms ease;
  }

  .series-card .series-link {
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(24, 32, 27, 0.08);
    transition: box-shadow 180ms ease;
  }

  .series-card:hover .series-link,
  .series-card:focus-within .series-link {
    box-shadow: 0 9px 24px rgba(24, 32, 27, 0.14);
  }

  .series-card .series-link:focus-visible {
    outline: 3px solid rgba(23, 107, 91, 0.3);
    outline-offset: 3px;
  }

  .series-card .series-body {
    padding: 12px 4px 4px;
  }

  .series-card .series-topic {
    font-size: 0.7rem;
  }

  .series-card .series-title {
    display: -webkit-box;
    min-height: 2.55em;
    margin: 6px 0 7px;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .series-card .series-meta {
    gap: 7px;
    font-size: 0.84rem;
    font-weight: 600;
  }
}

@media (min-width: 1200px) {
  .home-page .category-button {
    min-height: 38px;
    border-radius: 10px;
    color: var(--ink);
    font-weight: 700;
    padding-inline: 15px;
  }

  .home-page .category-button.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
  }

  .home-page .series-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 42px;
  }

  .home-page .series-card .series-body {
    padding: 13px 4px 4px;
  }

  .home-page .series-card .series-topic {
    font-size: 0.72rem;
  }

  .home-page .series-card .series-title {
    margin-top: 7px;
    font-size: 1.02rem;
  }
}

@media (min-width: 2200px) {
  .home-page .series-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
  }
}

.series-link {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #e5ded0;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

/* Thumbnail placeholder shown before the image paints. The beige flashes
   bright on every card in dark mode, so use a dark neutral instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .series-link {
    background: #1d2a25;
  }
}

:root[data-theme="dark"] .series-link {
  background: #1d2a25;
}

.thumb-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.thumb-progress-track {
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.45);
}

.thumb-progress-fill {
  height: 100%;
  background: var(--accent);
}

.series-link img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 240ms ease, filter 240ms ease;
}

.series-card:hover .series-link img {
  transform: scale(1.042);
  filter: brightness(1.06);
}

.series-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px;
  position: relative;
}

.card-menu-trigger {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
  transition: background 150ms, color 150ms;
}

.card-menu-trigger::before {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: transparent;
  content: "";
  transition: background 150ms;
}

.card-menu-trigger svg {
  position: relative;
  z-index: 1;
}

.card-menu-trigger:hover,
.card-menu-trigger:focus-visible {
  background: transparent;
  color: var(--ink);
  outline: none;
}

.card-menu-trigger:hover::before,
.card-menu-trigger:focus-visible::before,
.card-menu-trigger[aria-expanded="true"]::before {
  background: rgba(23, 107, 91, 0.08);
}

.card-menu-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: 50%;
}

.card-menu {
  position: absolute;
  top: 44px;
  right: 8px;
  min-width: 172px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(24, 32, 27, 0.14);
  z-index: 50;
  overflow: hidden;
}

.card-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 150ms;
}

.card-menu-item:hover,
.card-menu-item:focus-visible {
  background: var(--bg);
  outline: none;
}

.card-menu-item svg {
  flex-shrink: 0;
  color: var(--muted);
}

.card-menu-item[aria-pressed="true"] svg {
  fill: var(--ink);
  stroke: var(--ink);
  color: var(--ink);
}

.card-menu .details-toggle {
  width: auto;
  height: auto;
  border: none;
  background: none;
  border-radius: 0;
  align-self: auto;
}

@media (max-width: 600px) {
  .card-menu {
    right: 0;
    min-width: unset;
    width: max-content;
  }

  .card-menu-item {
    min-height: 44px;
    padding: 9px 10px;
    font-size: 0.82rem;
    gap: 8px;
  }

  .card-menu-item svg {
    width: 13px;
    height: 13px;
  }
}

.series-topic {
  color: var(--rose);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.series-title {
  margin: 7px 0 10px;
  padding-right: 44px;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.35;
}

.series-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.series-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.series-meta span:not(:last-child)::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  content: "";
}

/* ─── Search-result label badge ──────────────────────────────────────────── */

.label-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.label-ai {
  background: rgba(56, 94, 150, 0.1);
  color: #385e96;
  border: 1px solid rgba(56, 94, 150, 0.22);
}

/* ─── Browse grid variant ────────────────────────────────────────────────── */

.series-browse-grid .series-body {
  gap: 0;
}

.series-browse-grid .series-body .primary-link {
  align-self: flex-start;
  margin-top: 14px;
  font-size: 0.88rem;
  padding: 10px 14px;
}

/* source: components.css */
/* ─── Card action controls ───────────────────────────────────────────────── */

.details-toggle {
  align-self: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbf8f0;
  color: var(--accent-strong);
  cursor: pointer;
  width: 26px;
  height: 26px;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* Near-white button with a light-teal chevron on it reads as ~1.5:1 in dark
   mode — the icon all but disappears. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .details-toggle {
    background: var(--surface);
  }
}

:root[data-theme="dark"] .details-toggle {
  background: var(--surface);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.mini-action,
.utility-button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--accent-strong);
  cursor: pointer;
  font-weight: 800;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  line-height: 0;
}

.icon-btn:not(.mini-action):not(.details-toggle) {
  min-width: 44px;
  min-height: 44px;
}

#save-episode-button[aria-pressed="true"] svg {
  fill: var(--ink);
  stroke: var(--ink);
}

.mini-action {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 0.78rem;
}

.mini-action::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mini-action svg {
  position: relative;
  z-index: 1;
}

.mini-action.labeled-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 74px;
  gap: 7px;
  padding: 0 12px;
}

.mini-action.labeled-action::before {
  inset: 6px 0;
}

.mini-action.labeled-action span {
  position: relative;
  z-index: 1;
  line-height: 1;
}

.mini-action[aria-pressed="true"],
.utility-button[aria-pressed="true"] {
  border-color: rgba(23, 107, 91, 0.35);
  background: rgba(23, 107, 91, 0.1);
  color: var(--accent);
}

.mini-action[aria-pressed="true"] {
  background: transparent;
}

.mini-action[aria-pressed="true"]::before {
  border-color: rgba(23, 107, 91, 0.35);
  background: rgba(23, 107, 91, 0.1);
}

#save-episode-button[aria-pressed="true"] svg,
.save-series-button[aria-pressed="true"] svg {
  fill: var(--ink);
  stroke: var(--ink);
}

.mini-action:hover,
.mini-action:focus-visible,
.details-toggle:hover,
.details-toggle:focus-visible,
.utility-button:hover,
.utility-button:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.mini-action:hover::before,
.mini-action:focus-visible::before {
  border-color: var(--accent);
}

.mini-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: 8px;
}

.details-toggle[aria-expanded="true"] {
  border-color: rgba(23, 107, 91, 0.35);
  background: rgba(23, 107, 91, 0.1);
  color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .details-toggle[aria-expanded="true"] {
    border-color: rgba(108, 196, 173, 0.38);
    background: rgba(108, 196, 173, 0.14);
  }
}

:root[data-theme="dark"] .details-toggle[aria-expanded="true"] {
  border-color: rgba(108, 196, 173, 0.38);
  background: rgba(108, 196, 173, 0.14);
}

.details-toggle svg {
  transition: transform 0.2s ease;
}

.details-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.action-status {
  flex-basis: 100%;
  margin: 0;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
  min-height: 0;
}

.series-description {
  display: none;
  margin: 12px 0 0;
  border-top: 1px solid var(--line);
  color: #47514b;
  font-size: 0.9rem;
  line-height: 1.55;
  padding-top: 12px;
}

.series-card.is-expanded .series-description {
  display: block;
}

/* ─── Series filter & sort controls ─────────────────────────────────────── */

.series-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.content-type-filter {
  display: none;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 3px;
}

.content-type-filter button {
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 6px 8px;
}

.content-type-filter button.is-active {
  background: var(--accent);
  color: var(--on-accent);
}

.content-type-filter button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sort-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.sort-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hide-watched-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 150ms, background 150ms, color 150ms;
}

.hide-watched-btn:hover,
.hide-watched-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.hide-watched-btn.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 150ms;
}

.sort-trigger:hover,
.sort-trigger:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.sort-trigger svg {
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.sort-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.sort-options {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(24, 32, 27, 0.14);
  z-index: 50;
  overflow: hidden;
}

.sort-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  border-radius: 5px;
  transition: background 150ms;
}

.sort-option:hover {
  background: var(--bg);
}

.sort-option.is-selected {
  color: var(--accent-strong);
  font-weight: 700;
}

/* ─── Site footer ────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  padding: 34px clamp(20px, 4vw, 56px) 30px;
}

.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(420px, 1.4fr);
  gap: 30px clamp(36px, 5vw, 72px);
  width: min(1120px, 100%);
  margin: 0 auto;
}

.site-footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.site-footer-brand img {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
}

.site-footer-brand strong {
  display: block;
  color: var(--ink);
  font-family: "Inria Serif", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.2;
}

.site-footer-brand p,
.site-footer-copyright {
  margin: 0;
}

.site-footer-brand p {
  margin-top: 4px;
  font-size: 0.76rem;
  line-height: 1.45;
}

.site-footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.site-footer-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.site-footer-group > strong {
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.site-footer a {
  min-height: 24px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.5;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--accent-strong);
  outline: 0;
}

.site-footer-copyright {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  font-size: 0.69rem;
  line-height: 1.4;
}

.site-footer--admin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  text-align: center;
}

.site-footer--admin a {
  color: var(--accent-strong);
  font-weight: 800;
}

/* ─── Recap panel ────────────────────────────────────────────────────────── */

.recap-badge {
  display: inline-block;
  margin-left: 7px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  text-transform: uppercase;
  vertical-align: middle;
}

.recap-panel {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  overflow: hidden;
}

.recap-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  color: var(--accent-strong);
  cursor: pointer;
  font-family: "Inria Serif", Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  list-style: none;
  user-select: none;
}

.recap-toggle::-webkit-details-marker {
  display: none;
}

.recap-toggle::after {
  content: "\25BE";
  flex-shrink: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  transition: transform 200ms ease;
}

details[open] .recap-toggle::after {
  transform: rotate(180deg);
}

.recap-body {
  border-top: 1px solid var(--line);
  padding: 6px 24px 28px;
  font-family: "Inria Serif", Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.85;
}

.recap-body p {
  margin: 1.35em 0 0;
  color: var(--ink);
}

.recap-body p:first-of-type {
  font-size: 1.12rem;
  color: var(--ink);
}

.recap-body strong {
  color: var(--accent-strong);
  font-weight: 700;
}

.recap-heading {
  margin: 24px 0 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--gold);
  font-family: "Inria Serif", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

/* ─── Grammar notes panel ────────────────────────────────────────────────── */

.grammar-notes-panel {
  margin-top: 22px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  overflow: hidden;
}

.grammar-notes-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  color: var(--accent-strong);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  list-style: none;
  user-select: none;
}

.grammar-notes-toggle::-webkit-details-marker {
  display: none;
}

.grammar-notes-toggle::before {
  content: "\25C6";
  color: var(--accent);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.grammar-notes-toggle::after {
  content: "\25BE";
  flex-shrink: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  transition: transform 200ms ease;
}

details[open] .grammar-notes-toggle::after {
  transform: rotate(180deg);
}

.grammar-notes-body {
  border-top: 1px solid var(--line);
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
}

.grammar-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0 20px;
  align-items: start;
  padding: 11px 14px;
  background: var(--surface-strong);
  border-radius: 6px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}

.grammar-card-term {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 4px;
}

.grammar-card-label {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--accent-strong);
  line-height: 1.3;
}

.grammar-card-arabic {
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.5;
}

.grammar-card-definition {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  padding-top: 1px;
}

@media (max-width: 540px) {
  .grammar-card {
    grid-template-columns: 1fr;
    gap: 4px 0;
    border-left: none;
    border-top: 3px solid var(--accent);
  }
}

/* ─── Takeaways panel ────────────────────────────────────────────────────── */

.takeaways-panel {
  margin-top: 22px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--surface-strong);
  overflow: hidden;
}

.takeaways-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  color: var(--accent-strong);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  list-style: none;
  user-select: none;
}

.takeaways-toggle::-webkit-details-marker {
  display: none;
}

.takeaways-toggle::before {
  content: "\2726";
  color: var(--gold);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.takeaways-toggle::after {
  content: "\25BE";
  flex-shrink: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  transition: transform 200ms ease;
}

details[open] .takeaways-toggle::after {
  transform: rotate(180deg);
}

.takeaways-body {
  border-top: 1px solid var(--gold);
  padding: 20px 24px 28px;
}

.takeaways-label {
  margin: 0 0 16px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.takeaway-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: takeaway;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.takeaway-list li {
  counter-increment: takeaway;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.97rem;
  line-height: 1.65;
  color: #252e28;
}

.takeaway-list li::before {
  content: counter(takeaway);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.takeaway-list strong {
  color: var(--accent-strong);
  font-weight: 700;
}

/* ─── Global error fallback ──────────────────────────────────────────────── */

.error-fallback {
  width: min(560px, calc(100% - 32px));
  margin: clamp(60px, 10vw, 120px) auto;
  text-align: center;
}

.error-fallback-icon {
  font-size: 2.5rem;
  margin: 0 0 16px;
  color: var(--gold);
}

.error-fallback-title {
  font-family: "Inria Serif", Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 700;
  margin: 0 0 14px;
  line-height: 1.15;
}

.error-fallback-body {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 28px;
}

.error-fallback-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* source: about.css */
.about-hero,
.about-section {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
}

.about-hero {
  padding: clamp(42px, 8vw, 92px) 0 34px;
}

.about-hero h1 {
  max-width: 880px;
  font-size: clamp(2.45rem, 6vw, 5.35rem);
}

.about-hero p,
.about-closing p {
  max-width: 760px;
  color: #3e4842;
  font-size: clamp(1rem, 2vw, 1.16rem);
  line-height: 1.7;
}

.about-section {
  padding: 26px 0;
}

.principle-list {
  display: grid;
  gap: 14px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.info-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  box-shadow: 0 10px 28px rgba(24, 32, 27, 0.07);
  padding: 22px;
}

.info-card h3 {
  margin: 0 0 9px;
  font-family: "Inria Serif", Georgia, serif;
  font-size: clamp(1.22rem, 2vw, 1.55rem);
}

.info-card p {
  margin: 0;
  color: #4a554f;
  line-height: 1.65;
}

.status-pill {
  display: inline-flex;
  margin-top: 16px;
  border: 1px solid rgba(200, 155, 60, 0.35);
  border-radius: 999px;
  background: rgba(200, 155, 60, 0.12);
  color: #755a1c;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 6px 10px;
}

.principle-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  border-top: 1px solid var(--line);
  padding: 22px 0;
}

.principle-item > span {
  color: var(--accent);
  font-family: "Inria Serif", Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
}

.principle-item h3 {
  margin: 0 0 9px;
  font-family: "Inria Serif", Georgia, serif;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.principle-item p {
  margin: 0;
  color: #4a554f;
  line-height: 1.7;
}

.about-closing {
  padding-bottom: 64px;
}

.about-closing .primary-link {
  margin-top: 8px;
}

/* source: settings.css */
.settings-hero,
.settings-section {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
}

.settings-hero {
  padding: clamp(42px, 8vw, 84px) 0 28px;
}

.settings-hero h1 {
  font-size: clamp(2.45rem, 6vw, 5rem);
}

.settings-hero p,
.settings-panel p,
.settings-note {
  color: #3e4842;
  line-height: 1.65;
}

.settings-section {
  padding: 16px 0;
}

.settings-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-top: 1px solid var(--line);
  padding: 24px 0;
}

.settings-panel h2 {
  margin-bottom: 10px;
}

.settings-panel p,
.settings-note {
  max-width: 680px;
  margin: 0;
}

.danger-button {
  flex-shrink: 0;
  border: 1px solid rgba(166, 72, 79, 0.35);
  border-radius: 6px;
  background: rgba(166, 72, 79, 0.09);
  color: var(--rose);
  font-weight: 800;
  padding: 12px 15px;
}

.danger-button:hover,
.danger-button:focus-visible {
  border-color: var(--rose);
  outline: none;
}

.danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.settings-field {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

.select-wrap {
  position: relative;
  display: inline-flex;
}

.select-wrap::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.themed-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  padding: 10px 36px 10px 14px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.themed-select:hover {
  border-color: var(--accent);
}

.themed-select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.1);
  outline: none;
}

.toggle-switch {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.toggle-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.toggle-track {
  display: block;
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 13px;
  background: var(--line);
  transition: background 0.2s ease;
}

.toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}

.toggle-switch input:checked + .toggle-track {
  background: var(--accent);
}

.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(22px);
}

.toggle-switch:focus-within .toggle-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.streak-settings-panel {
  align-items: flex-start;
}

/* ─── Saved items list (used in settings page) ───────────────────────────── */

.saved-items-list {
  display: grid;
  gap: 10px;
  padding-bottom: 14px;
}

/* source: feedback.css */
.feedback-hero,
.feedback-section {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
}

.feedback-hero {
  padding: clamp(42px, 8vw, 92px) 0 34px;
}

.feedback-hero h1 {
  font-size: clamp(2.45rem, 6vw, 5.35rem);
}

.feedback-hero > p:not(.eyebrow) {
  max-width: 720px;
  margin: 16px 0 0;
  color: #3e4842;
  font-size: clamp(1rem, 2vw, 1.16rem);
  line-height: 1.7;
}

/* Hardcoded dark grey — 1.91:1 against the dark page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .feedback-hero > p:not(.eyebrow) {
    color: var(--muted);
  }
}

:root[data-theme="dark"] .feedback-hero > p:not(.eyebrow) {
  color: var(--muted);
}

.feedback-section {
  padding: 0 0 72px;
}

.feedback-form {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
  padding: 32px 36px 36px;
}

.feedback-form-header {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.feedback-form-header .eyebrow {
  margin-bottom: 10px;
}

.feedback-form-header h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.form-field label {
  margin-bottom: 7px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.form-field label span {
  color: var(--muted);
  font-weight: 400;
}

.form-field input[type="email"],
.form-field textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #faf7f1;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
  padding: 11px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
  resize: vertical;
}

/* The hardcoded near-white field left dark-mode text (--ink is near-white too)
   at ~1.05:1 — typed input was effectively invisible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-field input[type="email"],
  :root:not([data-theme="light"]) .form-field textarea {
    background: var(--surface);
  }
}

:root[data-theme="dark"] .form-field input[type="email"],
:root[data-theme="dark"] .form-field textarea {
  background: var(--surface);
}

.form-field input[type="email"]:focus,
.form-field textarea:focus {
  border-color: var(--accent);
  background: var(--surface-strong);
  box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.1);
  outline: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-field input[type="email"]:focus,
  :root:not([data-theme="light"]) .form-field textarea:focus {
    box-shadow: 0 0 0 3px rgba(108, 196, 173, 0.28);
  }
}

:root[data-theme="dark"] .form-field input[type="email"]:focus,
:root[data-theme="dark"] .form-field textarea:focus {
  box-shadow: 0 0 0 3px rgba(108, 196, 173, 0.28);
}

.form-field input[type="email"]::placeholder,
.form-field textarea::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.feedback-form button.primary-link {
  margin-top: 8px;
  border: none;
  font-size: 1rem;
  padding: 14px 18px;
}

.feedback-form .settings-note {
  margin-top: 12px;
  color: var(--accent-strong);
  font-size: 0.88rem;
  font-weight: 600;
  min-height: 1.4em;
}

.feedback-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.feedback-fallback {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.feedback-fallback p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.feedback-fallback textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
  resize: vertical;
}

/* source: explore.css */
.explore-hero {
  max-width: 820px;
  padding-bottom: 24px;
}

.explore-section {
  padding-top: 12px;
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.explore-card {
  display: flex;
  min-height: 142px;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.explore-card:hover,
.explore-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(23, 107, 91, 0.35);
  box-shadow: 0 18px 34px rgba(33, 28, 22, 0.12);
  outline: none;
}

.explore-card-kicker {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.explore-card-title {
  color: var(--text);
  font-family: "Inria Serif", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
}

.explore-card-action {
  margin-top: auto;
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 800;
}

.explore-card.is-coming-soon {
  background: rgba(255, 255, 255, 0.42);
}

/* White at 42% composites to a pale slab on the dark page, dropping the card's
   kicker and action text to ~2.2:1. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .explore-card.is-coming-soon {
    background: rgba(23, 33, 29, 0.55);
  }
}

:root[data-theme="dark"] .explore-card.is-coming-soon {
  background: rgba(23, 33, 29, 0.55);
}

@media (max-width: 900px) {
  .explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .explore-section {
    padding-top: 18px;
  }

  .explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .explore-card {
    min-height: 126px;
    border-radius: 14px;
    padding: 14px;
  }

  .explore-card-title {
    font-size: 1.25rem;
  }
}

.category-hero {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) 0 20px;
}

.category-hero h1 {
  max-width: 820px;
  margin-top: 8px;
  font-size: clamp(2.7rem, 7vw, 5.6rem);
}

.category-back-link {
  display: inline-flex;
  margin-bottom: 30px;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 800;
}

.category-description {
  max-width: 680px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.6;
}

.category-summary {
  margin: 16px 0 0;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 800;
}

.category-status {
  width: min(1280px, calc(100% - 32px));
  margin: 20px auto;
}

.category-content-filter {
  display: inline-flex;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 4px max(16px, calc((100% - 1280px) / 2)) 8px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.category-content-filter[hidden] {
  display: none;
}

.category-filter-option {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  padding: 9px 14px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.category-filter-option:hover:not(:disabled) {
  color: var(--text);
}

.category-filter-option:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 1px;
}

.category-filter-option.is-active {
  background: var(--accent);
  color: var(--button-text, #fff);
}

.category-filter-option:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.category-filter-count {
  display: inline-grid;
  min-width: 22px;
  min-height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  padding: 0 6px;
  font-size: 0.72rem;
  line-height: 1;
}

.category-filter-option.is-active .category-filter-count {
  background: rgba(255, 255, 255, 0.2);
}

.category-content-section {
  padding-top: 28px;
}

.category-content-section[hidden] {
  display: none;
}

.category-content-card .series-body {
  min-height: 132px;
}

@media (max-width: 600px) {
  .category-hero {
    padding-top: 26px;
  }

  .category-back-link {
    margin-bottom: 22px;
  }

  .category-content-filter {
    display: grid;
    width: calc(100% - 32px);
    grid-template-columns: 0.72fr 0.9fr 1.55fr;
  }

  .category-content-filter[hidden] {
    display: none;
  }

  .category-filter-option {
    padding-inline: 8px;
    font-size: 0.78rem;
  }

  .category-content-section {
    padding-top: 18px;
  }
}

/* source: series-detail.css */
.series-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  gap: 34px;
  align-items: center;
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(34px, 7vw, 76px) 0 24px;
}

/* ─── Hero CTA, progress & availability note ─────────────────────────────── */

.series-cta-row {
  margin-top: 22px;
}

.series-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(23, 107, 91, 0.28);
}

.series-cta-btn:hover,
.series-cta-btn:focus-visible {
  background: #145f50;
  box-shadow: 0 6px 20px rgba(23, 107, 91, 0.38);
  outline: none;
}

.series-progress-summary {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.series-avail-note {
  margin-top: 8px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 0.85;
}

/* ─── Episode filter row ─────────────────────────────────────────────────── */

.ep-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .ep-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -16px;
    padding: 0 16px 4px 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black calc(100% - 36px), transparent 100%);
  }

  .ep-filter-row::-webkit-scrollbar {
    display: none;
  }

  .ep-filter-btn {
    flex: 0 0 auto;
  }
}

.ep-filter-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.ep-filter-btn:hover,
.ep-filter-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.ep-filter-btn.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.ep-empty-state {
  padding: 32px 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  grid-column: 1 / -1;
}

.speaker-hero {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(32px, 6vw, 68px) 0 22px;
}

.speaker-hero img {
  width: 180px;
  height: 180px;
  border: 1px solid var(--line);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.speaker-hero h1 {
  font-size: clamp(2.3rem, 5vw, 4.8rem);
}

.speaker-hero .hero-copy.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.bio-toggle {
  display: inline-block;
  margin: 2px 0 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.bio-toggle:hover,
.bio-toggle:focus-visible {
  text-decoration: underline;
}

.series-hero h1,
.watch-info h1 {
  font-size: clamp(2.45rem, 6vw, 5.2rem);
}

.series-hero img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

/* ─── Episode list & cards ───────────────────────────────────────────────── */

/* Column counts and gutters are deliberately identical to .series-grid so a
   series page reads with the same rhythm as the home feed */
.episode-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  column-gap: 18px;
  row-gap: 34px;
}

@media (min-width: 1200px) {
  .episode-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 42px;
  }
}

@media (min-width: 2200px) {
  .episode-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
  }
}

.episode-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  box-shadow: 0 10px 28px rgba(24, 32, 27, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.15s;
}

.episode-card-link {
  display: grid;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.episode-card:focus-within {
  border-color: var(--accent);
}

.episode-card-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  border-radius: 7px;
}

.episode-card.is-unavailable {
  opacity: 0.5;
  cursor: default;
}

.episode-card.is-unavailable img {
  filter: saturate(0.4) brightness(0.95);
}

.episode-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Thumbnail wrapper so the duration badge can overlay the image */
.ep-thumb {
  position: relative;
  min-width: 0;
}

.ep-thumb img {
  display: block;
}

/* Neutralize the card's generic span margins so the badge pins to the
   corner, matching the home-feed duration chips */
.episode-card .thumb-duration {
  margin: 0;
}

/* The series description Show more toggle only exists on mobile,
   where the copy is clamped to two lines */
#series-desc-toggle {
  display: none;
}

.episode-info {
  display: contents;
}

.episode-card span,
.episode-card strong {
  margin-inline: 14px;
}

.episode-number {
  margin-top: 13px;
  color: var(--rose);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.episode-card strong {
  margin-top: 6px;
  font-size: 1rem;
  line-height: 1.35;
}

.episode-date {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.episode-views {
  margin-top: 4px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.episode-status {
  margin-top: 8px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.muted-badge {
  background: rgba(98, 105, 99, 0.12);
  color: var(--muted);
}

.watched-badge {
  border-color: var(--accent);
  background: rgba(23, 107, 91, 0.1);
  color: var(--accent);
}

.episode-card.is-watched img,
.compact-episode.is-watched img {
  filter: saturate(0.85);
}

.episode-card.is-watched strong,
.compact-episode.is-watched strong {
  color: #3f4a44;
}

/* ─── Desktop: borderless cards, matching the home feed ──────────────────── */

/* From 901px up the home grid drops its card chrome and lets the rounded
   thumbnail carry the shadow. Episode cards take the same treatment, with the
   same type scale, so the two grids read as one system. */
@media (min-width: 901px) {
  .episode-card {
    overflow: visible;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    transition:
      transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1),
      box-shadow 220ms cubic-bezier(0.2, 0.75, 0.25, 1),
      border-color 150ms ease;
  }

  .episode-card .ep-thumb {
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(24, 32, 27, 0.08);
    transition: box-shadow 180ms ease;
  }

  .episode-list .episode-card:hover .ep-thumb,
  .episode-list .episode-card:focus-within .ep-thumb {
    box-shadow: 0 9px 24px rgba(24, 32, 27, 0.14);
  }

  .episode-card .ep-thumb img {
    transition: transform 240ms ease, filter 240ms ease;
  }

  .episode-list .episode-card:not(.is-unavailable):hover .ep-thumb img {
    transform: scale(1.042);
    filter: brightness(1.06);
  }

  .episode-card-link:focus-visible {
    border-radius: 14px;
    outline: 3px solid rgba(23, 107, 91, 0.3);
    outline-offset: 3px;
  }

  /* No card chrome to sit inside, so the text block only needs the optical
     inset the home cards use rather than a full 14px gutter */
  .episode-card span,
  .episode-card strong {
    margin-inline: 4px;
  }

  .episode-number {
    margin-top: 12px;
    font-size: 0.7rem;
  }

  .episode-card strong {
    display: -webkit-box;
    min-height: 2.55em;
    margin-top: 6px;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .episode-date {
    margin-top: 7px;
    font-size: 0.84rem;
    font-weight: 600;
  }

  .episode-views,
  .episode-status {
    margin-top: 3px;
    margin-bottom: 4px;
    font-size: 0.84rem;
    font-weight: 600;
  }
}

@media (min-width: 1200px) {
  .episode-number {
    margin-top: 13px;
    font-size: 0.72rem;
  }

  .episode-card strong {
    margin-top: 7px;
    font-size: 1.02rem;
  }
}

/* ── Three-dot episode menu ─────────────────────────────────────────────── */

/* position:relative lets us absolutely-place the dots button */
.episode-card {
  position: relative;
}

.ep-menu-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 2;
  padding: 0;
  flex-shrink: 0;
}

.ep-menu-btn::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  transition: background 0.15s;
}

.ep-menu-btn svg {
  position: relative;
  z-index: 1;
}

.ep-menu-btn:hover::before,
.ep-menu-btn[aria-expanded="true"]::before {
  background: rgba(0, 0, 0, 0.65);
}

.ep-menu-btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

/* Popover (appended to body — position:fixed avoids overflow:hidden clipping) */
.ep-menu-popover {
  position: fixed;
  background: var(--surface-strong, #fff);
  border: 1px solid var(--line, #d8d0c2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  min-width: 172px;
  z-index: 9999;
  padding: 4px 0;
  overflow: hidden;
}

.ep-menu-action {
  display: block;
  width: 100%;
  min-height: 40px;
  text-align: left;
  padding: 9px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text-primary, #1a202c);
  transition: background 0.12s;
}

.ep-menu-action:hover,
.ep-menu-action:focus-visible {
  background: var(--surface-hover, #f0ebe0);
  outline: none;
}

/* Dark mode */
[data-theme="dark"] .ep-menu-popover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .ep-menu-action {
  color: var(--text-primary-dark, #e2e8f0);
}

[data-theme="dark"] .ep-menu-action:hover,
[data-theme="dark"] .ep-menu-action:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}

/* source: watch.css */
.watch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 54px;
}

.watch-main,
.episode-sidebar {
  min-width: 0;
}

@media (min-width: 1200px) {
  .desktop-sidebar + main.watch-layout {
    grid-template-columns: minmax(0, 1fr) clamp(340px, 22vw, 420px);
    width: calc(100% - var(--desktop-sidebar-width) - 32px);
    margin-left: calc(var(--desktop-sidebar-width) + 16px);
    margin-right: 16px;
  }
}

.video-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d0f0e;
  box-shadow: var(--shadow);
}

.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #0d0f0e;
  object-fit: cover;
}

/* Native cues only render on the no-JS fallback, where the custom player never
   initializes and the browser keeps track mode "showing". Once the custom
   player loads it takes the mode to "hidden" and draws .player-captions below,
   which can be positioned clear of the control bar and sized against the
   player instead of the viewport. */
.video-frame video::cue {
  background: rgba(10, 14, 12, 0.74);
  color: #fffdf8;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: clamp(0.88rem, 2vw, 1.08rem);
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.video-frame video::cue(b) {
  color: #fff4cf;
  font-weight: 800;
}

/* ─── Captions ──────────────────────────────────────────────────────────── */

/* Caption size must track the player, not the window: the player is capped on
   wide screens and shrinks beside the sidebar, so viewport units made captions
   3.75% of the player's width on a phone and 1.39% on a desktop. Container
   query units read the frame's own width, holding them near 3% everywhere. */
.video-frame {
  container-type: inline-size;
}

.player-captions {
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28em;
  /* Long lines are hard to read; cap the measure as well as the width */
  width: min(94%, 34em);
  transform: translateX(-50%);
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 3.1cqw, 1.75rem);
  line-height: 1.38;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  transition: bottom 0.2s ease;
  /* Some auto-generated VTTs carry runaway cues (one runs to 1074 characters),
     which would otherwise bury the video under a wall of text. Three lines is
     the usual captioning maximum; the tail is clipped rather than shown. */
  max-height: 4.2em;
  overflow: hidden;
}

/* Lift clear of the control bar while it is on screen. The height comes from
   a ResizeObserver in custom-video-player.js; the percentage is only a
   fallback for the brief moment before it is first measured. */
.video-frame.controls-visible .player-captions {
  bottom: calc(var(--player-controls-h, 20%) + 0.7em);
}

.player-caption-line {
  padding: 0.14em 0.46em;
  border-radius: 6px;
  background: rgba(10, 14, 12, 0.78);
  color: #fffdf8;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  /* Keeps the background box intact across wrapped lines */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.player-caption-line b {
  color: #fff4cf;
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .player-captions {
    transition: none;
  }
}

/* ─── Premium custom video controls ─────────────────────────────────────── */

.player-ui {
  display: none;
}

.video-frame.has-custom-controls {
  --player-played: 0%;
  --player-buffered: 0%;
  color: #fffdf8;
  border: 0;
  border-radius: 14px;
  background: #050806;
  box-shadow: none;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.video-frame.has-custom-controls video {
  object-fit: contain;
  cursor: default;
}

.video-frame.has-custom-controls:not(.has-started) video {
  object-fit: cover;
}

.video-frame.has-custom-controls .player-ui {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  font-family: Inter, Arial, Helvetica, sans-serif;
  pointer-events: none;
}

.player-surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.player-surface:focus-visible {
  outline: 3px solid rgba(112, 224, 192, 0.9);
  outline-offset: -5px;
}

.player-control-gradient {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 92px;
  background: transparent;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.player-center-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(60px, 8vw, 76px);
  height: clamp(60px, 8vw, 76px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(36, 135, 111, 0.96), rgba(18, 92, 76, 0.96));
  color: #fff;
  box-shadow:
    0 15px 42px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: opacity 150ms ease, transform 150ms ease, background 150ms ease;
}

.player-center-toggle:hover {
  background:
    linear-gradient(145deg, rgba(42, 157, 128, 0.98), rgba(20, 105, 86, 0.98));
  transform: translate(-50%, -50%) scale(1.055);
}

.player-center-toggle:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.player-center-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.player-center-toggle .player-icon {
  width: 32px;
  height: 32px;
}

.player-center-toggle .player-icon-play {
  transform: translateX(2px);
}

.player-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  padding: 0 14px 10px;
  pointer-events: auto;
  transition: opacity 180ms ease, transform 180ms ease;
}

.player-timeline-wrap {
  --player-preview: 0%;
  position: relative;
  height: 24px;
  margin: 0 3px 1px;
}

.player-timeline-track {
  position: absolute;
  top: 10px;
  right: 0;
  left: 0;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
  transition: height 120ms ease, top 120ms ease;
}

.player-timeline-track span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
}

.player-buffered {
  width: var(--player-buffered);
  background: rgba(255, 255, 255, 0.5);
}

.player-played {
  width: var(--player-played);
  background: linear-gradient(90deg, #58c8a8, #85e7c7);
  box-shadow: 0 0 9px rgba(105, 222, 188, 0.45);
}

.player-timeline {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}

.player-timeline::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

.player-timeline::-moz-range-track {
  height: 4px;
  background: transparent;
}

.player-timeline::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  appearance: none;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #66d3b2;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 120ms ease, transform 120ms ease;
}

.player-timeline::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #66d3b2;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.player-timeline-wrap:hover .player-timeline-track,
.player-timeline-wrap.is-focused .player-timeline-track,
.player-timeline-wrap.is-scrubbing .player-timeline-track {
  top: 9px;
  height: 6px;
}

.player-timeline-wrap:hover .player-timeline::-webkit-slider-thumb,
.player-timeline:focus-visible::-webkit-slider-thumb,
.player-timeline-wrap.is-scrubbing .player-timeline::-webkit-slider-thumb {
  opacity: 1;
  transform: scale(1);
}

.player-timeline-wrap:hover .player-timeline::-moz-range-thumb,
.player-timeline:focus-visible::-moz-range-thumb,
.player-timeline-wrap.is-scrubbing .player-timeline::-moz-range-thumb {
  opacity: 1;
}

.player-timeline:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  border-radius: 999px;
}

.player-timeline:disabled {
  cursor: default;
}

.player-time-preview {
  position: absolute;
  bottom: 26px;
  left: clamp(28px, var(--player-preview), calc(100% - 28px));
  z-index: 3;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(4, 10, 8, 0.94);
  color: #fff;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(3px);
  transition: opacity 100ms ease, transform 100ms ease;
}

.player-timeline-wrap.is-previewing .player-time-preview {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.player-control-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.player-control-cluster {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 44px;
  padding: 1px 4px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
}

.player-control-cluster-left {
  flex: 0 1 auto;
}

.player-control-cluster-right {
  flex: 0 0 auto;
}

.player-button {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.94);
  cursor: pointer;
  pointer-events: auto;
  transition: color 130ms ease, background 130ms ease, transform 130ms ease;
}

.player-button:hover,
.player-button:focus-visible,
.player-button.is-active {
  background: rgba(255, 255, 255, 0.13);
  color: #8ce6c9;
}

.player-button:active {
  transform: scale(0.9);
}

.player-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.player-button[hidden] {
  display: none;
}

.player-button::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  width: max-content;
  max-width: 160px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(3, 9, 7, 0.94);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(3px);
  transition: opacity 100ms ease, transform 100ms ease;
}

.player-button:hover::after,
.player-button:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.player-icon {
  width: 23px;
  height: 23px;
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.player-icon-expand,
.player-icon-compress {
  fill: none;
}

.player-button .player-icon,
.player-time,
.player-cc-button span,
.player-text-button span {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}

.player-icon-pause,
.player-icon-replay,
.player-icon-muted,
.player-icon-compress {
  display: none;
}

.video-frame.is-playing .player-icon-play,
.video-frame.is-ended .player-icon-play {
  display: none;
}

.video-frame.is-playing .player-icon-pause,
.video-frame.is-ended .player-icon-replay,
.video-frame.is-muted .player-icon-muted,
.video-frame.is-fullscreen .player-icon-compress {
  display: block;
}

.video-frame.is-muted .player-icon-volume,
.video-frame.is-fullscreen .player-icon-expand {
  display: none;
}

.video-frame.is-playing .player-center-toggle {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.84);
}

.player-volume-group {
  display: flex;
  align-items: center;
}

.player-volume {
  --player-volume: 100%;
  width: 0;
  height: 4px;
  margin: 0;
  appearance: none;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #72daba var(--player-volume), rgba(255, 255, 255, 0.3) var(--player-volume));
  cursor: pointer;
  opacity: 0;
  transition: width 160ms ease, opacity 140ms ease, margin 160ms ease;
}

.player-volume-group:hover .player-volume,
.player-volume:focus-visible {
  width: 76px;
  margin-right: 8px;
  opacity: 1;
}

.player-volume::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  appearance: none;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

.player-volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

.player-volume:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}

.player-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 94px;
  padding-left: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.73rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.player-control-spacer {
  flex: 1 1 auto;
}

.player-text-button {
  width: auto;
  min-width: 42px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.player-cc-button span {
  padding: 1px 3px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.player-menu {
  position: absolute;
  right: 58px;
  bottom: 62px;
  z-index: 7;
  width: min(180px, calc(100% - 24px));
  overflow: hidden;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(8, 17, 14, 0.96);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42);
  color: #fff;
  pointer-events: auto;
  backdrop-filter: blur(16px);
}

.player-menu[hidden] {
  display: none;
}

.player-menu p {
  margin: 0;
  padding: 8px 10px 7px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.player-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.player-menu button[aria-checked="true"] {
  background: rgba(103, 216, 181, 0.15);
  color: #8ce6c9;
}

.player-menu button[aria-checked="true"]::after {
  content: "✓";
}

.player-menu button:hover,
.player-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  outline: none;
}

.player-seek-feedback {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(5, 13, 10, 0.82);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.88);
}

.player-seek-feedback svg {
  width: 18px;
  height: 18px;
  fill: #80dfc0;
}

.player-seek-back {
  left: 13%;
}

.player-seek-forward {
  right: 13%;
}

.player-seek-feedback.is-showing {
  animation: player-seek-pop 620ms ease both;
}

@keyframes player-seek-pop {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }
  22%,
  72% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(0.92);
  }
}

.video-frame.controls-hidden.is-playing {
  cursor: none;
}

.video-frame.controls-hidden.is-playing .player-surface {
  cursor: none;
}

.video-frame.controls-hidden .player-controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.video-frame.controls-hidden .player-control-gradient {
  opacity: 0;
}

.video-frame.is-buffering .player-center-toggle {
  border-color: transparent;
  background: rgba(9, 23, 18, 0.84);
  opacity: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.video-frame.is-buffering .player-center-toggle::after {
  content: "";
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.26);
  border-top-color: #7de0c1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.video-frame.is-buffering .player-center-toggle .player-icon {
  display: none;
}

/* Desktop players have considerably more viewing area than phones and tablets,
   so the earlier 28px ceiling could cover faces and slide text. Keep the
   established mobile/tablet treatment while using a calmer desktop scale. */
@media (min-width: 901px) {
  .player-captions {
    width: min(90%, 42em);
    font-size: clamp(16px, 1.8cqw, 20px);
    line-height: 1.34;
  }

  .player-caption-line {
    background: rgba(10, 14, 12, 0.72);
  }
}

.video-frame.is-buffering.is-paused .player-center-toggle {
  cursor: pointer;
  pointer-events: auto;
}

.video-frame.is-buffering.is-paused .player-center-toggle .player-icon-play {
  position: absolute;
  display: block;
  width: 14px;
  height: 14px;
}

.video-frame.is-fullscreen,
.video-frame:fullscreen {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #000;
}

.video-frame.is-fullscreen video,
.video-frame:fullscreen video {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  aspect-ratio: auto;
}

.video-frame.is-fullscreen .player-controls,
.video-frame:fullscreen .player-controls {
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: max(20px, env(safe-area-inset-left));
}

.video-frame.has-custom-controls .video-loading {
  z-index: 8;
}

.video-frame.has-custom-controls .video-unavailable {
  z-index: 9;
}

@media (max-width: 600px) {
  .video-frame.has-custom-controls {
    border-radius: 10px;
  }

  .player-center-toggle {
    width: 58px;
    height: 58px;
  }

  .player-center-toggle .player-icon {
    width: 27px;
    height: 27px;
  }

  /* A deliberate surface tap can clear the controls, but buffering remains
     visible so a slow seek never looks like an unresponsive blank player. */
  .video-frame.controls-hidden:not(.is-buffering) .player-center-toggle {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.84);
  }

  /* Mobile captions stay anchored when controls appear or disappear, matching
     the steady reading position used by m.youtube.com. Desktop still lifts
     captions above its larger control bar. */
  .video-frame.controls-visible .player-captions {
    bottom: 8%;
  }

  /* Phone layout follows m.youtube.com rather than the desktop bar: captions
     and speed become small buttons in the top-right, leaving only the elapsed
     time and fullscreen above a thin timeline. Desktop keeps its own layout.
     Shrinking the bar is also what gives captions room to clear it. */
  .player-controls {
    top: 0; /* span the frame so the top-right cluster can anchor to it */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 6px 4px;
    /* The bar now covers the frame, so let taps through to the play surface */
    pointer-events: none;
  }

  .player-timeline-wrap,
  .player-control-row {
    pointer-events: auto;
  }

  /* Time and fullscreen sit above the timeline, as on YouTube mobile */
  .player-control-row {
    order: 1;
    gap: 0;
  }

  .player-timeline-wrap {
    order: 2;
  }

  .player-button {
    width: 44px;
    height: 44px;
  }

  .player-button::after {
    display: none;
  }

  #player-play-toggle,
  .player-volume-group,
  #player-pip-toggle {
    display: none;
  }

  .player-time {
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.2);
    font-size: 0.7rem;
    backdrop-filter: blur(6px) saturate(1.05);
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
  }

  /* While playing, the centre button comes back with the controls so there is
     something to pause with — the bottom-bar play button is hidden at this
     width, so without this a playing video has no visible pause control. */
  .video-frame.is-playing.controls-visible .player-center-toggle {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }

  /* The pill's backdrop-filter would trap the absolutely-positioned buttons
     below (a filter establishes a containing block). YouTube mobile uses
     standalone buttons rather than a grouped pill, so dropping the box here
     matches the reference and frees the positioning at the same time. */
  .player-control-cluster {
    display: contents;
  }

  .player-time {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  }

  #player-captions-toggle,
  #player-speed-toggle {
    position: absolute;
    top: 8px;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: auto;
  }

  #player-speed-toggle {
    right: 8px;
  }

  #player-captions-toggle {
    right: 60px;
  }

  #player-fullscreen-toggle {
    width: 44px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px) saturate(1.05);
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
  }

  #player-fullscreen-toggle .player-icon {
    width: 21px;
    height: 21px;
    stroke-width: 2;
  }

  /* Speed menu drops from the button's new home instead of rising from the bar.
     A phone player is only ~210px tall, so the menu is compacted and allowed to
     scroll rather than running off the bottom edge. */
  .player-menu {
    right: 8px;
    top: 56px;
    bottom: auto;
    width: min(150px, calc(100% - 20px));
    max-height: calc(100% - 68px);
    overflow-y: auto;
    padding: 5px;
  }

  .player-menu p {
    margin-bottom: 2px;
    font-size: 0.6rem;
  }

  .player-menu button {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 0.78rem;
  }

  .player-seek-back {
    left: 8%;
  }

  .player-seek-forward {
    right: 8%;
  }
}

@media (max-width: 430px) {
  .player-time {
    min-width: 42px;
  }

  /* The elapsed/total pair stays on narrow phones now that the bottom bar
     holds only the time and fullscreen — captions and speed moved to the
     top-right, freeing the room this rule used to hide it for. */

  .player-text-button {
    min-width: 38px;
    padding: 0 6px;
  }
}

@media (max-width: 350px) {
  #player-captions-toggle {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player-controls,
  .player-control-gradient,
  .player-center-toggle,
  .player-button,
  .player-time-preview {
    transition: none;
  }

  .player-seek-feedback.is-showing {
    animation-duration: 1ms;
  }
}

.video-loading {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(13, 15, 14, 0.88);
  color: white;
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  z-index: 2;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.34);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.video-unavailable {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: rgba(13, 15, 14, 0.84);
  color: white;
  padding: 24px;
  text-align: center;
}

.video-unavailable strong {
  font-size: 1.1rem;
}

/* Second-line explanation added once we know whether our video server answered
   the retry probe; hidden until that comes back. */
.video-unavailable .video-error-detail {
  max-width: 46ch;
  font-size: 0.85rem;
  opacity: 0.82;
}

.video-unavailable [hidden] {
  display: none;
}

.video-retry-btn {
  margin-top: 10px;
  padding: 10px 26px;
  border: 0;
  border-radius: 10px;
  background: #176b5b;
  color: #fffdf8;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.video-retry-btn:hover {
  background: #1e8770;
}

.watch-info {
  padding: 22px 0 36px;
}

.watch-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.watch-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.watch-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.watch-breadcrumb a {
  color: var(--accent);
}

.watch-breadcrumb a:hover,
.watch-breadcrumb a:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
  outline: none;
}

.watch-breadcrumb span[aria-hidden] {
  font-size: 0.72rem;
}

.watch-info h1 {
  font-size: clamp(1.9rem, 1.2vw + 1.45rem, 2.6rem);
}

.watch-info p:not(.eyebrow) {
  color: var(--muted);
  font-weight: 700;
}

#watch-meta a {
  color: var(--accent-strong);
}

#watch-meta a:hover,
#watch-meta a:focus-visible {
  text-decoration: underline;
  outline: none;
}

.watch-note {
  max-width: 620px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.watch-help-tips {
  display: grid;
  gap: 8px;
  max-width: 680px;
  margin-top: 14px;
}

.background-play-tip {
  max-width: 680px;
  color: var(--muted);
}

.background-play-tip summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.background-play-tip summary::-webkit-details-marker {
  display: none;
}

.background-play-tip summary:hover,
.background-play-tip summary:focus-visible {
  color: var(--accent);
  outline: none;
}

.info-dot {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
}

.background-play-tip-body {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.background-play-tip-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.55;
}

.background-play-tip-body p + p {
  margin-top: 8px;
}

.episode-sidebar {
  position: sticky;
  top: 92px;
  align-self: start;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  border: 1px solid rgba(222, 214, 200, 0.7);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.68);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: 16px;
}

/* The light panel is a translucent near-white. Left unchanged in dark mode it
   composites to a flat grey slab that fights the rest of the page, so flip it
   to the dark surface tint at the same opacity. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .episode-sidebar {
    border-color: rgba(51, 67, 60, 0.7);
    background: rgba(23, 33, 29, 0.68);
  }
}

:root[data-theme="dark"] .episode-sidebar {
  border-color: rgba(51, 67, 60, 0.7);
  background: rgba(23, 33, 29, 0.68);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.autoplay-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(24, 32, 27, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  animation: toast-in 0.22s ease both;
}

.autoplay-toast.is-hidden {
  display: none !important;
}

.autoplay-toast-next {
  padding: 6px 12px;
  border-radius: 5px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.85rem;
  font-weight: 700;
}

.autoplay-toast-next:hover,
.autoplay-toast-next:focus-visible {
  background: var(--accent-strong);
  outline: none;
}

.autoplay-toast-cancel {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  cursor: pointer;
}

.autoplay-toast-cancel:hover,
.autoplay-toast-cancel:focus-visible {
  border-color: white;
  color: white;
  outline: none;
}

/* ─── Up next card (sidebar) ────────────────────────────────────────────── */

.up-next-card {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--surface-strong);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(24, 32, 27, 0.08);
  transition: transform 0.18s ease, border-color 0.15s, box-shadow 0.18s ease;
}

/* Keep "Up next" visible while the episode list scrolls beneath it.
   Negative top offsets the sidebar's 16px padding so the card sits flush. */
@media (min-width: 901px) {
  .up-next-card {
    position: sticky;
    top: -16px;
    z-index: 2;
  }
}

.up-next-card:hover,
.up-next-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  outline: none;
}

.up-next-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
}

.up-next-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.up-next-body small {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.up-next-body strong {
  font-size: 0.92rem;
  line-height: 1.3;
}

.up-next-body em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
}

.up-next-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  transition: background 0.15s;
}

.up-next-card:hover .up-next-play {
  background: var(--accent-strong);
}

/* ─── Compact episode list (sidebar) ────────────────────────────────────── */

.compact-episode-list {
  display: grid;
  gap: 10px;
}

.compact-episode {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px;
  /* Clear the sticky up-next card when auto-scrolled into view */
  scroll-margin-top: 116px;
}

.compact-episode:hover,
.compact-episode:focus-visible,
.compact-episode.is-current {
  border-color: var(--accent);
  background: rgba(23, 107, 91, 0.08);
  outline: none;
}

/* Dark accent tint — the light-mode green is near-invisible on a dark panel,
   which loses the "you are here" cue on the current episode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .compact-episode:hover,
  :root:not([data-theme="light"]) .compact-episode:focus-visible,
  :root:not([data-theme="light"]) .compact-episode.is-current {
    background: rgba(108, 196, 173, 0.13);
  }
}

:root[data-theme="dark"] .compact-episode:hover,
:root[data-theme="dark"] .compact-episode:focus-visible,
:root[data-theme="dark"] .compact-episode.is-current {
  background: rgba(108, 196, 173, 0.13);
}

.compact-episode.is-unavailable {
  opacity: 0.68;
}

.compact-episode.is-unavailable:hover {
  border-color: transparent;
  background: transparent;
}

.compact-episode img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
}

.compact-episode span {
  min-width: 0;
}

.compact-episode small {
  display: block;
  color: var(--rose);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.compact-episode strong {
  display: block;
  margin-top: 4px;
  font-size: 0.88rem;
  line-height: 1.3;
}

.compact-episode em {
  display: block;
  margin-top: 5px;
  color: var(--accent);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
}

.episode-list-toggle {
  display: none;
}

.now-playing-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgba(23, 107, 91, 0.1);
  border: 1px solid rgba(23, 107, 91, 0.25);
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .now-playing-chip {
    background: rgba(108, 196, 173, 0.13);
    border-color: rgba(108, 196, 173, 0.28);
  }
}

:root[data-theme="dark"] .now-playing-chip {
  background: rgba(108, 196, 173, 0.13);
  border-color: rgba(108, 196, 173, 0.28);
}

/* ─── My Notes panel ─────────────────────────────────────────────────────── */

.notes-panel {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  padding: 18px 20px 20px;
  box-shadow: 0 12px 32px rgba(37, 33, 24, 0.055);
}

.notes-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.notes-panel-head h2 {
  margin: 0;
  font-family: "Inria Serif", Georgia, serif;
  font-size: 1.22rem;
  color: var(--ink);
}

.notes-panel-title {
  min-width: 0;
}

.notes-panel-summary,
.notes-panel-toggle {
  display: none;
}

.notes-tabs {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 4px;
}

.notes-tabs button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 6px 14px;
}

.notes-tabs button.is-active {
  background: var(--accent);
  color: var(--on-accent);
}

.notes-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 8px;
}

.notes-toolbar-label {
  margin: 0 2px 0 3px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.notes-format-btn,
.notes-timestamp-btn,
.notes-help-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 6px 10px;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s, transform 0.15s;
}

.notes-format-btn {
  position: relative;
  min-width: 44px;
}

.notes-format-btn[data-note-format^="h"] {
  --heading-rule-width: 18px;
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  padding: 5px 8px 8px;
  font-family: "Inria Serif", Georgia, serif;
  line-height: 1;
}

.notes-format-btn[data-note-format^="h"]::after {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: var(--heading-rule-width);
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform: translateX(-50%);
}

.notes-format-btn[data-note-format="h1"] {
  color: var(--ink);
  font-size: 1rem;
}

.notes-format-btn[data-note-format="h2"] {
  --heading-rule-width: 13px;
  color: var(--ink);
  font-size: 0.86rem;
}

.notes-format-btn[data-note-format="h3"] {
  --heading-rule-width: 9px;
  color: var(--accent-strong);
  font-size: 0.72rem;
  letter-spacing: 0.025em;
}

.notes-format-btn:hover,
.notes-format-btn:focus-visible,
.notes-timestamp-btn:hover,
.notes-timestamp-btn:focus-visible,
.notes-help-button:hover,
.notes-help-button:focus-visible,
.notes-format-help.is-open .notes-help-button {
  border-color: var(--accent);
  background: var(--surface-strong);
  color: var(--accent-strong);
  outline: none;
  transform: translateY(-1px);
}

.notes-timestamp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--accent-strong);
}

.notes-format-help {
  position: relative;
  flex: 0 0 auto;
}

.notes-help-button {
  display: inline-grid;
  width: 44px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-strong);
  font-family: Georgia, serif;
  font-size: 0.88rem;
  font-style: italic;
}

.notes-help-card {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 10;
  width: min(310px, calc(100vw - 48px));
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  box-shadow: 0 16px 42px rgba(24, 31, 27, 0.18);
  color: var(--ink);
  opacity: 0;
  padding: 14px;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
  visibility: hidden;
}

.notes-help-card::before {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--surface-strong);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.notes-format-help:not(.is-hover-suppressed):hover .notes-help-card,
.notes-format-help.is-open .notes-help-card {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  visibility: visible;
}

.notes-help-card > strong {
  display: block;
  margin-bottom: 10px;
  font-family: "Inria Serif", Georgia, serif;
  font-size: 1rem;
}

.notes-help-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notes-help-card li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.notes-help-card li b {
  color: var(--ink);
}

.notes-help-token {
  display: inline-grid;
  width: 34px;
  height: 28px;
  place-items: center;
  border-radius: 6px;
  background: rgba(23, 107, 91, 0.09);
  color: var(--accent-strong);
  font-family: "Inria Serif", Georgia, serif;
  font-weight: 700;
}

.notes-help-h1 {
  font-size: 0.94rem;
}

.notes-help-h2 {
  font-size: 0.82rem;
}

.notes-help-h3 {
  font-size: 0.7rem;
}

.notes-help-card p {
  margin: 11px 0 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
  padding-top: 10px;
}

.notes-toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 2px;
}

.notes-textarea {
  display: block;
  width: 100%;
  min-height: 160px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 12px 14px;
}

.notes-textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(23, 107, 91, 0.1);
}

/* Focus ring needs more weight on a dark field to stay visible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .notes-textarea:focus-visible {
    box-shadow: 0 0 0 3px rgba(108, 196, 173, 0.28);
  }
}

:root[data-theme="dark"] .notes-textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(108, 196, 173, 0.28);
}

.notes-textarea::placeholder {
  color: var(--muted);
}

.notes-preview-body {
  min-height: 160px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 14px 16px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink);
}

.notes-preview-body .notes-empty {
  margin: 0;
  color: var(--muted);
}

.notes-preview-body .note-line {
  margin: 0 0 0.9em;
}

.notes-preview-body .note-line:last-child {
  margin-bottom: 0;
}

.notes-preview-body .note-heading {
  margin: 0.7em 0 0.5em;
  font-family: "Inria Serif", Georgia, serif;
  font-weight: 700;
  color: var(--ink);
}

.notes-preview-body .note-h1 {
  margin-top: 0.25em;
  border-bottom: 1px solid var(--line);
  font-size: 1.65rem;
  letter-spacing: -0.025em;
  line-height: 1.16;
  padding-bottom: 0.28em;
}

.notes-preview-body .note-h2 {
  font-size: 1.3rem;
  line-height: 1.24;
}

.notes-preview-body .note-h3 {
  font-family: Inter, Arial, sans-serif;
  font-size: 0.98rem;
  letter-spacing: 0.045em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.notes-preview-body strong {
  color: var(--accent-strong);
  font-weight: 700;
}

.note-timestamp {
  display: inline;
  border: 0;
  border-radius: 4px;
  background: rgba(23, 107, 91, 0.12);
  color: var(--accent-strong);
  font: inherit;
  font-weight: 800;
  padding: 1px 6px;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .note-timestamp {
    background: rgba(108, 196, 173, 0.16);
  }
}

:root[data-theme="dark"] .note-timestamp {
  background: rgba(108, 196, 173, 0.16);
}

.note-timestamp:hover,
.note-timestamp:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
  outline: none;
}

.notes-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.notes-status {
  margin: 0;
  min-height: 1.2em;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.notes-clear-btn {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  padding: 4px 0;
}

.notes-clear-btn:hover,
.notes-clear-btn:focus-visible {
  color: var(--rose);
  outline: none;
}

@media (max-width: 600px) {
  .notes-panel {
    border-radius: 12px;
    padding: 15px 16px 17px;
  }

  .notes-panel-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .notes-panel-title {
    flex: 1 1 auto;
  }

  .notes-panel-summary {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .notes-panel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -8px -8px -8px 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
  }

  .notes-panel-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
  }

  .notes-panel-toggle svg {
    transition: transform 160ms ease;
  }

  .notes-tabs {
    order: 3;
    margin-left: auto;
  }

  .notes-toolbar-label {
    display: none;
  }

  .notes-toolbar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
  }

  .notes-format-btn,
  .notes-timestamp-btn,
  .notes-help-button {
    min-height: 44px;
  }

  .notes-format-btn {
    min-width: 44px;
    padding-right: 7px;
    padding-left: 7px;
  }

  .notes-format-btn[data-note-format^="h"] {
    min-width: 44px;
    padding-right: 6px;
    padding-left: 6px;
  }

  .notes-help-button {
    width: 44px;
  }

  .notes-toolbar-sep {
    display: none;
  }

  .notes-timestamp-btn {
    gap: 4px;
    flex: 1 0 100%;
    justify-content: center;
    margin-left: 0;
    padding: 5px 7px;
    font-size: 0.76rem;
  }

  .notes-panel.is-collapsed {
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .notes-panel.is-collapsed .notes-panel-head {
    align-items: center;
    margin-bottom: 0;
  }

  .notes-panel.is-collapsed .notes-panel-summary {
    display: block;
    margin-top: 2px;
  }

  .notes-panel.is-collapsed .notes-panel-toggle svg {
    transform: rotate(-90deg);
  }

  .notes-panel.is-collapsed .notes-tabs,
  .notes-panel.is-collapsed .notes-panel-body {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notes-format-btn,
  .notes-timestamp-btn,
  .notes-help-button,
  .notes-help-card {
    transition: none;
  }
}

/* ─── Related lectures (sidebar) ────────────────────────────────────────── */

.related-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.related-section .section-heading {
  margin-bottom: 12px;
}

.related-item em {
  color: var(--muted);
  font-weight: 600;
}

.related-item.is-watched em {
  color: var(--accent);
  font-weight: 800;
}

/* source: animations.css */
/* ─── Card entrance animation ────────────────────────────────────────────── */

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal-anim {
  animation: card-in 0.22s ease both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* ─── Skeleton shimmer ───────────────────────────────────────────────────── */

@keyframes skel-shimmer {
  from { background-position: -600px 0; }
  to   { background-position: 600px 0; }
}

.skel {
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    #e4dcd0 0%,
    #ede5d9 40%,
    #f4ece3 50%,
    #ede5d9 60%,
    #e4dcd0 100%
  );
  background-size: 1200px 100%;
  animation: skel-shimmer 1.6s ease-in-out infinite;
}

/* Loading placeholders — the beige shimmer flashes bright on a dark page
   before content paints. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .skel {
    background: linear-gradient(
      90deg,
      #1a241f 0%,
      #212d28 40%,
      #283530 50%,
      #212d28 60%,
      #1a241f 100%
    );
    background-size: 1200px 100%;
  }
}

:root[data-theme="dark"] .skel {
  background: linear-gradient(
    90deg,
    #1a241f 0%,
    #212d28 40%,
    #283530 50%,
    #212d28 60%,
    #1a241f 100%
  );
  background-size: 1200px 100%;
}

.skel-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.skel-label {
  height: 11px;
  margin: 13px 14px 0;
}

.skel-title {
  height: 16px;
  margin: 9px 14px 0;
}

.skel-meta {
  height: 11px;
  margin: 11px 14px 22px;
}

/* ─── Scroll reveal ──────────────────────────────────────────────────────── */

.section-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.section-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */

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

  body {
    animation: none;
  }

  .reveal-anim,
  .section-reveal,
  .series-card:hover,
  .continue-card:hover,
  .episode-card:hover,
  .nav-more-trigger[aria-expanded="true"] svg,
  .autoplay-toast {
    animation: none !important;
    opacity: 1;
    transform: none !important;
  }

  .loading-spinner {
    animation: none !important;
  }

  .section-reveal {
    transition: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }
}

/* ─── Hover lift effects (pointer devices only) ──────────────────────────── */

@media (hover: hover) {
  .series-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(24, 32, 27, 0.14), 0 0 0 1px rgba(23, 107, 91, 0.18);
    border-color: rgba(23, 107, 91, 0.28);
  }

  .continue-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(24, 32, 27, 0.13);
  }

  .episode-card:hover:not(.is-unavailable) {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(24, 32, 27, 0.12), 0 0 0 1px rgba(23, 107, 91, 0.16);
    border-color: rgba(23, 107, 91, 0.22);
  }
}

.series-card:active,
.continue-card:active,
.episode-card:active:not(.is-unavailable) {
  transform: translateY(-1px);
  transition-duration: 80ms;
}

/* source: dark.css */
/* ─── Grouped dark-mode text colour overrides ────────────────────────────── */
/*     These classes span multiple page files, so they live here together.   */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-copy,
  :root:not([data-theme="light"]) .about-hero p,
  :root:not([data-theme="light"]) .about-closing p,
  :root:not([data-theme="light"]) .principle-item p,
  :root:not([data-theme="light"]) .settings-hero p,
  :root:not([data-theme="light"]) .settings-panel p,
  :root:not([data-theme="light"]) .settings-note,
  :root:not([data-theme="light"]) .series-description,
  :root:not([data-theme="light"]) .episode-date,
  :root:not([data-theme="light"]) .episode-views,
  :root:not([data-theme="light"]) .episode-status,
  :root:not([data-theme="light"]) .watch-info p {
    color: var(--muted);
  }
}

:root[data-theme="dark"] .hero-copy,
:root[data-theme="dark"] .about-hero p,
:root[data-theme="dark"] .about-closing p,
:root[data-theme="dark"] .principle-item p,
:root[data-theme="dark"] .settings-hero p,
:root[data-theme="dark"] .settings-panel p,
:root[data-theme="dark"] .settings-note,
:root[data-theme="dark"] .series-description,
:root[data-theme="dark"] .episode-date,
:root[data-theme="dark"] .episode-views,
:root[data-theme="dark"] .episode-status,
:root[data-theme="dark"] .watch-info p {
  color: var(--muted);
}

/* source: responsive.css */
/* Everything below the desktop shell (which starts at 1200px, where the left
   sidebar and header search appear) is a touch device in practice — phones and
   iPads. Neither needs a marketing headline or a streak summary occupying the
   first screen of the homepage: the streak lives in the header button, and the
   catalogue plus what you were watching is what people came for. Phones already
   worked this way; this extends it across the tablet range. */
@media (max-width: 1199px) {
  .home-page .hero,
  .home-page .streak-section {
    display: none;
  }
}

/* ─── Tablet breakpoint (≤ 900px) ───────────────────────────────────────── */

@media (max-width: 900px) {
  .series-hero,
  .speaker-hero,
  .watch-layout {
    grid-template-columns: 1fr;
  }

  .speaker-hero {
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
  }

  .speaker-hero img {
    width: 120px;
    height: 120px;
  }

  .speaker-hero .eyebrow {
    display: none;
  }

  .episode-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .episode-sidebar {
    position: static;
    max-height: none;
  }

  .series-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .continue-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .streak-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .streak-stats {
    grid-column: 1 / -1;
    grid-template-columns: auto auto;
    justify-content: space-between;
    justify-items: start;
  }

  .site-footer-inner {
    grid-template-columns: 1fr;
  }

  .site-footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ─── Mobile breakpoint (≤ 600px) ───────────────────────────────────────── */

@media (max-width: 600px) {
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  .nav-shell {
    min-height: 58px;
  }

  .site-menu,
  .page-menu {
    display: none;
  }

  h1 {
    font-size: clamp(1.9rem, 7vw, 5.9rem);
  }

  .hero {
    padding: 16px 0 6px;
  }

  .hero .eyebrow {
    display: none;
  }

  .hero h1 {
    display: block;
    max-width: 340px;
    margin-bottom: 6px;
    font-size: clamp(1.65rem, 7.4vw, 2rem);
    line-height: 1.08;
  }

  .hero .hero-copy {
    display: block;
    max-width: 350px;
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .search-form {
    width: 100%;
    border-radius: 10px;
  }

  .search-form input {
    padding: 10px 12px;
    font-size: 0.95rem;
  }

  .search-form button {
    position: relative;
    padding: 9px 14px;
    font-size: 0.88rem;
  }

  .search-form button::before,
  .sort-trigger::before {
    position: absolute;
    top: -4px;
    right: 0;
    bottom: -4px;
    left: 0;
    content: "";
  }

  .sort-trigger {
    position: relative;
  }

  .search-suggestions {
    max-height: min(340px, 58vh);
  }

  .search-suggestion {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding: 10px 11px;
  }

  .search-suggestion span {
    max-width: 100%;
  }

  /* Keep the brand on one line beside the back button: slightly smaller
     type and trimmed neighbours make room, ellipsis is the safety net */
  .brand {
    min-width: 0;
    flex-shrink: 1;
    gap: 5px;
    font-size: 0.84rem;
  }

  .back-button {
    width: 34px;
  }

  .nav-shell .auth-btn {
    gap: 4px;
    padding: 0 8px;
  }

  .brand span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .nav-streak-btn {
    min-width: 44px;
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
  }

  .nav-streak-btn span {
    font-size: 0.78rem;
  }

  /* The 44px square button only fits the flame — the zero-state "Streak"
     word is desktop-only */
  .nav-streak-btn .streak-label {
    display: none;
  }

  .streak-panel {
    align-items: end;
    padding: 0;
  }

  .streak-panel-sheet {
    width: 100%;
    max-height: calc(100vh - 22px);
    border-radius: 14px 14px 0 0;
    padding: 16px;
  }

  .streak-panel-summary,
  .leaderboard-opt {
    align-items: flex-start;
  }

  .streak-panel-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .streak-panel-orb {
    width: 72px;
    height: 72px;
  }

  .streak-panel-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .streak-panel-stats span {
    padding: 10px;
  }

  .streak-heatmap {
    gap: 5px;
  }

  .streak-tabs button {
    padding-inline: 7px;
  }

  .quran-clock-in-card {
    align-items: stretch;
    flex-direction: column;
  }

  .quran-clock-in-card button {
    width: 100%;
  }

  .series-hero .hero-copy {
    font-size: 0.92rem;
    margin: 10px 0 16px;
  }

  /* Inside a series the big cover art repeats what every episode thumbnail
     already shows — reclaim the half-screen it costs on phones */
  .series-hero img {
    display: none;
  }

  /* Two-line description with a Show more toggle (JS adds the button
     only when the clamp actually hides text) */
  .series-hero .hero-copy.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 4px;
  }

  #series-desc-toggle {
    display: inline-block;
    margin-bottom: 12px;
  }

  .speaker-hero {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    padding-top: 22px;
    padding-bottom: 10px;
  }

  .speaker-hero img {
    width: 88px;
    height: 88px;
  }

  .speaker-hero h1 {
    font-size: clamp(1.4rem, 7vw, 2rem);
  }

  .speaker-hero .hero-copy {
    margin: 8px 0 0;
    font-size: 0.94rem;
    line-height: 1.55;
  }

  .content-section {
    padding: 16px 0;
  }

  #categories {
    padding-bottom: 2px;
  }

  #active-category-label,
  #series-title,
  #result-count {
    display: none;
  }

  body.search-mode #active-category-label,
  body.search-mode #series-title,
  body.search-mode #result-count {
    display: block;
  }

  body.search-mode .row-heading {
    align-items: flex-start;
  }

  body.search-mode .series-controls {
    justify-content: flex-start;
  }

  body.search-mode .hero {
    padding-top: 8px;
  }

  .series-section {
    padding-top: 8px;
  }

  .continue-section {
    padding: 10px 0 6px;
  }

  .continue-section .section-heading {
    margin-bottom: 9px;
  }

  .continue-section .section-heading .eyebrow {
    display: none;
  }

  .continue-section .section-heading h2 {
    font-size: 1.2rem;
  }

  #speakers {
    padding-top: 8px;
  }

  .continue-strip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 0 8px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 52px), transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black calc(100% - 52px), transparent 100%);
  }

  /* No fade on the resume strip. It holds at most two cards, so the 52px ramp
     never fell on overflow the reader could scroll to -- it just washed out the
     second card's thumbnail. The pathway shelf keeps the fade: it carries four
     items and genuinely runs off the edge. */
  #continue-list {
    --continue-thumb-h: 96px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .continue-card {
    flex: 0 0 40%;
    scroll-snap-align: start;
  }

  /* Sized from the thumbnail rather than the viewport, so the artwork is a
     true 16:9 box with room for two lines of title beside it. */
  .continue-hero {
    flex: 0 0 min(86%, 380px);
  }

  .continue-hero .continue-card-link {
    grid-template-columns: calc(var(--continue-thumb-h) * 16 / 9) minmax(0, 1fr);
    min-height: var(--continue-thumb-h);
  }

  .continue-hero .continue-thumb {
    aspect-ratio: auto;
    min-height: var(--continue-thumb-h);
    height: 100%;
  }

  /* Same reasoning as the tablet/desktop rule: the whole card is the resume
     link, so the button is a second target for the same action. It was also
     what made this card taller than its own thumbnail, which is what forced the
     artwork to crop. */
  .continue-hero .continue-resume-btn {
    display: none;
  }

  .streak-section {
    padding: 8px 0 4px;
  }

  .streak-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    padding: 10px 11px;
  }

  .streak-orb {
    width: 52px;
    height: 52px;
  }

  .streak-orb svg {
    width: 18px;
    height: 18px;
    margin-bottom: -2px;
  }

  .streak-orb strong {
    font-size: 1.15rem;
  }

  .streak-copy {
    gap: 4px;
  }

  .streak-copy small {
    font-size: 0.6rem;
  }

  .streak-copy h2 {
    overflow: hidden;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .streak-copy p {
    display: none;
  }

  .streak-track {
    height: 5px;
  }

  .streak-stats {
    display: block;
    grid-column: auto;
  }

  .streak-stats span {
    display: none;
  }

  .streak-action {
    min-height: 40px;
    padding: 8px 11px;
    font-size: 0.75rem;
  }

  .streak-settings-panel {
    align-items: stretch;
  }

  .continue-hero .continue-body {
    gap: 4px;
    align-content: center;
    padding: 9px 10px;
  }

  .continue-hero .continue-body small {
    display: none;
  }

  .continue-hero .continue-body strong {
    font-size: 1.05rem;
  }

  .continue-hero .continue-body em {
    font-size: 0.72rem;
  }

  .continue-resume-btn {
    margin-top: 2px;
    padding: 7px 12px;
    font-size: 0.72rem;
  }

  .continue-body {
    gap: 3px;
    padding: 8px 8px 12px;
  }

  .continue-body small {
    font-size: 0.58rem;
  }

  .continue-body strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .continue-body em {
    font-size: 0.64rem;
  }

  .category-strip {
    gap: 6px;
    padding-bottom: 8px;
  }

  .category-button {
    font-size: 0.82rem;
    padding: 8px 11px;
  }

  .speaker-directory {
    grid-template-columns: 1fr;
  }

  .site-footer {
    padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
  }

  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .site-footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
  }

  .site-footer-group a {
    min-height: 32px;
    font-size: 0.82rem;
  }

  .site-footer-copyright {
    padding-bottom: 34px;
  }

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

  .speaker-profile-card {
    grid-template-columns: 60px minmax(0, 1fr);
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .speaker-profile-card img {
    width: 60px;
    height: 60px;
  }

  .section-heading {
    margin-bottom: 10px;
  }

  h2 {
    font-size: clamp(1.3rem, 3vw, 2.3rem);
  }

  /* YouTube-style stacked cards: full-width thumbnail, text underneath. */
  .series-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .series-card {
    flex-direction: column;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }

  .series-link {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
  }

  .series-body {
    padding: 10px 2px 0;
  }

  .series-card .details-toggle {
    display: inline-flex;
    width: 44px;
    height: 44px;
  }

  .card-actions {
    gap: 2px;
    margin-top: 8px;
  }

  .mini-action {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .series-browse-grid .series-body .primary-link {
    display: none;
  }

  .series-card .series-description {
    display: none;
    overflow: hidden;
    margin: 7px 0 0;
    border-top: 0;
    color: #4f5b55;
    font-size: 0.78rem;
    line-height: 1.35;
    padding-top: 0;
  }

  .series-card.is-expanded .series-description {
    display: block;
  }

  .series-title {
    margin: 5px 0 6px;
    font-size: 0.94rem;
    line-height: 1.35;
  }

  .series-meta {
    gap: 6px;
    margin-top: 2px;
    font-size: 0.78rem;
  }

  .series-meta span {
    gap: 6px;
  }

  .series-meta span:not(:last-child)::after {
    width: 3px;
    height: 3px;
  }

  .series-topic {
    font-size: 0.66rem;
  }

  .episode-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .episode-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    padding: 14px 0;
  }

  .episode-card-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }

  .episode-card:last-child {
    border-bottom: none;
  }

  .episode-card .ep-thumb {
    width: 148px;
    flex-shrink: 0;
  }

  .episode-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
  }

  .episode-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding-top: 2px;
  }

  .episode-number,
  .episode-card strong,
  .episode-date,
  .episode-views,
  .episode-status {
    margin-inline: 0;
  }

  /* Meta text steps clearly below the title so the title leads the row */
  .episode-number {
    margin-top: 0;
    font-size: 0.68rem;
  }

  .episode-card strong {
    margin-top: 4px;
    font-size: 0.9rem;
  }

  .episode-date {
    margin-top: 4px;
    font-size: 0.74rem;
    font-weight: 600;
  }

  .episode-views,
  .episode-status {
    margin-top: 2px;
    margin-bottom: 0;
    font-size: 0.72rem;
    font-weight: 600;
  }

  /* Plain dots on the page background — the dark contrast circle is only
     needed on desktop where the button sits on the thumbnail */
  .ep-menu-btn {
    color: var(--muted);
  }

  .ep-menu-btn::before {
    background: transparent;
  }

  .ep-menu-btn:hover::before,
  .ep-menu-btn[aria-expanded="true"]::before {
    background: rgba(24, 32, 27, 0.08);
  }

  [data-theme="dark"] .ep-menu-btn:hover::before,
  [data-theme="dark"] .ep-menu-btn[aria-expanded="true"]::before {
    background: rgba(255, 255, 255, 0.08);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ep-menu-btn:hover::before,
    :root:not([data-theme="light"]) .ep-menu-btn[aria-expanded="true"]::before {
      background: rgba(255, 255, 255, 0.08);
    }
  }

  .compact-episode {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .watch-layout {
    width: 100%;
    gap: 0;
    padding: 0 0 20px;
  }

  /* Pin the player just below the sticky site header so the video stays
     visible while scrolling notes, takeaways, and the recap. It cannot pin
     over the header: main's view-transition-name creates a stacking context,
     so nothing inside main can out-stack the header (z 20) — and raising
     main above it would put the open nav menu behind page content. */
  .video-frame {
    position: sticky;
    top: 59px;
    z-index: 30;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  }

  .watch-info {
    padding: 16px 16px 0;
  }

  .watch-info h1 {
    font-size: clamp(1.35rem, 5vw, 2rem);
  }

  .watch-note {
    display: none;
  }

  .episode-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 18px 16px 0;
  }

  .episode-list-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 6px;
    padding: 11px 0;
    border: none;
    border-top: 1px solid var(--line);
    background: none;
    color: var(--accent-strong);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    gap: 8px;
  }

  .episode-list-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(23, 107, 91, 0.1);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 800;
    flex-shrink: 0;
  }

  .compact-episode-list.is-collapsed .compact-episode {
    display: none;
  }

  .row-heading {
    display: block;
  }

  #speakers .row-heading {
    display: flex;
  }

  .principle-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .settings-panel {
    display: grid;
    gap: 16px;
  }

  .danger-button {
    width: 100%;
  }

  .autoplay-toast {
    bottom: calc(68px + env(safe-area-inset-bottom));
    left: 16px;
    right: 16px;
    transform: none;
    white-space: normal;
    flex-wrap: wrap;
    animation-name: toast-in-mobile;
  }

  @keyframes toast-in-mobile {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .result-count {
    margin-top: 8px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .catalog-pagination {
    margin-top: 20px;
  }

  .catalog-load-more {
    width: 100%;
  }

  .bottom-nav {
    display: flex;
  }
}

/* Continue Learning is a two-item overview, not a carousel. Keep it fully
   visible and scrollbar-free at phone sizes after the generic shelf rules
   above have configured pathway shelves for horizontal scrolling. */
@media (max-width: 699px) {
  #continue-list {
    --continue-card-h: 112px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  #continue-list .continue-card,
  #continue-list .continue-hero {
    width: auto;
    max-width: none;
    flex: none;
    scroll-snap-align: none;
  }

  #continue-list .continue-card-link,
  #continue-list .continue-hero .continue-card-link {
    grid-template-columns: calc(var(--continue-card-h) * 16 / 9) minmax(0, 1fr);
    height: var(--continue-card-h);
    min-height: var(--continue-card-h);
  }

  #continue-list .continue-body,
  #continue-list .continue-hero .continue-body {
    gap: 4px;
    padding: 10px 40px 10px 12px;
  }

  #continue-list .continue-body small,
  #continue-list .continue-hero .continue-body small {
    display: block;
    font-size: 0.58rem;
  }

  #continue-list .continue-body strong,
  #continue-list .continue-hero .continue-body strong {
    font-size: 0.86rem;
    line-height: 1.25;
  }

  #continue-list .continue-meta {
    font-size: 0.66rem;
  }

  #continue-list .continue-resume {
    font-size: 0.69rem;
  }

  #continue-list .continue-remove {
    width: 36px;
    height: 36px;
    opacity: 1;
  }
}

@media (max-width: 360px) {
  #continue-list {
    --continue-card-h: 108px;
  }

  #continue-list .continue-card-link,
  #continue-list .continue-hero .continue-card-link {
    grid-template-columns: minmax(116px, 40%) minmax(0, 1fr);
  }

  #continue-list .continue-body small {
    display: none;
  }
}

/* source: history.css */
.history-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
  min-height: 40px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.history-item {
  position: relative;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.history-item:first-child {
  border-top: 1px solid var(--line);
}

.history-item-link {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  flex: 1;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
}

.history-item-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.history-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--line);
  align-self: start;
}

.history-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
}

.history-progress-fill {
  height: 100%;
  background: var(--accent);
  min-width: 2px;
}

.history-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 44px;
  min-width: 0;
}

.history-series {
  color: var(--rose);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.history-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.history-when {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 4px;
}

.history-status {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  margin-top: 1px;
}

.history-status.is-done {
  color: var(--muted);
}

.history-remove {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.history-remove:hover,
.history-remove:focus-visible {
  background: rgba(166, 72, 79, 0.1);
  color: var(--rose);
  outline: none;
}

.history-remove:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: -4px;
}

.history-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 40px 0 20px;
}

.history-empty[hidden] {
  display: none;
}

.history-empty-heading {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.history-empty-body {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

/* ─── Desktop rows ───────────────────────────────────────────────────────── */

/* A 130px thumbnail left the 920px row almost entirely empty. Widen it to the
   size the rest of the site uses for a 16:9 still and let the row breathe,
   trading the hairline dividers for spacing plus a hover surface. */
@media (min-width: 901px) {
  .history-list {
    gap: 6px;
  }

  .history-item,
  .history-item:first-child {
    border: 0;
    border-radius: 12px;
    transition: background 0.15s;
  }

  .history-item:hover,
  .history-item:focus-within {
    background: var(--surface-strong);
  }

  .history-item-link {
    grid-template-columns: 246px minmax(0, 1fr);
    gap: 16px;
    padding: 8px;
  }

  .history-thumb {
    border-radius: 10px;
  }

  .history-info {
    gap: 4px;
    align-self: center;
    padding-right: 48px;
  }

  .history-title {
    font-size: 1.05rem;
  }

  .history-when {
    margin-top: 6px;
    font-size: 0.8rem;
  }

  .history-remove {
    top: 10px;
    right: 8px;
    transform: none;
  }
}

/* ─── Mobile rows ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .history-item-link {
    grid-template-columns: 152px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
  }

  .history-info {
    padding-right: 34px;
  }

  /* Nothing follows the last row, so its rule would just float above the
     footer */
  .history-item:last-child {
    border-bottom: 0;
  }

  /* The series/episode eyebrow usually wraps at this width; tighten it so it
     stays secondary to the title instead of leading the row */
  .history-series {
    font-size: 0.67rem;
    line-height: 1.3;
  }

  .history-thumb .thumb-duration {
    right: 5px;
    bottom: 5px;
    padding: 1px 5px;
    font-size: 0.66rem;
  }

  .history-title {
    font-size: 0.9rem;
  }

  .history-when,
  .history-status {
    font-size: 0.72rem;
  }

  /* Top-aligned with the thumbnail rather than floating beside the middle of
     a two-line title */
  .history-remove {
    top: 10px;
    right: -8px;
    transform: none;
  }

  /* The full-width treatment belongs to the settings page's destructive
     actions, not to a secondary control at the top of a list */
  .history-header .danger-button {
    width: auto;
  }
}

/* source: saved.css */
/* ─── Saved groups ───────────────────────────────────────────────────────── */

.saved-group {
  margin-bottom: 40px;
}

/* A 0.72rem uppercase eyebrow gave the groups no weight at all — these are the
   page's section headings, so they get the site's heading treatment. */
.saved-group-heading {
  margin: 0 0 14px;
  font-family: "Inria Serif", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.saved-group-body {
  display: contents;
}

/* ─── Saved series cards (grid) ──────────────────────────────────────────── */

/* Same column counts and gutters as .series-grid on the home feed, so a saved
   series looks like the card the user saved it from */
.saved-group:has(.saved-series-card) .saved-group-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  column-gap: 18px;
  row-gap: 30px;
}

@media (min-width: 1200px) {
  .saved-group:has(.saved-series-card) .saved-group-body {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 36px;
  }
}

@media (max-width: 900px) {
  .saved-group:has(.saved-series-card) .saved-group-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Single stacked column, the same shape the home feed takes on phones */
@media (max-width: 600px) {
  .saved-group:has(.saved-series-card) .saved-group-body {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}

.saved-series-card {
  position: relative;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  box-shadow: 0 6px 20px rgba(24, 32, 27, 0.07);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.saved-series-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(24, 32, 27, 0.12);
}

.saved-series-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.saved-series-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  border-radius: 9px;
}

.saved-series-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--line);
  overflow: hidden;
}

.saved-series-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.saved-series-info {
  padding: 10px 12px 12px;
}

.saved-series-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 4px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.saved-series-meta {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.saved-card-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.saved-series-card:hover .saved-card-remove,
.saved-series-card:focus-within .saved-card-remove {
  opacity: 1;
}

.saved-card-remove:hover {
  background: rgba(166, 72, 79, 0.85);
}

.saved-card-remove:focus-visible {
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: -3px;
}

/* ─── Saved episode / video items (list) ─────────────────────────────────── */

.saved-ep-item {
  position: relative;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.saved-ep-item:first-child {
  border-top: 1px solid var(--line);
}

.saved-ep-link {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  flex: 1;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
}

.saved-ep-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.saved-ep-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--line);
  align-self: start;
}

.saved-ep-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.saved-ep-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 44px;
  min-width: 0;
}

.saved-ep-series {
  color: var(--rose);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.saved-ep-title {
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.saved-ep-status {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  margin-top: 2px;
}

.saved-ep-status.is-done {
  color: var(--muted);
}

.saved-remove-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.saved-remove-btn:hover,
.saved-remove-btn:focus-visible {
  background: rgba(166, 72, 79, 0.1);
  color: var(--rose);
  outline: none;
}

.saved-remove-btn:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: -4px;
}

/* ─── Desktop ────────────────────────────────────────────────────────────── */

@media (min-width: 901px) {
  /* Series cards drop their chrome the way the home grid does above 900px */
  .saved-series-card {
    overflow: visible;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
  }

  .saved-series-card:hover {
    box-shadow: none;
  }

  .saved-series-thumb {
    border-radius: 14px;
    background: var(--surface-strong);
    box-shadow: 0 2px 10px rgba(24, 32, 27, 0.08);
    transition: box-shadow 180ms ease;
  }

  .saved-series-card:hover .saved-series-thumb,
  .saved-series-card:focus-within .saved-series-thumb {
    box-shadow: 0 9px 24px rgba(24, 32, 27, 0.14);
  }

  .saved-series-thumb img {
    transition: transform 240ms ease, filter 240ms ease;
  }

  .saved-series-card:hover .saved-series-thumb img {
    transform: scale(1.042);
    filter: brightness(1.06);
  }

  .saved-series-link:focus-visible {
    border-radius: 14px;
    outline: 3px solid rgba(23, 107, 91, 0.3);
    outline-offset: 3px;
  }

  .saved-series-info {
    padding: 12px 4px 4px;
  }

  .saved-series-title {
    margin-bottom: 6px;
    font-size: 1rem;
    font-weight: 800;
  }

  .saved-series-meta {
    font-size: 0.84rem;
  }

  .saved-card-remove {
    top: 8px;
    right: 8px;
  }

  /* Episode and short-video rows get the same widened still and hover surface
     as the watch-history rows */
  .saved-group:has(.saved-ep-item) .saved-group-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .saved-ep-item,
  .saved-ep-item:first-child {
    border: 0;
    border-radius: 12px;
    transition: background 0.15s;
  }

  .saved-ep-item:hover,
  .saved-ep-item:focus-within {
    background: var(--surface-strong);
  }

  .saved-ep-link {
    grid-template-columns: 246px minmax(0, 1fr);
    gap: 16px;
    padding: 8px;
  }

  .saved-ep-thumb {
    border-radius: 10px;
  }

  .saved-ep-info {
    gap: 4px;
    align-self: center;
    padding-right: 48px;
  }

  .saved-ep-title {
    font-size: 1.05rem;
  }

  .saved-ep-status {
    margin-top: 6px;
  }

  .saved-remove-btn {
    top: 10px;
    right: 8px;
    transform: none;
  }
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .saved-group-heading {
    font-size: 1.2rem;
  }

  .saved-ep-link {
    grid-template-columns: 152px minmax(0, 1fr);
    gap: 12px;
  }

  .saved-ep-info {
    padding-right: 34px;
  }

  .saved-ep-item:last-child {
    border-bottom: 0;
  }

  .saved-ep-series {
    font-size: 0.67rem;
    line-height: 1.3;
  }

  .saved-ep-thumb .thumb-duration {
    right: 5px;
    bottom: 5px;
    padding: 1px 5px;
    font-size: 0.66rem;
  }

  .saved-ep-title {
    font-size: 0.9rem;
  }

  .saved-ep-status {
    font-size: 0.74rem;
  }

  .saved-remove-btn {
    top: 10px;
    right: -8px;
    transform: none;
  }

  /* Cards lose their chrome here too, matching .series-card on phones */
  .saved-series-card {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .saved-series-thumb {
    border-radius: 12px;
  }

  .saved-series-info {
    padding: 10px 2px 0;
  }

  .saved-series-title {
    font-size: 0.94rem;
  }

  /* No hover to reveal it on touch, so the remove control stays visible */
  .saved-card-remove {
    opacity: 1;
  }
}

/* source: roadmap.css */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.roadmap-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.roadmap-card.is-scheduled {
  border-color: var(--accent);
}

.roadmap-card-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.roadmap-card-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.roadmap-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.roadmap-card-top h3 {
  margin: 0;
  font-family: "Inria Serif", Georgia, serif;
  font-size: 1rem;
  line-height: 1.3;
}

.roadmap-card-speaker {
  font-size: 0.79rem;
  color: var(--muted);
  margin: 0 0 14px;
}

.roadmap-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px 3px 7px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.roadmap-status svg {
  flex-shrink: 0;
}

.roadmap-status.scheduled {
  background: rgba(22, 163, 74, 0.11);
  color: #15803d;
}

.roadmap-status.uploading {
  background: rgba(23, 107, 91, 0.1);
  color: var(--accent-strong);
}

.roadmap-status.planned {
  background: rgba(102, 112, 106, 0.1);
  color: var(--muted);
}

.roadmap-progress-bar {
  height: 5px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}

.roadmap-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}

.roadmap-progress-label {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 0;
}

.roadmap-target-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 11px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
}

.roadmap-target-row svg {
  flex-shrink: 0;
  color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .roadmap-status.scheduled {
    background: rgba(22, 163, 74, 0.2);
    color: #4ade80;
  }
  :root:not([data-theme="light"]) .roadmap-status.uploading {
    background: rgba(23, 107, 91, 0.22);
    color: var(--accent);
  }
  :root:not([data-theme="light"]) .roadmap-status.planned {
    background: rgba(102, 112, 106, 0.18);
  }
  :root:not([data-theme="light"]) .roadmap-target-row {
    border-top-color: var(--line);
  }
}

:root[data-theme="dark"] .roadmap-status.scheduled {
  background: rgba(22, 163, 74, 0.2);
  color: #4ade80;
}
:root[data-theme="dark"] .roadmap-status.uploading {
  background: rgba(23, 107, 91, 0.22);
  color: var(--accent);
}
:root[data-theme="dark"] .roadmap-status.planned {
  background: rgba(102, 112, 106, 0.18);
}

@media (max-width: 600px) {
  .roadmap-grid {
    grid-template-columns: 1fr;
  }
}

/* source: copyright.css */
.copyright-speaker-list {
  display: flex;
  flex-direction: column;
}

/* Each speaker entry is a <details> so it can collapse on narrow screens. On
   desktop the summary row is inert and the body stays open (see the JS in
   scripts/copyright-page.js), which keeps the original wide layout intact. */
.copyright-speaker-card {
  position: relative;
  padding: 28px 0 28px 94px; /* 72px avatar + 22px gutter */
  border-top: 1px solid var(--line);
}

/* The avatar is lifted out of flow so the summary and the description below it
   share one text column — otherwise the 72px avatar would push the description
   down and open a gap under the subtitle. */
.copyright-speaker-summary {
  display: block;
  list-style: none;
  cursor: default;
}

.copyright-speaker-summary::-webkit-details-marker {
  display: none;
}

.copyright-disclosure-icon {
  display: none;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.18s ease;
}

.copyright-speaker-avatar {
  position: absolute;
  left: 0;
  top: 28px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 2px;
}

.copyright-speaker-meta {
  display: block;
  min-width: 0;
}

.copyright-speaker-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.copyright-speaker-header h3 {
  margin: 0;
  font-family: "Inria Serif", Georgia, serif;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.2;
}

.copyright-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px 4px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

.copyright-status svg {
  flex-shrink: 0;
}

.copyright-status.confirmed {
  background: rgba(22, 163, 74, 0.11);
  color: #15803d;
}

.copyright-status.licensed {
  background: rgba(13, 148, 136, 0.11);
  color: #0f766e;
}

.copyright-status.unconfirmed {
  background: rgba(217, 119, 6, 0.11);
  color: #92400e;
}

.copyright-risk-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px 4px 7px;
  border-radius: 20px;
  white-space: nowrap;
  background: rgba(220, 38, 38, 0.11);
  color: #b91c1c;
}

.copyright-risk-flag svg {
  flex-shrink: 0;
}

.copyright-speaker-subtitle {
  display: block;
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
}

.copyright-speaker-desc {
  margin: 0;
  color: #4a554f;
  line-height: 1.7;
  font-size: 0.94rem;
}

/* Collapsible "Who we are" principles — same shape as the speaker cards, with
   the step number taking the place of the avatar. */
.copyright-principle {
  position: relative;
  display: block;
  padding-left: 82px; /* 64px number column + 18px gutter */
}

.copyright-principle-summary {
  display: block;
  list-style: none;
  cursor: default;
}

.copyright-principle-summary::-webkit-details-marker {
  display: none;
}

.copyright-principle-index {
  position: absolute;
  left: 0;
  top: 22px;
  color: var(--accent);
  font-family: "Inria Serif", Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .copyright-status.confirmed {
    background: rgba(22, 163, 74, 0.2);
    color: #4ade80;
  }
  :root:not([data-theme="light"]) .copyright-status.licensed {
    background: rgba(13, 148, 136, 0.2);
    color: #2dd4bf;
  }
  :root:not([data-theme="light"]) .copyright-status.unconfirmed {
    background: rgba(217, 119, 6, 0.2);
    color: #fbbf24;
  }
  :root:not([data-theme="light"]) .copyright-risk-flag {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
  }
  :root:not([data-theme="light"]) .copyright-speaker-desc {
    color: var(--muted);
  }
}

:root[data-theme="dark"] .copyright-status.confirmed {
  background: rgba(22, 163, 74, 0.2);
  color: #4ade80;
}
:root[data-theme="dark"] .copyright-status.licensed {
  background: rgba(13, 148, 136, 0.2);
  color: #2dd4bf;
}
:root[data-theme="dark"] .copyright-status.unconfirmed {
  background: rgba(217, 119, 6, 0.2);
  color: #fbbf24;
}
:root[data-theme="dark"] .copyright-risk-flag {
  background: rgba(220, 38, 38, 0.2);
  color: #f87171;
}
:root[data-theme="dark"] .copyright-speaker-desc {
  color: var(--muted);
}

@media (max-width: 600px) {
  /* Mobile turns both lists into tap-to-open accordions: the summary row is
     all a reader needs to scan, and the long-form justification stays out of
     the way until they ask for it. */
  .copyright-speaker-card {
    padding: 0;
  }

  .copyright-speaker-summary {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 18px;
    gap: 14px;
    align-items: center;
    padding: 16px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .copyright-speaker-avatar {
    position: static;
    width: 52px;
    height: 52px;
    margin-top: 0;
  }

  .copyright-speaker-subtitle {
    margin: 0;
  }

  .copyright-speaker-desc {
    padding: 0 0 20px;
  }

  .copyright-disclosure-icon {
    display: block;
  }

  .copyright-collapsible[open] > summary .copyright-disclosure-icon {
    transform: rotate(180deg);
  }

  .copyright-principle {
    padding: 0;
  }

  .copyright-principle-summary {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 18px;
    gap: 12px;
    align-items: center;
    padding: 16px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .copyright-principle-index {
    position: static;
    font-size: 1.1rem;
  }

  .copyright-principle h3 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.35;
  }

  .copyright-principle > p {
    padding: 0 0 20px;
  }

  /* The four status definitions are short enough that hiding them behind a tap
     would cost more than it saves — they are the legend for the badges below.
     Compact them instead of collapsing them. */
  .copyright-status-legend .principle-item {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 16px 0;
  }

  .copyright-status-legend .principle-item > span {
    font-size: 1.1rem;
  }

  .copyright-status-legend .principle-item h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    line-height: 1.35;
  }

  .copyright-status-legend .principle-item p {
    font-size: 0.9rem;
    line-height: 1.55;
  }
}

/* source: donations.css */
/* Donations page — the crypto giving panel.
 *
 * One address is visible at a time. Sending USDC on the wrong network is an
 * unrecoverable mistake, so the layout never puts four addresses side by side
 * where a reader could copy the one above the label they were reading.
 *
 * The network picker is four sr-only radios plus <label> tabs, and the panels
 * are shown with sibling selectors. No :has(), no JavaScript: with scripting
 * blocked the tabs still work, and with CSS off the page degrades to all four
 * addresses stacked under their headings, which is still correct.
 */

.donate-intro {
  max-width: 760px;
  margin: 0;
  color: #3e4842;
  font-size: clamp(1rem, 2vw, 1.08rem);
  line-height: 1.7;
}

.donate-networks {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  box-shadow: 0 10px 28px rgba(24, 32, 27, 0.07);
  overflow: hidden;
}

/* ─── Network picker ─────────────────────────────────────────────────────── */

.donate-network-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.donate-network-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 15px 10px;
  cursor: pointer;
  color: var(--muted);
  text-align: center;
  transition: color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.donate-network-tab + .donate-network-tab {
  border-left: 1px solid var(--line);
}

.donate-network-tab:hover {
  background: var(--menu-hover);
}

.donate-network-name {
  font-weight: 700;
  font-size: 0.97rem;
  line-height: 1.2;
}

.donate-network-standard {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}

#donate-network-ethereum:checked ~ .donate-network-tabs [for="donate-network-ethereum"],
#donate-network-solana:checked ~ .donate-network-tabs [for="donate-network-solana"],
#donate-network-polygon:checked ~ .donate-network-tabs [for="donate-network-polygon"],
#donate-network-base:checked ~ .donate-network-tabs [for="donate-network-base"] {
  background: var(--surface-strong);
  color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* The radios themselves are sr-only, so the keyboard ring has to be drawn on
   the tab standing in for them. Arrow keys move the checked radio with focus,
   so the focused tab is always the checked one. */
#donate-network-ethereum:focus-visible ~ .donate-network-tabs [for="donate-network-ethereum"],
#donate-network-solana:focus-visible ~ .donate-network-tabs [for="donate-network-solana"],
#donate-network-polygon:focus-visible ~ .donate-network-tabs [for="donate-network-polygon"],
#donate-network-base:focus-visible ~ .donate-network-tabs [for="donate-network-base"] {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

/* ─── Address panels ─────────────────────────────────────────────────────── */

.donate-network-panel {
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  padding: 28px;
  align-items: start;
}

#donate-network-ethereum:checked ~ .donate-network-panels #donate-panel-ethereum,
#donate-network-solana:checked ~ .donate-network-panels #donate-panel-solana,
#donate-network-polygon:checked ~ .donate-network-panels #donate-panel-polygon,
#donate-network-base:checked ~ .donate-network-panels #donate-panel-base {
  display: grid;
}

.donate-qr {
  min-width: 0;
}

/* Desktop shows the code outright — the reader is at a keyboard and their
   wallet is on a phone, so scanning is the fast path. The summary row only
   earns its space on narrow screens. */
.donate-qr-summary {
  display: none;
}

.donate-qr-image {
  display: block;
  width: 208px;
  height: 208px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  /* The SVG carries its own white plate; the frame keeps it from floating on
     the dark surface without one. */
  background: #ffffff;
}

.donate-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid rgba(217, 119, 6, 0.24);
  border-radius: 9px;
  background: rgba(217, 119, 6, 0.1);
  color: #92400e;
  font-size: 0.9rem;
  line-height: 1.55;
}

.donate-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.donate-address-caption {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.donate-address {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.donate-address code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink);
  word-break: break-all;
  /* A single click takes the whole address, so a reader who distrusts the copy
     button never has to drag-select 42 characters accurately. */
  user-select: all;
  -webkit-user-select: all;
}

.donate-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  padding: 13px 18px;
}

.donate-copy:hover,
.donate-copy:focus-visible {
  background: var(--accent-strong);
  outline: none;
}

.donate-copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.donate-copied-icon {
  display: none;
}

.donate-copy.is-copied .donate-copy-icon {
  display: none;
}

.donate-copy.is-copied .donate-copied-icon {
  display: block;
}

/* Announces the copy to screen readers; sighted readers get the button's own
   label change. */
.donate-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.donate-info-grid {
  margin-top: 4px;
}

/* ─── Dark mode ──────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .donate-intro,
  :root:not([data-theme="light"]) .donate-info-grid .info-card p {
    color: var(--muted);
  }
  :root:not([data-theme="light"]) .donate-warning {
    border-color: rgba(217, 119, 6, 0.35);
    background: rgba(217, 119, 6, 0.16);
    color: #fbbf24;
  }
  :root:not([data-theme="light"]) .donate-networks {
    box-shadow: none;
  }
}

:root[data-theme="dark"] .donate-intro,
:root[data-theme="dark"] .donate-info-grid .info-card p {
  color: var(--muted);
}

:root[data-theme="dark"] .donate-warning {
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.16);
  color: #fbbf24;
}

:root[data-theme="dark"] .donate-networks {
  box-shadow: none;
}

/* ─── Phones ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  /* On a phone the QR code is close to useless — the wallet that would scan it
     is the device already displaying it. So the address and a thumb-sized copy
     button come first, and the code drops behind a tap for the one case that
     still needs it: scanning from someone else's device. */
  .donate-networks {
    margin-top: 20px;
    border-radius: 10px;
  }

  .donate-network-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .donate-network-tab {
    padding: 13px 8px;
  }

  /* The 2x2 grid needs its dividers by position, not by document order. */
  .donate-network-tab + .donate-network-tab {
    border-left: none;
  }

  .donate-network-tab:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .donate-network-tab:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .donate-network-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 20px 18px 22px;
  }

  .donate-address-block {
    order: 1;
  }

  .donate-qr {
    order: 2;
    margin-top: 18px;
    border-top: 1px solid var(--line);
  }

  .donate-qr-summary {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) 17px;
    gap: 11px;
    align-items: center;
    list-style: none;
    padding: 16px 0 0;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.94rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .donate-qr-summary::-webkit-details-marker {
    display: none;
  }

  .donate-disclosure-icon {
    color: var(--muted);
    transition: transform 0.18s ease;
  }

  .donate-collapsible[open] > summary .donate-disclosure-icon {
    transform: rotate(180deg);
  }

  .donate-qr-image {
    width: min(230px, 70vw);
    height: auto;
    margin: 16px auto 4px;
  }

  .donate-warning {
    margin-bottom: 16px;
    font-size: 0.86rem;
  }

  .donate-address {
    margin-bottom: 12px;
    padding: 13px 14px;
  }

  .donate-address code {
    font-size: 0.88rem;
  }

  .donate-copy {
    width: 100%;
    min-height: 52px;
    font-size: 1rem;
  }
}

/* source: admin.css */
.admin-hero,
.admin-auth,
.admin-dashboard {
  width: min(1320px, calc(100% - 40px));
  margin: 0 auto;
}

.admin-auth[hidden],
.admin-dashboard[hidden],
.admin-panel[hidden] {
  display: none;
}

.admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: end;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(44px, 7vw, 86px) 0 28px;
}

.admin-hero h1 {
  max-width: 820px;
  margin: 4px 0 0;
  font-size: clamp(2.8rem, 7vw, 6.25rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.admin-hero > p,
.admin-auth p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.admin-auth {
  display: grid;
  gap: 14px;
  margin-bottom: 48px;
  border-top: 1px solid var(--line);
  padding: 24px 0;
}

.admin-toolbar,
.admin-card-head,
.admin-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.admin-toolbar {
  border-top: 1px solid var(--line);
  padding: 24px 0 18px;
}

.admin-toolbar h2,
.admin-section-heading h2,
.admin-card h3 {
  margin: 0;
}

.admin-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-toolbar-actions > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.admin-tabs::-webkit-scrollbar {
  display: none;
}

.admin-tab,
.admin-text-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.admin-tab {
  position: relative;
  min-width: max-content;
  padding: 12px 16px 14px;
}

.admin-tab::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  content: "";
}

.admin-tab:hover,
.admin-tab:focus-visible,
.admin-tab.is-active,
.admin-text-button:hover,
.admin-text-button:focus-visible {
  color: var(--accent);
}

.admin-tab.is-active::after {
  background: var(--accent);
}

.admin-text-button {
  padding: 4px 0;
  font-size: 0.8rem;
}

.admin-source-note {
  min-height: 0;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-source-note:not(:empty) {
  border: 1px solid rgba(192, 121, 39, 0.35);
  border-radius: 10px;
  background: rgba(192, 121, 39, 0.08);
  padding: 11px 13px;
}

.admin-panel {
  animation: admin-panel-in 180ms ease-out;
}

@keyframes admin-panel-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.admin-metrics,
.admin-search-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.admin-search-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-metric,
.admin-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  box-shadow: 0 12px 32px rgba(24, 32, 27, 0.06);
}

.admin-metric {
  display: grid;
  gap: 5px;
  min-height: 112px;
  align-content: space-between;
  padding: 17px;
}

.admin-metric strong {
  color: var(--ink);
  font-family: "Inria Serif", serif;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1;
}

.admin-metric span,
.admin-card-head span,
.admin-list-row em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 750;
}

.admin-metric small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.admin-grid-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-card-wide {
  grid-column: span 2;
}

.admin-card {
  margin-bottom: 16px;
  padding: 20px;
}

.admin-card-head {
  align-items: flex-start;
  margin-bottom: 16px;
}

.admin-card-kicker {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.admin-list {
  display: grid;
}

.admin-list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 11px;
  border-top: 1px solid var(--line);
  padding: 11px 0;
}

.admin-list-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.admin-list-row:last-child {
  padding-bottom: 0;
}

.admin-list-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-list-row em {
  grid-column: 2;
}

.admin-list-value {
  grid-row: span 2;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
  text-align: right;
}

.admin-rank {
  display: inline-flex;
  grid-row: span 2;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(23, 107, 91, 0.09);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-activity-bars {
  display: grid;
  grid-template-columns: repeat(30, minmax(4px, 1fr));
  align-items: end;
  gap: 4px;
  height: 172px;
  padding-top: 12px;
}

.admin-activity-day {
  position: relative;
  min-height: 5px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #279c84, var(--accent));
}

.admin-activity-day:hover::after,
.admin-activity-day:focus-visible::after {
  position: absolute;
  z-index: 2;
  bottom: calc(100% + 7px);
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  border-radius: 6px;
  background: var(--ink);
  color: var(--surface-strong);
  content: attr(data-label);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 6px 8px;
  pointer-events: none;
}

.admin-audience-status {
  display: grid;
  gap: 12px;
}

.admin-audience-callout {
  border-radius: 10px;
  background: rgba(23, 107, 91, 0.07);
  padding: 14px;
}

.admin-audience-callout strong,
.admin-audience-callout span {
  display: block;
}

.admin-audience-callout span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.admin-signal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-signal-list span {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  padding: 6px 9px;
}

.admin-section-heading {
  margin: 10px 0 16px;
}

.admin-section-heading .eyebrow {
  margin-bottom: 4px;
}

.admin-search-field input {
  width: min(320px, 72vw);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  padding: 10px 15px;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  border-top: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
}

.admin-table th {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.admin-table td {
  color: var(--ink);
  font-size: 0.86rem;
}

.admin-campaign-table {
  min-width: 1120px;
}

.admin-cell-copy {
  display: grid;
  gap: 3px;
  min-width: 150px;
}

.admin-cell-copy strong,
.admin-cell-copy span {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-cell-copy span,
#campaign-window-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-user-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: rgba(23, 107, 91, 0.1);
  object-fit: cover;
}

.admin-user-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-weight: 900;
}

.admin-user-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-user-copy strong,
.admin-user-copy span {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-copy span {
  color: var(--muted);
  font-size: 0.75rem;
}

.admin-empty,
.admin-error {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.admin-error {
  color: var(--rose);
  font-weight: 800;
}

@media (max-width: 1050px) {
  .admin-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-grid-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .admin-metrics,
  .admin-search-metrics,
  .admin-grid,
  .admin-grid-overview {
    grid-template-columns: 1fr;
  }

  .admin-card-wide {
    grid-column: auto;
  }
}

@media (max-width: 600px) {
  .admin-hero,
  .admin-auth,
  .admin-dashboard {
    width: min(100% - 24px, 1320px);
  }

  .admin-toolbar,
  .admin-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-toolbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  .admin-tab {
    padding-inline: 12px;
  }

  .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-metric {
    min-height: 104px;
    padding: 14px;
  }

  .admin-card {
    padding: 16px;
  }

  .admin-activity-bars {
    gap: 3px;
    height: 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-panel {
    animation: none;
  }
}

/* source: transitions.css */
@view-transition {
  navigation: auto;
}

.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }
.bottom-nav  { view-transition-name: bottom-nav; }
main         { view-transition-name: page-main; }

@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes page-out {
  to { opacity: 0; transform: translateY(-4px); }
}

::view-transition-old(page-main) {
  animation: page-out 0.14s ease both;
}

::view-transition-new(page-main) {
  animation: page-in 0.22s ease both;
}

::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer),
::view-transition-old(bottom-nav),
::view-transition-new(bottom-nav) {
  animation-duration: 0.08s;
}

/* source: auth.css */
/* ── Auth button in site header nav ──────────────────────────────────────── */

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line, #d8d0c2);
  background: rgba(255, 255, 255, 0.52);
  cursor: pointer;
  color: var(--muted);
  padding: 0 12px;
  flex-shrink: 0;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.auth-btn:hover {
  background: var(--surface-hover, #f0ebe0);
  border-color: rgba(23, 107, 91, 0.28);
  color: var(--text-primary, #1a202c);
}

.auth-btn:focus-visible {
  outline: 2px solid var(--brand, #176b5b);
  outline-offset: 2px;
}

.auth-btn svg {
  display: block;
}

/* Signed-in avatar */
.auth-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

.auth-initials {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand, #176b5b);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: 'Inter', sans-serif;
}

.auth-btn.is-signed-in {
  width: 36px;
  padding: 0;
  border: none;
  background: transparent;
}

.auth-btn.is-signed-in:hover {
  background: var(--surface-hover, #f0ebe0);
}

/* ── Settings page — Account section ─────────────────────────────────────── */

.auth-account-section {
  margin-top: 2rem;
}

.auth-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1rem;
}

.auth-profile-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.auth-profile-name {
  font-weight: 600;
  color: var(--text-primary, #1a202c);
  margin-bottom: 2px;
}

.auth-profile-email {
  font-size: 0.875rem;
  color: var(--muted);
}

.auth-sync-note {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.auth-sign-in-prompt {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.auth-hero-actions {
  margin-top: 22px;
}

.auth-benefits {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 650;
}

.auth-benefits li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.auth-benefits li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 900;
}

.auth-primary-action {
  min-width: 220px;
}

.auth-secondary-link {
  display: inline-flex;
  margin-left: 12px;
}

@media (max-width: 460px) {
  .auth-btn {
    min-width: 44px;
    height: 44px;
    gap: 5px;
    padding-inline: 10px;
    font-size: 0.75rem;
  }

  .auth-btn svg {
    width: 16px;
    height: 16px;
  }

  .auth-secondary-link {
    display: flex;
    width: fit-content;
    margin: 14px 0 0;
  }

  .auth-account-section {
    margin-top: 0.5rem;
  }

  .auth-primary-action {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .auth-btn {
    width: 44px;
    padding: 0;
  }

  .auth-btn span:not(.auth-avatar):not(.auth-initials) {
    display: none;
  }
}

/* Dark mode */
[data-theme="dark"] .auth-btn {
  border-color: var(--line, rgba(255,255,255,0.12));
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

[data-theme="dark"] .auth-btn:hover {
  background: var(--surface-hover-dark, rgba(255,255,255,0.07));
  color: #fff;
}

/* source: pathways.css */
/* ─── Learning pathways and badges ──────────────────────────────────────── */

.pathway-list {
  display: grid;
  gap: 16px;
}

.pathway-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.pathway-card.is-earned {
  border-color: var(--accent);
}

.pathway-card-link {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.pathway-card-link:hover .pathway-card-title,
.pathway-card-link:focus-visible .pathway-card-title {
  color: var(--accent-strong);
}

.pathway-card.is-upcoming {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  opacity: 0.72;
}

.pathway-card-badge {
  flex: 0 0 auto;
}

.pathway-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.pathway-card-title {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 800;
}

.pathway-card-blurb {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* The shared roadmap label is a single block elsewhere; here it carries a
   count on the left and a status on the right. */
.pathway-card .roadmap-progress-label,
.pathway-summary .roadmap-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ─── Badge art ─────────────────────────────────────────────────────────── */

.pathway-badge {
  display: inline-flex;
  color: var(--muted);
}

.pathway-badge-disc {
  fill: rgba(102, 112, 106, 0.12);
}

.pathway-badge-ring {
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: 0.35;
}

.pathway-badge-glyph {
  opacity: 0.55;
}

.pathway-badge.is-earned .pathway-badge-glyph {
  opacity: 1;
}

.pathway-badge.is-earned .pathway-badge-ring {
  opacity: 0.9;
}

.pathway-badge.is-earned.tier-complete,
.pathway-badge.is-earned.tier-gold {
  color: var(--accent-strong);
}

.pathway-badge.is-earned.tier-complete .pathway-badge-disc {
  fill: rgba(23, 107, 91, 0.16);
}

.pathway-badge.is-earned.tier-bronze {
  color: #a3612f;
}

.pathway-badge.is-earned.tier-bronze .pathway-badge-disc {
  fill: rgba(176, 108, 62, 0.2);
}

.pathway-badge.is-earned.tier-silver {
  color: #5f6b69;
}

.pathway-badge.is-earned.tier-silver .pathway-badge-disc {
  fill: rgba(148, 158, 156, 0.26);
}

.pathway-badge.is-earned.tier-gold .pathway-badge-disc {
  fill: rgba(200, 155, 60, 0.24);
}

/* ─── Trophy case ───────────────────────────────────────────────────────── */

.badge-case {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.badge-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.badge-tile:hover,
.badge-tile:focus-visible {
  border-color: var(--accent);
}

.badge-tile-name {
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.3;
}

.badge-tile-date {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

/* ─── Profile hub rows ──────────────────────────────────────────────────── */
/* History, Saved and Settings are reached through Profile on mobile, so these
   rows are the only way in on that viewport and need to read as real
   destinations rather than a list of links. */

.profile-links {
  display: grid;
  gap: 8px;
}

.profile-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.profile-link:hover,
.profile-link:focus-visible {
  border-color: var(--accent);
}

.profile-link-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(23, 107, 91, 0.1);
  color: var(--accent-strong);
}

.profile-link-text {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.profile-link-title {
  font-size: 0.94rem;
  font-weight: 700;
}

.profile-link-sub {
  color: var(--muted);
  font-size: 0.78rem;
}

.profile-link-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  display: inline-flex;
}

/* ─── Explore cross-link ────────────────────────────────────────────────── */

.explore-pathway-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 22px;
  border: 1px solid var(--accent);
  border-radius: 16px;
  background: rgba(23, 107, 91, 0.06);
  color: inherit;
  text-decoration: none;
}

.explore-pathway-cta:hover,
.explore-pathway-cta:focus-visible {
  background: rgba(23, 107, 91, 0.11);
}

.explore-pathway-cta-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--accent-strong);
}

.explore-pathway-cta-text {
  display: grid;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}

.explore-pathway-cta-title {
  font-size: 0.98rem;
  font-weight: 800;
}

.explore-pathway-cta-sub {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* ─── "Part of a pathway" chip ──────────────────────────────────────────── */
/* Rendered on series and watch pages to connect a lecture to the curriculum
   it belongs to. */

.pathway-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: inherit;
  font-size: 0.84rem;
  text-decoration: none;
}

.pathway-chip:hover,
.pathway-chip:focus-visible {
  border-color: var(--accent);
}

.pathway-chip-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--accent-strong);
}

.pathway-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pathway-chip-count {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(23, 107, 91, 0.12);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
}

.pathway-chip-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--muted);
}

/* ─── Homepage shelf ────────────────────────────────────────────────────── */

.pathway-shelf-progress {
  max-width: 420px;
  margin-bottom: 14px;
}

.pathway-shelf-progress .roadmap-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ─── Badge-earned toast ────────────────────────────────────────────────── */
/* Same visual family as .autoplay-toast, stacked above it so a lecture that
   both completes a pathway and queues the next video shows two readable
   toasts rather than one on top of the other. */

.badge-toast {
  position: fixed;
  bottom: 148px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 201;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(24, 32, 27, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 0.9rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  animation: toast-in 0.24s ease both;
}

.badge-toast.is-hidden {
  display: none !important;
}

/* The medallion sits on a dark toast in both themes, so the tier colours have
   to be overridden -- an earned bronze or accent glyph is near-invisible here.
   These need to out-specify `.pathway-badge.is-earned.tier-*` above, hence the
   matching three-class selectors. */
.badge-toast .pathway-badge,
.badge-toast .pathway-badge.is-earned {
  flex: 0 0 auto;
  color: #ffffff;
}

.badge-toast .pathway-badge.is-earned .pathway-badge-disc {
  fill: rgba(255, 255, 255, 0.18);
}

.badge-toast .pathway-badge.is-earned .pathway-badge-glyph,
.badge-toast .pathway-badge.is-earned .pathway-badge-ring {
  opacity: 1;
}

.badge-toast-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.badge-toast-tier {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  .badge-toast {
    bottom: 150px;
    gap: 10px;
    padding: 10px 12px;
    font-size: 0.84rem;
  }
}

/* ─── Detail page ───────────────────────────────────────────────────────── */

.pathway-summary {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  padding: 18px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.pathway-summary-body {
  flex: 1 1 260px;
  min-width: 0;
}

.pathway-earned-line {
  margin: 8px 0 0;
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 800;
}

.pathway-summary .series-cta-btn {
  margin-top: 12px;
}

.pathway-stage {
  margin-bottom: 22px;
}

.pathway-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* The tier pill is borrowed from the streak ranks, where it sits inline after
   text and carries a left margin it does not need here. */
.pathway-stage-head .streak-rank-badge {
  margin-left: 0;
}

.pathway-stage-state {
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pathway-stage-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.pathway-stage.is-upcoming {
  opacity: 0.7;
}

.pathway-stage-items {
  display: grid;
  gap: 8px;
}

.pathway-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

a.pathway-item:hover,
a.pathway-item:focus-visible {
  border-color: var(--accent);
}

.pathway-item.is-unavailable {
  opacity: 0.6;
}

.pathway-item-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--on-accent);
}

.pathway-item-check svg {
  width: 13px;
  height: 13px;
}

.pathway-item.is-complete .pathway-item-check {
  background: var(--accent);
  border-color: var(--accent);
}

.pathway-item-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pathway-item-title {
  font-size: 0.92rem;
  font-weight: 700;
}

.pathway-item-meta {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

/* ─── Dark mode ─────────────────────────────────────────────────────────── */
/* Written twice on purpose: once for the system preference and once for the
   explicit toggle, matching the convention in base.css and nav.css. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pathway-badge.is-earned.tier-bronze {
    color: #e0985c;
  }
  :root:not([data-theme="light"]) .pathway-badge.is-earned.tier-silver {
    color: #c3ccca;
  }
  :root:not([data-theme="light"]) .pathway-badge.is-earned.tier-complete,
  :root:not([data-theme="light"]) .pathway-badge.is-earned.tier-gold {
    color: var(--accent);
  }
  :root:not([data-theme="light"]) .pathway-earned-line,
  :root:not([data-theme="light"]) .pathway-stage-state {
    color: var(--accent);
  }
  :root:not([data-theme="light"]) .pathway-card-blurb,
  :root:not([data-theme="light"]) .pathway-item-meta,
  :root:not([data-theme="light"]) .badge-tile-date,
  :root:not([data-theme="light"]) .pathway-stage-note {
    color: var(--muted);
  }
}

:root[data-theme="dark"] .pathway-badge.is-earned.tier-bronze {
  color: #e0985c;
}

:root[data-theme="dark"] .pathway-badge.is-earned.tier-silver {
  color: #c3ccca;
}

:root[data-theme="dark"] .pathway-badge.is-earned.tier-complete,
:root[data-theme="dark"] .pathway-badge.is-earned.tier-gold {
  color: var(--accent);
}

:root[data-theme="dark"] .pathway-earned-line,
:root[data-theme="dark"] .pathway-stage-state {
  color: var(--accent);
}

:root[data-theme="dark"] .pathway-card-blurb,
:root[data-theme="dark"] .pathway-item-meta,
:root[data-theme="dark"] .badge-tile-date,
:root[data-theme="dark"] .pathway-stage-note {
  color: var(--muted);
}

/* The toast is dark in both themes, so its medallion stays white rather than
   picking up the dark-mode accent and reading differently from light mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-toast .pathway-badge.is-earned {
    color: #ffffff;
  }
}

:root[data-theme="dark"] .badge-toast .pathway-badge.is-earned {
  color: #ffffff;
}

/* ─── Small screens ─────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .pathway-card-link,
  .pathway-card.is-upcoming {
    gap: 12px;
    padding: 14px;
  }

  /* At 88px the badge no longer fits beside the progress bar and drops to its
     own line, stranded and left-aligned. Shrinking it keeps the summary a
     single readable row. */
  .pathway-summary {
    flex-wrap: nowrap;
    gap: 14px;
    padding: 14px;
  }

  .pathway-summary-badge .pathway-badge-art {
    width: 64px;
    height: 64px;
  }

  .pathway-summary-body {
    flex: 1 1 auto;
    min-width: 0;
  }

  .badge-case {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
  }

  /* 44px is the minimum comfortable tap size (WCAG 2.5.5). The shared
     .series-cta-btn is 40px, which is fine under a mouse but tight on a phone.
     Keyed to width rather than (pointer: coarse) so it also covers touch
     laptops and narrow desktop windows. */
  /* Full width so a wrapping lecture title reads as a deliberate block rather
     than a ragged pill, and so the primary action is unmissable. */
  .pathway-summary .series-cta-btn {
    min-height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .pathway-item {
    min-height: 44px;
  }
}