/* ============================================================
   Phase 38 — Series, Stripboard & Writer Improvements
   ============================================================ */

/* ── Mode Context Banner (Doc Studio, Ad Treatment) ──────────────────── */
.mode-context-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: linear-gradient(90deg, #eff6ff 0%, #f0fdf4 100%);
  border-bottom: 1px solid #bfdbfe;
  flex-shrink: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body.dark .mode-context-banner {
  background: linear-gradient(90deg, rgba(37,99,235,.12) 0%, rgba(22,163,74,.08) 100%);
  border-bottom-color: rgba(96,165,250,.25);
}
.mcb-icon { font-size: 18px; flex-shrink: 0; }
.mcb-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.mcb-mode {
  font-size: .75rem;
  font-weight: 800;
  color: #1d4ed8;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
body.dark .mcb-mode { color: #93c5fd; }
.mcb-tip {
  font-size: .75rem;
  color: #4b5563;
  line-height: 1.4;
}
body.dark .mcb-tip { color: #9ca3af; }
.mcb-switch {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1.5px solid #2563eb;
  border-radius: 20px;
  background: rgba(37,99,235,.08);
  color: #2563eb;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all .15s;
}
.mcb-switch:hover { background: #2563eb; color: #fff; }
body.dark .mcb-switch { border-color: #93c5fd; color: #93c5fd; background: rgba(147,197,253,.08); }
body.dark .mcb-switch:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
.mcb-dismiss {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  font-family: inherit;
}
.mcb-dismiss:hover { background: rgba(0,0,0,.08); color: #374151; }
@media (max-width: 560px) {
  .mode-context-banner { padding: 7px 10px; gap: 7px; }
  .mcb-tip { display: none; }
  .mcb-switch { padding: 4px 9px; font-size: .7rem; }
}

/* ── Page Color Picker popup ──────────────────────────────────────────── */
#pc-popup {
  position: fixed;
  z-index: 9200;
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
  min-width: 240px;
  display: none;
}
#pc-popup.open { display: block; }
#pc-popup-title {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted, #6b7280);
  margin-bottom: 10px;
}
#pc-popup-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
#pc-popup .pc-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 3px;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: .6rem;
  font-weight: 700;
  color: var(--ink, #111);
  transition: background .12s;
}
#pc-popup .pc-swatch:hover { background: var(--hover-bg, #f3f4f6); }
#pc-popup .pc-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: block;
  border: 1.5px solid transparent;
  transition: transform .12s, box-shadow .12s;
}
#pc-popup .pc-swatch:hover .pc-dot,
#pc-popup .pc-swatch.active .pc-dot {
  transform: scale(1.18);
  box-shadow: 0 0 0 2.5px #2563eb;
}

/* ── Tools menu page-color row becomes a single compact trigger ────── */
.tools-pc-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  transition: background .12s;
}
.tools-pc-trigger:hover { background: var(--hover-bg, #f3f4f6); }
.tools-pc-dots {
  display: flex;
  gap: 3px;
  align-items: center;
  margin-left: auto;
}
.tools-pc-dots .pd {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  display: inline-block;
}

/* ── 1. Writer scene panel: tighter item spacing ─────────────────────── */
@media (min-width: 761px) {
  .scene-item {
    padding: 5px 12px !important;
    min-height: 30px !important;
  }
  .scene-item.active {
    padding-left: 10px !important;
  }
}

/* ── 2. Stripboard day columns: ripped looseleaf paper look ──────────── */
.strip-column {
  background:
    /* Hole punches — three circles near top */
    radial-gradient(circle 7px at 50% 18px, #d1d5db 100%, transparent 100%),
    radial-gradient(circle 5px at 50% 18px, #e5e7eb 100%, transparent 100%),
    /* Ruled lines — every 24px */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 23px,
      rgba(147,197,253,.50) 23px,
      rgba(147,197,253,.50) 24px
    ),
    /* Red margin line */
    linear-gradient(
      to right,
      transparent 28px,
      rgba(239,68,68,.35) 28px,
      rgba(239,68,68,.35) 30px,
      transparent 30px
    ),
    /* Paper base */
    linear-gradient(to bottom, #fffef7 0%, #fefce8 100%) !important;
  border: none !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow:
    2px 3px 8px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  padding-left: 34px !important;
  position: relative;
}

/* Torn top edge via ::before */
.strip-column::before {
  content: '';
  display: block;
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 14px;
  background: inherit;
  /* Jagged torn edge using clip-path */
  clip-path: polygon(
    0% 100%, 2% 30%, 5% 80%, 8% 20%, 11% 70%, 14% 15%, 17% 65%, 20% 25%,
    23% 75%, 26% 20%, 29% 60%, 32% 10%, 35% 55%, 38% 5%,  41% 50%, 44% 0%,
    47% 45%, 50% 5%,  53% 50%, 56% 0%,  59% 45%, 62% 5%,  65% 55%, 68% 15%,
    71% 65%, 74% 20%, 77% 70%, 80% 25%, 83% 75%, 86% 30%, 89% 80%, 92% 35%,
    95% 75%, 98% 25%, 100% 60%, 100% 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Dark mode looseleaf */
body.dark .strip-column {
  background:
    radial-gradient(circle 7px at 50% 18px, #374151 100%, transparent 100%),
    radial-gradient(circle 5px at 50% 18px, #4b5563 100%, transparent 100%),
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 23px,
      rgba(59,130,246,.20) 23px,
      rgba(59,130,246,.20) 24px
    ),
    linear-gradient(
      to right,
      transparent 28px,
      rgba(239,68,68,.22) 28px,
      rgba(239,68,68,.22) 30px,
      transparent 30px
    ),
    linear-gradient(to bottom, #1e2433 0%, #1a2030 100%) !important;
  box-shadow:
    2px 3px 10px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Strip header should sit above torn edge */
.strip-header {
  z-index: 12 !important;
}

/* ── 3. Series writer: vertical episode tab rail ─────────────────────── */
#series-ep-rail {
  display: flex;
  flex-direction: column;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  background: #f1f5f9;
  border-right: 1px solid #e2e8f0;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  z-index: 5;
  padding: 8px 0 4px;
  gap: 2px;
  scrollbar-width: none;
}
#series-ep-rail::-webkit-scrollbar { display: none; }

body.dark #series-ep-rail {
  background: #151c2c;
  border-right-color: #1e2433;
}

.ep-rail-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 56px;
  margin: 0 2px;
  border-radius: 8px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .13s, border-color .13s, transform .1s;
  flex-shrink: 0;
  user-select: none;
  padding: 4px 2px;
}
.ep-rail-tab:hover {
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.22);
}
.ep-rail-tab.active {
  background: rgba(37,99,235,.14);
  border-color: var(--brand);
}
.ep-rail-tab:active { transform: scale(.93); }

body.dark .ep-rail-tab:hover  { background: rgba(77,142,248,.15); border-color: rgba(77,142,248,.30); }
body.dark .ep-rail-tab.active { background: rgba(77,142,248,.20); border-color: var(--brand); }

/* Episode code badge (E1, E2 …) */
.ep-rail-code {
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .03em;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 3px;
}
body.dark .ep-rail-code { color: #7eb6ff; }

/* Rotated episode title */
.ep-rail-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: .56rem;
  font-weight: 700;
  color: #374151;
  max-height: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
body.dark .ep-rail-label { color: #94a3b8; }
.ep-rail-tab.active .ep-rail-label { color: var(--brand); }
body.dark .ep-rail-tab.active .ep-rail-label { color: #7eb6ff; }

/* Add episode button at rail bottom */
.ep-rail-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 4px auto 2px;
  border-radius: 8px;
  cursor: pointer;
  border: 1.5px dashed rgba(37,99,235,.35);
  color: var(--brand);
  font-size: 1.1rem;
  transition: background .13s, border-color .13s;
  flex-shrink: 0;
}
.ep-rail-add:hover {
  background: rgba(37,99,235,.10);
  border-color: var(--brand);
}
body.dark .ep-rail-add {
  border-color: rgba(77,142,248,.30);
  color: #7eb6ff;
}
body.dark .ep-rail-add:hover { background: rgba(77,142,248,.14); border-color: #7eb6ff; }

/* Rail separator line */
.ep-rail-sep {
  width: 28px;
  height: 1px;
  background: #e2e8f0;
  margin: 4px auto;
  flex-shrink: 0;
}
body.dark .ep-rail-sep { background: #1e2433; }

/* Special label tabs (Pilot, Finale) get a colored left border */
.ep-rail-tab[data-ep-special="pilot"] {
  border-left: 3px solid #f59e0b;
}
.ep-rail-tab[data-ep-special="finale"] {
  border-left: 3px solid #8b5cf6;
}

/* Episode count picker in new project modal */
#np-ep-count-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  color: var(--ink);
}
#np-ep-count-row select {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: .88rem;
  background: white;
}
body.dark #np-ep-count-row select {
  background: #1e2433;
  border-color: #374151;
  color: var(--ink);
}

/* ── 4. Wardrobe: episode tag chips in outfit cards ──────────────────── */
.ward-ep-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 0 2px;
}
.ward-ep-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  background: rgba(37,99,235,.10);
  color: var(--brand);
  border: 1px solid rgba(37,99,235,.22);
  cursor: pointer;
  transition: background .12s;
  user-select: none;
}
.ward-ep-chip:hover { background: rgba(37,99,235,.18); }
.ward-ep-chip.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
body.dark .ward-ep-chip {
  background: rgba(77,142,248,.12);
  color: #7eb6ff;
  border-color: rgba(77,142,248,.28);
}
body.dark .ward-ep-chip.active {
  background: var(--brand);
  color: #fff;
}
.ward-ep-tags-label {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

/* ── 5. Beats: episode grouping headers ──────────────────────────────── */
.cork-ep-group-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px 6px;
  margin-top: 8px;
  border-bottom: 2px solid rgba(37,99,235,.18);
  cursor: pointer;
  user-select: none;
}
.cork-ep-group-header:first-child { margin-top: 0; }
.cork-ep-group-header h3 {
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
  flex: 1;
}
body.dark .cork-ep-group-header { border-bottom-color: rgba(77,142,248,.25); }
body.dark .cork-ep-group-header h3 { color: #7eb6ff; }
.cork-ep-group-toggle {
  font-size: .7rem;
  color: var(--muted);
  transition: transform .15s;
}
.cork-ep-group-header.collapsed .cork-ep-group-toggle {
  transform: rotate(-90deg);
}
.cork-ep-group-pill {
  font-size: .62rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(37,99,235,.10);
  color: var(--brand);
  border: 1px solid rgba(37,99,235,.20);
}
body.dark .cork-ep-group-pill {
  background: rgba(77,142,248,.12);
  color: #7eb6ff;
  border-color: rgba(77,142,248,.28);
}

/* Beats episode group container — collapses on toggle */
.cork-ep-group-body {
  grid-column: 1 / -1;
  display: contents;
}
.cork-ep-group-body.collapsed > * { display: none !important; }

/* Episode selector on beat editor */
.beat-ep-select-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.beat-ep-select-row label {
  font-size: .7rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.beat-ep-select-row select {
  flex: 1;
  font-size: .78rem;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: white;
}
body.dark .beat-ep-select-row select {
  background: #1e2433;
  border-color: #374151;
  color: var(--ink);
}

/* Toggle button in beats toolbar */
#cork-ep-group-btn {
  font-size: .72rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  background: white;
  color: #374151;
  cursor: pointer;
  transition: background .13s, border-color .13s, color .13s;
}
#cork-ep-group-btn.active {
  background: rgba(37,99,235,.10);
  border-color: var(--brand);
  color: var(--brand);
}
body.dark #cork-ep-group-btn {
  background: #1e2433;
  border-color: #374151;
  color: var(--ink);
}
body.dark #cork-ep-group-btn.active {
  background: rgba(77,142,248,.14);
  border-color: var(--brand);
  color: #7eb6ff;
}

/* ── 6. Specialist tabs: Ad, Music Video, Doc, Series, Podcast ──────── */

/* Common panel chrome for specialist views */
.spec-tab-panel {
  padding: 24px 20px;
  max-width: 860px;
  margin: 0 auto;
}
.spec-section-head {
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--line);
}

/* Ad Treatment: action bar spacing */
#adtreatment-app .cs-action-bar {
  padding: 12px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Music Video: timeline row hover */
#musicvideo-app [class*="mv-section"]:hover,
#musicvideo-app [class*="mv-row"]:hover {
  background: rgba(37,99,235,.04);
}

/* Documentary: subject card accent */
#documentary-app [class*="subject-card"],
#documentary-app [class*="doc-subject"] {
  border-left: 3px solid var(--brand);
  padding-left: 12px;
}

/* Podcast: episode row hover */
#podcast-app [class*="ep-row"]:hover,
#podcast-app [class*="pod-ep"]:hover {
  background: rgba(37,99,235,.04);
}

