:root {
  --bg: #f5f4ef;
  --surface: rgba(255,255,255,0.84);
  --surface-strong: rgba(255,255,255,0.94);
  --surface-soft: #efede5;
  --border: rgba(74, 74, 64, 0.10);
  --border-strong: rgba(74, 74, 64, 0.18);
  --text: #161712;
  --text-soft: #5c5f56;
  --text-faint: #7a7d74;
  --accent: #50657c;
  --accent-soft: #e7eef5;
  --success: #3f6b52;
  --warning: #8b6a2b;
  --danger: #995248;
  --shadow-1: 0 10px 35px rgba(18, 20, 16, 0.04);
  --shadow-2: 0 18px 45px rgba(18, 20, 16, 0.08);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --topbar-h: 68px;
  --status-h: 34px;
  --left-w: 290px;
  --right-w: 360px;
  --max-page: 1920px;
  --page-pad: 24px;
  --font: SF Pro Display, SF Pro Text, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}


:root {
  --viewport-h: 100vh;
}
@supports (height: 100dvh) {
  :root {
    --viewport-h: 100dvh;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; max-width: 100%; overflow-x: hidden; font-family: var(--font); color: var(--text); background:
  radial-gradient(circle at top left, rgba(255,255,255,0.85), transparent 34%),
  radial-gradient(circle at bottom right, rgba(229,234,240,0.7), transparent 28%),
  var(--bg);
}
body.dark {
  --bg: #11130f;
  --surface: rgba(27,29,24,0.88);
  --surface-strong: rgba(29,31,26,0.96);
  --surface-soft: #171914;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text: #efefe8;
  --text-soft: #bcc0b4;
  --text-faint: #8d9288;
  --accent: #87a1bd;
  --accent-soft: rgba(90,110,130,0.24);
  --shadow-1: 0 10px 35px rgba(0,0,0,0.22);
  --shadow-2: 0 18px 45px rgba(0,0,0,0.28);
  background:
    radial-gradient(circle at top left, rgba(35,40,50,0.35), transparent 35%),
    radial-gradient(circle at bottom right, rgba(40,45,37,0.32), transparent 26%),
    var(--bg);
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, textarea, select { font-size: 16px; }
button { cursor: pointer; }

.app-shell {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr var(--status-h);
  min-height: 100vh;
}

.topbar {
  display: grid;
  grid-template-columns: 320px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  background: rgba(245,244,239,0.72);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
body.dark .topbar { background: rgba(17,19,15,0.72); }

.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar { isolation: isolate; }
.topbar-mobile-actions { position: relative; z-index: 320; isolation: isolate; }
.topbar-mobile-actions .mobile-action-btn { position: relative; z-index: 321; pointer-events: auto; touch-action: manipulation; }
.nav-toggle-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
body.desktop-rail-collapsed .nav-toggle-btn { background: var(--surface-strong); border-color: var(--border-strong); }
.topbar-center { min-width: 0; }
.brand-block { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--surface-strong), var(--surface-soft));
  border: 1px solid var(--border); box-shadow: var(--shadow-1); font-weight: 700; letter-spacing: -0.03em;
}
.brand-name { font-size: 18px; font-weight: 650; letter-spacing: -0.03em; }
.brand-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

.command-bar {
  width: 100%; min-height: 42px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface-strong); color: var(--text-faint); text-align: left; padding: 0 18px; box-shadow: var(--shadow-1);
}

.avatar-pill {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-strong);
  border: 1px solid var(--border); font-size: 12px; font-weight: 700;
}

.main-grid {
  display: grid;
  grid-template-columns: var(--left-w) 1fr var(--right-w);
  min-height: calc(var(--viewport-h) - var(--topbar-h) - var(--status-h));
  align-items: start;
  transition: grid-template-columns 360ms cubic-bezier(0.22, 1, 0.36, 1), gap 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.left-rail, .right-panel {
  background: var(--surface);
  backdrop-filter: blur(20px);
  overflow: auto;
}
.left-rail {
  border-right: 1px solid var(--border);
  padding: 22px 18px 26px;
  transition: transform 220ms ease, opacity 220ms ease, width 220ms ease, padding 220ms ease, border-color 220ms ease;
  transform-origin: left center;
  align-self: start;
  position: sticky;
  top: 0;
  height: calc(var(--viewport-h) - var(--topbar-h) - var(--status-h));
  max-height: calc(var(--viewport-h) - var(--topbar-h) - var(--status-h));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.right-panel { border-left: 1px solid var(--border); padding: 18px; transition: opacity 320ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1); }
.workspace {
  overflow: auto;
  padding: var(--page-pad);
  max-width: min(var(--max-page), calc(100vw - var(--left-w) - var(--right-w)));
  width: 100%;
  margin: 0 auto;
  transition: max-width 360ms cubic-bezier(0.22, 1, 0.36, 1), width 360ms cubic-bezier(0.22, 1, 0.36, 1), margin 360ms cubic-bezier(0.22, 1, 0.36, 1), padding 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}




@media (min-width: 1025px) {
  .workspace > .view,
  .workspace > section.view {
    width: 100%;
    max-width: none;
  }

  body.desktop-rail-collapsed .workspace {
    width: calc(100vw - 32px - var(--right-w));
    max-width: min(var(--max-page), calc(100vw - 32px - var(--right-w)));
    margin-left: 0;
    margin-right: auto;
    padding-left: 28px;
    padding-right: 28px;
  }

  body.desktop-rail-collapsed .page-hero,
  body.desktop-rail-collapsed .scene-carousel-shell,
  body.desktop-rail-collapsed .dashboard-grid,
  body.desktop-rail-collapsed .project-grid,
  body.desktop-rail-collapsed .editor-grid,
  body.desktop-rail-collapsed .two-pane-grid,
  body.desktop-rail-collapsed .review-grid,
  body.desktop-rail-collapsed .settings-grid {
    width: 100%;
    max-width: none;
  }

  body.desktop-rail-collapsed .dashboard-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(360px, 1fr);
  }

  body.desktop-rail-collapsed .project-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
  }
}
@media (min-width: 1025px) {
  .page-hero,
  .scene-carousel-shell,
  .dashboard-grid, .project-grid, .editor-grid, .two-pane-grid, .review-grid, .settings-grid,
  .surface, .resume-scene, .activity-item, .idea-item, .collaborator-item, .research-thread, .comment-card, .research-card {
    transition: grid-template-columns 360ms cubic-bezier(0.22, 1, 0.36, 1),
                max-width 360ms cubic-bezier(0.22, 1, 0.36, 1),
                width 360ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 220ms ease,
                margin 360ms cubic-bezier(0.22, 1, 0.36, 1),
                padding 360ms cubic-bezier(0.22, 1, 0.36, 1),
                gap 360ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, width, max-width, grid-template-columns;
  }

  body.desktop-rail-collapsed .workspace {
    max-width: min(1700px, calc(100vw - 56px - var(--right-w)));
    padding-left: calc(var(--page-pad) + 6px);
    padding-right: calc(var(--page-pad) + 6px);
  }

  body.desktop-rail-collapsed .dashboard-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  }

  body.desktop-rail-collapsed .project-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  }

  body.desktop-rail-collapsed .editor-grid,
  body.desktop-rail-collapsed .two-pane-grid {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  }

  body.desktop-rail-collapsed .page-hero {
    gap: 28px;
  }
}

.rail-group + .rail-group { margin-top: 24px; }
.rail-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); margin-bottom: 10px;
}
.nav-item {
  width: 100%; text-align: left; border: none; background: transparent; color: var(--text-soft);
  padding: 12px 14px; border-radius: 14px; transition: 180ms background, 180ms color;
}
.nav-item:hover, .scene-rail-item:hover { background: rgba(120,125,115,0.08); color: var(--text); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent); }

.scene-rail { display: grid; gap: 8px; }
.scene-rail-item {
  border: 1px solid var(--border); background: var(--surface-strong); border-radius: 16px; padding: 12px 12px 12px 14px;
  text-align: left; box-shadow: var(--shadow-1); transition: 180ms transform, 180ms border-color, 180ms background;
}
.scene-rail-item.is-active { border-color: rgba(80,101,124,0.35); background: var(--accent-soft); transform: translateY(-1px); }
.scene-rail-kicker { font-size: 11px; color: var(--text-faint); margin-bottom: 4px; }
.scene-rail-title { font-size: 13px; line-height: 18px; }

.story-health-stack { display: grid; gap: 10px; }
.health-mini {
  border-radius: 16px; border: 1px solid var(--border); background: var(--surface-strong); padding: 12px;
}
.health-mini-title { font-size: 12px; color: var(--text-faint); }
.health-mini-value { font-size: 15px; margin-top: 4px; font-weight: 600; }

.view { display: none; }
.view.is-active { display: block; }
.page-hero {
  display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 24px;
}
.page-hero h1 { margin: 4px 0 10px; font-size: 36px; line-height: 42px; letter-spacing: -0.05em; }
.page-hero p { margin: 0; max-width: 780px; font-size: 16px; line-height: 26px; color: var(--text-soft); }
.eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.hero-actions, .hero-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.compact-hero { margin-bottom: 18px; }
.meta-chip, .pill-pill {
  border-radius: var(--radius-pill); padding: 9px 12px; border: 1px solid var(--border); background: var(--surface-strong);
  font-size: 12px; color: var(--text-soft);
}

.surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 18px;
  backdrop-filter: blur(14px);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.large-surface { padding: 20px; }
.surface-head {
  display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 16px;
}
.surface-title { font-size: 18px; font-weight: 650; letter-spacing: -0.03em; }
.surface-sub { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.sticky-head {
  position: sticky; top: -18px; background: linear-gradient(180deg, var(--surface-strong) 78%, transparent);
  padding-top: 4px; z-index: 1;
}

.dashboard-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1.4fr 1fr;
  grid-template-areas:
    "resume activity"
    "inbox ai";
}
.resume-card { grid-area: resume; }
.activity-card { grid-area: activity; }
.inbox-card { grid-area: inbox; }
.ai-card { grid-area: ai; }

.resume-scene {
  border-radius: 18px; padding: 18px; background: linear-gradient(180deg, var(--surface-strong), var(--surface-soft)); border: 1px solid var(--border);
}
.resume-scene h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.03em; }
.resume-scene p { margin: 0; color: var(--text-soft); line-height: 24px; }
.resume-meta { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

.activity-list, .idea-list, .collaborator-list, .research-thread-list, .comment-thread-list, .research-list {
  display: grid; gap: 12px;
}
.activity-item, .idea-item, .collaborator-item, .research-thread, .comment-card, .research-card {
  border-radius: 16px; border: 1px solid var(--border); background: var(--surface-strong); padding: 14px;
}
.activity-time, .comment-meta, .research-type, .idea-date { font-size: 11px; color: var(--text-faint); margin-bottom: 6px; }
.activity-copy, .comment-body, .research-title, .idea-copy { line-height: 21px; }

.idea-input-wrap { display: grid; gap: 10px; margin-bottom: 12px; }
.app-textarea, .app-select {
  width: 100%; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-strong); color: var(--text);
  padding: 14px 15px; outline: none; transition: 180ms border-color, 180ms box-shadow;
}
.app-textarea { min-height: 124px; resize: vertical; }
.app-textarea.compact { min-height: 92px; }
.app-textarea:focus, .app-select:focus {
  border-color: rgba(80,101,124,0.38); box-shadow: 0 0 0 4px rgba(80,101,124,0.08);
}

.starter-grid, .ai-actions-grid { display: grid; gap: 10px; }
.starter-btn {
  border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface-strong), var(--surface-soft));
  padding: 14px 16px; border-radius: 16px; text-align: left; color: var(--text); box-shadow: var(--shadow-1);
}
.starter-btn.small { padding: 12px 14px; font-size: 13px; }
.starter-btn:hover { border-color: rgba(80,101,124,0.25); transform: translateY(-1px); }

.project-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1.45fr 1fr;
}
.recent-scenes-grid { display: grid; gap: 12px; }
.recent-scene-card, .metric-card {
  border-radius: 18px; border: 1px solid var(--border); background: var(--surface-strong); padding: 15px;
}
.metric-stack { display: grid; gap: 12px; }
.metric-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.metric-label { color: var(--text-soft); }
.metric-value { font-weight: 650; }
.metric-bar { height: 8px; border-radius: 999px; background: rgba(80,101,124,0.12); overflow: hidden; margin-top: 8px; }
.metric-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #7d96b0); }

.editor-grid, .two-pane-grid, .review-grid, .settings-grid {
  display: grid; gap: 18px;
}
.editor-grid { grid-template-columns: 300px 1fr; }
.two-pane-grid { grid-template-columns: 1fr 340px; }
.two-pane-grid.wider-right { grid-template-columns: 1fr 360px; }
.review-grid { grid-template-columns: 1fr 370px; }
.settings-grid { grid-template-columns: repeat(3, 1fr); }
.scene-pane { padding-right: 12px; }
.scene-list { display: grid; gap: 10px; }
.scene-nav-card {
  border-radius: 18px; border: 1px solid var(--border); background: var(--surface-strong); padding: 14px; transition: 180ms all;
}
.scene-nav-card.is-active { background: var(--accent-soft); border-color: rgba(80,101,124,0.3); }
.scene-nav-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.scene-nav-title { font-size: 14px; line-height: 20px; }
.scene-nav-copy { font-size: 12px; color: var(--text-soft); margin-top: 6px; line-height: 18px; }
.scene-status-badge { display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; font-size:11px; line-height:1; white-space:nowrap; }
.scene-status-badge.is-filled { box-shadow: var(--shadow-1); }
.scene-status-badge.is-outline { border:1px solid currentColor; background: transparent; }
.scene-status-badge.is-draft { background: rgba(80,101,124,0.12); color: var(--text-soft); }
.scene-status-badge.is-revise { background: rgba(139,106,43,0.12); color: var(--warning); }
.scene-status-badge.is-approved { background: rgba(63,107,82,0.12); color: var(--success); }
.scene-status-badge.is-locked { background: rgba(58,70,94,0.14); color: var(--accent); }
.scene-review-meta { margin-top: 8px; color: var(--text-soft); font-size: 11px; line-height: 1.45; }
.recent-scene-card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }

.screenplay-head { align-items: center; }
.screenplay-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.screenplay-pane { padding-bottom: 70px; position: relative; }
.screenplay-canvas {
  width: min(100%, 780px); margin: 0 auto; display: grid; gap: 28px; padding-bottom: 30px;
}
.screenplay-scene {
  position: relative; padding: 8px 0 0; border-top: 1px dashed transparent;
}
.screenplay-scene.is-active { border-top-color: rgba(80,101,124,0.28); }
.scene-heading {
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; line-height: 22px; font-weight: 700; margin-bottom: 14px;
}
.screenplay-action, .screenplay-dialogue, .screenplay-parenthetical, .screenplay-note, .screenplay-transition, .screenplay-character {
  position: relative; font-size: 15px; line-height: 25px;
}
.screenplay-action { max-width: 690px; }
.screenplay-character { text-align: center; margin-top: 10px; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; }
.screenplay-parenthetical { max-width: 320px; margin: 0 auto; text-align: center; color: var(--text-soft); font-size: 14px; line-height: 22px; }
.screenplay-dialogue { max-width: 430px; margin: 0 auto; }
.screenplay-transition { text-align: right; text-transform: uppercase; letter-spacing: 0.05em; font-size: 13px; }
.screenplay-note {
  margin-top: 10px; padding: 10px 12px; border-left: 2px solid rgba(80,101,124,0.45); background: rgba(80,101,124,0.08); border-radius: 0 12px 12px 0;
  color: var(--text-soft);
}
.block-comment-marker {
  position: absolute; right: -44px; top: 3px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-strong); color: var(--warning); display: grid; place-items: center; font-size: 11px; box-shadow: var(--shadow-1);
}
.inline-ai-bar {
  position: sticky; bottom: 12px; width: fit-content; margin: 10px auto 0; display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px; border-radius: 999px; background: rgba(255,255,255,0.88); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px);
}
body.dark .inline-ai-bar { background: rgba(25,27,22,0.88); }
.inline-ai-pill {
  border: none; background: var(--surface-soft); color: var(--text-soft); border-radius: 999px; padding: 10px 12px; font-size: 12px;
}

.outline-list, .card-board { display: grid; gap: 12px; }
.outline-act-block {
  border-radius: 18px; border: 1px solid var(--border); background: var(--surface-strong); overflow: hidden;
}
.outline-act-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; }
.beat-row {
  padding: 14px 16px; border-top: 1px solid rgba(74,74,64,0.06); cursor: pointer; transition: 180ms background;
}
.beat-row:first-child { border-top: none; }
.beat-row.is-active { background: var(--accent-soft); }
.beat-row-title { font-size: 14px; line-height: 21px; }
.beat-row-copy { margin-top: 5px; font-size: 12px; color: var(--text-soft); }
.inspector-pane { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 130px); overflow: auto; }
.inspector-content, .inspector-panel, .note-panel { display: grid; gap: 12px; color: var(--text-soft); line-height: 22px; }

.inspector-content, .inspector-panel, .note-panel, .key-value, .key-value-value, .surface-title, .surface-sub, .story-card-title, .story-card, .comment-body, .activity-copy, .idea-copy, .research-title {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.two-pane-grid, .editor-grid, .review-grid, .settings-grid, .dashboard-grid, .project-grid, .screenplay-canvas, .card-board, .outline-list {
  min-width: 0;
}
.key-value { display: grid; gap: 4px; }
.key-value-key { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); }
.key-value-value { color: var(--text); }

.card-board {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.mobile-card-list { display: none; }
.mobile-story-card {
  width: 100%; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface-strong), var(--surface-soft));
  padding: 16px; box-shadow: var(--shadow-1); display: grid; gap: 10px; text-align: left; cursor: pointer;
}
.mobile-story-card.is-active { outline: 2px solid rgba(80,101,124,0.22); }
.mobile-story-card-top { display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.mobile-story-title { font-size: 22px; line-height: 28px; letter-spacing: -0.03em; font-weight: 700; }
.mobile-story-copy { color: var(--text-soft); font-size: 14px; line-height: 22px; }
.mobile-story-arrow { color: var(--text-faint); font-size: 22px; line-height: 1; }
.story-card {
  min-height: 180px; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface-strong), var(--surface-soft));
  padding: 16px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;
}
.story-card.is-active { outline: 2px solid rgba(80,101,124,0.25); }
.story-card-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); }
.story-card-title { font-size: 16px; line-height: 24px; letter-spacing: -0.02em; margin-top: 10px; }
.story-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.story-tag { font-size: 11px; border-radius: 999px; background: rgba(80,101,124,0.10); color: var(--text-soft); padding: 7px 10px; }

.review-script { width: min(100%, 760px); margin: 0 auto; display: grid; gap: 18px; }
.review-scene-card {
  border-radius: 18px; border: 1px solid var(--border); background: var(--surface-strong); padding: 18px; display:grid; gap:12px;
}
.review-scene-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.review-comment-badge {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: rgba(139,106,43,0.10); color: var(--warning); padding: 7px 10px; font-size: 11px;
  margin-top: 0;
}
.scene-review-note { display:grid; gap:6px; padding: 12px 14px; border-radius: 16px; background: rgba(80,101,124,0.06); border: 1px solid rgba(80,101,124,0.10); }
.scene-review-note-copy { color: var(--text-soft); font-size: 13px; line-height: 1.55; }
.comment-card.resolved { opacity: 0.65; }
.resolve-pill { border-radius: 999px; background: rgba(63,107,82,0.10); color: var(--success); padding: 6px 10px; font-size: 11px; }

.panel-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.panel-tab {
  flex: 1; border: none; border-radius: 999px; background: transparent; color: var(--text-soft); padding: 10px 12px;
}
.panel-tab.is-active { background: var(--accent-soft); color: var(--accent); }
.panel-surface { display: none; }
.panel-surface.is-active { display: block; }
.panel-head { margin-bottom: 14px; }
.ai-context-card, .ai-output-panel {
  border-radius: 18px; border: 1px solid var(--border); background: var(--surface-strong); padding: 14px; line-height: 22px;
}
.ai-output-panel { margin-top: 12px; min-height: 120px; color: var(--text-soft); }

.presence-strip { display: flex; align-items: center; gap: 8px; }
.presence-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--surface-strong); border: 1px solid var(--border); position: relative; box-shadow: var(--shadow-1);
}
.presence-avatar > span:first-child { line-height: 1; }
.presence-avatar-overflow { font-size: 10px; color: var(--text-soft); }
.presence-status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); border: 2px solid var(--surface);
  position: absolute; right: -1px; bottom: -1px;
}
.presence-avatar.is-online .presence-status-dot { background: var(--success); }
.presence-avatar.is-offline .presence-status-dot { background: var(--text-faint); }
.presence-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px;
  background: var(--surface-strong); border: 1px solid var(--border); color: var(--text-soft); font-size: 12px; font-weight: 600;
}
.presence-pill.is-online { color: var(--success); }

.primary-btn, .secondary-btn, .ghost-btn, .icon-btn {
  height: 40px; border-radius: 999px; padding: 0 14px; border: 1px solid var(--border); transition: 180ms transform, 180ms background, 180ms border-color;
}
.primary-btn { background: var(--text); color: white; border-color: var(--text); }
.secondary-btn { background: var(--surface-strong); color: var(--text); box-shadow: var(--shadow-1); }
.ghost-btn, .icon-btn { background: transparent; color: var(--text-soft); border-color: transparent; }
.primary-btn:hover, .secondary-btn:hover, .ghost-btn:hover, .icon-btn:hover { transform: translateY(-1px); }
.full-width { width: 100%; justify-content: center; }
.mobile-only { display: none; }

.setting-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-top: 1px solid rgba(74,74,64,0.07);
}
.setting-row:first-child { border-top: none; }
.checkbox-row { justify-content: flex-start; }
.settings-stack { display: grid; }

.collaboration-note { margin-bottom: 12px; }
.collaboration-settings-list { display: grid; gap: 12px; }
.collaboration-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface-strong);
}
.collaboration-row-main { display: grid; gap: 4px; }
.collaboration-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.collaboration-row-copy { color: var(--text-soft); font-size: 13px; line-height: 1.45; }
.collaboration-row-actions { display: flex; align-items: center; }
.collaborator-item-rich { display: grid; gap: 10px; }
.collaborator-item-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.edit-owner-pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--surface-strong); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 700;
}
.edit-owner-pill.is-claimed { color: var(--accent); }
.scene-collaboration-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border-radius: 16px; border: 1px solid rgba(74,74,64,0.08); background: rgba(255,255,255,0.6);
}
body.dark .scene-collaboration-row { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }

.small-tab {
  border: none; border-radius: 999px; background: transparent; color: var(--text-soft); padding: 8px 10px; font-size: 12px;
}
.small-tab.is-active { background: var(--accent-soft); color: var(--accent); }
.tab-row { display: flex; gap: 6px; }

.status-strip {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 0 18px; border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: 12px; background: rgba(255,255,255,0.48); backdrop-filter: blur(18px);
}
body.dark .status-strip { background: rgba(23,25,20,0.52); }
.status-left, .status-right { display: flex; align-items: center; gap: 8px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.success { background: var(--success); }

.toast {
  position: fixed; right: 18px; bottom: 52px; padding: 12px 14px; border-radius: 16px; background: var(--surface-strong); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2); color: var(--text); opacity: 0; pointer-events: none; transform: translateY(10px); transition: 180ms all; z-index: 60;
}
.toast.show { opacity: 1; transform: translateY(0); }

.focus-mode .left-rail,
.focus-mode .right-panel,
.focus-mode .status-strip { display: none; }
.focus-mode .main-grid { grid-template-columns: 1fr; }
.focus-mode .workspace { max-width: 1120px; }


.topbar-mobile-actions, .mobile-tabbar, .mobile-sheet-backdrop, .mobile-action-sheet, .mobile-detail-backdrop, .mobile-detail-sheet, .mobile-search-backdrop, .mobile-search-sheet { display: none; }
.mobile-action-btn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-strong); box-shadow: var(--shadow-1);
}
.mobile-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(14, 15, 13, 0.28); z-index: 45; opacity: 0; pointer-events: none; transition: opacity 180ms;
}
.mobile-action-sheet {
  position: fixed; left: 10px; right: 10px; bottom: 86px; z-index: 50; padding: 12px; border-radius: 24px;
  background: rgba(255,255,255,0.96); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2);
  transform: translateY(16px); opacity: 0; pointer-events: none; transition: 180ms transform, 180ms opacity;
}
body.dark .mobile-action-sheet { background: rgba(29,31,26,0.98); }
.mobile-sheet-open .mobile-sheet-backdrop { opacity: 1; pointer-events: auto; display: block; }
.mobile-sheet-open .mobile-action-sheet { opacity: 1; transform: translateY(0); pointer-events: auto; display: block; }
.mobile-sheet-handle { width: 44px; height: 5px; border-radius: 999px; background: rgba(120,125,115,0.28); margin: 0 auto 12px; }
.mobile-sheet-title { text-align: center; font-size: 13px; color: var(--text-faint); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
.mobile-sheet-grid { display: grid; gap: 10px; }
.mobile-tabbar {
  position: fixed; left: 10px; right: 10px; bottom: 8px; height: 66px; z-index: 40;
  padding: 8px; border-radius: 24px; background: rgba(255,255,255,0.92); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2); backdrop-filter: blur(16px);
  grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: stretch;
}
body.dark .mobile-tabbar { background: rgba(26,28,23,0.94); }
.mobile-tab {
  border: none; border-radius: 18px; background: transparent; color: var(--text-faint); font-size: 11px; font-weight: 600;
}
.mobile-tab.is-active { background: var(--accent-soft); color: var(--accent); }


.mobile-search-backdrop {
  position: fixed; inset: 0; background: rgba(14, 15, 13, 0.28); z-index: 75; opacity: 0; pointer-events: none; transition: opacity 180ms;
}
.mobile-search-sheet {
  position: fixed; left: 10px; right: 10px; top: calc(var(--topbar-h) + 8px); z-index: 80; padding: 12px; border-radius: 24px;
  background: rgba(255,255,255,0.98); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2);
  transform: translateY(-8px); opacity: 0; pointer-events: none; transition: 180ms transform, 180ms opacity;
}
body.dark .mobile-search-sheet { background: rgba(29,31,26,0.98); }
.mobile-search-open .mobile-search-backdrop { opacity: 1; pointer-events: auto; display: block; }
.mobile-search-open .mobile-search-sheet { opacity: 1; transform: translateY(0); pointer-events: auto; display: block; }
.mobile-search-body { display: grid; gap: 12px; }
.mobile-search-input {
  width: 100%; height: 46px; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--surface-strong);
  color: var(--text); padding: 0 14px; outline: none;
}
.mobile-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(120,150,255,0.12); }
.mobile-search-actions { display: grid; gap: 10px; }
.topbar-mobile-actions, .mobile-action-btn { position: relative; z-index: 320; pointer-events: auto; }
.mobile-action-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

body.desktop-rail-collapsed .main-grid {
  grid-template-columns: 0 minmax(0, 1fr) var(--right-w);
}
body.desktop-rail-collapsed .left-rail {
  width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-right-color: transparent;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-18px);
}
body.desktop-rail-collapsed .workspace {
  max-width: none;
}

@media (max-width: 1320px) {
  .main-grid { grid-template-columns: 250px 1fr 320px; }
  .settings-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
  .main-grid { grid-template-columns: 250px 1fr; }
  body.desktop-rail-collapsed .main-grid { grid-template-columns: 0 1fr; }
  .right-panel { display: none; }
  .dashboard-grid, .project-grid, .editor-grid, .two-pane-grid, .review-grid, .settings-grid {
    grid-template-columns: 1fr;
  }
  .inspector-pane { position: static; max-height: none; }
}

@media (max-width: 1024px) {
  :root {
    --topbar-h: 76px;
    --status-h: 0px;
    --page-pad: 12px;
  }
  .app-shell { grid-template-rows: var(--topbar-h) 1fr; }
  .main-grid { grid-template-columns: 1fr; }
  .topbar {
    grid-template-columns: auto 1fr auto; padding: 12px; gap: 10px; align-items: center;
  }
  .topbar-left { min-width: 0; gap: 10px; }
  .brand-block { min-width: 0; }
  .brand-mark { width: 20px; height: auto; border-radius: 0; flex: 0 0 auto; background: transparent; }
  .brand-name { font-size: 17px; line-height: 20px; white-space: nowrap; }
  .brand-sub { font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
  .topbar-center, .topbar-right, .right-panel, .status-strip { display: none; }
  .topbar-mobile-actions { display: flex; gap: 8px; }
  .mobile-only { display: inline-flex; }
  .left-rail {
    position: fixed; left: 0; top: var(--topbar-h); bottom: 0; width: min(84vw, 320px); z-index: 30; transform: translateX(-102%);
    transition: 180ms transform; box-shadow: var(--shadow-2);
    height: calc(var(--viewport-h) - var(--topbar-h));
    max-height: calc(var(--viewport-h) - var(--topbar-h));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .left-rail.open { transform: translateX(0); }
  .workspace {
    padding: 12px 12px 88px;
    width: 100%; max-width: none; overflow-x: hidden;
  }
  .surface { padding: 16px; border-radius: 22px; }
  .page-hero { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
  .page-hero h1 { font-size: 28px; line-height: 32px; }
  .page-hero p { font-size: 14px; line-height: 22px; }
  .hero-actions, .hero-meta { width: 100%; }
  .hero-actions .primary-btn, .hero-actions .secondary-btn { flex: 1 1 0; min-width: 0; }
  .dashboard-grid, .project-grid, .editor-grid, .two-pane-grid, .review-grid, .settings-grid { grid-template-columns: 1fr; gap: 14px; }
  .two-pane-grid > .inspector-pane { display: none; }
  .dashboard-grid { grid-template-areas: none; }
  .resume-card, .activity-card, .inbox-card, .ai-card { grid-area: auto; }
  .editor-grid { align-items: start; }
  .scene-pane { display: none; }
  #view-editor .screenplay-pane { padding-bottom: 96px; }
  .screenplay-toolbar { display: none; }
  .screenplay-canvas { width: 100%; gap: 22px; }
  .screenplay-action { max-width: 100%; font-size: 15px; line-height: 24px; }
  .screenplay-dialogue { max-width: min(100%, 320px); }
  .scene-heading { font-size: 13px; line-height: 20px; margin-bottom: 12px; }
  .block-comment-marker { right: 6px; top: -8px; }
  .inline-ai-bar {
    position: fixed; left: 12px; right: 12px; bottom: 84px; width: auto; margin: 0; overflow-x: auto; flex-wrap: nowrap; padding: 8px;
  }
  .inline-ai-pill { white-space: nowrap; }
  .outline-act-head { padding: 14px; }
  .beat-row { padding: 14px; }
  #view-corkboard .card-board { display: none; }
  #view-corkboard .mobile-card-list { display: grid; gap: 14px; }
  .story-card { min-height: 154px; }
  .review-script { width: 100%; gap: 14px; }
  .panel-tabs { margin-bottom: 10px; }
  .recent-scenes-grid { grid-template-columns: 1fr; }
  .mobile-tabbar, .mobile-detail-backdrop, .mobile-detail-sheet, .mobile-sheet-backdrop, .mobile-action-sheet { display: block; }
}


.mobile-detail-backdrop {
  position: fixed; inset: 0; background: rgba(14,15,13,0.34); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 180ms;
}
.mobile-detail-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; max-height: 86vh; border-radius: 28px 28px 0 0;
  background: rgba(255,255,255,0.98); border-top: 1px solid var(--border-strong); box-shadow: var(--shadow-2);
  transform: translateY(18px); opacity: 0; pointer-events: none; transition: 180ms transform, 180ms opacity; padding: 12px 12px 24px;
}
body.dark .mobile-detail-sheet { background: rgba(29,31,26,0.98); }
.mobile-detail-open .mobile-detail-backdrop { opacity: 1; pointer-events: auto; display: block; }
.mobile-detail-open .mobile-detail-sheet { opacity: 1; transform: translateY(0); pointer-events: auto; display: block; }
.mobile-detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 8px; }
.mobile-detail-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); }
.mobile-detail-body { overflow:auto; max-height: calc(86vh - 54px); padding: 6px 4px 8px; }
.mobile-close-btn { border:none; background: transparent; color: var(--text-soft); font-size: 18px; width: 36px; height:36px; border-radius: 999px; }


/* Mobile corrective rebuild from reverted design base */
body.mobile-viewport, body.mobile-viewport .app-shell, body.mobile-viewport .workspace {
  overflow-x: hidden !important;
}
body.mobile-viewport .workspace {
  width: 100vw !important;
  max-width: 100vw !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
body.mobile-viewport .main-grid {
  grid-template-columns: 1fr !important;
}
body.mobile-viewport .view {
  width: 100%;
  max-width: 100%;
}
body.mobile-viewport .page-hero,
body.mobile-viewport .dashboard-grid,
body.mobile-viewport .project-grid,
body.mobile-viewport .editor-grid,
body.mobile-viewport .two-pane-grid,
body.mobile-viewport .review-grid,
body.mobile-viewport .settings-grid {
  grid-template-columns: 1fr !important;
}
body.mobile-viewport .left-rail {
  position: fixed !important;
  left: 0 !important;
  top: var(--topbar-h) !important;
  bottom: 0 !important;
  width: min(84vw, 320px) !important;
  height: calc(var(--viewport-h) - var(--topbar-h)) !important;
  max-height: calc(var(--viewport-h) - var(--topbar-h)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-104%) !important;
  z-index: 60 !important;
}
body.mobile-viewport .left-rail.open {
  transform: translateX(0) !important;
}
body.mobile-viewport #view-corkboard .card-board,
body.mobile-viewport #view-corkboard .inspector-pane,
body.mobile-viewport #view-outline .inspector-pane,
body.mobile-viewport #view-editor .scene-pane {
  display: none !important;
}
body.mobile-viewport #view-corkboard .mobile-card-list {
  display: grid !important;
  gap: 14px;
}
body.mobile-viewport #view-corkboard .mobile-story-card,
body.mobile-viewport #view-outline .beat-row,
body.mobile-viewport #view-project .recent-scene-card,
body.mobile-viewport #view-dashboard .surface,
body.mobile-viewport #view-review .review-scene-card {
  width: 100% !important;
  max-width: 100% !important;
}
body.mobile-viewport .mobile-tabbar {
  display: grid !important;
}
body.mobile-viewport .mobile-detail-sheet {
  display: block !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
}
body.mobile-viewport .mobile-detail-body,
body.mobile-viewport .key-value-value,
body.mobile-viewport .mobile-story-copy,
body.mobile-viewport .story-card-title,
body.mobile-viewport .surface-sub {
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* Responsive audit pass */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, canvas, video {
  max-width: 100%;
  height: auto;
}
.topbar-left, .topbar-mobile-actions, .brand-block, .brand-name, .brand-sub {
  min-width: 0;
}
.workspace > .view.is-active {
  animation: none;
}
@media (max-width: 1280px) {
  .workspace {
    max-width: 100%;
  }
  .project-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}
@media (max-width: 1024px) {
  .view:not(.is-active) { display: none !important; }
  .view.is-active { display: block !important; }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 70;
  }
  .topbar-left {
    flex: 1 1 auto;
    min-width: 0;
  }
  .topbar-mobile-actions {
    flex: 0 0 auto;
  }
  .workspace {
    padding-bottom: 102px !important;
  }
  #view-dashboard .dashboard-grid,
  #view-project .project-grid,
  #view-settings .settings-grid,
  #view-review .review-grid,
  #view-editor .editor-grid,
  #view-outline .two-pane-grid,
  #view-corkboard .two-pane-grid {
    grid-template-columns: 1fr !important;
  }
  #view-project .project-grid,
  #view-dashboard .dashboard-grid,
  #view-settings .settings-grid,
  #view-review .review-grid,
  #view-editor .editor-grid,
  #view-outline .two-pane-grid,
  #view-corkboard .two-pane-grid {
    align-items: start;
  }
  #view-outline .inspector-pane,
  #view-corkboard .inspector-pane,
  #view-editor .scene-pane {
    display: none !important;
  }
  #view-corkboard .card-board {
    display: none !important;
  }
  #view-corkboard .mobile-card-list {
    display: grid !important;
    gap: 14px;
  }
  #view-dashboard .page-hero,
  #view-project .page-hero {
    margin-bottom: 14px;
  }
  .surface,
  .resume-scene,
  .activity-item,
  .idea-item,
  .comment-card,
  .research-card,
  .recent-scene-card,
  .mobile-story-card,
  .beat-row,
  .review-scene-card {
    width: 100%;
    max-width: 100%;
  }
  .mobile-detail-sheet,
  .mobile-search-sheet,
  .mobile-action-sheet {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }
}
@media (max-width: 820px) {
  :root {
    --topbar-h: 88px;
    --page-pad: 12px;
  }
  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'left actions';
    padding: 12px;
    gap: 12px;
  }
  .topbar-left { grid-area: left; }
  .topbar-mobile-actions { grid-area: actions; }
  .brand-name { font-size: 16px; line-height: 20px; }
  .brand-sub { max-width: 140px; }
  .mobile-action-btn { width: 42px; height: 42px; }
  .page-hero h1 { font-size: 24px; line-height: 28px; }
  .surface-title { font-size: 16px; }
  .screenplay-canvas {
    gap: 18px;
  }
  .screenplay-action,
  .screenplay-dialogue,
  .screenplay-note,
  .screenplay-parenthetical {
    font-size: 15px;
    line-height: 24px;
  }
  .screenplay-dialogue {
    max-width: 100%;
    width: min(100%, 320px);
  }
  .mobile-tabbar {
    left: 12px;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    height: 64px;
  }
}
@media (max-width: 640px) {
  :root {
    --topbar-h: 84px;
  }
  body.mobile-viewport .workspace,
  .workspace {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .topbar {
    padding: 10px 12px;
  }
  .brand-block {
    gap: 10px;
  }
  .brand-mark {
    width: 48px;
    height: 48px;
  }
  .brand-name {
    font-size: 15px;
  }
  .brand-sub {
    font-size: 11px;
    max-width: 112px;
  }
  .mobile-action-btn {
    width: 40px;
    height: 40px;
  }
  .surface {
    padding: 16px;
    border-radius: 22px;
  }
  .screenplay-pane,
  .surface,
  .page-hero {
    width: 100%;
    max-width: 100%;
  }
  .screenplay-scene {
    padding-right: 0;
  }
  .scene-heading {
    font-size: 12px;
    line-height: 18px;
  }
  .screenplay-character {
    margin-top: 12px;
  }
  .inline-ai-bar {
    left: 12px;
    right: 12px;
    bottom: 84px;
  }
  .mobile-tab {
    font-size: 10px;
  }
  .mobile-detail-sheet {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .mobile-action-sheet,
  .mobile-search-sheet {
    left: 10px;
    right: 10px;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }
}
@media (min-width: 1025px) {
  .mobile-tabbar,
  .mobile-action-sheet,
  .mobile-search-sheet,
  .mobile-detail-sheet,
  .mobile-sheet-backdrop,
  .mobile-search-backdrop,
  .mobile-detail-backdrop {
    display: none !important;
  }
}

.project-switcher {
  margin-top: 4px;
  border: 1px solid var(--border);
  background: var(--surface-strong);
  color: var(--text-soft);
  border-radius: 999px;
  padding: 5px 12px;
  min-width: 220px;
}
.inline-actions { display:flex; gap:8px; flex-wrap:wrap; }
.scene-meta-editor { display:grid; gap:12px; margin-bottom: 18px; }
.scene-meta-editor-grid { display:grid; grid-template-columns: minmax(0, 1fr) 220px; gap:12px; align-items:end; }
.scene-review-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
.meta-edit { display:grid; gap:6px; color: var(--text-soft); font-size: 12px; }
.scene-heading-input { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.editable-block {
  border-radius: 12px;
  padding: 4px 8px;
  outline: none;
}
.editable-block:focus {
  background: rgba(80,101,124,0.08);
  box-shadow: 0 0 0 2px rgba(80,101,124,0.12);
}
.presence-avatar {
  width: 30px; height: 30px; border-radius: 50%; display:grid; place-items:center;
  background: var(--surface-strong); border:1px solid var(--border); font-size:12px; font-weight:700;
}
.review-comment-badge {
  margin-top: 10px; display:inline-flex; padding:6px 10px; border-radius:999px; background: var(--accent-soft); color: var(--accent); font-size: 12px;
}
.resolve-pill {
  border:none; background: rgba(80,101,124,0.12); color: var(--text-soft); border-radius: 999px; padding: 7px 10px; font-size: 12px; cursor:pointer;
}
@media (max-width: 900px) {
  .project-switcher { min-width: 0; width: 150px; }
  .inline-actions { width:100%; justify-content:flex-end; }
  .scene-meta-editor-grid, .scene-review-grid { grid-template-columns: 1fr; }
  .review-scene-top { flex-direction: column; }
}


/* Local-first real V1 hotfix */
.primary-btn, .secondary-btn, .ghost-btn, .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  white-space: nowrap;
  text-align: center;
}
.project-switcher {
  max-width: min(52vw, 260px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-sheet-backdrop, .mobile-search-backdrop, .mobile-detail-backdrop {
  touch-action: manipulation;
}
@media (max-width: 1024px) {
  .hero-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hero-actions .primary-btn,
  .hero-actions .secondary-btn {
    min-height: 48px;
    height: auto;
    padding: 10px 12px;
    font-size: 14px;
    white-space: nowrap;
  }
  .topbar-left {
    overflow: hidden;
  }
  .brand-block > div:last-child {
    min-width: 0;
  }
  .project-switcher {
    width: clamp(120px, 38vw, 190px);
    font-size: 13px;
  }
  .mobile-action-sheet {
    z-index: 90;
  }
  .mobile-sheet-backdrop {
    z-index: 89;
  }
  .left-rail {
    z-index: 95;
  }
}
@media (max-width: 640px) {
  .hero-actions {
    grid-template-columns: 1fr;
  }
  .hero-actions .primary-btn,
  .hero-actions .secondary-btn {
    width: 100%;
  }
  .project-switcher {
    width: min(42vw, 170px);
  }
}


/* local-first real v1 hotfix 2 */
.prompt-field { display:grid; gap:8px; margin-bottom:12px; }
.prompt-field span, .prompt-copy { color: var(--text-soft); font-size: 13px; line-height: 1.4; }
.app-prompt-backdrop {
  position: fixed; inset: 0; background: rgba(14,15,13,0.36); z-index: 120;
  display: none; align-items: center; justify-content: center; padding: 18px;
}
.app-prompt-backdrop.is-open { display: flex; }
.app-prompt-sheet {
  width: min(560px, 100%); max-height: min(82vh, 760px); overflow: auto;
  background: rgba(255,255,255,0.98); border: 1px solid var(--border-strong); border-radius: 24px;
  box-shadow: var(--shadow-2); padding: 18px;
}
body.dark .app-prompt-sheet { background: rgba(29,31,26,0.98); }
.app-prompt-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.app-prompt-title { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.app-prompt-close { width: 40px; height: 40px; }
.app-prompt-body { margin-bottom: 14px; }
.app-prompt-actions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
@media (max-width: 640px) {
  .app-prompt-backdrop { align-items: flex-end; padding: 10px; }
  .app-prompt-sheet {
    width: 100%; border-radius: 24px 24px 0 0; max-height: min(88vh, 760px);
  }
}
.primary-btn, .secondary-btn, .ghost-btn, .icon-btn {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.hero-actions .primary-btn, .hero-actions .secondary-btn {
  white-space: normal; text-wrap: balance;
}


/* phone portrait hard-lock fix */
body.phone-portrait .topbar {
  grid-template-columns: 1fr auto !important;
  grid-template-areas: 'left actions' !important;
  gap: 10px !important;
}
body.phone-portrait .topbar-left {
  grid-area: left;
  min-width: 0 !important;
  overflow: hidden !important;
}
body.phone-portrait .topbar-mobile-actions {
  grid-area: actions;
  gap: 6px !important;
  flex: 0 0 auto;
}
body.phone-portrait .brand-block {
  width: 100%;
  min-width: 0;
  gap: 8px !important;
}
body.phone-portrait .brand-mark {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 auto;
}
body.phone-portrait .brand-block > div:last-child {
  min-width: 0 !important;
  flex: 1 1 auto;
}
body.phone-portrait .brand-name {
  font-size: 15px !important;
  line-height: 18px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.phone-portrait .brand-sub {
  max-width: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.phone-portrait .project-switcher {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 165px !important;
  font-size: 12px !important;
  padding: 6px 30px 6px 12px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.phone-portrait .mobile-action-btn {
  width: 38px !important;
  height: 38px !important;
}
body.phone-portrait .page-hero {
  gap: 10px !important;
}
body.phone-portrait .hero-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
body.phone-portrait .hero-actions .primary-btn,
body.phone-portrait .hero-actions .secondary-btn {
  width: 100% !important;
  min-height: 52px !important;
  height: auto !important;
  padding: 12px 16px !important;
  white-space: normal !important;
  line-height: 1.2 !important;
}
body.phone-portrait .hero-actions .primary-btn span,
body.phone-portrait .hero-actions .secondary-btn span {
  white-space: inherit;
}
body.phone-portrait .page-hero h1 {
  font-size: 26px !important;
  line-height: 30px !important;
}
body.phone-portrait .workspace {
  padding-bottom: 104px !important;
}


/* Story Bible / Character Manager */
.story-bible-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--right-w);
  gap: 24px;
}
.story-bible-main {
  min-width: 0;
}
.story-bible-tabs {
  margin-bottom: 14px;
}
.story-bible-list {
  display: grid;
  gap: 12px;
}
.story-entity-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: var(--surface-strong);
  display: grid;
  gap: 8px;
  text-align: left;
  width: 100%;
}
.story-entity-card.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.story-entity-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.story-entity-name {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}
.story-entity-role {
  font-size: 12px;
  color: var(--text-soft);
}
.story-entity-copy {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.5;
}
.story-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.story-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  font-size: 12px;
  color: var(--text-soft);
}
.world-notes-editor {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.scene-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.scene-link-pill {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  font-size: 12px;
}
.scene-link-pill:hover {
  border-color: var(--accent);
}
@media (max-width: 1024px) {
  .story-bible-grid {
    grid-template-columns: 1fr;
  }
  .story-bible-inspector {
    display: none;
  }
}


/* Touch hardening */
button, .nav-item, .scene-nav-card, .beat-row, .story-card, .mobile-story-card, .mobile-tab, .icon-btn, .ghost-btn, .secondary-btn, .primary-btn, .small-tab, .project-switcher, .scene-link-pill {
  -webkit-tap-highlight-color: transparent;
}
.main-scroll, .surface, .outline-list, .card-board, .mobile-card-list, .comment-thread-list, .left-rail, .editor-scene-list {
  touch-action: pan-y;
}


/* Unified QA hardening viewport classes */
body.tablet-landscape .right-panel,
body.tablet-portrait .right-panel,
body.phone-landscape .right-panel {
  display: none !important;
}

body.tablet-landscape .main-grid,
body.phone-landscape .main-grid {
  grid-template-columns: 250px minmax(0, 1fr) !important;
}
body.tablet-portrait .main-grid {
  grid-template-columns: 220px minmax(0, 1fr) !important;
}
body.tablet-landscape .workspace,
body.tablet-portrait .workspace,
body.phone-landscape .workspace {
  max-width: none;
}
body.tablet-landscape .presence-strip,
body.tablet-portrait .presence-strip,
body.phone-landscape .presence-strip {
  display: none !important;
}
body.tablet-landscape .editor-grid,
body.phone-landscape .editor-grid {
  grid-template-columns: 300px minmax(0, 1fr) !important;
  align-items: start;
}
body.tablet-portrait .editor-grid {
  grid-template-columns: 260px minmax(0, 1fr) !important;
  align-items: start;
}
body.tablet-landscape .screenplay-head,
body.tablet-portrait .screenplay-head,
body.phone-landscape .screenplay-head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 14px;
}
body.tablet-landscape .screenplay-toolbar,
body.tablet-portrait .screenplay-toolbar,
body.phone-landscape .screenplay-toolbar {
  justify-content: flex-start;
  flex-wrap: wrap;
}
body.tablet-landscape .screenplay-canvas,
body.tablet-portrait .screenplay-canvas,
body.phone-landscape .screenplay-canvas {
  width: min(100%, 900px);
}
body.tablet-landscape .two-pane-grid,
body.tablet-landscape .two-pane-grid.wider-right,
body.tablet-landscape .story-bible-grid {
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) !important;
  align-items: start;
}
body.tablet-portrait .two-pane-grid,
body.tablet-portrait .two-pane-grid.wider-right,
body.tablet-portrait .story-bible-grid,
body.phone-landscape .two-pane-grid,
body.phone-landscape .two-pane-grid.wider-right,
body.phone-landscape .story-bible-grid {
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
  align-items: start;
}
body.tablet-landscape .review-grid,
body.phone-landscape .review-grid {
  grid-template-columns: minmax(0, 1fr) 340px !important;
}
body.tablet-portrait .review-grid {
  grid-template-columns: minmax(0, 1fr) 300px !important;
}
body.tablet-landscape #view-corkboard .surface-head,
body.tablet-landscape #view-outline .surface-head,
body.tablet-landscape #view-story-bible .surface-head,
body.tablet-portrait #view-corkboard .surface-head,
body.tablet-portrait #view-outline .surface-head,
body.tablet-portrait #view-story-bible .surface-head,
body.phone-landscape #view-corkboard .surface-head,
body.phone-landscape #view-outline .surface-head,
body.phone-landscape #view-story-bible .surface-head {
  align-items: flex-start;
}
body.tablet-landscape #view-corkboard .surface-head .inline-actions,
body.tablet-landscape #view-story-bible .surface-head .inline-actions,
body.tablet-landscape #view-outline .surface-head .inline-actions,
body.tablet-portrait #view-corkboard .surface-head .inline-actions,
body.tablet-portrait #view-story-bible .surface-head .inline-actions,
body.tablet-portrait #view-outline .surface-head .inline-actions,
body.phone-landscape #view-corkboard .surface-head .inline-actions,
body.phone-landscape #view-story-bible .surface-head .inline-actions,
body.phone-landscape #view-outline .surface-head .inline-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}
body.tablet-landscape .surface-title,
body.tablet-landscape .surface-sub,
body.tablet-landscape .story-card-title,
body.tablet-landscape .comment-body,
body.tablet-landscape .key-value-value,
body.tablet-landscape .story-entity-name,
body.tablet-landscape .story-entity-copy,
body.tablet-portrait .surface-title,
body.tablet-portrait .surface-sub,
body.tablet-portrait .story-card-title,
body.tablet-portrait .comment-body,
body.tablet-portrait .key-value-value,
body.tablet-portrait .story-entity-name,
body.tablet-portrait .story-entity-copy,
body.phone-landscape .surface-title,
body.phone-landscape .surface-sub,
body.phone-landscape .story-card-title,
body.phone-landscape .comment-body,
body.phone-landscape .key-value-value,
body.phone-landscape .story-entity-name,
body.phone-landscape .story-entity-copy {
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.tablet-landscape #view-corkboard .card-board,
body.tablet-portrait #view-corkboard .card-board,
body.phone-landscape #view-corkboard .card-board {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Safety: prevent weird one-character columns in feature-rich surfaces */
.story-entity-card,
.story-card,
.scene-nav-card,
.comment-card,
.key-value-value,
.surface-title,
.surface-sub,
.story-card-title,
.story-entity-name,
.story-entity-copy,
.scene-nav-title,
.scene-nav-copy {
  min-width: 0;
}

/* Tablet portrait / phone landscape top bar hardening */
body.tablet-portrait .topbar,
body.phone-landscape .topbar,
body.tablet-landscape .topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
body.tablet-portrait .topbar-center,
body.phone-landscape .topbar-center,
body.tablet-landscape .topbar-center {
  min-width: 0;
}
body.tablet-portrait .command-bar,
body.phone-landscape .command-bar,
body.tablet-landscape .command-bar {
  width: 100%;
  min-width: 0;
}
body.tablet-portrait .project-switcher,
body.phone-landscape .project-switcher,
body.tablet-landscape .project-switcher {
  max-width: min(34vw, 280px);
}

/* Keep modal sheets above bottom tab on phone */
.mobile-sheet,
.mobile-detail-sheet,
.mobile-search-sheet,
.app-prompt-sheet {
  max-height: min(82vh, 760px);
}


/* Surgical restart mobile nav hardening */
.mobile-nav-backdrop {
  display: none;
}
@media (max-width: 1024px) {
  .mobile-nav-backdrop {
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: rgba(14,15,13,0.34);
    z-index: 59;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms;
    display: block;
  }
  body.mobile-nav-open .mobile-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  body.mobile-nav-open .left-rail {
    transform: translateX(0) !important;
    pointer-events: auto;
  }
  body.mobile-nav-open {
    overflow: hidden;
  }
  .icon-btn.mobile-action-btn,
  #mobileNavBtn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}


/* Safe editor UX hardening pass */
.editor-preset-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px auto 12px;
  width: min(100%, 780px);
}
.preset-pill {
  border: 1px solid var(--border);
  background: var(--surface-strong);
  color: var(--text-soft);
  border-radius: var(--radius-pill);
  padding: 9px 12px;
  font-size: 12px;
}
.screenplay-block-shell {
  position: relative;
  display: grid;
  gap: 8px;
}
/* Block toolbar: hidden by default, revealed on hover/focus */
.screenplay-block-shell {
  position: relative;
}
.block-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  /* Hidden by default — shown only on hover/focus */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, max-height 160ms ease;
}
.screenplay-block-shell:hover .block-toolbar,
.screenplay-block-shell:focus-within .block-toolbar {
  opacity: 1;
  max-height: 60px;
  pointer-events: auto;
}
/* Keyboard / touch: always show the ⋯ overflow button, hide verbose desktop tools */
.block-more-btn {
  border: 1px solid var(--border);
  background: var(--surface-strong);
  color: var(--text-soft);
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1;
}
.block-tool-btn {
  border: 1px solid var(--border);
  background: var(--surface-strong);
  color: var(--text-soft);
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1;
}
.block-drag-handle {
  cursor: grab;
}
.screenplay-block-shell.is-dragging {
  opacity: .55;
}
.screenplay-block-shell.drop-target {
  outline: 2px dashed rgba(80,101,124,0.35);
  outline-offset: 8px;
  border-radius: 18px;
}
.scene-toolbar-split {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* On mobile: collapse desktop tool buttons, show only ⋯ */
@media (max-width: 1024px) {
  /* On touch/mobile the overflow menu lives inside the toolbar,
     so keep the toolbar mounted and visible while hiding desktop-only tools. */
  .screenplay-block-shell .block-toolbar {
    display: flex !important;
    opacity: 1;
    max-height: none;
    overflow: visible;
    pointer-events: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .screenplay-block-shell .block-more-btn {
    opacity: 1;
    max-height: none;
    pointer-events: auto;
    display: inline-flex;
  }
  .screenplay-block-shell {
    display: grid;
    gap: 6px;
    align-items: start;
  }
  .desktop-tool {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  .block-more-btn { display: none; }
}


/* Safe Copilot access */
.copilot-fab, .copilot-backdrop, .copilot-overlay { display: none; }
.copilot-backdrop {
  position: fixed; inset: 0; background: rgba(15,17,14,0.28); opacity: 0; pointer-events: none;
  transition: opacity 180ms ease; z-index: 82;
}
.copilot-overlay {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(440px, 100vw); background: var(--surface-strong);
  border-left: 1px solid var(--border); box-shadow: var(--shadow-2); transform: translateX(100%);
  transition: transform 220ms ease; z-index: 83; grid-template-rows: auto 1fr;
}
.copilot-overlay-head {
  display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.copilot-overlay-body { overflow: auto; padding: 16px; display: grid; align-content: start; gap: 16px; }
.copilot-card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-md); padding: 14px; }
.copilot-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.copilot-open .copilot-backdrop { opacity: 1; pointer-events: auto; }
body.copilot-open .copilot-overlay { transform: translateX(0); }
body.copilot-open { overflow: hidden; }
body.tablet-landscape .copilot-fab, body.tablet-portrait .copilot-fab {
  display: inline-flex; position: fixed; right: 18px; bottom: 18px; z-index: 81; border: 1px solid var(--border);
  background: var(--surface-strong); color: var(--text); border-radius: var(--radius-pill); min-height: 42px; padding: 0 16px;
  box-shadow: var(--shadow-1); align-items: center; justify-content: center;
}
body.tablet-landscape .copilot-backdrop, body.tablet-landscape .copilot-overlay,
body.tablet-portrait .copilot-backdrop, body.tablet-portrait .copilot-overlay,
body.phone-portrait .copilot-backdrop, body.phone-portrait .copilot-overlay,
body.phone-landscape .copilot-backdrop, body.phone-landscape .copilot-overlay { display: block; }
@media (max-width: 1024px) {
  .copilot-overlay { width: min(420px, 100vw); }
}
@media (max-width: 820px) {
  .copilot-fab { display: none !important; }
  .copilot-overlay { width: 100vw; }
  .copilot-actions-grid { grid-template-columns: 1fr; }
}


/* Scene carousel strip (positioned below the dashboard hero) */
.scene-carousel-shell {
  position: relative;
  top: auto;
  z-index: 1;
  margin: 6px 0 22px;
  padding: 0;
  background: transparent;
}
body.dark .scene-carousel-shell {
  background: transparent;
}
.scene-carousel-shell .rail-label {
  margin-bottom: 12px;
}
.scene-carousel {
  position: relative;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 2px 14px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.scene-carousel .scene-nav-card,
.scene-carousel .scene-rail-item {
  flex: 0 0 min(280px, 72vw);
  min-height: 0;
  scroll-snap-align: start;
}
.scene-carousel .scene-nav-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 182px;
  padding: 18px 18px 19px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,244,238,0.96));
}
body.dark .scene-carousel .scene-nav-card {
  background: linear-gradient(180deg, rgba(33,35,29,0.96), rgba(24,26,21,0.96));
}
.scene-carousel .scene-nav-card.is-active {
  border-color: rgba(80,101,124,0.28);
  background: linear-gradient(180deg, #eef4fb, #e7eef5);
  box-shadow: 0 12px 28px rgba(80,101,124,0.10);
}
body.dark .scene-carousel .scene-nav-card.is-active {
  background: linear-gradient(180deg, rgba(58,71,85,0.56), rgba(41,52,63,0.42));
}
.scene-carousel .scene-nav-title {
  color: #1f8cff;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.scene-carousel .scene-nav-copy {
  margin-top: 10px;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
@media (min-width: 1101px) {
  .scene-carousel .scene-nav-card,
  .scene-carousel .scene-rail-item {
    flex-basis: 280px;
  }
}
@media (max-width: 1024px) {
  .scene-carousel-shell {
    padding-top: 0;
    margin-bottom: 18px;
  }
  .scene-carousel .scene-nav-card,
  .scene-carousel .scene-rail-item {
    flex-basis: min(300px, 78vw);
  }
}
body.phone-portrait .scene-carousel-shell {
  padding-top: 0 !important;
  margin: 8px 0 26px !important;
}
body.phone-portrait .scene-carousel-shell::before,
body.phone-portrait .scene-carousel-shell::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 8px;
  width: 18px;
  z-index: 2;
  pointer-events: none;
}
body.phone-portrait .scene-carousel-shell::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), rgba(245,244,239,0));
}
body.dark.phone-portrait .scene-carousel-shell::before {
  background: linear-gradient(90deg, var(--bg), rgba(17,19,15,0));
}
body.phone-portrait .scene-carousel-shell::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg), rgba(245,244,239,0));
}
body.dark.phone-portrait .scene-carousel-shell::after {
  background: linear-gradient(270deg, var(--bg), rgba(17,19,15,0));
}
body.phone-portrait .scene-carousel {
  gap: 14px;
  padding: 4px 4px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
body.phone-portrait .scene-carousel::-webkit-scrollbar {
  display: none;
}
body.phone-portrait .scene-carousel .scene-nav-card,
body.phone-portrait .scene-carousel .scene-rail-item {
  flex-basis: min(82vw, 316px) !important;
}
body.phone-portrait .scene-carousel .scene-nav-card {
  min-height: 214px;
  padding: 20px 20px 22px;
  border-radius: 30px;
  justify-content: flex-start;
}
body.phone-portrait .scene-carousel .scene-nav-title {
  font-size: 17px;
  line-height: 24px;
}
body.phone-portrait .scene-carousel .scene-nav-copy {
  margin-top: 12px;
  font-size: 14px;
  line-height: 23px;
  -webkit-line-clamp: 5;
}



/* Desktop scene strip should expand into reclaimed sidebar space when there are only a few scenes. */
@media (min-width: 1025px) {
  .scene-carousel[data-scene-count="1"],
  .scene-carousel[data-scene-count="2"],
  .scene-carousel[data-scene-count="3"],
  .scene-carousel[data-scene-count="4"] {
    display: grid;
    overflow-x: visible;
    align-items: stretch;
    width: 100%;
    padding-right: 0;
  }

  .scene-carousel[data-scene-count="1"] { grid-template-columns: minmax(0, 1fr); }
  .scene-carousel[data-scene-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-carousel[data-scene-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scene-carousel[data-scene-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .scene-carousel[data-scene-count="1"] .scene-nav-card,
  .scene-carousel[data-scene-count="2"] .scene-nav-card,
  .scene-carousel[data-scene-count="3"] .scene-nav-card,
  .scene-carousel[data-scene-count="4"] .scene-nav-card,
  .scene-carousel[data-scene-count="1"] .scene-rail-item,
  .scene-carousel[data-scene-count="2"] .scene-rail-item,
  .scene-carousel[data-scene-count="3"] .scene-rail-item,
  .scene-carousel[data-scene-count="4"] .scene-rail-item {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  body.desktop-rail-collapsed .scene-carousel[data-scene-count="1"],
  body.desktop-rail-collapsed .scene-carousel[data-scene-count="2"],
  body.desktop-rail-collapsed .scene-carousel[data-scene-count="3"],
  body.desktop-rail-collapsed .scene-carousel[data-scene-count="4"] {
    gap: 14px;
  }
}

/* Desktop rail reflow real fix: current build has no right panel, so the workspace must fully reclaim the freed width. */
@media (min-width: 1025px) {
  .main-grid {
    grid-template-columns: var(--left-w) minmax(0, 1fr) !important;
  }

  .workspace {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: clamp(20px, 2vw, 32px) !important;
    padding-right: clamp(20px, 2vw, 32px) !important;
  }

  .workspace > .view,
  .workspace > section.view,
  .page-hero,
  .scene-carousel-shell,
  .dashboard-grid,
  .project-grid,
  .editor-grid,
  .two-pane-grid,
  .review-grid,
  .settings-grid {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.desktop-rail-collapsed .main-grid {
    grid-template-columns: 0 minmax(0, 1fr) !important;
  }

  body.desktop-rail-collapsed .workspace {
    width: 100% !important;
    max-width: none !important;
    padding-left: clamp(24px, 2.25vw, 36px) !important;
    padding-right: clamp(24px, 2.25vw, 36px) !important;
  }

  .page-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .dashboard-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr) !important;
  }

  body.desktop-rail-collapsed .dashboard-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(380px, 1fr) !important;
  }

  .project-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr) !important;
  }

  body.desktop-rail-collapsed .project-grid {
    grid-template-columns: minmax(0, 1.48fr) minmax(360px, 1fr) !important;
  }

  .scene-carousel-shell {
    overflow: hidden;
  }
}


/* Surgical rebuild: mobile topbar action buttons */
.topbar-mobile-actions { position: relative; z-index: 220; }
#mobileSearchBtn, #mobileMoreBtn { position: relative; z-index: 221; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mobile-sheet-backdrop, .mobile-search-backdrop { z-index: 160; }
.mobile-action-sheet, .mobile-search-sheet { z-index: 161; }
@media (max-width: 1024px) {
  .topbar { isolation: isolate; }
  .topbar-mobile-actions { display: flex; align-items: center; gap: 8px; }
}

/* Final polish pass — visual only, no behavior changes */
:root {
  --shadow-1: 0 12px 30px rgba(18,20,16,0.045);
  --shadow-2: 0 24px 54px rgba(18,20,16,0.08);
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.topbar {
  background: linear-gradient(180deg, rgba(248,247,243,0.86), rgba(245,244,239,0.72));
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset;
}
body.dark .topbar {
  background: linear-gradient(180deg, rgba(22,24,19,0.88), rgba(17,19,15,0.74));
  box-shadow: 0 1px 0 rgba(255,255,255,0.035) inset;
}

.brand-mark,
.command-bar,
.project-switcher,
.primary-btn,
.secondary-btn,
.ghost-btn,
.icon-btn,
.avatar-pill,
.meta-chip,
.pill-pill,
.nav-item,
.surface,
.scene-carousel .scene-nav-card,
.health-mini,
.resume-scene,
.activity-item,
.idea-item,
.collaborator-item,
.research-thread,
.comment-card,
.research-card,
.mobile-tabbar,
.mobile-action-sheet,
.mobile-search-sheet,
.mobile-detail-sheet {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.brand-mark {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,239,232,0.96));
  border-color: rgba(74,74,64,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset, var(--shadow-1);
}
body.dark .brand-mark {
  background: linear-gradient(180deg, rgba(35,38,31,0.98), rgba(25,27,22,0.96));
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, var(--shadow-1);
}

.project-switcher,
.command-bar {
  border-color: rgba(74,74,64,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,244,238,0.96));
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, var(--shadow-1);
}
body.dark .project-switcher,
body.dark .command-bar {
  background: linear-gradient(180deg, rgba(34,36,30,0.98), rgba(24,26,21,0.96));
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, var(--shadow-1);
}
.command-bar:hover,
.project-switcher:hover {
  border-color: rgba(80,101,124,0.18);
}
.command-bar:focus-visible,
.project-switcher:focus-visible,
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.ghost-btn:focus-visible,
.icon-btn:focus-visible,
.nav-item:focus-visible,
.scene-carousel .scene-nav-card:focus-visible {
  outline: 2px solid rgba(80,101,124,0.26);
  outline-offset: 2px;
}

.surface {
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(250,248,242,0.72));
  border-color: rgba(74,74,64,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset, var(--shadow-1);
}
body.dark .surface {
  background: linear-gradient(180deg, rgba(29,31,26,0.9), rgba(23,25,20,0.84));
  box-shadow: 0 1px 0 rgba(255,255,255,0.035) inset, var(--shadow-1);
}

.left-rail {
  background: linear-gradient(180deg, rgba(249,248,244,0.8), rgba(242,240,234,0.72));
}
body.dark .left-rail {
  background: linear-gradient(180deg, rgba(22,24,19,0.82), rgba(18,20,16,0.74));
}

.nav-item {
  font-weight: 560;
}
.nav-item:hover {
  background: rgba(80,101,124,0.075);
}
.nav-item.is-active {
  background: linear-gradient(180deg, rgba(230,237,245,0.95), rgba(223,232,242,0.9));
  color: #445e78;
  box-shadow: 0 1px 0 rgba(255,255,255,0.66) inset;
}
body.dark .nav-item.is-active {
  background: linear-gradient(180deg, rgba(56,69,84,0.42), rgba(47,59,72,0.32));
  color: #b7cce2;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.icon-btn,
.avatar-pill,
.mobile-tab {
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    color 180ms ease;
}
.primary-btn,
.secondary-btn,
.icon-btn,
.avatar-pill {
  box-shadow: 0 1px 0 rgba(255,255,255,0.65) inset, var(--shadow-1);
}
.primary-btn {
  background: linear-gradient(180deg, #171914, #0e0f0c);
  border-color: #12130f;
}
.primary-btn:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 14px 28px rgba(15,17,14,0.16); }
.secondary-btn,
.icon-btn,
.avatar-pill {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,243,238,0.96));
  border-color: rgba(74,74,64,0.09);
}
.ghost-btn {
  border-color: transparent;
}
body.dark .secondary-btn,
body.dark .icon-btn,
body.dark .avatar-pill {
  background: linear-gradient(180deg, rgba(34,36,30,0.98), rgba(25,27,22,0.96));
}

.page-hero h1 {
  letter-spacing: -0.058em;
}
.page-hero p {
  color: color-mix(in srgb, var(--text-soft) 92%, black 8%);
}
.surface-title {
  letter-spacing: -0.04em;
}
.surface-sub,
.rail-label,
.eyebrow,
.health-mini-title {
  letter-spacing: 0.13em;
}

.scene-carousel-shell .rail-label {
  margin-bottom: 14px;
}
.scene-carousel {
  padding-top: 4px;
  padding-bottom: 16px;
}
.scene-carousel .scene-nav-card {
  border-color: rgba(74,74,64,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset, 0 10px 24px rgba(18,20,16,0.045);
}
.scene-carousel .scene-nav-card:hover {
  transform: translateY(-2px);
  border-color: rgba(80,101,124,0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,0.76) inset, 0 18px 34px rgba(18,20,16,0.07);
}
.scene-carousel .scene-nav-card.is-active {
  border-color: rgba(80,101,124,0.2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.78) inset, 0 18px 36px rgba(80,101,124,0.12);
}
.scene-carousel .scene-nav-title {
  color: #2585ef;
  letter-spacing: -0.04em;
}
body.dark .scene-carousel .scene-nav-title {
  color: #8ec2ff;
}

.surface-head {
  padding-bottom: 2px;
}
.resume-scene,
.activity-item,
.idea-item,
.collaborator-item,
.research-thread,
.comment-card,
.research-card,
.health-mini {
  border-color: rgba(74,74,64,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.64) inset;
}

.mobile-tabbar {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,246,241,0.96));
  border-color: rgba(74,74,64,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 18px 40px rgba(18,20,16,0.1);
  backdrop-filter: blur(22px);
}
body.dark .mobile-tabbar {
  background: linear-gradient(180deg, rgba(28,30,25,0.94), rgba(20,22,18,0.98));
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 40px rgba(0,0,0,0.24);
}
.mobile-tab.is-active {
  background: linear-gradient(180deg, #eef4fb, #e6eef7);
  color: #445e78;
  box-shadow: 0 1px 0 rgba(255,255,255,0.78) inset;
}
body.dark .mobile-tab.is-active {
  background: linear-gradient(180deg, rgba(57,70,84,0.48), rgba(46,58,71,0.36));
  color: #c4d8ec;
}

.mobile-action-sheet,
.mobile-search-sheet,
.mobile-detail-sheet {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,244,239,0.98));
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  box-shadow: 0 -16px 38px rgba(18,20,16,0.12);
}
body.dark .mobile-action-sheet,
body.dark .mobile-search-sheet,
body.dark .mobile-detail-sheet {
  background: linear-gradient(180deg, rgba(31,33,27,0.98), rgba(21,23,19,0.98));
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(92,95,86,0.22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(92,95,86,0.32);
  border: 2px solid transparent;
  background-clip: padding-box;
}

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

@media (max-width: 1024px) {
  .topbar {
    box-shadow: 0 1px 0 rgba(255,255,255,0.65) inset;
  }
  .page-hero {
    margin-bottom: 22px;
  }
  .surface {
    border-radius: 26px;
  }
}

body.phone-portrait .scene-carousel .scene-nav-card {
  box-shadow: 0 1px 0 rgba(255,255,255,0.74) inset, 0 14px 28px rgba(18,20,16,0.05);
}
body.phone-portrait .scene-carousel .scene-nav-card.is-active {
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 20px 40px rgba(80,101,124,0.12);
}


/* Remove navbar wordmark while keeping SF mark + project switcher */
.brand-name {
  display: none !important;
}
.brand-block > div:last-child {
  display: flex;
  align-items: center;
}


/* Surgical sticky topbar fix */
.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 500 !important;
}
.app-shell {
  padding-top: var(--topbar-h) !important;
  grid-template-rows: 1fr var(--status-h) !important;
  min-height: var(--viewport-h) !important;
}
@media (max-width: 1024px) {
  .app-shell {
    grid-template-rows: 1fr !important;
  }
}

/* v13 visual polish + hierarchy refinement */
.scene-meta-editor {
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid rgba(80,101,124,0.12);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(246,248,250,0.96));
  box-shadow: 0 16px 36px rgba(16,24,40,0.05);
  gap: 14px;
}
body.dark .scene-meta-editor {
  background: linear-gradient(180deg, rgba(34,37,31,0.92), rgba(25,27,22,0.98));
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 18px 36px rgba(0,0,0,0.28);
}
.scene-meta-editor .meta-edit {
  gap: 8px;
}
.scene-meta-editor .meta-edit > span {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.scene-meta-editor .app-select,
.scene-meta-editor .app-textarea {
  background: rgba(255,255,255,0.86);
  border-color: rgba(80,101,124,0.14);
}
body.dark .scene-meta-editor .app-select,
body.dark .scene-meta-editor .app-textarea {
  background: rgba(44,47,40,0.9);
  border-color: rgba(255,255,255,0.08);
}
.scene-meta-editor .scene-review-meta {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(80,101,124,0.10);
}

.review-script-pane,
.review-comments-pane {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(248,249,251,0.98));
}
body.dark .review-script-pane,
body.dark .review-comments-pane {
  background: linear-gradient(180deg, rgba(34,37,31,0.94), rgba(24,26,21,0.98));
}
.review-scene-card {
  padding: 18px 18px 16px;
  border: 1px solid rgba(80,101,124,0.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(247,249,251,0.98));
  box-shadow: 0 12px 28px rgba(16,24,40,0.05);
}
body.dark .review-scene-card {
  background: linear-gradient(180deg, rgba(35,38,32,0.94), rgba(25,27,22,0.98));
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 16px 30px rgba(0,0,0,0.28);
}
.review-scene-top {
  margin-bottom: 12px;
}
.review-scene-top .scene-heading {
  margin-bottom: 8px;
}
.scene-review-note {
  gap: 7px;
  padding: 14px 15px;
  border-radius: 18px;
  background: rgba(80,101,124,0.055);
  border: 1px solid rgba(80,101,124,0.10);
}
.review-comments-pane .comment-thread-list {
  gap: 10px;
}
.review-comments-pane .comment-card {
  padding: 15px;
  border-radius: 18px;
  border-color: rgba(80,101,124,0.10);
  background: rgba(255,255,255,0.74);
}
body.dark .review-comments-pane .comment-card {
  background: rgba(44,47,40,0.86);
}
.review-comments-pane .comment-card.resolved {
  opacity: 0.78;
}

.story-bible-list {
  gap: 14px;
}
.story-entity-card {
  padding: 16px 17px;
  border-radius: 20px;
  gap: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(247,249,251,0.98));
  border-color: rgba(80,101,124,0.10);
  box-shadow: 0 10px 24px rgba(16,24,40,0.045);
}
body.dark .story-entity-card {
  background: linear-gradient(180deg, rgba(35,38,32,0.94), rgba(25,27,22,0.98));
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 14px 28px rgba(0,0,0,0.24);
}
.story-entity-card.is-active {
  border-color: rgba(80,101,124,0.24);
  box-shadow: 0 16px 32px rgba(80,101,124,0.10);
}
.story-chip-row {
  gap: 6px;
}
.story-chip {
  background: rgba(80,101,124,0.08);
  color: var(--text-soft);
}
.story-bible-inspector .inspector-content {
  gap: 14px;
}
.story-bible-inspector .key-value {
  gap: 6px;
  padding: 13px 14px;
  border: 1px solid rgba(80,101,124,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.70);
}
body.dark .story-bible-inspector .key-value {
  background: rgba(44,47,40,0.78);
  border-color: rgba(255,255,255,0.07);
}
.story-bible-inspector .inline-actions {
  margin-top: 4px !important;
}
.story-bible-inspector .scene-link-list {
  gap: 8px;
  margin-top: 2px;
}

.mobile-detail-sheet {
  padding: 14px 14px 24px;
}
.mobile-detail-head {
  margin-bottom: 10px;
}
.mobile-close-btn {
  background: rgba(80,101,124,0.08);
  border: 1px solid rgba(80,101,124,0.10);
}
body.dark .mobile-close-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}
.mobile-detail-body {
  padding: 8px 2px 10px;
}
.mobile-detail-body > * + * {
  margin-top: 12px;
}
.mobile-detail-body .key-value {
  gap: 6px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(80,101,124,0.08);
  background: rgba(255,255,255,0.78);
}
body.dark .mobile-detail-body .key-value {
  background: rgba(44,47,40,0.82);
  border-color: rgba(255,255,255,0.08);
}
.mobile-detail-body .inline-actions {
  margin-top: 4px !important;
}
.mobile-detail-body .scene-link-list {
  gap: 8px;
}

@media (max-width: 1024px) {
  .scene-meta-editor {
    padding: 16px;
    border-radius: 22px;
    margin-bottom: 18px;
  }
  .review-scene-card,
  .story-entity-card {
    border-radius: 20px;
  }
}

@media (max-width: 640px) {
  .scene-meta-editor {
    padding: 14px;
  }
  .scene-meta-editor .app-textarea.compact {
    min-height: 84px;
  }
  .review-comments-pane .comment-card,
  .review-scene-card,
  .story-entity-card {
    padding: 14px;
  }
}

/* Feature 1 — comments and threaded feedback */
.comment-thread-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.comment-thread-context {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.comment-priority-chip,
.comment-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  line-height: 1;
}
.comment-priority-chip.is-high {
  background: rgba(185, 28, 28, 0.10);
  color: #b91c1c;
}
.comment-priority-chip.is-medium {
  background: rgba(180, 83, 9, 0.10);
  color: #b45309;
}
.comment-priority-chip.is-low {
  background: rgba(21, 128, 61, 0.10);
  color: #15803d;
}
.comment-state-pill.is-open {
  background: rgba(80,101,124,0.10);
  color: var(--text-soft);
}
.comment-state-pill.is-resolved {
  background: rgba(63,107,82,0.10);
  color: var(--success);
}
.comment-thread-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.comment-replies {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.comment-reply-card {
  border-radius: 14px;
  padding: 11px 12px;
  background: rgba(80,101,124,0.055);
  border: 1px solid rgba(80,101,124,0.08);
}
.comment-card.is-compact {
  padding: 13px 14px;
}
.comment-card.is-compact .comment-thread-actions {
  margin-top: 10px;
}
.scene-feedback-panel {
  display: grid;
  gap: 12px;
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid rgba(80,101,124,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(247,249,251,0.98));
}
.scene-feedback-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.scene-feedback-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.scene-feedback-list {
  display: grid;
  gap: 10px;
}
.scene-feedback-empty {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.6;
}
body.dark .comment-reply-card,
body.dark .scene-feedback-panel {
  background: rgba(44,47,40,0.82);
  border-color: rgba(255,255,255,0.08);
}
body.dark .comment-priority-chip.is-high { color: #ef4444; }
body.dark .comment-priority-chip.is-medium { color: #f59e0b; }
body.dark .comment-priority-chip.is-low { color: #22c55e; }
@media (max-width: 900px) {
  .scene-feedback-head,
  .comment-thread-head {
    flex-direction: column;
  }
  .scene-feedback-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Feature 2 — real revision tracking */
.scene-revision-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(80,101,124,0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.74);
  display: grid;
  gap: 14px;
}
.scene-revision-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.scene-revision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.scene-revision-list {
  display: grid;
  gap: 10px;
}
.scene-revision-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(80,101,124,0.10);
  background: rgba(80,101,124,0.05);
  display: grid;
  gap: 10px;
}
.scene-revision-card.is-compact { gap: 8px; }
.scene-revision-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.scene-revision-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.scene-revision-note {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.55;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(80,101,124,0.08);
}
.revision-empty {
  margin: 0;
}
.review-revision-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.revision-diff-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.revision-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.revision-compare-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(80,101,124,0.10);
  background: rgba(80,101,124,0.05);
}
.revision-preview-stack {
  display: grid;
  gap: 10px;
}
.revision-script-preview {
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(80,101,124,0.08);
  background: rgba(255,255,255,0.72);
  color: var(--text-main);
  font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
body.dark .scene-revision-panel,
body.dark .scene-revision-card,
body.dark .revision-compare-card {
  background: rgba(20,23,30,0.78);
  border-color: rgba(148,163,184,0.14);
}
body.dark .scene-revision-note,
body.dark .revision-script-preview {
  background: rgba(255,255,255,0.04);
  border-color: rgba(148,163,184,0.12);
}
@media (max-width: 980px) {
  .scene-revision-panel-head,
  .scene-revision-head,
  .review-revision-strip {
    flex-direction: column;
    align-items: stretch;
  }
  .revision-compare-grid {
    grid-template-columns: 1fr;
  }
}


.story-link-summary {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}
.story-link-summary-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.story-link-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.story-link-preview-chip,
.scene-link-empty,
.story-link-preview-empty {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(80,101,124,0.08);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.3;
}
.story-link-preview-chip.is-more {
  background: rgba(80,101,124,0.12);
}
.key-value-links .key-value-value {
  display: grid;
  gap: 8px;
}
.story-bible-inspector .key-value.key-value-links {
  background: rgba(248,250,252,0.94);
  border-color: rgba(80,101,124,0.12);
}
.mobile-detail-body .story-link-summary {
  margin-top: 2px;
}

/* v16 — smarter review mode */
.review-summary-shell {
  display: grid;
  gap: 12px;
  margin-bottom: 6px;
}
.review-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.review-summary-card {
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid rgba(80,101,124,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,248,251,0.98));
  box-shadow: 0 10px 24px rgba(16,24,40,0.04);
}
.review-summary-value {
  margin-top: 8px;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--text-main);
}
.review-toolbar-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.review-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.review-filter-chip {
  border: 1px solid rgba(80,101,124,0.10);
  background: rgba(255,255,255,0.78);
  color: var(--text-soft);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.review-filter-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(80,101,124,0.08);
  color: var(--text-main);
  font-size: 11px;
}
.review-filter-chip.is-active {
  background: rgba(80,101,124,0.12);
  color: var(--text-main);
  border-color: rgba(80,101,124,0.16);
}
.review-mode-row {
  flex-wrap: wrap;
}
.review-summary-note {
  margin: 0;
}
.review-scene-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.review-reader-shell {
  display: grid;
  gap: 14px;
}
.review-reader-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(80,101,124,0.10);
  background: rgba(255,255,255,0.72);
}
.review-reader-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.review-scene-card.is-reader {
  padding: 22px 22px 20px;
}
.review-empty-state {
  padding: 22px;
  border-radius: 20px;
  border: 1px dashed rgba(80,101,124,0.18);
  background: rgba(255,255,255,0.55);
  display: grid;
  gap: 8px;
}
body.dark .review-summary-card,
body.dark .review-reader-nav,
body.dark .review-empty-state {
  background: rgba(29,32,27,0.88);
  border-color: rgba(255,255,255,0.08);
}
body.dark .review-filter-chip {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
body.dark .review-filter-chip.is-active {
  background: rgba(148,163,184,0.12);
}
body.dark .review-filter-chip span {
  background: rgba(255,255,255,0.08);
  color: var(--text-main);
}
@media (max-width: 980px) {
  .review-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .review-reader-nav,
  .review-toolbar-row {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 640px) {
  .review-summary-strip {
    grid-template-columns: 1fr;
  }
  .review-scene-actions,
  .review-reader-actions,
  .review-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .review-mode-row {
    width: 100%;
  }
  .review-mode-row .small-tab {
    flex: 1;
  }
}

/* v17 planning board enhancements */
.planning-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.planning-summary-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,242,236,0.96));
  padding: 14px 16px;
  display: grid;
  gap: 4px;
}
.planning-summary-value {
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--text);
}
.planning-summary-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.planning-act-block {
  overflow: hidden;
}
.planning-act-head {
  align-items: center;
  gap: 16px;
}
.planning-row-top,
.planning-row-meta,
.planning-chip-row,
.inspector-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.planning-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.planning-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.planning-chip.is-lane {
  font-weight: 600;
}
.planning-chip.is-scene {
  letter-spacing: 0.05em;
}
.planning-meta-empty,
.planning-scene-label.is-empty {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.planning-lane-group {
  display: grid;
  gap: 14px;
  margin-top: 2px;
}
.planning-lane-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.planning-lane-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.planning-story-card,
.planning-mobile-card,
.planning-beat-row {
  position: relative;
}
.planning-story-card::before,
.planning-mobile-card::before,
.planning-beat-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(80,101,124,0.16);
}
.planning-story-card .planning-chip-row,
.planning-mobile-card .planning-chip-row {
  margin-top: 10px;
}
.planning-inspector-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,239,233,0.98));
  padding: 16px;
  display: grid;
  gap: 10px;
}
.planning-inspector-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .planning-lane-grid {
    grid-template-columns: 1fr;
  }
}

/* v18a — mobile UX / responsive hardening pass */
.resolve-pill,
.review-filter-chip,
.small-tab,
.scene-link-pill,
.planning-chip,
.story-chip,
.meta-chip,
.pill-pill {
  white-space: nowrap;
}
.resolve-pill,
.review-filter-chip,
.small-tab,
.pill-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

@media (max-width: 1024px) {
  .surface-head,
  .planning-lane-head,
  .outline-act-head,
  .story-entity-top,
  .scene-feedback-head,
  .scene-revision-panel-head,
  .review-reader-nav,
  .review-scene-top,
  .screenplay-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }

  .surface-head > .inline-actions,
  .planning-lane-head > .inline-actions,
  .outline-act-head > .inline-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .planning-summary-strip,
  .review-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .planning-summary-card,
  .review-summary-card {
    min-width: 0;
    padding: 12px 14px;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(16,24,40,0.045);
  }

  .planning-summary-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,246,249,0.96));
  }

  .planning-summary-value,
  .review-summary-value {
    font-size: 20px;
  }

  .planning-summary-label,
  .review-summary-card .key-value-key {
    letter-spacing: 0.08em;
    line-height: 1.25;
  }

  .review-toolbar-row {
    gap: 10px;
  }

  .review-filter-row,
  .review-mode-row,
  .review-scene-actions,
  .review-reader-actions,
  .scene-revision-actions,
  .scene-feedback-actions,
  .inspector-action-row {
    width: 100%;
  }

  .review-filter-row,
  .review-scene-actions,
  .review-reader-actions,
  .scene-revision-actions,
  .scene-feedback-actions,
  .inspector-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .review-filter-chip,
  .resolve-pill,
  .scene-revision-actions .secondary-btn,
  .scene-revision-actions .primary-btn,
  .scene-feedback-actions .secondary-btn,
  .scene-feedback-actions .primary-btn,
  .review-reader-actions .resolve-pill,
  .review-scene-actions .resolve-pill,
  .review-scene-actions .pill-pill,
  .inspector-action-row .ghost-btn,
  .inspector-action-row .secondary-btn,
  .inspector-action-row .primary-btn {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 10px 12px;
  }

  .review-filter-chip {
    justify-content: space-between;
    text-align: left;
    font-size: 12px;
  }

  .review-filter-chip span {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 600;
  }

  .scene-revision-panel {
    padding: 14px;
    gap: 12px;
  }

  .scene-revision-head {
    gap: 10px;
  }

  .review-summary-note,
  .revision-empty,
  .scene-feedback-empty {
    font-size: 13px;
    line-height: 1.55;
  }

  .mobile-detail-body .planning-summary-strip,
  .mobile-detail-body .review-summary-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .planning-summary-strip,
  .review-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .planning-summary-card,
  .review-summary-card {
    padding: 11px 12px;
    border-radius: 15px;
  }

  .planning-summary-value,
  .review-summary-value {
    font-size: 18px;
    line-height: 1;
  }

  .planning-summary-label,
  .review-summary-card .key-value-key {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .review-filter-row,
  .review-mode-row,
  .review-scene-actions,
  .review-reader-actions,
  .scene-revision-actions,
  .scene-feedback-actions,
  .inspector-action-row {
    grid-template-columns: 1fr;
  }

  .review-mode-row .small-tab {
    width: 100%;
    justify-content: center;
  }

  .outline-list,
  .card-board,
  .review-script,
  .screenplay-canvas,
  .story-bible-list {
    gap: 10px;
  }

  .outline-act-head,
  .planning-lane-head {
    padding: 12px 14px;
  }

  .beat-row,
  .review-scene-card,
  .story-entity-card,
  .mobile-story-card,
  .scene-revision-card,
  .comment-card,
  .comment-thread-card {
    padding: 12px 14px;
  }

  .planning-kicker,
  .surface-sub,
  .story-entity-role,
  .key-value-key,
  .planning-summary-label,
  .review-summary-card .key-value-key {
    letter-spacing: 0.07em;
  }

  .story-chip,
  .planning-chip,
  .scene-link-pill,
  .meta-chip {
    min-height: 28px;
    padding: 6px 10px;
    font-size: 11px;
  }

  .story-link-preview,
  .scene-link-list,
  .story-chip-row,
  .planning-chip-row,
  .planning-row-meta,
  .review-revision-strip,
  .revision-diff-strip {
    gap: 6px;
  }

  .scene-revision-panel-head > div:first-child,
  .scene-feedback-head > div:first-child,
  .surface-head > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  .scene-revision-panel-head .surface-sub,
  .scene-feedback-head .surface-sub,
  .review-summary-note {
    max-width: none;
  }
}

@media (max-width: 430px) {
  .topbar {
    gap: 10px;
  }

  .project-switcher {
    max-width: min(46vw, 188px) !important;
    font-size: 12px !important;
  }

  .planning-summary-strip,
  .review-summary-strip {
    grid-template-columns: 1fr 1fr;
  }

  .planning-summary-card,
  .review-summary-card {
    min-height: 68px;
  }

  .review-filter-chip,
  .resolve-pill,
  .scene-revision-actions .secondary-btn,
  .scene-revision-actions .primary-btn,
  .scene-feedback-actions .secondary-btn,
  .scene-feedback-actions .primary-btn,
  .review-scene-actions .resolve-pill,
  .review-scene-actions .pill-pill,
  .review-reader-actions .resolve-pill,
  .inspector-action-row .ghost-btn,
  .inspector-action-row .secondary-btn,
  .inspector-action-row .primary-btn {
    min-height: 42px;
    font-size: 12px;
  }
}


/* === Feature 6: Offline trust layer === */
.trust-stack { display:grid; gap:14px; }
.trust-summary-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.trust-summary-card {
  border:1px solid rgba(15,23,42,.08);
  background:rgba(247,248,251,.92);
  border-radius:18px;
  padding:14px 16px;
}
.trust-summary-label {
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted, #6b7280);
  margin-bottom:6px;
}
.trust-summary-value {
  font-size:1.15rem;
  font-weight:700;
  color:var(--ink, #111827);
}
.trust-actions { flex-wrap:wrap; }
.trust-backup-list { display:grid; gap:12px; }
.trust-entry {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.92);
  border-radius:18px;
  padding:14px 16px;
}
.trust-entry-recovery {
  border-color:rgba(59,130,246,.18);
  background:rgba(239,246,255,.78);
}
.trust-entry-meta { min-width:0; }
.trust-entry-title {
  font-size:1rem;
  font-weight:700;
  color:var(--ink, #111827);
}
.trust-entry-sub {
  margin-top:4px;
  color:var(--muted, #6b7280);
  line-height:1.45;
}
.trust-entry-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:0 0 auto;
}
.trust-notice {
  border-color:rgba(59,130,246,.14);
  background:rgba(239,246,255,.72);
}

@media (max-width: 1024px) {
  .trust-summary-grid { grid-template-columns:1fr; }
  .trust-entry {
    flex-direction:column;
    align-items:flex-start;
  }
  .trust-entry-actions {
    width:100%;
    justify-content:flex-start;
  }
  .trust-actions {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .trust-actions > .secondary-btn,
  .trust-actions > .ghost-btn {
    width:100%;
  }
}


@media (max-width: 820px) {
  .collaboration-row { grid-template-columns: 1fr; }
  .collaboration-row-actions { justify-content: flex-start; }
  .scene-collaboration-row { flex-direction: column; align-items: flex-start; }
  .collaborator-item-head { flex-direction: column; align-items: flex-start; }
  .presence-strip { gap: 6px; }
  .presence-avatar { width: 28px; height: 28px; }
}
@media (max-width: 640px) {
  .presence-strip { max-width: 108px; overflow: hidden; }
}

/* v20a — merged mobile overflow / wrap hardening */
.story-card-title,
.story-card-copy,
.story-entity-name,
.story-entity-role,
.story-entity-copy,
.story-link-preview-chip,
.scene-link-pill,
.story-chip,
.story-tag,
.scene-link-empty,
.story-link-preview-empty {
  min-width: 0;
  overflow-wrap: anywhere;
}
.story-card-tags,
.story-chip-row,
.story-link-preview,
.scene-link-list {
  align-items: flex-start;
}
.story-tag,
.story-link-preview-chip,
.scene-link-pill,
.scene-link-empty,
.story-link-preview-empty {
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
  text-align: left;
}
.story-tag {
  display: inline-flex;
  align-items: flex-start;
}
.story-card-tags > *,
.story-chip-row > *,
.story-link-preview > *,
.scene-link-list > * {
  min-width: 0;
  max-width: 100%;
}
.story-entity-card,
.story-card,
.mobile-story-card,
.recent-scene-card,
.activity-item,
.idea-item {
  overflow: hidden;
}
.story-entity-top > *,
.story-card-top > *,
.surface-head > *,
.page-hero > * {
  min-width: 0;
}
@media (max-width: 640px) {
  .story-card-tags,
  .story-link-preview,
  .scene-link-list,
  .story-chip-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .story-tag,
  .story-link-preview-chip,
  .scene-link-pill,
  .scene-link-empty,
  .story-link-preview-empty,
  .story-chip {
    width: 100%;
    justify-content: flex-start;
    border-radius: 16px;
    padding: 8px 11px;
    white-space: normal;
  }
  .story-entity-card {
    padding: 14px 14px 15px;
  }
  .story-entity-name {
    font-size: 14px;
    line-height: 1.25;
  }
  .story-entity-copy,
  .story-card-copy {
    font-size: 13px;
    line-height: 1.48;
  }
  .story-tag {
    font-size: 12px;
  }
  .story-card-tags {
    margin-top: 10px;
  }
  #view-project .story-card,
  #view-dashboard .story-card,
  #view-story-bible .story-entity-card {
    max-width: 100%;
  }
}
@media (max-width: 430px) {
  .story-card {
    min-height: 0;
  }
  .story-card-title {
    font-size: 14px;
    line-height: 1.25;
  }
  .story-tag,
  .story-link-preview-chip,
  .scene-link-pill,
  .story-chip {
    font-size: 11px;
    letter-spacing: 0.01em;
  }
}

/* v20b — targeted mobile card/chip containment fixes */
.story-link-summary,
.resume-meta,
.story-entity-top,
.story-entity-card > div,
.resume-scene > div {
  min-width: 0;
  max-width: 100%;
}

.story-entity-card,
.resume-scene,
.resume-card,
.story-link-summary,
.story-chip-row,
.story-link-preview,
.scene-link-list,
.resume-meta {
  box-sizing: border-box;
}

@media (max-width: 640px) {
  #view-story-bible .story-bible-main,
  #view-story-bible .story-bible-list,
  #view-dashboard .resume-card,
  #view-dashboard .resume-scene {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  #view-story-bible .story-entity-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  #view-story-bible .story-entity-card .story-chip-row,
  #view-story-bible .story-entity-card .story-link-preview,
  #view-story-bible .story-entity-card .scene-link-list,
  #view-dashboard .resume-card .resume-meta,
  #view-project .resume-card .resume-meta {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #view-story-bible .story-entity-card .story-chip,
  #view-story-bible .story-entity-card .story-link-preview-chip,
  #view-story-bible .story-entity-card .scene-link-pill,
  #view-story-bible .story-entity-card .story-link-preview-empty,
  #view-story-bible .story-entity-card .scene-link-empty,
  #view-dashboard .resume-card .pill-pill,
  #view-project .resume-card .pill-pill {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
  }

  #view-story-bible .story-entity-card .story-chip,
  #view-story-bible .story-entity-card .story-link-preview-chip,
  #view-story-bible .story-entity-card .scene-link-pill {
    padding-right: 12px;
  }

  #view-story-bible .story-entity-card .story-entity-name,
  #view-story-bible .story-entity-card .story-entity-role,
  #view-story-bible .story-entity-card .story-entity-copy,
  #view-dashboard .resume-scene h3,
  #view-dashboard .resume-scene p {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #view-dashboard .resume-scene {
    overflow: hidden;
  }
}

@media (max-width: 430px) {
  #view-story-bible .story-entity-card .story-entity-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
  }

  #view-story-bible .story-entity-card .story-chip {
    justify-content: flex-start;
    align-items: flex-start;
  }

  #view-dashboard .resume-card .resume-meta,
  #view-project .resume-card .resume-meta {
    gap: 8px;
  }

  #view-dashboard .resume-card .pill-pill,
  #view-project .resume-card .pill-pill {
    font-size: 12px;
    line-height: 1.35;
    padding: 8px 12px;
  }
}

/* v20c — tablet / iPad landscape containment hardening */
#view-story-bible .story-entity-card,
#view-story-bible .story-entity-card > div,
#view-story-bible .story-entity-top,
#view-story-bible .story-chip-row,
#view-story-bible .story-link-preview,
#view-story-bible .scene-link-list,
#view-project .resume-card,
#view-dashboard .resume-card,
#view-project .resume-meta,
#view-dashboard .resume-meta {
  min-width: 0;
  max-width: 100%;
}

#view-story-bible .story-entity-card {
  overflow: hidden;
}

#view-story-bible .story-entity-card .story-chip,
#view-story-bible .story-entity-card .story-link-preview-chip,
#view-story-bible .story-entity-card .scene-link-pill,
#view-story-bible .story-entity-card .scene-link-empty,
#view-story-bible .story-entity-card .story-link-preview-empty,
#view-project .resume-card .pill-pill,
#view-dashboard .resume-card .pill-pill {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  text-align: left;
}

#view-story-bible .story-entity-card .story-chip {
  display: inline-flex;
  align-items: flex-start;
}

#view-story-bible .story-entity-card .story-chip-row,
#view-story-bible .story-entity-card .story-link-preview,
#view-story-bible .story-entity-card .scene-link-list,
#view-project .resume-card .resume-meta,
#view-dashboard .resume-card .resume-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

body.tablet-landscape #view-story-bible .story-entity-card .story-chip-row,
body.tablet-landscape #view-story-bible .story-entity-card .story-link-preview,
body.tablet-landscape #view-story-bible .story-entity-card .scene-link-list,
body.tablet-landscape #view-project .resume-card .resume-meta,
body.tablet-landscape #view-dashboard .resume-card .resume-meta,
body.tablet-portrait #view-story-bible .story-entity-card .story-chip-row,
body.tablet-portrait #view-story-bible .story-entity-card .story-link-preview,
body.tablet-portrait #view-story-bible .story-entity-card .scene-link-list,
body.tablet-portrait #view-project .resume-card .resume-meta,
body.tablet-portrait #view-dashboard .resume-card .resume-meta,
body.phone-landscape #view-story-bible .story-entity-card .story-chip-row,
body.phone-landscape #view-story-bible .story-entity-card .story-link-preview,
body.phone-landscape #view-story-bible .story-entity-card .scene-link-list,
body.phone-landscape #view-project .resume-card .resume-meta,
body.phone-landscape #view-dashboard .resume-card .resume-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

body.tablet-landscape #view-story-bible .story-entity-card .story-chip,
body.tablet-landscape #view-story-bible .story-entity-card .story-link-preview-chip,
body.tablet-landscape #view-story-bible .story-entity-card .scene-link-pill,
body.tablet-landscape #view-story-bible .story-entity-card .scene-link-empty,
body.tablet-landscape #view-story-bible .story-entity-card .story-link-preview-empty,
body.tablet-landscape #view-project .resume-card .pill-pill,
body.tablet-landscape #view-dashboard .resume-card .pill-pill,
body.tablet-portrait #view-story-bible .story-entity-card .story-chip,
body.tablet-portrait #view-story-bible .story-entity-card .story-link-preview-chip,
body.tablet-portrait #view-story-bible .story-entity-card .scene-link-pill,
body.tablet-portrait #view-story-bible .story-entity-card .scene-link-empty,
body.tablet-portrait #view-story-bible .story-entity-card .story-link-preview-empty,
body.tablet-portrait #view-project .resume-card .pill-pill,
body.tablet-portrait #view-dashboard .resume-card .pill-pill,
body.phone-landscape #view-story-bible .story-entity-card .story-chip,
body.phone-landscape #view-story-bible .story-entity-card .story-link-preview-chip,
body.phone-landscape #view-story-bible .story-entity-card .scene-link-pill,
body.phone-landscape #view-story-bible .story-entity-card .scene-link-empty,
body.phone-landscape #view-story-bible .story-entity-card .story-link-preview-empty,
body.phone-landscape #view-project .resume-card .pill-pill,
body.phone-landscape #view-dashboard .resume-card .pill-pill {
  display: block;
  width: 100%;
}

@media (max-width: 1366px) {
  #view-story-bible .story-entity-card .story-chip,
  #view-story-bible .story-entity-card .story-link-preview-chip,
  #view-story-bible .story-entity-card .scene-link-pill,
  #view-project .resume-card .pill-pill,
  #view-dashboard .resume-card .pill-pill {
    justify-content: flex-start;
  }
}


/* ═══════════════════════════════════════════════════════════════
   E-LEVEL POLISH PASS — visual depth, motion, hierarchy, type
   Safe: CSS-only, no behavior changes, no selector conflicts
   ═══════════════════════════════════════════════════════════════ */

/* 1 — View transition: fade-in when switching panels */
@media (prefers-reduced-motion: no-preference) {
  .view.is-active {
    animation: viewFadeIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes viewFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* 2 — Screenplay canvas: refined font stack, leading, and measure */
.screenplay-canvas {
  font-family: 'Courier Prime', 'Courier New', 'Nimbus Mono PS', monospace;
}
.screenplay-action {
  letter-spacing: 0.004em;
  line-height: 1.72;
}
.screenplay-dialogue {
  letter-spacing: 0.005em;
  line-height: 1.68;
}
.screenplay-character {
  letter-spacing: 0.14em;
  font-weight: 700;
}
.scene-heading {
  letter-spacing: 0.1em;
  font-weight: 700;
}
.screenplay-parenthetical {
  color: var(--text-soft);
  font-style: italic;
}
.screenplay-note {
  color: var(--text-faint);
  background: rgba(139,106,43,0.06);
  border-left: 2px solid rgba(139,106,43,0.28);
  padding-left: 10px;
  border-radius: 0 8px 8px 0;
}
body.dark .screenplay-note {
  background: rgba(180,140,60,0.07);
  border-left-color: rgba(180,140,60,0.30);
}

/* 3 — Note panels: warmer, more readable */
.note-panel {
  font-size: 13px;
  line-height: 1.68;
  color: var(--text-soft);
  background: linear-gradient(135deg, rgba(253,249,240,0.96), rgba(247,244,236,0.92));
  border: 1px solid rgba(139,106,43,0.14);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
body.dark .note-panel {
  background: linear-gradient(135deg, rgba(45,42,32,0.90), rgba(38,35,28,0.88));
  border-color: rgba(180,140,60,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

/* 4 — Toast: elevated and branded */
.toast {
  background: linear-gradient(180deg, rgba(22,23,20,0.97), rgba(14,15,12,0.97));
  color: rgba(245,244,239,0.96);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 560;
  letter-spacing: 0.01em;
  padding: 13px 18px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.06) inset;
}
body.dark .toast {
  background: linear-gradient(180deg, rgba(36,39,32,0.98), rgba(26,29,23,0.98));
  color: rgba(230,232,224,0.96);
}

/* 5 — Starter/AI buttons: richer hover lift */
.starter-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(243,241,235,0.98));
  border-color: rgba(80,101,124,0.20);
  box-shadow: 0 1px 0 rgba(255,255,255,0.78) inset, 0 14px 32px rgba(16,24,40,0.08);
}
body.dark .starter-btn:hover {
  background: linear-gradient(180deg, rgba(42,45,37,0.98), rgba(33,36,29,0.96));
  border-color: rgba(148,163,184,0.16);
}

/* 6 — Copilot overlay: softer header, better depth */
.copilot-overlay-head {
  background: linear-gradient(180deg, var(--surface-strong), var(--surface));
  border-bottom: 1px solid var(--border);
}
.copilot-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,246,241,0.9));
  box-shadow: 0 8px 20px rgba(16,24,40,0.04), 0 1px 0 rgba(255,255,255,0.7) inset;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
body.dark .copilot-card {
  background: linear-gradient(180deg, rgba(35,38,31,0.90), rgba(26,29,23,0.92));
  box-shadow: 0 10px 24px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.03) inset;
}
.copilot-card:hover {
  border-color: rgba(80,101,124,0.20);
  box-shadow: 0 14px 28px rgba(16,24,40,0.07), 0 1px 0 rgba(255,255,255,0.72) inset;
}

/* 7 — App textarea/select: richer focus ring */
.app-textarea:focus,
.app-select:focus {
  border-color: rgba(80,101,124,0.32);
  box-shadow: 0 0 0 4px rgba(80,101,124,0.09), 0 1px 0 rgba(255,255,255,0.72) inset;
  outline: none;
}

/* 8 — Presence avatars: richer coloring per-user via nth-child */
.presence-avatar:nth-child(1) { background: linear-gradient(135deg, #dce9f5, #c8ddef); color: #3b5975; border-color: rgba(80,101,124,0.18); }
.presence-avatar:nth-child(2) { background: linear-gradient(135deg, #e5f0e8, #cfe4d3); color: #3a6349; border-color: rgba(60,100,80,0.18); }
.presence-avatar:nth-child(3) { background: linear-gradient(135deg, #f5e9dc, #eddbca); color: #7a5535; border-color: rgba(122,85,53,0.18); }
body.dark .presence-avatar:nth-child(1) { background: linear-gradient(135deg, rgba(56,75,96,0.6), rgba(42,60,78,0.5)); color: #a8cae6; }
body.dark .presence-avatar:nth-child(2) { background: linear-gradient(135deg, rgba(46,74,55,0.6), rgba(34,58,43,0.5)); color: #a0cfa9; }
body.dark .presence-avatar:nth-child(3) { background: linear-gradient(135deg, rgba(85,58,36,0.6), rgba(68,46,28,0.5)); color: #d4aa80; }

/* 9 — Scene status badge polish */
.status-badge {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 660;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid transparent;
}
.status-badge.is-draft    { background: rgba(92,95,86,0.10); color: var(--text-faint); border-color: rgba(92,95,86,0.12); }
.status-badge.is-revise   { background: rgba(139,106,43,0.10); color: var(--warning); border-color: rgba(139,106,43,0.14); }
.status-badge.is-approved { background: rgba(63,107,82,0.10); color: var(--success); border-color: rgba(63,107,82,0.14); }
.status-badge.is-locked   { background: rgba(80,101,124,0.10); color: var(--accent); border-color: rgba(80,101,124,0.14); }

/* 10 — Panel tabs: more distinct active state */
.panel-tab {
  font-size: 12px;
  font-weight: 580;
  letter-spacing: 0.02em;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.panel-tab.is-active {
  background: linear-gradient(180deg, #eef4fb, #e6eef7);
  color: #3d5872;
  box-shadow: 0 1px 0 rgba(255,255,255,0.78) inset;
}
body.dark .panel-tab.is-active {
  background: linear-gradient(180deg, rgba(55,68,82,0.44), rgba(44,56,69,0.34));
  color: #b8d0e8;
}

/* 11 — Small tab (review mode switcher) refinement */
.small-tab {
  transition: background 160ms ease, color 160ms ease;
}
.small-tab.is-active {
  background: linear-gradient(180deg, rgba(232,239,247,0.96), rgba(224,233,244,0.92));
  color: #3d5872;
  box-shadow: 0 1px 0 rgba(255,255,255,0.74) inset;
}
body.dark .small-tab.is-active {
  background: linear-gradient(180deg, rgba(55,68,82,0.42), rgba(43,56,68,0.32));
  color: #b5cde5;
}

/* 12 — Review summary cards: elevated stat values */
.review-summary-value {
  font-weight: 760;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, var(--text-main, var(--text)), color-mix(in srgb, var(--text) 78%, transparent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 13 — Status strip: slightly more visual interest */
.status-strip {
  background: linear-gradient(180deg, rgba(248,247,243,0.72), rgba(245,243,238,0.82));
  border-top-color: rgba(74,74,64,0.07);
}
body.dark .status-strip {
  background: linear-gradient(180deg, rgba(18,20,16,0.72), rgba(14,16,12,0.82));
}
.status-center {
  text-align: center;
  letter-spacing: 0.02em;
}

/* 14 — Outline beat rows: cleaner hover state */
@media (prefers-reduced-motion: no-preference) {
  .beat-row {
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  }
  .beat-row:hover {
    transform: translateX(2px);
  }
}

/* 15 — Card board cards: subtle depth lift on hover */
@media (prefers-reduced-motion: no-preference) {
  .story-card {
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  }
  .story-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.78) inset, 0 20px 40px rgba(18,20,16,0.09);
    border-color: rgba(80,101,124,0.16);
  }
}

/* 16 — Trust summary grid: warm stat cards */
.trust-summary-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(246,244,238,0.94));
  box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset, 0 8px 18px rgba(16,24,40,0.04);
}
body.dark .trust-summary-card {
  background: linear-gradient(180deg, rgba(34,37,31,0.92), rgba(25,27,22,0.96));
  border-color: rgba(255,255,255,0.07);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 22px rgba(0,0,0,0.2);
}

/* 17 — Page hero h1: Google Fonts progressive enhancement */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&display=swap');
.page-hero h1 {
  font-family: 'Lora', 'Georgia', 'Times New Roman', serif;
  font-weight: 700;
  font-style: normal;
}

/* 18 — Scene carousel nav title: match hero serif for mood */
.scene-carousel .scene-nav-title {
  font-family: 'Lora', 'Georgia', serif;
  font-weight: 700;
}

/* 19 — Resolve pill (action) polish */
.resolve-pill {
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.resolve-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(63,107,82,0.14);
}
.pill-pill {
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.pill-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(80,101,124,0.14);
}

/* 20 — Health mini cards: richer value highlight */
.health-mini-value {
  font-weight: 680;
  letter-spacing: -0.03em;
  color: var(--text);
}
.health-mini-title {
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* 21 — Editable block: smoother focus transition */
.editable-block {
  transition: background 160ms ease, box-shadow 160ms ease;
}

/* 22 — Copilot FAB: branded, not just text */
.copilot-fab {
  font-weight: 640;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,242,236,0.96)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.78) inset, 0 12px 28px rgba(18,20,16,0.10) !important;
  border-color: rgba(74,74,64,0.09) !important;
}
body.dark .copilot-fab {
  background: linear-gradient(180deg, rgba(36,39,32,0.98), rgba(26,29,23,0.96)) !important;
}

/* 23 — Focus mode: ultra clean, max contrast for writing */
.focus-mode .workspace {
  background: linear-gradient(180deg,
    rgba(253,251,246,0.6) 0%,
    rgba(255,254,250,0) 18%,
    rgba(255,254,250,0) 82%,
    rgba(249,248,243,0.4) 100%
  );
}
body.dark.focus-mode .workspace {
  background: transparent;
}
.focus-mode .screenplay-pane {
  padding-top: 44px;
  padding-bottom: 44px;
}

/* 24 — App prompt modal: polished overlay sheet */
.app-prompt-sheet {
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,246,241,0.98));
  border-color: rgba(74,74,64,0.08);
  box-shadow: 0 4px 0 rgba(255,255,255,0.7) inset, 0 40px 80px rgba(18,20,16,0.16);
}
body.dark .app-prompt-sheet {
  background: linear-gradient(180deg, rgba(33,36,29,0.99), rgba(23,26,20,0.98));
  box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset, 0 40px 80px rgba(0,0,0,0.38);
}
.app-prompt-title {
  font-weight: 640;
}

/* 25 — Scrollbar: thinner, more refined */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb {
  background: rgba(92,95,86,0.18);
  border: 1.5px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(92,95,86,0.28);
  border: 1.5px solid transparent;
  background-clip: padding-box;
}



/* ═══════════════════════════════════════════════════════
   CONTRAST FIX — legibility pass
   Raises text-faint, label, placeholder, and body copy
   contrast without touching layout or behaviour
   ═══════════════════════════════════════════════════════ */

/* 1 — Core token overrides: stronger faint/soft in light mode */
:root {
  --text-soft:  #494c44;   /* was #5c5f56 — +25% contrast */
  --text-faint: #636660;   /* was #7a7d74 — +30% contrast */
}
body.dark {
  --text-soft:  #d0d4c8;   /* was #bcc0b4 — brighter */
  --text-faint: #a8ada2;   /* was #8d9288 — brighter */
}

/* 2 — key-value labels (HEADING, STATUS, SYNOPSIS, etc.) */
.key-value-key,
.meta-edit > span,
.surface-sub,
.rail-label,
.eyebrow,
.health-mini-title,
.scene-rail-kicker,
.story-card-kicker,
.planning-kicker,
.planning-summary-label,
.trust-summary-label {
  color: #5a5d55;
  font-weight: 620;
}
body.dark .key-value-key,
body.dark .meta-edit > span,
body.dark .surface-sub,
body.dark .rail-label,
body.dark .eyebrow,
body.dark .health-mini-title,
body.dark .scene-rail-kicker,
body.dark .story-card-kicker,
body.dark .planning-kicker,
body.dark .planning-summary-label,
body.dark .trust-summary-label {
  color: #b8bdb2;
}

/* 3 — Textarea / input placeholder text */
.app-textarea::placeholder,
.app-textarea,
.app-select,
.scene-heading-input,
.mobile-search-input::placeholder,
.mobile-search-input {
  color: var(--text);
}
.app-textarea::placeholder,
.mobile-search-input::placeholder {
  color: #8a8d84;
}
body.dark .app-textarea::placeholder,
body.dark .mobile-search-input::placeholder {
  color: #6a6e65;
}

/* 4 — Screenplay monospace body text: fully opaque */
.screenplay-action,
.screenplay-dialogue,
.screenplay-note,
.screenplay-parenthetical,
.scene-heading,
.screenplay-character {
  color: var(--text);
}

/* 5 — Scene editor meta fields: labels and helper text */
.scene-meta-editor .meta-edit > span {
  color: #555850;
  font-weight: 640;
  font-size: 10.5px;
}
body.dark .scene-meta-editor .meta-edit > span {
  color: #acb0a8;
}

/* 6 — Editing owner field copy */
.scene-collaboration-row .surface-sub,
.edit-owner-copy {
  color: #636660;
}
body.dark .scene-collaboration-row .surface-sub,
body.dark .edit-owner-copy {
  color: #a0a49c;
}

/* 7 — Comment / feedback body text */
.comment-body,
.comment-reply-card,
.scene-review-note-copy,
.scene-feedback-empty,
.collaboration-row-copy {
  color: #3e4139;
  line-height: 1.65;
}
body.dark .comment-body,
body.dark .comment-reply-card,
body.dark .scene-review-note-copy,
body.dark .scene-feedback-empty,
body.dark .collaboration-row-copy {
  color: #d4d8cc;
}

/* 8 — Scene nav copy (left rail + carousel synopsis) */
.scene-nav-copy,
.beat-row-copy,
.story-entity-copy,
.story-card-copy {
  color: #4a4d45;
}
body.dark .scene-nav-copy,
body.dark .beat-row-copy,
body.dark .story-entity-copy,
body.dark .story-card-copy {
  color: #c4c8be;
}

/* 9 — Activity/idea timestamps */
.activity-time,
.comment-meta,
.idea-date,
.research-type {
  color: #70736a;
  font-weight: 500;
}
body.dark .activity-time,
body.dark .comment-meta,
body.dark .idea-date,
body.dark .research-type {
  color: #90948c;
}

/* 10 — Note panel body text */
.note-panel {
  color: #464940;
}
body.dark .note-panel {
  color: #c8ccbf;
}



/* ╔══════════════════════════════════════════════════════════════════╗
   ║  APPLE-LEVEL FINISH PASS                                        ║
   ║  Systematic refinement: tokens → surfaces → type → motion      ║
   ║  CSS-only. No layout or behaviour changes.                      ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── 0. Font & rendering ─────────────────────────────────────── */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Courier Prime", ui-monospace, SFMono-Regular,
               Menlo, Consolas, monospace;

  /* Refined shadow system — layered, diffuse, natural */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04),
              0 4px 12px rgba(0,0,0,0.06),
              0 12px 28px rgba(0,0,0,0.05);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.06),
              0 8px 24px rgba(0,0,0,0.08),
              0 24px 56px rgba(0,0,0,0.10);
  --shadow-float: 0 4px 6px rgba(0,0,0,0.04),
                  0 12px 32px rgba(0,0,0,0.10),
                  0 32px 64px rgba(0,0,0,0.08);

  /* More refined palette */
  --bg:            #f2f1ec;
  --surface:       rgba(255,255,255,0.78);
  --surface-strong:rgba(255,255,255,0.96);
  --surface-soft:  #eceae2;
  --border:        rgba(0,0,0,0.07);
  --border-strong: rgba(0,0,0,0.13);
  --text:          #1c1c1e;
  --text-soft:     #48484a;
  --text-faint:    #6c6c70;
  --accent:        #4a6580;
  --accent-soft:   #e8f0f8;
  --success:       #34c759;
  --success-text:  #1a7a34;
  --warning:       #ff9f0a;
  --warning-text:  #7d4800;
  --danger:        #ff3b30;
  --danger-text:   #8b1a14;

  /* Spacing rhythm */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 36px;

  /* Border radii — tighter, more Apple-like */
  --radius-xs:  8px;
  --radius-sm:  11px;
  --radius-md:  16px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill:999px;
}

body.dark {
  --bg:            #0e0e10;
  --surface:       rgba(28,28,30,0.92);
  --surface-strong:rgba(36,36,38,0.98);
  --surface-soft:  #1c1c1e;
  --border:        rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --text:          #f5f5f7;
  --text-soft:     #aeaeb2;
  --text-faint:    #6e6e73;
  --accent:        #6b9ac4;
  --accent-soft:   rgba(70,110,160,0.22);
  --success:       #30d158;
  --success-text:  #30d158;
  --warning:       #ff9f0a;
  --warning-text:  #ff9f0a;
  --shadow-1: 0 1px 3px rgba(0,0,0,0.2),
              0 6px 18px rgba(0,0,0,0.28),
              0 16px 40px rgba(0,0,0,0.22);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.28),
              0 12px 32px rgba(0,0,0,0.34),
              0 32px 64px rgba(0,0,0,0.30);
  --shadow-float: 0 4px 8px rgba(0,0,0,0.32),
                  0 16px 40px rgba(0,0,0,0.38),
                  0 40px 80px rgba(0,0,0,0.30);
}

/* Background: paper-like warmth with very subtle noise texture */
html, body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(255,255,255,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(200,212,226,0.28) 0%, transparent 55%);
}
body.dark {
  background-image:
    radial-gradient(ellipse 70% 40% at 15% 0%, rgba(40,50,70,0.30) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(30,40,30,0.25) 0%, transparent 50%);
}

/* ── 1. Topbar — macOS menu-bar feel ─────────────────────────── */
.topbar {
  background: rgba(242,241,236,0.82) !important;
  backdrop-filter: saturate(180%) blur(28px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset,
              0 1px 8px rgba(0,0,0,0.06) !important;
}
body.dark .topbar {
  background: rgba(18,18,20,0.84) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 1px 12px rgba(0,0,0,0.4) !important;
}

/* Brand mark — refined SF-style rounded icon */
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(145deg, #2c3e50 0%, #1a252f 100%);
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28),
              0 1px 0 rgba(255,255,255,0.12) inset;
  color: rgba(255,255,255,0.95);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: -0.04em;
}
body.dark .brand-mark {
  background: linear-gradient(145deg, #3a4f66 0%, #263445 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5),
              0 1px 0 rgba(255,255,255,0.10) inset;
}

/* Command bar — iOS search feel */
.command-bar {
  min-height: 38px;
  border-radius: 12px;
  background: rgba(0,0,0,0.055) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: var(--text-faint);
  font-size: 14px;
  transition: background 180ms ease, border-color 180ms ease;
}
.command-bar:hover {
  background: rgba(0,0,0,0.07) !important;
  transform: none !important;
}
.command-bar:focus-visible {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(74,101,128,0.30) !important;
  box-shadow: 0 0 0 4px rgba(74,101,128,0.12) !important;
}
body.dark .command-bar {
  background: rgba(255,255,255,0.07) !important;
}
body.dark .command-bar:hover {
  background: rgba(255,255,255,0.10) !important;
}

/* Project switcher */
.project-switcher {
  border-radius: 10px !important;
  background: rgba(0,0,0,0.05) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 540;
  color: var(--text);
  padding: 6px 28px 6px 12px;
  appearance: auto;
  transition: background 160ms ease;
}
.project-switcher:hover { background: rgba(0,0,0,0.08) !important; }
body.dark .project-switcher {
  background: rgba(255,255,255,0.08) !important;
}

/* Avatar */
.avatar-pill {
  width: 34px; height: 34px;
  background: linear-gradient(145deg, #4a6580, #344d62);
  border: 1.5px solid rgba(255,255,255,0.24);
  color: rgba(255,255,255,0.94);
  font-size: 11px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
}

/* ── 2. Buttons — iOS/macOS style ────────────────────────────── */
.primary-btn {
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1c1c1e 0%, #141416 100%) !important;
  border: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset,
              0 2px 8px rgba(0,0,0,0.28) !important;
  color: rgba(255,255,255,0.96) !important;
  font-size: 14px;
  font-weight: 590;
  letter-spacing: -0.01em;
  transition: all 160ms ease !important;
}
.primary-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset,
              0 4px 14px rgba(0,0,0,0.36) !important;
}
.primary-btn:active {
  transform: translateY(0px) scale(0.98) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset,
              0 1px 4px rgba(0,0,0,0.20) !important;
}
body.dark .primary-btn {
  background: linear-gradient(180deg, #f5f5f7 0%, #e5e5ea 100%) !important;
  color: #1c1c1e !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset,
              0 2px 8px rgba(0,0,0,0.40) !important;
}

.secondary-btn {
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.88) inset,
              0 1px 4px rgba(0,0,0,0.06),
              0 2px 10px rgba(0,0,0,0.06) !important;
  color: var(--text) !important;
  font-size: 14px;
  font-weight: 540;
  transition: all 160ms ease !important;
}
.secondary-btn:hover {
  background: rgba(255,255,255,1) !important;
  border-color: rgba(0,0,0,0.14) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset,
              0 2px 8px rgba(0,0,0,0.08),
              0 6px 20px rgba(0,0,0,0.08) !important;
}
.secondary-btn:active {
  transform: translateY(0) scale(0.98) !important;
}
body.dark .secondary-btn {
  background: rgba(58,58,62,0.92) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset,
              0 2px 8px rgba(0,0,0,0.28) !important;
}
body.dark .secondary-btn:hover {
  background: rgba(68,68,72,0.96) !important;
}

.ghost-btn {
  height: 38px;
  border-radius: 12px;
  color: var(--accent) !important;
  font-size: 14px;
  font-weight: 540;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 160ms ease, color 160ms ease !important;
}
.ghost-btn:hover {
  background: rgba(74,101,128,0.09) !important;
  transform: none !important;
}
.ghost-btn:active { background: rgba(74,101,128,0.14) !important; }
body.dark .ghost-btn:hover {
  background: rgba(107,154,196,0.14) !important;
}

.icon-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.90) !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  transition: all 150ms ease !important;
}
.icon-btn:hover {
  background: rgba(255,255,255,1) !important;
  transform: none !important;
}
body.dark .icon-btn {
  background: rgba(52,52,56,0.92) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ── 3. Left rail — macOS sidebar feel ──────────────────────── */
.left-rail {
  background: rgba(238,237,233,0.72) !important;
  backdrop-filter: saturate(160%) blur(22px) !important;
  border-right: 1px solid rgba(0,0,0,0.07) !important;
}
body.dark .left-rail {
  background: rgba(20,20,22,0.82) !important;
  border-right-color: rgba(255,255,255,0.07) !important;
}

.nav-item {
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-soft) !important;
  letter-spacing: -0.01em;
  transition: background 140ms ease, color 140ms ease !important;
}
.nav-item:hover {
  background: rgba(0,0,0,0.055) !important;
  color: var(--text) !important;
  transform: none !important;
}
.nav-item.is-active {
  background: rgba(255,255,255,0.82) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08),
              0 1px 0 rgba(255,255,255,0.9) inset !important;
}
body.dark .nav-item:hover { background: rgba(255,255,255,0.07) !important; }
body.dark .nav-item.is-active {
  background: rgba(255,255,255,0.10) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.30),
              0 1px 0 rgba(255,255,255,0.06) inset !important;
  color: var(--text) !important;
}

.rail-label {
  font-size: 11px !important;
  font-weight: 640 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-faint) !important;
  padding: 0 12px !important;
  margin-bottom: 6px !important;
}

/* ── 4. Surfaces / Cards ─────────────────────────────────────── */
.surface {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset,
              var(--shadow-1) !important;
}
body.dark .surface {
  background: rgba(30,30,32,0.88) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              var(--shadow-1) !important;
}

.surface-title {
  font-size: 17px !important;
  font-weight: 660 !important;
  letter-spacing: -0.03em !important;
  color: var(--text) !important;
}
.surface-sub {
  font-size: 13px !important;
  color: var(--text-faint) !important;
  letter-spacing: 0 !important;
  margin-top: 2px !important;
}

/* Scene nav cards */
.scene-nav-card {
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  background: rgba(255,255,255,0.88) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset,
              0 2px 8px rgba(0,0,0,0.06) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}
.scene-nav-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset,
              0 6px 20px rgba(0,0,0,0.09) !important;
  border-color: rgba(0,0,0,0.11) !important;
}
.scene-nav-card.is-active {
  background: linear-gradient(180deg, #eef4fb, #e5eef8) !important;
  border-color: rgba(74,101,128,0.28) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset,
              0 4px 16px rgba(74,101,128,0.12) !important;
}
body.dark .scene-nav-card {
  background: rgba(38,38,42,0.92) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 2px 10px rgba(0,0,0,0.28) !important;
}
body.dark .scene-nav-card.is-active {
  background: linear-gradient(180deg, rgba(60,80,105,0.38), rgba(48,66,88,0.28)) !important;
  border-color: rgba(107,154,196,0.30) !important;
}
.scene-nav-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #2a7ae4 !important;
  line-height: 1.35 !important;
}
body.dark .scene-nav-title { color: #6eb4ff !important; }

/* Story cards (corkboard) */
.story-card {
  border-radius: var(--radius-xl) !important;
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, var(--shadow-1) !important;
}
body.dark .story-card {
  background: rgba(34,34,38,0.94) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.story-card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.35 !important;
}
.story-tag {
  background: rgba(0,0,0,0.06) !important;
  color: var(--text-faint) !important;
  font-size: 11px !important;
  font-weight: 540 !important;
  border-radius: 8px !important;
  padding: 5px 9px !important;
}
body.dark .story-tag { background: rgba(255,255,255,0.09) !important; }

/* ── 5. Inputs & Textareas ───────────────────────────────────── */
.app-textarea,
.app-select {
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  background: rgba(255,255,255,0.88) !important;
  color: var(--text) !important;
  font-size: 15px !important;
  padding: 13px 15px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) inset !important;
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}
.app-textarea:focus,
.app-select:focus {
  border-color: rgba(74,101,128,0.40) !important;
  box-shadow: 0 0 0 4px rgba(74,101,128,0.10),
              0 1px 3px rgba(0,0,0,0.05) inset !important;
  outline: none !important;
  background: rgba(255,255,255,0.98) !important;
}
body.dark .app-textarea,
body.dark .app-select {
  background: rgba(44,44,48,0.92) !important;
  border-color: rgba(255,255,255,0.11) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18) inset !important;
}
body.dark .app-textarea:focus,
body.dark .app-select:focus {
  background: rgba(52,52,58,0.98) !important;
  border-color: rgba(107,154,196,0.40) !important;
  box-shadow: 0 0 0 4px rgba(107,154,196,0.12),
              0 1px 3px rgba(0,0,0,0.18) inset !important;
}
.app-textarea::placeholder { color: #9a9da4 !important; }
body.dark .app-textarea::placeholder { color: #5a5d65 !important; }

/* Heading input in scene editor */
.scene-heading-input {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── 6. key-value labels ─────────────────────────────────────── */
.key-value-key {
  font-size: 11px !important;
  font-weight: 660 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-faint) !important;
}
body.dark .key-value-key { color: #7a7d84 !important; }

/* ── 7. Screenplay canvas — A-grade writing surface ─────────── */
.screenplay-pane { background: transparent; }
.screenplay-canvas {
  font-family: var(--font-mono) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}
.screenplay-scene {
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  padding-top: 10px !important;
  margin-top: 4px;
}
body.dark .screenplay-scene {
  border-top-color: rgba(255,255,255,0.07) !important;
}
.screenplay-scene.is-active {
  border-top-color: rgba(74,101,128,0.28) !important;
}
.scene-heading {
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: 0.10em !important;
  color: var(--text) !important;
  margin-bottom: 16px !important;
}
.screenplay-action {
  color: var(--text) !important;
  font-size: 15px !important;
  line-height: 1.76 !important;
}
.screenplay-character {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--text) !important;
  margin-top: 16px !important;
  margin-bottom: 4px !important;
}
.screenplay-dialogue {
  color: var(--text) !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
}
.screenplay-parenthetical {
  color: var(--text-soft) !important;
  font-style: italic !important;
}
.screenplay-note {
  background: rgba(255,149,0,0.06) !important;
  border-left: 2px solid rgba(255,149,0,0.36) !important;
  border-radius: 0 10px 10px 0 !important;
  color: var(--text-soft) !important;
}
body.dark .screenplay-note {
  background: rgba(255,149,0,0.08) !important;
  border-left-color: rgba(255,149,0,0.30) !important;
}

/* Inline AI bar */
.inline-ai-bar {
  border-radius: 16px !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: var(--shadow-float) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  padding: 8px !important;
}
body.dark .inline-ai-bar {
  background: rgba(32,32,36,0.92) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.inline-ai-pill {
  border-radius: 10px !important;
  background: rgba(0,0,0,0.05) !important;
  color: var(--text-soft) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  font-weight: 500;
  transition: background 140ms ease, color 140ms ease !important;
}
.inline-ai-pill:hover {
  background: rgba(0,0,0,0.09) !important;
  color: var(--text) !important;
}
body.dark .inline-ai-pill { background: rgba(255,255,255,0.07) !important; }

/* ── 8. Outline / beats ──────────────────────────────────────── */
.outline-act-block {
  border-radius: var(--radius-xl) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  background: rgba(255,255,255,0.84) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset,
              0 2px 10px rgba(0,0,0,0.05) !important;
  overflow: hidden;
}
body.dark .outline-act-block {
  background: rgba(28,28,32,0.90) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset,
              0 2px 14px rgba(0,0,0,0.28) !important;
}
.outline-act-head {
  background: rgba(0,0,0,0.025) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  padding: 14px 18px !important;
}
body.dark .outline-act-head {
  background: rgba(255,255,255,0.03) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
.beat-row {
  padding: 13px 18px !important;
  border-top: 1px solid rgba(0,0,0,0.04) !important;
  transition: background 130ms ease !important;
}
body.dark .beat-row { border-top-color: rgba(255,255,255,0.04) !important; }
.beat-row:hover { background: rgba(0,0,0,0.025) !important; transform: none !important; }
.beat-row.is-active {
  background: linear-gradient(90deg, rgba(74,101,128,0.07), rgba(74,101,128,0.04)) !important;
  border-left: 3px solid rgba(74,101,128,0.4) !important;
  padding-left: 15px !important;
}
body.dark .beat-row.is-active {
  background: rgba(107,154,196,0.10) !important;
  border-left-color: rgba(107,154,196,0.40) !important;
}
.beat-row-title { font-size: 14px !important; font-weight: 560 !important; color: var(--text) !important; }
.beat-row-copy { font-size: 13px !important; color: var(--text-soft) !important; margin-top: 3px !important; }

/* ── 9. Status badges ────────────────────────────────────────── */
.scene-status-badge {
  font-size: 11px !important;
  font-weight: 660 !important;
  letter-spacing: 0.02em !important;
  border-radius: 8px !important;
  padding: 4px 9px !important;
}
.scene-status-badge.is-draft {
  background: rgba(0,0,0,0.07) !important;
  color: var(--text-faint) !important;
}
.scene-status-badge.is-revise {
  background: rgba(255,149,0,0.12) !important;
  color: #8a4e00 !important;
}
.scene-status-badge.is-approved {
  background: rgba(52,199,89,0.12) !important;
  color: #1a7a34 !important;
}
.scene-status-badge.is-locked {
  background: rgba(74,101,128,0.12) !important;
  color: #3a5572 !important;
}
body.dark .scene-status-badge.is-revise { color: #ff9f0a !important; background: rgba(255,149,0,0.15) !important; }
body.dark .scene-status-badge.is-approved { color: #30d158 !important; background: rgba(48,209,88,0.14) !important; }
body.dark .scene-status-badge.is-locked { color: #6b9ac4 !important; }

/* Resolve / pill pills */
.resolve-pill {
  border-radius: 9px !important;
  background: rgba(52,199,89,0.10) !important;
  color: #1a7a34 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 11px !important;
  border: 1px solid rgba(52,199,89,0.18) !important;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease !important;
}
.resolve-pill:hover {
  background: rgba(52,199,89,0.16) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(52,199,89,0.16) !important;
}
body.dark .resolve-pill {
  background: rgba(48,209,88,0.12) !important;
  color: #30d158 !important;
  border-color: rgba(48,209,88,0.20) !important;
}
.pill-pill {
  border-radius: 9px !important;
  background: rgba(74,101,128,0.10) !important;
  color: var(--accent) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 11px !important;
  border: 1px solid rgba(74,101,128,0.16) !important;
  transition: background 140ms ease, transform 140ms ease !important;
}
.pill-pill:hover {
  background: rgba(74,101,128,0.16) !important;
  transform: translateY(-1px) !important;
}

/* ── 10. Panel tabs ──────────────────────────────────────────── */
.panel-tab {
  font-size: 13px !important;
  font-weight: 560 !important;
  border-radius: 10px !important;
  color: var(--text-soft) !important;
  transition: background 140ms ease, color 140ms ease !important;
  padding: 8px 14px !important;
}
.panel-tab:hover { background: rgba(0,0,0,0.05) !important; color: var(--text) !important; }
.panel-tab.is-active {
  background: rgba(255,255,255,0.92) !important;
  color: var(--text) !important;
  font-weight: 640 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.09),
              0 1px 0 rgba(255,255,255,0.92) inset !important;
}
body.dark .panel-tab:hover { background: rgba(255,255,255,0.07) !important; }
body.dark .panel-tab.is-active {
  background: rgba(255,255,255,0.10) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.28) !important;
  color: var(--text) !important;
}

.small-tab {
  font-size: 12px !important;
  font-weight: 560 !important;
  border-radius: 9px !important;
  padding: 7px 12px !important;
  color: var(--text-soft) !important;
  transition: background 140ms ease, color 140ms ease !important;
}
.small-tab:hover { background: rgba(0,0,0,0.05) !important; }
.small-tab.is-active {
  background: rgba(255,255,255,0.90) !important;
  color: var(--text) !important;
  font-weight: 640 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.09) !important;
}
body.dark .small-tab.is-active {
  background: rgba(255,255,255,0.10) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.26) !important;
}

/* ── 11. Comments & review ───────────────────────────────────── */
.comment-card {
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  background: rgba(255,255,255,0.82) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset,
              0 2px 8px rgba(0,0,0,0.05) !important;
}
body.dark .comment-card {
  background: rgba(36,36,40,0.90) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.comment-meta {
  font-size: 12px !important;
  font-weight: 540 !important;
  color: var(--text-faint) !important;
  margin-bottom: 8px !important;
}
.comment-body {
  font-size: 14px !important;
  line-height: 1.62 !important;
  color: var(--text) !important;
}
.comment-priority-chip {
  font-size: 11px !important;
  font-weight: 660 !important;
  border-radius: 7px !important;
  padding: 3px 8px !important;
}

/* Review scene card */
.review-scene-card {
  border-radius: var(--radius-xl) !important;
  background: rgba(255,255,255,0.84) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, var(--shadow-1) !important;
}
body.dark .review-scene-card {
  background: rgba(30,30,34,0.90) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── 12. Mobile tab bar — iOS tab bar feel ───────────────────── */
.mobile-tabbar {
  border-radius: 22px !important;
  background: rgba(245,245,247,0.88) !important;
  backdrop-filter: saturate(180%) blur(28px) !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.78) inset,
              0 4px 20px rgba(0,0,0,0.14),
              0 20px 48px rgba(0,0,0,0.10) !important;
  padding: 6px !important;
}
body.dark .mobile-tabbar {
  background: rgba(26,26,30,0.90) !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 4px 24px rgba(0,0,0,0.40) !important;
}
.mobile-tab {
  border-radius: 16px !important;
  font-size: 11px !important;
  font-weight: 580 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-faint) !important;
  transition: background 140ms ease, color 140ms ease !important;
}
.mobile-tab:hover { background: rgba(0,0,0,0.04) !important; }
.mobile-tab.is-active {
  background: rgba(255,255,255,0.94) !important;
  color: var(--text) !important;
  font-weight: 660 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10),
              0 1px 0 rgba(255,255,255,0.95) inset !important;
}
body.dark .mobile-tab.is-active {
  background: rgba(58,58,64,0.94) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.36) !important;
}

/* Mobile action/search/detail sheets */
.mobile-action-sheet,
.mobile-search-sheet,
.mobile-detail-sheet {
  background: rgba(242,242,247,0.97) !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 -2px 0 rgba(255,255,255,0.82) inset,
              var(--shadow-float) !important;
  backdrop-filter: saturate(180%) blur(32px) !important;
}
body.dark .mobile-action-sheet,
body.dark .mobile-search-sheet,
body.dark .mobile-detail-sheet {
  background: rgba(22,22,26,0.97) !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.04) inset,
              var(--shadow-float) !important;
}
.mobile-sheet-handle {
  background: rgba(0,0,0,0.18) !important;
  width: 36px !important;
  height: 4px !important;
  border-radius: 999px !important;
  margin-bottom: 14px !important;
}
body.dark .mobile-sheet-handle { background: rgba(255,255,255,0.18) !important; }

/* Mobile action button */
.mobile-action-btn {
  border-radius: 12px !important;
  background: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.09) !important;
  font-size: 17px !important;
}
body.dark .mobile-action-btn {
  background: rgba(48,48,54,0.90) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ── 13. Toast — system notification feel ────────────────────── */
.toast {
  border-radius: 16px !important;
  background: rgba(24,24,26,0.95) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: rgba(248,248,250,0.96) !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  letter-spacing: -0.01em !important;
  padding: 13px 20px !important;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.06) inset,
              var(--shadow-float) !important;
}
body.dark .toast {
  background: rgba(40,40,46,0.96) !important;
}

/* ── 14. Scrollbars ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.14);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }
body.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }
body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ── 15. Status strip ────────────────────────────────────────── */
.status-strip {
  background: rgba(238,237,234,0.78) !important;
  backdrop-filter: blur(18px) !important;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
  font-size: 12px !important;
  font-weight: 490 !important;
  letter-spacing: 0 !important;
}
body.dark .status-strip {
  background: rgba(14,14,16,0.80) !important;
  border-top-color: rgba(255,255,255,0.07) !important;
}
.status-dot.success { background: #34c759 !important; }

/* ── 16. Copilot overlay ─────────────────────────────────────── */
.copilot-overlay {
  background: rgba(246,246,248,0.98) !important;
  backdrop-filter: saturate(180%) blur(28px) !important;
  border-left: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: -2px 0 0 rgba(255,255,255,0.72) inset, var(--shadow-float) !important;
}
body.dark .copilot-overlay {
  background: rgba(20,20,24,0.98) !important;
  border-left-color: rgba(255,255,255,0.07) !important;
}
.copilot-fab {
  border-radius: 16px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: var(--shadow-float) !important;
}

/* ── 17. App prompt modal ────────────────────────────────────── */
.app-prompt-sheet {
  border-radius: 22px !important;
  background: rgba(248,248,250,0.99) !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: var(--shadow-float) !important;
}
body.dark .app-prompt-sheet {
  background: rgba(28,28,32,0.99) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.app-prompt-title {
  font-size: 13px !important;
  font-weight: 660 !important;
  letter-spacing: 0.04em !important;
  color: var(--text-faint) !important;
}

/* ── 18. Page hero typography ────────────────────────────────── */
.page-hero h1 {
  font-size: 34px !important;
  font-weight: 720 !important;
  letter-spacing: -0.05em !important;
  line-height: 1.12 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif !important;
  color: var(--text) !important;
}
.page-hero p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--text-soft) !important;
  font-weight: 420 !important;
}
.eyebrow {
  font-size: 12px !important;
  font-weight: 660 !important;
  letter-spacing: 0.08em !important;
  color: var(--text-faint) !important;
  text-transform: uppercase !important;
}

/* ── 19. Health mini cards ───────────────────────────────────── */
.health-mini {
  border-radius: 14px !important;
  background: rgba(255,255,255,0.84) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset,
              0 2px 8px rgba(0,0,0,0.05) !important;
}
body.dark .health-mini {
  background: rgba(32,32,36,0.90) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.health-mini-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text-faint) !important;
}
.health-mini-value {
  font-size: 16px !important;
  font-weight: 680 !important;
  letter-spacing: -0.03em !important;
  margin-top: 5px !important;
}
.metric-bar {
  height: 5px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.07) !important;
  margin-top: 8px !important;
}
body.dark .metric-bar { background: rgba(255,255,255,0.08) !important; }
.metric-fill {
  background: linear-gradient(90deg, #4a6580, #7d96b0) !important;
  border-radius: 999px !important;
}

/* ── 20. Scene carousel cards ────────────────────────────────── */
.scene-carousel .scene-nav-card {
  border-radius: 22px !important;
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset,
              0 4px 16px rgba(0,0,0,0.07) !important;
}
body.dark .scene-carousel .scene-nav-card {
  background: rgba(32,32,36,0.96) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── 21. Focus-visible ring — system blue ────────────────────── */
*:focus-visible {
  outline: 2px solid rgba(0,120,255,0.46) !important;
  outline-offset: 2px !important;
}

/* ── 22. Reduced-motion safety net ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}



/* ╔══════════════════════════════════════════════════════════════╗
   ║  TRUE APPLE MINIMALISM — STRIP-BACK PASS                    ║
   ║  Inspired by: Finder · Notes · Pages · Mail · SF design     ║
   ║  Principle: chrome disappears, content is everything        ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Design intent ───────────────────────────────────────────────
   - NO gradients on interactive elements
   - NO decorative box-shadows
   - Borders are 0.5px hairlines or invisible
   - Surfaces differ from background by ~3% luminance only
   - All depth is created by spacing, not decoration
   - Accent is used once: the active/selected state only
   - Typography weight/size does ALL hierarchy work
   ─────────────────────────────────────────────────────────────── */

:root {
  --bg:             #f5f5f7;
  --surface:        #ffffff;
  --surface-strong: #ffffff;
  --surface-soft:   #f2f2f4;
  --border:         rgba(0,0,0,0.08);
  --border-strong:  rgba(0,0,0,0.13);
  --text:           #1d1d1f;
  --text-soft:      #515154;
  --text-faint:     #86868b;
  --accent:         #0066cc;
  --accent-soft:    #e8f0fb;
  --success:        #1d8348;
  --warning:        #b25000;
  --danger:         #c0392b;

  /* Shadows: almost none */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-float: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);

  /* Radii: Apple uses 10–14px for controls, not huge rounds */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  18px;
  --radius-pill:999px;

  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
}

body.dark {
  --bg:             #161617;
  --surface:        #1e1e1e;
  --surface-strong: #242424;
  --surface-soft:   #2a2a2a;
  --border:         rgba(255,255,255,0.09);
  --border-strong:  rgba(255,255,255,0.15);
  --text:           #f5f5f7;
  --text-soft:      #a1a1a6;
  --text-faint:     #636366;
  --accent:         #2997ff;
  --accent-soft:    rgba(41,151,255,0.14);
  --shadow-1: none;
  --shadow-2: 0 2px 12px rgba(0,0,0,0.36);
  --shadow-float: 0 8px 32px rgba(0,0,0,0.48);
}

/* Clean body — no radial gradients */
html, body {
  background: var(--bg) !important;
  background-image: none !important;
  font-family: var(--font) !important;
}

/* ── Topbar — translucent, borderless feeling ────────────────── */
.topbar {
  background: rgba(245,245,247,0.88) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.12) !important;
  box-shadow: none !important;
}
body.dark .topbar {
  background: rgba(22,22,23,0.90) !important;
  border-bottom-color: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}

/* Brand mark — SVG logo, no background */
.brand-mark {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--text) !important;
  width: 20px !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.brand-svg {
  width: 20px;
  height: auto;
  display: block;
  flex: 0 0 auto;
}
body.dark .brand-mark {
  color: rgba(255,255,255,0.90) !important;
}

/* Command bar — looks like a standard search field */
.command-bar {
  background: rgba(0,0,0,0.06) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: var(--text-faint) !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  transition: background 120ms ease !important;
}
.command-bar:hover { background: rgba(0,0,0,0.09) !important; }
body.dark .command-bar { background: rgba(255,255,255,0.08) !important; }
body.dark .command-bar:hover { background: rgba(255,255,255,0.11) !important; }

/* Project switcher — invisible until needed */
.project-switcher {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 590 !important;
  color: var(--text) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  transition: background 120ms ease !important;
}
.project-switcher:hover { background: rgba(0,0,0,0.06) !important; }
body.dark .project-switcher:hover { background: rgba(255,255,255,0.07) !important; }

/* Avatar — simple monogram disc */
.avatar-pill {
  width: 32px !important; height: 32px !important;
  background: #e0e0e5 !important;
  border: none !important;
  box-shadow: none !important;
  color: #1d1d1f !important;
  font-size: 11px !important; font-weight: 700 !important;
  border-radius: 50% !important;
}
body.dark .avatar-pill {
  background: rgba(255,255,255,0.14) !important;
  color: var(--text) !important;
}

/* ── Buttons — flat, functional, no decoration ──────────────── */
.primary-btn {
  height: 36px !important;
  background: #0066cc !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 590 !important;
  letter-spacing: -0.01em !important;
  transition: background 120ms ease, opacity 120ms ease !important;
}
.primary-btn:hover { background: #0077ed !important; transform: none !important; box-shadow: none !important; }
.primary-btn:active { background: #005ab8 !important; opacity: 0.88 !important; transform: none !important; }
body.dark .primary-btn { background: #2997ff !important; }
body.dark .primary-btn:hover { background: #3ea6ff !important; }

.secondary-btn {
  height: 36px !important;
  background: rgba(0,0,0,0.07) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 490 !important;
  transition: background 120ms ease !important;
}
.secondary-btn:hover { background: rgba(0,0,0,0.11) !important; transform: none !important; box-shadow: none !important; }
.secondary-btn:active { background: rgba(0,0,0,0.15) !important; transform: none !important; }
body.dark .secondary-btn { background: rgba(255,255,255,0.10) !important; }
body.dark .secondary-btn:hover { background: rgba(255,255,255,0.14) !important; }

.ghost-btn {
  height: 36px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--accent) !important;
  font-size: 14px !important;
  font-weight: 490 !important;
  border-radius: 8px !important;
  transition: background 120ms ease !important;
}
.ghost-btn:hover { background: rgba(0,102,204,0.07) !important; transform: none !important; }
body.dark .ghost-btn:hover { background: rgba(41,151,255,0.10) !important; }

.icon-btn {
  width: 34px !important; height: 34px !important;
  background: rgba(0,0,0,0.06) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: background 120ms ease !important;
}
.icon-btn:hover { background: rgba(0,0,0,0.10) !important; transform: none !important; }
body.dark .icon-btn { background: rgba(255,255,255,0.08) !important; }

/* ── Left rail — Notes.app sidebar feel ─────────────────────── */
.left-rail {
  background: rgba(240,240,242,0.80) !important;
  backdrop-filter: blur(20px) !important;
  border-right: 0.5px solid rgba(0,0,0,0.10) !important;
  box-shadow: none !important;
}
body.dark .left-rail {
  background: rgba(18,18,19,0.85) !important;
  border-right-color: rgba(255,255,255,0.08) !important;
}

.rail-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--text-faint) !important;
  padding: 0 10px !important;
  margin-bottom: 4px !important;
}

.nav-item {
  font-size: 14px !important;
  font-weight: 420 !important;
  color: var(--text-soft) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  letter-spacing: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: background 120ms ease, color 120ms ease !important;
}
.nav-item:hover {
  background: rgba(0,0,0,0.05) !important;
  color: var(--text) !important;
  transform: none !important;
}
.nav-item.is-active {
  background: rgba(0,0,0,0.08) !important;
  color: var(--text) !important;
  font-weight: 590 !important;
  box-shadow: none !important;
}
body.dark .nav-item:hover { background: rgba(255,255,255,0.06) !important; }
body.dark .nav-item.is-active { background: rgba(255,255,255,0.10) !important; }

/* ── Surfaces — barely there ─────────────────────────────────── */
.surface {
  background: var(--surface) !important;
  border: 0.5px solid rgba(0,0,0,0.09) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-1) !important;
  backdrop-filter: none !important;
}
body.dark .surface {
  background: var(--surface) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}

.surface-title {
  font-size: 17px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
}
.surface-sub {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--text-faint) !important;
  letter-spacing: 0 !important;
  margin-top: 2px !important;
}

/* Cards */
.scene-nav-card, .health-mini, .activity-item,
.idea-item, .collaborator-item, .research-thread,
.comment-card, .research-card, .recent-scene-card {
  background: var(--surface-soft) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body.dark .scene-nav-card, body.dark .health-mini,
body.dark .activity-item, body.dark .idea-item,
body.dark .collaborator-item, body.dark .research-thread,
body.dark .comment-card, body.dark .research-card,
body.dark .recent-scene-card {
  background: var(--surface-strong) !important;
  border: none !important;
  box-shadow: none !important;
}

.scene-nav-card:hover {
  background: #ececef !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
body.dark .scene-nav-card:hover { background: rgba(255,255,255,0.06) !important; }

.scene-nav-card.is-active {
  background: var(--accent-soft) !important;
  border: none !important;
  box-shadow: none !important;
}
body.dark .scene-nav-card.is-active {
  background: var(--accent-soft) !important;
}

.scene-nav-title {
  color: var(--accent) !important;
  font-size: 14px !important;
  font-weight: 580 !important;
  letter-spacing: -0.01em !important;
}
.scene-nav-copy { color: var(--text-faint) !important; font-size: 12px !important; }

/* Story cards */
.story-card {
  background: var(--surface) !important;
  border: 0.5px solid rgba(0,0,0,0.08) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.story-card:hover {
  background: var(--surface) !important;
  transform: none !important;
  box-shadow: var(--shadow-1) !important;
}
body.dark .story-card { background: var(--surface-strong) !important; border-color: rgba(255,255,255,0.07) !important; box-shadow: none !important; }
.story-tag {
  background: rgba(0,0,0,0.06) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  color: var(--text-faint) !important;
  font-weight: 500 !important;
}
body.dark .story-tag { background: rgba(255,255,255,0.08) !important; }

/* Resume / activity items */
.resume-scene {
  background: var(--surface-soft) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body.dark .resume-scene { background: var(--surface-strong) !important; }

/* ── Inputs — completely invisible until focused ─────────────── */
.app-textarea, .app-select {
  background: var(--surface-soft) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 15px !important;
  transition: border-color 120ms ease, background 120ms ease !important;
}
.app-textarea:focus, .app-select:focus {
  background: var(--surface) !important;
  border-color: rgba(0,102,204,0.36) !important;
  box-shadow: 0 0 0 3px rgba(0,102,204,0.10) !important;
  outline: none !important;
}
body.dark .app-textarea, body.dark .app-select {
  background: rgba(255,255,255,0.06) !important;
  border-color: transparent !important;
}
body.dark .app-textarea:focus, body.dark .app-select:focus {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(41,151,255,0.36) !important;
  box-shadow: 0 0 0 3px rgba(41,151,255,0.10) !important;
}
.app-textarea::placeholder { color: var(--text-faint) !important; }

/* ── Screenplay canvas — pure typography ─────────────────────── */
.screenplay-canvas {
  font-family: var(--font-mono) !important;
  font-size: 15px !important;
  line-height: 1.78 !important;
}
.screenplay-scene {
  border-top: 0.5px solid rgba(0,0,0,0.07) !important;
  padding-top: 12px !important;
}
body.dark .screenplay-scene { border-top-color: rgba(255,255,255,0.06) !important; }
.scene-heading {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--text) !important;
  margin-bottom: 16px !important;
}
.screenplay-action, .screenplay-dialogue { color: var(--text) !important; }
.screenplay-character {
  color: var(--text) !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
}
.screenplay-parenthetical { color: var(--text-soft) !important; font-style: italic !important; }
.screenplay-note {
  background: rgba(0,0,0,0.03) !important;
  border-left: 2px solid rgba(0,0,0,0.14) !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--text-soft) !important;
  box-shadow: none !important;
}
body.dark .screenplay-note {
  background: rgba(255,255,255,0.04) !important;
  border-left-color: rgba(255,255,255,0.14) !important;
}

/* Inline AI bar */
.inline-ai-bar {
  background: rgba(245,245,247,0.96) !important;
  border: 0.5px solid rgba(0,0,0,0.10) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-float) !important;
  backdrop-filter: blur(20px) !important;
  padding: 6px !important;
}
body.dark .inline-ai-bar {
  background: rgba(28,28,30,0.96) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.inline-ai-pill {
  background: transparent !important;
  color: var(--text-soft) !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  padding: 7px 11px !important;
  font-weight: 490 !important;
  transition: background 100ms ease !important;
}
.inline-ai-pill:hover { background: rgba(0,0,0,0.07) !important; color: var(--text) !important; }
body.dark .inline-ai-pill:hover { background: rgba(255,255,255,0.08) !important; }

/* ── Status labels / badges — minimal ───────────────────────── */
.scene-status-badge {
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 620 !important;
  letter-spacing: 0.01em !important;
  padding: 3px 8px !important;
  box-shadow: none !important;
}
.scene-status-badge.is-draft { background: rgba(0,0,0,0.06) !important; color: var(--text-faint) !important; }
.scene-status-badge.is-revise { background: rgba(178,80,0,0.10) !important; color: var(--warning) !important; }
.scene-status-badge.is-approved { background: rgba(29,131,72,0.10) !important; color: var(--success) !important; }
.scene-status-badge.is-locked { background: rgba(0,102,204,0.10) !important; color: var(--accent) !important; }

.resolve-pill {
  background: rgba(29,131,72,0.09) !important;
  color: var(--success) !important;
  border: none !important;
  border-radius: 7px !important;
  font-size: 12px !important; font-weight: 580 !important;
  padding: 5px 10px !important;
  box-shadow: none !important;
  transition: background 100ms ease !important;
}
.resolve-pill:hover { background: rgba(29,131,72,0.15) !important; transform: none !important; box-shadow: none !important; }
.pill-pill {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: none !important;
  border-radius: 7px !important;
  font-size: 12px !important; font-weight: 580 !important;
  padding: 5px 10px !important;
  box-shadow: none !important;
  transition: background 100ms ease !important;
}
.pill-pill:hover { background: rgba(0,102,204,0.14) !important; transform: none !important; }

/* ── Tabs — segment-control feel ────────────────────────────── */
.panel-tabs {
  background: rgba(0,0,0,0.05) !important;
  border-radius: 10px !important;
  padding: 3px !important;
  gap: 2px !important;
}
body.dark .panel-tabs { background: rgba(255,255,255,0.07) !important; }
.panel-tab {
  background: transparent !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 490 !important;
  color: var(--text-soft) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 7px 14px !important;
  transition: background 100ms ease, color 100ms ease !important;
}
.panel-tab:hover { background: rgba(0,0,0,0.05) !important; color: var(--text) !important; }
.panel-tab.is-active {
  background: var(--surface) !important;
  color: var(--text) !important;
  font-weight: 590 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10) !important;
}
body.dark .panel-tab.is-active {
  background: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

.tab-row {
  background: rgba(0,0,0,0.05) !important;
  border-radius: 9px !important;
  padding: 3px !important;
  gap: 2px !important;
}
body.dark .tab-row { background: rgba(255,255,255,0.07) !important; }
.small-tab {
  background: transparent !important;
  border-radius: 7px !important;
  font-size: 12px !important; font-weight: 490 !important;
  color: var(--text-soft) !important;
  padding: 6px 11px !important;
  border: none !important;
  box-shadow: none !important;
  transition: background 100ms ease, color 100ms ease !important;
}
.small-tab:hover { background: rgba(0,0,0,0.05) !important; color: var(--text) !important; }
.small-tab.is-active {
  background: var(--surface) !important;
  color: var(--text) !important;
  font-weight: 580 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.09) !important;
}
body.dark .small-tab.is-active {
  background: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

/* ── Outline blocks ──────────────────────────────────────────── */
.outline-act-block {
  background: var(--surface) !important;
  border: 0.5px solid rgba(0,0,0,0.08) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body.dark .outline-act-block {
  background: var(--surface) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.outline-act-head {
  background: rgba(0,0,0,0.025) !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.07) !important;
}
body.dark .outline-act-head {
  background: rgba(255,255,255,0.025) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
.beat-row { border-top: 0.5px solid rgba(0,0,0,0.05) !important; transition: background 100ms ease !important; }
.beat-row:hover { background: rgba(0,0,0,0.025) !important; transform: none !important; }
.beat-row.is-active {
  background: var(--accent-soft) !important;
  border-left: 2px solid var(--accent) !important;
  padding-left: 14px !important;
}
body.dark .beat-row.is-active {
  background: var(--accent-soft) !important;
  border-left-color: var(--accent) !important;
}
body.dark .beat-row { border-top-color: rgba(255,255,255,0.04) !important; }

/* ── Mobile tab bar — iOS Home indicator feel ────────────────── */
.mobile-tabbar {
  background: rgba(249,249,251,0.92) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  border: 0.5px solid rgba(0,0,0,0.10) !important;
  border-radius: 22px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.09) !important;
  padding: 5px !important;
}
body.dark .mobile-tabbar {
  background: rgba(22,22,24,0.94) !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow: none !important;
}
.mobile-tab {
  border-radius: 16px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-faint) !important;
  background: transparent !important;
  transition: background 100ms ease, color 100ms ease !important;
}
.mobile-tab.is-active {
  background: var(--surface) !important;
  color: var(--text) !important;
  font-weight: 620 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.09) !important;
}
body.dark .mobile-tab.is-active {
  background: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

/* Sheets */
.mobile-action-sheet,
.mobile-search-sheet,
.mobile-detail-sheet {
  background: rgba(245,245,247,0.98) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  border: 0.5px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 -1px 0 rgba(0,0,0,0.05) inset, var(--shadow-float) !important;
}
body.dark .mobile-action-sheet,
body.dark .mobile-search-sheet,
body.dark .mobile-detail-sheet {
  background: rgba(20,20,22,0.98) !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow: var(--shadow-float) !important;
}
.mobile-sheet-handle {
  width: 36px !important; height: 4px !important;
  border-radius: 2px !important;
  background: rgba(0,0,0,0.15) !important;
  box-shadow: none !important;
}
body.dark .mobile-sheet-handle { background: rgba(255,255,255,0.18) !important; }

.mobile-action-btn {
  background: rgba(0,0,0,0.06) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body.dark .mobile-action-btn { background: rgba(255,255,255,0.09) !important; }

/* ── Toast — system notification pill ───────────────────────── */
.toast {
  background: rgba(28,28,30,0.94) !important;
  backdrop-filter: blur(24px) !important;
  border: none !important;
  border-radius: 14px !important;
  color: rgba(245,245,247,0.96) !important;
  font-size: 14px !important;
  font-weight: 490 !important;
  letter-spacing: -0.01em !important;
  padding: 12px 18px !important;
  box-shadow: var(--shadow-float) !important;
}
body.dark .toast { background: rgba(44,44,46,0.96) !important; }

/* ── key-value labels ────────────────────────────────────────── */
.key-value-key {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-faint) !important;
}

/* ── Status strip ────────────────────────────────────────────── */
.status-strip {
  background: rgba(245,245,247,0.80) !important;
  backdrop-filter: blur(16px) !important;
  border-top: 0.5px solid rgba(0,0,0,0.09) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  color: var(--text-faint) !important;
}
body.dark .status-strip {
  background: rgba(16,16,17,0.82) !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}

/* ── Note panels ─────────────────────────────────────────────── */
.note-panel {
  background: rgba(0,0,0,0.03) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--text-soft) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  padding: 12px 14px !important;
}
body.dark .note-panel { background: rgba(255,255,255,0.04) !important; }

/* ── Review cards ────────────────────────────────────────────── */
.review-scene-card {
  background: var(--surface) !important;
  border: 0.5px solid rgba(0,0,0,0.08) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
body.dark .review-scene-card {
  background: var(--surface) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.comment-card {
  background: var(--surface-soft) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body.dark .comment-card { background: var(--surface-strong) !important; }

/* ── Copilot overlay ─────────────────────────────────────────── */
.copilot-overlay {
  background: rgba(245,245,247,0.98) !important;
  backdrop-filter: blur(24px) !important;
  border-left: 0.5px solid rgba(0,0,0,0.10) !important;
  box-shadow: none !important;
}
body.dark .copilot-overlay {
  background: rgba(18,18,20,0.98) !important;
  border-left-color: rgba(255,255,255,0.09) !important;
}
.copilot-fab {
  background: var(--surface) !important;
  border: 0.5px solid rgba(0,0,0,0.10) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-float) !important;
  font-weight: 540 !important;
  font-size: 14px !important;
  color: var(--text) !important;
}

/* ── App prompt ──────────────────────────────────────────────── */
.app-prompt-sheet {
  background: rgba(249,249,251,0.99) !important;
  border: 0.5px solid rgba(0,0,0,0.09) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-float) !important;
}
body.dark .app-prompt-sheet {
  background: rgba(24,24,26,0.99) !important;
  border-color: rgba(255,255,255,0.09) !important;
}

/* ── Page hero — weight does the work ───────────────────────── */
.page-hero h1 {
  font-family: var(--font) !important;
  font-size: 32px !important;
  font-weight: 680 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.15 !important;
  color: var(--text) !important;
}
.page-hero p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;
  color: var(--text-soft) !important;
}
.eyebrow {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-faint) !important;
}

/* ── Scene carousel cards ────────────────────────────────────── */
.scene-carousel .scene-nav-card {
  background: var(--surface) !important;
  border: 0.5px solid rgba(0,0,0,0.07) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-1) !important;
}
body.dark .scene-carousel .scene-nav-card {
  background: var(--surface-strong) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}

/* ── Starter / AI buttons ────────────────────────────────────── */
.starter-btn {
  background: var(--surface-soft) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-align: left !important;
  color: var(--text) !important;
  font-size: 14px !important;
  transition: background 100ms ease !important;
}
.starter-btn:hover {
  background: #e8e8eb !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
body.dark .starter-btn { background: var(--surface-strong) !important; }
body.dark .starter-btn:hover { background: rgba(255,255,255,0.09) !important; }

/* ── Health cards ────────────────────────────────────────────── */
.health-mini {
  background: var(--surface-soft) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body.dark .health-mini { background: var(--surface-strong) !important; }

/* ── Scene meta editor ───────────────────────────────────────── */
.scene-meta-editor {
  background: var(--surface-soft) !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body.dark .scene-meta-editor { background: var(--surface-strong) !important; border-color: transparent !important; }

/* ── Scrollbars — barely there ───────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.20); }
body.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); }

/* ── Focus ring — system blue, clean ────────────────────────── */
*:focus-visible {
  outline: 2px solid rgba(0,102,204,0.50) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ── Motion — instantaneous, no spring ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .view.is-active {
    animation: sf-fade 180ms ease both !important;
  }
  @keyframes sf-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}



/* ╔══════════════════════════════════════════════════════════════╗
   ║  WHITESPACE & BREATHING ROOM PASS                           ║
   ║  Apple principle: space is not empty — it is structure      ║
   ║  Every value here is intentional, not generous padding      ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Core spacing tokens ─────────────────────────────────────── */
:root {
  --topbar-h:  60px;
  --status-h:  36px;
  --left-w:    260px;
  --page-pad:  40px;
}

/* ── Topbar — taller, more breathable ───────────────────────── */
.topbar {
  padding: 0 28px !important;
  gap: 20px !important;
}
.topbar-left,
.topbar-right { gap: 14px !important; }
.brand-block   { gap: 14px !important; }

/* ── Left rail — generous internal rhythm ───────────────────── */
.left-rail {
  padding: 28px 16px 32px !important;
}
.rail-group + .rail-group {
  margin-top: 32px !important;
}
.rail-label {
  margin-bottom: 8px !important;
  padding: 0 12px !important;
}
.nav-item {
  padding: 10px 12px !important;
  margin-bottom: 2px !important;
}
.story-health-stack { gap: 12px !important; }
.health-mini        { padding: 16px !important; }

/* ── Main workspace padding ─────────────────────────────────── */
.workspace {
  padding: 40px !important;
}

/* ── Page heroes ─────────────────────────────────────────────── */
.page-hero {
  margin-bottom: 36px !important;
  gap: 24px !important;
}
.page-hero h1 { margin: 6px 0 12px !important; }
.hero-actions,
.hero-meta    { gap: 12px !important; }

/* ── Dashboard grid — wider gutters ─────────────────────────── */
.dashboard-grid { gap: 24px !important; }
.project-grid   { gap: 24px !important; }
.settings-grid  { gap: 24px !important; }
.editor-grid    { gap: 24px !important; }
.two-pane-grid  { gap: 24px !important; }
.review-grid    { gap: 24px !important; }

/* ── Surfaces — roomier ─────────────────────────────────────── */
.surface       { padding: 28px !important; }
.large-surface { padding: 32px !important; }

.surface-head {
  margin-bottom: 22px !important;
  gap: 16px !important;
}

/* ── Cards & list items ─────────────────────────────────────── */
.activity-list,
.idea-list,
.collaborator-list,
.research-thread-list,
.comment-thread-list,
.research-list,
.recent-scenes-grid,
.metric-stack,
.story-health-stack,
.scene-list,
.story-bible-list { gap: 14px !important; }

.activity-item,
.idea-item,
.collaborator-item,
.research-thread,
.comment-card,
.research-card,
.recent-scene-card { padding: 18px !important; }

.resume-scene { padding: 22px !important; }
.resume-meta  { margin-top: 18px !important; gap: 12px !important; }

/* ── Scene nav cards ─────────────────────────────────────────── */
.scene-list    { gap: 12px !important; }
.scene-nav-card { padding: 18px !important; }
.scene-nav-copy { margin-top: 8px !important; }

/* ── Scene carousel ──────────────────────────────────────────── */
.scene-carousel-shell { margin: 8px 0 32px !important; }
.scene-carousel       { gap: 16px !important; padding-bottom: 18px !important; }
.scene-carousel .scene-nav-card { padding: 22px 22px 24px !important; min-height: 200px !important; }
.scene-carousel .scene-nav-copy { margin-top: 12px !important; }

/* ── Idea inbox ──────────────────────────────────────────────── */
.idea-input-wrap { gap: 12px !important; margin-bottom: 18px !important; }
.idea-list       { gap: 12px !important; }

/* ── AI starters ─────────────────────────────────────────────── */
.starter-grid,
.ai-actions-grid { gap: 12px !important; }
.starter-btn     { padding: 18px 20px !important; }
.starter-btn.small { padding: 15px 18px !important; }

/* ── Screenplay ──────────────────────────────────────────────── */
.screenplay-canvas  { gap: 40px !important; padding-bottom: 60px !important; }
.screenplay-scene   { padding-top: 14px !important; }
.scene-heading      { margin-bottom: 20px !important; }
.screenplay-character { margin-top: 20px !important; margin-bottom: 6px !important; }

.scene-meta-editor  { padding: 24px !important; gap: 18px !important; margin-bottom: 28px !important; }
.scene-meta-editor-grid { gap: 16px !important; }

/* ── Outline ─────────────────────────────────────────────────── */
.outline-list       { gap: 16px !important; }
.outline-act-head   { padding: 18px 22px !important; }
.beat-row           { padding: 16px 22px !important; }
.beat-row-copy      { margin-top: 5px !important; }

/* ── Corkboard cards ─────────────────────────────────────────── */
.card-board       { gap: 18px !important; }
.story-card       { padding: 22px !important; min-height: 200px !important; }
.story-card-title { margin-top: 14px !important; }
.story-card-tags  { margin-top: 16px !important; gap: 8px !important; }

/* ── Review ──────────────────────────────────────────────────── */
.review-script    { gap: 24px !important; }
.review-scene-card { padding: 24px !important; gap: 16px !important; }
.review-scene-top { margin-bottom: 14px !important; }
.scene-review-note { padding: 16px 18px !important; gap: 8px !important; }

/* ── Comments ────────────────────────────────────────────────── */
.comment-replies  { gap: 10px !important; margin-top: 14px !important; }
.comment-reply-card { padding: 14px 16px !important; }
.comment-thread-actions { margin-top: 14px !important; gap: 10px !important; }
.comment-thread-context { margin-top: 8px !important; gap: 10px !important; }

/* ── Story Bible ─────────────────────────────────────────────── */
.story-bible-list { gap: 16px !important; }
.story-entity-card { padding: 22px !important; gap: 12px !important; }
.story-chip-row   { gap: 8px !important; margin-top: 4px !important; }
.scene-link-list  { gap: 8px !important; }

/* ── Settings ────────────────────────────────────────────────── */
.setting-row {
  padding: 16px 0 !important;
}
.settings-stack { gap: 0 !important; }

/* ── Panel (right) ───────────────────────────────────────────── */
.right-panel    { padding: 24px !important; }
.panel-tabs     { margin-bottom: 20px !important; gap: 4px !important; }
.panel-head     { margin-bottom: 20px !important; }
.ai-context-card,
.ai-output-panel { padding: 18px !important; }
.ai-output-panel  { margin-top: 16px !important; }
.ai-actions-grid  { gap: 10px !important; margin-top: 16px !important; }

/* ── Inspector ───────────────────────────────────────────────── */
.inspector-content,
.inspector-panel  { gap: 16px !important; }
.key-value        { gap: 6px !important; }

/* ── Collaboration / Trust ───────────────────────────────────── */
.collaboration-settings-list { gap: 14px !important; }
.collaboration-row { padding: 20px !important; gap: 16px !important; }
.trust-stack      { gap: 18px !important; }
.trust-summary-grid { gap: 14px !important; }
.trust-summary-card { padding: 20px !important; }
.trust-backup-list  { gap: 14px !important; }
.trust-entry        { padding: 18px 20px !important; gap: 16px !important; }

/* ── Inline AI bar ───────────────────────────────────────────── */
.inline-ai-bar  { padding: 8px !important; gap: 6px !important; }
.inline-ai-pill { padding: 9px 14px !important; }

/* ── Status strip ────────────────────────────────────────────── */
.status-strip { padding: 0 28px !important; gap: 16px !important; }

/* ── Toast ───────────────────────────────────────────────────── */
.toast { padding: 14px 22px !important; right: 28px !important; bottom: 60px !important; }

/* ── Modal prompt ────────────────────────────────────────────── */
.app-prompt-sheet { padding: 28px !important; }
.app-prompt-head  { margin-bottom: 20px !important; }
.app-prompt-body  { margin-bottom: 20px !important; }
.app-prompt-actions { gap: 12px !important; }

/* ── Copilot overlay ─────────────────────────────────────────── */
.copilot-overlay-head { padding: 24px 24px 18px !important; }
.copilot-overlay-body { padding: 20px !important; gap: 18px !important; }
.copilot-card         { padding: 18px !important; }
.copilot-actions-grid { gap: 12px !important; }

/* ── Mobile sheet ────────────────────────────────────────────── */
.mobile-action-sheet  { padding: 16px !important; }
.mobile-sheet-handle  { margin: 0 auto 16px !important; }
.mobile-sheet-grid    { gap: 12px !important; }
.mobile-search-body   { gap: 16px !important; padding: 16px !important; }
.mobile-detail-head   { margin-bottom: 12px !important; padding: 0 4px !important; }
.mobile-detail-body   { padding: 8px 4px 16px !important; }

/* ── Mobile responsive overrides ────────────────────────────── */
@media (max-width: 1024px) {
  :root { --page-pad: 20px; }
  .workspace { padding: 20px 20px 110px !important; }
  .surface   { padding: 22px !important; }
  .page-hero { margin-bottom: 28px !important; }
  .dashboard-grid,
  .project-grid,
  .editor-grid,
  .two-pane-grid,
  .review-grid,
  .settings-grid { gap: 18px !important; }
  .outline-act-head { padding: 16px 18px !important; }
  .beat-row         { padding: 14px 18px !important; }
  .story-card       { padding: 18px !important; }
  .starter-btn      { padding: 16px 18px !important; }
}

@media (max-width: 640px) {
  :root { --page-pad: 16px; }
  .workspace  { padding: 16px 16px 100px !important; }
  .surface    { padding: 18px !important; }
  .page-hero  { margin-bottom: 22px !important; gap: 16px !important; }
  .scene-carousel .scene-nav-card { padding: 18px !important; min-height: 170px !important; }
  .review-scene-card { padding: 18px !important; }
  .story-entity-card { padding: 18px !important; }
  .starter-btn { padding: 14px 16px !important; }
  .activity-item,
  .idea-item,
  .comment-card { padding: 16px !important; }
}


/* Feature 9 — editor intelligence polish */
.editor-shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 24, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 5000;
}
.editor-shortcuts-overlay.is-open { display: flex; }
.editor-shortcuts-sheet {
  width: min(680px, 100%);
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
  padding: 24px;
  display: grid;
  gap: 18px;
}
body.dark .editor-shortcuts-sheet {
  background: rgba(22, 26, 34, 0.96);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.editor-shortcuts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.editor-shortcuts-grid { display: grid; gap: 10px; }
.editor-shortcut-row {
  display: grid;
  grid-template-columns: minmax(116px, 160px) 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.04);
}
body.dark .editor-shortcut-row { background: rgba(255,255,255,0.05); }
.editor-shortcut-row span:first-child {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Feature 10 — presentation mode */
.presentation-shell {
  display: grid;
  gap: 24px;
}
.presentation-hero {
  align-items: flex-end;
}
.presentation-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.presentation-summary-card {
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: 18px 20px;
  display: grid;
  gap: 6px;
}
body.dark .presentation-summary-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.presentation-summary-label {
  color: var(--text-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.presentation-summary-value {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
}
.presentation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
}
.presentation-main-card,
.presentation-scene-card {
  grid-column: 1 / -1;
}
.presentation-logline,
.presentation-synopsis,
.presentation-world-notes {
  display: grid;
  gap: 10px;
}
.presentation-logline-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.presentation-logline-copy {
  font-size: clamp(19px, 2.3vw, 28px);
  line-height: 1.35;
  font-weight: 500;
}
.presentation-copy {
  color: var(--text); 
  line-height: 1.7;
}
.presentation-story-dna {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.presentation-chip {
  padding-inline: 14px;
  min-height: 34px;
}
.presentation-card-grid,
.presentation-location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.presentation-mini-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 16px;
  background: rgba(15, 23, 42, 0.03);
  display: grid;
  gap: 8px;
  min-width: 0;
}
body.dark .presentation-mini-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.presentation-mini-title {
  font-size: 16px;
  font-weight: 600;
}
.presentation-mini-sub {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.45;
}
.presentation-mini-card p,
.presentation-mini-note {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.presentation-beat-list,
.presentation-scene-list {
  display: grid;
  gap: 12px;
}
.presentation-beat-item,
.presentation-scene-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.03);
  min-width: 0;
}
.presentation-scene-item {
  grid-template-columns: 1fr auto;
  align-items: start;
}
body.dark .presentation-beat-item,
body.dark .presentation-scene-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.presentation-beat-index {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.08);
  font-weight: 600;
  flex: 0 0 auto;
}
body.dark .presentation-beat-index { background: rgba(255,255,255,0.08); }
.presentation-beat-copy,
.presentation-scene-copy { min-width: 0; display: grid; gap: 6px; }
.presentation-beat-copy p,
.presentation-scene-copy p { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.project-home-presentation-action { margin-top: 14px; }

@media (max-width: 1024px) {
  .presentation-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presentation-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .editor-shortcuts-sheet { padding: 18px; border-radius: 20px; }
  .editor-shortcut-row { grid-template-columns: 1fr; gap: 6px; }
  .presentation-summary-grid,
  .presentation-card-grid,
  .presentation-location-grid { grid-template-columns: 1fr; }
  .presentation-beat-item,
  .presentation-scene-item { grid-template-columns: 1fr; }
  .project-home-presentation-action .secondary-btn { width: 100%; }
}

/* ==========================================================
   SURGICAL PATCH: final dark-theme polish only
   ========================================================== */
body.dark {
  color-scheme: dark;
  --bg: #000000;
  --surface: rgba(10,10,12,0.96);
  --surface-strong: rgba(18,18,22,0.98);
  --surface-soft: #111216;
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --text: #f5f5f7;
  --text-soft: #b8bcc6;
  --text-faint: #8c93a3;
  --accent: #0a84ff;
  --accent-soft: rgba(10,132,255,0.18);
  --success: #30d158;
  --warning: #ff9f0a;
  --danger: #ff453a;
  --danger-text: #ff7b72;
  --shadow-1: none;
  --shadow-2: 0 18px 48px rgba(0,0,0,0.56);
  --shadow-float: 0 24px 72px rgba(0,0,0,0.68);
}

html body.dark,
body.dark,
body.dark .app-shell,
body.dark .workspace,
body.dark .main-grid,
body.dark .workspace > .view,
body.dark .workspace > section.view,
body.dark .dashboard-grid,
body.dark .project-grid,
body.dark .editor-grid,
body.dark .two-pane-grid,
body.dark .review-grid,
body.dark .settings-grid,
body.dark .screenplay-pane,
body.dark .screenplay-canvas,
body.dark .card-board,
body.dark .outline-list,
body.dark .scene-pane,
body.dark .right-panel,
body.dark .review-script-pane,
body.dark .review-comments-pane,
body.dark .story-bible-main,
body.dark .story-bible-list,
body.dark .story-bible-inspector,
body.dark .presentation-shell {
  background: #000 !important;
  background-image: none !important;
  color: var(--text) !important;
}

body.dark .topbar,
body.dark .left-rail,
body.dark .mobile-tabbar,
body.dark .status-strip,
body.dark .mobile-action-sheet,
body.dark .mobile-search-sheet,
body.dark .mobile-detail-sheet,
body.dark .copilot-overlay,
body.dark .app-prompt-sheet,
body.dark .toast {
  background: rgba(8,8,10,0.88) !important;
  backdrop-filter: saturate(170%) blur(26px) !important;
  -webkit-backdrop-filter: saturate(170%) blur(26px) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

body.dark .left-rail {
  background: rgba(6,6,8,0.94) !important;
}

body.dark .surface,
body.dark .panel-surface,
body.dark .scene-nav-card,
body.dark .health-mini,
body.dark .activity-item,
body.dark .idea-item,
body.dark .collaborator-item,
body.dark .research-thread,
body.dark .comment-card,
body.dark .research-card,
body.dark .recent-scene-card,
body.dark .story-card,
body.dark .outline-act-block,
body.dark .review-scene-card,
body.dark .screenplay-note,
body.dark .note-panel,
body.dark .inbox-card,
body.dark .resume-card,
body.dark .ai-card,
body.dark .ai-context-card,
body.dark .ai-output-panel,
body.dark .presentation-main-card,
body.dark .presentation-mini-card,
body.dark .presentation-beat-item,
body.dark .presentation-scene-item,
body.dark .presentation-logline,
body.dark .presentation-world-notes,
body.dark .presentation-hero,
body.dark .scene-meta-editor,
body.dark .review-summary-card,
body.dark .review-reader-nav,
body.dark .review-empty-state,
body.dark .scene-revision-panel,
body.dark .scene-revision-card,
body.dark .revision-compare-card,
body.dark .story-entity-card,
body.dark .trust-summary-card {
  background: linear-gradient(180deg, rgba(18,18,22,0.98) 0%, rgba(10,10,12,0.98) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

body.dark .surface,
body.dark .story-card,
body.dark .outline-act-block,
body.dark .review-scene-card,
body.dark .presentation-main-card,
body.dark .presentation-hero {
  border-color: rgba(255,255,255,0.09) !important;
}

body.dark .command-bar,
body.dark .project-switcher,
body.dark .secondary-btn,
body.dark .icon-btn,
body.dark .avatar-pill,
body.dark .mobile-action-btn,
body.dark .mobile-close-btn,
body.dark .nav-toggle-btn,
body.dark .preset-pill,
body.dark .inline-ai-pill,
body.dark .meta-chip,
body.dark .panel-tabs,
body.dark .tab-row,
body.dark .scene-status-badge.is-draft,
body.dark .review-filter-chip,
body.dark .small-tab,
body.dark .panel-tab {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.dark .command-bar:hover,
body.dark .project-switcher:hover,
body.dark .secondary-btn:hover,
body.dark .icon-btn:hover,
body.dark .mobile-action-btn:hover,
body.dark .nav-toggle-btn:hover,
body.dark .preset-pill:hover,
body.dark .inline-ai-pill:hover,
body.dark .panel-tab:hover,
body.dark .small-tab:hover,
body.dark .nav-item:hover,
body.dark .scene-nav-card:hover,
body.dark .story-card:hover,
body.dark .beat-row:hover {
  background: rgba(255,255,255,0.09) !important;
}

body.dark .primary-btn {
  background: linear-gradient(180deg, #2491ff 0%, #0a84ff 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(125,190,255,0.20) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset !important;
}
body.dark .primary-btn:hover {
  background: linear-gradient(180deg, #40a0ff 0%, #1590ff 100%) !important;
}
body.dark .primary-btn:active {
  background: linear-gradient(180deg, #1276e3 0%, #066fdd 100%) !important;
}

body.dark .nav-item.is-active,
body.dark .panel-tab.is-active,
body.dark .small-tab.is-active,
body.dark .mobile-tab.is-active,
body.dark .scene-nav-card.is-active,
body.dark .beat-row.is-active,
body.dark .review-filter-chip.is-active {
  background: rgba(10,132,255,0.18) !important;
  border-color: rgba(10,132,255,0.26) !important;
  color: #f5f5f7 !important;
}

body.dark .scene-nav-title,
body.dark a,
body.dark .ghost-btn,
body.dark .pill-pill,
body.dark .scene-status-badge.is-locked {
  color: #7dc1ff !important;
}

body.dark .surface-title,
body.dark .presentation-mini-title,
body.dark .presentation-copy,
body.dark .presentation-logline-copy,
body.dark .comment-body,
body.dark .screenplay-note,
body.dark .review-script,
body.dark .story-card-copy,
body.dark .mobile-sheet-title,
body.dark .mobile-detail-title,
body.dark .scene-review-note-copy,
body.dark .scene-feedback-panel,
body.dark .screenplay-scene,
body.dark .screenplay-head,
body.dark .project-home-presentation-action,
body.dark .brand-mark {
  color: var(--text) !important;
}

body.dark .surface-sub,
body.dark .key-value-key,
body.dark .rail-label,
body.dark .eyebrow,
body.dark .scene-nav-copy,
body.dark .comment-meta,
body.dark .activity-time,
body.dark .idea-date,
body.dark .research-type,
body.dark .presentation-mini-sub,
body.dark .presentation-logline-label,
body.dark .story-card-kicker,
body.dark .planning-kicker,
body.dark .planning-summary-label,
body.dark .trust-summary-label,
body.dark .meta-edit > span,
body.dark .collaboration-note,
body.dark .edit-owner-copy,
body.dark .scene-rail-kicker,
body.dark .health-mini-title,
body.dark .mobile-tab,
body.dark .status-left,
body.dark .status-right {
  color: var(--text-soft) !important;
}

body.dark .app-textarea,
body.dark .app-select,
body.dark .mobile-search-input,
body.dark .prompt-field {
  background: #111319 !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
body.dark .app-textarea::placeholder,
body.dark .mobile-search-input::placeholder {
  color: #7d8594 !important;
}
body.dark .app-textarea:focus,
body.dark .app-select:focus,
body.dark .mobile-search-input:focus,
body.dark .prompt-field:focus {
  border-color: rgba(10,132,255,0.42) !important;
  box-shadow: 0 0 0 3px rgba(10,132,255,0.15) !important;
}

body.dark .screenplay-scene,
body.dark .beat-row,
body.dark .outline-act-head,
body.dark .screenplay-toolbar,
body.dark .scene-carousel-shell,
body.dark .scene-collaboration-row,
body.dark .status-strip,
body.dark .scene-meta-editor .meta-edit,
body.dark .story-bible-inspector .key-value,
body.dark .review-comments-pane .comment-card,
body.dark .presentation-mini-card,
body.dark .presentation-beat-item,
body.dark .presentation-scene-item {
  border-color: rgba(255,255,255,0.08) !important;
}

body.dark .screenplay-toolbar,
body.dark .outline-act-head,
body.dark .scene-collaboration-row,
body.dark .story-bible-inspector .key-value,
body.dark .scene-meta-editor .meta-edit,
body.dark .review-comments-pane .comment-card,
body.dark .status-strip {
  background: rgba(255,255,255,0.03) !important;
}

body.dark .inline-ai-bar,
body.dark .status-strip,
body.dark .topbar,
body.dark .mobile-tabbar {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

body.dark .mobile-sheet-handle {
  background: rgba(255,255,255,0.22) !important;
}

body.dark .scene-status-badge.is-draft {
  color: var(--text-soft) !important;
}
body.dark .scene-status-badge.is-revise {
  background: rgba(255,159,10,0.14) !important;
  color: #ffb340 !important;
}
body.dark .scene-status-badge.is-approved,
body.dark .resolve-pill {
  background: rgba(48,209,88,0.14) !important;
  color: #63e28a !important;
  border-color: rgba(48,209,88,0.18) !important;
}

body.dark .copilot-fab {
  background: linear-gradient(180deg, rgba(20,20,24,0.98) 0%, rgba(11,11,13,0.98) 100%) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: var(--text) !important;
}


/* ===== FINAL DARK THEME APPLE-BLACK REFINEMENT PASS ===== */
body.dark {
  color-scheme: dark;
  --bg: #000000;
  --surface: rgba(12, 12, 15, 0.88);
  --surface-strong: rgba(20, 20, 24, 0.96);
  --surface-soft: #0a0a0d;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text: #f5f5f7;
  --text-soft: #a1a1aa;
  --text-faint: #6e727d;
  --accent: #0a84ff;
  --accent-soft: rgba(10,132,255,0.16);
  --success: #32d74b;
  --warning: #ff9f0a;
  --danger: #ff453a;
  --shadow-1: 0 14px 38px rgba(0,0,0,0.42);
  --shadow-2: 0 28px 72px rgba(0,0,0,0.58);
  background:
    radial-gradient(circle at 16% -8%, rgba(10,132,255,0.15), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(142,142,147,0.07), transparent 22%),
    linear-gradient(180deg, #050506 0%, #000000 26%, #000000 100%) !important;
}

body.dark,
body.dark .app-shell,
body.dark .workspace {
  background-color: #000000 !important;
}

body.dark ::selection {
  background: rgba(10,132,255,0.34);
  color: #ffffff;
}

body.dark .topbar,
body.dark .left-rail,
body.dark .right-panel,
body.dark .mobile-tabbar,
body.dark .mobile-action-sheet,
body.dark .mobile-search-sheet,
body.dark .mobile-detail-sheet,
body.dark .app-prompt-sheet,
body.dark .status-strip,
body.dark .inline-ai-bar,
body.dark .copilot-overlay {
  background:
    linear-gradient(180deg, rgba(20,20,24,0.92) 0%, rgba(10,10,12,0.94) 100%) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 24px 64px rgba(0,0,0,0.42) !important;
  backdrop-filter: blur(26px) saturate(135%) !important;
}

body.dark .topbar {
  background:
    linear-gradient(180deg, rgba(18,18,22,0.88) 0%, rgba(10,10,12,0.88) 100%) !important;
}

body.dark .left-rail,
body.dark .right-panel {
  background:
    linear-gradient(180deg, rgba(13,13,16,0.84) 0%, rgba(8,8,10,0.90) 100%) !important;
}

body.dark .surface,
body.dark .scene-nav-card,
body.dark .health-mini,
body.dark .activity-item,
body.dark .idea-item,
body.dark .collaborator-item,
body.dark .research-thread,
body.dark .research-card,
body.dark .recent-scene-card,
body.dark .story-card,
body.dark .resume-scene,
body.dark .comment-card,
body.dark .review-scene-card,
body.dark .note-panel,
body.dark .toast,
body.dark .scene-meta-editor,
body.dark .screenplay-toolbar,
body.dark .outline-act-head,
body.dark .scene-collaboration-row,
body.dark .review-script-pane,
body.dark .review-comments-pane,
body.dark .review-summary-card,
body.dark .review-reader-nav,
body.dark .review-empty-state,
body.dark .scene-revision-panel,
body.dark .scene-revision-card,
body.dark .revision-compare-card,
body.dark .revision-script-preview,
body.dark .story-entity-card,
body.dark .trust-summary-card,
body.dark .presentation-mini-card,
body.dark .presentation-beat-item,
body.dark .presentation-scene-item,
body.dark .story-bible-inspector .key-value,
body.dark .scene-meta-editor .meta-edit {
  background:
    linear-gradient(180deg, rgba(26,26,31,0.92) 0%, rgba(14,14,18,0.94) 100%) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 16px 40px rgba(0,0,0,0.34) !important;
}

body.dark .scene-carousel-shell,
body.dark .screenplay-scene,
body.dark .beat-row,
body.dark .screenplay-note,
body.dark .outline-act-block {
  background: transparent !important;
  border-color: rgba(255,255,255,0.07) !important;
}

body.dark .brand-mark,
body.dark .project-switcher,
body.dark .command-bar,
body.dark .secondary-btn,
body.dark .icon-btn,
body.dark .avatar-pill,
body.dark .small-tab,
body.dark .panel-tab,
body.dark .mobile-action-btn,
body.dark .preset-pill,
body.dark .inline-ai-pill,
body.dark .review-filter-chip,
body.dark .story-tag,
body.dark .resolve-pill,
body.dark .ghost-btn,
body.dark .nav-toggle-btn {
  background: rgba(255,255,255,0.055) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

body.dark .brand-mark {
  background:
    linear-gradient(180deg, rgba(32,32,37,0.96) 0%, rgba(16,16,19,0.98) 100%) !important;
}

body.dark .command-bar,
body.dark .project-switcher,
body.dark .secondary-btn,
body.dark .icon-btn,
body.dark .mobile-action-btn,
body.dark .preset-pill,
body.dark .inline-ai-pill,
body.dark .panel-tab,
body.dark .small-tab,
body.dark .review-filter-chip,
body.dark .ghost-btn,
body.dark .nav-item,
body.dark .scene-nav-card,
body.dark .story-card,
body.dark .beat-row,
body.dark .nav-toggle-btn {
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

body.dark .command-bar:hover,
body.dark .project-switcher:hover,
body.dark .secondary-btn:hover,
body.dark .icon-btn:hover,
body.dark .mobile-action-btn:hover,
body.dark .preset-pill:hover,
body.dark .inline-ai-pill:hover,
body.dark .panel-tab:hover,
body.dark .small-tab:hover,
body.dark .review-filter-chip:hover,
body.dark .nav-item:hover,
body.dark .scene-nav-card:hover,
body.dark .story-card:hover,
body.dark .beat-row:hover,
body.dark .nav-toggle-btn:hover,
body.dark .ghost-btn:hover {
  background: rgba(255,255,255,0.088) !important;
  border-color: rgba(255,255,255,0.11) !important;
}

body.dark .primary-btn {
  background: linear-gradient(180deg, #3aa0ff 0%, #0a84ff 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(125,190,255,0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 10px 22px rgba(10,132,255,0.22) !important;
}

body.dark .primary-btn:hover {
  background: linear-gradient(180deg, #56adff 0%, #2491ff 100%) !important;
}

body.dark .nav-item.is-active,
body.dark .panel-tab.is-active,
body.dark .small-tab.is-active,
body.dark .mobile-tab.is-active,
body.dark .scene-nav-card.is-active,
body.dark .beat-row.is-active,
body.dark .review-filter-chip.is-active {
  background: linear-gradient(180deg, rgba(10,132,255,0.22) 0%, rgba(10,132,255,0.14) 100%) !important;
  border-color: rgba(84,174,255,0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(10,132,255,0.08) !important;
  color: #f5f5f7 !important;
}

body.dark a,
body.dark .scene-nav-title,
body.dark .scene-status-badge.is-locked {
  color: #7dc4ff !important;
}

body.dark .surface-title,
body.dark .presentation-mini-title,
body.dark .presentation-copy,
body.dark .presentation-logline-copy,
body.dark .comment-body,
body.dark .screenplay-note,
body.dark .review-script,
body.dark .story-card-copy,
body.dark .mobile-sheet-title,
body.dark .mobile-detail-title,
body.dark .scene-review-note-copy,
body.dark .screenplay-scene,
body.dark .screenplay-head,
body.dark .project-home-presentation-action,
body.dark .toast,
body.dark .brand-name,
body.dark .project-switcher,
body.dark .command-bar,
body.dark .topbar,
body.dark .app-textarea,
body.dark .app-select,
body.dark .mobile-search-input,
body.dark .prompt-field {
  color: var(--text) !important;
}

body.dark .surface-sub,
body.dark .key-value-key,
body.dark .rail-label,
body.dark .eyebrow,
body.dark .scene-nav-copy,
body.dark .comment-meta,
body.dark .activity-time,
body.dark .idea-date,
body.dark .research-type,
body.dark .presentation-mini-sub,
body.dark .presentation-logline-label,
body.dark .story-card-kicker,
body.dark .planning-kicker,
body.dark .planning-summary-label,
body.dark .trust-summary-label,
body.dark .meta-edit > span,
body.dark .collaboration-note,
body.dark .edit-owner-copy,
body.dark .scene-rail-kicker,
body.dark .health-mini-title,
body.dark .mobile-tab,
body.dark .status-left,
body.dark .status-right,
body.dark .brand-sub {
  color: var(--text-soft) !important;
}

body.dark .app-textarea,
body.dark .app-select,
body.dark .mobile-search-input,
body.dark .prompt-field {
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.035) 100%) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

body.dark .app-textarea::placeholder,
body.dark .mobile-search-input::placeholder,
body.dark .prompt-field::placeholder {
  color: #7f8490 !important;
}

body.dark .app-textarea:focus,
body.dark .app-select:focus,
body.dark .mobile-search-input:focus,
body.dark .prompt-field:focus {
  border-color: rgba(84,174,255,0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 3px rgba(10,132,255,0.16) !important;
}

body.dark .mobile-sheet-handle {
  background: rgba(255,255,255,0.24) !important;
}

body.dark .scene-status-badge.is-draft {
  background: rgba(255,255,255,0.07) !important;
  color: #c7c7cc !important;
  border-color: rgba(255,255,255,0.10) !important;
}

body.dark .scene-status-badge.is-revise {
  background: rgba(255,159,10,0.16) !important;
  color: #ffb340 !important;
  border-color: rgba(255,159,10,0.20) !important;
}

body.dark .scene-status-badge.is-approved,
body.dark .resolve-pill {
  background: rgba(50,215,75,0.16) !important;
  color: #6ee787 !important;
  border-color: rgba(50,215,75,0.22) !important;
}

body.dark .toast {
  background: linear-gradient(180deg, rgba(36,36,40,0.97) 0%, rgba(18,18,22,0.98) 100%) !important;
}

body.dark .copilot-fab {
  background: linear-gradient(180deg, rgba(24,24,29,0.98) 0%, rgba(10,10,12,0.98) 100%) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: var(--text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 22px 46px rgba(0,0,0,0.42) !important;
}

body.dark ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.16);
}
body.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.24);
}

/* ==========================================================
   SURGICAL PATCH: dark theme regression fix for planning + trust cards
   Only fills the classes that were still rendering light in dark mode.
   ========================================================== */
body.dark .planning-summary-card,
body.dark .planning-inspector-card,
body.dark .trust-entry,
body.dark .trust-notice {
  background: linear-gradient(180deg, rgba(21,21,26,0.96) 0%, rgba(11,11,14,0.98) 100%) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
}

body.dark .trust-entry-recovery {
  background: linear-gradient(180deg, rgba(16,28,36,0.98) 0%, rgba(9,15,20,0.98) 100%) !important;
  border-color: rgba(84,174,255,0.18) !important;
}

body.dark .planning-summary-value,
body.dark .trust-entry-title {
  color: var(--text) !important;
}

body.dark .trust-entry-sub,
body.dark .trust-notice,
body.dark .planning-meta-empty,
body.dark .planning-scene-label.is-empty {
  color: var(--text-soft) !important;
}

body.dark .planning-chip,
body.dark .scene-link-pill {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #dce1ea !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

body.dark .planning-chip.is-lane {
  background: rgba(124,92,255,0.14) !important;
  border-color: rgba(162,142,255,0.24) !important;
  color: #ddd6ff !important;
}

body.dark .planning-chip.is-scene {
  background: rgba(255,159,10,0.12) !important;
  border-color: rgba(255,179,64,0.22) !important;
  color: #ffd39f !important;
}

body.dark .planning-story-card::before,
body.dark .planning-mobile-card::before,
body.dark .planning-beat-row::before {
  background: linear-gradient(180deg, rgba(10,132,255,0.38) 0%, rgba(10,132,255,0.10) 100%) !important;
}

/* ============================================================
   Mobile dashboard hero — breathable spacing + quieter actions
   Surgical patch: dashboard hero on mobile only
   ============================================================ */
@media (max-width: 640px) {
  #view-dashboard .page-hero {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    gap: 18px !important;
    margin-bottom: 22px !important;
  }

  #view-dashboard .page-hero > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  #view-dashboard .page-hero .eyebrow {
    margin-bottom: 2px !important;
    opacity: 0.72 !important;
    letter-spacing: 0.12em !important;
  }

  #view-dashboard .page-hero h1 {
    margin: 2px 0 10px !important;
    line-height: 1.06 !important;
  }

  #view-dashboard .page-hero p {
    max-width: none !important;
    line-height: 1.65 !important;
    color: var(--text-soft) !important;
  }

  #view-dashboard .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 14px !important;
    margin-top: 12px !important;
    align-items: stretch !important;
  }

  #view-dashboard .hero-actions .primary-btn,
  #view-dashboard .hero-actions .secondary-btn {
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 11px 14px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #view-dashboard .hero-actions .secondary-btn {
    background: rgba(15, 23, 42, 0.045) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: rgba(17, 24, 39, 0.88) !important;
  }

  #view-dashboard .hero-actions .primary-btn {
    background: rgba(0, 113, 227, 0.12) !important;
    border: 1px solid rgba(0, 113, 227, 0.16) !important;
    color: #005ecb !important;
  }

  #view-dashboard .hero-actions .secondary-btn:hover,
  #view-dashboard .hero-actions .secondary-btn:active,
  #view-dashboard .hero-actions .primary-btn:hover,
  #view-dashboard .hero-actions .primary-btn:active {
    transform: none !important;
    box-shadow: none !important;
  }
}

@media (max-width: 380px) {
  #view-dashboard .hero-actions {
    grid-template-columns: 1fr !important;
  }
}

body.dark #view-dashboard .page-hero .eyebrow {
  opacity: 0.66 !important;
}

body.dark #view-dashboard .page-hero p {
  color: rgba(255,255,255,0.70) !important;
}

body.dark #view-dashboard .hero-actions .secondary-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.88) !important;
}

body.dark #view-dashboard .hero-actions .primary-btn {
  background: rgba(41,151,255,0.16) !important;
  border: 1px solid rgba(41,151,255,0.22) !important;
  color: #7cc0ff !important;
}


/* ============================================================
   iPad portrait dashboard hero — breathable spacing + calmer actions
   Surgical patch: dashboard hero on tablet portrait only
   ============================================================ */
body.tablet-portrait #view-dashboard .page-hero {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  gap: 22px !important;
  margin-bottom: 28px !important;
}

body.tablet-portrait #view-dashboard .page-hero > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body.tablet-portrait #view-dashboard .page-hero .eyebrow {
  margin-bottom: 2px !important;
  opacity: 0.74 !important;
  letter-spacing: 0.12em !important;
}

body.tablet-portrait #view-dashboard .page-hero h1 {
  margin: 2px 0 10px !important;
  line-height: 1.04 !important;
}

body.tablet-portrait #view-dashboard .page-hero p {
  max-width: 62ch !important;
  line-height: 1.68 !important;
  color: var(--text-soft) !important;
}

body.tablet-portrait #view-dashboard .hero-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: min(100%, 560px) !important;
  align-items: stretch !important;
}

body.tablet-portrait #view-dashboard .hero-actions .primary-btn,
body.tablet-portrait #view-dashboard .hero-actions .secondary-btn {
  width: 100% !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
  transform: none !important;
}

body.tablet-portrait #view-dashboard .hero-actions .secondary-btn {
  background: rgba(15, 23, 42, 0.042) !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  color: rgba(17, 24, 39, 0.86) !important;
}

body.tablet-portrait #view-dashboard .hero-actions .primary-btn {
  background: rgba(0, 113, 227, 0.11) !important;
  border: 1px solid rgba(0, 113, 227, 0.15) !important;
  color: #005ecb !important;
}

body.tablet-portrait #view-dashboard .hero-actions .secondary-btn:hover,
body.tablet-portrait #view-dashboard .hero-actions .secondary-btn:active,
body.tablet-portrait #view-dashboard .hero-actions .primary-btn:hover,
body.tablet-portrait #view-dashboard .hero-actions .primary-btn:active {
  transform: none !important;
  box-shadow: none !important;
}

body.dark.tablet-portrait #view-dashboard .page-hero .eyebrow {
  opacity: 0.66 !important;
}

body.dark.tablet-portrait #view-dashboard .page-hero p {
  color: rgba(255,255,255,0.70) !important;
}

body.dark.tablet-portrait #view-dashboard .hero-actions .secondary-btn {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.88) !important;
}

body.dark.tablet-portrait #view-dashboard .hero-actions .primary-btn {
  background: rgba(41,151,255,0.15) !important;
  border: 1px solid rgba(41,151,255,0.22) !important;
  color: #7cc0ff !important;
}


/* ============================================================
   iPad portrait dashboard hero — direct viewport-targeted fix
   Surgical patch: dashboard hero on portrait tablets only
   ============================================================ */
@media screen and (min-width: 641px) and (max-width: 1180px) and (orientation: portrait) {
  #view-dashboard .page-hero {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    gap: 24px !important;
    margin-bottom: 30px !important;
    align-items: stretch !important;
  }

  #view-dashboard .page-hero > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #view-dashboard .page-hero .eyebrow {
    margin-bottom: 2px !important;
    opacity: 0.74 !important;
    letter-spacing: 0.12em !important;
  }

  #view-dashboard .page-hero h1 {
    margin: 2px 0 12px !important;
    line-height: 1.04 !important;
  }

  #view-dashboard .page-hero p {
    max-width: 62ch !important;
    line-height: 1.72 !important;
    color: var(--text-soft) !important;
  }

  #view-dashboard .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: min(100%, 580px) !important;
    align-items: stretch !important;
    justify-content: start !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #view-dashboard .hero-actions .primary-btn,
  #view-dashboard .hero-actions .secondary-btn {
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #view-dashboard .hero-actions .secondary-btn {
    background: rgba(15, 23, 42, 0.042) !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    color: rgba(17, 24, 39, 0.86) !important;
  }

  #view-dashboard .hero-actions .primary-btn {
    background: rgba(0, 113, 227, 0.11) !important;
    border: 1px solid rgba(0, 113, 227, 0.15) !important;
    color: #005ecb !important;
  }

  #view-dashboard .hero-actions .secondary-btn:hover,
  #view-dashboard .hero-actions .secondary-btn:active,
  #view-dashboard .hero-actions .primary-btn:hover,
  #view-dashboard .hero-actions .primary-btn:active {
    transform: none !important;
    box-shadow: none !important;
  }
}

@media screen and (min-width: 641px) and (max-width: 1180px) and (orientation: portrait) {
  body.dark #view-dashboard .page-hero .eyebrow {
    opacity: 0.66 !important;
  }

  body.dark #view-dashboard .page-hero p {
    color: rgba(255,255,255,0.70) !important;
  }

  body.dark #view-dashboard .hero-actions .secondary-btn {
    background: rgba(255,255,255,0.055) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.88) !important;
  }

  body.dark #view-dashboard .hero-actions .primary-btn {
    background: rgba(41,151,255,0.15) !important;
    border: 1px solid rgba(41,151,255,0.22) !important;
    color: #7cc0ff !important;
  }
}

/* ============================================================
   Phone portrait dashboard hero — force 2-up actions
   Surgical patch: hero actions on phone portrait only
   ============================================================ */
@media screen and (max-width: 640px) and (orientation: portrait) {
  body.phone-portrait #view-dashboard .hero-actions,
  html body.phone-portrait #view-dashboard .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 14px !important;
    margin-top: 12px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  body.phone-portrait #view-dashboard .hero-actions .primary-btn,
  body.phone-portrait #view-dashboard .hero-actions .secondary-btn,
  html body.phone-portrait #view-dashboard .hero-actions .primary-btn,
  html body.phone-portrait #view-dashboard .hero-actions .secondary-btn {
    width: 100% !important;
    min-width: 0 !important;
    flex: initial !important;
  }
}


/* Script editor add FAB — surgical enhancement */
.editor-add-fab-shell {
  display: none;
  position: fixed;
  right: max(18px, calc(env(safe-area-inset-right) + 12px));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 90;
  align-items: flex-end;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
body.editor-add-fab-visible .editor-add-fab-shell {
  display: inline-flex;
}
.editor-add-fab-toggle {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,246,250,0.96));
  color: var(--text);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16), 0 1px 0 rgba(255,255,255,0.85) inset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, background 220ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.editor-add-fab-toggle:hover {
  transform: translateY(-1px) scale(1.01);
}
.editor-add-fab-plus {
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-1px) rotate(0deg);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
.editor-add-fab-menu {
  display: grid;
  justify-items: end;
  gap: 10px;
}
.editor-add-fab-item {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255,255,255,0.96);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14), 0 1px 0 rgba(255,255,255,0.84) inset;
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  pointer-events: none;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease, box-shadow 180ms ease, background 180ms ease;
  transition-delay: 0ms;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body.editor-add-fab-open .editor-add-fab-plus {
  transform: translateY(-1px) rotate(45deg);
}
body.editor-add-fab-open .editor-add-fab-toggle {
  box-shadow: 0 20px 36px rgba(15, 23, 42, 0.20), 0 1px 0 rgba(255,255,255,0.88) inset;
}
body.editor-add-fab-open .editor-add-fab-item {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition-delay: calc(var(--fab-order, 0) * 22ms);
}
.editor-add-fab-item:hover,
.editor-add-fab-item:focus-visible,
.editor-add-fab-toggle:focus-visible {
  outline: none;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18), 0 0 0 3px rgba(46, 124, 255, 0.14);
}
body.phone-portrait .editor-add-fab-shell,
body.phone-landscape .editor-add-fab-shell {
  right: max(16px, calc(env(safe-area-inset-right) + 10px));
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 86px));
}
body.tablet-portrait .editor-add-fab-shell,
body.tablet-landscape .editor-add-fab-shell {
  right: max(18px, calc(env(safe-area-inset-right) + 12px));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
}
body.desktop-viewport .editor-add-fab-shell {
  right: 24px;
  bottom: 24px;
}
body.dark .editor-add-fab-toggle {
  background: linear-gradient(180deg, rgba(28,28,30,0.98), rgba(12,12,12,0.98));
  border-color: rgba(255,255,255,0.08);
  color: #f5f5f7;
  box-shadow: 0 18px 34px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.05) inset;
}
body.dark .editor-add-fab-item {
  background: rgba(18,18,20,0.96);
  border-color: rgba(255,255,255,0.08);
  color: #f5f5f7;
  box-shadow: 0 12px 26px rgba(0,0,0,0.34), 0 1px 0 rgba(255,255,255,0.04) inset;
}
body.dark.editor-add-fab-open .editor-add-fab-toggle {
  box-shadow: 0 20px 38px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset;
}
body.dark .editor-add-fab-item:hover,
body.dark .editor-add-fab-item:focus-visible,
body.dark .editor-add-fab-toggle:focus-visible {
  box-shadow: 0 16px 30px rgba(0,0,0,0.42), 0 0 0 3px rgba(10,132,255,0.22);
}
@media (max-width: 640px) {
  .editor-add-fab-toggle {
    width: 56px;
    height: 56px;
  }
  .editor-add-fab-item {
    min-height: 40px;
    padding: 0 15px;
    font-size: 13px;
  }
}


/* ===== Inline AI bar: summon per block ===== */
.inline-ai-bar[hidden] { display: none !important; }
.block-ai-arrow-btn {
  border: 1px solid var(--border) !important;
  background: var(--surface-strong) !important;
  color: var(--text-soft) !important;
  border-radius: 999px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease !important;
}
.block-ai-arrow-btn.is-active {
  background: rgba(0,102,204,0.10) !important;
  color: var(--accent) !important;
  border-color: rgba(0,102,204,0.22) !important;
  transform: rotate(180deg) !important;
}
body.dark .block-ai-arrow-btn.is-active {
  background: rgba(10,132,255,0.14) !important;
  border-color: rgba(10,132,255,0.28) !important;
}
.inline-ai-bar {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: min(100%, 100%) !important;
  margin: 12px 0 0 !important;
  display: none !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  opacity: 0 !important;
  transform: translateY(-8px) scale(0.985) !important;
  transform-origin: top left !important;
  pointer-events: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), max-height 220ms ease !important;
}
.inline-ai-bar.is-inline-mounted {
  display: flex !important;
}
.inline-ai-bar.is-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  max-height: 180px !important;
  pointer-events: auto !important;
}
.screenplay-block-shell.has-inline-ai-open {
  z-index: 2;
}
@media (max-width: 1024px) {
  .inline-ai-bar {
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-top: 10px !important;
  }
}


/* v20 — avoid overlap between Script Editor add FAB and Copilot FAB on iPad landscape / desktop */
body.tablet-landscape.editor-add-fab-visible .editor-add-fab-shell,
body.desktop-viewport.editor-add-fab-visible .editor-add-fab-shell {
  bottom: max(86px, calc(env(safe-area-inset-bottom) + 80px));
}

/* v21 surgical fix — legacy omnipresent AI bar must never render globally */
#inlineAiBar:not(.is-inline-mounted) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}
#inlineAiBar.is-inline-mounted {
  display: flex !important;
}
#inlineAiBar[hidden] {
  display: none !important;
}


/* Surgical modal tail spacer fix: ensure last content in sheets/overlays can scroll fully into view */
.mobile-detail-body,
.mobile-sheet-grid,
.mobile-search-sheet,
.app-prompt-sheet,
.editor-shortcuts-sheet,
.copilot-overlay-body {
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

.mobile-detail-body,
.mobile-sheet-grid,
.copilot-overlay-body {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
}

.mobile-search-sheet,
.app-prompt-sheet,
.editor-shortcuts-sheet {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
}

.mobile-detail-body::after,
.mobile-sheet-grid::after,
.copilot-overlay-body::after,
.mobile-search-sheet::after,
.app-prompt-sheet::after,
.editor-shortcuts-sheet::after {
  content: '';
  display: block;
  width: 100%;
  height: calc(44px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}


/* v23 — hide visible inner scrollbars inside sheets/overlays while preserving scrolling */
.mobile-detail-body,
.mobile-sheet-grid,
.mobile-search-sheet,
.mobile-action-sheet,
.app-prompt-sheet,
.editor-shortcuts-sheet,
.copilot-overlay-body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.mobile-detail-body::-webkit-scrollbar,
.mobile-sheet-grid::-webkit-scrollbar,
.mobile-search-sheet::-webkit-scrollbar,
.mobile-action-sheet::-webkit-scrollbar,
.app-prompt-sheet::-webkit-scrollbar,
.editor-shortcuts-sheet::-webkit-scrollbar,
.copilot-overlay-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}


/* v24 — surgical fix: keep app prompt modals contained and non-trashy on phone */
.app-prompt-backdrop {
  overflow: hidden !important;
}
.app-prompt-sheet {
  max-width: min(560px, calc(100vw - 36px)) !important;
  max-inline-size: min(560px, calc(100vw - 36px)) !important;
  overflow-x: clip !important;
}
.app-prompt-head,
.app-prompt-body,
.app-prompt-actions,
.prompt-field {
  min-width: 0 !important;
}
.app-prompt-sheet .app-select,
.app-prompt-sheet .app-textarea,
.app-prompt-sheet select,
.app-prompt-sheet input,
.app-prompt-sheet textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 640px) {
  .app-prompt-backdrop {
    padding: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .app-prompt-sheet {
    width: min(calc(100dvw - 20px), calc(100vw - 20px)) !important;
    max-width: min(calc(100dvw - 20px), calc(100vw - 20px)) !important;
    max-inline-size: min(calc(100dvw - 20px), calc(100vw - 20px)) !important;
    border-radius: 24px !important;
    overflow-x: clip !important;
    overscroll-behavior-x: none !important;
  }
  .app-prompt-body {
    overflow-x: clip !important;
  }
}


/* ============================================================
   Presentation hero actions — match the calmer pill system on mobile
   Surgical patch: presentation mode action buttons on phone + tablet portrait
   ============================================================ */
@media (max-width: 640px) {
  #view-presentation .page-hero {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    gap: 18px !important;
    margin-bottom: 22px !important;
  }

  #view-presentation .page-hero > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  #view-presentation .page-hero .eyebrow {
    margin-bottom: 2px !important;
    opacity: 0.72 !important;
    letter-spacing: 0.12em !important;
  }

  #view-presentation .page-hero h1 {
    margin: 2px 0 10px !important;
    line-height: 1.06 !important;
  }

  #view-presentation .page-hero p {
    max-width: none !important;
    line-height: 1.65 !important;
    color: var(--text-soft) !important;
  }

  #view-presentation .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 14px !important;
    margin-top: 12px !important;
    align-items: stretch !important;
  }

  #view-presentation .hero-actions .primary-btn,
  #view-presentation .hero-actions .secondary-btn {
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 11px 14px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #view-presentation .hero-actions .secondary-btn {
    background: rgba(15, 23, 42, 0.045) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: rgba(17, 24, 39, 0.88) !important;
  }

  #view-presentation .hero-actions .primary-btn {
    background: rgba(0, 113, 227, 0.12) !important;
    border: 1px solid rgba(0, 113, 227, 0.16) !important;
    color: #005ecb !important;
  }

  #view-presentation .hero-actions .secondary-btn:hover,
  #view-presentation .hero-actions .secondary-btn:active,
  #view-presentation .hero-actions .primary-btn:hover,
  #view-presentation .hero-actions .primary-btn:active {
    transform: none !important;
    box-shadow: none !important;
  }

  #view-presentation .hero-actions > :last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 380px) {
  #view-presentation .hero-actions {
    grid-template-columns: 1fr !important;
  }

  #view-presentation .hero-actions > :last-child:nth-child(odd) {
    grid-column: auto !important;
  }
}

body.dark #view-presentation .page-hero .eyebrow {
  opacity: 0.66 !important;
}

body.dark #view-presentation .page-hero p {
  color: rgba(255,255,255,0.70) !important;
}

body.dark #view-presentation .hero-actions .secondary-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.88) !important;
}

body.dark #view-presentation .hero-actions .primary-btn {
  background: rgba(41,151,255,0.16) !important;
  border: 1px solid rgba(41,151,255,0.22) !important;
  color: #7cc0ff !important;
}

body.tablet-portrait #view-presentation .page-hero {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  gap: 22px !important;
  margin-bottom: 28px !important;
}

body.tablet-portrait #view-presentation .page-hero > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body.tablet-portrait #view-presentation .page-hero .eyebrow {
  margin-bottom: 2px !important;
  opacity: 0.74 !important;
  letter-spacing: 0.12em !important;
}

body.tablet-portrait #view-presentation .page-hero h1 {
  margin: 2px 0 10px !important;
  line-height: 1.04 !important;
}

body.tablet-portrait #view-presentation .page-hero p {
  max-width: 62ch !important;
  line-height: 1.68 !important;
  color: var(--text-soft) !important;
}

body.tablet-portrait #view-presentation .hero-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: min(100%, 560px) !important;
  align-items: stretch !important;
}

body.tablet-portrait #view-presentation .hero-actions .primary-btn,
body.tablet-portrait #view-presentation .hero-actions .secondary-btn {
  width: 100% !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
  transform: none !important;
}

body.tablet-portrait #view-presentation .hero-actions .secondary-btn {
  background: rgba(15, 23, 42, 0.042) !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  color: rgba(17, 24, 39, 0.86) !important;
}

body.tablet-portrait #view-presentation .hero-actions .primary-btn {
  background: rgba(0, 113, 227, 0.11) !important;
  border: 1px solid rgba(0, 113, 227, 0.15) !important;
  color: #005ecb !important;
}

body.tablet-portrait #view-presentation .hero-actions > :last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
}

body.dark.tablet-portrait #view-presentation .page-hero p {
  color: rgba(255,255,255,0.70) !important;
}

body.dark.tablet-portrait #view-presentation .hero-actions .secondary-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.88) !important;
}

body.dark.tablet-portrait #view-presentation .hero-actions .primary-btn {
  background: rgba(41,151,255,0.16) !important;
  border: 1px solid rgba(41,151,255,0.22) !important;
  color: #7cc0ff !important;
}


/* ============================================================
   v24.4 — Unified mobile sheet design system
   Goal: make action/search/detail/prompt sheets feel consistent,
   calmer, and more Apple-like across phone surfaces.
   ============================================================ */

/* Shared sheet shell */
.mobile-action-sheet,
.mobile-search-sheet,
.mobile-detail-sheet,
.app-prompt-sheet {
  border-radius: 32px 32px 0 0 !important;
  background: rgba(246, 246, 248, 0.96) !important;
  border: 1px solid rgba(17, 24, 39, 0.07) !important;
  box-shadow:
    0 -1px 0 rgba(255,255,255,0.82) inset,
    0 -18px 48px rgba(15, 23, 42, 0.10),
    0 -4px 12px rgba(15, 23, 42, 0.05) !important;
  backdrop-filter: saturate(180%) blur(28px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
}

body.dark .mobile-action-sheet,
body.dark .mobile-search-sheet,
body.dark .mobile-detail-sheet,
body.dark .app-prompt-sheet {
  background: rgba(25, 25, 28, 0.96) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow:
    0 -1px 0 rgba(255,255,255,0.04) inset,
    0 -18px 52px rgba(0, 0, 0, 0.42),
    0 -4px 14px rgba(0, 0, 0, 0.24) !important;
}

.mobile-action-sheet,
.mobile-search-sheet,
.mobile-detail-sheet {
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}

.mobile-sheet-handle {
  width: 52px !important;
  height: 6px !important;
  margin: 0 auto 14px !important;
  border-radius: 999px !important;
  background: rgba(60, 60, 67, 0.20) !important;
}
body.dark .mobile-sheet-handle {
  background: rgba(255,255,255,0.17) !important;
}

.mobile-sheet-title,
.mobile-detail-title,
.app-prompt-title {
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(99, 102, 110, 0.90) !important;
}

.mobile-sheet-title {
  margin-bottom: 14px !important;
}

.mobile-detail-head,
.app-prompt-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 2px !important;
  margin-bottom: 14px !important;
}

.mobile-close-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  background: rgba(17, 24, 39, 0.05) !important;
  color: rgba(31, 41, 55, 0.76) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset !important;
}
body.dark .mobile-close-btn {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.78) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset !important;
}

.mobile-sheet-grid,
.mobile-search-actions {
  display: grid !important;
  gap: 12px !important;
}

.mobile-search-body {
  display: grid !important;
  gap: 16px !important;
  padding: 4px 0 0 !important;
}

.mobile-search-input {
  width: 100% !important;
  min-height: 54px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  background: rgba(255,255,255,0.76) !important;
  color: rgba(17, 24, 39, 0.92) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.82) inset !important;
}
body.dark .mobile-search-input {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.92) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset !important;
}
.mobile-search-input::placeholder {
  color: rgba(107, 114, 128, 0.92) !important;
}
body.dark .mobile-search-input::placeholder {
  color: rgba(255,255,255,0.44) !important;
}
.mobile-search-input:focus {
  border-color: rgba(0, 113, 227, 0.26) !important;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.10), 0 1px 0 rgba(255,255,255,0.82) inset !important;
}
body.dark .mobile-search-input:focus {
  border-color: rgba(41, 151, 255, 0.28) !important;
  box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.12), 0 1px 0 rgba(255,255,255,0.03) inset !important;
}

/* Shared sheet action treatment */
.mobile-sheet-grid > .primary-btn,
.mobile-sheet-grid > .secondary-btn,
.mobile-sheet-grid > .ghost-btn,
.mobile-search-actions > .primary-btn,
.mobile-search-actions > .secondary-btn,
.mobile-search-actions > .ghost-btn,
.mobile-detail-body .inline-actions .primary-btn,
.mobile-detail-body .inline-actions .secondary-btn,
.mobile-detail-body .inline-actions .ghost-btn,
.app-prompt-actions .primary-btn,
.app-prompt-actions .secondary-btn,
.app-prompt-actions .ghost-btn {
  width: 100% !important;
  min-height: 54px !important;
  padding: 14px 18px !important;
  border-radius: 20px !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.78) inset,
    0 10px 24px rgba(15, 23, 42, 0.05) !important;
  transform: none !important;
}

.mobile-sheet-grid > .secondary-btn,
.mobile-search-actions > .secondary-btn,
.mobile-detail-body .inline-actions .secondary-btn,
.app-prompt-actions .secondary-btn {
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  color: rgba(17, 24, 39, 0.90) !important;
}

.mobile-sheet-grid > .primary-btn,
.mobile-search-actions > .primary-btn,
.mobile-detail-body .inline-actions .primary-btn,
.app-prompt-actions .primary-btn {
  background: rgba(0, 113, 227, 0.12) !important;
  border: 1px solid rgba(0, 113, 227, 0.18) !important;
  color: #005ecb !important;
}

.mobile-sheet-grid > .ghost-btn,
.mobile-search-actions > .ghost-btn,
.mobile-detail-body .inline-actions .ghost-btn,
.app-prompt-actions .ghost-btn {
  background: rgba(255, 59, 48, 0.10) !important;
  border: 1px solid rgba(255, 59, 48, 0.14) !important;
  color: #c62828 !important;
}

body.dark .mobile-sheet-grid > .secondary-btn,
body.dark .mobile-search-actions > .secondary-btn,
body.dark .mobile-detail-body .inline-actions .secondary-btn,
body.dark .app-prompt-actions .secondary-btn {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.90) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 10px 24px rgba(0,0,0,0.20) !important;
}

body.dark .mobile-sheet-grid > .primary-btn,
body.dark .mobile-search-actions > .primary-btn,
body.dark .mobile-detail-body .inline-actions .primary-btn,
body.dark .app-prompt-actions .primary-btn {
  background: rgba(41,151,255,0.17) !important;
  border-color: rgba(41,151,255,0.22) !important;
  color: #7cc0ff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 10px 24px rgba(0,0,0,0.20) !important;
}

body.dark .mobile-sheet-grid > .ghost-btn,
body.dark .mobile-search-actions > .ghost-btn,
body.dark .mobile-detail-body .inline-actions .ghost-btn,
body.dark .app-prompt-actions .ghost-btn {
  background: rgba(255, 69, 58, 0.16) !important;
  border-color: rgba(255, 69, 58, 0.20) !important;
  color: #ff8d86 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 10px 24px rgba(0,0,0,0.20) !important;
}

.mobile-sheet-grid > .primary-btn:hover,
.mobile-sheet-grid > .secondary-btn:hover,
.mobile-sheet-grid > .ghost-btn:hover,
.mobile-search-actions > .primary-btn:hover,
.mobile-search-actions > .secondary-btn:hover,
.mobile-search-actions > .ghost-btn:hover,
.mobile-detail-body .inline-actions .primary-btn:hover,
.mobile-detail-body .inline-actions .secondary-btn:hover,
.mobile-detail-body .inline-actions .ghost-btn:hover,
.app-prompt-actions .primary-btn:hover,
.app-prompt-actions .secondary-btn:hover,
.app-prompt-actions .ghost-btn:hover,
.mobile-sheet-grid > .primary-btn:active,
.mobile-sheet-grid > .secondary-btn:active,
.mobile-sheet-grid > .ghost-btn:active,
.mobile-search-actions > .primary-btn:active,
.mobile-search-actions > .secondary-btn:active,
.mobile-search-actions > .ghost-btn:active,
.mobile-detail-body .inline-actions .primary-btn:active,
.mobile-detail-body .inline-actions .secondary-btn:active,
.mobile-detail-body .inline-actions .ghost-btn:active,
.app-prompt-actions .primary-btn:active,
.app-prompt-actions .secondary-btn:active,
.app-prompt-actions .ghost-btn:active {
  transform: none !important;
}

.mobile-detail-body {
  padding: 6px 2px 12px !important;
}
.mobile-detail-body > * + * {
  margin-top: 14px !important;
}
.mobile-detail-body .key-value {
  border-radius: 22px !important;
  padding: 16px 18px !important;
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.82) inset !important;
}
body.dark .mobile-detail-body .key-value {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset !important;
}
.mobile-detail-body .inline-actions {
  display: grid !important;
  gap: 12px !important;
  margin-top: 10px !important;
}
.mobile-detail-body .scene-link-list {
  display: grid !important;
  gap: 10px !important;
}
.mobile-detail-body .scene-link-pill,
.mobile-detail-body .story-link-summary {
  border-radius: 18px !important;
  padding: 12px 16px !important;
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.82) inset !important;
}
body.dark .mobile-detail-body .scene-link-pill,
body.dark .mobile-detail-body .story-link-summary {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset !important;
}

@media (max-width: 380px) {
  .mobile-action-sheet,
  .mobile-search-sheet,
  .mobile-detail-sheet,
  .app-prompt-sheet {
    border-radius: 28px 28px 0 0 !important;
  }

  .mobile-sheet-grid > .primary-btn,
  .mobile-sheet-grid > .secondary-btn,
  .mobile-sheet-grid > .ghost-btn,
  .mobile-search-actions > .primary-btn,
  .mobile-search-actions > .secondary-btn,
  .mobile-search-actions > .ghost-btn,
  .mobile-detail-body .inline-actions .primary-btn,
  .mobile-detail-body .inline-actions .secondary-btn,
  .mobile-detail-body .inline-actions .ghost-btn,
  .app-prompt-actions .primary-btn,
  .app-prompt-actions .secondary-btn,
  .app-prompt-actions .ghost-btn {
    min-height: 50px !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
  }
}


/* ============================================================
   v24.5 — Aggressive mobile visual consistency sweep
   Applies the unified Apple-calm language beyond sheets:
   topbar controls, mobile tabbar, scene/cards rails, AI starters,
   project/settings actions, outline/review/mobile cards.
   ============================================================ */

@media (max-width: 820px) {
  body.mobile-viewport,
  body.phone-portrait,
  body.phone-landscape,
  body.tablet-portrait {
    background: #f5f5f7 !important;
  }

  body.dark.mobile-viewport,
  body.dark.phone-portrait,
  body.dark.phone-landscape,
  body.dark.tablet-portrait {
    background: #101012 !important;
  }

  .topbar {
    background: rgba(247, 247, 249, 0.86) !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.06) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.74) inset !important;
    backdrop-filter: saturate(180%) blur(28px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
  }

  body.dark .topbar {
    background: rgba(18, 18, 21, 0.86) !important;
    border-bottom-color: rgba(255,255,255,0.07) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset !important;
  }

  .icon-btn,
  .mobile-action-btn,
  #mobileNavBtn {
    border-radius: 18px !important;
    background: rgba(17, 24, 39, 0.045) !important;
    border: 1px solid rgba(17, 24, 39, 0.055) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset !important;
    color: rgba(17, 24, 39, 0.76) !important;
  }

  body.dark .icon-btn,
  body.dark .mobile-action-btn,
  body.dark #mobileNavBtn {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset !important;
    color: rgba(255,255,255,0.78) !important;
  }

  .project-switcher {
    height: 42px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.52) !important;
    border: 1px solid rgba(17, 24, 39, 0.06) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.68) inset !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em !important;
  }

  body.dark .project-switcher {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset !important;
  }

  .mobile-tabbar {
    border-radius: 30px !important;
    padding: 8px !important;
    background: rgba(247,247,249,0.88) !important;
    border: 1px solid rgba(17,24,39,0.07) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.82) inset,
      0 16px 38px rgba(15,23,42,0.12),
      0 4px 14px rgba(15,23,42,0.08) !important;
    backdrop-filter: saturate(180%) blur(30px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(30px) !important;
  }

  body.dark .mobile-tabbar {
    background: rgba(26,26,30,0.88) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.03) inset,
      0 18px 42px rgba(0,0,0,0.42) !important;
  }

  .mobile-tab {
    border-radius: 22px !important;
    min-height: 50px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em !important;
    color: rgba(75,85,99,0.70) !important;
  }

  .mobile-tab.is-active {
    background: rgba(255,255,255,0.92) !important;
    color: rgba(17,24,39,0.95) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.95) inset,
      0 10px 22px rgba(15,23,42,0.09) !important;
  }

  body.dark .mobile-tab {
    color: rgba(255,255,255,0.56) !important;
  }

  body.dark .mobile-tab.is-active {
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.94) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 10px 22px rgba(0,0,0,0.28) !important;
  }

  .surface,
  .review-scene-card,
  .story-card,
  .recent-scene-card,
  .mobile-story-card,
  .planning-mobile-card,
  .scene-nav-card,
  .beat-row,
  .presentation-summary-card,
  .presentation-main-card,
  .presentation-scene-card,
  .presentation-mini-card,
  .presentation-beat-item,
  .presentation-scene-item {
    border-radius: 28px !important;
    background: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(17,24,39,0.065) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.85) inset,
      0 12px 34px rgba(15,23,42,0.055) !important;
  }

  body.dark .surface,
  body.dark .review-scene-card,
  body.dark .story-card,
  body.dark .recent-scene-card,
  body.dark .mobile-story-card,
  body.dark .planning-mobile-card,
  body.dark .scene-nav-card,
  body.dark .beat-row,
  body.dark .presentation-summary-card,
  body.dark .presentation-main-card,
  body.dark .presentation-scene-card,
  body.dark .presentation-mini-card,
  body.dark .presentation-beat-item,
  body.dark .presentation-scene-item {
    background: rgba(255,255,255,0.055) !important;
    border-color: rgba(255,255,255,0.075) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.03) inset,
      0 14px 34px rgba(0,0,0,0.22) !important;
  }

  .scene-carousel .scene-nav-card,
  .scene-carousel .scene-rail-item {
    border-radius: 26px !important;
  }

  .scene-carousel .scene-nav-card.is-active,
  .mobile-story-card.is-active,
  .beat-row.is-active,
  .story-card.is-active {
    background: rgba(0,113,227,0.10) !important;
    border-color: rgba(0,113,227,0.18) !important;
    outline: none !important;
  }

  body.dark .scene-carousel .scene-nav-card.is-active,
  body.dark .mobile-story-card.is-active,
  body.dark .beat-row.is-active,
  body.dark .story-card.is-active {
    background: rgba(41,151,255,0.15) !important;
    border-color: rgba(41,151,255,0.22) !important;
  }

  .starter-btn,
  .small-tab,
  .pill-pill,
  .story-chip,
  .scene-link-pill,
  .status-pill,
  .review-filter-btn {
    border-radius: 999px !important;
    background: rgba(255,255,255,0.68) !important;
    border: 1px solid rgba(17,24,39,0.07) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset !important;
    color: rgba(17,24,39,0.84) !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
  }

  body.dark .starter-btn,
  body.dark .small-tab,
  body.dark .pill-pill,
  body.dark .story-chip,
  body.dark .scene-link-pill,
  body.dark .status-pill,
  body.dark .review-filter-btn {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset !important;
    color: rgba(255,255,255,0.86) !important;
  }

  #view-project .surface .secondary-btn.full-width,
  #view-project .surface .ghost-btn.full-width,
  #view-settings .surface .secondary-btn.full-width,
  #view-settings .surface .ghost-btn.full-width,
  .scene-revision-actions .secondary-btn,
  .scene-revision-actions .primary-btn,
  .scene-feedback-actions .secondary-btn,
  .scene-feedback-actions .primary-btn,
  .inspector-action-row .secondary-btn,
  .inspector-action-row .primary-btn {
    min-height: 52px !important;
    border-radius: 20px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    letter-spacing: -0.015em !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.78) inset, 0 10px 24px rgba(15,23,42,0.045) !important;
    transform: none !important;
  }

  #view-project .surface .secondary-btn.full-width,
  #view-settings .surface .secondary-btn.full-width,
  .scene-revision-actions .secondary-btn,
  .scene-feedback-actions .secondary-btn,
  .inspector-action-row .secondary-btn {
    background: rgba(255,255,255,0.70) !important;
    border: 1px solid rgba(17,24,39,0.075) !important;
    color: rgba(17,24,39,0.88) !important;
  }

  #view-project .surface .ghost-btn.full-width,
  #view-settings .surface .ghost-btn.full-width {
    background: rgba(255,59,48,0.10) !important;
    border: 1px solid rgba(255,59,48,0.14) !important;
    color: #c62828 !important;
  }

  body.dark #view-project .surface .secondary-btn.full-width,
  body.dark #view-settings .surface .secondary-btn.full-width,
  body.dark .scene-revision-actions .secondary-btn,
  body.dark .scene-feedback-actions .secondary-btn,
  body.dark .inspector-action-row .secondary-btn {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.90) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 24px rgba(0,0,0,0.18) !important;
  }

  body.dark #view-project .surface .ghost-btn.full-width,
  body.dark #view-settings .surface .ghost-btn.full-width {
    background: rgba(255,69,58,0.16) !important;
    border-color: rgba(255,69,58,0.20) !important;
    color: #ff8d86 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 24px rgba(0,0,0,0.18) !important;
  }

  .app-textarea,
  .app-input,
  .app-select,
  input,
  textarea,
  select {
    border-radius: 18px !important;
  }

  .rail-label,
  .surface-title,
  .mobile-detail-title,
  .mobile-sheet-title,
  .eyebrow {
    letter-spacing: 0.13em !important;
  }
}

@media (max-width: 640px) {
  .surface,
  .review-scene-card,
  .story-card,
  .recent-scene-card,
  .mobile-story-card,
  .planning-mobile-card,
  .beat-row {
    padding: 18px !important;
  }

  .scene-carousel .scene-nav-card,
  .scene-carousel .scene-rail-item {
    padding: 18px !important;
  }

  .starter-btn {
    min-height: 46px !important;
    padding: 12px 15px !important;
  }

  .starter-btn.small {
    min-height: 42px !important;
    padding: 10px 13px !important;
  }

  .page-hero.compact-hero,
  .page-hero {
    border-radius: 0 !important;
  }
}


/* ============================================================
   v24.6 — Borderless depth system
   Replace hard divider/border-heavy structure with Apple-style
   tonal separation, depth, spacing, and ultra-soft hairlines.
   ============================================================ */

:root {
  --sf-soft-line: rgba(15, 23, 42, 0.045);
  --sf-softer-line: rgba(15, 23, 42, 0.028);
  --sf-depth-1: 0 1px 0 rgba(255,255,255,0.78) inset, 0 10px 28px rgba(15,23,42,0.045);
  --sf-depth-2: 0 1px 0 rgba(255,255,255,0.84) inset, 0 18px 44px rgba(15,23,42,0.065), 0 4px 14px rgba(15,23,42,0.035);
  --sf-depth-float: 0 1px 0 rgba(255,255,255,0.82) inset, 0 24px 70px rgba(15,23,42,0.12);
  --sf-tone-card: rgba(255,255,255,0.78);
  --sf-tone-card-strong: rgba(255,255,255,0.88);
  --sf-tone-field: rgba(255,255,255,0.68);
}

body.dark {
  --sf-soft-line: rgba(255,255,255,0.052);
  --sf-softer-line: rgba(255,255,255,0.035);
  --sf-depth-1: 0 1px 0 rgba(255,255,255,0.035) inset, 0 14px 34px rgba(0,0,0,0.22);
  --sf-depth-2: 0 1px 0 rgba(255,255,255,0.045) inset, 0 20px 50px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.20);
  --sf-depth-float: 0 1px 0 rgba(255,255,255,0.05) inset, 0 28px 80px rgba(0,0,0,0.48);
  --sf-tone-card: rgba(255,255,255,0.055);
  --sf-tone-card-strong: rgba(255,255,255,0.075);
  --sf-tone-field: rgba(255,255,255,0.055);
}

/* Main card/surface family: almost no visible border, more depth */
.surface,
.page-hero,
.resume-card,
.activity-card,
.story-card,
.mobile-story-card,
.scene-nav-card,
.scene-card,
.scene-rail-card,
.beat-row,
.beat-card,
.outline-act,
.planning-lane,
.planning-card,
.review-scene-card,
.review-card,
.presentation-summary-card,
.presentation-main-card,
.presentation-scene-card,
.presentation-mini-card,
.presentation-beat-item,
.presentation-scene-item,
.project-card,
.library-card,
.settings-card,
.starter-card,
.copilot-card,
.ai-card,
.inspector-card,
.story-bible-inspector,
.editor-panel,
.script-editor-shell,
.scene-editor,
.editor-block,
.mobile-detail-body .key-value,
.mobile-detail-body .scene-link-pill,
.mobile-detail-body .story-link-summary {
  border-color: var(--sf-softer-line) !important;
  box-shadow: var(--sf-depth-1) !important;
}

.page-hero,
.surface,
.presentation-main-card,
.presentation-scene-card,
.story-card,
.project-card,
.settings-card,
.script-editor-shell,
.scene-editor,
.story-bible-inspector {
  background: linear-gradient(180deg, var(--sf-tone-card-strong), var(--sf-tone-card)) !important;
  box-shadow: var(--sf-depth-2) !important;
}

/* Larger floating surfaces keep a boundary, but it becomes atmospheric */
.mobile-action-sheet,
.mobile-search-sheet,
.mobile-detail-sheet,
.app-prompt-sheet,
.editor-shortcuts-sheet,
.copilot-overlay,
.mobile-tabbar,
.topbar,
.sidebar {
  border-color: var(--sf-soft-line) !important;
  box-shadow: var(--sf-depth-float) !important;
}

/* Kill heavy section divider feel; use breathing room + tone instead */
.surface-head,
.panel-head,
.card-head,
.editor-head,
.review-head,
.presentation-head,
.planning-lane-head,
.outline-act-head,
.inspector-head,
.story-bible-head,
.mobile-detail-head,
.app-prompt-head,
.copilot-overlay-head {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.surface-head + *,
.panel-head + *,
.card-head + *,
.editor-head + *,
.review-head + *,
.presentation-head + *,
.planning-lane-head + *,
.outline-act-head + *,
.inspector-head + *,
.story-bible-head + * {
  margin-top: 2px !important;
}

/* List rows: no table-like separators; each row gets a tiny tonal lift */
.beat-row,
.review-feedback-item,
.scene-feedback-item,
.scene-revision-card,
.activity-item,
.outline-beat,
.story-link-summary,
.scene-link-pill,
.mobile-search-actions > button,
.mobile-sheet-grid > button {
  border-color: transparent !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.34)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.68) inset, 0 8px 22px rgba(15,23,42,0.035) !important;
}

body.dark .beat-row,
body.dark .review-feedback-item,
body.dark .scene-feedback-item,
body.dark .scene-revision-card,
body.dark .activity-item,
body.dark .outline-beat,
body.dark .story-link-summary,
body.dark .scene-link-pill,
body.dark .mobile-search-actions > button,
body.dark .mobile-sheet-grid > button {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.070), rgba(255,255,255,0.045)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.035) inset, 0 10px 26px rgba(0,0,0,0.20) !important;
}

/* Buttons: softer material instead of outlined boxes */
.primary-btn,
.secondary-btn,
.ghost-btn,
.icon-btn,
.small-tab,
.nav-item,
.mobile-tab,
.project-switcher,
.starter-btn,
.scene-link-pill,
.story-chip,
.pill,
.pill-pill,
.scene-status-pill {
  border-color: transparent !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.66) inset, 0 8px 20px rgba(15,23,42,0.040) !important;
}

.secondary-btn,
.icon-btn,
.small-tab,
.mobile-tab,
.project-switcher {
  background: rgba(15,23,42,0.045) !important;
}

body.dark .primary-btn,
body.dark .secondary-btn,
body.dark .ghost-btn,
body.dark .icon-btn,
body.dark .small-tab,
body.dark .nav-item,
body.dark .mobile-tab,
body.dark .project-switcher,
body.dark .starter-btn,
body.dark .scene-link-pill,
body.dark .story-chip,
body.dark .pill,
body.dark .pill-pill,
body.dark .scene-status-pill {
  border-color: transparent !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.035) inset, 0 9px 22px rgba(0,0,0,0.20) !important;
}

body.dark .secondary-btn,
body.dark .icon-btn,
body.dark .small-tab,
body.dark .mobile-tab,
body.dark .project-switcher {
  background: rgba(255,255,255,0.070) !important;
}

/* Inputs keep affordance, but no harsh outlines */
input,
textarea,
select,
.app-input,
.app-textarea,
.app-select,
.mobile-search-input,
.prompt-input,
.prompt-textarea,
[contenteditable="true"] {
  border-color: var(--sf-soft-line) !important;
  background: var(--sf-tone-field) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.58) inset !important;
}

body.dark input,
body.dark textarea,
body.dark select,
body.dark .app-input,
body.dark .app-textarea,
body.dark .app-select,
body.dark .mobile-search-input,
body.dark .prompt-input,
body.dark .prompt-textarea,
body.dark [contenteditable="true"] {
  box-shadow: 0 1px 0 rgba(255,255,255,0.032) inset !important;
}

input:focus,
textarea:focus,
select:focus,
.app-input:focus,
.app-textarea:focus,
.app-select:focus,
.mobile-search-input:focus,
[contenteditable="true"]:focus {
  border-color: rgba(0,113,227,0.22) !important;
  box-shadow: 0 0 0 4px rgba(0,113,227,0.085), 0 1px 0 rgba(255,255,255,0.72) inset !important;
}

body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus,
body.dark .app-input:focus,
body.dark .app-textarea:focus,
body.dark .app-select:focus,
body.dark .mobile-search-input:focus,
body.dark [contenteditable="true"]:focus {
  border-color: rgba(41,151,255,0.26) !important;
  box-shadow: 0 0 0 4px rgba(41,151,255,0.11), 0 1px 0 rgba(255,255,255,0.035) inset !important;
}

/* Explicit divider artifacts become barely-there tonal separators */
.divider,
.rule,
.separator,
[class*="divider"],
[class*="separator"] {
  border-color: transparent !important;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,0.055), transparent) !important;
  opacity: 0.55 !important;
}

body.dark .divider,
body.dark .rule,
body.dark .separator,
body.dark [class*="divider"],
body.dark [class*="separator"] {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.070), transparent) !important;
  opacity: 0.55 !important;
}

/* Table/list-like top/bottom borders: calm them globally inside app shells */
.workspace [style*="border"],
.mobile-action-sheet [style*="border"],
.mobile-search-sheet [style*="border"],
.mobile-detail-sheet [style*="border"] {
  border-color: var(--sf-softer-line) !important;
}

/* Preserve strong feedback only for real focus/error/destructive contexts */
.is-danger,
.danger,
.destructive,
.ghost-btn[data-danger="true"] {
  border-color: rgba(255,59,48,0.14) !important;
}

/* Mobile especially: make cards float via spacing, not outlines */
@media (max-width: 820px) {
  .surface,
  .page-hero,
  .story-card,
  .mobile-story-card,
  .scene-nav-card,
  .beat-row,
  .review-scene-card,
  .presentation-summary-card,
  .presentation-mini-card,
  .mobile-detail-body .key-value {
    border-color: transparent !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset, 0 14px 34px rgba(15,23,42,0.050) !important;
  }

  body.dark .surface,
  body.dark .page-hero,
  body.dark .story-card,
  body.dark .mobile-story-card,
  body.dark .scene-nav-card,
  body.dark .beat-row,
  body.dark .review-scene-card,
  body.dark .presentation-summary-card,
  body.dark .presentation-mini-card,
  body.dark .mobile-detail-body .key-value {
    box-shadow: 0 1px 0 rgba(255,255,255,0.035) inset, 0 14px 34px rgba(0,0,0,0.25) !important;
  }
}



/* ============================================================
   v24.7 — Canonical mobile sheet geometry fix
   Fixes the ugly squared/slab-like menu background caused by
   competing sheet rules in the cascade. Re-establish a single,
   floating Apple-style sheet geometry on phone/tablet.
   ============================================================ */

@media (max-width: 1024px) {
  .mobile-action-sheet,
  .mobile-search-sheet,
  .mobile-detail-sheet,
  .app-prompt-sheet,
  .editor-shortcuts-sheet,
  .copilot-overlay {
    overflow: hidden !important;
    isolation: isolate !important;
  }

  /* Action sheet must be a compact floating card above the tab bar,
     not a tall squared slab. */
  .mobile-action-sheet {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    top: auto !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(58vh, 520px) !important;
    padding: 18px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(15,23,42,0.055) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.985), rgba(246,247,250,0.975)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.88) inset,
      0 24px 68px rgba(15,23,42,0.16),
      0 8px 24px rgba(15,23,42,0.08) !important;
    backdrop-filter: saturate(180%) blur(28px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
  }
  body.dark .mobile-action-sheet {
    background: linear-gradient(180deg, rgba(28,28,32,0.975), rgba(18,18,22,0.97)) !important;
    border-color: rgba(255,255,255,0.065) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 28px 72px rgba(0,0,0,0.48),
      0 10px 28px rgba(0,0,0,0.24) !important;
  }

  /* Search/detail/prompt sheets should feel like the same family. */
  .mobile-search-sheet,
  .mobile-detail-sheet,
  .app-prompt-sheet,
  .editor-shortcuts-sheet {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 30px !important;
    border: 1px solid rgba(15,23,42,0.055) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.985), rgba(246,247,250,0.975)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.88) inset,
      0 24px 68px rgba(15,23,42,0.16),
      0 8px 24px rgba(15,23,42,0.08) !important;
    backdrop-filter: saturate(180%) blur(28px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
  }
  body.dark .mobile-search-sheet,
  body.dark .mobile-detail-sheet,
  body.dark .app-prompt-sheet,
  body.dark .editor-shortcuts-sheet {
    background: linear-gradient(180deg, rgba(28,28,32,0.975), rgba(18,18,22,0.97)) !important;
    border-color: rgba(255,255,255,0.065) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 28px 72px rgba(0,0,0,0.48),
      0 10px 28px rgba(0,0,0,0.24) !important;
  }

  .mobile-search-sheet {
    top: calc(var(--topbar-h) + 12px) !important;
    bottom: auto !important;
    max-height: min(calc(100dvh - var(--topbar-h) - 120px), 560px) !important;
  }

  .mobile-detail-sheet,
  .app-prompt-sheet,
  .editor-shortcuts-sheet {
    top: auto !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: min(calc(100dvh - var(--topbar-h) - 120px), 640px) !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-sheet-title,
  .mobile-detail-title {
    position: relative !important;
    z-index: 2 !important;
  }

  .mobile-sheet-handle {
    width: 42px !important;
    height: 5px !important;
    border-radius: 999px !important;
    margin: 0 auto 14px !important;
    background: rgba(60,60,67,0.22) !important;
    box-shadow: none !important;
  }
  body.dark .mobile-sheet-handle {
    background: rgba(255,255,255,0.18) !important;
  }

  /* Remove the hard rectangular feel from the inner button area too. */
  .mobile-sheet-grid,
  .mobile-search-actions,
  .mobile-detail-body {
    position: relative !important;
    z-index: 1 !important;
  }

  .mobile-sheet-grid > .secondary-btn.full-width,
  .mobile-search-actions > .secondary-btn.full-width {
    border-radius: 22px !important;
    border: 1px solid rgba(15,23,42,0.04) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.72)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.82) inset,
      0 10px 24px rgba(15,23,42,0.05) !important;
    min-height: 72px !important;
    font-size: clamp(17px, 2.4vw, 19px) !important;
    font-weight: 640 !important;
    letter-spacing: -0.02em !important;
  }
  body.dark .mobile-sheet-grid > .secondary-btn.full-width,
  body.dark .mobile-search-actions > .secondary-btn.full-width {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05)) !important;
    border-color: rgba(255,255,255,0.05) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 10px 24px rgba(0,0,0,0.22) !important;
  }

  /* Backdrops should read as one calm layer, not as extra box edges. */
  .mobile-sheet-backdrop,
  .mobile-search-backdrop,
  .mobile-detail-backdrop,
  .app-prompt-backdrop,
  .editor-shortcuts-overlay {
    background: rgba(10,12,16,0.18) !important;
    backdrop-filter: blur(10px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
  }
}


/* ============================================================
   v24.8 — Mobile nav drawer refinement
   Make the left rail on phone/tablet portrait feel like a compact,
   floating Apple-style navigation sheet instead of a shoved desktop sidebar.
   ============================================================ */
@media (max-width: 1024px) {
  .mobile-nav-backdrop {
    inset: 0 !important;
    background: rgba(10, 12, 16, 0.18) !important;
    backdrop-filter: blur(10px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
    z-index: 129 !important;
  }

  .left-rail,
  body.mobile-viewport .left-rail {
    left: 12px !important;
    top: calc(var(--topbar-h) + 10px) !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(76vw, 296px) !important;
    max-width: min(76vw, 296px) !important;
    height: auto !important;
    max-height: calc(100dvh - var(--topbar-h) - 106px - env(safe-area-inset-bottom, 0px)) !important;
    padding: 18px 14px 18px !important;
    border: 1px solid rgba(15, 23, 42, 0.055) !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.985), rgba(246,247,250,0.975)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.88) inset,
      0 24px 70px rgba(15,23,42,0.16),
      0 8px 24px rgba(15,23,42,0.08) !important;
    backdrop-filter: saturate(180%) blur(28px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: auto !important;
    z-index: 130 !important;
    transform: translateX(calc(-100% - 22px)) !important;
  }

  body.dark .left-rail,
  body.dark.mobile-viewport .left-rail {
    border-color: rgba(255,255,255,0.065) !important;
    background: linear-gradient(180deg, rgba(28,28,32,0.975), rgba(18,18,22,0.97)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 28px 72px rgba(0,0,0,0.48),
      0 10px 28px rgba(0,0,0,0.24) !important;
  }

  .left-rail.open,
  body.mobile-nav-open .left-rail,
  body.mobile-viewport .left-rail.open,
  body.mobile-nav-open.mobile-viewport .left-rail {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  .left-rail .rail-group + .rail-group {
    margin-top: 24px !important;
  }

  .left-rail .rail-label {
    padding: 0 10px !important;
    margin-bottom: 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    color: rgba(99, 102, 110, 0.88) !important;
  }
  body.dark .left-rail .rail-label {
    color: rgba(255,255,255,0.48) !important;
  }

  .left-rail .nav-item {
    min-height: 58px !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(15,23,42,0.038) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.82) inset,
      0 10px 24px rgba(15,23,42,0.05) !important;
    font-size: 17px !important;
    font-weight: 590 !important;
    letter-spacing: -0.02em !important;
  }

  .left-rail .nav-item.is-active {
    background: linear-gradient(180deg, rgba(15,23,42,0.09), rgba(15,23,42,0.065)) !important;
    color: #16181d !important;
    border-color: rgba(15,23,42,0.03) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.54) inset,
      0 12px 28px rgba(15,23,42,0.08) !important;
  }

  body.dark .left-rail .nav-item {
    border-color: rgba(255,255,255,0.05) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.045)) !important;
    color: rgba(255,255,255,0.88) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 10px 24px rgba(0,0,0,0.22) !important;
  }

  body.dark .left-rail .nav-item.is-active {
    background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08)) !important;
    color: rgba(255,255,255,0.96) !important;
  }

  .left-rail .story-health-stack {
    gap: 12px !important;
  }

  .left-rail .health-mini {
    border-radius: 24px !important;
    border: 1px solid rgba(15,23,42,0.04) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.78)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.84) inset,
      0 12px 28px rgba(15,23,42,0.06) !important;
  }

  body.dark .left-rail .health-mini {
    border-color: rgba(255,255,255,0.05) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.05)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 12px 28px rgba(0,0,0,0.22) !important;
  }
}

@media (max-width: 430px) {
  .left-rail,
  body.mobile-viewport .left-rail {
    width: min(74vw, 286px) !important;
    max-width: min(74vw, 286px) !important;
  }
}


/* ============================================================
   v24.9 — Mobile sheet scrollability fix
   Restores real vertical scrolling for redesigned mobile sheets.
   Fixes quick actions being clipped after the v24.7/v24.8 geometry pass.
   ============================================================ */
@media (max-width: 1024px) {
  .mobile-action-sheet,
  .mobile-search-sheet,
  .mobile-detail-sheet,
  .app-prompt-sheet,
  .editor-shortcuts-sheet {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  .mobile-action-sheet {
    max-height: min(calc(100dvh - var(--topbar-h) - 112px - env(safe-area-inset-bottom, 0px)), 680px) !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-sheet-grid {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-search-sheet {
    max-height: min(calc(100dvh - var(--topbar-h) - 104px - env(safe-area-inset-bottom, 0px)), 640px) !important;
  }

  .mobile-search-body,
  .mobile-detail-body {
    overflow: visible !important;
    max-height: none !important;
  }

  .mobile-detail-sheet {
    max-height: min(calc(100dvh - var(--topbar-h) - 112px - env(safe-area-inset-bottom, 0px)), 700px) !important;
  }

  .app-prompt-sheet,
  .editor-shortcuts-sheet {
    max-height: min(calc(100dvh - var(--topbar-h) - 112px - env(safe-area-inset-bottom, 0px)), 700px) !important;
  }

  /* Keep the drag handle and title visible while long sheets scroll. */
  .mobile-action-sheet .mobile-sheet-handle,
  .mobile-search-sheet .mobile-sheet-handle,
  .mobile-detail-sheet .mobile-sheet-handle {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
  }

  .mobile-action-sheet .mobile-sheet-title,
  .mobile-search-sheet .mobile-detail-head,
  .mobile-detail-sheet .mobile-detail-head {
    position: sticky !important;
    top: 16px !important;
    z-index: 4 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.985), rgba(255,255,255,0.82)) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
    border-radius: 18px !important;
  }

  body.dark .mobile-action-sheet .mobile-sheet-title,
  body.dark .mobile-search-sheet .mobile-detail-head,
  body.dark .mobile-detail-sheet .mobile-detail-head {
    background: linear-gradient(180deg, rgba(28,28,32,0.985), rgba(28,28,32,0.74)) !important;
  }
}

@media (max-width: 430px) {
  .mobile-action-sheet {
    max-height: min(calc(100dvh - var(--topbar-h) - 104px - env(safe-area-inset-bottom, 0px)), 640px) !important;
  }

  .mobile-sheet-grid > .secondary-btn.full-width,
  .mobile-search-actions > .secondary-btn.full-width {
    min-height: 64px !important;
  }
}


/* ============================================================
   v25.0 — Canonical overlay / modal / panel system
   One Apple-grade visual language for all floating and container
   surfaces: sheets, drawers, prompts, Copilot, side panels, editor
   panels, cards, overlays, tab bars, and action surfaces.
   Logic untouched. CSS-only canonical cleanup layer.
   ============================================================ */

:root {
  --sf-canon-radius-xs: 14px;
  --sf-canon-radius-sm: 18px;
  --sf-canon-radius-md: 22px;
  --sf-canon-radius-lg: 28px;
  --sf-canon-radius-xl: 32px;

  --sf-canon-bg-app: #f5f5f7;
  --sf-canon-bg-surface: rgba(255,255,255,0.76);
  --sf-canon-bg-surface-strong: rgba(255,255,255,0.90);
  --sf-canon-bg-control: rgba(255,255,255,0.68);
  --sf-canon-bg-control-strong: rgba(255,255,255,0.86);

  --sf-canon-line: rgba(17,24,39,0.045);
  --sf-canon-line-strong: rgba(17,24,39,0.065);

  --sf-canon-shadow-soft:
    0 1px 0 rgba(255,255,255,0.78) inset,
    0 10px 28px rgba(15,23,42,0.045);

  --sf-canon-shadow-card:
    0 1px 0 rgba(255,255,255,0.82) inset,
    0 16px 44px rgba(15,23,42,0.065),
    0 4px 16px rgba(15,23,42,0.035);

  --sf-canon-shadow-float:
    0 1px 0 rgba(255,255,255,0.86) inset,
    0 28px 76px rgba(15,23,42,0.16),
    0 10px 30px rgba(15,23,42,0.08);

  --sf-canon-blur: saturate(180%) blur(28px);
  --sf-canon-blur-soft: saturate(150%) blur(18px);
}

body.dark {
  --sf-canon-bg-app: #0f1014;
  --sf-canon-bg-surface: rgba(255,255,255,0.052);
  --sf-canon-bg-surface-strong: rgba(255,255,255,0.074);
  --sf-canon-bg-control: rgba(255,255,255,0.054);
  --sf-canon-bg-control-strong: rgba(255,255,255,0.082);

  --sf-canon-line: rgba(255,255,255,0.044);
  --sf-canon-line-strong: rgba(255,255,255,0.066);

  --sf-canon-shadow-soft:
    0 1px 0 rgba(255,255,255,0.035) inset,
    0 12px 30px rgba(0,0,0,0.24);

  --sf-canon-shadow-card:
    0 1px 0 rgba(255,255,255,0.045) inset,
    0 18px 48px rgba(0,0,0,0.30),
    0 4px 16px rgba(0,0,0,0.22);

  --sf-canon-shadow-float:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 30px 84px rgba(0,0,0,0.50),
    0 10px 34px rgba(0,0,0,0.28);
}

/* 1) Backdrops: one calm atmospheric layer */
.mobile-sheet-backdrop,
.mobile-search-backdrop,
.mobile-detail-backdrop,
.mobile-nav-backdrop,
.app-prompt-backdrop,
.editor-shortcuts-overlay,
.copilot-backdrop {
  background: rgba(10,12,16,0.18) !important;
  backdrop-filter: blur(10px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
}

body.dark .mobile-sheet-backdrop,
body.dark .mobile-search-backdrop,
body.dark .mobile-detail-backdrop,
body.dark .mobile-nav-backdrop,
body.dark .app-prompt-backdrop,
body.dark .editor-shortcuts-overlay,
body.dark .copilot-backdrop {
  background: rgba(0,0,0,0.34) !important;
}

/* 2) Floating sheets / overlays / modal surfaces */
.mobile-action-sheet,
.mobile-search-sheet,
.mobile-detail-sheet,
.app-prompt-sheet,
.editor-shortcuts-sheet,
.copilot-overlay {
  border: 1px solid var(--sf-canon-line-strong) !important;
  background: linear-gradient(180deg, var(--sf-canon-bg-surface-strong), var(--sf-canon-bg-surface)) !important;
  box-shadow: var(--sf-canon-shadow-float) !important;
  backdrop-filter: var(--sf-canon-blur) !important;
  -webkit-backdrop-filter: var(--sf-canon-blur) !important;
  color: var(--text) !important;
  isolation: isolate !important;
}

/* Geometry for mobile bottom/floating sheets remains scroll-safe from v24.9. */
@media (max-width: 1024px) {
  .mobile-action-sheet,
  .mobile-search-sheet,
  .mobile-detail-sheet,
  .app-prompt-sheet,
  .editor-shortcuts-sheet {
    border-radius: var(--sf-canon-radius-xl) !important;
  }

  .copilot-overlay {
    border-radius: var(--sf-canon-radius-xl) var(--sf-canon-radius-xl) 0 0 !important;
  }
}

@media (min-width: 1025px) {
  .app-prompt-sheet,
  .editor-shortcuts-sheet {
    border-radius: var(--sf-canon-radius-xl) !important;
  }

  .copilot-overlay {
    border-radius: var(--sf-canon-radius-xl) 0 0 var(--sf-canon-radius-xl) !important;
  }
}

/* 3) Top-level persistent panels */
.topbar,
.left-rail,
.right-panel,
.status-strip,
.mobile-tabbar,
.inline-ai-bar,
.screenplay-toolbar,
.panel-tabs,
.command-bar {
  border-color: var(--sf-canon-line) !important;
  background: linear-gradient(180deg, var(--sf-canon-bg-surface-strong), var(--sf-canon-bg-surface)) !important;
  box-shadow: var(--sf-canon-shadow-soft) !important;
  backdrop-filter: var(--sf-canon-blur-soft) !important;
  -webkit-backdrop-filter: var(--sf-canon-blur-soft) !important;
}

.topbar {
  border-bottom-color: var(--sf-canon-line) !important;
}

.left-rail {
  border-right-color: var(--sf-canon-line) !important;
}

.right-panel {
  border-left-color: var(--sf-canon-line) !important;
}

/* 4) Main container/card surfaces */
.surface,
.page-hero,
.resume-card,
.activity-card,
.inbox-card,
.ai-card,
.story-card,
.mobile-story-card,
.scene-nav-card,
.scene-rail-card,
.scene-card,
.recent-scene-card,
.research-card,
.outline-act,
.outline-beat,
.beat-row,
.beat-card,
.card-column,
.planning-lane,
.planning-card,
.review-scene-card,
.review-card,
.review-feedback-item,
.scene-feedback-item,
.scene-revision-card,
.presentation-summary-card,
.presentation-main-card,
.presentation-scene-card,
.presentation-mini-card,
.presentation-beat-item,
.presentation-scene-item,
.project-card,
.library-card,
.settings-card,
.starter-card,
.copilot-card,
.inspector-card,
.story-bible-inspector,
.editor-panel,
.script-editor-shell,
.scene-editor,
.editor-block,
.screenplay-pane,
.scene-pane,
.inspector-pane,
.comment-thread,
.health-mini,
.mobile-detail-body .key-value,
.mobile-detail-body .scene-link-pill,
.mobile-detail-body .story-link-summary {
  border: 1px solid var(--sf-canon-line) !important;
  background: linear-gradient(180deg, var(--sf-canon-bg-surface-strong), var(--sf-canon-bg-surface)) !important;
  box-shadow: var(--sf-canon-shadow-card) !important;
}

/* Reduce nested surface heaviness so it doesn't become bubble soup. */
.surface .surface,
.page-hero .surface,
.story-card .surface,
.editor-panel .surface,
.script-editor-shell .surface,
.scene-editor .surface,
.story-bible-inspector .surface,
.copilot-card .surface,
.mobile-detail-body .key-value .surface {
  box-shadow: var(--sf-canon-shadow-soft) !important;
}

/* 5) Headers: no harsh dividers; separate by spacing, type, and tone */
.surface-head,
.panel-head,
.card-head,
.editor-head,
.review-head,
.presentation-head,
.planning-lane-head,
.outline-act-head,
.inspector-head,
.story-bible-head,
.mobile-detail-head,
.app-prompt-head,
.copilot-overlay-head,
.editor-shortcuts-head {
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.copilot-overlay-head,
.app-prompt-head,
.mobile-detail-head,
.editor-shortcuts-head {
  padding-bottom: 8px !important;
}

/* Sticky sheet headers keep glass but not hard blocks. */
@media (max-width: 1024px) {
  .mobile-action-sheet .mobile-sheet-title,
  .mobile-search-sheet .mobile-detail-head,
  .mobile-detail-sheet .mobile-detail-head {
    background: linear-gradient(180deg, var(--sf-canon-bg-surface-strong), rgba(255,255,255,0.52)) !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  }

  body.dark .mobile-action-sheet .mobile-sheet-title,
  body.dark .mobile-search-sheet .mobile-detail-head,
  body.dark .mobile-detail-sheet .mobile-detail-head {
    background: linear-gradient(180deg, var(--sf-canon-bg-surface-strong), rgba(24,24,28,0.52)) !important;
  }
}

/* 6) Controls/buttons/tabs: shared soft control material */
.primary-btn,
.secondary-btn,
.ghost-btn,
.icon-btn,
.mobile-action-btn,
.mobile-tab,
.nav-item,
.small-tab,
.project-switcher,
.starter-btn,
.scene-link-pill,
.story-chip,
.pill,
.pill-pill,
.scene-status-pill,
.editor-add-fab-item,
.editor-add-fab,
.copilot-fab,
.mobile-close-btn,
.app-prompt-actions button,
.editor-shortcuts-sheet button,
.overlay-ai-tab {
  border: 1px solid var(--sf-canon-line) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.66) inset,
    0 8px 20px rgba(15,23,42,0.040) !important;
}

.secondary-btn,
.ghost-btn,
.icon-btn,
.mobile-action-btn,
.mobile-tab,
.nav-item,
.small-tab,
.project-switcher,
.starter-btn,
.scene-link-pill,
.story-chip,
.pill,
.pill-pill,
.scene-status-pill,
.editor-add-fab-item,
.mobile-close-btn,
.overlay-ai-tab {
  background: linear-gradient(180deg, var(--sf-canon-bg-control-strong), var(--sf-canon-bg-control)) !important;
}

body.dark .primary-btn,
body.dark .secondary-btn,
body.dark .ghost-btn,
body.dark .icon-btn,
body.dark .mobile-action-btn,
body.dark .mobile-tab,
body.dark .nav-item,
body.dark .small-tab,
body.dark .project-switcher,
body.dark .starter-btn,
body.dark .scene-link-pill,
body.dark .story-chip,
body.dark .pill,
body.dark .pill-pill,
body.dark .scene-status-pill,
body.dark .editor-add-fab-item,
body.dark .editor-add-fab,
body.dark .copilot-fab,
body.dark .mobile-close-btn,
body.dark .app-prompt-actions button,
body.dark .editor-shortcuts-sheet button,
body.dark .overlay-ai-tab {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.035) inset,
    0 9px 22px rgba(0,0,0,0.20) !important;
}

/* Active states are tonal, not border-dependent. */
.nav-item.is-active,
.mobile-tab.is-active,
.small-tab.is-active,
.overlay-ai-tab.is-active,
.panel-tab.is-active {
  border-color: transparent !important;
  background: linear-gradient(180deg, rgba(0,113,227,0.14), rgba(0,113,227,0.09)) !important;
  color: var(--accent) !important;
}

body.dark .nav-item.is-active,
body.dark .mobile-tab.is-active,
body.dark .small-tab.is-active,
body.dark .overlay-ai-tab.is-active,
body.dark .panel-tab.is-active {
  background: linear-gradient(180deg, rgba(41,151,255,0.18), rgba(41,151,255,0.11)) !important;
  color: #8cc9ff !important;
}

/* 7) Inputs/forms: one field language */
input,
textarea,
select,
.app-input,
.app-textarea,
.app-select,
.mobile-search-input,
.prompt-input,
.prompt-textarea,
[contenteditable="true"] {
  border: 1px solid var(--sf-canon-line-strong) !important;
  background: linear-gradient(180deg, var(--sf-canon-bg-control-strong), var(--sf-canon-bg-control)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.58) inset !important;
}

body.dark input,
body.dark textarea,
body.dark select,
body.dark .app-input,
body.dark .app-textarea,
body.dark .app-select,
body.dark .mobile-search-input,
body.dark .prompt-input,
body.dark .prompt-textarea,
body.dark [contenteditable="true"] {
  box-shadow: 0 1px 0 rgba(255,255,255,0.035) inset !important;
}

input:focus,
textarea:focus,
select:focus,
.app-input:focus,
.app-textarea:focus,
.app-select:focus,
.mobile-search-input:focus,
.prompt-input:focus,
.prompt-textarea:focus,
[contenteditable="true"]:focus {
  border-color: rgba(0,113,227,0.26) !important;
  box-shadow:
    0 0 0 4px rgba(0,113,227,0.085),
    0 1px 0 rgba(255,255,255,0.72) inset !important;
}

body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus,
body.dark .app-input:focus,
body.dark .app-textarea:focus,
body.dark .app-select:focus,
body.dark .mobile-search-input:focus,
body.dark .prompt-input:focus,
body.dark .prompt-textarea:focus,
body.dark [contenteditable="true"]:focus {
  border-color: rgba(41,151,255,0.28) !important;
  box-shadow:
    0 0 0 4px rgba(41,151,255,0.12),
    0 1px 0 rgba(255,255,255,0.035) inset !important;
}

/* 8) Remove legacy divider feel */
.divider,
.rule,
.separator,
[class*="divider"],
[class*="separator"] {
  border-color: transparent !important;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,0.055), transparent) !important;
  opacity: 0.48 !important;
}

body.dark .divider,
body.dark .rule,
body.dark .separator,
body.dark [class*="divider"],
body.dark [class*="separator"] {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent) !important;
}

/* 9) Floating action buttons and add menus */
.editor-add-fab,
.copilot-fab {
  background: linear-gradient(180deg, var(--sf-canon-bg-surface-strong), var(--sf-canon-bg-surface)) !important;
  border: 1px solid var(--sf-canon-line-strong) !important;
  box-shadow: var(--sf-canon-shadow-float) !important;
  backdrop-filter: var(--sf-canon-blur-soft) !important;
  -webkit-backdrop-filter: var(--sf-canon-blur-soft) !important;
}

.editor-add-fab-menu {
  border: 1px solid var(--sf-canon-line-strong) !important;
  background: linear-gradient(180deg, var(--sf-canon-bg-surface-strong), var(--sf-canon-bg-surface)) !important;
  box-shadow: var(--sf-canon-shadow-float) !important;
  border-radius: var(--sf-canon-radius-lg) !important;
  backdrop-filter: var(--sf-canon-blur-soft) !important;
  -webkit-backdrop-filter: var(--sf-canon-blur-soft) !important;
}

/* 10) Toast: system notification material */
.toast {
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(28,28,30,0.94) !important;
  color: rgba(245,245,247,0.96) !important;
  box-shadow: var(--sf-canon-shadow-float) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}

/* 11) Mobile-specific final harmonization */
@media (max-width: 1024px) {
  .topbar {
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,248,250,0.82)) !important;
    border-bottom: 0 !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.78) inset,
      0 10px 34px rgba(15,23,42,0.07) !important;
  }

  body.dark .topbar {
    background: linear-gradient(180deg, rgba(22,22,26,0.92), rgba(14,14,18,0.84)) !important;
  }

  .mobile-tabbar {
    border-radius: var(--sf-canon-radius-xl) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(247,248,250,0.82)) !important;
    border-color: var(--sf-canon-line) !important;
    box-shadow: var(--sf-canon-shadow-float) !important;
  }

  body.dark .mobile-tabbar {
    background: linear-gradient(180deg, rgba(28,28,32,0.88), rgba(18,18,22,0.84)) !important;
  }

  .left-rail {
    border-radius: var(--sf-canon-radius-xl) !important;
  }

  .workspace {
    background: transparent !important;
  }
}

/* 12) Accessibility/performance: avoid transitions on layout-heavy surfaces */
@media (prefers-reduced-motion: reduce) {
  .mobile-action-sheet,
  .mobile-search-sheet,
  .mobile-detail-sheet,
  .app-prompt-sheet,
  .editor-shortcuts-sheet,
  .copilot-overlay,
  .left-rail,
  .mobile-tabbar,
  .topbar {
    transition: none !important;
  }
}


/* ============================================================
   v25.1 — Mobile scroll/tap guard visual/behavior support
   While a sheet/drawer is scrolling, descendants must not steal taps.
   ============================================================ */
@media (pointer: coarse) {
  .mobile-action-sheet.is-touch-scrolling button,
  .mobile-search-sheet.is-touch-scrolling button,
  .mobile-detail-sheet.is-touch-scrolling button,
  .app-prompt-sheet.is-touch-scrolling button,
  .editor-shortcuts-sheet.is-touch-scrolling button,
  .left-rail.is-touch-scrolling button,
  .copilot-overlay.is-touch-scrolling button,
  .mobile-action-sheet.is-touch-scrolling a,
  .mobile-search-sheet.is-touch-scrolling a,
  .mobile-detail-sheet.is-touch-scrolling a,
  .app-prompt-sheet.is-touch-scrolling a,
  .editor-shortcuts-sheet.is-touch-scrolling a,
  .left-rail.is-touch-scrolling a,
  .copilot-overlay.is-touch-scrolling a {
    pointer-events: none !important;
  }

  .mobile-action-sheet,
  .mobile-search-sheet,
  .mobile-detail-sheet,
  .app-prompt-sheet,
  .editor-shortcuts-sheet,
  .left-rail,
  .copilot-overlay {
    touch-action: pan-y !important;
  }

  .mobile-action-sheet button,
  .mobile-search-sheet button,
  .mobile-detail-sheet button,
  .app-prompt-sheet button,
  .editor-shortcuts-sheet button,
  .left-rail button,
  .copilot-overlay button {
    touch-action: manipulation !important;
  }
}


/* ============================================================
   v25.2 — Natural mobile app drawer
   Replaces the over-designed floating nav card with a drawer that
   feels native to the app: edge-attached on phones, graceful on iPad,
   scroll-safe, and visually aligned with the canonical material system.
   ============================================================ */

/* Phone: drawer should feel like a real app drawer, not a detached slab/card. */
@media (max-width: 767px) {
  .mobile-nav-backdrop {
    inset: var(--topbar-h) 0 0 0 !important;
    z-index: 129 !important;
    background: rgba(10, 12, 16, 0.16) !important;
    backdrop-filter: blur(8px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
  }

  .left-rail,
  body.mobile-viewport .left-rail {
    position: fixed !important;
    left: 0 !important;
    top: var(--topbar-h) !important;
    bottom: 0 !important;
    width: min(82vw, 328px) !important;
    max-width: min(82vw, 328px) !important;
    height: calc(100dvh - var(--topbar-h)) !important;
    max-height: calc(100dvh - var(--topbar-h)) !important;
    padding: 22px 16px calc(108px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-right: 1px solid rgba(15, 23, 42, 0.045) !important;
    border-radius: 0 30px 30px 0 !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.975), rgba(246,247,250,0.965)) !important;
    box-shadow:
      1px 0 0 rgba(255,255,255,0.72) inset,
      22px 0 64px rgba(15,23,42,0.18),
      8px 0 28px rgba(15,23,42,0.08) !important;
    backdrop-filter: saturate(180%) blur(26px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(26px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: auto !important;
    z-index: 130 !important;
    transform: translateX(-102%) !important;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform !important;
  }

  body.dark .left-rail,
  body.dark.mobile-viewport .left-rail {
    border-right-color: rgba(255,255,255,0.055) !important;
    background:
      linear-gradient(180deg, rgba(28,28,32,0.975), rgba(17,17,21,0.965)) !important;
    box-shadow:
      1px 0 0 rgba(255,255,255,0.035) inset,
      24px 0 72px rgba(0,0,0,0.50),
      8px 0 28px rgba(0,0,0,0.28) !important;
  }

  .left-rail.open,
  body.mobile-nav-open .left-rail,
  body.mobile-viewport .left-rail.open,
  body.mobile-nav-open.mobile-viewport .left-rail {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  .left-rail .rail-group + .rail-group {
    margin-top: 28px !important;
  }

  .left-rail .rail-label {
    padding: 0 10px !important;
    margin: 0 0 10px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 720 !important;
    letter-spacing: 0.18em !important;
    color: rgba(99,102,110,0.78) !important;
  }

  body.dark .left-rail .rail-label {
    color: rgba(255,255,255,0.45) !important;
  }

  .left-rail .nav-item {
    min-height: 52px !important;
    width: 100% !important;
    padding: 13px 14px !important;
    margin: 0 0 7px !important;
    border-radius: 18px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(31,41,55,0.78) !important;
    font-size: 16px !important;
    font-weight: 570 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .left-rail .nav-item:hover {
    background: rgba(15,23,42,0.045) !important;
    color: rgba(17,24,39,0.92) !important;
  }

  .left-rail .nav-item.is-active {
    background: rgba(15,23,42,0.075) !important;
    color: rgba(17,24,39,0.96) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.54) inset,
      0 10px 26px rgba(15,23,42,0.06) !important;
    font-weight: 690 !important;
  }

  body.dark .left-rail .nav-item {
    color: rgba(255,255,255,0.72) !important;
  }

  body.dark .left-rail .nav-item:hover {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.92) !important;
  }

  body.dark .left-rail .nav-item.is-active {
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.96) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.035) inset,
      0 10px 26px rgba(0,0,0,0.22) !important;
  }

  .left-rail .story-health-stack {
    gap: 12px !important;
  }

  .left-rail .health-mini {
    border-radius: 22px !important;
    border: 0 !important;
    background: rgba(255,255,255,0.78) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.76) inset,
      0 10px 28px rgba(15,23,42,0.055) !important;
  }

  body.dark .left-rail .health-mini {
    background: rgba(255,255,255,0.065) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.035) inset,
      0 10px 28px rgba(0,0,0,0.24) !important;
  }
}

/* Small phones: a little narrower so it does not dominate the screen. */
@media (max-width: 430px) {
  .left-rail,
  body.mobile-viewport .left-rail {
    width: min(78vw, 304px) !important;
    max-width: min(78vw, 304px) !important;
  }
}

/* iPad / tablet: keep it app-like, but a bit more spacious and less phone-like. */
@media (min-width: 768px) and (max-width: 1024px) {
  .mobile-nav-backdrop {
    inset: var(--topbar-h) 0 0 0 !important;
    z-index: 129 !important;
    background: rgba(10, 12, 16, 0.14) !important;
    backdrop-filter: blur(8px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
  }

  .left-rail,
  body.mobile-viewport .left-rail,
  body.tablet-portrait .left-rail,
  body.tablet-landscape .left-rail {
    position: fixed !important;
    left: 16px !important;
    top: calc(var(--topbar-h) + 14px) !important;
    bottom: 18px !important;
    width: 320px !important;
    max-width: 320px !important;
    height: auto !important;
    max-height: calc(100dvh - var(--topbar-h) - 32px) !important;
    padding: 20px 16px 22px !important;
    border: 1px solid rgba(15,23,42,0.055) !important;
    border-radius: 32px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.975), rgba(246,247,250,0.965)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.82) inset,
      0 26px 76px rgba(15,23,42,0.15),
      0 10px 30px rgba(15,23,42,0.075) !important;
    backdrop-filter: saturate(180%) blur(28px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 130 !important;
    transform: translateX(calc(-100% - 32px)) !important;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  body.dark .left-rail,
  body.dark.mobile-viewport .left-rail,
  body.dark.tablet-portrait .left-rail,
  body.dark.tablet-landscape .left-rail {
    border-color: rgba(255,255,255,0.06) !important;
    background:
      linear-gradient(180deg, rgba(28,28,32,0.975), rgba(17,17,21,0.965)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 28px 82px rgba(0,0,0,0.46),
      0 10px 30px rgba(0,0,0,0.25) !important;
  }

  .left-rail.open,
  body.mobile-nav-open .left-rail,
  body.mobile-viewport .left-rail.open,
  body.tablet-portrait .left-rail.open,
  body.tablet-landscape .left-rail.open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  .left-rail .nav-item {
    min-height: 50px !important;
    padding: 12px 14px !important;
    border-radius: 17px !important;
    font-size: 15px !important;
  }
}

/* Restore normal desktop rail behavior above tablet/mobile breakpoints. */
@media (min-width: 1025px) {
  .left-rail {
    left: auto !important;
    top: 0 !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    height: calc(var(--viewport-h) - var(--topbar-h) - var(--status-h)) !important;
    max-height: calc(var(--viewport-h) - var(--topbar-h) - var(--status-h)) !important;
    border-radius: 0 !important;
    transform: none !important;
  }
}


/* ============================================================
   v25.3 — HARD mobile scroll/click suppression support
   Keeps menu actions inert during and just after touch scrolling.
   ============================================================ */
.mobile-action-sheet.is-touch-scrolling button,
.mobile-search-sheet.is-touch-scrolling button,
.mobile-detail-sheet.is-touch-scrolling button,
.app-prompt-sheet.is-touch-scrolling button,
.editor-shortcuts-sheet.is-touch-scrolling button,
.left-rail.is-touch-scrolling button,
.copilot-overlay.is-touch-scrolling button,
.mobile-action-sheet.is-touch-scrolling a,
.mobile-search-sheet.is-touch-scrolling a,
.mobile-detail-sheet.is-touch-scrolling a,
.app-prompt-sheet.is-touch-scrolling a,
.editor-shortcuts-sheet.is-touch-scrolling a,
.left-rail.is-touch-scrolling a,
.copilot-overlay.is-touch-scrolling a,
.mobile-action-sheet.is-touch-scrolling [role="button"],
.mobile-search-sheet.is-touch-scrolling [role="button"],
.mobile-detail-sheet.is-touch-scrolling [role="button"],
.app-prompt-sheet.is-touch-scrolling [role="button"],
.editor-shortcuts-sheet.is-touch-scrolling [role="button"],
.left-rail.is-touch-scrolling [role="button"],
.copilot-overlay.is-touch-scrolling [role="button"] {
  pointer-events: none !important;
}

.mobile-action-sheet,
.mobile-search-sheet,
.mobile-detail-sheet,
.app-prompt-sheet,
.editor-shortcuts-sheet,
.left-rail,
.copilot-overlay {
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.mobile-action-sheet button,
.mobile-search-sheet button,
.mobile-detail-sheet button,
.app-prompt-sheet button,
.editor-shortcuts-sheet button,
.left-rail button,
.copilot-overlay button {
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}


/* ============================================================
   v25.4 — Apple-level typography normalization
   A calmer, lighter, more modern type system across the app.
   Reduces heavy/bloated weights without flattening hierarchy.
   Logic untouched. CSS-only typography pass.
   ============================================================ */

:root {
  --sf-font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sf-font-mono: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --sf-weight-regular: 400;
  --sf-weight-text: 450;
  --sf-weight-medium: 520;
  --sf-weight-semibold: 590;
  --sf-weight-title: 640;
  --sf-weight-strong: 680;

  --sf-track-tight: -0.035em;
  --sf-track-title: -0.045em;
  --sf-track-body: -0.012em;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--sf-font-system) !important;
  font-synthesis-weight: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

body {
  font-weight: var(--sf-weight-text) !important;
  letter-spacing: var(--sf-track-body) !important;
}

/* Large titles: still confident, no longer brutal. */
h1,
.page-hero h1,
.resume-card h2,
.presentation-title,
.project-title,
.brand-name,
.story-title,
.mobile-story-title,
.scene-title,
.editor-title,
.review-title {
  font-weight: var(--sf-weight-title) !important;
  letter-spacing: var(--sf-track-title) !important;
  line-height: 0.98 !important;
}

/* Section titles and panel headings. */
h2,
h3,
.surface-title,
.panel-title,
.card-title,
.editor-scene-title,
.scene-heading,
.outline-act-title,
.planning-title,
.review-scene-title,
.presentation-scene-title,
.inspector-title,
.story-bible-title,
.mobile-detail-title,
.mobile-sheet-title,
.app-prompt-title,
.copilot-title,
.rail-label,
.eyebrow {
  font-weight: var(--sf-weight-semibold) !important;
  letter-spacing: 0.10em !important;
}

/* Body text and supporting copy. */
p,
.surface-sub,
.card-sub,
.scene-summary,
.scene-description,
.beat-summary,
.review-copy,
.presentation-copy,
.activity-copy,
.inspector-copy,
.story-bible-copy,
.key-value-value,
.mobile-detail-body,
.app-prompt-message,
.copilot-copy,
.status-strip {
  font-weight: var(--sf-weight-text) !important;
  letter-spacing: var(--sf-track-body) !important;
  line-height: 1.55 !important;
}

/* Buttons/nav/tabs: less chunky, more refined. */
button,
.primary-btn,
.secondary-btn,
.ghost-btn,
.icon-btn,
.mobile-action-btn,
.mobile-tab,
.nav-item,
.small-tab,
.project-switcher,
.starter-btn,
.scene-link-pill,
.story-chip,
.pill,
.pill-pill,
.scene-status-pill,
.editor-add-fab-item,
.mobile-close-btn,
.app-prompt-actions button,
.editor-shortcuts-sheet button,
.overlay-ai-tab,
.mobile-sheet-grid > .secondary-btn.full-width,
.mobile-search-actions > .secondary-btn.full-width {
  font-weight: var(--sf-weight-medium) !important;
  letter-spacing: -0.018em !important;
}

/* Active controls can be slightly stronger, but not black-marker bold. */
.nav-item.is-active,
.mobile-tab.is-active,
.small-tab.is-active,
.overlay-ai-tab.is-active,
.panel-tab.is-active,
.primary-btn {
  font-weight: var(--sf-weight-semibold) !important;
}

/* Quick action menu specifically: reduce the huge/bold look. */
.mobile-sheet-grid > .secondary-btn.full-width,
.mobile-search-actions > .secondary-btn.full-width {
  font-size: clamp(16px, 2.25vw, 18px) !important;
  font-weight: var(--sf-weight-semibold) !important;
  letter-spacing: -0.026em !important;
}

/* Topbar and project switcher: Apple-style compact clarity. */
.topbar,
.project-switcher,
.brand-name,
.mobile-action-btn {
  letter-spacing: -0.025em !important;
}

.project-switcher {
  font-weight: var(--sf-weight-semibold) !important;
}

/* Rail/drawer typography: natural app-menu weight. */
.left-rail .nav-item {
  font-weight: var(--sf-weight-medium) !important;
  letter-spacing: -0.024em !important;
}
.left-rail .nav-item.is-active {
  font-weight: var(--sf-weight-semibold) !important;
}
.left-rail .rail-label {
  font-weight: var(--sf-weight-semibold) !important;
  letter-spacing: 0.16em !important;
}

/* Labels: still structured, but less loud. */
.key-value-key,
.field-label,
.meta-label,
.form-label,
.mobile-detail-body .key-value-key,
.inspector-label,
.story-bible-label,
.card-label,
.scene-label {
  font-weight: var(--sf-weight-semibold) !important;
  letter-spacing: 0.085em !important;
}

/* Script/editor text should remain readable and cinematic. */
.screenplay-canvas,
.screenplay-action,
.screenplay-dialogue,
.screenplay-character,
.screenplay-parenthetical,
.screenplay-transition,
.editor-block,
.scene-editor textarea {
  letter-spacing: 0 !important;
}

.screenplay-action,
.screenplay-dialogue,
.scene-editor textarea {
  font-weight: var(--sf-weight-regular) !important;
  line-height: 1.62 !important;
}

.screenplay-character,
.screenplay-transition,
.scene-heading {
  font-weight: var(--sf-weight-semibold) !important;
}

/* Numeric/stat typography: readable, not over-heavy. */
.stat-value,
.health-value,
.metric-value,
.count-value,
.presentation-stat-value {
  font-weight: var(--sf-weight-title) !important;
  letter-spacing: -0.04em !important;
}

/* Inputs: modern SF Pro feel. */
input,
textarea,
select,
.app-input,
.app-textarea,
.app-select,
.mobile-search-input,
.prompt-input,
.prompt-textarea,
[contenteditable="true"] {
  font-weight: var(--sf-weight-text) !important;
  letter-spacing: -0.014em !important;
}

/* Mobile-specific: avoid oversized heavy UI text. */
@media (max-width: 767px) {
  .page-hero h1 {
    font-size: clamp(32px, 9vw, 44px) !important;
    font-weight: var(--sf-weight-title) !important;
    letter-spacing: -0.052em !important;
    line-height: 0.98 !important;
  }

  .page-hero p {
    font-size: clamp(17px, 4.7vw, 20px) !important;
    font-weight: var(--sf-weight-text) !important;
    letter-spacing: -0.026em !important;
    line-height: 1.42 !important;
  }

  .mobile-sheet-title,
  .mobile-detail-title,
  .rail-label,
  .eyebrow {
    font-size: 11px !important;
    font-weight: var(--sf-weight-semibold) !important;
    letter-spacing: 0.155em !important;
  }

  .mobile-sheet-grid > .secondary-btn.full-width,
  .mobile-search-actions > .secondary-btn.full-width {
    font-size: clamp(17px, 5.1vw, 20px) !important;
    font-weight: var(--sf-weight-semibold) !important;
    letter-spacing: -0.035em !important;
  }

  .left-rail .nav-item {
    font-size: clamp(15px, 4.2vw, 17px) !important;
    font-weight: var(--sf-weight-medium) !important;
  }

  .left-rail .nav-item.is-active {
    font-weight: var(--sf-weight-semibold) !important;
  }

  .mobile-tab {
    font-weight: var(--sf-weight-medium) !important;
    letter-spacing: -0.02em !important;
  }

  .mobile-tab.is-active {
    font-weight: var(--sf-weight-semibold) !important;
  }
}

/* Tablet/iPad: slightly calmer than phone, more spacious. */
@media (min-width: 768px) and (max-width: 1024px) {
  .page-hero h1 {
    font-weight: var(--sf-weight-title) !important;
    letter-spacing: -0.048em !important;
  }

  .left-rail .nav-item,
  .mobile-sheet-grid > .secondary-btn.full-width,
  .mobile-search-actions > .secondary-btn.full-width {
    font-weight: var(--sf-weight-medium) !important;
  }

  .left-rail .nav-item.is-active,
  .mobile-tab.is-active,
  .primary-btn {
    font-weight: var(--sf-weight-semibold) !important;
  }
}

/* Desktop: refine hierarchy without making it weak. */
@media (min-width: 1025px) {
  .page-hero h1 {
    font-weight: var(--sf-weight-title) !important;
    letter-spacing: -0.052em !important;
  }

  .surface-title,
  .panel-title,
  .card-title {
    font-weight: var(--sf-weight-semibold) !important;
    letter-spacing: -0.028em !important;
  }

  .nav-item,
  .secondary-btn,
  .ghost-btn,
  .small-tab,
  .project-switcher {
    font-weight: var(--sf-weight-medium) !important;
  }
}

/* Avoid accidental ultra-bold from older patch layers. */
strong,
b {
  font-weight: var(--sf-weight-semibold) !important;
}



/* ============================================================
   v25.5 — Editor + FAB menu visibility hard fix
   The add-block FAB menu must be fully hidden/inert until the
   plus button explicitly opens it. Prevents ghost option buttons
   leaking over the screenplay/editor panel on mobile.
   ============================================================ */

/* Closed state: absolutely no visible/clickable option menu. */
.editor-add-fab-shell:not(.is-open) .editor-add-fab-menu,
body:not(.editor-add-open) .editor-add-fab-menu,
.editor-add-fab-shell[aria-hidden="true"] .editor-add-fab-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(14px) scale(0.96) !important;
  filter: blur(2px) !important;
}

/* Closed state: individual items must also be inert in case older CSS
   tries to animate them independently. */
.editor-add-fab-shell:not(.is-open) .editor-add-fab-item,
body:not(.editor-add-open) .editor-add-fab-item,
.editor-add-fab-shell[aria-hidden="true"] .editor-add-fab-item {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
}

/* Open state: show only when the shell or body explicitly says open. */
.editor-add-fab-shell.is-open .editor-add-fab-menu,
body.editor-add-open .editor-add-fab-shell .editor-add-fab-menu,
.editor-add-fab-shell[aria-hidden="false"] .editor-add-fab-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
  filter: none !important;
}

/* Open state: restore item visibility with subtle stagger support. */
.editor-add-fab-shell.is-open .editor-add-fab-item,
body.editor-add-open .editor-add-fab-shell .editor-add-fab-item,
.editor-add-fab-shell[aria-hidden="false"] .editor-add-fab-item {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Keep the FAB stack above editor content but below modal sheets. */
.editor-add-fab-shell {
  z-index: 120 !important;
}

/* Mobile positioning: keep it clear of bottom tabbar and away from
   the screenplay form area. */
@media (max-width: 1024px) {
  .editor-add-fab-shell {
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right, 0px) + 18px) !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 120 !important;
  }

  .editor-add-fab-menu {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(64px + 12px) !important;
    width: min(260px, calc(100vw - 36px)) !important;
    max-height: min(48vh, 360px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
    border-radius: 26px !important;
  }

  .editor-add-fab-item {
    min-height: 48px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
}

/* Desktop/tablet landscape: preserve existing feel, but prevent leaks. */
@media (min-width: 1025px) {
  .editor-add-fab-menu {
    max-height: min(52vh, 420px) !important;
    overflow-y: auto !important;
  }
}


/* ============================================================
   v25.6 — Restore correct editor FAB behavior
   Roll back the broken slab-style FAB menu behavior introduced by
   v25.5. The add-block choices must be CLOSED by default and open
   only as the slim vertical pill stack beside the + button.
   ============================================================ */

/* Never allow the menu panel/slab to appear by default. */
.editor-add-fab-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Closed state: all pills hidden and inert. */
.editor-add-fab-shell:not(.is-open) .editor-add-fab-item,
body:not(.editor-add-open) .editor-add-fab-shell:not(.is-open) .editor-add-fab-item,
.editor-add-fab-shell[aria-hidden="true"] .editor-add-fab-item {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(12px) scale(0.96) !important;
}

/* Open state: only when shell/body explicitly open. */
.editor-add-fab-shell.is-open .editor-add-fab-menu,
body.editor-add-open .editor-add-fab-shell.is-open .editor-add-fab-menu,
.editor-add-fab-shell[aria-hidden="false"].is-open .editor-add-fab-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important; /* container inert; pills receive events */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Open state pills: vertical stack, matching the old correct screenshot. */
.editor-add-fab-shell.is-open .editor-add-fab-item,
body.editor-add-open .editor-add-fab-shell.is-open .editor-add-fab-item,
.editor-add-fab-shell[aria-hidden="false"].is-open .editor-add-fab-item {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* Phone/tablet geometry: compact vertical pill stack beside the FAB. */
@media (max-width: 1024px) {
  .editor-add-fab-shell {
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right, 0px) + 18px) !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 120 !important;
  }

  .editor-add-fab-menu {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(64px + 12px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px !important;
  }

  .editor-add-fab-item {
    width: auto !important;
    min-width: 168px !important;
    max-width: min(74vw, 260px) !important;
    min-height: 52px !important;
    padding: 13px 20px !important;
    border-radius: 999px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid rgba(15,23,42,0.055) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.82) inset,
      0 12px 30px rgba(15,23,42,0.13) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  }

  body.dark .editor-add-fab-item {
    background: rgba(28,28,32,0.94) !important;
    border-color: rgba(255,255,255,0.07) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 12px 30px rgba(0,0,0,0.32) !important;
  }

  .editor-add-fab-shell.is-open .editor-add-fab-item {
    transition:
      opacity 160ms ease,
      transform 200ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .editor-add-fab-shell.is-open .editor-add-fab-item:nth-child(1) { transition-delay: 0ms !important; }
  .editor-add-fab-shell.is-open .editor-add-fab-item:nth-child(2) { transition-delay: 18ms !important; }
  .editor-add-fab-shell.is-open .editor-add-fab-item:nth-child(3) { transition-delay: 36ms !important; }
  .editor-add-fab-shell.is-open .editor-add-fab-item:nth-child(4) { transition-delay: 54ms !important; }
  .editor-add-fab-shell.is-open .editor-add-fab-item:nth-child(5) { transition-delay: 72ms !important; }
  .editor-add-fab-shell.is-open .editor-add-fab-item:nth-child(6) { transition-delay: 90ms !important; }
}

/* Desktop: keep menu compact and invisible unless explicitly open. */
@media (min-width: 1025px) {
  .editor-add-fab-menu {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(64px + 12px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 10px !important;
  }

  .editor-add-fab-item {
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
}


/* ============================================================
   v25.7 — FAB click/tap reliability support
   Ensure the + button itself always receives taps and the menu only
   appears when explicitly open.
   ============================================================ */
.editor-add-fab,
#editorAddFab {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  z-index: 3 !important;
}

.editor-add-fab-shell {
  pointer-events: none !important;
}

.editor-add-fab-shell #editorAddFab,
.editor-add-fab-shell .editor-add-fab {
  pointer-events: auto !important;
}

.editor-add-fab-shell.is-open .editor-add-fab-menu {
  pointer-events: none !important;
}

.editor-add-fab-shell.is-open .editor-add-fab-item {
  pointer-events: auto !important;
}

.editor-add-fab-shell:not(.is-open) .editor-add-fab-menu,
.editor-add-fab-shell[aria-hidden="true"] .editor-add-fab-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.editor-add-fab-shell.is-open .editor-add-fab-menu,
.editor-add-fab-shell[aria-hidden="false"].is-open .editor-add-fab-menu {
  opacity: 1 !important;
  visibility: visible !important;
}


/* ============================================================
   v25.8 — FAB actual selector root fix
   Root cause: actual toggle button is #editorAddFabBtn /
   .editor-add-fab-toggle, but v25.6/v25.7 patches targeted the
   non-existent #editorAddFab / .editor-add-fab. This blocked taps
   and also made aria-hidden=false behave as "menu open".
   Correct model:
   - shell visible in editor view
   - menu visible ONLY when body has .editor-add-fab-open
   - toggle button always receives pointer/touch events
   ============================================================ */

/* The shell should allow its real toggle button to receive taps. */
.editor-add-fab-shell {
  pointer-events: none !important;
}

#editorAddFabBtn,
.editor-add-fab-toggle,
.editor-add-fab-shell .editor-add-fab-toggle {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
  z-index: 4 !important;
}

/* The menu container itself is layout only; the pills receive events. */
.editor-add-fab-menu,
#editorAddFabMenu {
  pointer-events: none !important;
}

/* CLOSED means: no body.editor-add-fab-open. Do not use shell aria-hidden=false
   as open, because original code sets shell aria-hidden=false simply when
   the FAB exists in editor view. */
body:not(.editor-add-fab-open) #editorAddFabMenu,
body:not(.editor-add-fab-open) .editor-add-fab-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateY(10px) scale(0.98) !important;
}

/* Closed pills inert. */
body:not(.editor-add-fab-open) #editorAddFabMenu .editor-add-fab-item,
body:not(.editor-add-fab-open) .editor-add-fab-menu .editor-add-fab-item {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) scale(0.96) !important;
}

/* OPEN means body.editor-add-fab-open only. */
body.editor-add-fab-open #editorAddFabMenu,
body.editor-add-fab-open .editor-add-fab-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}

body.editor-add-fab-open #editorAddFabMenu .editor-add-fab-item,
body.editor-add-fab-open .editor-add-fab-menu .editor-add-fab-item {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* Compact pill stack exactly like the earlier working version. */
@media (max-width: 1024px) {
  .editor-add-fab-shell {
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right, 0px) + 18px) !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 120 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #editorAddFabMenu,
  .editor-add-fab-menu {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(64px + 12px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px !important;
  }

  .editor-add-fab-item {
    width: auto !important;
    min-width: 168px !important;
    max-width: min(74vw, 260px) !important;
    min-height: 52px !important;
    padding: 13px 20px !important;
    border-radius: 999px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid rgba(15,23,42,0.055) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.82) inset,
      0 12px 30px rgba(15,23,42,0.13) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  }

  body.dark .editor-add-fab-item {
    background: rgba(28,28,32,0.94) !important;
    border-color: rgba(255,255,255,0.07) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 12px 30px rgba(0,0,0,0.32) !important;
  }
}

/* Safety: older .is-open-only rules must not matter anymore. */
.editor-add-fab-shell.is-open:not([data-force-open]) #editorAddFabMenu,
.editor-add-fab-shell.is-open:not([data-force-open]) .editor-add-fab-menu {
  /* no-op marker rule, later body rules above are authoritative */
}


/* ============================================================
   v25.9 — Top cards / page hero consistency fix
   Fixes broken first-card geometry where page heroes looked cut,
   square, under-spaced, or inconsistent across dashboard/presentation/
   project/editor/review pages.
   ============================================================ */

/* Every view should start with real breathing room below the sticky topbar. */
.workspace {
  padding-top: max(22px, var(--page-pad, 20px)) !important;
}

/* Canonical top card surface. */
.view > .page-hero:first-child,
.view > .surface:first-child,
#view-dashboard > .page-hero,
#view-project > .page-hero,
#view-editor > .page-hero,
#view-outline > .page-hero,
#view-corkboard > .page-hero,
#view-review > .page-hero,
#view-story-bible > .page-hero,
#view-presentation > .page-hero,
#view-settings > .page-hero {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 24px !important;
  padding: clamp(24px, 4vw, 40px) !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 34px) !important;
  border: 1px solid rgba(17, 24, 39, 0.045) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(247,248,251,0.86)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.86) inset,
    0 18px 46px rgba(15,23,42,0.065),
    0 5px 16px rgba(15,23,42,0.035) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
  transform: none !important;
}

body.dark .view > .page-hero:first-child,
body.dark .view > .surface:first-child,
body.dark #view-dashboard > .page-hero,
body.dark #view-project > .page-hero,
body.dark #view-editor > .page-hero,
body.dark #view-outline > .page-hero,
body.dark #view-corkboard > .page-hero,
body.dark #view-review > .page-hero,
body.dark #view-story-bible > .page-hero,
body.dark #view-presentation > .page-hero,
body.dark #view-settings > .page-hero {
  border-color: rgba(255,255,255,0.055) !important;
  background:
    linear-gradient(180deg, rgba(28,28,32,0.88), rgba(18,18,22,0.78)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 52px rgba(0,0,0,0.34),
    0 5px 18px rgba(0,0,0,0.22) !important;
}

/* Remove accidental inner rectangular slabs/shadows from hero actions. */
.page-hero::before,
.page-hero::after {
  pointer-events: none !important;
}

/* Hero layout should be card-contained, not bleeding into the page. */
.page-hero {
  align-items: stretch !important;
  gap: clamp(18px, 3vw, 28px) !important;
}

.page-hero > * {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
}

/* Action groups inside top cards should not create a square sub-panel. */
.page-hero .hero-actions,
#view-dashboard .page-hero .hero-actions,
#view-presentation .page-hero .hero-actions {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Keep all top-card buttons visually consistent and inside bounds. */
.page-hero .hero-actions .primary-btn,
.page-hero .hero-actions .secondary-btn {
  border-radius: 999px !important;
  min-height: 48px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.76) inset,
    0 10px 24px rgba(15,23,42,0.045) !important;
}

/* Presentation mode previously had a top area that felt like an open slab.
   Make it a real first card while preserving its button layout. */
#view-presentation .page-hero {
  display: flex !important;
  flex-direction: column !important;
}

#view-presentation .page-hero .hero-actions {
  width: 100% !important;
}

/* Dashboard top hero: avoid cropped/sharp edges when text wraps. */
#view-dashboard .page-hero {
  display: flex !important;
  flex-direction: column !important;
}

/* Mobile-specific: top cards must never touch screen edges or look cut off. */
@media (max-width: 767px) {
  .workspace {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 22px !important;
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .view > .page-hero:first-child,
  .view > .surface:first-child,
  #view-dashboard > .page-hero,
  #view-project > .page-hero,
  #view-editor > .page-hero,
  #view-outline > .page-hero,
  #view-corkboard > .page-hero,
  #view-review > .page-hero,
  #view-story-bible > .page-hero,
  #view-presentation > .page-hero,
  #view-settings > .page-hero {
    margin: 0 0 22px !important;
    padding: 24px 22px !important;
    border-radius: 30px !important;
    clip-path: inset(0 round 30px) !important;
  }

  .page-hero h1 {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .page-hero p {
    max-width: 100% !important;
  }

  .page-hero .hero-actions,
  #view-dashboard .page-hero .hero-actions,
  #view-presentation .page-hero .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #view-presentation .page-hero .hero-actions {
    grid-template-columns: 1fr !important;
  }

  .page-hero .hero-actions .primary-btn,
  .page-hero .hero-actions .secondary-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 13px 14px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
}

/* Small phones: if two-column hero buttons become cramped, keep them clean. */
@media (max-width: 380px) {
  #view-dashboard .page-hero .hero-actions,
  .page-hero .hero-actions {
    grid-template-columns: 1fr !important;
  }
}

/* iPad/tablet: consistent hero cards, more spacious than phone. */
@media (min-width: 768px) and (max-width: 1024px) {
  .workspace {
    padding-left: 26px !important;
    padding-right: 26px !important;
    padding-top: 26px !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .view > .page-hero:first-child,
  .view > .surface:first-child,
  #view-dashboard > .page-hero,
  #view-project > .page-hero,
  #view-editor > .page-hero,
  #view-outline > .page-hero,
  #view-corkboard > .page-hero,
  #view-review > .page-hero,
  #view-story-bible > .page-hero,
  #view-presentation > .page-hero,
  #view-settings > .page-hero {
    margin: 0 0 28px !important;
    padding: 32px !important;
    border-radius: 34px !important;
    clip-path: inset(0 round 34px) !important;
  }
}

/* Desktop: preserve full-width elegance without accidental square top blocks. */
@media (min-width: 1025px) {
  .view > .page-hero:first-child,
  .view > .surface:first-child {
    border-radius: 34px !important;
    clip-path: inset(0 round 34px) !important;
  }
}


/* ============================================================
   v26.0 — Quick Actions REAL TAP fix CSS support
   During quick-action sheet scroll, buttons become inert so scroll
   gestures cannot accidentally activate actions.
   ============================================================ */
#mobileActionSheet {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

#mobileActionSheet.is-touch-scrolling button {
  pointer-events: none !important;
}

#mobileActionSheet button {
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}


/* ============================================================
   v26.1 — HARD top hero/card consistency fix
   Final override for first/top cards that were still appearing as
   square white slabs, especially Presentation Mode.
   Principle: every top hero is a card, not an open rectangle.
   ============================================================ */

/* Reset any legacy hero slab/surface rules before applying final card geometry. */
#view-dashboard .page-hero,
#view-project .page-hero,
#view-editor .page-hero,
#view-outline .page-hero,
#view-corkboard .page-hero,
#view-review .page-hero,
#view-story-bible .page-hero,
#view-presentation .page-hero,
#view-settings .page-hero,
.view .page-hero {
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  contain: paint !important;
  isolation: isolate !important;
  clip-path: none !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  mask-image: radial-gradient(white, black) !important;
  border: 1px solid rgba(17,24,39,0.045) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,249,252,0.90)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.86) inset,
    0 18px 46px rgba(15,23,42,0.065),
    0 5px 16px rgba(15,23,42,0.035) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
}

/* Kill square-looking pseudo/subsurface artifacts on top heroes. */
#view-dashboard .page-hero::before,
#view-dashboard .page-hero::after,
#view-project .page-hero::before,
#view-project .page-hero::after,
#view-editor .page-hero::before,
#view-editor .page-hero::after,
#view-outline .page-hero::before,
#view-outline .page-hero::after,
#view-corkboard .page-hero::before,
#view-corkboard .page-hero::after,
#view-review .page-hero::before,
#view-review .page-hero::after,
#view-story-bible .page-hero::before,
#view-story-bible .page-hero::after,
#view-presentation .page-hero::before,
#view-presentation .page-hero::after,
#view-settings .page-hero::before,
#view-settings .page-hero::after {
  content: none !important;
  display: none !important;
}

/* Presentation mode must not use the earlier square/slab layout. */
#view-presentation .page-hero {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 22px !important;
  padding: clamp(24px, 4vw, 40px) !important;
  margin-bottom: 28px !important;
}

#view-presentation .page-hero > div:first-child,
#view-dashboard .page-hero > div:first-child {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* The action area inside the hero should not create an edge-to-edge square plate. */
#view-presentation .page-hero .hero-actions,
#view-dashboard .page-hero .hero-actions,
.page-hero .hero-actions {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

#view-presentation .page-hero .hero-actions .primary-btn,
#view-presentation .page-hero .hero-actions .secondary-btn,
#view-dashboard .page-hero .hero-actions .primary-btn,
#view-dashboard .page-hero .hero-actions .secondary-btn,
.page-hero .hero-actions .primary-btn,
.page-hero .hero-actions .secondary-btn {
  border-radius: 999px !important;
  border: 1px solid rgba(17,24,39,0.055) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.74) inset,
    0 10px 24px rgba(15,23,42,0.045) !important;
}

/* Dark mode equivalent. */
body.dark #view-dashboard .page-hero,
body.dark #view-project .page-hero,
body.dark #view-editor .page-hero,
body.dark #view-outline .page-hero,
body.dark #view-corkboard .page-hero,
body.dark #view-review .page-hero,
body.dark #view-story-bible .page-hero,
body.dark #view-presentation .page-hero,
body.dark #view-settings .page-hero,
body.dark .view .page-hero {
  border-color: rgba(255,255,255,0.055) !important;
  background:
    linear-gradient(180deg, rgba(28,28,32,0.90), rgba(18,18,22,0.80)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 52px rgba(0,0,0,0.34),
    0 5px 18px rgba(0,0,0,0.22) !important;
}

/* Phone: force inset spacing and rounded corners even if older mobile rules fight it. */
@media (max-width: 767px) {
  .workspace {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 22px !important;
  }

  #view-dashboard .page-hero,
  #view-project .page-hero,
  #view-editor .page-hero,
  #view-outline .page-hero,
  #view-corkboard .page-hero,
  #view-review .page-hero,
  #view-story-bible .page-hero,
  #view-presentation .page-hero,
  #view-settings .page-hero,
  .view .page-hero {
    margin: 0 0 24px !important;
    padding: 24px 22px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    contain: paint !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    mask-image: radial-gradient(white, black) !important;
  }

  #view-presentation .page-hero .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #view-dashboard .page-hero .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #view-dashboard .page-hero .hero-actions .primary-btn,
  #view-dashboard .page-hero .hero-actions .secondary-btn,
  #view-presentation .page-hero .hero-actions .primary-btn,
  #view-presentation .page-hero .hero-actions .secondary-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Very small phones: dashboard hero actions become one column to avoid cramped visual rhythm. */
@media (max-width: 380px) {
  #view-dashboard .page-hero .hero-actions {
    grid-template-columns: 1fr !important;
  }
}

/* iPad/tablet: same component, slightly more spacious. */
@media (min-width: 768px) and (max-width: 1024px) {
  .workspace {
    padding-left: 26px !important;
    padding-right: 26px !important;
    padding-top: 26px !important;
  }

  #view-dashboard .page-hero,
  #view-project .page-hero,
  #view-editor .page-hero,
  #view-outline .page-hero,
  #view-corkboard .page-hero,
  #view-review .page-hero,
  #view-story-bible .page-hero,
  #view-presentation .page-hero,
  #view-settings .page-hero,
  .view .page-hero {
    margin: 0 0 28px !important;
    padding: 32px !important;
    border-radius: 34px !important;
  }
}


/* ============================================================
   v26.2 — Quick Actions typography + spacing correction
   Fixes the over-heavy quick-action menu typography and the title/
   first-button overlap. The sheet should feel modern, calmer, and
   Apple-like, not bold and shouty.
   ============================================================ */

#mobileActionSheet {
  padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

/* The handle and title are normal header elements, not sticky overlays. */
#mobileActionSheet .mobile-sheet-handle {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  width: 46px !important;
  height: 5px !important;
  margin: 0 auto 18px !important;
  border-radius: 999px !important;
  background: rgba(60, 60, 67, 0.22) !important;
}

#mobileActionSheet .mobile-sheet-title {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  display: block !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  min-height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(99, 102, 110, 0.74) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 590 !important;
  letter-spacing: 0.18em !important;
}

/* The action list needs enough gap from the title and a clean vertical rhythm. */
#mobileActionSheet .mobile-sheet-grid {
  display: grid !important;
  gap: 13px !important;
  padding: 0 0 calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Lighter, modern quick-action buttons. */
#mobileActionSheet .mobile-sheet-grid > button,
#mobileActionSheet .mobile-sheet-grid > .secondary-btn,
#mobileActionSheet .mobile-sheet-grid > .secondary-btn.full-width {
  min-height: 62px !important;
  padding: 15px 18px !important;
  border-radius: 24px !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: clamp(16px, 4.6vw, 18px) !important;
  line-height: 1.18 !important;
  font-weight: 520 !important;
  letter-spacing: -0.026em !important;
  color: rgba(24, 29, 39, 0.88) !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72)) !important;
  border: 1px solid rgba(17, 24, 39, 0.042) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.78) inset,
    0 9px 22px rgba(15,23,42,0.045) !important;
  text-shadow: none !important;
}

/* No inherited strong/bold from generic button patches. */
#mobileActionSheet .mobile-sheet-grid > button strong,
#mobileActionSheet .mobile-sheet-grid > button b {
  font-weight: 560 !important;
}

/* Active/pressed stays subtle. */
#mobileActionSheet .mobile-sheet-grid > button:active {
  transform: scale(0.992) !important;
  background:
    linear-gradient(180deg, rgba(248,249,252,0.92), rgba(245,246,249,0.76)) !important;
}

/* Dark mode: also lower the visual weight. */
body.dark #mobileActionSheet .mobile-sheet-handle {
  background: rgba(255,255,255,0.18) !important;
}

body.dark #mobileActionSheet .mobile-sheet-title {
  color: rgba(255,255,255,0.46) !important;
  background: transparent !important;
}

body.dark #mobileActionSheet .mobile-sheet-grid > button,
body.dark #mobileActionSheet .mobile-sheet-grid > .secondary-btn,
body.dark #mobileActionSheet .mobile-sheet-grid > .secondary-btn.full-width {
  color: rgba(255,255,255,0.84) !important;
  font-weight: 510 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.082), rgba(255,255,255,0.052)) !important;
  border-color: rgba(255,255,255,0.052) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.035) inset,
    0 10px 24px rgba(0,0,0,0.22) !important;
}

/* Small phones: compact but still calm. */
@media (max-width: 430px) {
  #mobileActionSheet {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #mobileActionSheet .mobile-sheet-grid > button,
  #mobileActionSheet .mobile-sheet-grid > .secondary-btn,
  #mobileActionSheet .mobile-sheet-grid > .secondary-btn.full-width {
    min-height: 58px !important;
    font-size: 16px !important;
    font-weight: 515 !important;
  }
}


/* ============================================================
   v26.3 — Presentation + value typography refinement
   Fixes the still-too-heavy title/value typography in places like:
   - Presentation hero title ("Untitled Story")
   - Presentation summary values ("Drama", counts)
   Goal: calmer Apple-style hierarchy with lighter weights.
   ============================================================ */

:root {
  --sf-weight-display-soft: 585;
  --sf-weight-value-soft: 555;
  --sf-weight-label-soft: 560;
}

/* Presentation top hero title: less black/heavy, still clear. */
#view-presentation .page-hero h1,
.presentation-hero h1,
#presentationTitle {
  font-weight: var(--sf-weight-display-soft) !important;
  letter-spacing: -0.042em !important;
  line-height: 0.98 !important;
  color: rgba(17, 24, 39, 0.94) !important;
}

/* Dashboard hero title can also be slightly calmer for consistency. */
#view-dashboard .page-hero h1,
.view .page-hero > div:first-child > h1 {
  font-weight: var(--sf-weight-display-soft) !important;
  letter-spacing: -0.044em !important;
  color: rgba(17, 24, 39, 0.94) !important;
}

/* Eyebrows/labels: refined, lighter than before. */
#view-presentation .page-hero .eyebrow,
.presentation-hero .eyebrow,
.presentation-summary-label,
.presentation-logline-label,
.surface-title,
.surface-head .surface-title,
.key-value-key {
  font-weight: var(--sf-weight-label-soft) !important;
}

/* The actual values like "Drama", "1", "0" should not look ultra-bold. */
.presentation-summary-value,
.metric-value,
.review-summary-value,
.stat-value,
.health-value,
.count-value,
.presentation-stat-value {
  font-weight: var(--sf-weight-value-soft) !important;
  letter-spacing: -0.032em !important;
  color: rgba(17, 24, 39, 0.92) !important;
}

/* Presentation summary cards specifically. */
.presentation-summary-card {
  gap: 8px !important;
}

.presentation-summary-label {
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  color: rgba(99, 102, 110, 0.78) !important;
  text-transform: uppercase !important;
}

.presentation-summary-value {
  font-size: clamp(22px, 4.6vw, 30px) !important;
  line-height: 1.02 !important;
}

/* Supporting subtitle line under hero also calmer. */
#presentationSubtitle,
.presentation-hero p {
  font-weight: 450 !important;
  letter-spacing: -0.02em !important;
  color: rgba(55, 65, 81, 0.84) !important;
}

/* Dark mode equivalents. */
body.dark #view-presentation .page-hero h1,
body.dark .presentation-hero h1,
body.dark #presentationTitle,
body.dark #view-dashboard .page-hero h1,
body.dark .view .page-hero > div:first-child > h1 {
  color: rgba(255, 255, 255, 0.92) !important;
}

body.dark .presentation-summary-label,
body.dark .presentation-logline-label,
body.dark .surface-title,
body.dark .surface-head .surface-title,
body.dark .key-value-key,
body.dark #view-presentation .page-hero .eyebrow,
body.dark .presentation-hero .eyebrow {
  color: rgba(255, 255, 255, 0.52) !important;
}

body.dark .presentation-summary-value,
body.dark .metric-value,
body.dark .review-summary-value,
body.dark .stat-value,
body.dark .health-value,
body.dark .count-value,
body.dark .presentation-stat-value {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 545 !important;
}

body.dark #presentationSubtitle,
body.dark .presentation-hero p {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Mobile: keep strong hierarchy, just not chunky/heavy. */
@media (max-width: 767px) {
  #view-presentation .page-hero h1,
  .presentation-hero h1,
  #presentationTitle,
  #view-dashboard .page-hero h1,
  .view .page-hero > div:first-child > h1 {
    font-size: clamp(30px, 8.2vw, 42px) !important;
    font-weight: var(--sf-weight-display-soft) !important;
    letter-spacing: -0.05em !important;
  }

  .presentation-summary-value {
    font-size: clamp(20px, 7vw, 28px) !important;
    font-weight: 550 !important;
  }
}


/* ============================================================
   v26.4 — Native app view transitions
   Subtle Apple-style page reveal when switching views:
   - small opacity + translate reveal
   - slight scale settling
   - first cards/buttons stagger softly
   - respects prefers-reduced-motion
   ============================================================ */

:root {
  --sf-view-transition-duration: 420ms;
  --sf-view-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.view {
  transform-origin: 50% 24px !important;
  will-change: opacity, transform, filter !important;
}

.view.view-transition-ready.is-active {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: none !important;
}

.view.view-transition-enter.is-active {
  animation: sfNativeViewReveal var(--sf-view-transition-duration) var(--sf-view-transition-ease) both !important;
}

@keyframes sfNativeViewReveal {
  0% {
    opacity: 0.01;
    transform: translate3d(0, 10px, 0) scale(0.992);
    filter: blur(3px);
  }
  42% {
    opacity: 1;
    filter: blur(0.8px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }
}

/* First-level content reveal: soft native hierarchy, not flashy. */
.view.view-transition-enter.is-active > * {
  animation: sfNativeContentSettle 460ms var(--sf-view-transition-ease) both !important;
}

.view.view-transition-enter.is-active > *:nth-child(1) { animation-delay: 0ms !important; }
.view.view-transition-enter.is-active > *:nth-child(2) { animation-delay: 28ms !important; }
.view.view-transition-enter.is-active > *:nth-child(3) { animation-delay: 46ms !important; }
.view.view-transition-enter.is-active > *:nth-child(4) { animation-delay: 62ms !important; }

@keyframes sfNativeContentSettle {
  0% {
    opacity: 0.01;
    transform: translate3d(0, 12px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Hero/card inner actions get a slightly softer stagger. */
.view.view-transition-enter.is-active .page-hero,
.view.view-transition-enter.is-active .surface,
.view.view-transition-enter.is-active .presentation-summary-card,
.view.view-transition-enter.is-active .mobile-story-card,
.view.view-transition-enter.is-active .story-card,
.view.view-transition-enter.is-active .beat-row {
  animation: sfNativeCardReveal 480ms var(--sf-view-transition-ease) both !important;
}

.view.view-transition-enter.is-active .page-hero { animation-delay: 10ms !important; }
.view.view-transition-enter.is-active .presentation-summary-card:nth-child(1),
.view.view-transition-enter.is-active .story-card:nth-child(1),
.view.view-transition-enter.is-active .mobile-story-card:nth-child(1),
.view.view-transition-enter.is-active .beat-row:nth-child(1) { animation-delay: 34ms !important; }
.view.view-transition-enter.is-active .presentation-summary-card:nth-child(2),
.view.view-transition-enter.is-active .story-card:nth-child(2),
.view.view-transition-enter.is-active .mobile-story-card:nth-child(2),
.view.view-transition-enter.is-active .beat-row:nth-child(2) { animation-delay: 54ms !important; }
.view.view-transition-enter.is-active .presentation-summary-card:nth-child(3),
.view.view-transition-enter.is-active .story-card:nth-child(3),
.view.view-transition-enter.is-active .mobile-story-card:nth-child(3),
.view.view-transition-enter.is-active .beat-row:nth-child(3) { animation-delay: 72ms !important; }

@keyframes sfNativeCardReveal {
  0% {
    opacity: 0.01;
    transform: translate3d(0, 14px, 0) scale(0.992);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Tapping a view/nav control gives a subtle native acknowledgement. */
.view-transition-primed .mobile-tab.is-active,
.view-transition-primed .nav-item.is-active,
.view-transition-primed [data-view-jump]:active {
  transform: scale(0.985) !important;
  transition: transform 180ms var(--sf-view-transition-ease) !important;
}

/* Prevent layout jank while transition runs. */
body.view-transition-running .workspace {
  scroll-behavior: auto !important;
}

/* Reduced motion: preserve instant native feel without movement. */
@media (prefers-reduced-motion: reduce) {
  .view,
  .view.view-transition-enter.is-active,
  .view.view-transition-enter.is-active > *,
  .view.view-transition-enter.is-active .page-hero,
  .view.view-transition-enter.is-active .surface,
  .view.view-transition-enter.is-active .presentation-summary-card,
  .view.view-transition-enter.is-active .mobile-story-card,
  .view.view-transition-enter.is-active .story-card,
  .view.view-transition-enter.is-active .beat-row {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


/* ============================================================
   v26.5 — Typography size restore
   Restore the earlier, better-feeling display/value sizes while
   keeping the lighter Apple-style weights from v26.3.
   Fixes:
   - Dashboard hero title size
   - Presentation hero title size
   - Presentation summary values like "Drama", counts, etc.
   ============================================================ */

:root {
  --sf-hero-title-size-mobile: clamp(36px, 10.2vw, 48px);
  --sf-hero-title-size-tablet: clamp(46px, 6.2vw, 64px);
  --sf-hero-title-size-desktop: clamp(54px, 4.4vw, 72px);

  --sf-summary-value-size-mobile: clamp(28px, 8vw, 38px);
  --sf-summary-value-size-tablet: clamp(32px, 4.2vw, 42px);
  --sf-summary-value-size-desktop: clamp(34px, 2.6vw, 44px);
}

/* Restore hero title size without bringing back the heavy weight. */
#view-dashboard .page-hero h1,
#view-presentation .page-hero h1,
.presentation-hero h1,
#presentationTitle,
.view .page-hero > div:first-child > h1 {
  font-size: var(--sf-hero-title-size-mobile) !important;
  font-weight: 585 !important;
  letter-spacing: -0.052em !important;
  line-height: 0.96 !important;
}

/* Restore summary/value size. */
.presentation-summary-value,
.metric-value,
.review-summary-value,
.stat-value,
.health-value,
.count-value,
.presentation-stat-value {
  font-size: var(--sf-summary-value-size-mobile) !important;
  font-weight: 555 !important;
  letter-spacing: -0.038em !important;
  line-height: 1.02 !important;
}

/* Keep label hierarchy calm. */
.presentation-summary-label,
.presentation-logline-label,
.surface-title,
.surface-head .surface-title,
.key-value-key,
#view-presentation .page-hero .eyebrow,
.presentation-hero .eyebrow {
  font-weight: 560 !important;
}

/* Tablet sizing */
@media (min-width: 768px) and (max-width: 1024px) {
  #view-dashboard .page-hero h1,
  #view-presentation .page-hero h1,
  .presentation-hero h1,
  #presentationTitle,
  .view .page-hero > div:first-child > h1 {
    font-size: var(--sf-hero-title-size-tablet) !important;
  }

  .presentation-summary-value,
  .metric-value,
  .review-summary-value,
  .stat-value,
  .health-value,
  .count-value,
  .presentation-stat-value {
    font-size: var(--sf-summary-value-size-tablet) !important;
  }
}

/* Desktop sizing */
@media (min-width: 1025px) {
  #view-dashboard .page-hero h1,
  #view-presentation .page-hero h1,
  .presentation-hero h1,
  #presentationTitle,
  .view .page-hero > div:first-child > h1 {
    font-size: var(--sf-hero-title-size-desktop) !important;
  }

  .presentation-summary-value,
  .metric-value,
  .review-summary-value,
  .stat-value,
  .health-value,
  .count-value,
  .presentation-stat-value {
    font-size: var(--sf-summary-value-size-desktop) !important;
  }
}

/* Small phone safeguard: keep strong but not oversized wrapping. */
@media (max-width: 380px) {
  #view-dashboard .page-hero h1,
  #view-presentation .page-hero h1,
  .presentation-hero h1,
  #presentationTitle,
  .view .page-hero > div:first-child > h1 {
    font-size: clamp(34px, 9.6vw, 42px) !important;
  }

  .presentation-summary-value,
  .metric-value,
  .review-summary-value,
  .stat-value,
  .health-value,
  .count-value,
  .presentation-stat-value {
    font-size: clamp(26px, 7.6vw, 34px) !important;
  }
}


/* ============================================================
   v27.0 — Apple-level final finish polish
   A final visual finishing layer for the whole app:
   - calmer material system
   - more coherent spacing
   - refined shadows/radii
   - lighter tactile controls
   - cleaner cards/sheets/drawers/tabbar
   - consistent native-app polish across phone/tablet/desktop
   Logic untouched. CSS-only finish pass.
   ============================================================ */

:root {
  --sf-finish-bg: #f5f6f8;
  --sf-finish-card: rgba(255,255,255,0.86);
  --sf-finish-card-strong: rgba(255,255,255,0.94);
  --sf-finish-control: rgba(255,255,255,0.72);
  --sf-finish-control-strong: rgba(255,255,255,0.92);
  --sf-finish-line: rgba(17,24,39,0.044);
  --sf-finish-line-strong: rgba(17,24,39,0.068);
  --sf-finish-text: rgba(17,24,39,0.94);
  --sf-finish-muted: rgba(75,85,99,0.72);
  --sf-finish-faint: rgba(99,102,110,0.58);
  --sf-finish-radius-card: 32px;
  --sf-finish-radius-control: 22px;
  --sf-finish-shadow-card:
    0 1px 0 rgba(255,255,255,0.86) inset,
    0 18px 48px rgba(15,23,42,0.060),
    0 6px 18px rgba(15,23,42,0.034);
  --sf-finish-shadow-float:
    0 1px 0 rgba(255,255,255,0.88) inset,
    0 30px 84px rgba(15,23,42,0.150),
    0 10px 28px rgba(15,23,42,0.070);
  --sf-finish-shadow-button:
    0 1px 0 rgba(255,255,255,0.78) inset,
    0 10px 22px rgba(15,23,42,0.044);
  --sf-finish-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.dark {
  --sf-finish-bg: #0f1014;
  --sf-finish-card: rgba(255,255,255,0.055);
  --sf-finish-card-strong: rgba(255,255,255,0.078);
  --sf-finish-control: rgba(255,255,255,0.055);
  --sf-finish-control-strong: rgba(255,255,255,0.086);
  --sf-finish-line: rgba(255,255,255,0.045);
  --sf-finish-line-strong: rgba(255,255,255,0.070);
  --sf-finish-text: rgba(255,255,255,0.92);
  --sf-finish-muted: rgba(255,255,255,0.66);
  --sf-finish-faint: rgba(255,255,255,0.44);
  --sf-finish-shadow-card:
    0 1px 0 rgba(255,255,255,0.040) inset,
    0 18px 48px rgba(0,0,0,0.32),
    0 6px 18px rgba(0,0,0,0.22);
  --sf-finish-shadow-float:
    0 1px 0 rgba(255,255,255,0.052) inset,
    0 32px 88px rgba(0,0,0,0.52),
    0 10px 32px rgba(0,0,0,0.30);
  --sf-finish-shadow-button:
    0 1px 0 rgba(255,255,255,0.036) inset,
    0 10px 24px rgba(0,0,0,0.22);
}

/* App canvas: smoother native surface. */
body {
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,0.82), transparent 34%),
    linear-gradient(180deg, #f7f8fb 0%, #eef1f6 100%) !important;
  color: var(--sf-finish-text) !important;
}

body.dark {
  background:
    radial-gradient(circle at 50% -12%, rgba(255,255,255,0.08), transparent 32%),
    linear-gradient(180deg, #111216 0%, #090a0d 100%) !important;
}

/* Topbar: less framed, more native. */
.topbar {
  border-bottom: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,249,252,0.78)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.78) inset,
    0 12px 38px rgba(15,23,42,0.06) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
}

body.dark .topbar {
  background:
    linear-gradient(180deg, rgba(22,23,28,0.92), rgba(14,15,19,0.78)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.035) inset,
    0 12px 38px rgba(0,0,0,0.28) !important;
}

/* Canonical surface/card finish. */
.surface,
.page-hero,
.resume-card,
.activity-card,
.inbox-card,
.ai-card,
.story-card,
.mobile-story-card,
.scene-nav-card,
.scene-rail-card,
.scene-card,
.recent-scene-card,
.research-card,
.outline-act,
.outline-beat,
.beat-row,
.beat-card,
.card-column,
.planning-lane,
.planning-card,
.review-scene-card,
.review-card,
.review-feedback-item,
.scene-feedback-item,
.scene-revision-card,
.presentation-summary-card,
.presentation-main-card,
.presentation-scene-card,
.presentation-mini-card,
.presentation-beat-item,
.presentation-scene-item,
.project-card,
.library-card,
.settings-card,
.starter-card,
.copilot-card,
.inspector-card,
.story-bible-inspector,
.editor-panel,
.script-editor-shell,
.scene-editor,
.editor-block,
.screenplay-pane,
.scene-pane,
.inspector-pane,
.comment-thread,
.health-mini,
.metric-card,
.note-panel,
.idea-item,
.activity-item,
.mobile-detail-body .key-value,
.mobile-detail-body .scene-link-pill,
.mobile-detail-body .story-link-summary {
  border: 1px solid var(--sf-finish-line) !important;
  background:
    linear-gradient(180deg, var(--sf-finish-card-strong), var(--sf-finish-card)) !important;
  box-shadow: var(--sf-finish-shadow-card) !important;
  border-radius: var(--sf-finish-radius-card) !important;
}

/* Nested items need less depth. */
.surface .surface,
.page-hero .surface,
.story-card .surface,
.editor-panel .surface,
.script-editor-shell .surface,
.scene-editor .surface,
.story-bible-inspector .surface,
.copilot-card .surface,
.mobile-detail-body .key-value .surface,
.presentation-main-card .surface,
.presentation-scene-card .surface {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.58) inset,
    0 8px 20px rgba(15,23,42,0.032) !important;
}

body.dark .surface .surface,
body.dark .page-hero .surface,
body.dark .story-card .surface,
body.dark .editor-panel .surface,
body.dark .script-editor-shell .surface,
body.dark .scene-editor .surface,
body.dark .story-bible-inspector .surface,
body.dark .copilot-card .surface,
body.dark .mobile-detail-body .key-value .surface,
body.dark .presentation-main-card .surface,
body.dark .presentation-scene-card .surface {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.030) inset,
    0 8px 20px rgba(0,0,0,0.18) !important;
}

/* Controls: softer, modern, tactile. */
.primary-btn,
.secondary-btn,
.ghost-btn,
.icon-btn,
.mobile-action-btn,
.mobile-tab,
.nav-item,
.small-tab,
.project-switcher,
.starter-btn,
.scene-link-pill,
.story-chip,
.pill,
.pill-pill,
.scene-status-pill,
.editor-add-fab-toggle,
.editor-add-fab-item,
.copilot-fab,
.mobile-close-btn,
.resolve-pill,
.review-filter-chip,
.overlay-ai-tab {
  border: 1px solid var(--sf-finish-line) !important;
  background:
    linear-gradient(180deg, var(--sf-finish-control-strong), var(--sf-finish-control)) !important;
  box-shadow: var(--sf-finish-shadow-button) !important;
  transition:
    transform 180ms var(--sf-finish-ease),
    box-shadow 220ms var(--sf-finish-ease),
    background 220ms var(--sf-finish-ease),
    opacity 220ms var(--sf-finish-ease) !important;
}

.primary-btn {
  background:
    linear-gradient(180deg, rgba(218,236,255,0.95), rgba(204,226,250,0.82)) !important;
  color: #0067cf !important;
  border-color: rgba(0,113,227,0.14) !important;
}

body.dark .primary-btn {
  background:
    linear-gradient(180deg, rgba(41,151,255,0.20), rgba(41,151,255,0.12)) !important;
  color: #8cc9ff !important;
  border-color: rgba(41,151,255,0.20) !important;
}

/* Tactile press, but tiny. */
button:active,
.primary-btn:active,
.secondary-btn:active,
.ghost-btn:active,
.icon-btn:active,
.mobile-action-btn:active,
.mobile-tab:active,
.nav-item:active,
.project-switcher:active,
.editor-add-fab-toggle:active {
  transform: scale(0.985) !important;
}

/* Headers: refined rhythm. */
.surface-head,
.panel-head,
.card-head,
.editor-head,
.review-head,
.presentation-head,
.planning-lane-head,
.outline-act-head,
.inspector-head,
.story-bible-head,
.mobile-detail-head,
.app-prompt-head,
.copilot-overlay-head,
.editor-shortcuts-head {
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.eyebrow,
.rail-label,
.presentation-summary-label,
.presentation-logline-label,
.key-value-key,
.field-label,
.meta-label,
.form-label,
.inspector-label,
.story-bible-label,
.card-label,
.scene-label {
  color: var(--sf-finish-faint) !important;
  font-weight: 560 !important;
  letter-spacing: 0.13em !important;
}

/* Body copy should breathe. */
p,
.surface-sub,
.card-sub,
.scene-summary,
.scene-description,
.beat-summary,
.review-copy,
.presentation-copy,
.activity-copy,
.inspector-copy,
.story-bible-copy,
.key-value-value,
.mobile-detail-body,
.app-prompt-message,
.copilot-copy {
  color: var(--sf-finish-muted) !important;
}

/* Inputs/forms: calm native controls. */
input,
textarea,
select,
.app-input,
.app-textarea,
.app-select,
.mobile-search-input,
.prompt-input,
.prompt-textarea,
[contenteditable="true"] {
  border: 1px solid var(--sf-finish-line-strong) !important;
  background:
    linear-gradient(180deg, var(--sf-finish-control-strong), var(--sf-finish-control)) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.58) inset !important;
}

body.dark input,
body.dark textarea,
body.dark select,
body.dark .app-input,
body.dark .app-textarea,
body.dark .app-select,
body.dark .mobile-search-input,
body.dark .prompt-input,
body.dark .prompt-textarea,
body.dark [contenteditable="true"] {
  box-shadow: 0 1px 0 rgba(255,255,255,0.035) inset !important;
}

/* Floating sheets/overlays: premium material. */
.mobile-action-sheet,
.mobile-search-sheet,
.mobile-detail-sheet,
.app-prompt-sheet,
.editor-shortcuts-sheet,
.copilot-overlay,
.left-rail.open,
.editor-add-fab-menu {
  border: 1px solid var(--sf-finish-line-strong) !important;
  background:
    linear-gradient(180deg, var(--sf-finish-card-strong), var(--sf-finish-card)) !important;
  box-shadow: var(--sf-finish-shadow-float) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
}

/* Mobile tabbar: refined floating navigation. */
.mobile-tabbar {
  border: 1px solid var(--sf-finish-line) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.90), rgba(247,248,252,0.82)) !important;
  border-radius: 32px !important;
  box-shadow: var(--sf-finish-shadow-float) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
}

body.dark .mobile-tabbar {
  background:
    linear-gradient(180deg, rgba(28,28,32,0.88), rgba(18,18,22,0.82)) !important;
}

.mobile-tab {
  border-radius: 24px !important;
  color: var(--sf-finish-muted) !important;
}

.mobile-tab.is-active {
  color: #006fd6 !important;
  background:
    linear-gradient(180deg, rgba(221,239,255,0.96), rgba(204,229,252,0.82)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.80) inset,
    0 10px 24px rgba(0,113,227,0.12) !important;
}

body.dark .mobile-tab.is-active {
  color: #8cc9ff !important;
  background:
    linear-gradient(180deg, rgba(41,151,255,0.20), rgba(41,151,255,0.12)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.036) inset,
    0 10px 24px rgba(0,0,0,0.26) !important;
}

/* Page heroes: final premium first-card rhythm. */
.view .page-hero,
#view-dashboard .page-hero,
#view-presentation .page-hero {
  border-radius: 34px !important;
  padding: clamp(26px, 4vw, 42px) !important;
  margin-bottom: 30px !important;
}

/* Presentation/action buttons not too heavy, not too flat. */
.page-hero .hero-actions .primary-btn,
.page-hero .hero-actions .secondary-btn,
#view-presentation .page-hero .hero-actions .primary-btn,
#view-presentation .page-hero .hero-actions .secondary-btn {
  min-height: 50px !important;
  border-radius: 999px !important;
  font-weight: 540 !important;
}

/* Quick actions final feel: less chunky and better scroll affordance. */
#mobileActionSheet .mobile-sheet-grid > button,
#mobileActionSheet .mobile-sheet-grid > .secondary-btn,
#mobileActionSheet .mobile-sheet-grid > .secondary-btn.full-width {
  font-weight: 500 !important;
  min-height: 60px !important;
  letter-spacing: -0.024em !important;
}

/* Remove accidental harsh lines. */
.divider,
.rule,
.separator,
[class*="divider"],
[class*="separator"] {
  border-color: transparent !important;
  opacity: 0.42 !important;
}

/* Mobile finish. */
@media (max-width: 767px) {
  .workspace {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 24px !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .view .page-hero,
  #view-dashboard .page-hero,
  #view-presentation .page-hero {
    border-radius: 32px !important;
    padding: 26px 24px !important;
    margin-bottom: 26px !important;
  }

  .surface,
  .page-hero,
  .presentation-summary-card,
  .mobile-story-card,
  .story-card,
  .scene-nav-card,
  .beat-row,
  .review-scene-card,
  .presentation-mini-card,
  .presentation-main-card,
  .presentation-scene-card {
    border-radius: 30px !important;
  }

  .topbar {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.74) inset,
      0 10px 34px rgba(15,23,42,0.060) !important;
  }

  body.dark .topbar {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.034) inset,
      0 10px 34px rgba(0,0,0,0.26) !important;
  }

  .mobile-action-btn,
  .project-switcher {
    border-radius: 999px !important;
  }
}

/* iPad finish. */
@media (min-width: 768px) and (max-width: 1024px) {
  .workspace {
    padding-left: 28px !important;
    padding-right: 28px !important;
    padding-top: 28px !important;
  }

  .view .page-hero,
  #view-dashboard .page-hero,
  #view-presentation .page-hero {
    padding: 34px !important;
  }
}

/* Desktop finish. */
@media (min-width: 1025px) {
  .workspace {
    padding-top: 42px !important;
  }

  .left-rail:not(.open),
  .right-panel {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.58) inset,
      0 12px 34px rgba(15,23,42,0.040) !important;
  }

  body.dark .left-rail:not(.open),
  body.dark .right-panel {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.025) inset,
      0 12px 34px rgba(0,0,0,0.18) !important;
  }
}

/* Accessibility: no motion if requested. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   v27.1 — Hero title tone-down
   Re-applied on clean v27.0 Apple Finish Polish base.
   ============================================================ */

:root {
  --sf-hero-title-size-mobile-refined: clamp(28px, 7.8vw, 38px);
  --sf-hero-title-size-tablet-refined: clamp(34px, 4.8vw, 46px);
  --sf-hero-title-size-desktop-refined: clamp(38px, 3.4vw, 52px);
  --sf-hero-title-weight-refined: 560;
}

#view-dashboard .page-hero h1,
#view-project .page-hero h1,
#view-presentation .page-hero h1,
.presentation-hero h1,
#presentationTitle,
.view .page-hero > div:first-child > h1 {
  font-size: var(--sf-hero-title-size-mobile-refined) !important;
  font-weight: var(--sf-hero-title-weight-refined) !important;
  letter-spacing: -0.048em !important;
  line-height: 0.98 !important;
}

#view-dashboard .page-hero p,
#view-project .page-hero p,
#view-presentation .page-hero p,
.presentation-hero p,
#presentationSubtitle,
.view .page-hero > div:first-child > p {
  margin-top: 4px !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  #view-dashboard .page-hero h1,
  #view-project .page-hero h1,
  #view-presentation .page-hero h1,
  .presentation-hero h1,
  #presentationTitle,
  .view .page-hero > div:first-child > h1 {
    font-size: var(--sf-hero-title-size-tablet-refined) !important;
    font-weight: var(--sf-hero-title-weight-refined) !important;
  }
}

@media (min-width: 1025px) {
  #view-dashboard .page-hero h1,
  #view-project .page-hero h1,
  #view-presentation .page-hero h1,
  .presentation-hero h1,
  #presentationTitle,
  .view .page-hero > div:first-child > h1 {
    font-size: var(--sf-hero-title-size-desktop-refined) !important;
    font-weight: var(--sf-hero-title-weight-refined) !important;
  }
}

@media (max-width: 380px) {
  #view-dashboard .page-hero h1,
  #view-project .page-hero h1,
  #view-presentation .page-hero h1,
  .presentation-hero h1,
  #presentationTitle,
  .view .page-hero > div:first-child > h1 {
    font-size: clamp(27px, 7.4vw, 34px) !important;
    font-weight: 555 !important;
    letter-spacing: -0.045em !important;
  }
}


/* ============================================================
   v27.2 — iPad/tablet portrait = landscape menu/layout model
   Surgical root fix:
   - iPad portrait must NOT use @media max-width:1024 mobile overlay layout.
   - It should behave like landscape: real left rail + content column.
   - Menu items use original app JS binding.
   - Hamburger toggles desktop-rail-collapsed exactly like landscape.
   Scope: tablet/iPad portrait only.
   ============================================================ */

@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  :root {
    --left-w: 250px !important;
    --right-w: 0px !important;
    --page-pad: 24px !important;
    --status-h: 0px !important;
  }

  html,
  body,
  .app-shell {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .app-shell {
    display: grid !important;
    grid-template-rows: var(--topbar-h) 1fr !important;
  }

  .main-grid,
  body:not(.desktop-rail-collapsed) .main-grid {
    display: grid !important;
    grid-template-columns: var(--left-w) minmax(0, 1fr) !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.desktop-rail-collapsed .main-grid {
    grid-template-columns: 0 minmax(0, 1fr) !important;
  }

  /* Exact landscape-style rail: real grid column, not mobile overlay. */
  .left-rail,
  #leftRail,
  body.mobile-nav-open .left-rail,
  body.mobile-nav-open #leftRail,
  body:not(.desktop-rail-collapsed) .left-rail,
  body:not(.desktop-rail-collapsed) #leftRail {
    position: sticky !important;
    left: auto !important;
    top: 0 !important;
    bottom: auto !important;
    display: block !important;
    width: var(--left-w) !important;
    min-width: var(--left-w) !important;
    max-width: var(--left-w) !important;
    height: calc(var(--viewport-h, 100vh) - var(--topbar-h, 76px)) !important;
    max-height: calc(var(--viewport-h, 100vh) - var(--topbar-h, 76px)) !important;
    padding: 22px 18px 26px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 10 !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: none !important;
    background: var(--surface) !important;
  }

  body.desktop-rail-collapsed .left-rail,
  body.desktop-rail-collapsed #leftRail {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right-color: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transform: translateX(-18px) !important;
  }

  .right-panel {
    display: none !important;
  }

  .workspace,
  body.mobile-nav-open .workspace,
  body:not(.desktop-rail-collapsed) .workspace,
  body.desktop-rail-collapsed .workspace {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 24px 24px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .workspace > .view,
  .workspace > section.view,
  .view,
  .view.is-active {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .view:not(.is-active) {
    display: none !important;
  }

  /* No mobile overlay/backdrop in iPad portrait. */
  .mobile-nav-backdrop,
  #mobileNavBackdrop,
  body.mobile-nav-open .mobile-nav-backdrop,
  body.mobile-nav-open #mobileNavBackdrop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.mobile-nav-open {
    overflow: auto !important;
  }

  /* Menu items must remain normal landscape-style clickable buttons. */
  #leftRail .nav-item,
  .left-rail .nav-item,
  #leftRail .nav-item[data-view],
  .left-rail .nav-item[data-view] {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  #mobileNavBtn {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Content should use the remaining column properly. */
  .page-hero,
  .surface,
  .project-grid,
  .dashboard-grid,
  .editor-grid,
  .outline-layout,
  .cards-layout,
  .review-layout,
  .story-bible-layout,
  .settings-grid,
  .scene-carousel-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .project-grid,
  .dashboard-grid,
  .editor-grid,
  .outline-layout,
  .cards-layout,
  .review-layout,
  .story-bible-layout,
  .settings-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .mobile-tabbar {
    left: calc(var(--left-w) + ((100vw - var(--left-w)) / 2)) !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - var(--left-w) - 48px), 720px) !important;
    max-width: 720px !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.desktop-rail-collapsed .mobile-tabbar {
    left: 50% !important;
    width: min(calc(100vw - 56px), 760px) !important;
  }
}

/* Narrow iPad split-view portrait still landscape-like, just smaller rail. */
@media (min-width: 768px) and (max-width: 860px) and (orientation: portrait) {
  :root {
    --left-w: 220px !important;
  }

  .workspace {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* ============================================================
   v27.3 — iPad portrait content-page width fix
   Keeps v27.2 menu fix intact.
   Problem:
   Some non-home views, especially Story Bible, still inherit a narrow
   mobile/card column in iPad portrait, leaving most of the right side empty.
   Fix:
   Portrait iPad/tablet content views fill the available landscape-style
   content column, while the menu continues behaving like landscape.
   Scope:
   - iPad/tablet portrait only.
   - No menu logic changes.
   - No phone changes.
   - No landscape changes.
   ============================================================ */

@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
  /* Active view must own the full workspace column. */
  #view-dashboard.is-active,
  #view-project.is-active,
  #view-editor.is-active,
  #view-outline.is-active,
  #view-corkboard.is-active,
  #view-review.is-active,
  #view-story-bible.is-active,
  #view-presentation.is-active,
  #view-settings.is-active,
  .view.is-active {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Kill leftover mobile/narrow content wrappers on tablet portrait. */
  .story-bible-layout,
  .story-bible-grid,
  .bible-grid,
  .bible-layout,
  .character-grid,
  .location-grid,
  .world-grid,
  .cards-grid,
  .review-grid,
  .outline-grid,
  .project-home-grid,
  .settings-grid,
  .dashboard-grid,
  .project-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    box-sizing: border-box !important;
  }

  .story-bible-layout > *,
  .story-bible-grid > *,
  .bible-grid > *,
  .bible-layout > *,
  .character-grid > *,
  .location-grid > *,
  .world-grid > *,
  .cards-grid > *,
  .review-grid > *,
  .outline-grid > *,
  .project-home-grid > *,
  .settings-grid > *,
  .dashboard-grid > *,
  .project-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Story Bible: use a full-width Apple-style content canvas, not a phone strip. */
  #view-story-bible,
  #view-story-bible.is-active,
  #view-story-bible .surface,
  #view-story-bible .panel,
  #view-story-bible .section-card,
  #view-story-bible .story-bible-layout,
  #view-story-bible .story-bible-grid,
  #view-story-bible .bible-layout,
  #view-story-bible .bible-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Header/actions should stretch naturally across the content column. */
  #view-story-bible .page-hero,
  #view-story-bible .compact-hero,
  #view-story-bible header,
  #view-story-bible .section-header,
  #view-story-bible .action-row,
  #view-story-bible .segmented-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #view-story-bible .action-row,
  #view-story-bible .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #view-story-bible .segmented-control {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px !important;
  }

  /* Character/location/world cards should be readable full cards, not 300px left strips. */
  #view-story-bible .character-card,
  #view-story-bible .location-card,
  #view-story-bible .world-card,
  #view-story-bible .bible-card,
  #view-story-bible .story-card,
  #view-story-bible .mobile-story-card,
  #view-story-bible article,
  #view-story-bible .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* On portrait tablet, Story Bible cards can use 2 columns when there is enough room
     in the right-side content column; otherwise CSS naturally falls back. */
  #view-story-bible .character-grid,
  #view-story-bible .location-grid,
  #view-story-bible .world-grid,
  #view-story-bible .bible-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Avoid internal linked-scene pills becoming clipped by old mobile widths. */
  #view-story-bible .linked-scenes,
  #view-story-bible .linked-scene-list,
  #view-story-bible .tag-list,
  #view-story-bible .chip-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #view-story-bible .linked-scenes *,
  #view-story-bible .linked-scene-list *,
  #view-story-bible .tag-list *,
  #view-story-bible .chip-list * {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* Text areas and notes should not force narrow mobile layout. */
  #view-story-bible textarea,
  #view-story-bible input,
  #view-story-bible .notes-field,
  #view-story-bible .world-notes {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* If the side rail is collapsed, the content should use the whole iPad width. */
  body.desktop-rail-collapsed #view-story-bible .character-grid,
  body.desktop-rail-collapsed #view-story-bible .location-grid,
  body.desktop-rail-collapsed #view-story-bible .world-grid,
  body.desktop-rail-collapsed #view-story-bible .bible-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Very narrow split-view portrait: one column, still full-width. */
@media (min-width: 768px) and (max-width: 860px) and (orientation: portrait) {
  #view-story-bible .character-grid,
  #view-story-bible .location-grid,
  #view-story-bible .world-grid,
  #view-story-bible .bible-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* ============================================================
   v27.4 — REAL Story Bible iPad portrait full-width fix
   Actual markup:
   #view-story-bible
     .story-bible-grid
       .surface.story-bible-main
         .story-bible-list
           .story-entity-card
       .surface.inspector-pane.story-bible-inspector

   Previous patch missed the real layout pressure:
   tablet-portrait rules kept story-bible-grid as a narrow master/detail
   grid, so story-bible-main stayed around 260–320px.

   This patch makes Story Bible use the full portrait content column.
   ============================================================ */

/* Body-class path used by the app's responsive JS. */
body.tablet-portrait #view-story-bible,
body.tablet-portrait #view-story-bible.is-active {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.tablet-portrait #view-story-bible .story-bible-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 24px !important;
  align-items: start !important;
}

body.tablet-portrait #view-story-bible .story-bible-main,
body.tablet-portrait #view-story-bible .surface.story-bible-main {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.tablet-portrait #view-story-bible .story-bible-inspector,
body.tablet-portrait #view-story-bible .inspector-pane.story-bible-inspector {
  display: none !important;
}

body.tablet-portrait #view-story-bible .story-bible-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.tablet-portrait #view-story-bible .story-entity-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

body.tablet-portrait #view-story-bible .surface-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

body.tablet-portrait #view-story-bible .surface-head .inline-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

body.tablet-portrait #view-story-bible .story-bible-tabs,
body.tablet-portrait #view-story-bible .tab-row.story-bible-tabs {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body.tablet-portrait #view-story-bible .world-notes-editor,
body.tablet-portrait #view-story-bible .world-notes-editor .prompt-field,
body.tablet-portrait #view-story-bible .world-notes-editor textarea,
body.tablet-portrait #view-story-bible .app-textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Pure media-query path, in case body.tablet-portrait is not applied early enough. */
@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) {
  #view-story-bible,
  #view-story-bible.is-active {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #view-story-bible .story-bible-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 24px !important;
    align-items: start !important;
  }

  #view-story-bible .story-bible-main,
  #view-story-bible .surface.story-bible-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #view-story-bible .story-bible-inspector,
  #view-story-bible .inspector-pane.story-bible-inspector {
    display: none !important;
  }

  #view-story-bible .story-bible-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #view-story-bible .story-entity-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #view-story-bible .story-link-preview,
  #view-story-bible .scene-link-list,
  #view-story-bible .story-chip-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Narrow iPad split-view portrait: full-width but one card per row. */
@media (min-width: 700px) and (max-width: 860px) and (orientation: portrait) {
  body.tablet-portrait #view-story-bible .story-bible-list,
  #view-story-bible .story-bible-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* ============================================================
   v27.5 — Story Bible iPad portrait inspector restore
   User intent:
   Story Bible should behave like landscape/master-detail:
   - left side: characters/locations/world list
   - right side: Entity inspector
   - inspector visible in iPad portrait
   - Edit/Delete actions visible and tappable
   This overrides v27.4's portrait inspector hiding.
   ============================================================ */

@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) {
  #view-story-bible,
  #view-story-bible.is-active {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Master/detail layout in portrait, matching landscape behavior. */
  #view-story-bible .story-bible-grid,
  body.tablet-portrait #view-story-bible .story-bible-grid {
    display: grid !important;
    grid-template-columns: minmax(260px, 0.82fr) minmax(360px, 1.18fr) !important;
    gap: 26px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: start !important;
    box-sizing: border-box !important;
  }

  #view-story-bible .story-bible-main,
  #view-story-bible .surface.story-bible-main,
  body.tablet-portrait #view-story-bible .story-bible-main,
  body.tablet-portrait #view-story-bible .surface.story-bible-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Restore the inspector. Previous portrait patch hid it. */
  #view-story-bible .story-bible-inspector,
  #view-story-bible .inspector-pane.story-bible-inspector,
  body.tablet-portrait #view-story-bible .story-bible-inspector,
  body.tablet-portrait #view-story-bible .inspector-pane.story-bible-inspector {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    top: calc(var(--topbar-h, 76px) + 18px) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: calc(100dvh - var(--topbar-h, 76px) - 48px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  #view-story-bible .story-bible-inspector .inspector-content,
  #view-story-bible #storyBibleInspector {
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* In master/detail mode, list can remain a clean vertical list, not forced 2 columns. */
  #view-story-bible .story-bible-list,
  body.tablet-portrait #view-story-bible .story-bible-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #view-story-bible .story-entity-card,
  body.tablet-portrait #view-story-bible .story-entity-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* Inspector cards/content should breathe and never clip action buttons. */
  #view-story-bible .key-value,
  #view-story-bible .key-value-links,
  #view-story-bible .note-panel,
  #view-story-bible .scene-link-list,
  #view-story-bible .scene-link-pill,
  #view-story-bible .inline-actions {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #view-story-bible .key-value-value,
  #view-story-bible .scene-link-list,
  #view-story-bible .story-link-preview {
    overflow-wrap: anywhere !important;
  }

  #view-story-bible .inline-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: 14px !important;
    padding-bottom: 4px !important;
  }

  #view-story-bible #editCharacterBtn,
  #view-story-bible #deleteCharacterBtn,
  #view-story-bible #editLocationBtn,
  #view-story-bible #deleteLocationBtn,
  #view-story-bible .inline-actions .ghost-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Keep mobile detail sheets out of this iPad portrait master/detail flow. */
  body.tablet-portrait #view-story-bible .mobile-detail-sheet,
  body.tablet-portrait #view-story-bible .mobile-detail-backdrop {
    display: none !important;
  }
}

/* If the iPad is in narrow split-view portrait, use a stacked master/detail,
   but still show inspector below the list instead of hiding it. */
@media (min-width: 700px) and (max-width: 860px) and (orientation: portrait) {
  #view-story-bible .story-bible-grid,
  body.tablet-portrait #view-story-bible .story-bible-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #view-story-bible .story-bible-inspector,
  #view-story-bible .inspector-pane.story-bible-inspector,
  body.tablet-portrait #view-story-bible .story-bible-inspector,
  body.tablet-portrait #view-story-bible .inspector-pane.story-bible-inspector {
    position: static !important;
    max-height: none !important;
  }
}


/* ============================================================
   v27.6 — Story Bible iPad portrait mobile-style detail overlay
   Allows mobile detail overlay to be used on iPad portrait Story Bible.
   ============================================================ */

@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) {
  body.mobile-detail-open .mobile-detail-backdrop,
  body.mobile-detail-open #mobileDetailBackdrop {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 119 !important;
  }

  body.mobile-detail-open .mobile-detail-sheet,
  body.mobile-detail-open #mobileDetailSheet {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    z-index: 120 !important;
  }

  #view-story-bible .story-entity-card {
    cursor: pointer !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }
}


/* ============================================================
   v27.7 — Story Bible iPad portrait EXACT mobile layout
   Overrides the previous inspector/master-detail portrait patch.
   In iPad portrait, Story Bible now behaves like mobile:
   - one column
   - inspector hidden
   - cards full-width
   - detail sheet overlay opens on card tap
   ============================================================ */

@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) {
  /* Story Bible page = mobile-style single column, not master/detail. */
  #view-story-bible .story-bible-grid,
  body.tablet-portrait #view-story-bible .story-bible-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: start !important;
  }

  #view-story-bible .story-bible-main,
  #view-story-bible .surface.story-bible-main,
  body.tablet-portrait #view-story-bible .story-bible-main,
  body.tablet-portrait #view-story-bible .surface.story-bible-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Exact mobile behavior: no right-side inspector in iPad portrait. */
  #view-story-bible .story-bible-inspector,
  #view-story-bible .inspector-pane.story-bible-inspector,
  body.tablet-portrait #view-story-bible .story-bible-inspector,
  body.tablet-portrait #view-story-bible .inspector-pane.story-bible-inspector {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Same practical mobile list behavior: one readable card per row. */
  #view-story-bible .story-bible-list,
  body.tablet-portrait #view-story-bible .story-bible-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #view-story-bible .story-entity-card,
  body.tablet-portrait #view-story-bible .story-entity-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }

  #view-story-bible .surface-head {
    align-items: flex-start !important;
    gap: 14px !important;
  }

  #view-story-bible .surface-head .inline-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }

  #view-story-bible .story-bible-tabs,
  #view-story-bible .tab-row.story-bible-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Mobile detail overlay must be allowed on iPad portrait. */
  body.mobile-detail-open .mobile-detail-backdrop,
  body.mobile-detail-open #mobileDetailBackdrop {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 119 !important;
  }

  body.mobile-detail-open .mobile-detail-sheet,
  body.mobile-detail-open #mobileDetailSheet {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    z-index: 120 !important;
    max-height: min(82dvh, 760px) !important;
    overflow-y: auto !important;
  }
}


/* ============================================================
   v27.8 — Story Bible overlay reliability CSS
   ============================================================ */
@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) {
  #view-story-bible .story-entity-card {
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: pan-y manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.08) !important;
  }

  body.mobile-detail-open #mobileDetailBackdrop,
  body.mobile-detail-open .mobile-detail-backdrop {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10050 !important;
  }

  body.mobile-detail-open #mobileDetailSheet,
  body.mobile-detail-open .mobile-detail-sheet {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    z-index: 10060 !important;
    max-height: min(82dvh, 760px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* ============================================================
   v27.9 — iPad portrait mobile overlay behavior across pages
   Makes tappable cards feel mobile-like and ensures detail overlay
   appears above iPad portrait UI.
   ============================================================ */
@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) {
  #view-corkboard [data-card-id],
  #view-corkboard .story-card,
  #view-corkboard .mobile-story-card,
  #view-outline [data-beat-id],
  #view-outline .beat-card,
  #view-outline .outline-beat-card,
  #view-review [data-comment-id],
  #view-review .comment-card,
  #view-review .feedback-card,
  #view-project [data-scene-id],
  #view-project .scene-card,
  #view-dashboard [data-scene-id],
  #view-dashboard .scene-card,
  #view-presentation [data-scene-id],
  #view-presentation .scene-card,
  #view-editor [data-scene-id],
  #view-editor .scene-card,
  #view-story-bible .story-entity-card {
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: pan-y manipulation !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.08) !important;
  }

  body.mobile-detail-open #mobileDetailBackdrop,
  body.mobile-detail-open .mobile-detail-backdrop {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10050 !important;
  }

  body.mobile-detail-open #mobileDetailSheet,
  body.mobile-detail-open .mobile-detail-sheet {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    z-index: 10060 !important;
    max-height: min(82dvh, 760px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* ============================================================
   v28.0 — Landscape scene/card selected state
   Issue:
   In portrait, tapping a scene/card visibly turns it soft blue.
   In landscape, the card state changes but the selected visual treatment
   is too weak/invisible.

   Fix:
   Apply the same calm selected treatment to active scene/card surfaces
   across landscape/tablet/desktop without changing behavior.
   ============================================================ */

@media (min-width: 768px) {
  .scene-card.is-active,
  .scene-card.active,
  .scene-card[aria-selected="true"],
  .scene-card[data-active="true"],
  .scene-rail-card.is-active,
  .scene-rail-card.active,
  .scene-rail-card[aria-selected="true"],
  .scene-rail-card[data-active="true"],
  .mobile-story-card.is-active,
  .mobile-story-card.active,
  .mobile-story-card[aria-selected="true"],
  .mobile-story-card[data-active="true"],
  .story-card.is-active,
  .story-card.active,
  .story-card[aria-selected="true"],
  .story-card[data-active="true"],
  [data-scene-id].is-active,
  [data-scene-id].active,
  [data-scene-id][aria-selected="true"],
  [data-scene-id][data-active="true"] {
    background:
      linear-gradient(180deg, rgba(226, 240, 255, 0.96), rgba(214, 232, 253, 0.92)) !important;
    border-color: rgba(0, 113, 227, 0.20) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.88) inset,
      0 18px 42px rgba(0, 113, 227, 0.10),
      0 8px 24px rgba(15, 23, 42, 0.07) !important;
    transform: translateY(-1px) !important;
  }

  body.dark .scene-card.is-active,
  body.dark .scene-card.active,
  body.dark .scene-card[aria-selected="true"],
  body.dark .scene-card[data-active="true"],
  body.dark .scene-rail-card.is-active,
  body.dark .scene-rail-card.active,
  body.dark .scene-rail-card[aria-selected="true"],
  body.dark .scene-rail-card[data-active="true"],
  body.dark .mobile-story-card.is-active,
  body.dark .mobile-story-card.active,
  body.dark .mobile-story-card[aria-selected="true"],
  body.dark .mobile-story-card[data-active="true"],
  body.dark .story-card.is-active,
  body.dark .story-card.active,
  body.dark .story-card[aria-selected="true"],
  body.dark .story-card[data-active="true"],
  body.dark [data-scene-id].is-active,
  body.dark [data-scene-id].active,
  body.dark [data-scene-id][aria-selected="true"],
  body.dark [data-scene-id][data-active="true"] {
    background:
      linear-gradient(180deg, rgba(26, 55, 88, 0.92), rgba(18, 42, 72, 0.90)) !important;
    border-color: rgba(95, 173, 255, 0.24) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.06) inset,
      0 18px 42px rgba(0, 113, 227, 0.18),
      0 8px 24px rgba(0,0,0,0.30) !important;
  }
}


/* ============================================================
   v28.1 — Real landscape selected card visual
   Applies to the real clicked card via .sf-card-selected-v281.
   ============================================================ */
@media (min-width: 768px) {
  .sf-card-selected-v281,
  .scene-card.sf-card-selected-v281,
  .scene-nav-card.sf-card-selected-v281,
  .presentation-scene-card.sf-card-selected-v281,
  .review-scene-card.sf-card-selected-v281,
  .mobile-story-card.sf-card-selected-v281,
  .story-card.sf-card-selected-v281,
  [data-scene-id].sf-card-selected-v281 {
    background:
      linear-gradient(180deg, rgba(224, 239, 255, 0.98), rgba(207, 227, 251, 0.95)) !important;
    border-color: rgba(0, 113, 227, 0.32) !important;
    outline: 2px solid rgba(0, 113, 227, 0.18) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.90) inset,
      0 18px 48px rgba(0,113,227,0.14),
      0 8px 26px rgba(15,23,42,0.08) !important;
    transform: translateY(-1px) !important;
  }

  body.dark .sf-card-selected-v281,
  body.dark .scene-card.sf-card-selected-v281,
  body.dark .scene-nav-card.sf-card-selected-v281,
  body.dark .presentation-scene-card.sf-card-selected-v281,
  body.dark .review-scene-card.sf-card-selected-v281,
  body.dark .mobile-story-card.sf-card-selected-v281,
  body.dark .story-card.sf-card-selected-v281,
  body.dark [data-scene-id].sf-card-selected-v281 {
    background:
      linear-gradient(180deg, rgba(27, 58, 94, 0.96), rgba(19, 45, 78, 0.94)) !important;
    border-color: rgba(95,173,255,0.34) !important;
    outline: 2px solid rgba(95,173,255,0.16) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.07) inset,
      0 18px 48px rgba(0,113,227,0.22),
      0 8px 26px rgba(0,0,0,0.34) !important;
  }
}


/* ============================================================
   v28.2 — iPad/tablet portrait bottom scroll-safe zone
   Issue:
   In iPad portrait, pages can visually reach the bottom tab bar/browser
   chrome before the final content is fully scrollable/readable.

   Fix:
   Add portrait-only bottom breathing room to the real scroll/content
   containers and active views. This does not change menu behavior,
   landscape, or phone/mobile.
   ============================================================ */

@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) {
  :root {
    --sf-portrait-bottom-safe-extra: 220px;
  }

  html,
  body,
  .app-shell {
    min-height: 100dvh !important;
  }

  .workspace {
    padding-bottom: calc(
      var(--sf-portrait-bottom-safe-extra) +
      env(safe-area-inset-bottom, 0px)
    ) !important;
    scroll-padding-bottom: calc(
      var(--sf-portrait-bottom-safe-extra) +
      env(safe-area-inset-bottom, 0px)
    ) !important;
  }

  .view.is-active,
  .workspace > .view.is-active,
  .workspace > section.view.is-active {
    padding-bottom: calc(
      var(--sf-portrait-bottom-safe-extra) +
      env(safe-area-inset-bottom, 0px)
    ) !important;
    box-sizing: border-box !important;
  }

  .view.is-active::after,
  .workspace > .view.is-active::after,
  .workspace > section.view.is-active::after {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: calc(
      var(--sf-portrait-bottom-safe-extra) +
      env(safe-area-inset-bottom, 0px)
    ) !important;
    flex: 0 0 auto !important;
    pointer-events: none !important;
  }

  /* Common page/grid containers should not clip the added scroll room. */
  .dashboard-grid,
  .project-grid,
  .editor-grid,
  .outline-layout,
  .cards-layout,
  .review-layout,
  .story-bible-grid,
  .settings-grid,
  .screenplay-canvas,
  .card-board,
  .story-bible-main,
  .story-bible-list,
  .surface,
  .page-hero {
    overflow: visible !important;
  }

  /* Bottom floating nav should not hide final content. */
  .mobile-tabbar {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Slightly more room for iPad Safari / in-app browser portrait where bottom bars are taller. */
@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  :root {
    --sf-portrait-bottom-safe-extra: 260px;
  }
}


/* ============================================================
   v28.3 — Real iPad/tablet portrait scroll-end fix
   The true scroll limiter is the app shell/grid/workspace height/overflow,
   not just the active view. This makes portrait scroll containers able to
   grow and gives the active view a real spacer.
   ============================================================ */

@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) {
  :root {
    --sf-real-scroll-end-v283: 340px;
  }

  html.sf-portrait-scroll-normalized-v283,
  body.sf-portrait-scroll-normalized-v283,
  html,
  body {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body {
    padding-bottom: calc(var(--sf-real-scroll-end-v283) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-shell,
  .app-shell.sf-portrait-scroll-normalized-v283,
  .main-grid,
  .main-grid.sf-portrait-scroll-normalized-v283 {
    height: auto !important;
    min-height: calc(100dvh + var(--sf-real-scroll-end-v283)) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .workspace,
  .workspace.sf-portrait-scroll-normalized-v283 {
    height: auto !important;
    min-height: calc(100dvh + var(--sf-real-scroll-end-v283)) !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-bottom: calc(var(--sf-real-scroll-end-v283) + 160px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(var(--sf-real-scroll-end-v283) + 160px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .workspace > .view.is-active,
  .workspace > section.view.is-active,
  .view.is-active {
    min-height: calc(100dvh + var(--sf-real-scroll-end-v283)) !important;
    padding-bottom: calc(var(--sf-real-scroll-end-v283) + 160px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .sf-real-scroll-end-spacer-v283 {
    display: block !important;
    width: 100% !important;
    height: var(--sf-real-scroll-end-v283) !important;
    min-height: var(--sf-real-scroll-end-v283) !important;
    pointer-events: none !important;
    clear: both !important;
  }

  /* Containers that often create their own clipping context. */
  .dashboard-grid,
  .project-grid,
  .editor-grid,
  .outline-layout,
  .cards-layout,
  .review-layout,
  .story-bible-grid,
  .settings-grid,
  .screenplay-canvas,
  .card-board,
  .story-bible-main,
  .story-bible-list,
  .surface,
  .page-hero,
  .scene-carousel,
  .scene-rail {
    max-height: none !important;
    overflow: visible !important;
  }

  /* If any view uses flex/grid, the spacer must occupy real scroll area. */
  .view.is-active {
    align-content: start !important;
  }
}


/* ============================================================
   v28.4 — Balanced iPad portrait bottom scroll space
   Fixes v28.3 overcorrection:
   - disables huge artificial scroll-end space
   - keeps only a modest safe zone above the bottom tab bar/browser chrome
   ============================================================ */

@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) {
  :root {
    --sf-real-scroll-end-v283: 0px !important;
    --sf-portrait-bottom-safe-extra: 112px !important;
    --sf-balanced-scroll-safe-v284: 128px;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .app-shell,
  .main-grid {
    min-height: 100dvh !important;
    max-height: none !important;
  }

  .workspace {
    min-height: 100dvh !important;
    padding-bottom: calc(var(--sf-balanced-scroll-safe-v284) + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(var(--sf-balanced-scroll-safe-v284) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .workspace > .view.is-active,
  .workspace > section.view.is-active,
  .view.is-active {
    min-height: auto !important;
    padding-bottom: calc(var(--sf-balanced-scroll-safe-v284) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .workspace > .view.is-active::after,
  .workspace > section.view.is-active::after,
  .view.is-active::after {
    height: 0 !important;
    min-height: 0 !important;
    display: none !important;
    content: none !important;
  }

  .sf-real-scroll-end-spacer-v283 {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }
}

/* Touch iPad gets a little more, but not the huge v28.3 gap. */
@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  :root {
    --sf-balanced-scroll-safe-v284: 148px;
  }
}


/* ============================================================
   v28.5 — Tighter iPad portrait bottom scroll space
   Reduces v28.4 safe zone further while keeping a minimal clearance
   above the bottom tab bar / iPad safe area.
   ============================================================ */

@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) {
  :root {
    --sf-portrait-bottom-safe-extra: 84px !important;
    --sf-balanced-scroll-safe-v284: 92px !important;
    --sf-tight-scroll-safe-v285: 92px;
  }

  .workspace {
    padding-bottom: calc(var(--sf-tight-scroll-safe-v285) + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(var(--sf-tight-scroll-safe-v285) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .workspace > .view.is-active,
  .workspace > section.view.is-active,
  .view.is-active {
    padding-bottom: calc(var(--sf-tight-scroll-safe-v285) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .sf-real-scroll-end-spacer-v283 {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }
}

@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  :root {
    --sf-balanced-scroll-safe-v284: 104px !important;
    --sf-tight-scroll-safe-v285: 104px;
  }
}


/* ============================================================
   v28.6 — iPad portrait bottom tab bar centering + responsive polish
   Issue:
   In iPad portrait, the bottom tab bar could appear too wide and visually
   left-biased, especially when the landscape-style rail/menu model is active.

   Fix:
   Make the tab bar a centered, compact floating control in tablet portrait.
   ============================================================ */

@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) {
  .mobile-tabbar {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 96px) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(6px, 1.2vw, 12px) !important;

    padding: 8px 10px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;

    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-tabbar button,
  .mobile-tabbar .mobile-tab,
  .mobile-tabbar [data-mobile-jump] {
    flex: 0 0 auto !important;
    min-width: clamp(68px, 9vw, 86px) !important;
    width: auto !important;
    max-width: 96px !important;

    height: clamp(54px, 6.4vw, 64px) !important;
    padding: 0 clamp(12px, 1.5vw, 18px) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
    white-space: nowrap !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .mobile-tabbar button.is-active,
  .mobile-tabbar .mobile-tab.is-active,
  .mobile-tabbar [data-mobile-jump].is-active {
    transform: none !important;
  }

  /* When the side rail is collapsed, keep exactly the same centered behavior. */
  body.desktop-rail-collapsed .mobile-tabbar {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100vw - 96px) !important;
  }
}

/* Slightly narrower iPad split-view portrait: compact but still centered. */
@media (min-width: 700px) and (max-width: 860px) and (orientation: portrait) {
  .mobile-tabbar {
    max-width: calc(100vw - 44px) !important;
    gap: 5px !important;
    padding: 7px 8px !important;
  }

  .mobile-tabbar button,
  .mobile-tabbar .mobile-tab,
  .mobile-tabbar [data-mobile-jump] {
    min-width: clamp(58px, 14vw, 74px) !important;
    height: 54px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
  }
}


/* ============================================================
   v28.7 — Smaller, calmer metric/stat typography across screens
   Issue:
   Health/metric values such as "50%", "1", and "Developing" were using
   oversized heavy display typography inside narrow cards/side panels.

   Fix:
   Use a compact Apple-style metric scale:
   - smaller values
   - lighter font weights
   - controlled wrapping
   - better row alignment
   - applies across desktop, landscape, portrait, and side rail cards
   ============================================================ */

:root {
  --sf-metric-value-size: clamp(24px, 2.4vw, 34px);
  --sf-metric-value-size-compact: clamp(20px, 2vw, 28px);
  --sf-metric-value-size-rail: clamp(18px, 1.8vw, 26px);
  --sf-metric-value-weight: 560;
  --sf-metric-value-weight-compact: 540;
  --sf-metric-label-weight: 500;
}

/* Generic metric/stat values */
.metric-value,
.stat-value,
.health-value,
.kpi-value,
.score-value,
.progress-value,
.story-health-value,
.rail-value,
.sidebar-value,
.inspector-value,
[data-metric-value],
[data-stat-value] {
  font-size: var(--sf-metric-value-size) !important;
  font-weight: var(--sf-metric-value-weight) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  max-width: 12ch !important;
  overflow-wrap: anywhere !important;
}

/* Generic metric labels */
.metric-label,
.stat-label,
.health-label,
.kpi-label,
.score-label,
.progress-label,
.story-health-label,
.rail-label-value,
.sidebar-label,
.inspector-label,
[data-metric-label],
[data-stat-label] {
  font-weight: var(--sf-metric-label-weight) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
}

/* Story health / side-rail cards: force compact scale. */
.left-rail .metric-value,
.left-rail .stat-value,
.left-rail .health-value,
.left-rail .kpi-value,
.left-rail .score-value,
.left-rail .progress-value,
.left-rail .story-health-value,
.left-rail .rail-value,
.left-rail [data-metric-value],
.left-rail [data-stat-value],
#leftRail .metric-value,
#leftRail .stat-value,
#leftRail .health-value,
#leftRail .kpi-value,
#leftRail .score-value,
#leftRail .progress-value,
#leftRail .story-health-value,
#leftRail .rail-value,
#leftRail [data-metric-value],
#leftRail [data-stat-value] {
  font-size: var(--sf-metric-value-size-rail) !important;
  font-weight: var(--sf-metric-value-weight-compact) !important;
  letter-spacing: -0.028em !important;
  line-height: 1.04 !important;
  max-width: 9ch !important;
}

/* Catch actual story-health rows even if class names are generic. */
.left-rail .story-health *,
#leftRail .story-health *,
.left-rail .health-card *,
#leftRail .health-card *,
.left-rail .rail-card *,
#leftRail .rail-card *,
.left-rail .stat-card *,
#leftRail .stat-card *,
.left-rail .metric-card *,
#leftRail .metric-card * {
  font-weight: min(var(--font-weight-current, 540), 560) !important;
}

/* Values inside health cards often appear as the last/big child. */
.story-health strong,
.story-health b,
.health-card strong,
.health-card b,
.metric-card strong,
.metric-card b,
.stat-card strong,
.stat-card b,
.rail-card strong,
.rail-card b {
  font-size: var(--sf-metric-value-size-compact) !important;
  font-weight: var(--sf-metric-value-weight-compact) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}

/* Side rail strong values need the tightest scale. */
.left-rail .story-health strong,
.left-rail .story-health b,
.left-rail .health-card strong,
.left-rail .health-card b,
.left-rail .metric-card strong,
.left-rail .metric-card b,
.left-rail .stat-card strong,
.left-rail .stat-card b,
.left-rail .rail-card strong,
.left-rail .rail-card b,
#leftRail .story-health strong,
#leftRail .story-health b,
#leftRail .health-card strong,
#leftRail .health-card b,
#leftRail .metric-card strong,
#leftRail .metric-card b,
#leftRail .stat-card strong,
#leftRail .stat-card b,
#leftRail .rail-card strong,
#leftRail .rail-card b {
  font-size: var(--sf-metric-value-size-rail) !important;
  font-weight: 540 !important;
  letter-spacing: -0.025em !important;
}

/* Common card layouts: label/value rows should not let value explode. */
.metric-row,
.stat-row,
.health-row,
.kpi-row,
.progress-row,
.story-health-row,
.rail-stat-row,
.sidebar-stat-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

.metric-row > :last-child,
.stat-row > :last-child,
.health-row > :last-child,
.kpi-row > :last-child,
.progress-row > :last-child,
.story-health-row > :last-child,
.rail-stat-row > :last-child,
.sidebar-stat-row > :last-child {
  min-width: 0 !important;
  max-width: 11ch !important;
  text-align: right !important;
  overflow-wrap: anywhere !important;
}

/* Long word values like "Developing" should wrap gracefully, not dominate. */
.story-health,
.health-card,
.metric-card,
.stat-card,
.rail-card {
  overflow: hidden !important;
}

.story-health .status,
.health-card .status,
.metric-card .status,
.stat-card .status,
.rail-card .status,
.story-health [data-status],
.health-card [data-status],
.metric-card [data-status],
.stat-card [data-status],
.rail-card [data-status] {
  font-size: clamp(18px, 1.8vw, 26px) !important;
  font-weight: 540 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  overflow-wrap: anywhere !important;
}

/* Extra protection for narrow side panels and iPad portrait rails. */
@media (max-width: 1100px) {
  :root {
    --sf-metric-value-size: clamp(22px, 3vw, 30px);
    --sf-metric-value-size-compact: clamp(19px, 2.6vw, 26px);
    --sf-metric-value-size-rail: clamp(17px, 2.2vw, 24px);
  }

  .left-rail .metric-value,
  .left-rail .stat-value,
  .left-rail .health-value,
  .left-rail .kpi-value,
  .left-rail .score-value,
  .left-rail .progress-value,
  .left-rail .story-health-value,
  .left-rail .rail-value,
  #leftRail .metric-value,
  #leftRail .stat-value,
  #leftRail .health-value,
  #leftRail .kpi-value,
  #leftRail .score-value,
  #leftRail .progress-value,
  #leftRail .story-health-value,
  #leftRail .rail-value,
  .left-rail strong,
  #leftRail strong {
    font-size: var(--sf-metric-value-size-rail) !important;
    font-weight: 530 !important;
  }
}

/* Very narrow rail / split-view: smallest sane scale. */
@media (max-width: 860px) {
  :root {
    --sf-metric-value-size-rail: clamp(16px, 2.6vw, 22px);
  }

  .left-rail .metric-row,
  #leftRail .metric-row,
  .left-rail .stat-row,
  #leftRail .stat-row,
  .left-rail .health-row,
  #leftRail .health-row,
  .left-rail .story-health-row,
  #leftRail .story-health-row {
    gap: 8px !important;
  }

  .left-rail .metric-row > :last-child,
  #leftRail .metric-row > :last-child,
  .left-rail .stat-row > :last-child,
  #leftRail .stat-row > :last-child,
  .left-rail .health-row > :last-child,
  #leftRail .health-row > :last-child,
  .left-rail .story-health-row > :last-child,
  #leftRail .story-health-row > :last-child {
    max-width: 8ch !important;
  }
}


/* ============================================================
   v28.12 — Import input iOS-safe hiding
   File input must not be `hidden` / display:none for reliable Safari picker.
   ============================================================ */
.sf-import-input-v2812,
#importFileInput.sf-import-input-v2812 {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0.001 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}


/* ============================================================
   v28.13 — Restore original import input behavior
   Original import owns picker behavior.
   ============================================================ */
#importFileInput {
  pointer-events: auto;
}


/* ============================================================
   v28.29 — iPad portrait overlay button affordance/toast
   ============================================================ */
@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) {
  #mobileDetailSheet button,
  .mobile-detail-sheet button,
  .detail-sheet button,
  .bottom-sheet button,
  .overlay-sheet button,
  .modal-sheet button,
  [role="dialog"] button,
  [aria-modal="true"] button,
  #mobileDetailSheet [role="button"],
  .mobile-detail-sheet [role="button"],
  .detail-sheet [role="button"],
  .bottom-sheet [role="button"],
  .overlay-sheet [role="button"],
  .modal-sheet [role="button"] {
    touch-action: manipulation;
    cursor: pointer;
  }
}

.sf-overlay-button-toast-v2829 {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(10px);
  z-index: 30000;
  padding: 12px 15px;
  border-radius: 999px;
  background: rgba(20, 20, 24, .88);
  color: white;
  font-size: 14px;
  font-weight: 560;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sf-overlay-button-toast-v2829.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ============================================================
   v28.30 — iPad portrait real scene-card carousel CSS
   Applied to the actual parent detected by JS, not guessed class names.
   ============================================================ */
@media (min-width: 700px) and (max-width: 1400px) and (orientation: portrait) {
  .sf-real-scene-carousel-v2830 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y !important;

    gap: clamp(16px, 2.2vw, 24px) !important;
    padding: 4px 28px 18px 2px !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-inline: 2px 28px !important;
    scrollbar-width: none !important;

    grid-template-columns: none !important;
    grid-auto-flow: column !important;
  }

  .sf-real-scene-carousel-v2830::-webkit-scrollbar {
    display: none !important;
  }

  .sf-real-scene-carousel-v2830 > *,
  .sf-real-scene-carousel-card-v2830 {
    flex: 0 0 clamp(280px, 42vw, 390px) !important;
    width: clamp(280px, 42vw, 390px) !important;
    min-width: clamp(280px, 42vw, 390px) !important;
    max-width: clamp(280px, 42vw, 390px) !important;
    scroll-snap-align: start !important;
  }

  .sf-real-scene-carousel-v2830:active {
    cursor: grabbing;
  }

  .sf-real-scene-carousel-v2830 [data-scene-id],
  .sf-real-scene-carousel-v2830 .scene-card {
    user-select: none;
    -webkit-user-select: none;
  }
}


/* ============================================================
   v28.31 — Final Apple/Steve-level safe visual polish
   Safe layer only:
   - no layout rewrite
   - no menu logic changes
   - no import/parser changes
   - no carousel logic changes
   - no overlay behavior changes
   ============================================================ */

:root {
  --sf-polish-ink-v2831: #111827;
  --sf-polish-muted-v2831: rgba(17, 24, 39, 0.62);
  --sf-polish-soft-v2831: rgba(255, 255, 255, 0.74);
  --sf-polish-line-v2831: rgba(15, 23, 42, 0.065);
  --sf-polish-shadow-v2831: 0 22px 70px rgba(15, 23, 42, 0.075);
  --sf-polish-shadow-soft-v2831: 0 10px 30px rgba(15, 23, 42, 0.055);
  --sf-polish-blue-v2831: #0071e3;
}

/* Text rendering: calmer Apple-like finish without changing layout. */
html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-kerning: normal;
}

body {
  color: var(--sf-polish-ink-v2831);
}

/* Calm hierarchy: reduce harshness without changing headline sizes. */
h1, h2, h3, h4,
.page-title,
.section-title,
.card-title,
.scene-title,
.beat-title,
.story-title {
  letter-spacing: -0.045em;
  text-wrap: balance;
}

p,
.card-copy,
.synopsis,
.description,
.subtitle,
.meta,
.scene-meta {
  text-wrap: pretty;
}

/* Softer glass/surface finish. */
.surface,
.panel,
.card,
.page-hero,
.compact-hero,
.scene-card,
.story-card,
.mobile-story-card,
.story-entity-card,
.outline-beat-card,
.beat-card,
.comment-card,
.feedback-card,
.metric-card,
.stat-card,
.health-card,
.mobile-detail-sheet,
.detail-sheet,
.bottom-sheet,
.overlay-sheet,
.modal-sheet {
  border-color: var(--sf-polish-line-v2831) !important;
  box-shadow: var(--sf-polish-shadow-soft-v2831);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
}

/* Big hero cards get a slightly more premium falloff. */
.page-hero,
.compact-hero,
.surface.hero,
.hero-card {
  box-shadow: var(--sf-polish-shadow-v2831);
}

/* Buttons: calmer, more native, better touch feel. */
button,
.btn,
.primary-btn,
.secondary-btn,
.pill,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:not(:disabled),
.btn:not(:disabled),
.primary-btn:not(:disabled),
.secondary-btn:not(:disabled),
.pill:not(:disabled),
[role="button"]:not(:disabled) {
  transition:
    transform 160ms cubic-bezier(.2,.8,.2,1),
    box-shadow 160ms cubic-bezier(.2,.8,.2,1),
    background-color 160ms cubic-bezier(.2,.8,.2,1),
    border-color 160ms cubic-bezier(.2,.8,.2,1),
    opacity 160ms cubic-bezier(.2,.8,.2,1);
}

button:not(:disabled):active,
.btn:not(:disabled):active,
.primary-btn:not(:disabled):active,
.secondary-btn:not(:disabled):active,
.pill:not(:disabled):active,
[role="button"]:not(:disabled):active {
  transform: scale(0.985);
}

/* Active/selected cards feel intentional but not loud. */
.is-selected,
.is-active,
.sf-card-selected-v281 {
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.scene-card.is-selected,
.scene-card.is-active,
.scene-card.sf-card-selected-v281,
.story-card.is-selected,
.story-card.is-active,
.story-card.sf-card-selected-v281,
.beat-card.is-selected,
.beat-card.is-active,
.beat-card.sf-card-selected-v281,
[data-scene-id].is-selected,
[data-scene-id].is-active,
[data-scene-id].sf-card-selected-v281 {
  box-shadow:
    0 18px 44px rgba(0, 113, 227, 0.09),
    0 8px 22px rgba(15, 23, 42, 0.055) !important;
}

/* Inputs: more Apple-native focus without jumping layouts. */
input,
textarea,
select,
[contenteditable="true"] {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

input:focus,
textarea:focus,
select:focus,
[contenteditable="true"]:focus {
  border-color: rgba(0, 113, 227, 0.28) !important;
  box-shadow:
    0 0 0 4px rgba(0, 113, 227, 0.105),
    0 10px 28px rgba(15, 23, 42, 0.055) !important;
}

/* Top chrome: subtle, not heavy. */
.topbar,
.app-topbar,
.mobile-tabbar,
.left-rail,
#leftRail {
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
}

/* Mobile tabbar: clearer centered premium feel without changing placement. */
.mobile-tabbar {
  box-shadow:
    0 20px 55px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.74);
}

/* Pills/badges: lighter, more designed. */
.badge,
.status-pill,
.pill,
.tag,
.chip {
  border-color: rgba(15, 23, 42, 0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.58);
}

/* Scene carousel cards: subtle tactile finish only. */
.sf-real-scene-carousel-v2830 > *,
.scene-card,
.story-card {
  -webkit-tap-highlight-color: transparent;
}

.sf-real-scene-carousel-v2830 > *:active,
.scene-card:active,
.story-card:active {
  transform: scale(0.992);
}

/* Better keyboard/accessibility focus, still elegant. */
:focus-visible {
  outline: 3px solid rgba(0, 113, 227, 0.28);
  outline-offset: 3px;
}

/* Reduced motion remains respected. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Dark mode polish if existing app enters dark class. */
body.dark,
.dark body {
  --sf-polish-ink-v2831: #f5f5f7;
  --sf-polish-muted-v2831: rgba(245, 245, 247, 0.64);
  --sf-polish-soft-v2831: rgba(28, 28, 30, 0.72);
  --sf-polish-line-v2831: rgba(255, 255, 255, 0.085);
  --sf-polish-shadow-v2831: 0 24px 70px rgba(0, 0, 0, 0.34);
  --sf-polish-shadow-soft-v2831: 0 10px 30px rgba(0, 0, 0, 0.22);
}

body.dark .surface,
body.dark .panel,
body.dark .card,
body.dark .page-hero,
body.dark .compact-hero,
body.dark .scene-card,
body.dark .story-card,
body.dark .mobile-story-card,
body.dark .story-entity-card,
body.dark .outline-beat-card,
body.dark .beat-card,
body.dark .comment-card,
body.dark .feedback-card,
body.dark .metric-card,
body.dark .stat-card,
body.dark .health-card {
  border-color: var(--sf-polish-line-v2831) !important;
  box-shadow: var(--sf-polish-shadow-soft-v2831);
}


/* ============================================================
   v28.32 — Imported Fountain/text badge safety
   Imported labels/cards are content, not import-upload controls.
   ============================================================ */
.imported,
.badge.imported,
.status-pill.imported,
.tag.imported,
.chip.imported,
[data-sf-imported-card-content-v2832="true"] {
  cursor: default;
}