/* Kahini Labs — a lit page on a dark desk.
   Warm charcoal chrome, paper reserved for the script, and printed edges
   rather than pills and glows. Accents come from Indian print — sindoor,
   brass, bottle green — so the palette reads as chosen, not defaulted. */

/* ── tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Ink on paper, not glass on gradient. The accents are pulled deliberately
     toward Indian print — sindoor red, brass, a bottle green — and away from
     the bright coral/violet register that every generated interface reaches
     for. Nothing here glows. */
  --paper:     #F4EDDF;   /* the script sheet */
  --paper-dim: #E7DDC9;

  --sindoor:  #C0392B;    /* primary action */
  --sindoor-lift: #D14A3B;
  --brass:    #B3862F;
  --bottle:   #2F6B5F;
  --indigo:   #3B4A7A;
  --clay:     #A85A38;

  /* Studio chrome: warm charcoal, so the paper reads as paper. */
  --booth-900: #17150F;
  --booth-800: #1F1C15;
  --booth-700: #29251C;
  --booth-600: #362F24;
  --booth-500: #4A4133;

  --on-dark:      #EDE6D6;
  --on-dark-soft: #A79C86;
  --on-dark-dim:  #7A7060;

  --hair:      rgba(237, 230, 214, .12);
  --hair-firm: rgba(237, 230, 214, .22);

  /* Intent colours. These appear twice — as ribbon bands beside the script,
     and again as markers on the finished waveform — so a creator can connect
     what they planned to what they hear. */
  --i-hook:        var(--brass);
  --i-excited:     var(--sindoor);
  --i-question:    #5C6FA8;
  --i-explanation: var(--bottle);
  --i-reflective:  #8A6E9E;
  --i-suspense:    var(--indigo);
  --i-cta:         var(--clay);
  --i-neutral:     #6E6656;

  /* Crisp geometry. A pill on every control is the tell; these are printed
     edges, squared with just enough radius to not look accidental. */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 5px;

  --shadow-sheet: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 28px -14px rgba(0,0,0,.6);
  --shadow-pop:   0 18px 48px -16px rgba(0,0,0,.72);

  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --indic: "Noto Sans Bengali", "Noto Sans Devanagari", var(--sans);

  --bar-h: 66px;

  /* Kept so older rules referencing the first palette still resolve. */
  --cream: var(--paper);
  --coral: var(--sindoor);
  --mango: var(--brass);
  --teal:  var(--bottle);
  --ink:   #211D16;
  --muted: #6E6656;
  --white: #FFFFFF;
}

* { box-sizing: border-box; }

/* Overlays carry their own `display`, which beats the UA rule for [hidden] and
   would leave every dialog stacked on the page at once. This has to win. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--booth-900);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* No gradient wash. A flat ground lets the paper be the only lit thing. */
}

svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
svg[data-fill], .i-play, .i-pause, .mark-btn svg { fill: currentColor; stroke: none; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: rgba(192, 57, 43, .28); }

/* ── scrollbars ──────────────────────────────────────────────────────
   Two APIs on purpose. `scrollbar-width`/`scrollbar-color` is the standard
   and covers Firefox and Chrome 121+; the ::-webkit- pseudo-elements give
   older Chrome, Edge and Safari the same treatment plus a hover state the
   standard properties cannot express. Both are declared so the bars look the
   same everywhere rather than falling back to the OS default.

   Note: on the same element, `scrollbar-width` wins over ::-webkit- rules in
   browsers that support both, so the two are kept to the same visual weight. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--booth-500) transparent;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--booth-500);
  border-radius: 999px;
  /* A transparent border shrinks the visible thumb without shrinking the
     grab target, so it stays easy to hit while reading as a hairline. */
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--on-dark-dim);
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:active {
  background: var(--mango);
  background-clip: content-box;
}
/* Kill the dead square where the two bars meet. */
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* On the cream script sheet a light thumb would vanish, so the polarity
   flips: warm ink on paper, tinted toward the brand rather than plain grey. */
.sheet__text,
.compare__text {
  scrollbar-color: rgba(34, 30, 23, .30) transparent;
}
.sheet__text::-webkit-scrollbar-thumb,
.compare__text::-webkit-scrollbar-thumb {
  background: rgba(34, 30, 23, .28);
  background-clip: content-box;
}
.sheet__text::-webkit-scrollbar-thumb:hover,
.compare__text::-webkit-scrollbar-thumb:hover {
  background: rgba(192, 57, 43, .55);
  background-clip: content-box;
}

