/* EasyPodcast design system: tokens, app shell, sign-in, episodes, team, history.
   Tokens from the "EasyPodcast" design system (tokens.json): dark by default, light on
   <html data-theme="light"> (js/theme.js remembers the choice). Never hard-code a colour: add a token. */
:root {
    /* Dark theme (default). The light theme below overrides the colours only. */
    color-scheme: dark;
    --ground: #121316;
    --surface: #1B1C20;
    --surface-sunken: #17181B;
    --surface-muted: #24252A;
    --divider: #2A2B31;
    --border: #2E2F36;
    --border-strong: #4A4C55;
    --ink: #ECEBE7;
    --ink-soft: #C9CAD0;
    --ink-muted: #A3A5AD;
    --ink-faint: #5C5E66;
    --inverse: #0C0D0F;
    --inverse-raised: #1B1C20;
    --inverse-hover: #22232A;
    --inverse-active: #26272E;
    --inverse-border: #3A3B42;
    --on-inverse: #FFFFFF;
    --on-inverse-soft: #C9CAD0;
    --on-inverse-muted: #A3A5AD;
    --on-inverse-ok: #7FD19B;
    --on-inverse-error: #FFB4A8;
    --on-inverse-violet: #C4B5FD;
    /* Solid buttons and pills (play, pressed chip, step pill): the strongest contrast with the surface */
    --solid: #ECEBE7;
    --solid-hover: #FFFFFF;
    --on-solid: #121316;
    --accent: #C2410C;
    --accent-strong: #A3370A;
    --on-accent: #FFFFFF;
    --accent-link: #F7A072;
    --accent-link-hover: #FFC4A0;
    --accent-on-inverse: #F7B28A;
    --accent-bright: #F08A4B;
    --danger: #B42318;
    --danger-strong: #8F1C13;
    --danger-text: #FF8A7A;
    --danger-bg: #3A1A18;
    --keep: #7FD49A;
    --keep-border: #4FAF73;
    --on-keep: #0C0D0F;
    --status-imported-bg: #2A2B31;
    --status-imported-fg: #C9CAD0;
    --status-transcribed-bg: #1E2A44;
    --status-transcribed-fg: #9DBBF5;
    --status-editing-bg: #3A2A12;
    --status-editing-fg: #F5B97A;
    --status-exported-bg: #123A35;
    --status-exported-fg: #6FD6C2;
    --status-published-bg: #ECEBE7;
    --status-published-fg: #121316;
    --status-archived-bg: #2D2545;
    --status-archived-fg: #C4B5FD;
    --swatch-border: rgba(255, 255, 255, 0.18);
    --scrim: rgba(27, 28, 32, 0.88);
    /* Editor: zones (transcription and badges), waveforms, tracks, meters */
    --zone-hesitation: #4A3F1A;
    --zone-filler: #4A2A16;
    --zone-silence: #163A42;
    --zone-offtopic: #4F3214;
    --zone-manual: #1C3A26;
    --zone-overlap: #4A2032;
    --zone-cut: rgba(240, 90, 100, 0.55);
    --zone-muted: rgba(150, 155, 165, 0.5);
    --zone-muted-gap: rgba(0, 0, 0, 0.35);
    --zone-has-mutes: #8A8E98;
    /* Regions drawn over the waveform: brighter hues, see-through, so the wave stays readable */
    --region-silence: rgba(80, 180, 200, 0.28);
    --region-hesitation: rgba(230, 190, 60, 0.32);
    --region-filler: rgba(240, 138, 75, 0.42);
    --region-offtopic-rgb: 240, 150, 60;
    --region-offtopic-alpha: 0.18;
    --region-offtopic-alpha-range: 0.3;
    --region-overlap: rgba(240, 101, 149, 0.3);
    --region-manual: rgba(90, 200, 120, 0.28);
    --wave: #565964;
    --wave-progress: #F08A4B;
    --playhead: #F08A4B;
    --track-1: #F5B97A; --track-2: #9DBBF5; --track-3: #6FD6C2; --track-4: #D98BE6;
    --track-5: #F28C8C; --track-6: #66C7D9; --track-7: #A99BF0; --track-8: #F07FA8;
    --solo: #FFC107;
    --on-solo: #1A1B1F;
    --progress-track: #3A2A20;
    --meter-track: #2A2B31;
    --meter-ok: #2FA58F;
    --meter-ok-high: #3FBFA6;
    --meter-warn: #D4A12A;
    --meter-clip: #B42318;
    --meter-clip-low: #D8452B;
    --meter-avg: #60A5FA;
    --meter-avg-text: #93C5FD;
    --meter-avg-ring: #121316;
    --mark-credits: #A78BFA;
    --thumb-ground: #0C0D0F;
    --thumb-slot: #26272E;
    --font-sans: Inter, system-ui, sans-serif;
    --font-display: "Space Grotesk", Inter, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
    --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;
    --target-min: 44px;
    --sidebar-width: 240px;
}
:root[data-theme="light"] {
    color-scheme: light;
    --ground: #F6F5F2;
    --surface: #FFFFFF;
    --surface-sunken: #FBFAF8;
    --surface-muted: #F1F0EC;
    --divider: #ECEAE4;
    --border: #E4E2DC;
    --border-strong: #CFCDC6;
    --ink: #1A1B1F;
    --ink-soft: #3F4148;
    --ink-muted: #5C5E66;
    --ink-faint: #B9B7B0;
    --inverse: #1A1B1F;
    --inverse-raised: #24252B;
    --inverse-hover: #2A2B31;
    --inverse-active: #2E2F36;
    --solid: #1A1B1F;
    --solid-hover: #2A2B31;
    --on-solid: #FFFFFF;
    --accent-strong: #8A2D07;
    --accent-link: #B03A0A;
    --accent-link-hover: #8A2D07;
    --danger-text: #B42318;
    --danger-bg: #FDE8E6;
    --keep: #1F5C35;
    --keep-border: #2F7D4A;
    --on-keep: #FFFFFF;
    --status-imported-bg: #ECEBE7;
    --status-imported-fg: #3F4148;
    --status-transcribed-bg: #DCE8FB;
    --status-transcribed-fg: #1D3F8F;
    --status-editing-bg: #FDECC8;
    --status-editing-fg: #8A3D06;
    --status-exported-bg: #D3F1EA;
    --status-exported-fg: #0F5048;
    --status-published-bg: #1A1B1F;
    --status-published-fg: #FFFFFF;
    --status-archived-bg: #E7E1F5;
    --status-archived-fg: #4A3A7A;
    --swatch-border: rgba(0, 0, 0, 0.15);
    --scrim: rgba(255, 255, 255, 0.88);
    --zone-hesitation: #FFF3CD;
    --zone-filler: #FFE0CC;
    --zone-silence: #D1ECF1;
    --zone-offtopic: #FFD8A8;
    --zone-manual: #D4EDDA;
    --zone-overlap: #F8C3D5;
    --zone-cut: rgba(220, 53, 69, 0.45);
    --zone-muted: rgba(73, 80, 87, 0.55);
    --zone-muted-gap: rgba(255, 255, 255, 0.6);
    --zone-has-mutes: #495057;
    --region-silence: rgba(209, 236, 241, 0.5);
    --region-hesitation: rgba(255, 220, 110, 0.6);
    --region-filler: rgba(255, 196, 160, 0.75);
    --region-offtopic-rgb: 255, 216, 168;
    --region-offtopic-alpha: 0.3;
    --region-offtopic-alpha-range: 0.4;
    --region-overlap: rgba(240, 101, 149, 0.35);
    --region-manual: rgba(212, 237, 218, 0.6);
    --wave: #CFCDC6;
    --wave-progress: #8A3D06;
    --playhead: #C2410C;
    --track-1: #8A3D06; --track-2: #1D3F8F; --track-3: #0F5048; --track-4: #AE3EC9;
    --track-5: #C92A2A; --track-6: #0B7285; --track-7: #5F3DC4; --track-8: #A61E4D;
    --progress-track: #F3D3C0;
    --meter-track: #E6E4DE;
    --meter-ok: #2F7D4A;
    --meter-ok-high: #3E9B5C;
    --meter-warn: #E0A526;
    --meter-avg: #2563EB;
    --meter-avg-text: #1D4ED8;
    --meter-avg-ring: #FFFFFF;
    --mark-credits: #7C3AED;
    --thumb-ground: #15161A;
    --thumb-slot: #2E2F36;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font: 400 15px/1.5 var(--font-sans);
    color: var(--ink);
    background: var(--ground);
}
a { color: var(--accent-link); }
a:hover { color: var(--accent-link-hover); }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
h1 { font-size: 32px; line-height: 1.2; font-weight: 700; }
h2 { font-size: 20px; line-height: 1.3; font-weight: 600; }
.hidden { display: none !important; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.caption { font-size: 13px; line-height: 1.4; color: var(--ink-muted); }
.overline {
    font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted);
}

/* Buttons: one accent button per visible zone */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--target-min); padding: 0 18px; border-radius: var(--radius-md);
    font: 600 15px var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
}
.btn:hover { border-color: var(--ink-muted); color: var(--ink); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.btn-block { width: 100%; min-height: 48px; font-size: 16px; }
.btn-text {
    min-height: 40px; padding: 0 12px; border: 0; background: transparent; color: var(--ink);
    font: 600 14px var(--font-sans); cursor: pointer; border-radius: var(--radius-md); white-space: nowrap;
}
.btn-text:hover { background: var(--surface-muted); }
.btn-text.danger { color: var(--accent-link); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.field input, .field select, .select {
    min-height: var(--target-min); padding: 0 14px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-md); font: 400 15px var(--font-sans); background: var(--surface); color: var(--ink);
}
.field input, .field select { min-width: 0; max-width: 100%; }
.field input[type="file"] { padding: 9px 10px; }
.field .hint { font-weight: 400; font-size: 13px; color: var(--ink-muted); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 32px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.form-error {
    margin: 0; padding: 10px 14px; border-radius: var(--radius-md); background: var(--danger-bg); color: var(--danger-text);
    font-size: 14px; font-weight: 500;
}
.notice {
    margin: 0; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface-muted);
    color: var(--ink-soft); font-size: 14px;
}

/* Cards, pills, avatars */
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5);
}
.pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill);
    font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--status-imported-bg); color: var(--status-imported-fg);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill .dot.ring { background: transparent; border: 2px solid currentColor; }
.pill-owner { background: var(--solid); color: var(--on-solid); }
.pill-transcribed { background: var(--status-transcribed-bg); color: var(--status-transcribed-fg); }
.pill-editing { background: var(--status-editing-bg); color: var(--status-editing-fg); }
.pill-exported { background: var(--status-exported-bg); color: var(--status-exported-fg); }
.pill-error { background: var(--danger-bg); color: var(--danger-text); }
.pill-published { background: var(--status-published-bg); color: var(--status-published-fg); }
.avatar {
    flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; font-weight: 700; background: var(--status-imported-bg); color: var(--status-imported-fg);
}
.avatar.c0 { background: var(--status-editing-bg); color: var(--status-editing-fg); }
.avatar.c1 { background: var(--status-transcribed-bg); color: var(--status-transcribed-fg); }
.avatar.c2 { background: var(--status-exported-bg); color: var(--status-exported-fg); }
.avatar.pending { background: transparent; border: 2px dashed var(--ink-muted); }

/* Logo: temporary wordmark */
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
    width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.logo-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; }

/* ---------------------------------------------------------------- Sign-in */
.auth { display: flex; flex-wrap: wrap; min-height: 100vh; }
.auth-main {
    flex: 1 1 520px; min-width: 0; padding: 48px 40px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.auth-panel, .auth-panel > section { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 28px; }
.auth-panel > section.hidden { display: none; }
.auth-panel .logo-mark { width: 36px; height: 36px; border-radius: 9px; }
.auth-panel .logo-name { font-size: 22px; }
.auth-panel h1 { font-size: 30px; margin-bottom: 6px; }
.auth-panel p.lead { margin: 0; color: var(--ink-muted); }
.auth-panel form { display: flex; flex-direction: column; gap: 16px; }
.auth-panel .switch { margin: 0; font-size: 14px; color: var(--ink-muted); }
.auth-side {
    flex: 1 1 520px; min-width: 0; background: var(--inverse); color: var(--on-inverse);
    padding: 48px 40px; display: flex; flex-direction: column; justify-content: center;
}
.auth-side > div { width: 100%; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.auth-side .overline { color: var(--accent-on-inverse); }
.auth-side h2 { font-size: 28px; }
.auth-side p { margin: 0; color: var(--on-inverse-soft); }
.auth-side ul { margin: 0; padding-left: 20px; color: var(--on-inverse-soft); display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------------- Shell */
.shell { display: flex; flex-wrap: wrap; min-height: 100vh; }
.sidebar {
    flex: 1 1 var(--sidebar-width); max-width: 100%; background: var(--inverse); padding: 20px 14px;
    display: flex; flex-direction: column; gap: 20px; color: var(--on-inverse);
}
@media (min-width: 900px) {
    .sidebar { flex: 0 0 var(--sidebar-width); min-width: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.sidebar .logo { padding: 0 8px; }
.show-switch {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 8px 12px;
    border-radius: 10px; border: 1px solid var(--inverse-border); background: var(--inverse-raised);
    color: var(--on-inverse); text-align: left; cursor: pointer; font-family: inherit; text-decoration: none;
}
.show-switch:hover { color: var(--on-inverse); border-color: var(--on-inverse-muted); }
.show-switch .label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.show-switch .label span:first-child { font-size: 12px; color: var(--on-inverse-muted); }
.show-switch .label span:last-child { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-links { display: flex; flex-direction: column; gap: 4px; }
.nav {
    display: flex; align-items: center; gap: 12px; min-height: var(--target-min); padding: 0 12px;
    border-radius: var(--radius-md); color: var(--on-inverse-soft); text-decoration: none; font-size: 15px; font-weight: 500;
}
.nav:hover { background: var(--inverse-hover); color: var(--on-inverse); }
.nav[aria-current="page"] { background: var(--inverse-active); color: var(--on-inverse); }
.sidebar-user {
    margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 0;
    border-top: 1px solid var(--inverse-active);
}
.sidebar-user .who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sidebar-user .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user .who span:first-child { font-size: 14px; font-weight: 600; }
.sidebar-user .who span:last-child { font-size: 12px; color: var(--on-inverse-muted); }
.sidebar-user button {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px;
    min-height: 40px; padding: 0; border: 1px solid var(--inverse-border); border-radius: var(--radius-md);
    background: transparent; color: var(--on-inverse-soft); font: 500 13px var(--font-sans); cursor: pointer;
}
.sidebar-user button:hover { color: var(--on-inverse); border-color: var(--on-inverse-muted); }

/* Light / dark switch (js/theme.js): shows the sun in dark mode, the moon in light mode */
.theme-toggle svg { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun, :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
.auth-main { position: relative; }
.theme-toggle.on-surface {
    position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; justify-content: center;
    width: var(--target-min); height: var(--target-min); padding: 0; border: 1px solid var(--border-strong);
    border-radius: var(--radius-md); background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.theme-toggle.on-surface:hover { color: var(--ink); border-color: var(--ink-muted); }

.content {
    flex: 999 1 560px; min-width: 0; padding: var(--space-8) var(--space-10);
    display: flex; flex-direction: column; gap: var(--space-6);
}
@media (max-width: 600px) { .content { padding: var(--space-6) var(--space-4); } }
.view { display: flex; flex-direction: column; gap: var(--space-6); }
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-header p { margin: 0 0 4px; color: var(--ink-muted); font-size: 14px; }
.columns { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.columns > .main-col { flex: 2 1 560px; min-width: 0; }
.columns > .side-col { flex: 1 1 320px; min-width: 0; }

/* Tables */
.table-card { padding: 0; overflow: hidden; }
.table-card h2 { padding: 16px 16px 8px; }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data td, table.data th { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--divider); font-size: 14px; }
table.data th { font-size: 12px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr.pending { background: var(--surface-sunken); }
table.data .person { display: flex; align-items: center; gap: 12px; }
table.data .person .name { font-weight: 600; }
table.data .muted, .muted { color: var(--ink-muted); }
table.data select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font: 14px var(--font-sans); background: var(--surface); color: var(--ink); }

/* ---------------------------------------------------------------- Dashboard */
.stage-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.stage-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink); text-decoration: none; cursor: pointer;
}
.stage-card .pill { align-self: flex-start; }
.stage-card .count { font: 700 30px/1.1 var(--font-display); }
.stage-card:hover, .stage-card.selected { border-color: var(--ink); color: var(--ink); }
.stage-card.selected { box-shadow: inset 0 0 0 1px var(--ink); }
.stage-card.soon { cursor: default; background: var(--surface-sunken); }
.stage-card.soon:hover { border-color: var(--border); }
.stage-card.soon .count { color: var(--ink-muted); }
.dash-main { display: flex; flex-direction: column; gap: var(--space-6); }
.shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.shortcut {
    background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 18px; text-decoration: none; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
a.shortcut:hover { border-color: var(--ink-muted); color: var(--ink); }
.shortcut .overline.ok { color: var(--status-exported-fg); }
.shortcut .title { font-size: 16px; font-weight: 600; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.shortcut a.title:hover { text-decoration: underline; }
.shortcut .link { font-size: 14px; font-weight: 600; color: var(--accent-link); margin-top: auto; }
.shortcut.dark { background: var(--inverse); border-color: var(--inverse); color: var(--on-inverse); }
.shortcut.dark:hover { color: var(--on-inverse); border-color: var(--inverse-border); }
.shortcut.dark .overline { color: var(--accent-on-inverse); }
.shortcut.dark .caption { color: var(--on-inverse-soft); }
.shortcut .bar { height: 6px; border-radius: 3px; background: var(--inverse-border); display: block; overflow: hidden; }
.shortcut .bar span { display: block; height: 100%; border-radius: 3px; background: var(--accent-bright); }
.table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 8px; }
.table-card .table-head h2 { padding: 0; }
.table-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.table-tools .select { min-height: 40px; font-size: 14px; }
.search {
    display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-md); color: var(--ink-muted); background: var(--surface);
}
.search input { border: 0; outline: none; font: 14px var(--font-sans); width: 180px; background: transparent; color: var(--ink); }
.search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.stage-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.job-line { font-size: 13px; color: var(--ink-muted); }
.job-line.error { color: var(--danger-text); font-weight: 500; }
table.data td.nowrap { white-space: nowrap; }
table.data td.row-action a { font-weight: 600; white-space: nowrap; }
.dash-activity { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.aside-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aside-head a { font-size: 14px; font-weight: 600; }
.dash-activity ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.dash-activity li { display: flex; gap: 12px; font-size: 14px; line-height: 1.45; min-width: 0; }
.dash-activity li > div { min-width: 0; overflow-wrap: anywhere; }
.dash-activity li a { font-weight: 600; }
.dash-activity .avatar { width: 32px; height: 32px; font-size: 14px; }
.avatar.system { background: var(--surface-muted); color: var(--ink-muted); }

/* ---------------------------------------------------------------- Show picker */
.show-list { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.show-item {
    display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--ink); cursor: pointer;
    font: inherit; text-align: left; width: 100%;
}
.show-item:hover { border-color: var(--accent); color: var(--ink); }
.show-item .initials {
    width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; background: var(--status-editing-bg); color: var(--status-editing-fg);
}
.show-item .text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.show-item .text span:first-child { font-weight: 600; }
.show-item .text span:last-child { font-size: 13px; color: var(--ink-muted); }

/* ---------------------------------------------------------------- Episodes */
.import-form { display: flex; flex-direction: column; gap: 14px; }
.import-form .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.import-form .row .field { flex: 1 1 240px; }
#upload-progress { display: flex; align-items: center; gap: 8px; font-size: 14px; }
#upload-progress progress { flex: 1; accent-color: var(--accent); }
#projects-list { display: flex; flex-direction: column; }
.project-card {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 16px;
    border-bottom: 1px solid var(--divider);
}
.project-card:last-child { border-bottom: 0; }
.project-main { flex: 1 1 260px; min-width: 0; }
.project-name { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 15px; }
.project-name:hover { color: var(--accent-link); text-decoration: underline; }
.project-meta { font-size: 13px; color: var(--ink-muted); }
.projects-empty { margin: 0; padding: 20px 16px; color: var(--ink-muted); }

/* ---------------------------------------------------------------- Team */
.invite-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.invite-form .field:first-child { flex: 1 1 320px; }
.invite-form .field:nth-child(2) { flex: 0 1 200px; }
.invite-link {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; border-radius: var(--radius-md);
    background: var(--surface-muted);
}
.invite-link code { flex: 1 1 300px; font: 13px var(--font-mono); word-break: break-all; }
.roles-table td:not(:first-child), .roles-table th:not(:first-child) { text-align: center; padding-left: 8px; padding-right: 8px; }

/* ---------------------------------------------------------------- History */
.filters { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.filters select { min-width: 160px; min-height: 42px; color: var(--ink); }
.filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.filters legend { font-size: 13px; font-weight: 600; color: var(--ink-muted); padding: 0; margin-bottom: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    min-height: 42px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--ink); font: 500 14px var(--font-sans); cursor: pointer;
}
.chip[aria-pressed="true"] { border-color: var(--solid); background: var(--solid); color: var(--on-solid); font-weight: 600; }
.history { padding: 8px 20px 20px; display: flex; flex-direction: column; }
.history h2.day { margin: 16px 0 8px; font: 700 13px var(--font-sans); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }
.history ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.activity-item {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--divider);
}
.activity-item .time { width: 56px; font-size: 13px; color: var(--ink-muted); padding-top: 6px; font-family: var(--font-mono); }
.activity-item .icon {
    flex: none; width: 32px; height: 32px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
}
.activity-item .text { flex: 1 1 360px; min-width: 0; font-size: 15px; line-height: 1.5; }
.activity-item .text a { font-weight: 600; }
.activity-item .text .detail { font-size: 13px; color: var(--ink-muted); }
.activity-item .side { display: flex; gap: 8px; align-items: center; }
.activity-item .side a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; font-weight: 600; font-size: 13px; }
.cat-import { background: var(--status-imported-bg); color: var(--status-imported-fg); }
.cat-editing { background: var(--status-editing-bg); color: var(--status-editing-fg); }
.cat-transcription { background: var(--status-transcribed-bg); color: var(--status-transcribed-fg); }
.cat-export { background: var(--status-exported-bg); color: var(--status-exported-fg); }
.cat-publication { background: var(--solid); color: var(--on-solid); }
.cat-team { background: var(--surface-muted); color: var(--ink-soft); }
.cat-archive { background: var(--status-archived-bg); color: var(--status-archived-fg); }
.history-empty { margin: 16px 0 0; color: var(--ink-muted); }
#history-more { align-self: center; margin-top: 16px; }

/* The editor (and its read-only mode for viewers) is styled by css/editor.css */

/* ---------------------------------------------------------------- Publication */
.pub-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.pub-card { display: flex; flex-direction: column; gap: 14px; }
.pub-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pub-card-head .caption { margin: 4px 0 0; }
.pub-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pub-title-row h1 { font-size: 30px; }
.pub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pub-actions.pub-grow > * { flex: 1 1 140px; }
.pub-row { display: flex; flex-wrap: wrap; gap: 12px; }
.pub-row .field { flex: 1 1 120px; }
.pub-card textarea, .pub-chapters input {
    padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    font: 400 15px/1.5 var(--font-sans); color: var(--ink); background: var(--surface); resize: vertical;
}
.pub-card textarea:disabled, .pub-card input:disabled, .pub-card select:disabled { background: var(--surface-sunken); color: var(--ink-soft); }
.pub-info { display: flex; flex-wrap: wrap; gap: 20px; }
.pub-cover-col { flex: none; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 168px; }
.pub-cover {
    width: 168px; height: 168px; border-radius: 10px; background: var(--inverse-hover); color: var(--on-inverse-soft);
    display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; overflow: hidden;
}
.pub-cover img, .pub-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-cover.busy, .pub-thumb-img.busy { opacity: .5; }
.pub-fields { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pub-file { position: relative; overflow: hidden; }
.pub-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.pub-file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.pub-chapters { list-style: none; margin: 0; padding: 0; border: 1px solid var(--divider); border-radius: var(--radius-md); }
.pub-chapters:empty { display: none; }
.pub-chapters li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--divider); }
.pub-chapters li:last-child { border-bottom: 0; }
.pub-chapters .pub-time { width: 88px; font: 600 14px var(--font-mono); color: var(--ink-soft); padding: 8px; }
.pub-chapters .pub-time.invalid { border-color: var(--danger); }
.pub-chapters .pub-chapter-title { flex: 1; min-width: 0; padding: 8px 10px; }
.pub-add { align-self: flex-start; color: var(--accent-link); padding: 0 4px; }
.pub-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.pub-checks li { display: flex; gap: 10px; align-items: flex-start; }
.pub-check-icon {
    flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font: 700 12px var(--font-sans); background: var(--status-imported-bg); color: var(--status-imported-fg);
}
.pub-checks li.error .pub-check-icon { background: var(--danger-bg); color: var(--danger-text); }
.pub-checks li.error { color: var(--danger-text); }
.pub-checks li.ok .pub-check-icon { background: var(--status-exported-bg); color: var(--status-exported-fg); }
.pub-file-box {
    display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px;
}
.pub-file-box.selected { border: 2px solid var(--ink); }
.pub-file-text { display: flex; flex-direction: column; gap: 2px; }
.pub-progress { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pub-progress progress { flex: 1; accent-color: var(--accent); }
.pub-thumb { display: flex; gap: 12px; align-items: center; }
.pub-thumb-img {
    flex: none; width: 128px; height: 72px; border-radius: var(--radius-sm); background: var(--surface-muted);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pub-thumb-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pub-thumb-actions .btn-text { padding: 0 4px; min-height: 32px; color: var(--accent-link); }
.pub-done { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px; background: var(--status-exported-bg); }
.pub-done a { font-weight: 600; font-size: 14px; }
.caption.warn { color: var(--status-editing-fg); }
.pub-steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
a.btn.disabled { opacity: .55; pointer-events: none; }
.pub-ep { display: flex; align-items: center; gap: 12px; }
.pub-ep-cover { flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; }
.pub-ep-cover.empty { background: var(--surface-muted); }
.pub-uris { display: flex; flex-direction: column; gap: 6px; }
.pub-form { display: flex; flex-direction: column; gap: 12px; }
.pub-guide summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent-link); }
.pub-guide ol { margin: 10px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); display: flex; flex-direction: column; gap: 6px; }
.pub-guide code { font: 13px var(--font-mono); background: var(--surface-muted); padding: 1px 4px; border-radius: 4px; }
.notice.form-error { background: var(--danger-bg); color: var(--danger-text); }
a.btn-text { display: inline-flex; align-items: center; text-decoration: none; color: var(--accent-link); }

/* Miniatures (thumbnails from the PSD templates) */
.mini-intro { max-width: 900px; margin: 0; }
.mini-ep-thumb { width: 96px; height: 54px; border-radius: var(--radius-sm); object-fit: cover; flex: none; background: var(--surface-muted); display: block; }
.mini-new-set { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: var(--space-5); }
.mini-new-set .field { flex: 1 1 260px; }
.mini-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: start; }
.mini-slot, .mini-figure { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mini-slot figcaption, .mini-figure figcaption { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-size: 14px; }
.mini-slot-img, .mini-img {
    width: 100%; border-radius: var(--radius-md); background: var(--surface-muted); overflow: hidden;
    display: flex; align-items: center; justify-content: center; text-align: center; padding: 0;
}
.mini-slot-img img, .mini-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.r-youtube { aspect-ratio: 16 / 9; }
.r-story { aspect-ratio: 9 / 16; max-height: 420px; }
.r-post { aspect-ratio: 1 / 1; }
.mini-slot-img.busy, .mini-img.busy, .mini-film.busy { opacity: .5; }
.mini-warnings { margin: 0; padding-left: 18px; font-size: 13px; color: var(--danger-text); }
.mini-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; border: 1px solid var(--swatch-border); }
.mini-fonts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mini-fonts.warn { background: var(--status-editing-bg); color: var(--status-editing-fg); }
.mini-form h2 { margin: 0; }
.mini-form .mini-number { flex: 0 1 120px; }
.mini-form .mini-title { flex: 1 1 200px; }
.mini-film {
    display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--border-strong);
    border-radius: 10px; cursor: pointer; font-weight: 400;
}
.mini-film-img {
    flex: none; width: 96px; height: 64px; border-radius: var(--radius-sm); background: var(--inverse-active); color: var(--on-inverse-muted);
    font-size: 11px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mini-film-img img { width: 100%; height: 100%; object-fit: cover; }
.mini-film-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.mini-film-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-grid { display: grid; grid-template-columns: 1.6fr .75fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .mini-grid { grid-template-columns: 1fr; } .r-story { max-height: 520px; } }
.mini-figure-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; width: 100%; }
.mini-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.mini-outdated { color: var(--status-editing-fg); }
.mini-warn { color: var(--danger-text); }
.mini-focus { position: relative; display: block; width: 100%; border-radius: var(--radius-md); overflow: hidden; cursor: crosshair; background: var(--inverse-active); line-height: 0; }
.mini-focus.readonly { cursor: default; }
.mini-focus:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mini-focus img { width: 100%; height: auto; display: block; }
.mini-focus-frames { position: absolute; inset: 0; pointer-events: none; }
.mini-focus-frame { position: absolute; box-sizing: border-box; border: 2px dashed; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.mini-focus-frame span { position: absolute; left: 0; top: 0; padding: 1px 5px; font: 600 10px/1.4 var(--font-sans); color: #1A1B1F; white-space: nowrap; }
.mini-focus-dot {
    position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
    border: 3px solid #FFFFFF; box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(0, 0, 0, .35);
}
.mini-focus-frame.f-story span { top: auto; bottom: 0; }
.mini-focus-frame.f-post span { left: auto; right: 0; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.btn.danger:hover:not(:disabled) { background: var(--danger-strong); border-color: var(--danger-strong); color: var(--on-accent); }
#pub-archive .check { align-items: flex-start; line-height: 1.4; }
#pub-archive .check input { flex: none; margin-top: 2px; }
#pub-archive .spinner { display: inline-block; vertical-align: -3px; }