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

/* ===== Base — fill the viewport ===== */
html, body { margin: 0; height: 100%; }
body { background: oklch(0.962 0.012 86); font-family: "Spectral", Georgia, serif; }
#root { min-height: 100vh; }

/* ============================================================
   1) club-app.css — app chrome (nav, landing, library, modal)
   ============================================================ */

/* ChessCast — full app chrome in THE CHESS CLUB direction.
   Editorial: warm paper, ink, felt-green. Shared tokens on .cc-app so the
   board primitives + every screen reskin consistently. */
.cc-app {
  --paper: oklch(0.962 0.012 86);
  --paper2: oklch(0.945 0.014 86);
  --card: oklch(0.992 0.004 86);
  --ink: oklch(0.245 0.014 62);
  --dim: oklch(0.50 0.018 66);
  --line: oklch(0.855 0.013 84);
  --line2: oklch(0.78 0.015 84);
  --felt: oklch(0.43 0.068 156);
  --ox: oklch(0.46 0.13 28);
  --txt: var(--ink);
  --good: oklch(0.46 0.08 156); --blunder: var(--ox); --threat: oklch(0.55 0.10 70); --main: var(--felt);
  --on-main: oklch(0.97 0.01 90);
  --sq-light: oklch(0.915 0.022 96); --sq-dark: oklch(0.56 0.058 154);
  --pc-white: oklch(0.985 0.006 90); --pc-black: oklch(0.22 0.012 60);
  --pc-white-edge: 1.3px oklch(0.42 0.02 60 / .85); --pc-black-edge: .6px rgba(0,0,0,.35);
  --hl: oklch(0.55 0.10 70 / .40); --hl-blend: multiply;
  --eval-white: oklch(0.985 0.006 90); --eval-black: oklch(0.30 0.02 60);
  --coord: oklch(0.40 0.04 120);
  --adv-fill: oklch(0.43 0.068 156 / .12); --adv-line: oklch(0.43 0.068 156);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --note-bg: oklch(0.93 0.018 90); --board-radius: 3px;

  font-family: "Spectral", Georgia, serif;
  color: var(--ink); background: var(--paper);
  min-height: 100vh;
}
.cc-app * { box-sizing: border-box; }
.cc-mono { font-family: var(--mono); }

/* ---- top nav (landing + library) ---- */
.ca-nav { display: flex; align-items: center; gap: 22px; padding: 18px 30px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30; background: color-mix(in oklch, var(--paper), transparent 8%); backdrop-filter: blur(8px); }
.ca-brand { display: flex; align-items: baseline; gap: 9px; cursor: pointer; }
.ca-brand .mk { font-size: 22px; color: var(--felt); }
.ca-brand b { font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.ca-brand small { font-family: var(--mono); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
.ca-navlinks { display: flex; gap: 4px; margin-left: 8px; }
.ca-navlinks a { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  text-decoration: none; padding: 7px 12px; border-radius: 6px; cursor: pointer; }
.ca-navlinks a:hover { color: var(--ink); background: var(--paper2); }
.ca-navlinks a.on { color: var(--felt); }
.ca-spacer { flex: 1; }
.ca-btn { font-family: "Spectral"; font-size: 14px; font-weight: 600; border: 1.5px solid var(--ink); background: var(--ink);
  color: var(--paper); border-radius: 8px; padding: 9px 16px; cursor: pointer; white-space: nowrap; }
.ca-btn:hover { background: var(--felt); border-color: var(--felt); }
.ca-btn.ghost { background: transparent; color: var(--ink); }
.ca-btn.ghost:hover { background: var(--paper2); color: var(--ink); border-color: var(--line2); }

/* ---- landing ---- */
.ca-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 64px 30px 56px; }
@media (max-width: 860px) { .ca-hero { grid-template-columns: 1fr; padding: 40px 22px; gap: 32px; } }
.ca-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--felt); margin-bottom: 18px; }
.ca-h1 { font-weight: 700; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.ca-h1 em { font-style: italic; color: var(--felt); }
.ca-lede { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.55; color: var(--dim); margin: 22px 0 30px; max-width: 30em; }
.ca-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.ca-cta .ca-btn { font-size: 15px; padding: 12px 20px; }
.ca-sample { display: inline-block; margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: var(--felt); text-decoration: none; cursor: pointer; }
.ca-sample:hover { text-decoration: underline; }
.ca-trust { margin-top: 26px; font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: .04em; display: flex; gap: 18px; flex-wrap: wrap; }
.ca-trust b { color: var(--ink); }

.ca-herocard { background: var(--card); border: 1px solid var(--ink); box-shadow: 10px 12px 0 oklch(0.43 0.068 156 / .12); padding: 18px; }
.ca-herocard .top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--dim); margin-bottom: 12px; }
.ca-herocard .top .pill { color: var(--ox); border: 1px solid currentColor; border-radius: 2px; padding: 2px 7px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.ca-herocard .stage { display: grid; grid-template-columns: 12px 1fr; gap: 10px; }
.ca-herocap { margin-top: 12px; font-style: italic; font-size: 13.5px; color: var(--ink); display: flex; gap: 8px; align-items: baseline; }
.ca-herowave { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ca-hostmini { display: flex; align-items: center; gap: 8px; }
.ca-hostmini .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 10px; border: 1.5px solid var(--hc); color: var(--hc); }
.ca-hostmini span { font-size: 12px; font-weight: 600; }

/* sections */
.ca-section { max-width: 1180px; margin: 0 auto; padding: 30px 30px 60px; }
.ca-rule { max-width: 1180px; margin: 0 auto; height: 1px; background: var(--line); }
.ca-sectitle { display: flex; align-items: baseline; gap: 12px; margin-bottom: 28px; }
.ca-sectitle .n { font-family: var(--mono); font-size: 12px; color: var(--felt); }
.ca-sectitle h2 { font-weight: 700; font-size: 28px; letter-spacing: -.01em; margin: 0; }
.ca-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 760px) { .ca-steps { grid-template-columns: 1fr; gap: 18px; } }
.ca-step .sn { font-family: var(--mono); font-size: 13px; color: var(--felt); border-top: 2px solid var(--felt); padding-top: 12px; display: inline-block; }
.ca-step h3 { font-weight: 600; font-size: 19px; margin: 12px 0 8px; }
.ca-step p { font-size: 14.5px; line-height: 1.55; color: var(--dim); margin: 0; }

