/* Coaching Replay: dark, mobile-first. */

:root {
  --bg: #0e0e10;
  --panel: #18181c;
  --panel-2: #212127;
  --line: #2a2a30;
  --text: #ece8e1;
  --muted: #9a958c;
  --accent: #d9a35b;
  --accent-ink: #1a1408;
  --error: #e07a6a;
  --header-h: 3.75rem;
  --panel-w: 380px;
  --plyr-color-main: var(--accent);
  --plyr-video-background: #000;
  --plyr-menu-background: var(--panel-2);
  --plyr-menu-color: var(--text);
  --plyr-tooltip-background: var(--panel-2);
  --plyr-tooltip-color: var(--text);
  --plyr-audio-controls-background: var(--panel);
  --plyr-audio-control-color: var(--text);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 44rem; margin: 0 auto; padding: 2rem 1rem; }
main.wide { max-width: none; padding: 0; }
a { color: var(--accent); }
h1 { font-weight: 600; font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-weight: 600; font-size: 1.15rem; margin: 2rem 0 0.75rem; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

header.site { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; min-height: var(--header-h); padding: 0.5rem 1rem; border-bottom: 1px solid var(--line); }
header.site a.brand { color: var(--text); font-weight: 600; text-decoration: none; }
header.site nav { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.button, button { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.55rem 1.1rem; border-radius: 0.5rem; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
button.quiet, .button.quiet { background: transparent; color: var(--text); border-color: var(--line); font-weight: 500; }
button.small { min-height: 2.25rem; padding: 0.3rem 0.8rem; font-size: 0.9rem; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, textarea { min-height: 2.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; width: 100%; }
textarea { resize: vertical; }
form.inline { display: inline; }
.flash { padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--panel); border-left: 3px solid var(--accent); margin-bottom: 1rem; }
.flash.error { border-left-color: var(--error); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 0.75rem; padding: 1.5rem; }

/* --- Episode lists (home page cards, admin list) ---------------------------------------- */

.episode-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.episode-card { display: block; padding: 1rem 1.25rem; border-radius: 0.75rem; background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.episode-card:hover { border-color: var(--accent); }
.episode-card .title { font-weight: 600; }
.badge { display: inline-block; font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); margin-left: 0.5rem; }
.progress { height: 4px; border-radius: 2px; background: var(--line); margin-top: 0.75rem; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); }

/* --- Home page --------------------------------------------------------------------------- */

main.home { max-width: 72rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.search { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin-bottom: 2rem; }
.search input { flex: 1 1 14rem; width: auto; }
.search-bookmarks { white-space: nowrap; padding: 0.5rem 0; }
.section-heading { font-size: 1.35rem; margin: 0 0 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
section + section { margin-top: 2.5rem; }
.section-heading .clear { font-size: 0.95rem; font-weight: 500; }
.month { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 1.75rem 0 0.75rem; }
.month:first-of-type { margin-top: 0; }
.episode-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.episode-grid .episode-card { height: 100%; display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.25rem; transition: border-color 0.15s, background 0.15s; }
.episode-grid .episode-card:hover { background: var(--panel-2); }
.card-top { display: flex; align-items: center; gap: 0.5rem; }
.card-top .badge { margin-left: 0; }
.card-date { font-weight: 600; color: var(--accent); }
.watched { margin-left: auto; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.card-title { font-weight: 600; }
.card-subtitle { font-size: 1.05rem; line-height: 1.35; }
.card-snippet { font-size: 0.9rem; color: var(--muted); }
.card-snippet mark { background: none; color: var(--text); font-weight: 600; box-shadow: inset 0 -0.15em 0 var(--accent); }
.card-meta { margin-top: auto; padding-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.85rem; color: var(--muted); }
.episode-grid .progress { margin-top: 0.5rem; flex: none; }

/* Search row + "View options" menu (sliders icon); choices are saved per viewer. */
.home-bar { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 2rem; }
.home-bar .search { flex: 1; margin-bottom: 0; }
.view-menu { position: relative; flex: none; }
.view-menu summary { list-style: none; padding: 0.55rem 0.7rem; color: var(--text); }
.view-menu summary::-webkit-details-marker { display: none; }
.view-menu[open] summary { border-color: var(--accent); }
.view-menu .menu { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 20; min-width: 12rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--panel); box-shadow: 0 8px 24px rgb(0 0 0 / 0.45); display: flex; flex-direction: column; }
.menu-heading { margin: 0.4rem 0.6rem 0.2rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.view-menu .menu button { justify-content: flex-start; min-height: 2.5rem; padding: 0.35rem 0.6rem; border: 0; border-radius: 0.4rem; background: transparent; color: var(--text); font-weight: 500; }
.view-menu .menu button:hover { background: var(--panel-2); }
.view-menu .menu button[aria-checked="true"] { font-weight: 600; }
.view-menu .mark { width: 1.2rem; color: var(--accent); }
.view-menu hr { width: 100%; margin: 0.35rem 0; border: 0; border-top: 1px solid var(--line); }
button.link { min-height: 0; padding: 0; border: 0; background: none; color: var(--accent); font-weight: 500; text-decoration: underline; }
.hidden-note { font-size: 0.95rem; font-weight: 400; }

/* Compact list: one row per episode. */
.episode-rows { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; background: var(--panel); }
.episode-rows li + li { border-top: 1px solid var(--line); }
.episode-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto 6.5rem; gap: 0.25rem 1rem; align-items: center; padding: 0.55rem 1rem; color: var(--text); text-decoration: none; }
.episode-row:hover { background: var(--panel-2); }
.row-date { font-weight: 600; color: var(--accent); white-space: nowrap; }
.row-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.row-main .badge { align-self: flex-start; margin-left: 0; }
.row-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fixed slots (kept even when empty) so length and icons line up from row to row. */
.row-meta { display: grid; grid-template-columns: 5.5rem 1.5rem 2.5rem; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-state { display: flex; justify-content: flex-end; }
.row-state .watched { margin-left: 0; }
.row-state .progress { width: 100%; margin-top: 0; }
@media (max-width: 640px) {
  .episode-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date state" "main main" "meta meta"; }
  .row-date { grid-area: date; }
  .row-state { grid-area: state; }
  .row-state .progress { width: 4.5rem; }
  .row-main { grid-area: main; }
  .row-subtitle { white-space: normal; }
  .row-meta { grid-area: meta; }
}

/* --- Episode page layout ---------------------------------------------------------------- */
/* Phone portrait first: player (kept on screen), info bar, side panel, then the rest. */

.episode { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "player" "bar" "panel" "more"; }
.player-area { grid-area: player; position: sticky; top: 0; z-index: 5; background: #000; }
.episode-bar { grid-area: bar; padding: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; }
.episode-more { grid-area: more; padding: 0 1rem 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem 0.75rem; align-items: center; justify-content: space-between; }
.side-panel { grid-area: panel; display: none; flex-direction: column; border-top: 1px solid var(--line); background: var(--panel); height: calc(100dvh - 56.25vw); min-height: 18rem; }
.panel-open .side-panel { display: flex; }

.episode-info p { margin: 0; }
.episode-info h1 { margin: 0.1rem 0; font-size: 1.3rem; }
.episode-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mode-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 0.5rem; overflow: hidden; }
.mode-toggle button { border: 0; border-radius: 0; background: transparent; color: var(--text); font-weight: 500; }
.mode-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.nav-links { display: flex; gap: 1rem; flex-wrap: wrap; }

.video-wrap video { width: 100%; display: block; }
.video-wrap .plyr { max-height: 100dvh; }
.audio-wrap { padding: 1.5rem 1rem 0.5rem; background: var(--panel); }
.audio-card { text-align: center; padding-bottom: 1rem; }
.audio-card .audio-title { font-size: 1.2rem; font-weight: 600; margin: 0.25rem 0; }
.audio-buttons { display: flex; gap: 1.5rem; justify-content: center; align-items: center; margin-top: 1rem; }
.audio-buttons button { padding: 0; border-radius: 50%; }
.audio-buttons svg { fill: currentColor; }
.audio-buttons .skip { width: 3.5rem; height: 3.5rem; background: transparent; border: 0; color: var(--text); }
.audio-buttons .skip svg { width: 2.6rem; height: 2.6rem; }
.audio-buttons .skip text { font: 700 6.5px system-ui, sans-serif; }
.audio-buttons .play-big { width: 4.5rem; height: 4.5rem; }
.audio-buttons .play-big svg { width: 2.2rem; height: 2.2rem; }
.play-big .icon-pause, .play-big.is-playing .icon-play { display: none; }
.play-big.is-playing .icon-pause { display: block; }
.mode-audio .player-area { background: var(--panel); }

.resume-banner { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 6; display: flex; gap: 0.75rem; align-items: center; padding: 0.4rem 0.5rem 0.4rem 0.9rem; border-radius: 0.5rem; background: rgba(14, 14, 16, 0.88); font-size: 0.95rem; }
.media-missing { padding: 3rem 1rem; text-align: center; color: var(--muted); }

/* Bookmark marks on the progress bar */
.plyr__progress { position: relative; }
.bm-marker { position: absolute; top: 50%; width: 4px; height: 14px; margin-left: -2px; transform: translateY(-50%); border-radius: 2px; background: #fff; opacity: 0.85; z-index: 3; pointer-events: none; }
.bm-tip { position: absolute; bottom: calc(100% + 2.4rem); transform: translateX(-50%); max-width: 16rem; padding: 0.3rem 0.6rem; border-radius: 0.4rem; background: var(--panel-2); color: var(--text); font-size: 0.85rem; line-height: 1.3; white-space: normal; width: max-content; pointer-events: none; z-index: 4; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }

/* Desktop: the panel sits to the right and the video shrinks beside it. */
@media (min-width: 900px) {
  .episode.panel-open { grid-template-columns: minmax(0, 1fr) var(--panel-w); grid-template-areas: "player panel" "bar panel" "more panel"; grid-template-rows: auto auto 1fr; }
  .player-area { position: relative; } /* not sticky, but still anchors the resume banner */
  .side-panel { position: sticky; top: 0; height: calc(100dvh - var(--header-h)); border-top: 0; border-left: 1px solid var(--line); }
  .video-wrap video, .video-wrap .plyr { max-height: calc(100dvh - var(--header-h) - 7rem); }
  .episode-bar, .episode-more { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Phone in landscape: the video fills the screen; the panel overlays it when opened. */
@media (orientation: landscape) and (max-height: 500px) {
  .player-area { position: relative; } /* not sticky, but still anchors the resume banner */
  .video-wrap video, .video-wrap .plyr { height: 100dvh; max-height: 100dvh; }
  .side-panel { position: fixed; z-index: 20; top: 0; right: 0; bottom: 0; width: min(var(--panel-w), 50vw); height: auto; min-height: 0; border-left: 1px solid var(--line); }
}

/* --- Side panel: tabs, chat, bookmarks -------------------------------------------------- */

.tabs { display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem; border-bottom: 1px solid var(--line); }
.tabs [role="tab"] { background: transparent; border: 0; color: var(--muted); font-weight: 600; }
.tabs [role="tab"][aria-selected="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.tabs .panel-close { margin-left: auto; background: transparent; border: 0; color: var(--muted); font-size: 1.4rem; padding: 0 0.75rem; }
.tab-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

.chat-list { flex: 1; overflow-y: auto; padding: 0.75rem; overscroll-behavior: contain; }
.chat-empty { padding: 1.5rem 1rem; text-align: center; margin: 0; }
.chat-timing { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); background: var(--panel-2); font-size: 0.85rem; }
.chat-timing-buttons { display: flex; gap: 0.25rem; }
.chat-timing-buttons button { min-height: 2rem; padding: 0.15rem 0.55rem; font-size: 0.85rem; }
.thread { padding: 0.25rem 0; }
.replies { margin-left: 2.6rem; border-left: 2px solid var(--line); padding-left: 0.5rem; }
.msg { display: flex; gap: 0.6rem; padding: 0.4rem 0.25rem; }
.avatar { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.9rem; font-weight: 700; color: #fff; background: hsl(var(--hue) 45% 38%); }
.replies .avatar { width: 1.6rem; height: 1.6rem; font-size: 0.75rem; }
.msg-body { min-width: 0; flex: 1; }
.msg-head { font-size: 0.85rem; }
.sender { font-weight: 600; }
.msg-time { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 0.25rem; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.quote { margin: 0.2rem 0; padding: 0.2rem 0.6rem; border-left: 3px solid var(--line); color: var(--muted); white-space: pre-wrap; font-size: 0.9rem; }
.reactions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }
.reactions:empty { display: none; }
.reaction { min-height: 1.9rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-weight: 500; font-size: 0.9rem; }
.reaction[aria-expanded="true"] { border-color: var(--accent); }
.who { margin-top: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.pill { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); min-height: 2.5rem; border-radius: 999px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); }

.bookmark-list { list-style: none; margin: 0; padding: 0.75rem; overflow-y: auto; flex: 1; }
.bookmark { padding: 0.75rem; border-bottom: 1px solid var(--line); }
.bookmark p { margin: 0.25rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bookmark-time { min-height: 2.25rem; padding: 0.2rem 0.75rem; font-variant-numeric: tabular-nums; }
.bookmark-meta { font-size: 0.85rem; }
.bookmark-actions { display: flex; gap: 0.5rem; }
.bookmark-edit { display: grid; gap: 0.5rem; margin: 0.5rem 0; }

/* --- Bookmark popup and toast ----------------------------------------------------------- */

.popup { position: fixed; z-index: 30; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(26rem, calc(100vw - 2rem)); padding: 1rem; border-radius: 0.75rem; background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); }
.popup-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.popup-head h2 { margin: 0; font-size: 1rem; }
.popup .close { background: transparent; border: 0; color: var(--muted); font-size: 1.4rem; padding: 0 0.5rem; }
.popup textarea { margin: 0.75rem 0 0.5rem; }
.popup label.check { display: flex; gap: 0.5rem; align-items: center; color: var(--muted); font-size: 0.95rem; }
.popup label.check input { width: auto; min-height: 0; }
.popup-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.75rem; }

.toast { position: fixed; z-index: 40; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 0.75rem; align-items: center; max-width: calc(100vw - 2rem); padding: 0.6rem 0.75rem 0.6rem 1rem; border-radius: 0.6rem; background: var(--text); color: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.toast button { min-height: 2.25rem; padding: 0.2rem 0.8rem; }

/* --- Admin: pinned episode bar ----------------------------------------------------------- */

.editor-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; display: flex; align-items: center; gap: 0.5rem 0.75rem; margin: 0 -1rem 1rem; padding: 0.5rem 1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.editor-bar h1 { margin: 0; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.editor-bar .badge { margin-left: 0; flex: none; }
.editor-back { flex: none; text-decoration: none; white-space: nowrap; }
.editor-bar-actions { margin-left: auto; flex: none; display: flex; align-items: center; gap: 0.5rem; }
.editor-bar-actions form { margin: 0; }
/* Phones: date, badge and one button: Save while details are unsaved, otherwise Publish. */
@media (max-width: 640px) {
  .editor-bar .wide-only { display: none !important; }
  .editor-bar.is-dirty #bar-publish { display: none; }
}

/* --- Admin: links in the chat ----------------------------------------------------------- */

.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.link-row { padding: 0.75rem; border: 1px solid var(--line); border-radius: 0.5rem; display: grid; gap: 0.25rem; }
.link-meta { font-size: 0.85rem; overflow-wrap: anywhere; }
.link-url { overflow-wrap: anywhere; font-size: 0.9rem; }
.link-state { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.95rem; }
.link-actions { flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.link-actions select { width: auto; min-height: 2.25rem; padding: 0.3rem 0.5rem; border-radius: 0.5rem; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 0.9rem; }
.ok-text { color: var(--accent); }
.tag { display: inline-block; margin-left: 0.5rem; font-size: 0.75rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }

/* --- Summary and handouts ------------------------------------------------------------------ */

.resources { flex: 1 1 100%; }
.resources h2 { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.4rem; }
.resource-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; max-width: 44rem; }
.resource { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.5rem 0.75rem; min-height: 2.75rem; box-sizing: border-box; border-radius: 0.5rem; border: 1px solid transparent; color: var(--text); text-decoration: none; }
.resource:hover { background: var(--panel); border-color: var(--line); }
.resource-icon { flex: none; }
.resource-text { min-width: 0; display: flex; flex-wrap: wrap; gap: 0 0.75rem; align-items: baseline; }
.resource-name { overflow-wrap: anywhere; }
.resource.is-summary .resource-name { font-weight: 600; color: var(--accent); }
.resource-meta { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.watched-controls { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.watched-state { color: var(--accent); font-weight: 600; font-size: 0.95rem; }
.episode-footer { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.file-link { white-space: normal; }

/* Preview popover: a floating panel on wide screens, a full-height sheet on phones. Not modal,
   so the player underneath keeps playing and stays usable. */
.preview { position: fixed; z-index: 25; inset: 0; display: flex; flex-direction: column; background: var(--bg); padding-bottom: env(safe-area-inset-bottom); }
.preview[hidden] { display: none; }
.preview-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 1rem; padding-top: max(0.5rem, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--panel); }
.preview-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-zoom { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.preview-zoom button { min-width: 2.25rem; padding: 0.2rem 0.5rem; }
.preview .close { background: transparent; border: 0; color: var(--muted); font-size: 1.6rem; padding: 0 0.75rem; }
.preview-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: #2b2b30; }
.preview-loading { padding: 2rem; text-align: center; }
.pdf-pages { --zoom: 1; width: calc(var(--zoom) * (100% - 1.5rem)); margin: 0.75rem auto; display: grid; gap: 0.75rem; }
.pdf-page { width: 100%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.pdf-page canvas { display: block; width: 100%; height: auto; }
.preview-image { display: block; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; cursor: zoom-in; }
.preview-body:has(.preview-image) { display: flex; }
.preview-body.actual-size { display: block; }
.preview-body.actual-size .preview-image { max-width: none; max-height: none; cursor: zoom-out; }
.preview-card { max-width: 24rem; margin: 3rem auto; padding: 1.5rem; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 0.75rem; }
.preview-card-name { font-weight: 600; overflow-wrap: anywhere; }
.preview-resize { display: none; }
.preview-note { margin: 0; padding: 0.6rem 1rem; background: var(--panel-2); color: var(--text); font-size: 0.9rem; }

/* Printing a summary or handout: only the prepared pages print, one per sheet. */
#print-area { display: none; }
@media print {
  @page { margin: 0; }
  body > *:not(#print-area) { display: none !important; }
  body { background: #fff; }
  #print-area { display: block; }
  #print-area img { display: block; max-width: 100%; max-height: 100vh; margin: 0 auto; object-fit: contain; break-after: page; }
  #print-area img:last-child { break-after: auto; }
}
/* Narrow screens: name and × on the first line, the buttons on the second. */
@media (max-width: 600px) {
  .preview-head { flex-wrap: wrap; }
  .preview-head h2 { flex: 1 1 calc(100% - 4rem); }
  .preview-zoom { margin-right: auto; }
  .preview-head .close { order: -1; }
  .preview-head h2 { order: -2; }
}

@media (min-width: 900px) {
  .preview { inset: calc(var(--header-h) + 1rem) 1.5rem 1.5rem auto; width: var(--preview-w, min(52rem, 60vw)); max-width: calc(100vw - 3rem); border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); padding-bottom: 0; }
  .preview-head { padding-top: 0.5rem; }
  /* Drag the left edge to resize; a thin accent line shows on hover and while dragging. */
  .preview-resize { display: block; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 0.6rem; cursor: ew-resize; touch-action: none; }
  .preview-resize::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: 0; transition: opacity 0.15s; }
  .preview-resize:hover::after, .preview-resize:focus-visible::after, .preview-resizing .preview-resize::after { opacity: 1; }
  .preview-resize:focus-visible { outline: none; }
  .preview-resizing { cursor: ew-resize; user-select: none; }
  .preview-resizing .preview-body { pointer-events: none; }
}

/* --- My bookmarks page ------------------------------------------------------------------ */

.bookmark-group { margin-bottom: 1.5rem; }
.bookmark-group ul { list-style: none; padding: 0; margin: 0; }
.bookmark-group li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.bookmark-group li a.time { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.bookmark-group li span { white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- Admin ------------------------------------------------------------------------------ */

.admin-tabs { display: flex; gap: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.admin-tabs a { padding: 0.5rem 0; color: var(--muted); text-decoration: none; font-weight: 600; }
.admin-tabs a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.row.spread { justify-content: space-between; }
.row p { margin: 0; }
.stack > * + * { margin-top: 0.75rem; }
.card { margin-bottom: 1rem; }
.card h2 { margin: 0 0 0.75rem; }
.card label { display: block; }
.badge-live { color: var(--accent); border-color: var(--accent); }
/* Drafts must stand out wherever they appear (home cards, episode page, admin). */
.badge-draft { color: #fff; background: #e8326e; border-color: #e8326e; font-weight: 700; letter-spacing: 0.03em; }
.error-text { color: var(--error); }
.busy::before { content: ""; display: inline-block; width: 0.8rem; height: 0.8rem; margin-right: 0.5rem; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: spin 0.9s linear infinite; vertical-align: -0.1rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.slot.drop { border-color: var(--accent); border-style: dashed; }
.upload { display: grid; gap: 0.4rem; }
.upload-head { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.upload-name { overflow-wrap: anywhere; }
.upload-detail { margin: 0; font-size: 0.9rem; }
.upload .progress { margin-top: 0; height: 6px; }
.upload > button { justify-self: start; }
.file-list { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.file-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
/* Only the name wraps; the buttons keep their size however long the file name is. */
.file-row > :first-child { flex: 1 1 auto; min-width: 0; }
.file-row > :not(:first-child) { flex: none; }
.report ul { margin: 0.25rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
label.check { display: flex; gap: 0.5rem; align-items: center; }
label.check input { width: auto; min-height: 0; }
.danger { border-color: #4a2a26; }
.danger-button { background: var(--error); border-color: var(--error); color: #1a0806; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.grow { flex: 1; min-width: 14rem; }
.expiry { display: inline-block; margin-top: 0.3rem; font-size: 0.9rem; color: var(--muted); }
.expiry.urgent, .zoom-urgent { color: var(--accent); font-weight: 700; }
.file-row .file-state { display: block; font-size: 0.85rem; }
#import-notes ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }