/* Phase 12 — Writer Mobile-first Upgrade */
html[data-ui-tier="phone"] body.cbs-writer-phone #writer-app {
  background: linear-gradient(180deg, #eef2f7 0%, #e7ecf4 100%);
}
html[data-ui-tier="phone"] body.cbs-writer-phone .editor-column {
  overflow: visible;
}
html[data-ui-tier="phone"] body.cbs-writer-phone .editor-frame {
  padding: 10px 8px calc(max(var(--cbs-writer-scroll-clearance), 80px)) !important;
  gap: 12px !important;
  scroll-padding-top: 10px !important;
  scroll-padding-bottom: calc(max(var(--cbs-writer-scroll-clearance), 80px)) !important;
  overscroll-behavior: contain;
}
html[data-ui-tier="phone"] body.cbs-writer-phone #pages-container {
  gap: 14px !important;
  padding-inline: 0 !important;
}
html[data-ui-tier="phone"] body.cbs-writer-phone #pages-zoom-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}
html[data-ui-tier="phone"] body.cbs-writer-phone .script-page-sheet {
  border-radius: 12px !important;
  margin: 0 0 12px !important;
  padding: 20px 14px 24px !important;  /* compact bottom padding — fixed-height pages */
  box-shadow: 0 10px 28px rgba(17,24,39,.10), 0 1px 4px rgba(17,24,39,.08) !important;
  border: 1px solid rgba(17,24,39,.07);
  min-height: 0 !important;         /* remove the 1056px floor on phones */
  overflow: hidden !important;      /* clip at page boundary like desktop */
}
html[data-ui-tier="phone"] body.cbs-writer-phone .page-content {
  line-height: 1.5;
  height: 800px !important;        /* fixed page height — matches MOBILE_PAGE_PX */
  min-height: 0 !important;
  overflow: hidden !important;     /* clip content at page boundary */
  overflow-y: clip !important;
}
html[data-ui-tier="phone"] body.cbs-writer-phone .page-num-badge,
html[data-ui-tier="phone"] body.cbs-writer-phone .page-more-hint {
  bottom: 6px !important;
}
html[data-ui-tier="phone"] body.cbs-writer-phone .line.character { margin-left: 24% !important; margin-right: 2% !important; }
html[data-ui-tier="phone"] body.cbs-writer-phone .line.dialogue { margin-left: 10% !important; margin-right: 6% !important; }
html[data-ui-tier="phone"] body.cbs-writer-phone .line.parenthetical { margin-left: 16% !important; margin-right: 10% !important; }
html[data-ui-tier="phone"] body.cbs-writer-phone .line.transition { margin-left: 32% !important; margin-right: 0 !important; }

html[data-ui-tier="phone"] body.cbs-writer-phone #mobile-format-bar {
  padding: 6px !important;
  border-radius: 16px !important;
  max-width: calc(100vw - 24px) !important;
  width: calc(100vw - 24px) !important;
  display: flex;
  gap: 6px;
  align-items: center;
  box-shadow: 0 14px 38px rgba(15,23,42,.24), 0 2px 10px rgba(15,23,42,.15) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-ui-tier="phone"] body.cbs-writer-phone #fmt-drag-handle {
  padding-inline: 6px !important;
  opacity: .42;
}
html[data-ui-tier="phone"] body.cbs-writer-phone #fmt-drag-handle span {
  width: 16px;
}
html[data-ui-tier="phone"] body.cbs-writer-phone #fmt-chips-scroll {
  flex: 1 1 auto;
  min-width: 0;
}
html[data-ui-tier="phone"] body.cbs-writer-phone .format-chip {
  min-height: 38px !important;
  padding: 7px 12px !important;
  font-size: .7rem !important;
  border-radius: 12px !important;
  gap: 5px !important;
}
html[data-ui-tier="phone"] body.cbs-writer-phone #fmt-collapse-toggle {
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.74);
  color: #0f172a;
  font: inherit;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