.ca-shows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .ca-shows { grid-template-columns: 1fr; } }
.ca-showcard { border: 1px solid var(--line); background: var(--card); padding: 22px; transition: .2s; cursor: pointer; }
.ca-showcard:hover { border-color: var(--shc); transform: translateY(-3px); box-shadow: 6px 8px 0 color-mix(in oklch, var(--shc), transparent 84%); }
.ca-showcard .gl { font-size: 26px; color: var(--shc); }
.ca-showcard h3 { font-weight: 700; font-size: 21px; margin: 8px 0 2px; }
.ca-showcard .tg { font-style: italic; color: var(--shc); font-size: 13.5px; }
.ca-showcard p { font-size: 13px; line-height: 1.5; color: var(--dim); margin: 12px 0 14px; }
.ca-showcard .hh { font-family: var(--mono); font-size: 11px; color: var(--ink); }

.ca-foot { border-top: 1px solid var(--line); background: var(--paper2); }
.ca-footin { max-width: 1180px; margin: 0 auto; padding: 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.ca-foot .fb { font-weight: 700; font-size: 17px; }
.ca-foot .fm { font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* ---- library ---- */
.ca-lib { max-width: 1180px; margin: 0 auto; padding: 30px; }
.ca-libhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.ca-libhead h1 { font-weight: 700; font-size: 30px; letter-spacing: -.01em; margin: 0; }
.ca-libhead p { color: var(--dim); font-size: 14px; margin: 6px 0 0; }
.ca-showsel { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0; }
.ca-showpill { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--card); border-radius: 99px;
  padding: 8px 14px 8px 9px; cursor: pointer; transition: .15s; }
.ca-showpill:hover { border-color: var(--line2); }
.ca-showpill.on { border-color: var(--shc); background: color-mix(in oklch, var(--shc), var(--card) 90%); }
.ca-showpill .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 10px; color: #fff; background: var(--shc); }
.ca-showpill .nm { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.ca-showpill .nm small { display: block; font-family: var(--mono); font-weight: 400; font-size: 9.5px; color: var(--dim); letter-spacing: .04em; }

.ca-feature { display: grid; grid-template-columns: 280px 1fr; gap: 24px; border: 1px solid var(--ink); background: var(--card);
  box-shadow: 8px 10px 0 oklch(0.43 0.068 156 / .1); margin-bottom: 28px; }
@media (max-width: 700px) { .ca-feature { grid-template-columns: 1fr; } }
.ca-feature .bd { padding: 16px; border-right: 1px solid var(--line); }
@media (max-width: 700px) { .ca-feature .bd { border-right: none; border-bottom: 1px solid var(--line); } }
.ca-feature .meta { padding: 22px 24px 22px 4px; display: flex; flex-direction: column; }
.ca-feature .kk { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--felt); }
.ca-feature h2 { font-weight: 700; font-size: 26px; letter-spacing: -.01em; margin: 8px 0 6px; line-height: 1.1; }
.ca-feature .sub { color: var(--dim); font-size: 14px; }
.ca-feature .row { margin-top: auto; display: flex; align-items: center; gap: 14px; padding-top: 18px; }
.ca-feature .len { font-family: var(--mono); font-size: 12px; color: var(--dim); }

.ca-filters { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ca-filters button { border: none; background: none; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); cursor: pointer; padding: 10px 0; border-bottom: 2px solid transparent; }
.ca-filters button.on { color: var(--ink); border-color: var(--felt); }

.ca-eplist { display: flex; flex-direction: column; }
.ca-eprow { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px; padding: 16px 8px; border-bottom: 1px solid var(--line); cursor: pointer; transition: .12s; }
.ca-eprow:hover { background: var(--paper2); }
.ca-eprow .pbtn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  display: grid; place-items: center; font-size: 13px; cursor: pointer; }
.ca-eprow:hover .pbtn { background: var(--felt); border-color: var(--felt); color: var(--paper); }
.ca-eprow .ti { min-width: 0; }
.ca-eprow .ty { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--felt); }
.ca-eprow .nm { font-weight: 600; font-size: 16px; margin: 2px 0; }
.ca-eprow .mt { font-size: 12.5px; color: var(--dim); }
.ca-eprow .rt { display: flex; align-items: center; gap: 12px; }
.ca-eprow .len { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.ca-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ox); border: 1px solid currentColor; border-radius: 2px; padding: 2px 6px; }

