:root {
  --cbs-page-gutter: 16px;
  --cbs-card-pad: 16px;
  --cbs-section-gap: 16px;
  --cbs-control-gap: 10px;
  --cbs-tap-target: 44px;
  --cbs-bottom-nav-height: 0px;
  --cbs-floating-clearance: 0px;
  --cbs-scroll-clearance: 88px;
  --cbs-writer-scroll-clearance: 128px;
  --cbs-z-content: 1;
  --cbs-z-sticky: 120;
  --cbs-z-nav: 600;
  --cbs-z-fab: 4600;
  --cbs-z-format: 4500;
  --cbs-z-tag: 5000;
  --cbs-z-modal: 9000;
}

html[data-ui-tier="phone"], body[data-ui-tier="phone"] {
  --cbs-page-gutter: 14px;
  --cbs-card-pad: 14px;
  --cbs-section-gap: 14px;
  --cbs-control-gap: 8px;
}

html[data-ui-tier="tablet"], body[data-ui-tier="tablet"] {
  --cbs-page-gutter: 18px;
  --cbs-card-pad: 16px;
}

#bottom-nav { z-index: var(--cbs-z-nav) !important; }
#mobile-format-bar { z-index: var(--cbs-z-format) !important; }
#tag-float-bar { z-index: var(--cbs-z-tag) !important; }
#mode-indicator, #sn-toolbar-btn { z-index: var(--cbs-z-fab) !important; }
#sn-popover, .modal { z-index: var(--cbs-z-modal) !important; }

.view-container,
.app-pad,
#project-hub,
#writer-app,
#stripboard-app,
#callsheet-app,
#locations-app,
#schedule-app,
#storyboard-app,
#corkboard-app,
#wardrobe-app,
#contacts-app,
#props-app,
#artdept-app,
#auditions-app,
#documentary-app,
#pcc-app,
#spatial-app,
#adtreatment-app {
  box-sizing: border-box;
}

body[data-ui-tier="phone"] .view-container {
  padding-bottom: calc(var(--cbs-scroll-clearance) + 8px) !important;
}
body[data-ui-tier="tablet"] .view-container {
  padding-bottom: calc(max(28px, var(--cbs-scroll-clearance) * 0.5) + 20px) !important;
}

body[data-ui-tier="phone"] .app-pad,
body[data-ui-tier="phone"] #project-hub,
body[data-ui-tier="phone"] #contacts-app,
body[data-ui-tier="phone"] #props-app,
body[data-ui-tier="phone"] #artdept-app,
body[data-ui-tier="phone"] #auditions-app,
body[data-ui-tier="phone"] #schedule-app,
body[data-ui-tier="phone"] #storyboard-app,
body[data-ui-tier="phone"] #corkboard-app,
body[data-ui-tier="phone"] #stripboard-app,
body[data-ui-tier="phone"] #callsheet-app,
body[data-ui-tier="phone"] #locations-app,
body[data-ui-tier="phone"] #wardrobe-app,
body[data-ui-tier="phone"] #documentary-app,
body[data-ui-tier="phone"] #pcc-app,
body[data-ui-tier="phone"] #spatial-app,
body[data-ui-tier="phone"] #adtreatment-app {
  padding-left: var(--cbs-page-gutter) !important;
  padding-right: var(--cbs-page-gutter) !important;
}

body[data-ui-tier="phone"] .app-pad {
  padding-bottom: calc(var(--cbs-scroll-clearance) + 18px) !important;
}
body[data-ui-tier="phone"] #project-hub {
  padding-bottom: calc(var(--cbs-scroll-clearance) + 18px) !important;
}
body[data-ui-tier="tablet"] .app-pad,
body[data-ui-tier="tablet"] #project-hub {
  padding-left: var(--cbs-page-gutter) !important;
  padding-right: var(--cbs-page-gutter) !important;
}

body[data-ui-tier="phone"] .editor-frame {
  padding-bottom: calc(var(--cbs-writer-scroll-clearance) + 20px) !important;
  scroll-padding-bottom: calc(var(--cbs-writer-scroll-clearance) + 36px) !important;
}
body[data-ui-tier="phone"] #pages-container,
body[data-ui-tier="phone"] .page-content {
  scroll-padding-bottom: calc(var(--cbs-writer-scroll-clearance) + 48px) !important;
}
body[data-ui-tier="tablet"] .editor-frame {
  scroll-padding-bottom: calc(var(--cbs-scroll-clearance) + 28px) !important;
}

body[data-ui-tier="phone"] .module-toolbar,
body[data-ui-tier="phone"] .cs-action-bar,
body[data-ui-tier="phone"] .stripboard-toolbar,
body[data-ui-tier="phone"] .sched-toolbar,
body[data-ui-tier="phone"] .btn-group,
body[data-ui-tier="phone"] .top-actions {
  gap: var(--cbs-control-gap) !important;
  flex-wrap: wrap !important;
}

body[data-ui-tier="phone"] .btn,
body[data-ui-tier="phone"] .format-chip,
body[data-ui-tier="phone"] .bottom-tab,
body[data-ui-tier="phone"] .hdr-icon-btn,
body[data-ui-tier="phone"] .tag-float-btn,
body[data-ui-tier="phone"] .sn-pop-close,
body[data-ui-tier="phone"] .sn-pop-resolve-btn,
body[data-ui-tier="phone"] .sn-pop-delete-btn,
body[data-ui-tier="phone"] .cs-share-btn,
body[data-ui-tier="phone"] .cs-track-btn {
  min-height: var(--cbs-tap-target) !important;
}

body[data-ui-tier="phone"] .card,
body[data-ui-tier="phone"] .folder-body,
body[data-ui-tier="phone"] .contact-card,
body[data-ui-tier="phone"] .prop-card,
body[data-ui-tier="phone"] .artdept-card,
body[data-ui-tier="phone"] .audition-card,
body[data-ui-tier="phone"] .sched-scene-card,
body[data-ui-tier="phone"] .location-card,
body[data-ui-tier="phone"] .pcc-card {
  padding: var(--cbs-card-pad) !important;
}

body[data-ui-tier="phone"] #mobile-format-bar,
body[data-ui-tier="phone"] #tag-float-bar {
  max-width: calc(100vw - (var(--cbs-page-gutter) * 2)) !important;
}

body[data-ui-tier="phone"] #sn-toolbar-btn {
  right: calc(var(--cbs-page-gutter) + var(--sar)) !important;
}

body[data-ui-tier="phone"] #project-hub,
body[data-ui-tier="phone"] .app-pad,
body[data-ui-tier="phone"] .card,
body[data-ui-tier="phone"] .module-toolbar,
body[data-ui-tier="phone"] .cs-action-bar,
body[data-ui-tier="phone"] .stripboard-toolbar {
  gap: var(--cbs-section-gap);
}

body[data-ui-tier="phone"] .bottom-tab {
  min-width: 54px !important;
  max-width: 68px !important;
}

body[data-ui-tier="tablet"] .bottom-tab {
  min-width: 62px;
  max-width: 78px;
}

html, body {
  min-height: 100%;
}
body {
  min-height: 100dvh;
}