/* The narrator carousel on small screens scrolls sideways; a visible bar
   under the cards is noise, and the cards already cue that they move. */
.narrators::-webkit-scrollbar { height: 0; }
.narrators { scrollbar-width: none; }

/* ── type ───────────────────────────────────────────────────────────── */
.h-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  margin: 0 0 10px;
  display: block;
}

/* ── the mark: three strokes, a waveform and a script's margin rules ── */
.mark { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.mark span {
  display: block; width: 2.5px; border-radius: 2px; background: var(--coral);
}
.mark span:nth-child(1) { height: 10px; }
.mark span:nth-child(2) { height: 19px; background: var(--mango); }
.mark span:nth-child(3) { height: 13px; background: var(--teal); }
.mark--lg { height: 34px; gap: 5px; }
.mark--lg span { width: 4px; }
.mark--lg span:nth-child(1) { height: 17px; }
.mark--lg span:nth-child(2) { height: 32px; }
.mark--lg span:nth-child(3) { height: 22px; }

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--on-dark);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px;
  font: inherit; font-size: 13px; font-weight: 550;
  letter-spacing: .01em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.btn svg { width: 14px; height: 14px; flex: none; }

/* Flat block of colour with a darker edge — printed, not backlit. */
.btn--primary {
  --btn-bg: var(--sindoor); --btn-fg: #FFF3EC;
  font-weight: 650;
  border-color: rgba(0, 0, 0, .35);
}
.btn--primary:hover:not(:disabled) { --btn-bg: var(--sindoor-lift); }

.btn--outline { border-color: var(--hair-firm); }
.btn--outline:hover:not(:disabled) { border-color: var(--brass); color: var(--brass); }

.btn--ghost { --btn-fg: var(--on-dark-soft); }
.btn--ghost:hover:not(:disabled) { --btn-bg: rgba(237,230,214,.07); --btn-fg: var(--on-dark); }

.btn--icon { padding: 8px; --btn-fg: var(--on-dark-soft); }
.btn--icon:hover:not(:disabled) { --btn-bg: rgba(237,230,214,.09); --btn-fg: var(--on-dark); }
.btn--icon svg { width: 15px; height: 15px; }

.btn--sm { padding: 6px 12px; font-size: 12px; }
.btn--block { width: 100%; }

.pill {
  display: inline-block; min-width: 16px; padding: 1px 5px;
  font-size: 10.5px; font-weight: 650; text-align: center;
  background: var(--brass); color: #1C1508; border-radius: var(--r-sm);
}

/* ── gate ───────────────────────────────────────────────────────────── */
.gate {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 24px;
  background: var(--booth-900);
}
.gate__card {
  width: 100%; max-width: 372px;
  padding: 34px 30px 30px;
  background: var(--booth-800);
  border: 1px solid var(--hair); border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  text-align: left;
}
.gate__title {
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 40;
  font-size: 33px; font-weight: 600; line-height: 1.05;
  margin: 18px 0 6px; letter-spacing: -.015em;
}
.gate__sub { margin: 0 0 22px; color: var(--on-dark-soft); font-size: 14px; }
.gate__error {
  margin: 0 0 14px; padding: 9px 12px; font-size: 13px;
  color: #F6D9D2; background: rgba(192, 57, 43, .16);
  border-left: 2px solid var(--coral); border-radius: var(--r-sm);
}

.field { display: block; margin-bottom: 16px; }
.field__label {
  display: block; margin-bottom: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark-dim);
}
.input, .select {
  width: 100%; padding: 11px 13px;
  font: inherit; font-size: 14.5px;
  color: var(--on-dark);
  background: var(--booth-900);
  border: 1px solid var(--hair-firm); border-radius: var(--r-md);
}
.input:focus, .select:focus { border-color: var(--mango); outline: none; }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A9A5B8' stroke-width='1.7'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
  padding-right: 34px;
}