/* ---- New Episode modal ---- */
.ca-scrim { position: fixed; inset: 0; background: oklch(0.245 0.014 62 / .42); backdrop-filter: blur(3px); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.ca-modal { background: var(--paper); border: 1px solid var(--ink); width: min(560px, 96vw); max-height: 92vh; overflow: auto;
  box-shadow: 12px 14px 0 oklch(0.43 0.068 156 / .14); }
.ca-mhead { display: flex; align-items: baseline; justify-content: space-between; padding: 22px 26px 0; }
.ca-mhead h2 { font-weight: 700; font-size: 24px; margin: 0; letter-spacing: -.01em; }
.ca-mclose { border: none; background: none; font-size: 22px; color: var(--dim); cursor: pointer; line-height: 1; }
.ca-mbody { padding: 18px 26px 26px; }
.ca-modetabs { display: flex; gap: 4px; border: 1px solid var(--line); border-radius: 9px; padding: 4px; margin-bottom: 18px; background: var(--card); }
.ca-modetabs button { flex: 1; padding: 9px; border: none; background: transparent; color: var(--dim); border-radius: 6px; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.ca-modetabs button.on { background: var(--felt); color: var(--on-main); }
.ca-msub { color: var(--dim); font-size: 14px; line-height: 1.5; margin: 0 0 18px; font-style: italic; }
.ca-field { margin-bottom: 14px; }
.ca-field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.ca-field input, .ca-field select { width: 100%; font-family: "Spectral"; font-size: 15px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line2); border-radius: 7px; padding: 11px 12px; }
.ca-field input:focus, .ca-field select:focus { outline: none; border-color: var(--felt); }
.ca-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ca-mfoot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* progress run */
.ca-run { margin-top: 18px; }
.ca-progbar { height: 4px; background: var(--line); border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
.ca-progfill { height: 100%; background: var(--felt); transition: width .4s; }
.ca-stages { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: 12px; }
.ca-stage-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: var(--dim); }
.ca-stage-row .ic { width: 16px; text-align: center; flex: none; }
.ca-stage-row.done { color: var(--ink); } .ca-stage-row.done .ic { color: var(--good); }
.ca-stage-row.active { color: var(--felt); }
.ca-stage-row.active .ic { animation: ca-spin 1s linear infinite; display: inline-block; }
@keyframes ca-spin { to { transform: rotate(360deg); } }
.ca-stage-row .sd { margin-left: auto; font-size: 10.5px; opacity: .7; }

/* ============================================================
   2) club.css — studio (.cl-*)
   ============================================================ */

/* Direction 2 — THE CHESS CLUB
   Editorial, warm paper, ink + felt-green. Printed-scoresheet calm. */
.cl {
  --paper: oklch(0.962 0.012 86);
  --paper2: oklch(0.945 0.014 86);
  --card: oklch(0.992 0.004 86);
  --ink: oklch(0.245 0.014 62);
  --dim: oklch(0.50 0.018 66);
  --line: oklch(0.855 0.013 84);
  --line2: oklch(0.78 0.015 84);
  --felt: oklch(0.43 0.068 156);
  --ox: oklch(0.46 0.13 28);
  --txt: var(--ink);
  --accent: var(--felt);
  --good: oklch(0.46 0.08 156);
  --blunder: var(--ox);
  --threat: oklch(0.55 0.10 70);
  --main: var(--felt);
  --on-main: oklch(0.97 0.01 90);
  /* board — tournament cream / muted green */
  --sq-light: oklch(0.915 0.022 96);
  --sq-dark: oklch(0.56 0.058 154);
  --pc-white: oklch(0.985 0.006 90);
  --pc-black: oklch(0.22 0.012 60);
  --pc-white-edge: 1.3px oklch(0.42 0.02 60 / .85);
  --pc-black-edge: .6px rgba(0,0,0,.35);
  --hl: oklch(0.55 0.10 70 / .40); --hl-blend: multiply;
  --eval-white: oklch(0.985 0.006 90); --eval-black: oklch(0.30 0.02 60);
  --coord: oklch(0.40 0.04 120);
  --adv-fill: oklch(0.43 0.068 156 / .12); --adv-line: oklch(0.43 0.068 156);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --note-bg: oklch(0.93 0.018 90);
  --board-radius: 3px;

  font-family: "Spectral", Georgia, serif;
  background: var(--paper);
  color: var(--ink);
  width: 100%; height: 100%; display: flex; flex-direction: column;
  container-type: inline-size;
}
.cl * { box-sizing: border-box; }

.cl-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding: 22px 30px 16px; border-bottom: 2px solid var(--ink); }
.cl-brand { display: flex; align-items: baseline; gap: 12px; }
.cl-back { align-self: center; border: 1px solid var(--line2); background: var(--card); color: var(--ink); width: 34px; height: 34px;
  border-radius: 50%; font-size: 16px; cursor: pointer; flex: none; display: grid; place-items: center; font-family: "Spectral"; }
.cl-back:hover { background: var(--felt); border-color: var(--felt); color: var(--paper); }
.cl-mark { font-size: 26px; color: var(--felt); }
.cl-show { font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.cl-kicker { font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
.cl-eptitle { text-align: right; }
.cl-eptitle b { font-style: italic; font-weight: 600; font-size: 18px; }
.cl-eptitle span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--dim); margin-top: 3px; }

.cl-rule { height: 1px; background: var(--ink); margin: 0 30px; opacity: .12; }

.cl-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  gap: 30px; padding: 22px 30px; align-items: stretch; }
@container (max-width: 880px) { .cl-body { grid-template-columns: minmax(0, 1fr); overflow: auto; } }
/* Belt-and-suspenders for browsers without container-query support: fall back
   to a plain viewport media query so the columns still stack and never overlap. */
@media (max-width: 880px) { .cl-body { grid-template-columns: minmax(0, 1fr); overflow: auto; } }

/* ============================================================
   MOBILE (≤880px) — episode view becomes a natural-scroll document.
   Desktop is untouched: these rules only flip the height/overflow locks
   that clip the board column and bury the transport off-screen on phones.
   ============================================================ */
@media (max-width: 880px) {
  /* Let the episode view GROW with its content so #root/body scroll naturally
     instead of locking everything to a single viewport that clips the board. */
  .cl { height: auto; min-height: 100vh; }
  /* Stack the board column then the rail as full-width blocks — no internal
     grid height constraint, no inner scroll that clips the board's bottom. */
  .cl-body { display: block; overflow: visible; padding: 16px 18px; }
  .cl-boardcol { overflow: visible; }
  /* The rail follows the board column in the document flow. */
  .cl-rail { margin-top: 22px; }
  /* Hide the redundant right-side matchup title — the brand block already shows
     it, and on a phone the duplicate just overflows off the right edge. */
  .cl-eptitle { display: none; }
  /* Tighten the header so the brand title doesn't crowd the back button. */
  .cl-top { padding: 16px 18px 12px; }
  .cl-rule { margin: 0 18px; }
  .cl-audioerr { margin: 0 18px; }
  /* Keep the play/seek bar reachable while scrolling a long episode: pin it to
     the bottom with the paper background so it stays opaque over content. */
  .cl-transport { position: sticky; bottom: 0; z-index: 20; background: var(--paper);
    padding: 12px 18px; }
  /* Guard the matchup row from a long player name pushing the grid wider than
     the viewport. */
  .cl-matchup .cl-side { min-width: 0; }
  .cl-matchup .cl-side .nm { overflow: hidden; text-overflow: ellipsis; }
}

