:root {
  --p39-safe-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  --p39-safe-top: max(0px, env(safe-area-inset-top, 0px));
  --p39-focus: 0 0 0 2px rgba(72,217,222,.45), 0 0 0 5px rgba(72,217,222,.14);
}

html, body {
  overscroll-behavior-x: none;
}

img.p39-broken-image {
  opacity: .001;
  min-height: 32px;
}
.p39-img-fallback {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: rgba(255,245,230,.78);
  font-size: .82rem;
  text-align: center;
}

.p39-save-pill {
  position: fixed;
  right: 14px;
  top: calc(14px + env(safe-area-inset-top, 0px));
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(19,25,31,.86);
  color: #f5ecdf;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 35px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(-18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  backdrop-filter: blur(12px);
}
.p39-save-pill.show {
  opacity: 1;
  transform: translateY(0);
}
.p39-save-pill .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52,211,153,.15);
}
.p39-save-pill[data-state="saving"] .dot {
  background: #fbbf24;
  box-shadow: 0 0 0 4px rgba(251,191,36,.16);
}

:where(button, .btn, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--p39-focus) !important;
}

:where(.modal, .modal-box, .modal-backdrop [role="dialog"]) {
  max-width: min(92vw, 760px);
}
:where(.modal-body, .modal-box .modal-body) {
  overscroll-behavior: contain;
}

.p39-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.p39-metric {
  min-width: 0;
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.p39-metric span {
  display:block;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,244,228,.66);
  margin-bottom: 5px;
}
.p39-metric strong {
  display:block;
  color: #fff8ef;
  font-size: 1rem;
}

.p39-card-toolbar {
  display: flex;
  gap: 10px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.p39-search-input,
.p39-filter-select {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff5e6;
  padding: 0 12px;
}
.p39-search-input {
  flex: 1 1 220px;
  min-width: 0;
}
.p39-filter-select {
  flex: 0 0 170px;
}
.p39-hidden { display: none !important; }

.p39-pulse-card {
  margin-bottom: 12px;
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}
.p39-pulse-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.p39-pulse-grid > div,
.p39-radar-block {
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.p39-pulse-grid span,
.p39-radar-block > span {
  display:block;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,244,228,.62);
  margin-bottom: 6px;
}
.p39-pulse-grid strong {
  color: #fff8ef;
}

.p39-radar-card { margin-top: 0; }
.p39-radar-stack {
  display: grid;
  gap: 10px;
}
.p39-radar-block ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(255,244,228,.88);
}
.p39-radar-block li + li { margin-top: 6px; }
.p39-timeline-note {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,244,228,.82);
}

.p39-hscroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.p39-hscroll > * { flex: 0 0 auto; }

#musicvideo-app .mtx-topbar,
#podcast-app .mtx-topbar {
  position: sticky;
  top: calc(10px + env(safe-area-inset-top, 0px));
  z-index: 8;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(8,13,18,.72);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