/* ── app frame ──────────────────────────────────────────────────────── */
.app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  padding: 11px 20px;
  background: rgba(22, 22, 31, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand__name {
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 20;
  font-size: 18px; font-weight: 600; letter-spacing: -.01em;
}
.brand__name em { font-style: normal; color: var(--on-dark-dim); font-weight: 400; margin-left: 3px; }

.topbar__project { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.projectname {
  flex: 0 1 320px; min-width: 0;
  padding: 6px 10px;
  font: inherit; font-size: 14px; font-weight: 550;
  color: var(--on-dark);
  background: transparent;
  border: 1px solid transparent; border-radius: var(--r-sm);
}
.projectname:hover { border-color: var(--hair); }
.projectname:focus { background: var(--booth-800); border-color: var(--hair-firm); outline: none; }

.saved { font-size: 11.5px; color: var(--on-dark-dim); white-space: nowrap; }
.saved[data-state="saving"] { color: var(--mango); }
.saved[data-state="saved"]  { color: var(--teal); }

.topbar__actions { display: flex; align-items: center; gap: 4px; }

/* ── workspace ──────────────────────────────────────────────────────── */
.work {
  flex: 1;
  /* Offset parent for the floating selection toolbar. */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 22px;
  align-items: start;
  padding: 22px 20px calc(var(--bar-h) + 34px);
  max-width: 1520px; width: 100%; margin: 0 auto;
}

.composer { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.composer__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.composer__tools { margin-left: auto; display: flex; gap: 6px; }

/* script-state indicator — the three states from the spec, one chip */
.scriptstate {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px;
  font-size: 12.5px; font-weight: 500;
  background: var(--booth-800);
  border: 1px solid var(--hair); border-radius: var(--r-sm);
  color: var(--on-dark-soft);
}
.scriptstate__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--on-dark-dim); flex: none; }
.scriptstate[data-state="native"]    { color: var(--teal);  border-color: rgba(47,107,95,.55); }
.scriptstate[data-state="native"]    .scriptstate__dot { background: var(--teal); }
.scriptstate[data-state="mixed"]     { color: var(--mango); border-color: rgba(179,134,47,.55); }
.scriptstate[data-state="mixed"]     .scriptstate__dot { background: var(--mango); }
.scriptstate[data-state="romanized"] { color: var(--coral); border-color: rgba(192,57,43,.55); }
.scriptstate[data-state="romanized"] .scriptstate__dot { background: var(--coral); }

/* ── the sheet + ribbon (signature) ─────────────────────────────────── */
.sheetwrap {
  /* Sized so the marks toolbar always clears the fixed action bar. The
     subtrahend is topbar + padding + state chip + gaps + toolbar + action bar. */
  height: calc(100dvh - 280px);
  min-height: 300px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 0;
  background: var(--booth-800);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sheet);
}

.ribbon {
  position: relative;
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 14px 8px;
  background: linear-gradient(180deg, var(--booth-700), var(--booth-800));
  border-right: 1px solid var(--hair);
  overflow: hidden;
}
.ribbon__empty {
  font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--on-dark-dim); opacity: .5; line-height: 1.7; text-align: right;
  margin-top: 4px;
}
.band {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 5px 8px 5px 10px;
  min-height: 30px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--band) 14%, transparent);
  border-left: 3px solid var(--band);
  cursor: pointer;
  animation: bandIn .34s cubic-bezier(.2,.7,.3,1) backwards;
}
@keyframes bandIn { from { opacity: 0; transform: translateX(-9px); } }
.band:hover { background: color-mix(in srgb, var(--band) 26%, transparent); }
.band.is-active { background: color-mix(in srgb, var(--band) 34%, transparent); }
.band__intent {
  font-size: 8.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--band); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.band__nums {
  font-size: 9.5px; font-variant-numeric: tabular-nums;
  color: var(--on-dark-dim); line-height: 1.3; margin-top: 1px;
}
.band__tag {
  position: absolute; top: 3px; right: 3px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 1.5px var(--booth-800);
}

/* the lit page */
.sheet { background: var(--paper); padding: 4px; min-height: 0; display: flex; }
.sheet__text {
  display: block; width: 100%;
  flex: 1; min-height: 300px; resize: none;
  padding: 26px 30px;
  font-family: var(--indic);
  font-size: 17.5px; line-height: 1.95;
  color: #221E17;
  background: transparent;
  border: 0; outline: none;
  /* faint ruled lines, like a script page */
  background-image: linear-gradient(180deg, transparent 33px, rgba(34,30,23,.07) 34px);
  background-size: 100% 34.1px;
}
.sheet__text::placeholder { color: #A29C93; }

/* ── marks toolbar ──────────────────────────────────────────────────── */
.marks {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--booth-800);
  border: 1px solid var(--hair); border-radius: var(--r-md);
}
.marks__label {
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-dim); margin-right: 3px;
}
.marks__row { display: flex; gap: 5px; flex-wrap: wrap; }
.marks__sep { width: 1px; height: 20px; background: var(--hair-firm); margin: 0 4px; }