/* Board column STACKS cleanly: matchup -> stage(eval+board) -> caption -> graph.
   It is allowed to scroll if the content is taller than the column so the board
   cap + the full-width graph strip below it never fight for the same space. */
.cl-boardcol { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; }
.cl-matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-bottom: 14px; }
.cl-side .nm { font-weight: 600; font-size: 15px; }
.cl-side.r { text-align: right; }
.cl-side .meta { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 2px; }
.cl-side.r .meta { justify-content: flex-end; }
.cl-res { font-family: var(--mono); font-weight: 600; font-size: 13px; white-space: nowrap; border: 1px solid var(--line2); border-radius: 2px; padding: 3px 9px; }

/* Board stage. With the eval bar shown it's a 14px gutter + board; when the
   eval bar is hidden (.no-eval) the board takes the full width. min-height:0 +
   align-items:start keep the grid from inheriting a collapsed row height, and
   the board frame is centered/capped in board.jsx so it never overflows. */
/* Eval bar (14px) + board, side-by-side. The board is capped in board.jsx, so
   the stage centers within the column and the eval bar matches the board height
   (align-items:start lets the eval cell grow to the board row height). The board
   never grows past its cap, leaving vertical room for the caption + graph below. */
.cl-stage { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px;
  align-items: stretch; justify-content: center; min-height: 0; flex: none; }
.cl-stage.no-eval { grid-template-columns: minmax(0, 1fr); }
.cl-boardframe { min-width: 0; min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
.cl-boardbox { border: 1px solid var(--ink); padding: 0; background: var(--card);
  box-shadow: 6px 8px 0 oklch(0.43 0.068 156 / .12); max-width: 100%; }
.cl-cap { margin-top: 16px; font-style: italic; font-size: 15px; line-height: 1.45; display: flex; gap: 10px;
  align-items: baseline; flex: none; }
.cl-cap > span { min-width: 0; } /* allow the caption to wrap instead of truncating */
.cl-cap .tag { font-family: var(--mono); font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; border: 1px solid currentColor; border-radius: 2px; padding: 2px 6px; flex: none; }
.cl-cap .tag.blunder { color: var(--ox); }
.cl-cap .tag.mate { color: var(--felt); }

/* Full-width advantage strip BELOW the board with clear separation. It is a
   normal block in the column flow (NOT margin-top:auto), so it can never float
   up and sit behind/around the centered board. */
.cl-graph { margin-top: 22px; padding-top: 0; flex: none; width: 100%; }
.cl-graph .gh { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line2); padding-top: 10px; margin-bottom: 6px; }
.cl-graph .gh span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.cl-graph .gh b { font-family: var(--mono); font-size: 13px; color: var(--felt); }

.cl-rail { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cl-hostline { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line2); margin-bottom: 6px; }
.cl-hostline .cl-host { flex: 0 1 auto; }
.cl-host { display: flex; align-items: center; gap: 9px; min-width: 0; opacity: .5; transition: opacity .2s; }
.cl-host > div { min-width: 0; }
.cl-host.on { opacity: 1; }
.cl-av { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--hostc); color: var(--hostc);
  display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 11px; flex: none; }
.cl-host.on .cl-av { background: var(--hostc); color: var(--card); }
.cl-hname { font-weight: 600; font-size: 12.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-hrole { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--dim); }
.cl-speaking { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--felt); }

.cl-tabs { display: flex; gap: 18px; margin: 10px 0; }
.cl-tabs button { border: none; background: none; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); cursor: pointer; padding: 4px 0; border-bottom: 2px solid transparent; }
.cl-tabs button.on { color: var(--ink); border-color: var(--felt); }

.cl-panel { flex: 1; min-height: 0; overflow: auto; }
.cl-line { display: grid; grid-template-columns: 60px 1fr; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.cl-line:hover { background: var(--paper2); }
.cl-line.on { background: var(--note-bg); }
.cl-who { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--hostc); padding-top: 3px; }
.cl-ltext { font-size: 14.5px; line-height: 1.5; }
.cl-line.on .cl-ltext::first-letter { font-weight: 700; }
.cl-movewrap { padding: 6px 4px; }

.cl-transport { display: flex; align-items: center; gap: 18px; padding: 16px 30px; border-top: 2px solid var(--ink); }
.cl-play { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
  font-size: 16px; cursor: pointer; flex: none; display: grid; place-items: center; }
.cl-play:hover { background: var(--felt); border-color: var(--felt); }
.cl-seek { flex: 1; }
.cl-bar { height: 2px; background: var(--line2); position: relative; cursor: pointer; }
.cl-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--felt); }
.cl-knob { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--felt); transform: translate(-50%,-50%); }
.cl-time { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 8px; }
.cl-rate { font-family: var(--mono); font-size: 12px; border: 1px solid var(--line2); border-radius: 2px; padding: 8px 11px; background: none; cursor: pointer; color: var(--ink); flex: none; }

/* ============================================================
   3) board.css — shared primitives (.cc-*)
   Board-rendering rules (.cc-board/.cc-grid/.cc-sq/.cc-pc/.cc-arrows/
   .cc-rank/.cc-file) are DROPPED — react-chessboard renders the board
   inside .cl-boardframe instead. All other primitives are kept.
   ============================================================ */