html[data-ui-tier="phone"] body.dark.cbs-writer-phone #fmt-collapse-toggle {
  background: rgba(15,23,42,.78);
  color: #e5e7eb;
  border-color: rgba(255,255,255,.09);
}
html[data-ui-tier="phone"] body.cbs-writer-phone #fmt-collapse-toggle .fmt-toggle-closed { display: none; }
html[data-ui-tier="phone"] body.cbs-writer-phone #mobile-format-bar.is-collapsed #fmt-chips-scroll { display: none; }
html[data-ui-tier="phone"] body.cbs-writer-phone #mobile-format-bar.is-collapsed #fmt-collapse-toggle .fmt-toggle-open { display: none; }
html[data-ui-tier="phone"] body.cbs-writer-phone #mobile-format-bar.is-collapsed #fmt-collapse-toggle .fmt-toggle-closed { display: inline; }

html[data-ui-tier="phone"] body.cbs-writer-phone #mode-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px !important;
  min-height: 40px;
  max-width: calc(100vw - 96px);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(15,23,42,.18);
}
html[data-ui-tier="phone"] body.cbs-writer-phone #mode-text {
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-ui-tier="phone"] body.cbs-writer-phone #block-type-select {
  max-width: 116px;
}
html[data-ui-tier="phone"] body.cbs-writer-phone .phase12-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: inherit;
  margin-left: 2px;
  font: inherit;
  font-weight: 900;
}
html[data-ui-tier="phone"] body.cbs-writer-phone #mode-indicator:not(.expanded) #block-type-select {
  display: none !important;
}
html[data-ui-tier="phone"] body.cbs-writer-phone #mode-indicator.expanded {
  max-width: calc(100vw - 24px);
}
html[data-ui-tier="phone"] body.cbs-writer-phone #mode-indicator.expanded #block-type-select {
  display: inline-block !important;
}

html[data-ui-tier="phone"] body.cbs-writer-phone .editor-statusbar {
  bottom: calc(var(--cbs-bottom-nav-height, 0px) + var(--sab) + 10px) !important;
  padding: 6px 12px !important;
  min-height: 34px;
  max-width: calc(100vw - 24px);
}
html[data-ui-tier="phone"] body.cbs-writer-phone .editor-statusbar .esb-divider,
html[data-ui-tier="phone"] body.cbs-writer-phone .editor-statusbar .esb-sep {
  display: none;
}
html[data-ui-tier="phone"] body.cbs-writer-phone .editor-statusbar span {
  white-space: nowrap;
}

html[data-ui-tier="phone"] body.cbs-writer-keyboard-open #mobile-format-bar {
  opacity: .98;
}
html[data-ui-tier="phone"] body.cbs-writer-keyboard-open .editor-statusbar {
  padding-inline: 10px !important;
}
html[data-ui-tier="phone"] body.cbs-writer-keyboard-open .editor-statusbar #stat-words,
html[data-ui-tier="phone"] body.cbs-writer-keyboard-open .editor-statusbar #stat-pages,
html[data-ui-tier="phone"] body.cbs-writer-keyboard-open .editor-statusbar #stat-scenes {
  display: none !important;
}
html[data-ui-tier="phone"] body.cbs-writer-keyboard-open #mode-indicator:not(.expanded) #block-type-select {
  display: none !important;
}
html[data-ui-tier="phone"] body.cbs-writer-keyboard-open #mode-indicator {
  max-width: calc(100vw - 120px);
}
html[data-ui-tier="phone"] body.cbs-writer-keyboard-open #mobile-format-bar.is-collapsed {
  width: auto !important;
  right: auto !important;
}

html[data-ui-tier="tablet"] body[data-active-view="writer-app"] .editor-frame {
  scroll-padding-bottom: calc(max(var(--cbs-writer-scroll-clearance), 80px)) !important;
}
html[data-ui-tier="tablet"] body[data-active-view="writer-app"] .script-page-sheet {
  border-radius: 10px;
}

/* Dark mode — match specificity of phone-tier light rules to ensure override */
html[data-ui-tier="phone"] body.dark.cbs-writer-phone #writer-app {
  background: linear-gradient(180deg, #131b29 0%, #0f1724 100%);
}
html[data-ui-tier="phone"] body.dark.cbs-writer-phone .script-page-sheet {
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.38), 0 1px 3px rgba(0,0,0,.24) !important;
}