.mark-btn {
  --band: var(--i-neutral);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  font: inherit; font-size: 12.5px; font-weight: 550;
  color: var(--band);
  background: color-mix(in srgb, var(--band) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--band) 34%, transparent);
  border-radius: var(--r-sm); cursor: pointer;
  transition: background .15s, transform .12s;
}
.mark-btn:hover { background: color-mix(in srgb, var(--band) 25%, transparent); }
.mark-btn:active { transform: translateY(1px); }
.mark-btn small { font-size: 10px; opacity: .7; font-variant-numeric: tabular-nums; }
.mark-btn--pause { --band: var(--on-dark-soft); }
.mark-btn--reset { --band: var(--on-dark-dim); }

.marks__hint {
  margin-left: auto;
  font-size: 11.5px; color: var(--on-dark-dim);
}

/* ── selection toolbar ──────────────────────────────────────────────
   Appears over the selection so a creator can direct a word or a line
   without knowing the bracket syntax exists. */
.seltool {
  position: absolute; z-index: 28;
  width: min(420px, calc(100vw - 24px));
  padding: 12px 13px 10px;
  background: var(--booth-700);
  border: 1px solid var(--hair-firm); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  animation: rise .18s cubic-bezier(.2,.7,.3,1);
}

.seltool__quoted {
  margin-bottom: 10px; padding-bottom: 9px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--indic); font-size: 13px; color: var(--on-dark-soft);
  /* Two lines of the selection is enough to confirm what is being marked. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.seltool__quoted span::before { content: "\201C"; }
.seltool__quoted span::after  { content: "\201D"; }

.seltool__row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.seltool__row--split { flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.seltool__label {
  flex: none; width: 58px;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-dim);
}

/* Pace: a three-stop segmented control, not a slider — the provider takes
   discrete steps and a continuous slider would imply precision we do not have. */
.seltool__seg { display: flex; background: var(--booth-900); border-radius: var(--r-sm); padding: 2px; }
.seltool__seg button {
  flex: 1; padding: 5px 12px;
  font: inherit; font-size: 12px; font-weight: 550;
  color: var(--on-dark-soft); background: transparent;
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  transition: background .15s, color .15s;
}
.seltool__seg button:hover { color: var(--on-dark); }
.seltool__seg button[aria-checked="true"] {
  background: var(--booth-500); color: var(--cream);
}

.seltool__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.seltool__chips button {
  --band: var(--i-neutral);
  padding: 4px 10px;
  font: inherit; font-size: 11.5px; font-weight: 550;
  color: var(--band);
  background: color-mix(in srgb, var(--band) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--band) 32%, transparent);
  border-radius: var(--r-sm); cursor: pointer;
}
.seltool__chips button:hover { background: color-mix(in srgb, var(--band) 26%, transparent); }
.seltool__chips button[aria-checked="true"] {
  background: color-mix(in srgb, var(--band) 34%, transparent);
  border-color: var(--band);
}

.seltool__pause {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--on-dark-dim);
}
.seltool__pause .input { width: 72px; padding: 5px 8px; font-size: 12.5px; text-align: right; }

.seltool__foot {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--hair);
}

@media (max-width: 720px) {
  /* Anchored to the bottom on a phone: a popover over the caret would sit
     under the on-screen keyboard. */
  .seltool {
    position: fixed; left: 12px; right: 12px; bottom: calc(var(--bar-h) + 8px);
    width: auto; top: auto !important;
  }
  .seltool__label { width: 46px; }
  .marks__hint { display: none; }
}