html[data-ui-tier="phone"] body {
  padding-bottom: var(--p39-safe-bottom);
}
html[data-ui-tier="phone"] .p39-save-pill {
  top: auto;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

html[data-ui-tier="phone"] :where(.modal-backdrop) {
  padding: 12px !important;
  align-items: flex-end !important;
}
html[data-ui-tier="phone"] :where(.modal, .modal-box, .modal-backdrop [role="dialog"]) {
  width: min(100%, 100vw - 8px) !important;
  max-width: min(100vw - 8px, 720px) !important;
  max-height: min(84vh, calc(var(--vvh, 100dvh) - 18px)) !important;
  border-radius: 20px 20px 14px 14px !important;
}
html[data-ui-tier="phone"] :where(.modal-body, .modal-box .modal-body) {
  max-height: min(64vh, calc(var(--vvh, 100dvh) - 150px)) !important;
  overflow-y: auto !important;
}

html[data-ui-tier="phone"] body[data-active-view="writer-app"] #writer-app,
html[data-ui-tier="phone"] body[data-active-view="writer-app"] #writer-app .editor-column {
  min-height: calc(var(--vvh, 100dvh) - 54px - var(--p39-safe-bottom)) !important;
  height: calc(var(--vvh, 100dvh) - 54px - var(--p39-safe-bottom)) !important;
}
html[data-ui-tier="phone"] body[data-active-view="writer-app"] #writer-app .editor-frame {
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: 6px !important;
}
html[data-ui-tier="phone"] body[data-active-view="writer-app"] #writer-app .script-page-sheet {
  width: min(100%, 390px) !important;
  margin-inline: auto !important;
  padding-inline: 10px !important;
}
html[data-ui-tier="phone"] body[data-active-view="writer-app"] #writer-app #pages-container {
  padding-bottom: calc(124px + var(--p39-safe-bottom)) !important;
}
html[data-ui-tier="phone"] body[data-active-view="writer-app"] .editor-statusbar {
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}
html[data-ui-tier="phone"] body[data-active-view="writer-app"] #writer-mobile-hub {
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

html[data-ui-tier="phone"] :where(#project-hub, #writer-app, #stripboard-app, #callsheet-app, #locations-app, #schedule-app, #storyboard-app, #corkboard-app, #wardrobe-app, #documentary-app, #pcc-app, #contacts-app, #props-app, #artdept-app, #auditions-app, #spatial-app, #adtreatment-app, #cine-app, #festival-app, #musicvideo-app, #podcast-app) {
  max-width: 100vw !important;
  overflow-x: clip !important;
}
html[data-ui-tier="phone"] :where(.topbar, .tabs, .subnav, .toolbar, .mtx-actions, .mtx-card-tools, .mvx-wide-story-actions, .p39-card-toolbar) {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
html[data-ui-tier="phone"] :where(.topbar > *, .tabs > *, .subnav > *, .toolbar > *, .mtx-actions > *, .mtx-card-tools > *, .mvx-wide-story-actions > *, .p39-card-toolbar > *) {
  flex: 0 0 auto !important;
}
html[data-ui-tier="phone"] :where(input, select, textarea, button, .btn) {
  font-size: 16px !important;
}
html[data-ui-tier="phone"] .p39-summary-strip {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
html[data-ui-tier="phone"] .p39-pulse-grid,
html[data-ui-tier="phone"] .pdx-form-grid.two,
html[data-ui-tier="phone"] .mvx-board-grid,
html[data-ui-tier="phone"] .pdx-board-grid {
  grid-template-columns: 1fr !important;
}
html[data-ui-tier="phone"] #musicvideo-app .mtx-shell,
html[data-ui-tier="phone"] #podcast-app .mtx-shell {
  padding: 12px 10px calc(100px + var(--p39-safe-bottom));
}
html[data-ui-tier="phone"] #musicvideo-app .mtx-topbar,
html[data-ui-tier="phone"] #podcast-app .mtx-topbar {
  top: calc(6px + env(safe-area-inset-top, 0px));
  padding: 10px 12px;
  border-radius: 16px;
}
html[data-ui-tier="phone"] .mtx-board {
  border-radius: 22px;
  padding: 12px;
}
html[data-ui-tier="phone"] .mtx-card {
  border-radius: 16px;
  padding: 12px;
}
html[data-ui-tier="phone"] .p39-search-input,
html[data-ui-tier="phone"] .p39-filter-select {
  width: 100%;
  flex: 1 1 100%;
}
html[data-ui-tier="phone"] .mvx-story-grid {
  grid-template-columns: 1fr !important;
}
html[data-ui-tier="phone"] .pdx-wave-seg .pdx-wave-label,
html[data-ui-tier="phone"] .mvx-shot-note {
  font-size: .78rem;
}

html[data-ui-tier="tablet"] .p39-summary-strip {
  grid-template-columns: repeat(2, minmax(0,1fr));
}