/* Desktop-only chrome: first-run storage setup + license lock gate views. */

/* ---------------------------------------------------------------------------
   Titlebar. titleBarStyle:"hidden" + titleBarOverlay: Windows draws the real
   min/max/close buttons over the top-right of this strip; the strip itself is
   our brand mark and the drag handle. The overlay's colors follow the app theme
   via "window:setOverlayTheme" (see syncWindowOverlayTheme in src/app.js).
   Hidden in fullscreen — Chromium hides the overlay there too.
--------------------------------------------------------------------------- */
.desktop-titlebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10040;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 0 0 12px;
  background: var(--paper, #fbf7f1);
  border-bottom: 1px solid var(--line, rgba(83, 97, 113, 0.14));
  -webkit-app-region: drag;
  user-select: none;
}

.desktop-titlebar .brand-mark {
  width: 16px;
  height: 16px;
}

.desktop-titlebar-name {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--muted-strong, #3b4656);
}

/* The band the native buttons are painted on: no drag region under them, so the
   OS keeps the whole caption hit area (incl. Snap Layouts on the maximize button). */
.win-overlay-spacer {
  margin-left: auto;
  width: calc(100% - env(titlebar-area-width, 100%));
  height: 100%;
  -webkit-app-region: no-drag;
}

/* App content clears the bar; full-bleed fixed views start below it. */
body.medrak-desktop {
  padding-top: 36px;
}

.medrak-desktop .desktop-gate-view,
.medrak-desktop .signin-view.desktop-signin,
.medrak-desktop .desktop-start,
.medrak-desktop .app-loading-view {
  top: 36px;
}

.medrak-desktop .desktop-signin .signin-shell,
.medrak-desktop .desktop-signin .signin-art,
.medrak-desktop .desktop-signin .signin-card {
  height: calc(100vh - 36px);
}

/* Fullscreen focus mode: no chrome at all. */
:root:fullscreen .desktop-titlebar,
body.medrak-desktop.immersive-mode .desktop-titlebar {
  display: none;
}

:root:fullscreen body.medrak-desktop,
body.medrak-desktop.immersive-mode {
  padding-top: 0;
}

/* ---------------------------------------------------------------------------
   The desktop app never scrolls as a page: each view fits the window and
   scrolls internally where content can grow.
--------------------------------------------------------------------------- */
body.medrak-desktop {
  overflow: hidden;
}

/* The recorder is height-bounded on BOTH shells so its columns scroll inside
   themselves instead of growing the page. The narrator must never scroll the
   window to reach the transport or the take lanes. Desktop subtracts its 36px
   title bar; the web has no title bar. */
#recorderView.app-shell {
  height: 100dvh;
  min-height: 0;
}
.medrak-desktop #recorderView.app-shell {
  height: calc(100vh - 36px);
}

.immersive-mode #recorderView.app-shell {
  height: 100vh;
}

.workspace {
  position: relative; /* anchor for the collapsed-rail reopen handle */
  min-height: 0;
  overflow: hidden;
  /* Pin the single grid ROW to the workspace height (not to its content). An
     implicit `auto` row grows to the tallest item, so a tall panel pushes the
     tracks below the window even with min-height:0 on the items. minmax(0,1fr)
     is the definitive cap — the row is exactly the available height and items
     shrink into it. This is the real fix for the clipped tracks. */
  grid-template-rows: minmax(0, 1fr);
}

/* Collapsible chapter rail (TOC) — push it out of the way in both prep and
   record; a slim handle on the left edge brings it back. */