/* Series: tab nav polish for series section nav */
#seriesroom-app .sr56-tab-btn {
  border-radius: 8px 8px 0 0;
  font-size: .72rem;
  font-weight: 800;
  padding: 7px 14px;
  transition: background .13s, color .13s;
}

/* Series overview cards: subtle hover lift */
#seriesroom-app .sr56-ep-card,
#seriesroom-app [class*="ep-card"] {
  transition: box-shadow .18s, transform .13s;
}
#seriesroom-app .sr56-ep-card:hover,
#seriesroom-app [class*="ep-card"]:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.10) !important;
  transform: translateY(-1px);
}

/* ── Mobile: hide episode rail on narrow screens ─────────────────────── */
@media (max-width: 760px) {
  #series-ep-rail {
    display: none !important;
  }
}

/* ── Fix 1: Series Room scrolling ────────────────────────────────────── */
/* .view-container clips with overflow:hidden but seriesroom needs to scroll */
#seriesroom-app {
  position: absolute !important;
  inset: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100% !important;
  -webkit-overflow-scrolling: touch;
}

/* ── Fix 2: Episode rail only in series mode — handled by JS injection ── */

/* ── Fix 3: Stripboard key legend — looseleaf paper strip ────────────── */
#sb-color-legend {
  min-height: 44px !important;
  height: auto !important;
  padding: 10px 14px 10px 36px !important;
  background:
    /* Red margin line */
    linear-gradient(
      to right,
      transparent 28px,
      rgba(239,68,68,.55) 28px,
      rgba(239,68,68,.55) 30px,
      transparent 30px
    ),
    /* Ruled blue lines at 22px intervals */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 21px,
      rgba(147,197,253,.55) 21px,
      rgba(147,197,253,.55) 22px
    ),
    /* Cream paper base */
    linear-gradient(to bottom, #fffef5, #fef9e7) !important;
  border-top: 1px solid rgba(200,180,100,.25) !important;
  border-bottom: 2px solid rgba(200,180,100,.35) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.8) !important;
  position: relative;
  overflow: hidden;
}
/* Torn top edge via ::before pseudo */
#sb-color-legend::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,.06) 0%, transparent 8%,
    rgba(0,0,0,.04) 20%, transparent 32%,
    rgba(0,0,0,.06) 45%, transparent 57%,
    rgba(0,0,0,.04) 70%, transparent 82%,
    rgba(0,0,0,.06) 95%, transparent 100%
  );
  pointer-events: none;
}
/* Hole punch dots on the left */
#sb-color-legend::after {
  content: '';
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,.08);
  box-shadow: 0 0 0 1px rgba(0,0,0,.10);
  pointer-events: none;
}
body.dark #sb-color-legend {
  background:
    linear-gradient(
      to right,
      transparent 28px,
      rgba(239,68,68,.30) 28px,
      rgba(239,68,68,.30) 30px,
      transparent 30px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 21px,
      rgba(59,130,246,.20) 21px,
      rgba(59,130,246,.20) 22px
    ),
    linear-gradient(to bottom, #1e2433, #1a2030) !important;
  border-color: rgba(255,255,255,.06) !important;
}