/* ChessCast — structural styles for shared chess primitives.
   Colors come from CSS variables set by each visual direction's wrapper:
   --sq-light --sq-dark --pc-white --pc-black --pc-white-edge --pc-black-edge
   --hl --good --blunder --threat --main --eval-white --eval-black
   --line --dim --txt --good-soft --blunder-soft  */

/* Eval bar */
.cc-evalbar { position: relative; width: 100%; height: 100%; background: var(--eval-black, #14110c);
  border-radius: 99px; overflow: hidden; }
.cc-eval-white { position: absolute; left: 0; right: 0; bottom: 0; background: var(--eval-white, #f3ede0);
  transition: height .4s cubic-bezier(.4,0,.2,1); }
.cc-eval-num { position: absolute; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 800;
  font-family: var(--mono, monospace); letter-spacing: -.02em; }
.cc-eval-num.wn { bottom: 4px; color: var(--eval-black, #14110c); }
.cc-eval-num.bn { top: 4px; color: var(--eval-white, #f3ede0); }

/* Captured / material */
.cc-captured { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.cc-cap-glyphs { display: flex; flex-wrap: wrap; line-height: 1; font-size: 17px; }
.cc-cap-pc.w { color: var(--pc-white); -webkit-text-stroke: 1px rgba(0,0,0,.4); }
.cc-cap-pc.b { color: var(--pc-black); }
.cc-cap-pc { margin-right: -2px; }
.cc-cap-empty { color: var(--dim); opacity: .5; }
.cc-cap-diff { font-family: var(--mono, monospace); font-size: 11px; font-weight: 800; color: var(--good); }

/* Move list */
.cc-moves { list-style: none; margin: 0; padding: 0; font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; }
.cc-move-row { display: grid; grid-template-columns: 26px 1fr 1fr; align-items: baseline; padding: 3px 2px; border-radius: 5px; }
.cc-move-row.has-note { background: var(--note-bg, rgba(255,255,255,.04)); padding-bottom: 5px; }
.cc-mn { color: var(--dim); font-size: 11px; }
.cc-mw, .cc-mb { color: var(--txt); padding: 1px 5px; border-radius: 4px; }
.cc-mw.on, .cc-mb.on { background: var(--main); color: var(--on-main, #fff); }
.cc-anno { font-style: normal; font-weight: 800; margin-left: 1px; }
.cc-anno.bad { color: var(--blunder); }
.cc-anno.mate { color: var(--main); }
.cc-best { display: block; font-style: normal; font-size: 10.5px; color: var(--good); margin-top: 1px; }

/* Advantage graph */
.cc-adv { width: 100%; display: block; }
.cc-adv-fill { fill: var(--adv-fill, rgba(120,120,120,.15)); }
.cc-adv-line { stroke: var(--adv-line, var(--main)); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.cc-adv-mid { stroke: var(--line); stroke-width: .5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.cc-adv-dot { stroke: var(--card, #fff); stroke-width: 1; }
.cc-adv-dot.blunder { fill: var(--blunder); }
.cc-adv-dot.mate { fill: var(--main); }

/* ---- Public share viewer (Stage 1A) ------------------------------------- */
/* The /s/{token} page boots the SPA in share mode: clean, no-login chrome —
   just the synced-board player. These styles cover the loading / unavailable
   states; the player itself reuses the .cl-* Studio styles above. */
.cc-share { height: 100vh; }
/* Mobile: let the share viewer grow with its episode (matches the natural-scroll
   .cl rules above) so the board isn't clipped and the transport stays reachable. */
@media (max-width: 880px) { .cc-share { height: auto; min-height: 100vh; } }
.cl-share-msg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; height: 100vh; padding: 2rem; text-align: center;
  color: var(--ink, #1a1a1a); background: var(--bg, #f6f4ef);
}
.cl-share-msg h1 { font-size: 1.4rem; margin: 0; }
.cl-share-msg p { margin: 0; opacity: .7; }
.cl-share-msg .ca-btn { margin-top: 1rem; }

/* ---- Error boundary fallback (universal crash net) ----------------------- */
.cc-errbound {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 2rem; box-sizing: border-box;
  background: var(--paper, #f6f4ef); color: var(--ink, #1a1a1a);
}
.cc-errbound-card {
  width: min(620px, 100%); display: flex; flex-direction: column; align-items: center;
  gap: .75rem; text-align: center;
  background: var(--card, #fff); border: 1px solid var(--line, #ddd);
  border-radius: 12px; padding: 2rem 1.5rem;
}
.cc-errbound-mark { font-size: 2.2rem; color: var(--felt, #2f6b46); line-height: 1; }
.cc-errbound-card h1 { font-size: 1.5rem; margin: 0; }
.cc-errbound-card p { margin: 0; opacity: .75; }
.cc-errbound-msg {
  width: 100%; box-sizing: border-box; margin: .5rem 0 0; text-align: left;
  font-family: var(--mono, monospace); font-size: 12px; color: var(--ox, #a33);
  background: var(--paper2, #efece4); border: 1px solid var(--line, #ddd);
  border-radius: 8px; padding: .6rem .75rem; white-space: pre-wrap; word-break: break-word;
}
.cc-errbound-stack {
  width: 100%; box-sizing: border-box; margin: 0; text-align: left;
  font-family: var(--mono, monospace); font-size: 10.5px; color: var(--dim, #666);
  background: var(--paper2, #efece4); border: 1px solid var(--line, #ddd);
  border-radius: 8px; padding: .6rem .75rem; max-height: 30vh; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}
.cc-errbound-row { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: .75rem; }

/* ---- Auth gate (Stage 1B) ----------------------------------------------- */
.ca-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ca-authcard { display: grid; grid-template-columns: 1fr 1fr; width: min(900px, 100%); background: var(--card);
  border: 1px solid var(--ink); box-shadow: 12px 14px 0 oklch(0.43 0.068 156 / .14); overflow: hidden; }
@media (max-width: 760px) { .ca-authcard { grid-template-columns: 1fr; } .ca-authaside { display: none; } }
.ca-authaside { background: var(--paper2); border-right: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; }
.ca-authboard { border: 1px solid var(--ink); }
.ca-authpitch { font-style: italic; font-size: 15px; line-height: 1.5; color: var(--ink); margin: 18px 0 0; }
.ca-authform { padding: 32px 34px 30px; }
.ca-authtabs { display: flex; gap: 4px; border: 1px solid var(--line); border-radius: 9px; padding: 4px; margin-bottom: 22px; background: var(--paper2); }
.ca-authtabs button { flex: 1; padding: 9px; border: none; background: transparent; color: var(--dim); border-radius: 6px; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.ca-authtabs button.on { background: var(--felt); color: var(--on-main); }
.ca-authh1 { font-weight: 700; font-size: 26px; letter-spacing: -.01em; margin: 0 0 4px; }
.ca-authsub { color: var(--dim); font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.ca-autherr { background: color-mix(in oklch, var(--ox), var(--card) 86%); border: 1px solid var(--ox); color: var(--ox);
  font-size: 13.5px; line-height: 1.45; border-radius: 7px; padding: 10px 12px; margin-bottom: 16px; }
.ca-authswap { margin-top: 16px; text-align: center; font-size: 13.5px; color: var(--dim); }
.ca-authswap a { color: var(--felt); cursor: pointer; font-weight: 600; text-decoration: underline; }
.ca-btn:disabled { opacity: .55; cursor: default; }

/* ---- Account chrome — integrated INTO the top nav (no overlap) ---------- */
/* The account controls live in the .ca-nav flow as the trailing .ca-acct
   cluster, after the .ca-spacer. Nothing is position:fixed, so it can never
   overlap the nav links or the "+ New episode" button at any width. */
.ca-acct { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.cc-acctemail { font-family: var(--mono); font-size: 11px; color: var(--dim); max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-acctlink { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  background: var(--card); border: 1px solid var(--line2); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.cc-acctlink:hover { color: var(--ink); border-color: var(--felt); }
.cc-acctlink:disabled { opacity: .5; cursor: default; }

/* On narrow widths let the nav wrap so the account cluster drops below the
   brand/links instead of colliding with them. */
@media (max-width: 720px) {
  .ca-nav { flex-wrap: wrap; gap: 12px; }
  .ca-spacer { flex-basis: 100%; height: 0; }
  .cc-acctemail { display: none; }
}

/* ---- Credits pill (in nav) ---------------------------------------------- */
.cc-credits { display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
  font-family: var(--mono); background: var(--paper2); border: 1px solid var(--line2);
  border-radius: 999px; padding: 5px 12px; color: var(--ink); }
.cc-credits:hover { border-color: var(--felt); }
.cc-credits.low { border-color: var(--ox); background: color-mix(in oklch, var(--ox), var(--card) 88%); }
.cc-credits-n { font-weight: 700; font-size: 14px; }
.cc-credits.low .cc-credits-n { color: var(--ox); }
.cc-credits-lbl { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.cc-credits-tier { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--felt);
  border-left: 1px solid var(--line2); padding-left: 8px; margin-left: 2px; }

/* ---- Upgrade / plans prompt --------------------------------------------- */
.cc-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
@media (max-width: 560px) { .cc-plans { grid-template-columns: 1fr; } }
.cc-plan { border: 1px solid var(--line2); border-radius: 10px; padding: 16px 14px; background: var(--card);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cc-plan.featured { border-color: var(--felt); box-shadow: 4px 6px 0 oklch(0.43 0.068 156 / .12); }
.cc-plan-name { font-weight: 700; font-size: 16px; }
.cc-plan-price { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.cc-plan .ca-btn { width: 100%; margin-top: auto; }

/* ---- Library: empty state + row actions + delete confirm ---------------- */
.ca-empty { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: 32px; align-items: center;
  margin-top: 28px; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
@media (max-width: 720px) { .ca-empty { grid-template-columns: 1fr; } }
.ca-empty-bd { border: 1px solid var(--ink); }
.ca-empty-copy h2 { font-size: 24px; margin: 0 0 8px; }
.ca-empty-copy p { color: var(--dim); line-height: 1.55; max-width: 38em; margin: 0 0 18px; }
.cc-eprow-actions { display: flex; align-items: center; gap: 8px; }
.cc-confirm { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* ---- chess.com game picker ---------------------------------------------- */
.cc-picker { margin-top: 4px; }
.cc-picker-row { display: flex; gap: 8px; }
.cc-picker-row input { flex: 1; min-width: 0; }
.cc-games { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; max-height: 340px; overflow: auto; }
.cc-game { display: flex; align-items: center; gap: 12px; justify-content: space-between;
  border: 1px solid var(--line2); border-radius: 8px; padding: 10px 12px; background: var(--card); }
.cc-game-main { min-width: 0; }
.cc-game-opp { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.cc-game-side { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line2); border-radius: 999px; padding: 1px 8px; color: var(--dim); }
.cc-game-side.white { color: var(--ink); }
.cc-game-side.black { color: var(--ink); background: var(--paper2); }
.cc-game-meta { font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-game .ca-btn { flex: none; padding: 7px 14px; font-size: 13px; }

/* ---- First-run onboarding (stepped) ------------------------------------- */
.cc-onb .ca-mhead { align-items: flex-start; }
.cc-onb-steps { display: flex; gap: 6px; margin-top: 8px; }
.cc-onb-dot { width: 22px; height: 3px; border-radius: 99px; background: var(--line2); transition: .2s; }
.cc-onb-dot.on { background: var(--felt); }
.cc-onb-lede { font-size: 16px; line-height: 1.55; color: var(--ink); margin: 4px 0 18px; }
.cc-onb-lede em { font-style: italic; color: var(--felt); }
.cc-onb-how { margin: 0 0 6px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.cc-onb-how li { font-size: 14px; line-height: 1.5; color: var(--dim); }
.cc-onb-how b { color: var(--ink); font-weight: 600; }

/* ---- "Ask the hosts" chat panel (in the Studio rail) -------------------- */
.cc-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cc-chat-cost { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .04em; color: var(--dim); padding: 8px 10px; margin-bottom: 8px;
  border: 1px solid var(--line2); border-radius: 8px; background: var(--paper2); }
.cc-chat-coin { color: var(--felt); font-size: 9px; }
.cc-chat-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 8px; }
.cc-chat-empty { color: var(--dim); }
.cc-chat-empty p { font-size: 14px; line-height: 1.5; font-style: italic; margin: 4px 0 14px; }
.cc-chat-sugg { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cc-chat-sugg button { font-family: "Spectral"; font-size: 13px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line2); border-radius: 999px; padding: 6px 13px; cursor: pointer; text-align: left; }
.cc-chat-sugg button:hover:not(:disabled) { border-color: var(--felt); color: var(--felt); }
.cc-chat-sugg button:disabled { opacity: .45; cursor: default; }
.cc-chat-msg { display: flex; flex-direction: column; gap: 3px; }
.cc-chat-msg.user { align-items: flex-end; }
.cc-chat-role { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.cc-chat-bubble { max-width: 88%; font-size: 14.5px; line-height: 1.5; padding: 9px 13px; border-radius: 12px;
  border: 1px solid var(--line2); background: var(--card); white-space: pre-wrap; }
.cc-chat-msg.user .cc-chat-bubble { background: var(--felt); color: var(--on-main); border-color: var(--felt); border-bottom-right-radius: 3px; }
.cc-chat-msg.assistant .cc-chat-bubble { border-bottom-left-radius: 3px; }
.cc-chat-jump { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--felt); background: transparent;
  border: 1px solid var(--felt); border-radius: 6px; padding: 4px 9px; cursor: pointer; }
.cc-chat-jump:hover { background: var(--felt); color: var(--on-main); }
.cc-chat-typing { display: inline-flex; gap: 4px; align-items: center; }
.cc-chat-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); display: inline-block; animation: cc-typing 1s infinite ease-in-out; }
.cc-chat-typing i:nth-child(2) { animation-delay: .15s; } .cc-chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cc-typing { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.cc-chat-err { font-size: 12.5px; color: var(--ox); background: color-mix(in oklch, var(--ox), var(--card) 88%);
  border: 1px solid var(--ox); border-radius: 7px; padding: 8px 10px; margin: 8px 0; }
.cc-chat-compose { display: flex; gap: 8px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--line2); }
.cc-chat-compose textarea { flex: 1; min-width: 0; resize: none; font-family: "Spectral"; font-size: 14.5px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line2); border-radius: 9px; padding: 9px 11px; line-height: 1.4; }
.cc-chat-compose textarea:focus { outline: none; border-color: var(--felt); }
.cc-chat-compose .ca-btn { flex: none; padding: 9px 16px; }
.cc-chat-locked { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px; margin-top: 10px; border: 1px solid var(--ox); border-radius: 9px;
  background: color-mix(in oklch, var(--ox), var(--card) 90%); font-size: 13.5px; }

/* ---- Admin panel -------------------------------------------------------- */
.ca-adminpanel { border: 1px solid var(--line); background: var(--card); padding: 6px 22px 16px; }
.ca-adminrow { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; }
.ca-adminlabel { font-weight: 600; font-size: 16px; }
.ca-adminhint { font-size: 13px; color: var(--dim); line-height: 1.45; margin-top: 4px; max-width: 46em; }
.ca-toggle { width: 48px; height: 28px; border-radius: 99px; border: 1px solid var(--line2); background: var(--paper2);
  position: relative; cursor: pointer; flex: none; transition: .18s; padding: 0; }
.ca-toggle .knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--card);
  border: 1px solid var(--line2); transition: .18s; }
.ca-toggle.on { background: var(--felt); border-color: var(--felt); }
.ca-toggle.on .knob { left: 24px; border-color: var(--felt); }
.ca-toggle:disabled { opacity: .6; cursor: default; }
.ca-userlist { display: flex; flex-direction: column; }
.ca-userrow { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.ca-userrow .em { font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.ca-userrow .role { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--line2); border-radius: 2px; padding: 2px 7px; }
.ca-userrow .role.admin { color: var(--felt); border-color: var(--felt); }
.ca-userrow .dt { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.ca-userrow .you { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ox); }

/* ---- On-demand MP4 render (Library / Studio rail / Share viewer) -------- */
/* A small, theme-matched block: a render or watch/download control plus an
   inline <video> player. Used by lib/VideoRender.jsx in three places. */
.cc-video { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.cc-video.compact { margin-top: 12px; }
.cc-video-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cc-video-dl { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--felt); text-decoration: none; border-bottom: 1px solid transparent; cursor: pointer; }
.cc-video-dl:hover { border-color: var(--felt); }
.cc-video-render, .cc-video-toggle { align-self: flex-start; }
.cc-video-player { width: 100%; max-width: 520px; border: 1px solid var(--ink); background: #000;
  box-shadow: 6px 8px 0 oklch(0.43 0.068 156 / .1); display: block; }
.cc-video.compact .cc-video-player { max-width: 100%; }
.cc-video-note { font-size: 12.5px; color: var(--dim); font-style: italic; }
.cc-video-err { font-size: 13px; color: var(--ox); }
/* In share mode the board column is narrow; keep the player from overflowing. */
.cc-share .cc-video-player, .cl .cc-video-player { max-width: 100%; }

/* ==========================================================================
   Background jobs UX — nav activity chip, jobs panel, toasts, and the brief
   "generating in the background" confirmation in the New Episode modal.
   ========================================================================== */

/* ---- Nav activity chip --------------------------------------------------- */
.cc-jobschip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); background: var(--card); border: 1px solid var(--line2);
  border-radius: 999px; padding: 5px 11px; line-height: 1; }
.cc-jobschip:hover { color: var(--ink); border-color: var(--felt); }
.cc-jobschip.busy { color: var(--felt); border-color: var(--felt);
  background: color-mix(in oklch, var(--felt), var(--card) 90%); }
.cc-jobschip-bell { font-size: 13px; filter: grayscale(.3); }
.cc-jobschip-lbl { font-weight: 600; }
.cc-jobschip-spin { width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--felt), transparent 65%);
  border-top-color: var(--felt); animation: cc-spin .8s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* ---- Jobs / activity panel (dropdown from the chip) ---------------------- */
.cc-jobs-scrim { position: fixed; inset: 0; z-index: 60; background: transparent; }
.cc-jobs-panel { position: fixed; top: 64px; right: 22px; z-index: 61;
  width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  background: var(--card); border: 1px solid var(--ink); border-radius: 12px;
  box-shadow: 8px 12px 0 oklch(0.43 0.068 156 / .12); }
.cc-jobs-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); }
.cc-jobs-head b { font-size: 13px; letter-spacing: .04em; }
.cc-jobs-x { background: none; border: none; cursor: pointer; color: var(--dim); font-size: 15px; }
.cc-jobs-x:hover { color: var(--ink); }
.cc-jobs-empty { padding: 22px 16px; color: var(--dim); font-size: 13px; font-style: italic; }
.cc-jobs-list { list-style: none; margin: 0; padding: 0; }
.cc-job-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); }
.cc-job-row:last-child { border-bottom: none; }
.cc-job-main { flex: 1; min-width: 0; }
.cc-job-title { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-job-sub { font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-job-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cc-job-badge { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; border: 1px solid currentColor; }
.cc-job-badge.queued { color: var(--dim); }
.cc-job-badge.running { color: var(--felt); }
.cc-job-badge.done { color: var(--good); }
.cc-job-badge.error { color: var(--ox); }
.cc-job-spin { width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--felt), transparent 65%);
  border-top-color: var(--felt); animation: cc-spin .8s linear infinite; }
.cc-job-open { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--felt); background: none; border: none; cursor: pointer; padding: 0; }
.cc-job-open:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .cc-jobs-panel { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; }
}

/* ---- Toasts (completion notifications) ----------------------------------- */
.cc-toasts { position: fixed; bottom: 20px; right: 20px; z-index: 80;
  display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 24px)); }
.cc-toast { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px;
  background: var(--card); border: 1px solid var(--ink); border-left: 4px solid var(--good);
  border-radius: 10px; box-shadow: 6px 8px 0 oklch(0.43 0.068 156 / .12);
  animation: cc-toast-in .25s ease; }
.cc-toast.err { border-left-color: var(--ox); }
@keyframes cc-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cc-toast-body { flex: 1; min-width: 0; }
.cc-toast-title { font-size: 13px; color: var(--ink); }
.cc-toast-detail { font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 3px; }
.cc-toast-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cc-toast-open { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--paper); background: var(--felt); border: 1px solid var(--felt);
  border-radius: 6px; padding: 5px 9px; cursor: pointer; }
.cc-toast-open:hover { filter: brightness(1.08); }
.cc-toast-x { background: none; border: none; cursor: pointer; color: var(--dim); font-size: 13px; }
.cc-toast-x:hover { color: var(--ink); }
@media (max-width: 560px) { .cc-toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

/* ============================================================
   Frontend-agent additions (scoped):
   public landing nav, auth back-link, settings confirmation,
   episode audio-error hint. Namespaced under .cc-pub / .cc-settings
   so they never collide with backend-agent files.
   ============================================================ */

/* Public (logged-out) marketing landing */
.cc-pub { min-height: 100%; }
.cc-pub-nav { display: flex; align-items: center; gap: 22px; padding: 18px 30px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--paper); z-index: 5; }
.cc-pub-brand { display: flex; align-items: baseline; gap: 9px; }
.cc-pub-brand .mk { font-size: 22px; color: var(--felt); }
.cc-pub-brand b { font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.cc-pub-brand small { font-family: var(--mono); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
.cc-pub-navactions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cc-pub-hero { padding-top: 48px; }
@media (max-width: 560px) {
  .cc-pub-nav { padding: 14px 18px; gap: 12px; }
  .cc-pub-navactions { gap: 8px; }
}

/* Auth screen — back-to-home link */
.ca-authback { align-self: flex-start; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); background: none; border: none; cursor: pointer; padding: 0 0 14px; }
.ca-authback:hover { color: var(--ink); }

/* Settings — saved confirmation */
.cc-settings-saved { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--felt); display: inline-flex; align-items: center; gap: 6px; }

/* Episode view — playback error hint above the transport */
.cl-audioerr { margin: 0 30px; padding: 8px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  color: var(--ox); border: 1px solid var(--ox); border-radius: 3px; background: oklch(0.97 0.02 28); }

/* ---- New Episode "generating in the background" confirmation ------------- */
.cc-bgstart { text-align: center; padding: 18px 8px 6px; }
.cc-bgstart-spin { width: 30px; height: 30px; margin: 8px auto 14px; border-radius: 50%;
  border: 3px solid color-mix(in oklch, var(--felt), transparent 70%);
  border-top-color: var(--felt); animation: cc-spin .8s linear infinite; }
.cc-bgstart-check { width: 46px; height: 46px; margin: 6px auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--paper);
  background: var(--felt); box-shadow: 0 0 0 6px color-mix(in oklch, var(--felt), transparent 86%);
  animation: cc-pop .3s ease; }
@keyframes cc-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cc-bgstart-h { margin: 0 0 6px; font-size: 17px; }
.cc-bgstart .ca-mfoot { justify-content: center; margin-top: 18px; }