/* ── warnings ───────────────────────────────────────────────────────── */
.warnings { display: flex; flex-direction: column; gap: 6px; }
.warn {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 13px; font-size: 13px;
  background: rgba(179, 134, 47, .12);
  border-left: 2px solid var(--mango);
  border-radius: var(--r-sm);
  color: #F3E4C4;
}
.warn--hard { background: rgba(192, 57, 43, .14); border-color: var(--sindoor); color: #F6D9D2; }
.warn code {
  font-family: ui-monospace, monospace; font-size: 12px;
  background: rgba(0,0,0,.28); padding: 1px 5px; border-radius: 3px;
}

/* ── casting rail ───────────────────────────────────────────────────── */
.casting {
  position: sticky; top: 78px; align-self: start;
  display: flex; flex-direction: column; gap: 22px;
  padding: 18px;
  background: var(--booth-800);
  border: 1px solid var(--hair); border-radius: var(--r-lg);
}
.casting__block { min-width: 0; }

.langs { display: flex; gap: 7px; flex-wrap: wrap; }
.lang {
  flex: 1 1 auto;
  padding: 9px 12px;
  font: inherit; text-align: center; cursor: pointer;
  color: var(--on-dark-soft);
  background: var(--booth-900);
  border: 1px solid var(--hair-firm); border-radius: var(--r-md);
  transition: border-color .15s, color .15s, background .15s;
}
.lang b { display: block; font-family: var(--indic); font-size: 15px; font-weight: 600; }
.lang span { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; margin-top: 1px; }
.lang:hover { border-color: var(--hair-firm); color: var(--on-dark); }
.lang[aria-checked="true"] {
  color: var(--cream); background: var(--booth-600);
  border-color: var(--mango);
  box-shadow: inset 0 0 0 1px rgba(179,134,47,.35);
}

/* narrator cards — characters, not dropdown rows */
.narrators { display: flex; flex-direction: column; gap: 8px; }
.narrator {
  --tint: var(--indigo);
  position: relative; display: block; width: 100%;
  padding: 12px 13px 11px;
  text-align: left; font: inherit; cursor: pointer;
  color: var(--on-dark);
  background: var(--booth-900);
  border: 1px solid var(--hair);
  border-left: 3px solid color-mix(in srgb, var(--tint) 55%, transparent);
  border-radius: var(--r-sm);
  transition: border-color .14s, background .14s;
}
.narrator:hover { background: var(--booth-700); border-left-color: var(--tint); }
.narrator[aria-checked="true"] {
  background: var(--booth-700);
  border-color: var(--hair-firm);
  border-left-color: var(--tint);
  border-left-width: 4px;
}
.narrator__top { display: flex; align-items: baseline; gap: 8px; }
.narrator__name {
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 20;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.005em;
}
.narrator__gender {
  margin-left: auto; font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-dim);
}
.narrator__tag { font-size: 12px; color: var(--on-dark-soft); margin: 3px 0 7px; }
.narrator__chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip {
  padding: 2px 7px; font-size: 10px; font-weight: 550;
  color: color-mix(in srgb, var(--tint) 72%, var(--cream));
  background: color-mix(in srgb, var(--tint) 15%, transparent);
  border-radius: var(--r-sm);
}
.narrator__play {
  position: absolute; right: 10px; bottom: 10px;
  width: 26px; height: 26px; display: grid; place-items: center;
  color: var(--tint);
  background: rgba(0,0,0,.3);
  border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent);
  border-radius: 50%; cursor: pointer;
}
.narrator__play:hover { background: color-mix(in srgb, var(--tint) 28%, transparent); }
.narrator__play svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.narrator.is-loading .narrator__play { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.narrator[data-theme="mango"]  { --tint: var(--mango); }
.narrator[data-theme="amber"]  { --tint: #E9A23B; }
.narrator[data-theme="teal"]   { --tint: var(--teal); }
.narrator[data-theme="indigo"] { --tint: var(--indigo); }
.narrator[data-theme="navy"]   { --tint: #7C8CF8; }

.voicerow { display: flex; gap: 7px; align-items: center; }
.voicerow .select { flex: 1; }

/* advanced */
.advanced {
  border-top: 1px solid var(--hair); padding-top: 14px;
}
.advanced summary {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-dark-dim); cursor: pointer; list-style: none;
}
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::after { content: " +"; }
.advanced[open] summary::after { content: " −"; }
.advanced > *:not(summary) { margin-top: 14px; }

.switch { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  flex: none; width: 36px; height: 21px; margin-top: 1px;
  background: var(--booth-600); border-radius: 999px;
  transition: background .18s;
  position: relative;
}
.switch__knob {
  position: absolute; top: 3px; left: 3px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--on-dark-soft);
  transition: transform .18s, background .18s;
}
.switch input:checked + .switch__track { background: color-mix(in srgb, var(--teal) 55%, transparent); }
.switch input:checked + .switch__track .switch__knob { transform: translateX(15px); background: var(--cream); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--mango); outline-offset: 2px; }
.switch__text { font-size: 13px; font-weight: 550; }
.switch__text small { display: block; font-weight: 400; font-size: 11.5px; color: var(--on-dark-dim); margin-top: 2px; line-height: 1.45; }