/* ── Fix 4: Cork background — smooth linen texture instead of tiled dots */
body {
  background-color: var(--bg-cork) !important;
  background-image:
    /* Subtle fiber streaks for linen/cork feel — no tiling */
    linear-gradient(102deg, rgba(255,255,255,.06) 0%, transparent 50%, rgba(0,0,0,.04) 100%),
    linear-gradient(168deg, rgba(0,0,0,.05) 0%, transparent 60%, rgba(255,255,255,.04) 100%),
    /* Soft vignette around edges */
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.18) 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100% !important;
  background-position: 0 0, 0 0, 0 0 !important;
}
body.dark {
  background-image:
    linear-gradient(102deg, rgba(255,255,255,.03) 0%, transparent 50%, rgba(0,0,0,.06) 100%),
    linear-gradient(168deg, rgba(0,0,0,.08) 0%, transparent 60%, rgba(255,255,255,.02) 100%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.35) 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100% !important;
}

/* ── Fix 5: Character Builder tab ───────────────────────────────────────*/
#char-builder-app {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-cork);
  -webkit-overflow-scrolling: touch;
}
.char-builder-wrap {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 28px 32px 60px;
  box-sizing: border-box;
}
.char-builder-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.char-builder-header h2 {
  font-size: 1.35rem;
  font-weight: 900;
  margin: 0;
  flex: 1;
  color: var(--ink);
}
.char-builder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 240px;
  flex-shrink: 0;
}
.char-builder-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.char-builder-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Notepad spine look */
  padding: 8px 0;
}
.char-builder-main {
  flex: 1;
  min-width: 0;
}
/* Index-card style character pills */
.char-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 36px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid rgba(200,180,120,.35);
  border-left: 4px solid rgba(239,68,68,.40);
  background:
    /* Ruled lines */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 19px,
      rgba(147,197,253,.35) 19px,
      rgba(147,197,253,.35) 20px
    ),
    linear-gradient(to bottom, #fffef5, #fef9e4);
  box-shadow: 1px 2px 6px rgba(0,0,0,.08);
  transition: box-shadow .13s, transform .1s, border-left-color .13s;
  user-select: none;
  position: relative;
}
/* Hole punch */
.char-pill::before {
  content: '';
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(0,0,0,.08);
  box-shadow: 0 0 0 1px rgba(0,0,0,.10);
}
.char-pill:hover { box-shadow: 2px 4px 12px rgba(0,0,0,.13); transform: translateY(-1px); border-left-color: rgba(239,68,68,.65); }
.char-pill.active {
  border-left-color: var(--brand);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 19px,
      rgba(147,197,253,.45) 19px,
      rgba(147,197,253,.45) 20px
    ),
    linear-gradient(to bottom, #eff6ff, #dbeafe);
  box-shadow: 2px 4px 14px rgba(37,99,235,.18);
}
.char-pill-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  background: rgba(37,99,235,.12);
  flex-shrink: 0;
}
.char-pill-name {
  font-size: .83rem;
  font-weight: 800;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.char-pill-role {
  font-size: .66rem;
  color: var(--muted);
  font-weight: 600;
}
body.dark .char-pill {
  background: linear-gradient(to bottom, #1e2433, #1a2030);
  border-color: rgba(255,255,255,.08);
  border-left-color: rgba(239,68,68,.35);
}
body.dark .char-pill.active {
  background: linear-gradient(to bottom, #1e2d4a, #1a2840);
  border-left-color: var(--brand);
}

/* Character card — full looseleaf paper sheet */
.char-card {
  background:
    /* Red margin line at 52px */
    linear-gradient(
      to right,
      transparent 48px,
      rgba(239,68,68,.50) 48px,
      rgba(239,68,68,.50) 50px,
      transparent 50px
    ),
    /* Ruled blue lines every 28px */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 27px,
      rgba(147,197,253,.50) 27px,
      rgba(147,197,253,.50) 28px
    ),
    /* Parchment base */
    linear-gradient(to bottom, #fffef5 0%, #fefce8 40%, #fffef5 100%);
  border-radius: 2px;
  box-shadow:
    2px 4px 18px rgba(0,0,0,.14),
    0 1px 3px rgba(0,0,0,.08),
    /* Left binding shadow */
    inset 4px 0 12px rgba(0,0,0,.05);
  border: 1px solid rgba(200,180,100,.30);
  border-left: 3px solid rgba(200,180,100,.25);
  overflow: hidden;
  position: relative;
}
/* Three hole punches down left edge */
.char-card::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 15%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg-cork);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.12),
    0 calc((100vh * 0.35)) 0 rgba(0,0,0,0),  /* spacer trick won't work - use multiple shadows */
    0 220px 0 var(--bg-cork),
    0 220px 0 0 rgba(0,0,0,.12),
    0 440px 0 var(--bg-cork),
    0 440px 0 0 rgba(0,0,0,.12);
  pointer-events: none;
  z-index: 2;
}
body.dark .char-card {
  background:
    linear-gradient(
      to right,
      transparent 48px,
      rgba(239,68,68,.22) 48px,
      rgba(239,68,68,.22) 50px,
      transparent 50px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 27px,
      rgba(59,130,246,.18) 27px,
      rgba(59,130,246,.18) 28px
    ),
    linear-gradient(to bottom, #1e2433, #1a2030);
  border-color: rgba(255,255,255,.06);
}
body.dark .char-card::before {
  background: #111827;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 220px 0 #111827, 0 220px 0 0 rgba(255,255,255,.08), 0 440px 0 #111827, 0 440px 0 0 rgba(255,255,255,.08);
}
.char-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 28px 18px 60px;
  border-bottom: 2px solid rgba(147,197,253,.45);
  position: relative;
}
.char-card-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  background: rgba(37,99,235,.10);
  cursor: pointer;
  border: 2px solid rgba(37,99,235,.18);
  transition: border-color .13s;
  flex-shrink: 0;
}
.char-card-avatar:hover { border-color: var(--brand); }
.char-card-name-wrap { flex: 1; min-width: 0; }
.char-card-name {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--ink);
  border: none;
  background: none;
  width: 100%;
  outline: none;
  font-family: inherit;
  padding: 0;
}
.char-card-name:focus { outline: 2px solid var(--brand); border-radius: 4px; }
.char-card-role {
  font-size: .78rem;
  color: var(--muted);
  border: none;
  background: none;
  width: 100%;
  outline: none;
  font-family: inherit;
  padding: 0;
  margin-top: 2px;
}
.char-card-role:focus { outline: 2px solid var(--brand); border-radius: 4px; }

/* Character section tabs — sit on top of the ruled lines */
.char-section-tabs {
  display: flex;
  gap: 0;
  padding: 0 24px 0 60px;
  border-bottom: 2px solid rgba(147,197,253,.45);
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(255,255,255,.25);
}
.char-section-tabs::-webkit-scrollbar { display: none; }
.char-stab {
  padding: 9px 16px;
  font-size: .70rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(120,100,60,.65);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
  font-family: inherit;
  border-radius: 4px 4px 0 0;
}
.char-stab:hover { color: var(--ink); background: rgba(255,255,255,.50); }
.char-stab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: rgba(255,255,255,.70);
}
body.dark .char-section-tabs { background: rgba(0,0,0,.15); border-bottom-color: rgba(59,130,246,.20); }
body.dark .char-stab { color: rgba(200,190,160,.50); }
body.dark .char-stab.active { color: var(--brand); background: rgba(255,255,255,.06); }

/* Character section body — paper fields */
.char-section-body {
  padding: 20px 28px 28px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.char-field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) { .char-field-group { grid-template-columns: 1fr; } }
.char-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.char-field.full { grid-column: 1 / -1; }
.char-field label {
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.char-field input,
.char-field textarea,
.char-field select {
  padding: 6px 8px;
  border-radius: 0;
  border: none;
  border-bottom: 1.5px solid rgba(147,197,253,.70);
  font-size: .85rem;
  font-family: inherit;
  background: transparent;
  color: #1a1a2e;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  transition: border-color .12s, box-shadow .12s;
}
.char-field input:focus,
.char-field textarea:focus,
.char-field select:focus {
  outline: none;
  border-bottom-color: var(--brand);
  box-shadow: 0 2px 0 rgba(37,99,235,.25);
}
.char-field input::placeholder,
.char-field textarea::placeholder {
  color: rgba(120,100,60,.45);
  font-style: italic;
}
body.dark .char-field input,
body.dark .char-field textarea,
body.dark .char-field select {
  border-bottom-color: rgba(59,130,246,.30);
  color: var(--ink);
}
body.dark .char-field input::placeholder,
body.dark .char-field textarea::placeholder {
  color: rgba(200,190,160,.35);
}

/* Inspiration board — image grid */
.char-inspo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.char-inspo-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1.5px dashed #d1d5db;
  transition: border-color .12s, background .12s;
  position: relative;
}
.char-inspo-cell:hover { border-color: var(--brand); background: rgba(37,99,235,.06); }
.char-inspo-cell img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.char-inspo-add {
  font-size: 1.4rem;
  color: var(--muted);
}
.char-inspo-del {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(185,28,28,.85);
  color: white;
  font-size: .6rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s;
}
.char-inspo-cell:hover .char-inspo-del { opacity: 1; }