.book-rail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.book-rail-head-titles { min-width: 0; flex: 1 1 auto; }
.book-rail-collapse {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  background: transparent;
  color: var(--muted, #536171);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.book-rail-collapse:hover { background: rgba(17, 24, 39, 0.05); color: var(--ink, #111827); }
/* Collapsed: the rail leaves the grid (display:none), so the content column must
   become the WHOLE width — one column. Needs !important + high specificity to beat
   the book/prep grids (which are declared !important). Placed once here and again
   after the responsive block so it also wins inside the media queries. */
body.book-mode .workspace.rail-collapsed,
body.book-mode .workspace.rail-collapsed.settings-panel-hidden,
body.prep-mode .workspace.rail-collapsed,
body.prep-mode .workspace.rail-collapsed.settings-panel-hidden {
  grid-template-columns: minmax(0, 1fr) !important;
}
body.book-mode .workspace.rail-collapsed .book-rail,
body.prep-mode .workspace.rail-collapsed .book-rail { display: none !important; }
.book-rail-reopen {
  position: absolute;
  left: 6px;
  top: 14px;
  z-index: 6;
  width: 24px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  background: var(--surface, rgba(255, 255, 255, 0.95));
  color: var(--muted, #536171);
  cursor: pointer;
  box-shadow: var(--small-shadow, 0 12px 30px rgba(17, 24, 39, 0.08));
  transition: color 140ms ease, background 140ms ease;
}
.book-rail-reopen:hover { color: var(--coral-strong, #e6534b); background: var(--surface-solid, #fff); }
.book-rail-reopen[hidden] { display: none; }
body.immersive-mode .book-rail-reopen { display: none !important; }

.script-panel,
.settings-panel {
  min-height: 0;
  overflow-y: auto;
}

/* The recording panel (teleprompter + transport + tracks) and the book rail are
   grid items too — WITHOUT min-height:0 they keep min-height:auto and refuse to
   shrink, so their content expands the grid row past the window and the tracks
   panel is clipped off the bottom on laptop screens. This is the fix for
   "the whole tracks section isn't visible in record mode". */
.recording-panel,
.book-rail {
  min-height: 0;
}

.medrak-desktop .profile-view,
.medrak-desktop .project-library-view {
  height: calc(100vh - 36px);
  /* styles.css gives these views min-height:100vh for the web page flow; on
     desktop that overrode the height above, so the scroll container ran 36px
     PAST the window — the last band of content could never scroll into view. */
  min-height: 0;
  overflow-y: auto;
}

/* Laptop-width windows: the 0.8fr/1.2fr two-column card grid leaves a huge
   empty cell whenever a row has one card (the "blank bottom third" on 13–15"
   displays). Stack the cards instead; wide monitors keep the two columns. */
@media (max-width: 1600px) {
  .medrak-desktop .profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* No scrollbars anywhere in the desktop app. Scroll groups still scroll via
   wheel/trackpad; discoverability comes from edge-fade masks and, on the Start
   shelf, arrow controls. A native-app surface never shows a browser page bar. */
.medrak-desktop ::-webkit-scrollbar { width: 0; height: 0; display: none; }
.medrak-desktop * { scrollbar-width: none; -ms-overflow-style: none; }

/* The desktop shell's VIEWPORT never scrolls — views scroll internally.
   overflow:hidden is still programmatically scrollable, so focus restoration
   and scrollIntoView against the nested view scrollers could displace the
   whole document (the app shoved off-screen with a giant void below — the
   Profile "giant square"). clip is not scrollable at all. A JS clamp in
   initDesktopApp backs this up on engines that displace the visual viewport
   anyway. */
html.medrak-desktop,
body.medrak-desktop {
  overflow: clip;
}

.desktop-gate-view {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background:
    radial-gradient(120% 140% at 85% 10%, rgba(255, 112, 91, 0.14), transparent 55%),
    radial-gradient(90% 120% at 10% 90%, rgba(86, 132, 255, 0.1), transparent 60%),
    var(--bg, #0a0c10);
}

.desktop-gate-card {
  width: min(560px, 92vw);
  padding: 40px 44px;
  border-radius: 8px;
  border: 1px solid var(--line, #232a34);
  background: var(--panel, #10141b);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.desktop-gate-card .brand-mark {
  display: inline-block;
  margin-bottom: 18px;
}

.desktop-gate-card h1 {
  margin: 10px 0 12px;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--text, #e8ecf1);
}

.desktop-gate-card p {
  margin: 0 0 10px;
  line-height: 1.55;
  color: var(--muted-strong, #aeb7c4);
}

.desktop-gate-note strong {
  color: var(--text, #e8ecf1);
}

.desktop-gate-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.desktop-gate-status {
  margin-top: 14px;
  min-height: 1.2em;
  font-size: 13px;
  color: var(--muted, #8b95a5);
}

.desktop-gate-status.error {
  color: var(--danger, #ff705b);
}

/* ---------------------------------------------------------------------------
   Desktop sign-in: Adobe-style half image / half form, full window.
   All rules scoped to .medrak-desktop so the web sign-in is untouched.
--------------------------------------------------------------------------- */
.medrak-desktop .signin-view.desktop-signin {
  position: fixed;
  inset: 0;
  padding: 0;
  display: block;
  background: #ffffff;
  overflow: hidden;
}

.medrak-desktop .desktop-signin .signin-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100vh;
  max-width: none;
  margin: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* Left: photograph with brand scrim + headline */
.medrak-desktop .desktop-signin .signin-art {
  position: relative;
  overflow: hidden;
  height: 100vh;
  padding: 0;
  border-radius: 0;
  min-height: 0;
}
.medrak-desktop .desktop-signin .signin-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
}
.medrak-desktop .desktop-signin .signin-art-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 46px 52px;
  background: linear-gradient(to top, rgba(9, 11, 15, 0.9), rgba(9, 11, 15, 0.35) 58%, transparent);
  color: #fff;
  visibility: visible;
}
.medrak-desktop .desktop-signin .signin-art-overlay .brand-mark {
  width: 46px;
  height: 46px;
  display: inline-block;
  margin-bottom: 20px;
}
.medrak-desktop .desktop-signin .signin-art-overlay h1 {
  margin: 0 0 12px;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
}
.medrak-desktop .desktop-signin .signin-art-overlay p {
  margin: 0;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
  visibility: visible;
}

/* Right: form panel */
.medrak-desktop .desktop-signin .signin-card {
  height: 100vh;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.medrak-desktop .desktop-signin .signin-card-inner {
  width: 100%;
  max-width: 384px;
  display: flex;
  flex-direction: column;
}
.medrak-desktop .desktop-signin #authTabs { display: none; }
/* The shared in-app "forgot" (mode switch) is replaced by a browser link. */
.medrak-desktop .desktop-signin #forgotPasswordButton { display: none; }
.medrak-desktop .desktop-signin .desktop-auth-link {
  display: block;
  align-self: flex-end;
  margin: -6px 0 4px;
}

.medrak-desktop .desktop-signin #authEyebrow {
  color: var(--coral-strong, #e6534b);
  font-weight: 700;
}
.medrak-desktop .desktop-signin #authTitle {
  margin: 8px 0 6px;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--ink, #111827);
}
.medrak-desktop .desktop-signin .signin-sub {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--muted, #536171);
  visibility: visible;
}
.medrak-desktop .desktop-signin .auth-inline-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--coral-strong, #e6534b);
  font-weight: 600;
}
.medrak-desktop .desktop-signin .auth-inline-link:hover { text-decoration: underline; }

.medrak-desktop .desktop-signin .signin-card label {
  color: var(--muted-strong, #3b4656);
  font-size: 13px;
  font-weight: 600;
}
.medrak-desktop .desktop-signin .signin-card input {
  background: #fff;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.28));
  color: var(--ink, #111827);
}
.medrak-desktop .desktop-signin .signin-card input:focus {
  border-color: var(--coral, #f97066);
  outline: none;
  box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.16);
}
.medrak-desktop .desktop-signin .signin-submit { width: 100%; margin-top: 8px; }
.medrak-desktop .desktop-signin .signin-trial {
  margin: 22px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted, #536171);
  visibility: visible;
}

/* ---------------------------------------------------------------------------
   Desktop Start screen — replaces the file library. Adobe-style: recent
   projects + New / Open. Light/warm theme, scoped to .medrak-desktop.
--------------------------------------------------------------------------- */
.medrak-desktop #projectLibraryView { display: none !important; }

.medrak-desktop #desktopStartView { display: none; }
.medrak-desktop.project-library-active #desktopStartView {
  display: flex;
  flex-direction: column;
}

.desktop-start {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* The view itself never scrolls as a page — the topbar is fixed and the body
     is the scroll group, so any scrollbar sits inside the centered content
     column, not at the window edge. */
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(55, 199, 181, 0.1), transparent 46%),
    radial-gradient(110% 80% at 0% 100%, rgba(249, 112, 102, 0.09), transparent 50%),
    var(--paper, #fbf7f1);
}

.start-topbar {
  flex: 0 0 auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  /* Token-based so the header follows every Appearance theme (was a hardcoded
     cream that stayed light over the dark body). */
  background: rgba(var(--surface-rgb, 255, 255, 255), 0.82);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line, rgba(83, 97, 113, 0.18));
}
.start-brand { display: flex; align-items: center; gap: 14px; }
/* Web only: the brand is a link back to the landing page (inert on desktop,
   where Start IS home) — see bindWorkspaceEvents. */
body:not(.medrak-desktop) .start-brand { cursor: pointer; }
body:not(.medrak-desktop) .start-brand:hover h1 { color: var(--accent, #e6534b); }
.start-brand .brand-mark { width: 38px; height: 38px; }
.start-brand h1 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink, #111827); }
.start-brand p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted, #536171); }
.start-topbar-actions { display: flex; gap: 10px; }

/* The Start view fills the window as a flex column and never page-scrolls: a
   compact launch band, the practice dashboard, then Recent projects as a
   horizontal shelf that takes the remaining height and scrolls sideways. */
.start-body {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 40px 22px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
}

/* Launch band — copy on the left, the two entry actions on the right. */
.start-launch {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.start-launch-copy { min-width: 0; }
.start-launch .eyebrow { color: var(--coral-strong, #e6534b); font-weight: 700; }
.start-launch h2 {
  margin: 8px 0 6px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink, #111827);
  text-wrap: balance;
}
.start-lede { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted, #536171); max-width: 52ch; }
.start-lede code { background: rgba(17, 24, 39, 0.06); padding: 1px 6px; border-radius: 5px; font-size: 0.9em; }

.start-actions { flex: 0 0 auto; display: flex; gap: 14px; }
.start-action {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 250px;
  padding: 16px 18px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  box-shadow: var(--small-shadow, 0 12px 30px rgba(17, 24, 39, 0.08));
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms ease, border-color 160ms ease;
}
.start-action:hover { transform: translateY(-2px); box-shadow: var(--shadow, 0 24px 70px rgba(17, 24, 39, 0.12)); border-color: rgba(249, 112, 102, 0.4); }
.start-action-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(17, 24, 39, 0.05);
  color: var(--ink, #111827);
}
.start-action-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.start-action-primary .start-action-icon { background: linear-gradient(145deg, var(--coral, #f97066), var(--coral-strong, #e6534b)); color: #fff; }
.start-action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.start-action-text strong { font-size: 15px; color: var(--ink, #111827); }
.start-action-text small { font-size: 12px; color: var(--muted, #536171); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Practice dashboard: compact on the Start screen so the shelf keeps its room. */
.desktop-start .start-insights { flex: 0 0 auto; margin: 0; }
.desktop-start .insights-chart { height: 118px; }
.desktop-start .insights-sessions .insights-session { padding: 7px 0; }

/* Recent — header row + horizontal project shelf that fills the rest. */
.start-recent {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.start-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.start-recent-head h3 { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted-strong, #3b4656); }
.start-recent-tools { display: flex; align-items: center; gap: 10px; }
.start-recent-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.start-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--muted, #536171) 12%, transparent);
}
.start-seg-btn {
  border: 0;
  background: transparent;
  color: var(--muted, #536171);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease, box-shadow 130ms ease;
}
.start-seg-btn:hover { color: var(--ink, #111827); }
.start-seg-btn.is-active {
  background: var(--surface-solid, #fff);
  color: var(--ink, #111827);
  box-shadow: var(--small-shadow, 0 12px 30px rgba(17, 24, 39, 0.08));
}
.start-search {
  width: min(240px, 40vw);
  padding: 8px 13px;
  border-radius: 9px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  background: var(--surface-solid, #fff);
  color: var(--ink, #111827);
  font-size: 13.5px;
}
.start-search:focus { outline: none; border-color: var(--coral, #f97066); box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.16); }

.start-shelf-nav { display: flex; gap: 6px; }
.shelf-arrow {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink, #111827);
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  transition: background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
.shelf-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shelf-arrow:hover:not(:disabled) { border-color: rgba(249, 112, 102, 0.45); color: var(--coral-strong, #e6534b); }
.shelf-arrow:disabled { opacity: 0.34; cursor: default; }

/* Scroll group: hidden bar, horizontal scroll, edge-fade masks toggled by JS. */
.start-shelf { position: relative; flex: 1 1 auto; min-height: 0; }
/* Cards flow top-to-bottom then across in columns. auto-fill sizes the row
   count to the band height (1 row on a short window, several on a tall one), so
   the shelf fills its space, never clips, and scrolls horizontally — no bar. */
.start-recent-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 104px);
  grid-auto-columns: 300px;
  align-content: center;
  gap: 14px;
  height: 100%;
  padding: 0 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.start-recent-card { box-sizing: border-box; scroll-snap-align: start; }
.start-shelf.fade-left .start-recent-list {
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 42px);
          mask: linear-gradient(90deg, transparent 0, #000 42px);
}
.start-shelf.fade-right .start-recent-list {
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 42px), transparent 100%);
          mask: linear-gradient(90deg, #000 calc(100% - 42px), transparent 100%);
}
.start-shelf.fade-left.fade-right .start-recent-list {
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
}
.start-shelf .start-empty {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}
.start-no-matches { align-self: center; margin: 0; padding: 0 6px; color: var(--muted, #536171); font-size: 14px; }
.start-recent-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 11px;
  cursor: pointer;
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  box-shadow: var(--small-shadow, 0 12px 30px rgba(17, 24, 39, 0.08));
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 150ms ease, border-color 150ms ease;
}
.start-recent-card:hover { transform: translateY(-2px); box-shadow: var(--shadow, 0 24px 70px rgba(17, 24, 39, 0.12)); border-color: rgba(37, 127, 120, 0.35); }
.start-card-thumb {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 9px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(55, 199, 181, 0.92), rgba(37, 127, 120, 0.92));
}
.start-card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 2px, transparent 2px 6px);
  -webkit-mask: radial-gradient(circle at 50% 130%, #000 38%, transparent 72%);
          mask: radial-gradient(circle at 50% 130%, #000 38%, transparent 72%);
  opacity: 0.5;
}
.start-card-body { flex: 1; min-width: 0; }
.start-card-body h4 { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--ink, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.start-card-meta { margin: 0; font-size: 12.5px; color: var(--muted, #536171); }
.start-card-stat { margin: 3px 0 0; font-size: 12px; color: var(--muted, #536171); opacity: 0.86; }
.start-card-shared {
  position: absolute;
  top: 10px;
  right: 42px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue, #257f78);
  background: color-mix(in srgb, var(--mint, #37c7b5) 20%, transparent);
  pointer-events: none;
}
.start-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #536171);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 130ms ease, background 130ms ease, color 130ms ease;
}
.start-recent-card:hover .start-card-delete,
.start-card-delete:focus-visible { opacity: 1; }
.start-card-delete:hover { background: #fff0ee; color: var(--coral-strong, #e6534b); }
.start-card-delete svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Practice insights styles moved to src/styles.css (shared by desktop Start
   screen + web Profile). Single source of truth lives there now. */

.start-empty { text-align: center; padding: 60px 20px; }
.start-empty-mark { display: inline-block; width: 52px; height: 52px; border-radius: 13px; background: rgba(17, 24, 39, 0.05); margin-bottom: 16px; }
.start-empty h4 { margin: 0 0 6px; font-size: 18px; color: var(--ink, #111827); }
.start-empty p { margin: 0 0 18px; color: var(--muted, #536171); }
.start-no-matches { color: var(--muted, #536171); font-size: 14px; padding: 8px 2px; }

.start-status { position: fixed; left: 40px; bottom: 16px; font-size: 13px; color: var(--muted, #536171); }
.start-status.error { color: var(--coral-strong, #e6534b); }
.start-status.saved { color: var(--green, #1ea672); }

@media (prefers-reduced-motion: reduce) {
  .start-action, .start-recent-card { transition: none; }
  .start-action:hover, .start-recent-card:hover { transform: none; }
}

/* Distinct project-type icons on Start cards: mic = voice over (coral thumb),
   open book = narration (teal thumb). */
.start-card-thumb.has-kind-icon { display: grid; place-items: center; }
.start-card-thumb.has-kind-icon::after { display: none; }
.start-card-thumb.has-kind-icon:not(.is-book) {
  background: linear-gradient(145deg, var(--coral, #f97066), var(--coral-strong, #e6534b));
}
.start-card-kind-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.start-card-thumb.is-book .start-card-kind-icon { margin-bottom: 8px; }

/* Audiobook card on the Start screen */
.start-card-thumb.is-book { background: linear-gradient(155deg, #257f78, #1c5f5a); }
.start-card-badge {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   New Project view: full-screen type picker + narration import flow.
   Shown in place of the Start screen via body.project-create-active.
--------------------------------------------------------------------------- */
#projectCreateView { display: none; }
.medrak-desktop.project-create-active.project-library-active #desktopStartView { display: none; }
body.project-create-active.project-library-active #projectCreateView { display: flex; flex-direction: column; }

.project-create {
  position: fixed;
  inset: 0;
  top: 36px;
  overflow-y: auto;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(55, 199, 181, 0.1), transparent 46%),
    radial-gradient(110% 80% at 0% 100%, rgba(249, 112, 102, 0.09), transparent 50%),
    var(--paper, #fbf7f1);
}

.create-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 40px;
  background: rgba(var(--surface-rgb, 255, 255, 255), 0.82);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line, rgba(83, 97, 113, 0.18));
}
.create-topbar h1 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink, #111827); }
.create-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  background: var(--surface-solid, #fff);
  color: var(--ink, #111827);
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.create-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.create-back:hover { border-color: rgba(249, 112, 102, 0.4); box-shadow: var(--small-shadow, 0 12px 30px rgba(17, 24, 39, 0.08)); }

.create-body {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 44px 40px 72px;
}

.create-step h2 { margin: 0 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink, #111827); text-wrap: balance; }
.create-lede { margin: 0 0 30px; font-size: 15px; line-height: 1.55; color: var(--muted, #536171); max-width: 60ch; }

/* Step 1: two large type cards */
.create-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.create-type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px 26px 22px;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  box-shadow: var(--small-shadow, 0 12px 30px rgba(17, 24, 39, 0.08));
  transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 170ms ease, border-color 170ms ease;
}
.create-type-card:hover { transform: translateY(-3px); box-shadow: var(--shadow, 0 24px 70px rgba(17, 24, 39, 0.12)); border-color: rgba(249, 112, 102, 0.45); }
.create-type-card:active { transform: translateY(-1px); }
.create-type-icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(17, 24, 39, 0.05);
  color: var(--ink, #111827);
  margin-bottom: 4px;
}
#createTypeVoiceOver .create-type-icon { background: linear-gradient(145deg, var(--coral, #f97066), var(--coral-strong, #e6534b)); color: #fff; }
#createTypeNarration .create-type-icon { background: linear-gradient(155deg, #257f78, #1c5f5a); color: #fff; }
.create-type-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.create-type-card strong { font-size: 17px; font-weight: 800; color: var(--ink, #111827); }
.create-type-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted, #536171); }
.create-type-card small { font-size: 12px; font-weight: 650; color: var(--blue, #257f78); margin-top: 6px; }

/* Parsing state */
.create-parsing { display: flex; align-items: center; gap: 20px; padding: 34px 0; }
.create-parsing h2 { margin: 0 0 4px; font-size: 21px; }
.create-parsing p { margin: 0; color: var(--muted, #536171); font-size: 14px; }
.create-parsing-pulse {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--coral, #f97066), rgba(249, 112, 102, 0.25));
  animation: create-pulse 1.15s ease-in-out infinite;
}
@keyframes create-pulse {
  0%, 100% { transform: scale(0.86); opacity: 0.75; }
  50% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .create-parsing-pulse { animation: none; }
  .create-type-card { transition: none; }
  .create-type-card:hover { transform: none; }
}

/* Step 2: chapter review */
.create-review-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.create-review-title { flex: 1; max-width: 460px; }
.create-review-title label { display: block; font-size: 12px; font-weight: 700; color: var(--muted-strong, #3b4656); margin-bottom: 6px; }
.create-review-title input {
  width: 100%;
  padding: 10px 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #111827);
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  border-radius: 9px;
  background: var(--surface-solid, #fff);
}
.create-review-title input:focus { outline: none; border-color: var(--coral, #f97066); box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.16); }
.create-book-meta { margin: 0 0 4px; font-size: 13px; color: var(--muted, #536171); white-space: nowrap; }

.create-warnings {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 9px;
  border: 1px solid rgba(243, 201, 105, 0.55);
  background: rgba(243, 201, 105, 0.14);
  font-size: 13.5px;
  line-height: 1.5;
  color: #6b5620;
}
.create-warnings p { margin: 0; }
.create-warnings p + p { margin-top: 6px; }

.create-segmentation { margin: 0 0 26px; }
.create-segmentation-label { display: block; font-size: 12px; font-weight: 700; color: var(--muted-strong, #3b4656); margin-bottom: 8px; }
.create-segmentation-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.create-seg-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  background: var(--surface-solid, #fff);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.create-seg-option:hover { border-color: rgba(249, 112, 102, 0.4); }
.create-seg-option:has(input:checked) { border-color: var(--coral, #f97066); box-shadow: 0 0 0 1px var(--coral, #f97066) inset; }
.create-seg-option:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.3); }
.create-seg-option input { margin-top: 3px; accent-color: var(--coral-strong, #e6534b); }
.create-seg-option span { display: flex; flex-direction: column; gap: 2px; }
.create-seg-option strong { font-size: 13.5px; font-weight: 700; color: var(--ink, #111827); }
.create-seg-option small { font-size: 12px; color: var(--muted, #536171); line-height: 1.45; }

.create-chapter-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 10px; }
.create-chapter-head h3 { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted-strong, #3b4656); }
.create-chapter-head p { margin: 0; font-size: 12.5px; color: var(--muted, #536171); flex: 1; }
.create-toc-toggle { flex: 0 0 auto; }

.create-toc-section {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  background: var(--surface-solid, #fff);
}
.create-toc-section p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted, #536171); max-width: 70ch; }
.create-toc-section textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  background: var(--surface-solid, #fff);
  color: var(--ink, #111827);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.create-toc-section textarea:focus { outline: none; border-color: var(--coral, #f97066); box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.16); }
.create-toc-actions { display: flex; justify-content: flex-end; margin-top: 10px; }

.create-split-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-strong, #3b4656);
}

/* Pick-a-title panel: mark example headings in the raw text. */
.create-pick-section {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  background: var(--surface-solid, #fff);
}
.create-pick-section > p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted, #536171); max-width: 74ch; }
.create-pick-summary { font-weight: 700; color: var(--ink, #111827) !important; }
.create-pick-actions { display: flex; gap: 10px; margin: 10px 0 12px; }
.create-pick-list {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  border-radius: 8px;
}
.create-pick-empty { padding: 14px; font-size: 12.5px; color: var(--muted, #536171); }
.create-pick-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  border: 0;
  border-bottom: 1px solid var(--line, rgba(83, 97, 113, 0.14));
  background: transparent;
  color: var(--ink, #111827);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease;
}
.create-pick-row:hover { background: rgba(17, 24, 39, 0.04); }
.create-pick-row:last-child { border-bottom: 0; }
.create-pick-row.is-match { background: rgba(37, 199, 181, 0.1); }
.create-pick-row.is-chapter { background: rgba(249, 112, 102, 0.14); box-shadow: inset 2px 0 0 var(--coral-strong, #e6534b); }
.create-pick-row.is-part { background: rgba(37, 127, 120, 0.16); box-shadow: inset 2px 0 0 var(--blue, #257f78); }
.create-pick-tag {
  flex: 0 0 58px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #536171);
}
.create-pick-row.is-chapter .create-pick-tag { color: var(--coral-strong, #e6534b); }
.create-pick-row.is-part .create-pick-tag { color: var(--blue, #257f78); }
.create-pick-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.create-chapter-list {
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  border-radius: 11px;
  background: var(--surface-solid, #fff);
  overflow: hidden;
  margin-bottom: 24px;
}
.create-chapter-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
}

.create-chapter-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(243, 201, 105, 0.55);
  background: rgba(243, 201, 105, 0.18);
  color: color-mix(in srgb, var(--sun, #f3c969) 40%, var(--ink, #111827));
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: help;
}

/* Split panel: pick the paragraph where a new chapter starts. */
.create-split-panel {
  border-top: 1px dashed var(--line, rgba(83, 97, 113, 0.18));
  background: rgba(17, 24, 39, 0.025);
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 14px 10px;
}
.create-split-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
}
.create-split-here {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  background: var(--surface-solid, #fff);
  color: var(--muted, #536171);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color 130ms ease, border-color 130ms ease;
}
.create-split-here:hover:not(:disabled) { color: var(--coral-strong, #e6534b); border-color: rgba(249, 112, 102, 0.45); }
.create-split-here:disabled { visibility: hidden; }
.create-split-preview {
  font-size: 12.5px;
  color: var(--muted, #536171);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.create-chapter-row + .create-chapter-row { border-top: 1px solid var(--line, rgba(83, 97, 113, 0.18)); }
.create-chapter-row.is-excluded { opacity: 0.45; }
.create-chapter-row input[type="checkbox"] { accent-color: var(--coral-strong, #e6534b); width: 15px; height: 15px; }
.create-chapter-row .chapter-title-input {
  width: 100%;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #111827);
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
}
.create-chapter-row .chapter-title-input:hover { border-color: var(--line, rgba(83, 97, 113, 0.18)); }
.create-chapter-row .chapter-title-input:focus { outline: none; border-color: var(--coral, #f97066); background: var(--surface-solid, #fff); box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.14); }
.create-chapter-words { font-size: 12.5px; color: var(--muted, #536171); white-space: nowrap; font-variant-numeric: tabular-nums; }
.create-chapter-merge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted, #536171);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.create-chapter-merge:hover { color: var(--ink, #111827); border-color: var(--line, rgba(83, 97, 113, 0.18)); }
.create-chapter-merge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.create-chapter-merge[disabled] { visibility: hidden; }

.create-review-actions { display: flex; justify-content: flex-end; gap: 12px; }

.create-status { position: fixed; left: 40px; bottom: 16px; font-size: 13px; color: var(--muted, #536171); }
.create-status.error { color: var(--coral-strong, #e6534b); }
.create-status.saved { color: var(--green, #1ea672); }
.create-status.pending { color: var(--muted, #536171); }

/* ---------------------------------------------------------------------------
   Book workspace: chapter rail replaces the script panel while a chapter of
   an audiobook is open (body.book-mode, desktop only).
--------------------------------------------------------------------------- */
body.book-mode .workspace {
  grid-template-columns: minmax(230px, 0.58fr) minmax(440px, 1.9fr) minmax(260px, 0.72fr);
}
body.book-mode .workspace.settings-panel-hidden {
  grid-template-columns: minmax(230px, 0.6fr) minmax(440px, 2.2fr);
}
body.book-mode .script-panel { display: none; }
body.book-mode .book-rail { display: flex; }
body.immersive-mode .book-rail { display: none !important; }

.book-rail {
  display: none;
  flex-direction: column;
  min-height: 0;
  padding: 16px 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  background: var(--surface, rgba(255, 255, 255, 0.92));
  box-shadow: var(--small-shadow, 0 12px 30px rgba(17, 24, 39, 0.08));
}
.book-rail-head { padding: 0 6px 10px; }
.book-rail-book { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink, #111827); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-rail-book.is-renamable { cursor: text; }
.book-rail-book.is-renamable:hover { text-decoration: underline dotted var(--muted, #9aa3af); text-underline-offset: 3px; }
.book-rail-book[contenteditable="true"] { white-space: normal; overflow: visible; outline: 2px solid var(--brand, #e6534b); outline-offset: 3px; border-radius: 4px; }
.book-rail-meta { margin: 3px 0 0; font-size: 12px; color: var(--muted, #536171); }
.book-rail-filter {
  margin: 0 2px 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  background: var(--surface-solid, #fff);
  color: var(--ink, #111827);
  font-size: 13px;
}
.book-rail-filter:focus { outline: none; border-color: var(--coral, #f97066); box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.16); }
.book-rail-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 2px; }
.book-rail-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease;
}
.book-rail-item:hover { background: rgba(17, 24, 39, 0.04); }
.book-rail-item.is-active { background: rgba(249, 112, 102, 0.1); border-color: rgba(249, 112, 102, 0.35); }
.book-rail-item-title { font-size: 13px; font-weight: 650; color: var(--ink, #111827); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-rail-item.is-active .book-rail-item-title { color: var(--coral-strong, #e6534b); }
.book-rail-item-state { font-size: 11px; color: var(--muted, #536171); white-space: nowrap; font-variant-numeric: tabular-nums; }
.book-rail-item-state.is-recorded { color: var(--green, #1ea672); font-weight: 700; }
.book-rail-empty { padding: 10px; font-size: 12.5px; color: var(--muted, #536171); }
.book-rail-export { margin: 10px 2px 0; }

/* Characters: a BOUNDED, collapsible section so a big cast can never crowd out
   the chapter list above it. The chip list caps its height and scrolls inside
   (desktop hides the scrollbar); the header is a toggle; a scope switch narrows
   to just the speakers present in the open chapter. */
.book-rail-characters {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  padding: 10px 6px 0;
  border-top: 1px solid var(--line, rgba(83, 97, 113, 0.18));
}
.book-rail-characters-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 8px;
  padding: 2px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #536171);
}
.book-rail-characters-title { flex: 0 0 auto; }
.book-rail-characters-count {
  flex: 1 1 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted, #536171);
  opacity: 0.7;
}
.book-rail-chevron { flex: 0 0 auto; transition: transform 160ms ease; }
/* <details> hides the body itself when closed; only the chevron needs a cue. */
.book-rail-characters:not([open]) .book-rail-chevron { transform: rotate(-90deg); }
.book-rail-characters-head::-webkit-details-marker { display: none; }
.book-rail-characters-head { list-style: none; }
.book-rail-characters-body { display: flex; flex-direction: column; min-height: 0; }
.book-rail-character-scope {
  display: inline-flex;
  gap: 2px;
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(83, 97, 113, 0.1);
}
.book-rail-scope-seg {
  padding: 3px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted, #536171);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.book-rail-scope-seg.is-active {
  background: var(--surface-solid, #fff);
  color: var(--ink, #111827);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12);
}
.book-rail-character-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  max-height: 30vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.book-rail-character-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.book-rail-character {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  background: var(--surface-solid, #fff);
  font-size: 12px;
  font-weight: 650;
  color: var(--ink, #111827);
}
.book-rail-character .character-menu-dot { width: 9px; height: 9px; }
.book-rail-hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted, #536171); }

/* Collaboration: roster in the book rail, claim badges on cast chips, and the
   owner's assign menu. Member colors are deterministic per user id. */
.collab-member-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.collab-member { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12.5px; color: var(--ink, #111827); }
.collab-member-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: 0.35;
}
.collab-member-dot.is-online { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, rgba(30, 166, 114, 0.18)); }
/* Cast avatar: the member's initials (or their profile icon) on their brand color. */
.collab-member-dot.has-glyph {
  width: 26px;
  height: 26px;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--member-color, var(--muted, #536171));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
}
.collab-member-dot.has-glyph.is-online { box-shadow: 0 0 0 2px var(--surface-solid, #fff), 0 0 0 4px rgba(30, 166, 114, 0.55); }

/* Profile "cast icon" picker */
.profile-icon-picker { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.profile-icon-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.profile-icon-option {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.2));
  background: var(--surface, rgba(255, 255, 255, 0.9));
  font-size: 19px; line-height: 1;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 120ms ease;
}
.profile-icon-option.is-initials { font-size: 13px; font-weight: 800; letter-spacing: 0.03em; color: var(--ink, #111827); }
.profile-icon-option:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--coral, #f97066) 55%, var(--line)); }
.profile-icon-option.is-active { border-color: var(--coral, #f97066); box-shadow: 0 0 0 2px color-mix(in srgb, var(--coral, #f97066) 30%, transparent); background: color-mix(in srgb, var(--coral, #f97066) 8%, var(--surface)); }
.profile-icon-input {
  width: 44px; height: 38px;
  text-align: center;
  border-radius: 10px;
  border: 1px dashed var(--line, rgba(83, 97, 113, 0.35));
  background: transparent;
  font-size: 17px;
  color: var(--ink, #111827);
}
.profile-icon-input:focus { outline: none; border-color: var(--coral, #f97066); border-style: solid; box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.16); }
.profile-icon-upload { font-size: 20px; color: var(--muted, #536171); font-weight: 700; }
.profile-icon-option.has-image { background-size: cover; background-position: center; color: transparent; border-color: var(--coral, #f97066); }
.collab-member-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collab-member-role { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #536171); }
.collab-member-remove {
  border: 0;
  background: transparent;
  color: var(--muted, #536171);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 6px;
}
.collab-member-remove:hover { background: #fff0ee; color: var(--coral-strong, #e6534b); }
.collab-member-role-toggle {
  flex: 0 0 auto;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.2));
  background: transparent;
  color: var(--muted, #536171);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.collab-member-role-toggle:hover { border-color: rgba(249, 112, 102, 0.5); color: var(--coral-strong, #e6534b); }
#collabStatus.error { color: var(--coral-strong, #e6534b); }
#collabStatus.saved { color: var(--green, #1ea672); }

/* Top-bar Share button + collaboration modal (replaces the buried rail block). */
.collab-share-button.is-active {
  border-color: color-mix(in srgb, var(--coral-strong, #e6534b) 55%, transparent);
  color: var(--coral-strong, #e6534b);
}

/* <dialog>: the UA centers it, paints ::backdrop, and handles Escape. */
.collab-modal {
  width: min(440px, calc(100vw - 48px));
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.collab-modal::backdrop { background: rgba(17, 24, 39, 0.45); backdrop-filter: blur(2px); }

.collab-modal-card {
  position: relative;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 28px 28px 24px;
  border-radius: 18px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(83, 97, 113, 0.14));
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.28);
}

.collab-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #536171);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.collab-modal-close:hover { background: color-mix(in srgb, var(--muted, #536171) 12%, transparent); }

.collab-modal-card h2 { margin: 6px 0 8px; }

.collab-modal-lead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #536171);
}

.collab-modal-roster-head {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #536171);
}

.collab-modal-roster { margin-bottom: 18px; }

.collab-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.collab-modal-actions .primary-button { flex: 1 1 auto; }

/* Guest-seat counter: how much of the Studio seat pool is in use, and the
   inline path to buying more. Sits between the roster and the invite field so
   the owner sees the cost of an invite before they send it. */
.collab-seats {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
  background: color-mix(in srgb, var(--ink, #111827) 4%, transparent);
}
.collab-seats[hidden] { display: none; }
.collab-seats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.collab-seats-count { font-size: 13px; color: var(--ink, #111827); }
.collab-seats-count strong { font-variant-numeric: tabular-nums; font-weight: 800; }
.collab-seats-add {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--coral-strong, #e6534b);
}
.collab-seats-bar {
  height: 6px;
  margin: 9px 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink, #111827) 10%, transparent);
  overflow: hidden;
}
.collab-seats-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint, #37c7b5), var(--blue, #257f78));
  transition: width 200ms ease-out;
}
.collab-seats-bar > span.is-full {
  background: linear-gradient(90deg, var(--coral, #f97066), var(--coral-strong, #e6534b));
}
/* Early warning: trials about to lapse, or collaborators already locked out.
   Louder than the hint because it is time-sensitive and actionable. */
.collab-seats-warning {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border-left: 0;
  background: color-mix(in srgb, var(--sun, #f3c969) 26%, transparent);
  color: color-mix(in srgb, var(--ink, #111827) 88%, transparent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}
.collab-seats-warning[hidden] { display: none; }

.collab-seats-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink, #111827) 62%, transparent);
}
.collab-seats-hint.is-warning { color: var(--coral-strong, #e6534b); }
.collab-seats-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line, rgba(83, 97, 113, 0.16));
}
.collab-seats-buy[hidden] { display: none; }
.collab-seats-qty-label { font-size: 12.5px; color: var(--ink, #111827); }
.collab-seats-qty {
  width: 58px;
  margin: 0 4px;
  padding: 4px 6px;
  border-radius: 7px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.22));
  background: var(--surface-solid, #fff);
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .collab-seats-bar > span { transition: none; }
}

.collab-invite-form { margin-top: 4px; }
.collab-invite-label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #536171);
}
.collab-invite-row { display: flex; gap: 8px; }
.collab-invite-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.24));
  background: var(--surface-solid, #fff);
  color: var(--ink, #111827);
  font: inherit;
  font-size: 13px;
}
.collab-invite-input:focus-visible {
  outline: none;
  border-color: var(--coral-strong, #e6534b);
  box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.22);
}
.collab-invite-row .primary-button { flex: 0 0 auto; }

.collab-modal-status {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.collab-modal-status.error { color: var(--coral-strong, #e6534b); }
.collab-modal-status.saved { color: var(--green, #1ea672); }

/* Busy row: spinner + live progress label while a long collab op runs. */
.collab-busy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--muted-strong, #3b4656);
}
.collab-spinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--coral, #f97066) 30%, transparent);
  border-top-color: var(--coral-strong, #e6534b);
  animation: collab-spin 0.7s linear infinite;
}
@keyframes collab-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .collab-spinner { animation-duration: 2.4s; }
}
.collab-retry { margin: 12px 0 0; }

.collab-modal-fine {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted, #536171);
}

/* Branded auto-update restart prompt (replaces the generic OS dialog). */
.update-modal {
  width: min(400px, calc(100vw - 48px));
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}
.update-modal::backdrop { background: rgba(17, 24, 39, 0.5); backdrop-filter: blur(2px); }
.update-modal-card {
  width: 100%;
  padding: 30px 30px 24px;
  border-radius: 18px;
  text-align: center;
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line, rgba(83, 97, 113, 0.16));
  box-shadow: 0 30px 70px rgba(17, 24, 39, 0.34);
}
.update-modal-badge {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--coral, #f97066), var(--coral-strong, #e6534b));
  box-shadow: 0 12px 26px rgba(230, 83, 75, 0.3);
}
.update-modal-badge svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.update-modal-card .eyebrow { color: var(--coral-strong, #e6534b); }
.update-modal-card h2 { margin: 6px 0 8px; font-size: 1.2rem; color: var(--ink, #111827); }
.update-modal-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted, #536171); }
.update-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 20px 0 0;
}
.update-modal-actions .primary-button,
.update-modal-actions .secondary-button { flex: 1 1 0; }
.update-modal-fine { margin-top: 14px !important; font-size: 11px !important; opacity: 0.85; }

.collab-claim-badge {
  align-self: center;
  margin: 0 6px 0 2px;
  border: 0;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.collab-claim-badge.is-open {
  background: rgba(17, 24, 39, 0.06);
  color: var(--muted-strong, #3b4656);
  border: 1px dashed var(--line, rgba(83, 97, 113, 0.35));
}
.collab-claim-badge.is-open:hover { background: rgba(17, 24, 39, 0.1); }
.collab-claim-badge.is-mine {
  background: var(--member-color, var(--blue, #257f78));
  color: #fff;
}
.collab-claim-badge.is-taken {
  background: color-mix(in srgb, var(--member-color, #536171) 18%, var(--surface-solid, #fff));
  color: color-mix(in srgb, var(--member-color, #536171) 80%, var(--ink, #111827));
}
/* Claim badge = the assigned narrator's avatar (photo / emoji / monogram) as the
   pill's RIGHT CAP: a full-height block in the narrator's color, flush to the
   trailing edge. The chip's own overflow:hidden + border-radius round its outer
   corner into the pill, so it reads as ONE two-tone pill (character | narrator),
   not a circle floating inside. A hairline seam separates the two halves. */
.collab-claim-badge.has-avatar {
  align-self: stretch;
  width: 32px;
  min-width: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
  background: var(--member-color, var(--muted, #536171));
  background-size: cover;
  background-position: center;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.28);
  transition: filter 140ms ease;
}
.collab-claim-badge.has-avatar:hover { filter: brightness(1.08); }
.collab-claim-badge.has-avatar.has-image { color: transparent; }
/* This-chapter-only assignment reads as a thin inset frame on the cap. */
.collab-claim-badge.has-avatar.is-chapter-scoped { box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 55%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .collab-claim-badge.has-avatar { transition: none; }
}
/* Uploaded-photo variants for every cast avatar surface. */
.collab-member-dot.has-glyph.has-image,
.medrak-desktop .collab-presence-avatar.has-image { background-size: cover; background-position: center; color: transparent; }

.collab-assign-menu { position: fixed; min-width: 226px; padding: 6px; }
.collab-assign-heading {
  margin: 4px 10px 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted, #536171);
}
.collab-assign-menu .prep-line-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #111827);
  transition: background 140ms ease;
}
.collab-assign-menu .prep-line-menu-item:hover,
.collab-assign-menu .prep-line-menu-item:focus-visible {
  background: rgba(17, 24, 39, 0.05);
}
.collab-assign-menu .prep-line-menu-item.is-current { background: rgba(230, 83, 75, 0.07); }
.collab-assign-name { flex: 1 1 auto; text-align: left; }
.collab-member-dot--none {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px dashed color-mix(in srgb, var(--muted, #536171) 45%, transparent);
}
.collab-assign-check { flex: 0 0 auto; color: var(--coral-strong, #e6534b); font-weight: 800; opacity: 0; }
.collab-assign-menu .prep-line-menu-item.is-current .collab-assign-check { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .collab-assign-menu .prep-line-menu-item { transition: none; }
}

/* Collab teleprompter: peer/unassigned lines are playback-only for me — kept
   readable (the narrator still follows the story) but visibly not mine, with
   the assigned narrator's color as a left tick. A dot = their audio arrived. */
.medrak-desktop .prompt-row.peer-line { opacity: 0.62; }
.medrak-desktop .prompt-row.peer-line .line-number {
  box-shadow: inset 3px 0 0 var(--member-color, transparent);
}
.medrak-desktop .prompt-row.peer-line.has-peer-audio .line-number::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--member-color, var(--green, #1ea672));
  vertical-align: 2px;
}
.medrak-desktop .prompt-row.peer-line.active { opacity: 0.8; }

/* "My lines" jump: context cue on the two rows before the landing line. */
.medrak-desktop .prompt-row.context-flash {
  animation: collab-context-flash 1.5s ease-out both;
}
@keyframes collab-context-flash {
  0% { background: color-mix(in srgb, var(--sun, #f3c969) 30%, transparent); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .medrak-desktop .prompt-row.context-flash { animation: none; }
}

.collab-nav-group { display: inline-flex; gap: 6px; margin-left: 8px; }

/* Book characters: only the DIALOGUE (quoted words) read in the character's
   color — narration keeps the normal ink. Loads after styles.css so the
   cascade favors these in both normal and focus mode. */
.medrak-desktop .prompt-row.has-character .prompt-token.prompt-dialogue,
body.medrak-desktop.immersive-mode .prompt-row.has-character .prompt-token.prompt-dialogue {
  color: var(--char-color);
  font-weight: 650;
}
body.medrak-desktop.immersive-mode .prompt-row.has-character.active .prompt-token.prompt-dialogue {
  color: color-mix(in srgb, var(--char-color) 78%, var(--focus-ink-strong, #fff9ec));
}

.character-context-menu {
  min-width: 200px;
  /* Long casts can exceed the viewport — cap height and scroll internally
     (desktop hides the scrollbar globally) instead of spilling off-screen. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.character-menu-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 0 6px;
  padding: 4px 10px 6px;
  background: rgba(var(--surface-rgb), 0.98);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #536171);
}
.character-context-menu .character-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
}
.character-context-menu .character-menu-item.is-assigned { font-weight: 800; }
.character-context-menu .character-menu-dot {
  flex: 0 0 auto;
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(17, 24, 39, 0.2);
}
.character-menu-clear { color: var(--muted, #536171); }
.character-menu-new { color: var(--coral-strong, #e6534b); font-weight: 700; }

/* ===========================================================================
   Prep read-through: the chapter as a book, marked up before recording.
   Reuses the app's theme tokens (--ink/--paper/--surface-solid/--line/--coral)
   and the chosen reading font (--script-font), so it follows every Appearance
   theme automatically. Desktop + book chapters only (body.prep-mode).
   =========================================================================== */

/* Topbar Prep / Record segmented switch. */
.chapter-mode-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink, #111827) 6%, transparent);
  border: 1px solid var(--line, rgba(83, 97, 113, 0.18));
}
.chapter-mode-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 5px 15px;
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted, #536171);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.chapter-mode-button:hover { color: var(--ink, #111827); }
.chapter-mode-button.is-active {
  background: var(--surface-solid, #fff);
  color: var(--coral-strong, #e6534b);
  box-shadow: var(--small-shadow, 0 12px 30px rgba(17, 24, 39, 0.08));
}
.chapter-mode-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.3);
}

/* Layout: the manuscript replaces the script + recording panels. */
body.prep-mode .workspace,
body.prep-mode .workspace.settings-panel-hidden {
  grid-template-columns: minmax(220px, 0.5fr) minmax(0, 2.7fr) !important;
}
body.prep-mode .script-panel,
body.prep-mode .recording-panel { display: none !important; }
/* The settings panel is a fixed drawer (slides off-canvas via transform), so it
   is NOT hidden here — that would make it unopenable while prepping. */
/* The cast lives in the Prep cast bar now; the book rail's character section is
   redundant while prepping. */
/* The cast drawer is shared by Prep and Record — it stays visible in both. */

.prep-view { display: none; }
body.prep-mode .prep-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.prep-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 4px 14px;
}
.prep-head .eyebrow { color: var(--muted, #536171); }
.prep-title-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.prep-title-row h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink, #111827);
}
.prep-recorded-pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--green, #1ea672);
  background: color-mix(in srgb, var(--green, #1ea672) 14%, transparent);
}
.prep-meta {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted, #536171);
  font-variant-numeric: tabular-nums;
}
.prep-start-button {
  flex: none;
  white-space: nowrap;
  align-self: center;
}

/* Cast bar. */
/* A chip = a select body + a caret that opens the merge/rename menu.
   Selecting a character fills the chip in its color and inverts the label. */
.prep-cast-chip {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--char-color, #536171) 40%, var(--line, rgba(83, 97, 113, 0.2)));
  background: color-mix(in srgb, var(--char-color, #536171) 9%, var(--surface-solid, #fff));
  transition: background 150ms ease, border-color 150ms ease;
}
.prep-cast-chip:hover { background: color-mix(in srgb, var(--char-color, #536171) 16%, var(--surface-solid, #fff)); }
.prep-cast-chip-body {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px 5px 10px;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink, #111827);
  cursor: pointer;
}
.prep-cast-body:focus-visible,
.prep-cast-chip-body:focus-visible { outline: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--char-color, #536171) 45%, transparent); }
.prep-cast-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--char-color, #536171);
  flex: none;
}
.prep-cast-caret {
  appearance: none;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--char-color, #536171) 30%, transparent);
  background: transparent;
  padding: 0 9px;
  font-size: 10px;
  color: var(--muted, #536171);
  cursor: pointer;
  transition: background 150ms ease;
}
.prep-cast-caret:hover { background: color-mix(in srgb, var(--char-color, #536171) 18%, transparent); }
.prep-cast-caret:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(249, 112, 102, 0.4); }
.prep-cast-chip.is-selected {
  background: var(--char-color, #536171);
  border-color: var(--char-color, #536171);
}
.prep-cast-chip.is-selected .prep-cast-chip-body,
.prep-cast-chip.is-selected .prep-cast-caret { color: #fff; }
.prep-cast-chip.is-selected .prep-cast-caret { border-left-color: rgba(255, 255, 255, 0.4); }
.prep-cast-chip.is-selected .prep-cast-dot {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}
/* The reading sheet. */
.prep-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 4px 40px;
}
.prep-manuscript {
  max-width: min(74ch, 92%);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 48px) clamp(24px, 4vw, 52px);
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line, rgba(83, 97, 113, 0.16));
  border-radius: 12px;
  box-shadow: var(--small-shadow, 0 12px 30px rgba(17, 24, 39, 0.08));
  font-family: var(--script-font);
  font-size: 18px;
  line-height: 1.78;
  color: var(--ink, #111827);
}
.prep-para {
  margin: 0;
  text-indent: 1.4em;
  hanging-punctuation: first;
}
.prep-para + .prep-para { margin-top: 0.1em; }
/* A paragraph that is only a director note reads flush-left, not indented. */
.prep-para:has(> .prep-line.direction:only-child) { text-indent: 0; }

.prep-line {
  border-radius: 5px;
  padding: 1px 3px;
  margin: 0 -3px;
  cursor: pointer;
  transition: background 130ms ease, box-shadow 130ms ease;
  text-indent: 0;
}
.prep-line:hover { background: color-mix(in srgb, var(--ink, #111827) 6%, transparent); }
.prep-line:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--coral, #f97066) 12%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--coral, #f97066) 45%, transparent);
}
.prep-line.is-editing {
  cursor: text;
  background: var(--surface-warm, rgba(0, 0, 0, 0.02));
  box-shadow: 0 0 0 2px var(--coral, #f97066);
  outline: none;
  white-space: pre-wrap;
}
/* Assigned line: a soft highlighter band in the character's color so attributing
   a line — narration included, not only its quotes — is visible at a glance. The
   band clones across wrapped fragments; ink text stays dark for readability. */
.prep-line.has-character {
  --line-char: var(--char-color);
  background: color-mix(in srgb, var(--char-color, #536171) 12%, transparent);
  border-radius: 5px;
  padding: 1px 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.prep-line.has-character:hover { background: color-mix(in srgb, var(--char-color, #536171) 20%, transparent); }
.prep-line .prep-dialogue { color: var(--char-color, inherit); font-weight: 600; }

/* Director notes — quiet, bracketed, never the coral action color. */
.prep-line.direction {
  color: var(--muted, #536171);
  font-style: italic;
  font-size: 0.92em;
}
.prep-note-inline { color: #168566; font-style: italic; }
body[data-app-theme="dark"] .prep-note-inline { color: #55c9a3; }

.prep-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted, #536171);
}
.prep-empty strong { font-size: 16px; color: var(--ink, #111827); }
.prep-empty span { font-size: 13.5px; max-width: 42ch; }

.prep-hint {
  max-width: 64ch;
  margin: 14px auto 0;
  text-align: center;
  font-family: system-ui, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted, #536171);
}

/* Line popover + cast menu. */
.prep-popover {
  position: fixed;
  min-width: 210px;
  max-width: 280px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface-solid, #fff);
  border: 1px solid var(--line, rgba(83, 97, 113, 0.2));
  box-shadow: var(--shadow, 0 24px 70px rgba(17, 24, 39, 0.18));
  animation: prepPopoverIn 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes prepPopoverIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.prep-popover-heading {
  margin: 4px 10px 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink, #111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prep-popover-subhead {
  margin: 6px 10px 3px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #536171);
}
.prep-popover-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #111827);
  cursor: pointer;
  transition: background 120ms ease;
}
.prep-popover-item:hover { background: color-mix(in srgb, var(--ink, #111827) 7%, transparent); }
.prep-popover-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(249, 112, 102, 0.4); }
.prep-popover-item.is-assigned { font-weight: 800; }
.prep-popover-item.is-assigned::after {
  content: "✓";
  margin-left: auto;
  color: var(--coral-strong, #e6534b);
  font-weight: 800;
}
.prep-popover-muted { color: var(--muted, #536171); }
.prep-popover-new { color: var(--coral-strong, #e6534b); font-weight: 700; }
.prep-popover-split { color: var(--coral-strong, #e6534b); font-weight: 700; }
.prep-popover-divider {
  display: block;
  height: 1px;
  margin: 5px 8px;
  background: var(--line, rgba(83, 97, 113, 0.2));
}

/* Rename the chapter from its Prep header. */
#prepChapterTitle {
  cursor: text;
  border-radius: 6px;
  padding: 0 5px;
  margin: 0 -5px;
  transition: background 120ms ease, box-shadow 120ms ease;
}
#prepChapterTitle:hover { background: color-mix(in srgb, var(--ink, #111827) 6%, transparent); }
#prepChapterTitle[contenteditable="true"] {
  background: var(--surface-warm, rgba(0, 0, 0, 0.03));
  box-shadow: 0 0 0 2px var(--coral, #f97066);
  outline: none;
}

/* ---------------------------------------------------------------------------
   Settings drawer (desktop): opens from the top Settings button in any chapter
   mode, so the narrator never has to leave Prep to reach it.
--------------------------------------------------------------------------- */
#settingsPanel {
  position: fixed;
  top: 36px;
  right: 0;
  bottom: 0;
  width: min(420px, 94vw);
  z-index: 1305;
  padding: 20px;
  background: var(--surface-solid, #fff);
  border-left: 1px solid var(--line, rgba(83, 97, 113, 0.2));
  box-shadow: -26px 0 74px rgba(17, 24, 39, 0.2);
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(102%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.settings-drawer-open #settingsPanel { transform: none; }
/* Nothing inside the drawer may force horizontal scroll. */
#settingsPanel * { max-width: 100%; }
/* Help tooltips are a single floating, viewport-clamped bubble now (see
   initTooltipSystem in app.js + .app-tooltip in styles.css) — the old CSS
   bubbles lived inside this panel's overflow and clipped at its edges. */
#settingsPanel .settings-tabs { flex-wrap: wrap; }
#settingsPanel .shortcut-row { flex-wrap: wrap; }
.settings-drawer-backdrop {
  position: fixed;
  inset: 36px 0 0 0;
  /* No title bar on the web: the drawer + scrim span the full height. */
  z-index: 1300;
  background: rgba(17, 24, 39, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.settings-drawer-open .settings-drawer-backdrop { opacity: 1; pointer-events: auto; }
body:not(.medrak-desktop) #settingsPanel { top: 0; }
body:not(.medrak-desktop) .settings-drawer-backdrop { inset: 0; }
/* The settings drawer floats over the workspace, so the grid drops its column. */
.workspace {
  grid-template-columns: minmax(280px, 0.82fr) minmax(440px, 2fr) !important;
}
body.book-mode .workspace,
body.book-mode .workspace.settings-panel-hidden {
  grid-template-columns: minmax(230px, 0.6fr) minmax(440px, 2.2fr) !important;
}

@media (prefers-reduced-motion: reduce) {
  .prep-line,
  .prep-cast-chip,
  #prepChapterTitle,
  .chapter-mode-button { transition: none; }
  #settingsPanel,
  .settings-drawer-backdrop { transition: none; }
  .prep-popover { animation: none; }
}

/* ===========================================================================
   RESPONSIVE SYSTEM (desktop app)
   The Electron window resizes freely from tablet (~768px) to ultrawide. The
   recorder is height-bounded and its side panels are drawers (settings is
   off-canvas), so the workspace is a 2-column grid: a rail/script column + the
   recorder column. These rules tighten the columns as the window narrows (so
   nothing spills off-screen or clips), compact the chrome on short viewports
   so the take lanes are always visible, and cap the measure on ultrawide.
   They use !important + sit AFTER the base grid !important rules so they win.
   =========================================================================== */

/* --- Ultrawide: FILL the monitor, don't island the app. Earlier this capped the
       workspace at 1860px and centered it, which left big dead paper margins on
       an ultrawide. Instead the panels use the full width (the fr columns grow —
       wider rail, wider take lanes) with comfortable gutters, and the teleprompter
       reading measure widens separately (below) so text keeps pace with the space
       instead of sitting in a narrow column of empty. --- */
@media (min-width: 1900px) {
  .workspace { padding-left: 30px; padding-right: 30px; }
}
@media (min-width: 2600px) {
  .workspace { padding-left: 52px; padding-right: 52px; gap: 22px; }
}

/* Reading measure grows with the screen so the prompter fills an ultrawide
   instead of centering ~920px of text in a wide column of empty space. Large
   glanceable teleprompter text tolerates a longer line than body prose. */
@media (min-width: 1700px) {
  .prompt-row { width: min(1280px, 100%); }
}
@media (min-width: 2200px) {
  .prompt-row { width: min(1600px, 100%); }
}
@media (min-width: 3000px) {
  .prompt-row { width: min(1960px, 100%); }
}
@media (min-width: 1700px) {
  body.immersive-mode .prompt-row { width: min(1480px, calc(100% - 120px)); }
  body.immersive-mode .prompt-row.active { width: min(1760px, 100%); }
}
@media (min-width: 2200px) {
  body.immersive-mode .prompt-row { width: min(1840px, calc(100% - 160px)); }
  body.immersive-mode .prompt-row.active { width: min(2160px, 100%); }
}

/* --- Laptop / small-desktop widths: tighten both columns so the 2-column grid
       always fits without a horizontal scroll. --- */
@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: minmax(236px, 0.7fr) minmax(400px, 2.1fr) !important;
    gap: 12px;
    padding: 12px;
  }
  body.book-mode .workspace,
  body.book-mode .workspace.settings-panel-hidden {
    grid-template-columns: minmax(208px, 0.6fr) minmax(400px, 2.3fr) !important;
  }
  body.prep-mode .workspace,
  body.prep-mode .workspace.settings-panel-hidden {
    grid-template-columns: minmax(208px, 0.5fr) minmax(0, 2.7fr) !important;
  }
  /* Keep the top bar to one or two rows instead of stacking three deep — every
     wrapped row steals height the recorder needs. Drop the two least-load-bearing
     chips (Tutorial + the duplicate recorded-time) and tighten gaps. */
  .topbar { padding: 10px 14px; gap: 10px; }
  .top-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
}

/* --- Tablet-ish / small windows down to ~768px: minimum-viable 2 columns. The
       rail still holds the chapter list + the scrollable cast drawer; the
       recorder keeps enough width for the prompter, transport and lanes. --- */
@media (max-width: 960px) {
  .workspace {
    grid-template-columns: minmax(196px, 0.62fr) minmax(340px, 2.4fr) !important;
    gap: 10px;
    padding: 10px;
  }
  body.book-mode .workspace,
  body.book-mode .workspace.settings-panel-hidden {
    grid-template-columns: minmax(178px, 0.55fr) minmax(330px, 2.6fr) !important;
  }
  body.prep-mode .workspace,
  body.prep-mode .workspace.settings-panel-hidden {
    grid-template-columns: minmax(178px, 0.5fr) minmax(0, 2.8fr) !important;
  }
  /* Keep the top bar to as few rows as possible instead of stacking tall (which
     would eat the height the recorder needs). Compact, don't column-stack. */
  .topbar { flex-direction: row; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
  .top-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  /* The rail's chapter list + cast drawer both scroll internally, so cap the
     cast drawer tighter here so the chapter list keeps room. */
  .book-rail-character-list { max-height: 26vh; }
}

/* Collapsed rail wins at EVERY width — repeated after the responsive grids (which
   are !important) so a hidden rail always yields the full width to the content. */
body.book-mode .workspace.rail-collapsed,
body.book-mode .workspace.rail-collapsed.settings-panel-hidden,
body.prep-mode .workspace.rail-collapsed,
body.prep-mode .workspace.rail-collapsed.settings-panel-hidden {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* ---------------------------------------------------------------------------
   FIT-TO-HEIGHT RECORDER — the real fix for "the tracks are cut off on laptops".
   The teleprompter carried its focal runway as `padding: 30vh` (70vh in focus
   mode). Padding can never shrink below itself, so it hard-floored the prompter
   box at ~460px and shoved the transport + all three take lanes off the bottom
   of every laptop — no min-height:0, grid cap or flex-basis could beat a padding
   floor (proven with a live 1366×768 harness: prompter stuck at 461px = 2×30vh).
   Fix: the prompter yields ALL leftover height (flex:1 1 0; min-height:0) while
   the runway moves into scrollable ::before/::after spacers instead of padding,
   so the box can shrink and the lanes stay on screen. The runway still offsets
   every row by the same amount, so the focal-scroll math is unchanged.
--------------------------------------------------------------------------- */
.recording-panel > *:not(.teleprompter) { flex: 0 0 auto; }
.recording-panel > .teleprompter {
  flex: 1 1 0;
  /* Yields ALL leftover height so the transport + lanes stay on screen — but
     never collapses to nothing. A script you cannot see is not a recorder, and
     min-height:0 let a short window shrink the prompter to 0px. */
  min-height: 88px;
  max-height: none;
  padding-top: 0;
  padding-bottom: 0;
}
/* Fit, never truncate. At any normal window the prompter above absorbs the
   slack and nothing overflows, so no scrollbar appears. In a window too short
   to hold the transport + lanes at all, the panel scrolls INSIDE itself rather
   than clipping them away — styles.css's overflow:hidden silently ate Track 3
   instead of letting the narrator reach it. */
.recording-panel { overflow-y: auto; }
.recording-panel > .teleprompter::before,
.recording-panel > .teleprompter::after {
  content: "";
  display: block;
  flex: none;
  height: 30vh;
}

/* Focus mode docks its controls at the bottom of a 100vh column; there the
   prompter padded 30vh top / 40vh bottom, so mirror those runway heights. */
body.immersive-mode .recording-panel > .teleprompter {
  flex: 1 1 0;
  padding-top: 0;
  padding-bottom: 0;
}
body.immersive-mode .recording-panel > .teleprompter::before { height: 30vh; }
body.immersive-mode .recording-panel > .teleprompter::after { height: 40vh; }

/* Short viewports: trim the chrome so the prompter keeps a usable size and the
   extreme-short case can't clip. The structural fix above already keeps every
   lane on screen down to ~660px; this graduated compaction adds breathing room
   and covers tablets in landscape and short laptop panels. */
@media (max-height: 860px) {
  .session-strip { min-height: 54px; padding-top: 9px; padding-bottom: 9px; }
  .take-row { min-height: 46px; }
  .takes-panel { gap: 6px; }
}
@media (max-height: 760px) {
  .session-strip { min-height: 48px; padding-top: 7px; padding-bottom: 7px; }
  .transport { padding: 8px 14px 6px; gap: 6px 8px; }
  .meter-row { padding-bottom: 5px; }
  /* A take lane's height is set by its 3-line label, not min-height — drop the
     redundant "kind" line (the track name already says Main / Alt) and tighten
     padding so the three lanes stay compact. */
  .take-row { min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
  .take-kind { display: none; }
  .takes-panel { gap: 5px; }
  .takes-footer { padding-top: 4px; padding-bottom: 8px; }
  /* A shorter prompter shows more with slightly smaller rows/margins. */
  .prompt-row { min-height: 60px; margin-bottom: 10px; }
}
@media (max-height: 660px) {
  .session-strip { min-height: 40px; }
  .transport { padding: 6px 12px 4px; gap: 5px 7px; }
  .take-row { min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
  .take-label { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
  .takes-panel { gap: 4px; }
  .takes-footer { padding-top: 3px; padding-bottom: 6px; }
  .prompt-row { min-height: 52px; margin-bottom: 8px; }
  .recording-panel > .teleprompter::before,
  .recording-panel > .teleprompter::after { height: 22vh; }
}

/* --- Start screen: fill the ultrawide (more recent projects on the shelf)
       with comfortable gutters instead of a centered 1560px island. --- */
@media (min-width: 1900px) {
  .desktop-start .start-body { max-width: none; padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 2600px) {
  .desktop-start .start-body { padding-left: 64px; padding-right: 64px; }
}
/* Profile: let the card grid gain columns on a wide screen. */
@media (min-width: 1900px) {
  .medrak-desktop .profile-shell { width: min(1560px, 100%); }
}
@media (min-width: 2600px) {
  .medrak-desktop .profile-shell { width: min(1960px, 100%); }
}
/* Create wizard is a form — keep it a readable column, just not a tiny island. */
@media (min-width: 1900px) {
  .medrak-desktop .create-body { max-width: 1200px; }
}
@media (max-width: 900px) {
  .start-topbar { padding: 14px 20px; }
  .start-body { padding: 20px 20px 16px; gap: 18px; }
  .start-launch { flex-wrap: wrap; gap: 18px; align-items: flex-start; }
  .start-actions { width: 100%; }
  .start-actions .start-action { flex: 1 1 200px; }
  .start-recent-head { flex-wrap: wrap; gap: 10px; }
  .start-recent-tools { flex-wrap: wrap; }
}
/* The Start screen FITS the window (no page scroll), so the practice dashboard
   is the band that yields on short windows — the launch actions and the Recent
   shelf (never less than one card row) always win. Measured budget: the full
   dashboard needs ≥980px of window height, the chart-only version ≥820px;
   below that the dashboard goes entirely. Laptops in the 680–860px band used
   to crush the shelf to zero height (projects rendered off-window, unreachable
   behind overflow:hidden — the 13" "can't scroll" bug). */
.desktop-start .start-recent { min-height: 158px; }

@media (max-height: 979px) {
  .desktop-start .insights-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stats" "chart";
  }
  .desktop-start .insights-sessions-card { display: none; }
}

@media (max-height: 819px) {
  .desktop-start .start-insights { display: none; }
  .start-body { padding-top: 18px; gap: 14px; }
}

/* --- Project library: collapse the folder sidebar on smaller windows so the
       project grid isn't crushed (base collapse only kicked in at 720px). --- */
@media (max-width: 960px) {
  .medrak-desktop .project-browser { grid-template-columns: 1fr; }
  .medrak-desktop .project-folder-sidebar {
    max-height: 168px;
    overflow-y: auto;
  }
  .medrak-desktop .project-library-header { flex-wrap: wrap; gap: 12px; }
  .medrak-desktop .desktop-library-toolbar { gap: 10px; }
}

/* --- Create-audiobook flow: the two type cards stack, and the review controls
       reflow. --- */
@media (max-width: 820px) {
  .create-type-grid { grid-template-columns: 1fr; }
  .create-segmentation-options { grid-template-columns: 1fr; }
  .create-review-actions,
  .create-chapter-head { flex-wrap: wrap; gap: 10px; }
  .create-body { padding-left: 18px; padding-right: 18px; }
}

/* --- Collaboration modal: never taller than the window; scroll inside. --- */
.medrak-desktop .collab-modal-card {
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}
@media (max-width: 560px) {
  .medrak-desktop .collab-modal-card { width: calc(100vw - 24px); }
}

/* --- Profile: the card grid already auto-fits; make sure it never overflows
       and the header wraps on narrow windows. --- */
@media (max-width: 900px) {
  .medrak-desktop .project-library-header { flex-wrap: wrap; gap: 12px; }
  .medrak-desktop .profile-username-row { flex-wrap: wrap; }
  .medrak-desktop .profile-username-row .secondary-button { flex: 1 1 auto; }
}

/* ===========================================================================
   RECORDER CONTROL LAYOUT (redesign)
   Fewer visible controls, three clear zones, one row that never wraps on a
   laptop. Per-take actions stay in the transport; session settings (recording
   mode, Mic Check) move up to the session strip; punch-back pre-roll and export
   format move into Settings; the tracks-drawer handle gets its own labelled bar
   instead of floating over — or centering on top of — the transport buttons.
   =========================================================================== */

/* The topbar's flex properties (justify-content:space-between, gap) were
   orphaned — with no display:flex it computed to block, stacking the brand over
   the actions and wasting a whole row of height. Restore the intended row.
   Status sits on the LEFT (right after the title), actions on the right. */
.topbar { display: flex; align-items: center; justify-content: flex-start; }

/* Top bar — status is a quiet read-out on the left, not a pair of pills buried
   mid-bar among the action buttons. margin-right:auto pushes the actions right.
   The saving/saved/error state tints still show through. */
.top-status { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin-left: 8px; margin-right: auto; }
.top-status .status-pill { min-height: 28px; padding: 0 9px; font-size: 0.78rem; font-weight: 650; }
.top-status .status-pill:not(.saved):not(.error):not(.pending) {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

/* Session strip — recording-mode toggle + Mic Check live here now (set once per
   session), next to Focus. Compact so the Current-line label keeps its room. */
.session-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; }
.session-strip .recording-mode-toggle { min-height: 32px; padding: 3px; }
.session-strip .mode-toggle-button { min-height: 24px; padding: 0 9px; font-size: 0.72rem; }
.session-strip .secondary-button.compact { min-height: 32px; }

/* Transport — nav pair pinned left, the take cluster TRULY centered in the row.
   A balanced 1fr | auto | 1fr grid puts the actions dead-center (the empty right
   column offsets the nav's width on the left), instead of flex-centering them in
   the leftover space, which pushed them right of center. */
.transport {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.transport-nav { grid-column: 1; justify-self: start; display: inline-flex; gap: 4px; }
.transport-actions {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Tracks bar — the drawer handle gets its own labelled home, so it never
   overlaps the transport buttons (record) or centers on top of them (focus).
   It stays visible when the drawer is minimized, as the re-expand affordance. */
.takes-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 16px 6px;
  /* Transparent, not a lighter near-white band — it stood out against the warm
     paper and made the Minimize control look like it sat on a contrasting box. */
  background: transparent;
}
.takes-bar-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.takes-bar .takes-collapse-toggle {
  width: auto;
  height: 26px;
  gap: 6px;
  padding: 0 8px;
  margin-left: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}
.takes-bar .takes-collapse-toggle svg { width: 16px; height: 16px; }
/* Minimized drawer: keep the tracks bar as the re-expand handle. */
.recording-panel.takes-collapsed .takes-bar { padding-bottom: 8px; }

/* Export chooser popup (anchored under the Export button). */
.medrak-desktop .export-menu { min-width: 248px; padding: 6px; }
.medrak-desktop .export-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  min-height: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.medrak-desktop .export-menu-item strong { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.medrak-desktop .export-menu-item small { font-size: 0.76rem; color: var(--muted); }
.medrak-desktop .export-menu-item:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.medrak-desktop .export-menu-item:focus-visible { outline: none; background: color-mix(in srgb, var(--coral) 16%, transparent); }

/* Character pickers with a long cast: a filter box + a bounded, scrollable list
   so 30+ characters never fill the whole screen (the "long list" problem). */
.medrak-desktop .picker-filter {
  width: 100%;
  margin: 2px 0 6px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-solid, #fff);
  color: var(--ink);
  font-size: 0.85rem;
}
.medrak-desktop .picker-filter:focus { outline: none; box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.16); }
.medrak-desktop .picker-charscroll {
  max-height: 42vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Collaboration presence: a Google-docs-style avatar stack in the top bar shows
   who else is in the book right now; a red ring means that person is recording. */
.medrak-desktop .collab-presence { display: inline-flex; align-items: center; margin-right: 2px; }
.medrak-desktop .collab-presence-avatar,
.medrak-desktop .collab-presence-more {
  display: inline-grid;
  place-items: center;
  height: 26px;
  min-width: 26px;
  margin-left: -6px;
  border-radius: 999px;
  border: 2px solid var(--surface-solid, #fff);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.2);
}
.medrak-desktop .collab-presence-avatar { width: 26px; background: var(--member-color, var(--muted)); }
.medrak-desktop .collab-presence-avatar:first-child { margin-left: 0; }
.medrak-desktop .collab-presence-more { padding: 0 6px; background: var(--muted, #536171); }
.medrak-desktop .collab-presence-avatar.is-recording {
  border-color: #e6534b;
  box-shadow: 0 0 0 2px rgba(230, 83, 75, 0.35), 0 1px 3px rgba(17, 24, 39, 0.2);
  animation: collab-presence-rec 1.4s ease-in-out infinite;
}
@keyframes collab-presence-rec {
  0%, 100% { box-shadow: 0 0 0 2px rgba(230, 83, 75, 0.4), 0 1px 3px rgba(17, 24, 39, 0.2); }
  50% { box-shadow: 0 0 0 5px rgba(230, 83, 75, 0.14), 0 1px 3px rgba(17, 24, 39, 0.2); }
}
@media (prefers-reduced-motion: reduce) {
  .medrak-desktop .collab-presence-avatar.is-recording { animation: none; }
}
/* Your own avatar (shown alongside guests): a quiet ink ring so "you" reads as
   distinct from the guests — unless you're recording, where the red ring wins. */
.medrak-desktop .collab-presence-avatar.is-self:not(.is-recording) {
  box-shadow: 0 0 0 2px var(--surface-solid, #fff), 0 0 0 3.5px color-mix(in srgb, var(--ink) 26%, transparent), 0 1px 3px rgba(17, 24, 39, 0.2);
}

/* Export "Pick narrators" — same chooser surface as .export-menu, with clean
   toggle rows (member-color dot + name + a custom checkbox) and a primary,
   live-count action. Opens below/above its anchor, never over the top bar. */
.medrak-desktop .narrator-picker { min-width: 246px; padding: 8px 6px 6px; }
.medrak-desktop .narrator-picker-title {
  margin: 2px 8px 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.medrak-desktop .narrator-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 46vh;
  overflow-y: auto;
}
.medrak-desktop .narrator-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.medrak-desktop .narrator-picker-row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.medrak-desktop .narrator-picker-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.medrak-desktop .narrator-picker-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }
.medrak-desktop .narrator-picker-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.medrak-desktop .narrator-picker-box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  background: var(--surface-solid, #fff);
  display: grid;
  place-items: center;
  transition: background 120ms ease, border-color 120ms ease;
}
.medrak-desktop .narrator-picker-box::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
  transition: opacity 120ms ease;
}
.medrak-desktop .narrator-picker-input:checked ~ .narrator-picker-box { background: var(--coral, #f97066); border-color: var(--coral, #f97066); }
.medrak-desktop .narrator-picker-input:checked ~ .narrator-picker-box::after { opacity: 1; }
.medrak-desktop .narrator-picker-input:focus-visible ~ .narrator-picker-box { box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.25); }
/* Higher specificity than `.project-context-menu button` (which resets the
   primary-button coral to transparent), so the action stays a real coral CTA. */
.medrak-desktop .narrator-picker .narrator-picker-export {
  width: calc(100% - 12px);
  margin: 8px 6px 2px;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--coral-strong, #e6534b), var(--coral, #f97066));
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  transition: filter 120ms ease, opacity 120ms ease;
}
.medrak-desktop .narrator-picker .narrator-picker-export:hover:not(:disabled) { filter: brightness(1.06); background: linear-gradient(135deg, var(--coral-strong, #e6534b), var(--coral, #f97066)); }
.medrak-desktop .narrator-picker .narrator-picker-export:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.35); }
.medrak-desktop .narrator-picker .narrator-picker-export:disabled { opacity: 0.45; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .medrak-desktop .narrator-picker-box,
  .medrak-desktop .narrator-picker-box::after,
  .medrak-desktop .narrator-picker .narrator-picker-export { transition: none; }
}

/* ---- On-device AI (proofing) : Profile card + enable dialog ---------------- */
.ai-tools-card .ai-tools-lead {
  margin: 2px 0 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink, #111827) 74%, transparent);
}
.ai-tools-card .ai-tools-lead strong { color: var(--coral-strong, #e6534b); font-weight: 700; }
.ai-tools-body { display: flex; flex-direction: column; gap: 12px; }
/* The base .switch-setting only sets cursor; its flex layout normally comes from
   the settings drawer's .toggle-list scope. This card lives in Profile, so it
   declares the row layout itself (without flex, the .switch-control span stays
   inline and its width collapses). */
.ai-tools-body .switch-setting { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink, #111827); }
.ai-tools-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink, #111827) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink, #111827) 8%, transparent);
}
.ai-model-line { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink, #111827); }
.ai-model-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink, #111827) 28%, transparent);
  flex: 0 0 auto;
}
.ai-tools-status.is-ready .ai-model-dot { background: #2f9e6f; box-shadow: 0 0 0 3px rgba(47, 158, 111, 0.18); }
.ai-tools-status.is-busy .ai-model-dot { background: var(--coral, #f97066); animation: aiDotPulse 1.3s ease-in-out infinite; }
.ai-model-meta { margin-left: auto; font-size: 12px; font-weight: 500; color: color-mix(in srgb, var(--ink, #111827) 55%, transparent); }
.ai-progress { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink, #111827) 10%, transparent); overflow: hidden; }
.ai-progress > span {
  display: block; height: 100%; width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--coral, #f97066), var(--coral-strong, #e6534b));
  transition: width 180ms ease-out;
}
.ai-tools-hint { margin: 0; font-size: 12px; line-height: 1.45; color: color-mix(in srgb, var(--ink, #111827) 60%, transparent); }
.ai-tools-hint.is-error { color: var(--coral-strong, #e6534b); }
/* Download row: the bar takes the width, Cancel sits beside it while a
   download is actually running (hidden otherwise). */
.ai-progress-row { display: flex; align-items: center; gap: 10px; }
.ai-progress-row .ai-progress { flex: 1 1 auto; }
.ai-cancel-download {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 2px 12px;
  font-size: 12px;
}
.speech-addon-actions { gap: 10px; }
.speech-addon-actions .primary-button { min-height: 34px; padding: 6px 18px; font-size: 13.5px; }
.speech-addon-actions .secondary-button { min-height: 34px; padding: 6px 16px; font-size: 13.5px; }
/* Long folder paths stay on one line and ellipsize. */
.ai-storage-path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ai-tools-sub { opacity: 1; }
.ai-tools-note { margin: 0; }
.ai-tools-manage { display: flex; }
.ai-tools-upsell { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ai-tools-upsell strong { color: var(--coral-strong, #e6534b); }

/* When-to-proof segmented control (Auto | Manual) */
.ai-proofing-mode { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-proofing-mode-label { font-size: 13px; font-weight: 600; color: var(--ink, #111827); }
.ai-proofing-mode-seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ink, #111827) 7%, transparent);
}
.ai-mode-btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 5px 14px;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink, #111827) 62%, transparent);
  transition: background 140ms ease, color 140ms ease;
}
.ai-mode-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* The settings copy of the mode picker: the "keep it Manual on a slow PC" note
   is advice, not an error, so it reads as a quiet aside rather than a warning
   banner. The locked line replaces both notes when proofing is unavailable. */
.settings-proof-warning { color: color-mix(in srgb, var(--ink, #111827) 52%, transparent); }
.settings-proof-locked { color: var(--blue, #257f78); font-weight: 600; }
#settingsProofSection .ai-proofing-mode-seg { margin: 8px 0 6px; }
#settingsProofSection.is-locked .ai-proofing-mode-seg { opacity: 0.55; }
.ai-mode-btn.is-active {
  background: var(--surface-solid, #fff);
  color: var(--coral-strong, #e6534b);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* Top-left proofing status pill + manual "Proof chapter" button */
.proofing-controls { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.proofing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--coral, #f97066) 14%, transparent);
  color: var(--coral-strong, #e6534b);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.proofing-indicator[hidden] { display: none; }
.proofing-spinner {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--coral-strong, #e6534b) 30%, transparent);
  border-top-color: var(--coral-strong, #e6534b);
  animation: proofingSpin 0.8s linear infinite;
}
@keyframes proofingSpin { to { transform: rotate(360deg); } }

/* Pill states: running (spinner, coral) · success (green ✓) · error (amber ⚠ + retry) */
.proofing-glyph { display: none; font-size: 13px; line-height: 1; font-weight: 800; }
.proofing-indicator.is-success { background: color-mix(in srgb, var(--green, #1ea672) 15%, transparent); color: var(--green, #1ea672); }
.proofing-indicator.is-error { background: color-mix(in srgb, #f0a020 18%, transparent); color: #b26a00; }
.proofing-indicator.is-success .proofing-spinner,
.proofing-indicator.is-error .proofing-spinner { display: none; }
.proofing-indicator.is-success .proofing-glyph,
.proofing-indicator.is-error .proofing-glyph { display: inline; }
.proofing-indicator.is-success .proofing-glyph::before { content: "✓"; }
.proofing-indicator.is-error .proofing-glyph::before { content: "!"; }
.proofing-retry {
  appearance: none;
  cursor: pointer;
  margin-left: 2px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}
.proofing-retry[hidden] { display: none; }
.proofing-retry:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* Record-phase blur overlay */
.proofing-overlay {
  position: fixed;
  top: 36px; /* clear the custom titlebar so window controls stay clickable */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--paper, #fbf7f1) 55%, transparent);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  animation: proofOverlayIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.proofing-overlay[hidden] { display: none; }
@keyframes proofOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.proofing-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 340px;
  padding: 30px 34px;
  border-radius: 18px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.16));
  background: var(--surface-solid, #fff);
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.22);
  text-align: center;
}
.proofing-overlay-spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--coral-strong, #e6534b) 24%, transparent);
  border-top-color: var(--coral-strong, #e6534b);
  animation: proofingSpin 0.85s linear infinite;
}
.proofing-overlay-glyph {
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.proofing-overlay.is-success .proofing-overlay-spinner,
.proofing-overlay.is-error .proofing-overlay-spinner { display: none; }
.proofing-overlay.is-success .proofing-overlay-glyph,
.proofing-overlay.is-error .proofing-overlay-glyph { display: inline-flex; }
.proofing-overlay.is-success .proofing-overlay-glyph { background: var(--green, #1ea672); }
.proofing-overlay.is-success .proofing-overlay-glyph::before { content: "✓"; }
.proofing-overlay.is-error .proofing-overlay-glyph { background: #e6534b; }
.proofing-overlay.is-error .proofing-overlay-glyph::before { content: "!"; }
.proofing-overlay-title { margin: 4px 0 0; font-size: 17px; font-weight: 750; color: var(--ink, #111827); }
.proofing-overlay-sub { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted, #536171); }
.proofing-overlay-retry,
.proofing-overlay-dismiss {
  appearance: none;
  cursor: pointer;
  margin-top: 6px;
  padding: 9px 22px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
}
.proofing-overlay-retry {
  border: 0;
  background: var(--coral, #f97066);
  color: #fff;
}
.proofing-overlay-retry:hover { filter: brightness(1.04); }
.proofing-overlay-dismiss {
  border: 1px solid var(--line, rgba(83, 97, 113, 0.2));
  background: transparent;
  color: var(--ink, #111827);
}
.proofing-overlay-retry[hidden], .proofing-overlay-dismiss[hidden] { display: none; }
.proofing-overlay-retry:focus-visible,
.proofing-overlay-dismiss:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.35); }

@media (prefers-reduced-motion: reduce) {
  .proofing-overlay { animation: none; }
  .proofing-overlay-spinner { animation-duration: 2s; }
}
@media (prefers-color-scheme: dark) {
  .proofing-overlay { background: color-mix(in srgb, #0a0c10 55%, transparent); }
}

/* Proof Book — progress modal (Export-Book treatment) */
.book-rail-proof { margin: 10px 2px 0; }
.book-rail-proof[hidden] { display: none; }
.proof-book-dialog {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--paper, #fbf7f1) 58%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.proof-book-dialog[hidden] { display: none; }
.proof-book-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(420px, 100%);
  padding: 30px 34px;
  border-radius: 18px;
  border: 1px solid var(--line, rgba(83, 97, 113, 0.16));
  background: var(--surface-solid, #fff);
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.24);
  text-align: center;
}
.proof-book-spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--coral-strong, #e6534b) 24%, transparent);
  border-top-color: var(--coral-strong, #e6534b);
  animation: proofingSpin 0.85s linear infinite;
}
.proof-book-glyph {
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
}
.proof-book-dialog.is-done .proof-book-spinner { display: none; }
.proof-book-dialog.is-done .proof-book-glyph { display: inline-flex; background: var(--muted, #536171); }
.proof-book-dialog.is-success .proof-book-glyph { background: var(--green, #1ea672); }
.proof-book-dialog.is-success .proof-book-glyph::before { content: "✓"; }
.proof-book-dialog.is-error .proof-book-glyph { background: #e6534b; }
.proof-book-dialog.is-error .proof-book-glyph::before { content: "!"; }
.proof-book-dialog.is-done:not(.is-success):not(.is-error) .proof-book-glyph::before { content: "■"; font-size: 15px; }
.proof-book-title { margin: 4px 0 0; font-size: 17px; font-weight: 750; color: var(--ink, #111827); }
.proof-book-sub { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted, #536171); }
.proof-book-progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink, #111827) 10%, transparent);
}
.proof-book-progress > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--coral, #f97066);
  transition: width 200ms ease;
}
.proof-book-meta { margin: 0; font-size: 12.5px; color: var(--muted, #536171); font-variant-numeric: tabular-nums; }
.proof-book-actions { display: flex; gap: 10px; margin-top: 6px; }
.proof-book-actions button[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .proof-book-spinner { animation-duration: 2s; }
}
@media (prefers-color-scheme: dark) {
  .proof-book-dialog { background: color-mix(in srgb, #0a0c10 58%, transparent); }
}

.proof-chapter-button {
  appearance: none;
  cursor: pointer;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--coral, #f97066) 45%, transparent);
  background: transparent;
  color: var(--coral-strong, #e6534b);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 140ms ease;
}
.proof-chapter-button[hidden] { display: none; }
.proof-chapter-button:hover:not(:disabled) { background: color-mix(in srgb, var(--coral, #f97066) 12%, transparent); }
.proof-chapter-button:disabled { opacity: 0.5; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .proofing-spinner { animation-duration: 2s; }
}

@keyframes aiDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Enable dialog (native <dialog>) */
.ai-dialog {
  width: min(460px, calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: none;
  border-radius: 18px;
  background: var(--surface-solid, #fff);
  color: var(--ink, #111827);
  box-shadow: 0 30px 80px rgba(17, 24, 39, 0.28);
  overflow: hidden auto;
}
.ai-dialog::backdrop { background: rgba(17, 24, 39, 0.42); backdrop-filter: blur(2px); }
.ai-dialog-body { padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.ai-dialog-body .eyebrow { color: var(--coral-strong, #e6534b); font-weight: 700; }
.ai-dialog-body h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.ai-dialog-lead { margin: 0; font-size: 13.5px; line-height: 1.55; color: color-mix(in srgb, var(--ink, #111827) 70%, transparent); }
.ai-privacy-points { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-privacy-points li { display: flex; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--ink, #111827); }
.ai-privacy-ico { color: var(--coral, #f97066); font-size: 12px; line-height: 1.65; flex: 0 0 auto; }
.ai-readiness {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink, #111827) 10%, transparent);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-readiness-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in srgb, var(--ink, #111827) 55%, transparent); }
.ai-verdict { font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ink, #111827) 8%, transparent); color: color-mix(in srgb, var(--ink, #111827) 60%, transparent); }
.ai-verdict[data-verdict="ready"] { background: rgba(47, 158, 111, 0.14); color: #237a54; }
.ai-verdict[data-verdict="marginal"] { background: rgba(214, 158, 46, 0.16); color: #9a6b12; }
.ai-verdict[data-verdict="unsupported"] { background: #fdecea; color: var(--coral-strong, #e6534b); }
.ai-specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ai-specs li { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: color-mix(in srgb, var(--ink, #111827) 55%, transparent); }
.ai-specs b { font-size: 14px; font-weight: 700; color: var(--ink, #111827); }
.ai-requirements { margin: 0; font-size: 11.5px; line-height: 1.45; color: color-mix(in srgb, var(--ink, #111827) 55%, transparent); }
.ai-dialog-takeover { margin: 0; font-size: 12.5px; line-height: 1.5; color: color-mix(in srgb, var(--ink, #111827) 66%, transparent); }
.ai-dialog-takeover strong { color: var(--ink, #111827); }
.ai-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.ai-dialog-actions .primary-button:disabled { opacity: 0.45; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .ai-tools-status.is-busy .ai-model-dot { animation: none; }
  .ai-progress > span { transition: none; }
}

/* ---- Proofing markers : prep badge + take chip + detail popover ------------ */
.prep-proof-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 0 4px;
  border: none;
  border-radius: 999px;
  background: var(--coral-strong, #e6534b);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  vertical-align: super;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}
.prep-proof-badge:hover { filter: brightness(1.06); transform: translateY(-1px); }
.prep-proof-badge:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(230, 83, 75, 0.4); }
/* Word-level proof marks on the reading line (normal prompter + focus mode) and
   on prep words. Missed (skipped) = amber dotted; mis-spoken (wrong) = coral
   wavy — two clearly different treatments. */
.medrak-desktop .prompt-token.proof-missed,
.prep-line .proof-word.proof-missed {
  text-decoration: underline dotted #d69e2e;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  background: rgba(214, 158, 46, 0.16);
  border-radius: 3px;
}
.medrak-desktop .prompt-token.proof-misspoken,
.prep-line .proof-word.proof-misspoken {
  text-decoration: underline wavy var(--coral-strong, #e6534b);
  text-underline-offset: 4px;
  background: rgba(230, 83, 75, 0.16);
  border-radius: 3px;
}

.take-proof-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 1px 7px;
  border: none;
  border-radius: 999px;
  background: rgba(230, 83, 75, 0.12);
  color: var(--coral-strong, #e6534b);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease;
}
.take-proof-chip:hover { background: rgba(230, 83, 75, 0.2); }
.take-proof-chip:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(230, 83, 75, 0.4); }

.proof-popover {
  position: fixed;
  min-width: 240px;
  max-width: 360px;
  max-height: 320px;
  overflow: hidden auto;
  padding: 10px;
  border-radius: 12px;
}
.proof-popover-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in srgb, var(--ink, #111827) 55%, transparent); padding: 2px 6px 8px; margin-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--ink, #111827) 8%, transparent); }
.proof-popover-list { display: flex; flex-direction: column; gap: 3px; }
/* A grid, not a flex row. The word can be long ("1171 → eleven seventy-one"),
   and in a flex row it wrapped underneath the KIND label and the Ignore button,
   which then sat on top of it. Giving the label its own row means nothing can
   ever collide however long the word is. */
.proof-popover-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  grid-template-areas:
    "dot  word action"
    ".    kind action";
  align-items: center;
  column-gap: 10px;
  row-gap: 3px;
  padding: 8px;
  border-radius: 8px;
  font-size: 13px;
}
.proof-popover-item:hover { background: color-mix(in srgb, var(--ink, #111827) 5%, transparent); }
.proof-popover-dot { grid-area: dot; width: 8px; height: 8px; border-radius: 50%; }
.proof-popover-item.is-missed .proof-popover-dot { background: #d69e2e; }
.proof-popover-item.is-misspoken .proof-popover-dot { background: var(--coral-strong, #e6534b); }
/* A noise is not a reading mistake, so it gets its own colour rather than
   sharing the missed/mis-spoken vocabulary. */
.proof-popover-item.is-noise .proof-popover-dot { background: var(--blue, #257f78); }
.proof-popover-word { grid-area: word; color: var(--ink, #111827); min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.proof-popover-word .proof-expected { color: color-mix(in srgb, var(--ink, #111827) 55%, transparent); text-decoration: line-through; }
.proof-popover-word .proof-said { color: var(--coral-strong, #e6534b); font-weight: 600; }
.proof-popover-kind { grid-area: kind; justify-self: start; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: color-mix(in srgb, var(--ink, #111827) 45%, transparent); }
.proof-popover-item.is-missed .proof-popover-kind { color: #9a6b12; }
.proof-popover-item.is-misspoken .proof-popover-kind { color: var(--coral-strong, #e6534b); }

@media (prefers-reduced-motion: reduce) {
  .prep-proof-badge, .take-proof-chip { transition: none; }
}

/* ---- Prep pronunciation panel ---------------------------------------------- */
.prep-pronounce {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ink, #111827) 10%, transparent);
  background: var(--surface-solid, #fff);
  overflow: hidden;
}
.prep-pronounce-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.prep-pronounce-head:hover { background: color-mix(in srgb, var(--ink, #111827) 3%, transparent); }
.prep-pronounce-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(145deg, var(--coral, #f97066), var(--coral-strong, #e6534b));
  position: relative;
}
.prep-pronounce-mark::after {
  content: "";
  position: absolute; left: 9px; top: 9px; width: 12px; height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  border-right-color: transparent;
  transform: rotate(-45deg);
}
.prep-pronounce-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.prep-pronounce-title { font-size: 14px; font-weight: 700; color: var(--ink, #111827); display: flex; align-items: center; gap: 7px; }
.prep-pronounce-count {
  font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: rgba(230, 83, 75, 0.14); color: var(--coral-strong, #e6534b);
  display: inline-flex; align-items: center; justify-content: center;
}
.prep-pronounce-sub { font-size: 12px; color: color-mix(in srgb, var(--ink, #111827) 55%, transparent); }
.prep-pronounce-chevron {
  width: 8px; height: 8px; flex: 0 0 auto;
  border-right: 2px solid color-mix(in srgb, var(--ink, #111827) 45%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--ink, #111827) 45%, transparent);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.prep-pronounce-head[aria-expanded="true"] .prep-pronounce-chevron { transform: rotate(-135deg); }
.prep-pronounce-body {
  padding: 6px 12px 12px;
  border-top: 1px solid color-mix(in srgb, var(--ink, #111827) 8%, transparent);
}
.prep-pronounce-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 340px; overflow: hidden auto;
}

.pron-row {
  display: grid;
  grid-template-columns: minmax(84px, 0.9fr) minmax(130px, 1.5fr) auto;
  align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--ink, #111827) 3.5%, transparent);
}
.pron-row.is-set { background: rgba(47, 158, 111, 0.09); }
.pron-word { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.pron-word strong { font-size: 14px; font-weight: 700; color: var(--ink, #111827); overflow-wrap: anywhere; }
.pron-count { font-size: 11px; color: color-mix(in srgb, var(--ink, #111827) 45%, transparent); flex: 0 0 auto; }
.pron-respell { display: flex; gap: 6px; align-items: center; min-width: 0; }
.pron-respell-input {
  flex: 1 1 auto; min-width: 0; padding: 6px 9px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ink, #111827) 14%, transparent);
  background: var(--surface-solid, #fff); color: var(--ink, #111827);
  font: inherit; font-size: 13px; letter-spacing: 0.02em;
}
.pron-respell-input:focus { outline: none; border-color: var(--coral, #f97066); box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.16); }
.pron-suggest {
  flex: 0 0 auto; padding: 5px 9px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ink, #111827) 12%, transparent);
  background: transparent; color: color-mix(in srgb, var(--ink, #111827) 60%, transparent);
  font: inherit; font-size: 12px; cursor: pointer; transition: color 120ms ease, border-color 120ms ease;
}
.pron-suggest:hover { border-color: var(--coral, #f97066); color: var(--coral-strong, #e6534b); }
.pron-actions { display: flex; align-items: center; gap: 6px; }
.pron-record {
  padding: 5px 11px; border-radius: 8px; border: none;
  background: rgba(230, 83, 75, 0.12); color: var(--coral-strong, #e6534b);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 120ms ease;
}
.pron-record:hover { background: rgba(230, 83, 75, 0.2); }
.pron-record.is-recording { background: var(--coral-strong, #e6534b); color: #fff; animation: pronPulse 1.2s ease-in-out infinite; }
.pron-play {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--ink, #111827) 12%, transparent);
  background: transparent; color: var(--ink, #111827); cursor: pointer; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center; transition: color 120ms ease, border-color 120ms ease;
}
.pron-play:hover { border-color: var(--coral, #f97066); color: var(--coral-strong, #e6534b); }
.pron-ignore {
  padding: 5px 8px; border-radius: 8px; border: none; background: transparent;
  color: color-mix(in srgb, var(--ink, #111827) 45%, transparent);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.pron-ignore:hover { color: var(--ink, #111827); background: color-mix(in srgb, var(--ink, #111827) 6%, transparent); }

/* Per-word "Ignore" inside the proofing detail popover. */
.proof-popover-ignore {
  /* Reset the base .project-context-menu button rule (display:block; width:100%;
     min-height:36px) that otherwise blows this into a full-width 36px bar. */
  grid-area: action; align-self: center; justify-self: end;
  display: inline-block; width: auto; min-width: 0; min-height: 0;
  white-space: nowrap; margin-left: 0; padding: 4px 10px; border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--ink, #111827) 14%, transparent);
  background: transparent; color: color-mix(in srgb, var(--ink, #111827) 60%, transparent);
  font: inherit; font-size: 11px; line-height: 1.2; cursor: pointer;
}
.proof-popover-ignore:hover { border-color: var(--coral, #f97066); color: var(--coral-strong, #e6534b); }

@keyframes pronPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .pron-record.is-recording { animation: none; }
  .prep-pronounce-chevron, .pron-suggest, .pron-record, .pron-play { transition: none; }
}

/* One focus ring for every control that used to declare its own identical copy.
   Last in the file on purpose: several of these components set a hover/active
   box-shadow, and the ring must keep winning on hover+focus as it does today.
   :is() takes its most specific argument, so specificity is unchanged. */
:is(
  .book-rail-collapse, .book-rail-reopen, .book-rail-item, .start-action, .start-seg-btn,
  .shelf-arrow, .start-recent-card, .create-back, .create-type-card, .create-split-here,
  .create-chapter-merge, .profile-icon-option, .ai-mode-btn, .proofing-retry, .proof-chapter-button
):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(249, 112, 102, 0.3);
}

/* ---------------------------------------------------------------------------
   Unified shell guard: the same index.html now serves web and desktop, so the
   desktop-only chrome (titlebar, Start screen, gate views, desktop sign-in
   links) exists in the markup on every platform. Only a desktop session gets
   body.medrak-desktop (added by desktop-boot.js); everywhere else this rule
   keeps that chrome out of the page entirely.
--------------------------------------------------------------------------- */
body:not(.medrak-desktop) .js-desktop-only { display: none !important; }

/* The download-the-app pitch lives on the shared Start screen; a desktop
   session obviously never shows it. */
.medrak-desktop .desktop-cta { display: none !important; }