.formats__label {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-dark-dim); margin-bottom: 8px;
}
.formats { display: block; }
.check { display: inline-flex; align-items: center; gap: 7px; margin-right: 14px; font-size: 13px; cursor: pointer; }
.check input { accent-color: var(--teal); width: 15px; height: 15px; }

/* ── action bar ─────────────────────────────────────────────────────── */
.actionbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 25;
  display: flex; align-items: center; gap: 18px;
  height: var(--bar-h); padding: 0 20px;
  background: rgba(22,22,31,.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--hair);
}
.meters { display: flex; gap: 20px; flex: 1; min-width: 0; overflow: hidden; }
.meter { font-size: 12.5px; color: var(--on-dark-dim); white-space: nowrap; }
.meter b { color: var(--on-dark); font-weight: 600; font-variant-numeric: tabular-nums; }
.actionbar__buttons { display: flex; gap: 9px; }

/* ── preview strip ──────────────────────────────────────────────────── */
.previewbar {
  position: fixed; bottom: calc(var(--bar-h) + 12px); left: 20px; right: 20px; z-index: 26;
  display: flex; align-items: center; gap: 13px;
  max-width: 720px; margin: 0 auto;
  padding: 10px 12px;
  background: var(--booth-700);
  border: 1px solid var(--hair-firm); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  animation: rise .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.previewbar__play {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  color: #1C1508; background: var(--brass);
  border: 1px solid rgba(0,0,0,.3); border-radius: var(--r-sm); cursor: pointer;
}
.previewbar__play svg { width: 14px; height: 14px; }
.previewbar__meta { min-width: 0; }
.previewbar__meta strong { display: block; font-size: 13px; }
.previewbar__meta span { font-size: 11.5px; color: var(--on-dark-dim); }
/* A truncated sample has to look truncated, not like a finished render. */
.previewbar.is-partial { border-color: rgba(179, 134, 47, .6); }
.previewbar.is-partial .previewbar__meta span { color: var(--mango); }
.previewbar__badge {
  flex: none;
  padding: 3px 9px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #1C1508; background: var(--brass); border-radius: var(--r-sm);
}
.previewbar__wave { flex: 1; min-width: 60px; height: 34px; }

.i-pause { display: none; }
.is-playing .i-play { display: none; }
.is-playing .i-pause { display: block; }

/* ── overlays ───────────────────────────────────────────────────────── */
.stage, .drawer {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(11,11,16,.72);
  backdrop-filter: blur(6px);
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } }

.stage__panel {
  width: 100%; max-width: 520px;
  max-height: calc(100dvh - 40px); overflow: auto;
  padding: 26px;
  background: var(--booth-800);
  border: 1px solid var(--hair-firm); border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  animation: pop .26s cubic-bezier(.2,.7,.3,1);
}
.stage__panel--wide { max-width: 900px; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.stage__title {
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 40;
  font-size: 26px; font-weight: 600; line-height: 1.12;
  margin: 10px 0 6px; letter-spacing: -.015em;
}
.stage__msg { margin: 0 0 18px; color: var(--on-dark-soft); font-size: 14px; }
.stage__hint { margin: 0 0 18px; color: var(--on-dark-dim); font-size: 12.5px; }
.stage__row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.stage__counts {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--on-dark-dim);
  font-variant-numeric: tabular-nums; margin: 8px 0 18px;
}

.onair {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 8px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: var(--coral);
  background: rgba(192,57,43,.14);
  border: 1px solid rgba(192,57,43,.45); border-radius: var(--r-sm);
}
.onair span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--coral);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.track { height: 5px; background: var(--booth-600); border-radius: 999px; overflow: hidden; }
.track__fill {
  height: 100%; width: 0;
  background: var(--brass);
  border-radius: 999px;
  transition: width .45s cubic-bezier(.3,.8,.3,1);
}