/* Trait sliders */
.char-trait-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.char-trait-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink);
  min-width: 110px;
}
.char-trait-slider {
  flex: 1;
  accent-color: var(--brand);
}
.char-trait-val {
  font-size: .72rem;
  font-weight: 900;
  color: var(--brand);
  min-width: 24px;
  text-align: right;
}

/* Relationship entries — index card style */
.char-rel-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #fffef5, #fef9e4);
  border: 1px solid rgba(200,180,100,.30);
  border-left: 3px solid rgba(239,68,68,.35);
  margin-bottom: 6px;
  box-shadow: 1px 2px 4px rgba(0,0,0,.06);
}
body.dark .char-rel-entry { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); border-left-color: rgba(239,68,68,.20); }
.char-rel-badge {
  font-size: .62rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(37,99,235,.10);
  color: var(--brand);
  white-space: nowrap;
}
.char-rel-name { font-size: .82rem; font-weight: 700; color: var(--ink); }
.char-rel-type { font-size: .72rem; color: var(--muted); }

/* Empty state */
.char-builder-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  gap: 12px;
}
.char-builder-empty-icon { font-size: 3rem; opacity: .5; }
.char-builder-empty h3 { font-size: 1rem; font-weight: 800; margin: 0; color: var(--ink); }
.char-builder-empty p { font-size: .84rem; margin: 0; max-width: 320px; line-height: 1.6; }