/* ── result ─────────────────────────────────────────────────────────── */
.result { display: flex; flex-direction: column; }
.result__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.result__head > div:first-child { flex: 1; min-width: 0; }
.result__title {
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 40;
  font-size: 25px; font-weight: 600; line-height: 1.12;
  margin: 0 0 5px; letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
.result__sub { margin: 0; color: var(--on-dark-soft); font-size: 13.5px; }

.player {
  background: var(--booth-900);
  border: 1px solid var(--hair); border-radius: var(--r-md);
  padding: 14px; margin-bottom: 16px;
}
.player__wave { display: block; width: 100%; height: 132px; cursor: pointer; border-radius: var(--r-sm); }
.player__marks { position: relative; height: 16px; margin-top: 5px; }
.player__marks i {
  position: absolute; top: 0; width: 2px; height: 7px; border-radius: 1px;
  background: var(--band, var(--i-neutral));
}
.player__marks i::after {
  content: attr(data-n);
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: 700; color: var(--band);
  font-family: var(--sans);
}
.player__bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.playbtn {
  width: 42px; height: 42px; display: grid; place-items: center;
  color: #FFF3EC; background: var(--sindoor);
  border: 1px solid rgba(0,0,0,.35); border-radius: var(--r-sm);
  cursor: pointer;
}
.playbtn:hover { background: var(--sindoor-lift); }
.playbtn svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.timecode {
  margin-left: auto; font-size: 13px; color: var(--on-dark-dim);
  font-variant-numeric: tabular-nums;
}
.timecode b { color: var(--on-dark); font-weight: 600; }

.segments {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 190px; overflow: auto;
  margin-bottom: 18px;
  padding-right: 4px;
}
.seg {
  --band: var(--i-neutral);
  display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center;
  padding: 7px 10px; font-size: 13px;
  background: var(--booth-900);
  border-left: 2px solid var(--band); border-radius: var(--r-sm);
  cursor: pointer; text-align: left; border-top: 0; border-right: 0; border-bottom: 0;
  color: inherit; font-family: inherit;
}
.seg:hover { background: var(--booth-700); }
.seg.is-active { background: color-mix(in srgb, var(--band) 20%, var(--booth-900)); }
.seg__n { font-size: 10.5px; font-weight: 700; color: var(--band); font-variant-numeric: tabular-nums; }
.seg__text {
  font-family: var(--indic); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--on-dark-soft);
}
.seg__meta {
  font-size: 9.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--band); white-space: nowrap;
}

.result__foot { border-top: 1px solid var(--hair); padding-top: 16px; }
.downloads { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dl {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: var(--cream);
  background: var(--booth-600);
  border: 1px solid var(--hair-firm); border-radius: var(--r-sm);
  transition: border-color .15s, background .15s;
}
.dl:hover { border-color: var(--mango); background: var(--booth-500); }
.dl small { font-weight: 400; font-size: 11px; color: var(--on-dark-dim); }
.dl--primary { background: var(--teal); color: #06231F; border-color: transparent; }
.dl--primary small { color: rgba(6,35,31,.62); }
.dl--primary:hover { background: #37C4B3; }

.result__settings {
  display: flex; gap: 8px 18px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--on-dark-dim);
}
.result__settings b { color: var(--on-dark-soft); font-weight: 550; }

/* ── compare (transliteration review) ───────────────────────────────── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compare__side { min-width: 0; }
.compare__text {
  display: block; width: 100%; margin: 0;
  min-height: 240px; max-height: 46vh; overflow: auto;
  padding: 15px 17px;
  font-family: var(--indic); font-size: 15.5px; line-height: 1.85;
  white-space: pre-wrap; overflow-wrap: anywhere;
  color: #221E17; background: var(--paper);
  border: 1px solid var(--hair); border-radius: var(--r-md);
}
.compare__text--edit { resize: vertical; outline: none; }
.compare__text--edit:focus { box-shadow: 0 0 0 2px var(--mango); }

/* ── pronunciations ─────────────────────────────────────────────────── */
.pronlist { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.pronrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; align-items: center; }
.pronrow .input { padding: 8px 11px; font-size: 13.5px; }
.pronrow .input:last-of-type { font-family: var(--indic); }

/* ── drawer ─────────────────────────────────────────────────────────── */
.drawer { place-items: stretch; justify-content: flex-end; padding: 0; }
.drawer__panel {
  width: min(440px, 100%); height: 100%;
  display: flex; flex-direction: column;
  background: var(--booth-800);
  border-left: 1px solid var(--hair-firm);
  animation: slide .26s cubic-bezier(.2,.7,.3,1);
}
@keyframes slide { from { transform: translateX(28px); opacity: 0; } }
.drawer__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--hair);
}
.drawer__head h2 {
  flex: 1; margin: 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 20;
  font-size: 18px; font-weight: 600;
}
.drawer__body { flex: 1; overflow: auto; padding: 14px 18px 28px; }

.histproj { margin-bottom: 22px; }
.histproj__head {
  display: flex; align-items: baseline; gap: 9px;
  padding-bottom: 7px; margin-bottom: 8px;
  border-bottom: 1px solid var(--hair);
}
.histproj__name { font-size: 14px; font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.histproj__when { font-size: 11px; color: var(--on-dark-dim); }
.histrow {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  width: 100%; padding: 9px 10px; margin-bottom: 3px;
  font: inherit; font-size: 13px; text-align: left; color: inherit;
  background: var(--booth-900); border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.histrow:hover { background: var(--booth-700); }
.histrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--on-dark-dim); }
.histrow[data-status="completed"] .histrow__dot { background: var(--teal); }
.histrow[data-status="failed"]    .histrow__dot { background: var(--coral); }
.histrow[data-status="cancelled"] .histrow__dot { background: var(--on-dark-dim); }
.histrow__main { min-width: 0; }
.histrow__main b { display: block; font-weight: 550; }
.histrow__main span { font-size: 11px; color: var(--on-dark-dim); }
.histrow__dur { font-size: 12px; color: var(--on-dark-soft); font-variant-numeric: tabular-nums; }

.empty {
  padding: 30px 16px; text-align: center;
  font-size: 13.5px; color: var(--on-dark-dim);
}

/* ── toasts ─────────────────────────────────────────────────────────── */
.toasts {
  position: fixed; top: 66px; right: 16px; z-index: 70;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(390px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--on-dark);
  background: var(--booth-700);
  border: 1px solid var(--hair-firm);
  border-left: 3px solid var(--teal);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  animation: rise .24s cubic-bezier(.2,.7,.3,1);
  pointer-events: auto;
}
.toast--warn  { border-left-color: var(--mango); }
.toast--error { border-left-color: var(--coral); }
.toast b { display: block; margin-bottom: 2px; font-weight: 600; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  /* Editor first in the single-column flow: the script is the job, the
     casting choices come after it. */
  .casting { position: static; }
  .narrators { flex-direction: row; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .narrator { flex: 0 0 236px; scroll-snap-align: start; }
}

@media (max-width: 720px) {
  :root { --bar-h: 62px; }
  .work { padding: 14px 12px calc(var(--bar-h) + 26px); gap: 16px; }
  .topbar { padding: 9px 12px; gap: 10px; flex-wrap: wrap; }
  .topbar__project { order: 3; flex-basis: 100%; }
  .projectname { flex: 1; }
  .brand__name { font-size: 16px; }
  #btnHistory span, .btn--ghost#btnNew { font-size: 12.5px; }

  /* Keep the ribbon, but narrow it to a colour stripe: the plan is still
     legible at a glance without stealing width from the script. */
  .sheetwrap { grid-template-columns: 10px minmax(0, 1fr); }
  .ribbon { padding: 8px 0; gap: 2px; border-right: 0; }
  .ribbon__empty { display: none; }
  .band { padding: 0; min-height: 22px; border-left-width: 10px; border-radius: 0; }
  .band__intent, .band__nums, .band__tag { display: none; }

  .sheetwrap { height: auto; min-height: 44vh; }
  .sheet__text { padding: 18px 18px; font-size: 16.5px; min-height: 44vh; }
  .meters { gap: 12px; }
  .meter--seg { display: none; }
  .actionbar { padding: 0 12px; gap: 10px; }
  .actionbar__buttons { flex: 1; }
  .btn--primary { flex: 1; }
  .previewbar { left: 12px; right: 12px; bottom: calc(var(--bar-h) + 8px); }
  .previewbar__meta { display: none; }
  #previewFull { padding: 6px 10px; font-size: 11.5px; }
  .stage { padding: 0; place-items: end stretch; }
  .stage__panel {
    max-width: none; border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 92dvh; padding: 22px 18px;
  }
  .compare { grid-template-columns: 1fr; }
  .compare__text { min-height: 150px; }
  .toasts { top: auto; bottom: calc(var(--bar-h) + 12px); left: 12px; right: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}