/* Add character / delete buttons */
.char-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 800;
  background: var(--brand);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .13s, transform .1s;
}
.char-add-btn:hover { background: var(--brand-hover); }
.char-add-btn:active { transform: scale(.95); }
.char-del-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 800;
  background: rgba(185,28,28,.10);
  color: #b91c1c;
  border: 1px solid rgba(185,28,28,.20);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.char-del-btn:hover { background: rgba(185,28,28,.18); }

/* Phase 38 fixpack: click interception + stable character tab order */
#project-nav .tab[data-view="writer"] { order: 1; }
#project-nav .tab[data-view="beats"] { order: 2; }
#project-nav .tab[data-view="storyboard"] { order: 3; }
#project-nav .tab[data-view="characters"] { order: 4; }
#project-nav .tab-group-tabs { align-items: center; }

.folder { position: relative; }
.folder-body { position: relative; z-index: 1; }
.folder-actions { position: relative; z-index: 30; pointer-events: auto; }
.folder-actions .btn,
.folder-actions select,
.folder [title="Duplicate"],
.folder [title="Delete"],
.folder [title="Export JSON"],
.folder [title="Color"] { position: relative; z-index: 31; pointer-events: auto; }

header, .app-header { position: relative; z-index: 5; }
#seriesroom-root .sr55-hero,
#seriesroom-root .sr55-nav,
#seriesroom-root .sr55-body,
#seriesroom-root .sr55-card,
#seriesroom-root .sr55-bridge-grid,
#seriesroom-root .sr55-actions,
#seriesroom-root .sr55-tab-row { position: relative; z-index: 20; }
#seriesroom-root .sr55-btn,
#seriesroom-root .sr55-mini-btn,
#seriesroom-root button { position: relative; z-index: 25; pointer-events: auto; }


/* v4 visible toggle styling for checkboxes */
input[type="checkbox"].cbs-toggle,
#locations-app input[type="checkbox"],
#schedule-app input[type="checkbox"],
#callsheet-app input[type="checkbox"],
#contacts-app input[type="checkbox"] {
  -webkit-appearance:none; appearance:none;
  width:42px; height:24px; border-radius:999px;
  border:1px solid rgba(148,163,184,.55);
  background:rgba(148,163,184,.28);
  position:relative; cursor:pointer;
  vertical-align:middle; transition:background .18s ease,border-color .18s ease, box-shadow .18s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.16);
}
input[type="checkbox"].cbs-toggle::after,
#locations-app input[type="checkbox"]::after,
#schedule-app input[type="checkbox"]::after,
#callsheet-app input[type="checkbox"]::after,
#contacts-app input[type="checkbox"]::after {
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .18s ease;
}
input[type="checkbox"].cbs-toggle:checked,
#locations-app input[type="checkbox"]:checked,
#schedule-app input[type="checkbox"]:checked,
#callsheet-app input[type="checkbox"]:checked,
#contacts-app input[type="checkbox"]:checked {
  background:linear-gradient(135deg,#22c55e,#16a34a); border-color:#15803d; box-shadow:0 0 0 2px rgba(34,197,94,.18);
}
input[type="checkbox"].cbs-toggle:checked::after,
#locations-app input[type="checkbox"]:checked::after,
#schedule-app input[type="checkbox"]:checked::after,
#callsheet-app input[type="checkbox"]:checked::after,
#contacts-app input[type="checkbox"]:checked::after { transform:translateX(18px); }
input[type="checkbox"].cbs-toggle:focus-visible,
#locations-app input[type="checkbox"]:focus-visible,
#schedule-app input[type="checkbox"]:focus-visible,
#callsheet-app input[type="checkbox"]:focus-visible,
#contacts-app input[type="checkbox"]:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.24); }


/* Phase 38 v8: top-level creative order + specialty gate styling */
#project-nav .tab[data-view="writer"] { order: 1; }
#project-nav .tab[data-view="beats"] { order: 2; }
#project-nav .tab[data-view="storyboard"] { order: 3; }
#project-nav .tab[data-view="characters"] { order: 4; }
#project-nav .tab[data-view="seriesroom"] { order: 5; }
#tab-characters-anchor { display:none !important; width:0 !important; min-width:0 !important; padding:0 !important; margin:0 !important; border:0 !important; }
.p38-specialty-shell { padding: 24px; }
.p38-specialty-gate .sr55-card-head { align-items: center; gap: 16px; }