/* ─────────────────────────────────────────────────────────────────────────────
 * PHASE 103 — Mobile redesign
 *
 * Goes beyond pure polish (phase102) and addresses structural mobile UX:
 *
 *   1. Every app pane scrolls *internally* on mobile (the body + view-container
 *      have overflow:hidden, so without this rule any content over 740px gets
 *      clipped — Call Sheet, Beats, Locations, Schedule, etc. were all
 *      affected).
 *   2. Writer extends to within 8px of the dock; bottom padding cut from
 *      140px → 92px. When the on-screen keyboard is open, padding tightens
 *      further so tagging/format buttons remain reachable.
 *   3. Bottom dock gets a 5-tab primary row + an overflow ("More") sheet so
 *      users no longer hunt sideways through 26 tiny tabs.
 *   4. Page-level breathing room: cards stack with consistent gap, headers
 *      have generous padding, sections get clear separators.
 *
 * This file is loaded AFTER phase102, so it can override our own earlier rules.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── html + body background unification on mobile ──────────────────────
 * wardrobe-local-png-rebuild.css forces `html, body { background:
 * rgb(202,164,108) }` (corkboard tan) which shows through anywhere the
 * active app pane doesn't cover — including the strip between page
 * content and the bottom dock. On mobile we paint the whole viewport
 * cream by default (and pure white on writer view) so the dock visually
 * meets continuous page background, not a tan gap.
 *
 * Specificity has to beat (0, 0, 2) `html, body` rule with !important from
 * wardrobe-local. body + a class hits (0, 1, 1) — enough. */
@media (max-width: 760px) {
  html,
  body[data-ui-tier="phone"],
  body[data-ui-tier="phone"] .view-container,
  body[data-ui-tier="phone"] [id$="-app"]:not(.hidden) {
    background: #fcfaf3 !important;
  }
}
/* Writer is white (paper) instead of cream so the script page is
 * continuous with the surrounding shell. */
html[data-ui-tier="phone"] body[data-active-view="writer-app"],
html[data-ui-tier="phone"] body[data-active-view="writer-app"] .view-container,
html[data-ui-tier="phone"] body[data-active-view="writer-app"] #writer-app {
  background: #ffffff !important;
}
html:has(body[data-active-view="writer-app"]) {
  background: #ffffff !important;
}

@media (max-width: 760px) {
  /* Header — logo + actions cluster were summing to 390px (15px past the
   * 375 viewport). Clip the header and let the actions cluster shrink. */
  header {
    width: 100% !important;
    max-width: 100vw;
    overflow: hidden;
  }
  .header-actions {
    flex-wrap: nowrap !important;
    min-width: 0;
    gap: 4px !important;
  }
  /* Collab team button: trim to icon-only on phone so it doesn't push
   * other actions off the right edge. The full label still appears in the
   * tooltip / on tablet+. */
  #collab-team-btn {
    max-width: 56px;
    padding-inline: 8px !important;
    overflow: hidden;
  }
  #collab-team-btn > * {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* phase103 More sheet was peeking ~23px above the dock when closed
   * because translateY(110%) of a 487px sheet (60vh) wasn't enough to
   * fully clear the 72px-tall dock. Use translateY(120%) and add a fixed
   * baseline so even a short sheet hides completely. */
  .phase103-more-sheet {
    transform: translateY(calc(100% + 96px));
  }
  .phase103-more-sheet[data-open="true"] {
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  /* ─── 1. Internal scroll on every app pane ───────────────────────────── */
  /* Body + view-container have overflow:hidden to prevent iOS bounce.
   * Each app must scroll itself. Skip writer (uses pages-container scroll)
   * and corkboard/spatial/seriesroom (custom layouts that already scroll). */
  body[data-active-view$="-app"] .view-container > [id$="-app"]:not(.hidden):not(#writer-app):not(#corkboard-app):not(#seriesroom-app) {
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    height: calc(100dvh - var(--phase103-shell, 64px) - var(--phase103-dock, 72px)) !important;
    max-height: calc(100dvh - var(--phase103-shell, 64px) - var(--phase103-dock, 72px));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  /* Special tweaks for apps that paint inside .view-container with their own
   * flex/grid that breaks the height clamp above */
  body[data-active-view="callsheet-app"] #callsheet-app,
  body[data-active-view="reports-app"] #reports-app,
  body[data-active-view="continuity-app"] #continuity-app,
  body[data-active-view="media-app"] #media-app,
  body[data-active-view="safety-app"] #safety-app,
  body[data-active-view="pcc-app"] #pcc-app,
  body[data-active-view="cine-app"] #cine-app {
    display: block !important;
  }

  /* ─── 2. Writer mobile: extend to dock, breathe under keyboard ─────────
   * Specificity matched against phase39-beta-polish.css which pins 124px
   * with html[data-ui-tier]+body[data-active-view]+#writer-app+#pages-container.
   * We use the same anchor + a class hook so we win without globalizing. */
  html[data-ui-tier="phone"] body[data-active-view="writer-app"] #writer-app #pages-container {
    /* dock 72 + 8 air = 80; safe-area handled by env() */
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }

  /* The last page-sheet stretches to fill the visible writer area so the
   * white paper extends all the way to the format-bar / dock instead of
   * leaving a cream body-colour gap beneath short scripts.
   *   100dvh − header(58) − bottom-nav(72) − wmh-dock(44) − tiny gap(8) ≈ -182
   * Use 96px so the paper meets the bottom edge of the format bar. */
  html[data-ui-tier="phone"] body[data-active-view="writer-app"] #pages-container .script-page-sheet:last-of-type {
    min-height: calc(100dvh - 96px) !important;
    display: flex;
    flex-direction: column;
  }
  html[data-ui-tier="phone"] body[data-active-view="writer-app"] #pages-container .script-page-sheet:last-of-type .page-content {
    flex: 1 1 auto;
  }
  /* Paper background continuity: paint everything from body down to the
   * page-sheet the SAME white as the script paper so there's no visible
   * boundary anywhere — the writer reads as one continuous sheet from the
   * header all the way to the format bar / dock. */
  html[data-ui-tier="phone"] body[data-active-view="writer-app"],
  html[data-ui-tier="phone"] body[data-active-view="writer-app"] .view-container,
  html[data-ui-tier="phone"] body[data-active-view="writer-app"] #writer-app,
  html[data-ui-tier="phone"] body[data-active-view="writer-app"] #editor-frame,
  html[data-ui-tier="phone"] body[data-active-view="writer-app"] #pages-container,
  html[data-ui-tier="phone"] body[data-active-view="writer-app"] #pages-zoom-wrapper {
    background: #ffffff !important;
  }
  /* Strip lateral and bottom padding so the page-sheet meets the screen
   * edges and extends down to the format bar. Specificity matched with
   * phase35-mobile-polish.css which forces 6/8/0 with !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.app-pad {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 0 !important;
  }
  html[data-ui-tier="phone"] #pages-container,
  html[data-ui-tier="phone"] #pages-zoom-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html[data-ui-tier="phone"] #pages-container .script-page-sheet {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  /* When the writer reports a keyboard-open state, compress further so the
   * caret/tag bar stays reachable above the keyboard */
  html[data-ui-tier="phone"] body[data-keyboard-open="true"][data-active-view="writer-app"] #writer-app #pages-container,
  html[data-ui-tier="phone"] body[data-writer-keyboard="open"][data-active-view="writer-app"] #writer-app #pages-container {
    padding-bottom: 24px !important;
  }

  /* When the keyboard is open, hide the bottom dock so the user gets the
   * full visible area for editing, and pin the writer mobile hub's format /
   * tag / note buttons to a floating bar that sits just above the keyboard.
   * This is the bar the user reaches for to apply tags or change line types
   * mid-sentence — it cannot be hidden behind the keyboard. */
  body[data-keyboard-open="true"] #bottom-nav,
  body[data-writer-keyboard="open"] #bottom-nav {
    display: none !important;
  }
  body[data-keyboard-open="true"] #writer-mobile-hub .wmh-dock,
  body[data-writer-keyboard="open"] #writer-mobile-hub .wmh-dock {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%);
    /* visualViewport-tracked keyboard offset (set by phase103-mobile-dock.js)
     * keeps this above the soft keyboard on iOS / Android */
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--keyboard-offset, 0px));
    z-index: 9050;
    display: inline-flex !important;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 28px;
    background: rgba(20, 12, 6, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(243, 198, 109, 0.45);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  }
  body[data-keyboard-open="true"] #writer-mobile-hub .wmh-dock .wmh-mini,
  body[data-writer-keyboard="open"] #writer-mobile-hub .wmh-dock .wmh-mini {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(243, 198, 109, 0.32);
    color: #fff5df;
  }
  body[data-keyboard-open="true"] #writer-mobile-hub .wmh-dock .wmh-mini.active,
  body[data-writer-keyboard="open"] #writer-mobile-hub .wmh-dock .wmh-mini.active {
    background: linear-gradient(135deg, rgba(243, 198, 109, 0.28), rgba(158, 52, 44, 0.22));
    border-color: rgba(243, 198, 109, 0.6);
  }
  /* Format hub buttons: stronger visual weight so they don't look disabled */
  #writer-mobile-hub .wmh-mini {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    border-width: 1.5px !important;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  #writer-mobile-hub .wmh-mini:active {
    transform: scale(0.92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  }
  #writer-mobile-hub .wmh-mini.active {
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.25);
  }

  /* Mobile status bar: tighter pill */
  body[data-active-view="writer-app"] .editor-statusbar {
    font-size: 12px !important;
    padding: 5px 14px !important;
    border-radius: 10px;
    max-width: calc(100vw - 32px);
  }

  /* Writer pad-shell tightens too */
  #writer-app.app-pad,
  #writer-app {
    padding-top: 4px !important;
    padding-bottom: 0 !important;
  }
  /* Writer page sheet: more space, less air around */
  #pages-container .script-page-sheet {
    margin-bottom: 6px !important;
  }

  /* ─── 3. Bottom dock redesign — primary row + More sheet ─────────────── */
  /* Layout for the new structure injected by phase103-mobile-dock.js */
  #bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: rgba(20, 12, 6, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(243, 198, 109, 0.18);
  }
  #bottom-nav-inner.phase103-dock-primary {
    overflow: hidden !important;
    padding: 6px 8px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    align-items: center;
  }
  /* The 5 primary tabs share the row equally. Specificity bump (body + 2
   * IDs + 2 classes) is needed to beat phase61's 112px min-width on
   * .bottom-tab.active. */
  body #bottom-nav #bottom-nav-inner.phase103-dock-primary > .bottom-tab,
  body #bottom-nav #bottom-nav-inner.phase103-dock-primary > .bottom-tab.active,
  body #bottom-nav #bottom-nav-inner.phase103-dock-primary > .phase103-more-btn {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    max-width: none !important;
    height: 50px !important;
    padding: 4px 2px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    border-radius: 12px !important;
    box-sizing: border-box;
  }
  /* Hide the original-flow tabs/buttons that aren't in the primary set */
  #bottom-nav-inner.phase103-dock-primary > [data-phase103-hidden="1"] {
    display: none !important;
  }
  /* Active primary tab visual */
  #bottom-nav-inner.phase103-dock-primary > .bottom-tab.active {
    background: linear-gradient(135deg, rgba(243, 198, 109, 0.22), rgba(158, 52, 44, 0.18)) !important;
    border: 1px solid rgba(243, 198, 109, 0.45) !important;
  }
  /* "More" button styled as a tab */
  .phase103-more-btn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(243, 198, 109, 0.22);
    color: #fff5df;
    cursor: pointer;
    font-weight: 700;
  }
  .phase103-more-btn[aria-expanded="true"] {
    background: linear-gradient(135deg, rgba(243, 198, 109, 0.22), rgba(158, 52, 44, 0.18));
    border-color: rgba(243, 198, 109, 0.5);
  }
  .phase103-more-btn .phase103-more-icon { font-size: 18px; line-height: 1; }
  .phase103-more-btn .phase103-more-label { font-size: 10px; letter-spacing: 0.04em; }

  /* Overflow sheet anchored above the dock */
  .phase103-more-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(72px + env(safe-area-inset-bottom, 0));
    z-index: 9001;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, rgba(28, 18, 10, 0.97), rgba(40, 24, 12, 0.97));
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(243, 198, 109, 0.28);
    box-shadow: 0 -6px 36px rgba(0, 0, 0, 0.45);
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom)) 14px;
    transform: translateY(110%);
    transition: transform 0.22s ease;
  }
  .phase103-more-sheet[data-open="true"] { transform: translateY(0); }
  .phase103-more-sheet h4 {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f3c66d;
    margin: 0 0 8px;
    font-weight: 800;
  }
  .phase103-more-sheet h4:not(:first-child) { margin-top: 14px; }
  .phase103-more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .phase103-more-grid > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 64px;
    padding: 8px 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(243, 198, 109, 0.18);
    color: #fff5df;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
  }
  .phase103-more-grid > button:active,
  .phase103-more-grid > button.active {
    background: linear-gradient(135deg, rgba(243, 198, 109, 0.26), rgba(158, 52, 44, 0.18));
    border-color: rgba(243, 198, 109, 0.5);
  }
  .phase103-more-grid > button .phase103-more-glyph { font-size: 22px; line-height: 1; }
  .phase103-more-grid > button .phase103-more-name { font-weight: 600; }

  .phase103-more-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 9000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  .phase103-more-backdrop[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
  }

  /* ─── 4. Beats: compact mobile toolbar ───────────────────────────────── */
  #corkboard-app .cork-toolbar,
  #corkboard-app .cork-controls,
  #corkboard-app [class*="cork-toolbar"] {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  /* Combine Search+filter row, then a single action row */
  #corkboard-app .cork-toolbar > * { min-width: 0 !important; }
  #corkboard-app .cork-toolbar select.cork-select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
  /* Tension Arc graph: smaller header on mobile */
  #corkboard-app .cork-tension-card {
    margin-top: 8px;
  }
  /* Beat sticky note: full width, no max-width clamping */
  #corkboard-app .cork-beat-card,
  #corkboard-app [class*="beat-card"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ─── 4b. Character Builder mobile redesign ─────────────────────────── */
  /* The original had a 240px sidebar + main flex layout that squeezed the
   * detail to ~47px on a 375px viewport, plus an outer wrap with
   * 28px/32px/60px padding. Phase102 stacks them vertically; phase103
   * tightens the wrap so content actually fits, and turns the sidebar into
   * a horizontal chip-rail so the detail form is immediately visible
   * without scrolling past the cast list. */
  #char-builder-app {
    padding-bottom: 16px !important;
  }
  #char-builder-app .char-builder-wrap {
    padding: 12px 12px 24px !important;
  }
  #char-builder-app .char-builder-layout {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 0 !important;
  }
  /* Sidebar -> horizontal scrolling cast strip */
  #char-builder-app .char-builder-sidebar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding: 4px 2px 10px !important;
    max-height: none !important;
    width: 100% !important;
    scroll-snap-type: x proximity;
  }
  #char-builder-app .char-builder-sidebar > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    min-width: 140px !important;
    max-width: 200px !important;
  }
  /* Main detail panel: full width */
  #char-builder-app .char-builder-main {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
  /* Card: lose the lateral margin so it spans the wrap edge-to-edge */
  #char-builder-app .char-card {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px;
  }
  /* Section body originally has padding 20/28/28/60 — that 60px left
   * gutter alone ate 1/6 of a 375 phone. Tighten to 14px each side. */
  #char-builder-app .char-section-body {
    padding: 16px 14px 20px !important;
  }
  /* Field rows on mobile: stack label+input vertically with comfortable
   * tap-target heights and FULL WIDTH so users can actually see what
   * they're typing */
  #char-builder-app .char-field {
    padding: 4px 0 10px !important;
    width: 100% !important;
  }
  #char-builder-app .char-section-body,
  #char-builder-app .char-section-body > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  #char-builder-app .char-field input,
  #char-builder-app .char-field textarea,
  #char-builder-app .char-field select,
  #char-builder-app .char-section-body input,
  #char-builder-app .char-section-body textarea,
  #char-builder-app .char-section-body select {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
  /* Narrative textareas should be tall enough to write paragraphs */
  #char-builder-app .char-section-body textarea {
    min-height: 120px !important;
    line-height: 1.5;
  }

  /* Card header: stack name + role under the avatar so inputs aren't
   * squeezed to 108px on a phone. Original padding was 22/28/18/60 —
   * the 60px left padding alone ate 1/6 of the screen. */
  #char-builder-app .char-card-header {
    flex-wrap: wrap !important;
    padding: 14px 14px 10px !important;
    gap: 10px !important;
    align-items: center;
  }
  #char-builder-app .char-card-avatar {
    flex: 0 0 56px !important;
    order: 1;
  }
  #char-builder-app .char-del-btn {
    order: 2;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    min-height: 40px;
  }
  #char-builder-app .char-card-name-wrap {
    flex: 0 0 100% !important;
    width: 100% !important;
    order: 3;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
  }
  #char-builder-app .char-card-name-wrap > * {
    width: 100% !important;
  }
  #char-builder-app .char-card-name-wrap input {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
  }

  /* Tabs strip: fade gradient on right edge to cue horizontal scroll */
  #char-builder-app .char-section-tabs {
    position: relative;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }
  /* Make the Mind Arcade promo card and action row breathe properly */
  #char-builder-app .char-add-row,
  #char-builder-app .char-actions-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #char-builder-app .char-add-btn {
    flex: 1 1 auto;
    min-height: 40px;
  }

  /* ─── 4c. Generic input width fix ─────────────────────────────────────
   * Many pages (Schedule, Locations, Wardrobe, Props, Art Dept, etc.) use
   * nested .card > .day-card > .field-group structures where each level
   * adds 14px of horizontal padding. Stacking 2-3 levels eats 60-90px
   * from a 375 phone, squeezing inputs to ~260px.
   *
   * Tighten secondary-level padding so inputs reach near full viewport
   * width on mobile. The OUTER .card keeps its 14px (visual separation),
   * but nested cards/groups get 0 horizontal padding. */
  [id$="-app"]:not(#writer-app) .card .card,
  [id$="-app"]:not(#writer-app) [class*="-card"] [class*="-group"],
  [id$="-app"]:not(#writer-app) [class*="-card"] [class*="-fields"],
  [id$="-app"]:not(#writer-app) .sched-day-card,
  [id$="-app"]:not(#writer-app) .sched-fields-grid,
  [id$="-app"]:not(#writer-app) .sched-field-group,
  [id$="-app"]:not(#writer-app) .loc-detail,
  [id$="-app"]:not(#writer-app) .loc-fields,
  [id$="-app"]:not(#writer-app) .loc-detail-body {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* All form inputs/textareas/selects in app panes use the full available
   * width so users can actually see what they type */
  [id$="-app"]:not(#writer-app) input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  [id$="-app"]:not(#writer-app) textarea,
  [id$="-app"]:not(#writer-app) select {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ─── 5. Generic mobile breathing room ───────────────────────────────── */
  /* Pages: consistent gap between cards, more padding around content */
  [id$="-app"]:not(.hidden):not(#writer-app):not(#corkboard-app) > * {
    margin-bottom: 12px;
  }
  /* Most app cards on mobile */
  [id$="-app"]:not(.hidden) .card,
  [id$="-app"]:not(.hidden) [class*="card"]:not(.cork-beat-card) {
    border-radius: 16px;
  }
  /* Shrink form-grid rows for one-column on phone (already done in many
   * places; this is a safety net) */
  [id$="-app"]:not(.hidden) [class*="form-grid"]:not(.one) {
    grid-template-columns: 1fr !important;
  }
  /* Headers / heroes on app pages: avoid towering at top */
  [id$="-app"]:not(.hidden) .doc101-hero,
  [id$="-app"]:not(.hidden) .p100-hero,
  [id$="-app"]:not(.hidden) .ss78-hero,
  [id$="-app"]:not(.hidden) [class*="-hero"] {
    padding: 14px !important;
  }

  /* ─── 6. Locations / Schedule / Props specific squish fixes ─────────── */
  /* Locations: location editor tabs were squished */
  #locations-app .loc-detail-tabs,
  #locations-app [class*="-tabs"] {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
  }
  /* Schedule: top toolbar wraps to multi-row instead of overflowing */
  #schedule-app .card > div:first-child > div:last-child {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Props: same pattern */
  #props-app .phase14-toolbar,
  #props-app [class*="toolbar"] {
    flex-wrap: wrap;
    gap: 6px !important;
  }
}

/* ─── Tablet (>760, ≤1024) — keep most of the desktop dock but cap ────── */
@media (min-width: 761px) and (max-width: 1024px) {
  /* Tablet uses original horizontal scrolling dock — phase103 dock JS skips */
  #bottom-nav-inner { gap: 6px; }
}

/* ─────────────────────────────────────────────────────────────────────
 * MOBILE DESIGN AUDIT FIXES (from __mobileAudit harness)
 *
 *   inputAutozoom — iOS Safari zooms when a text input has font-size <16px
 *   inputWidth    — search/text inputs squeezed to ≤240px on phones
 *   textSize      — labels / badges / captions sometimes 10-12px
 *   fixedOverlap  — spatial / stripboard floating action buttons under dock
 *
 * Rules borrowed from Apple HIG (17pt body, 44pt target), Material (16sp
 * input min, 14sp body min, 48dp target), and WCAG 2.2 (AA 24px / AAA 44px
 * target).
 * ─────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* iOS auto-zoom prevention: every editable form control gets 16px+ font.
   * Phase102's char-builder rule and other id-level rules win on specificity,
   * so use ID-anchored selectors here too to match (1, 2, 2) and beat them
   * by source order. */
  body[data-ui-tier="phone"] [id$="-app"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  body[data-ui-tier="phone"] [id$="-app"] textarea,
  body[data-ui-tier="phone"] [id$="-app"] select,
  body[data-ui-tier="phone"] #char-builder-app input,
  body[data-ui-tier="phone"] #char-builder-app textarea,
  body[data-ui-tier="phone"] #char-builder-app select,
  body[data-ui-tier="phone"] #schedule-app input,
  body[data-ui-tier="phone"] #schedule-app select,
  body[data-ui-tier="phone"] #locations-app input,
  body[data-ui-tier="phone"] #locations-app select,
  body[data-ui-tier="phone"] #dood-app select,
  body[data-ui-tier="phone"] #shotlist-app select,
  body[data-ui-tier="phone"] #callsheet-app input,
  body[data-ui-tier="phone"] #callsheet-app textarea {
    font-size: 16px !important;
  }

  /* Search bars and text inputs at the top of pages should fill the width
   * minus a small inset, NOT a fixed 140-236px. */
  body[data-ui-tier="phone"] #beats-app input[type="search"],
  body[data-ui-tier="phone"] #corkboard-app input[type="search"],
  body[data-ui-tier="phone"] #props-app input[type="search"],
  body[data-ui-tier="phone"] #contacts-app input[type="search"],
  body[data-ui-tier="phone"] #locations-app input[type="search"],
  body[data-ui-tier="phone"] [id$="-app"] input[type="search"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    flex: 1 1 100%;
  }

  /* Body text minimum 13px (Material says 14sp). Apply to leaf-text classes
   * that the audit flagged. Keeps designer typography intact for headings
   * but lifts micro-text out of the unreadable zone. */
  body[data-ui-tier="phone"] [id$="-app"] small,
  body[data-ui-tier="phone"] [id$="-app"] .doc101-help,
  body[data-ui-tier="phone"] [id$="-app"] [class*="caption"],
  body[data-ui-tier="phone"] [id$="-app"] [class*="meta"],
  body[data-ui-tier="phone"] [id$="-app"] [class*="subline"] {
    font-size: 13px !important;
    line-height: 1.4;
  }

  /* Call Sheet form inputs were 227px — push them to full width like other
   * apps. Same anchor pattern phase39 / phase35 use. */
  html[data-ui-tier="phone"] body[data-active-view="callsheet-app"] #callsheet-app input[type="text"],
  html[data-ui-tier="phone"] body[data-active-view="callsheet-app"] #callsheet-app input[type="email"],
  html[data-ui-tier="phone"] body[data-active-view="callsheet-app"] #callsheet-app input[type="tel"],
  html[data-ui-tier="phone"] body[data-active-view="callsheet-app"] #callsheet-app textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Spatial floating action buttons (Light / Camera / Actor) were overlapping
   * the dock. Lift them above the dock by the dock height + 8px breathing. */
  #spatial-app [class*="spatial-fab"],
  #spatial-app [class*="float-actions"],
  #spatial-app [class*="spatial-actions"] {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Stripboard "+ Add timed event" sat under the dock at y=780-824 on a
   * 812 viewport. Give the stripboard pane bottom-padding so its content
   * row clears the dock; the same applies to any app that scrolls. */
  body[data-ui-tier="phone"] #stripboard-app,
  body[data-ui-tier="phone"] #schedule-app {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Hover-only color swatches in Beats had title="Canary" with no visible
   * label or aria. Force aria-label fallback so screen-readers and TalkBack
   * users get the colour name — CSS can't fix this, but we can make the
   * dot itself a 36×36 tap target so it's at least usable. */
  #corkboard-app .sticky-color-swatch {
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  /* Generic 40px tap-target floor for all interactive elements on mobile
   * (Material-recommended; halfway between WCAG AA 24 and AAA 44). Targets
   * the 96+ buttons currently at 36-37px. */
  body[data-ui-tier="phone"] [id$="-app"] button,
  body[data-ui-tier="phone"] [id$="-app"] a[role="button"],
  body[data-ui-tier="phone"] [id$="-app"] input[type="button"],
  body[data-ui-tier="phone"] [id$="-app"] input[type="submit"] {
    min-height: 40px;
  }
  /* Don't bump tabs in horizontal scroll strips (they should stay compact)
   * but DO bump regular toolbar/action buttons. The exception list keeps
   * mini chips, dock tabs, and intentionally small UI controls compact. */
  body[data-ui-tier="phone"] .bottom-tab,
  body[data-ui-tier="phone"] .phase103-more-btn,
  body[data-ui-tier="phone"] .sticky-color-swatch,
  body[data-ui-tier="phone"] [class*="chip"],
  body[data-ui-tier="phone"] [class*="-color-swatch"] {
    min-height: revert;
  }

  /* Callsheet text inputs were still 227-239px — strip the inner card
   * padding and force inputs to 100% width so they reach ~320px. */
  html[data-ui-tier="phone"] body[data-active-view="callsheet-app"] #callsheet-app .card,
  html[data-ui-tier="phone"] body[data-active-view="callsheet-app"] #callsheet-app .cs-section,
  html[data-ui-tier="phone"] body[data-active-view="callsheet-app"] #callsheet-app [class*="cs-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* Many call-sheet inputs are inside nested wrappers — strip lateral
   * padding on those too */
  html[data-ui-tier="phone"] body[data-active-view="callsheet-app"] #callsheet-app .form-row,
  html[data-ui-tier="phone"] body[data-active-view="callsheet-app"] #callsheet-app .form-grid,
  html[data-ui-tier="phone"] body[data-active-view="callsheet-app"] #callsheet-app [class*="field"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html[data-ui-tier="phone"] body[data-active-view="callsheet-app"] #callsheet-app input,
  html[data-ui-tier="phone"] body[data-active-view="callsheet-app"] #callsheet-app textarea,
  html[data-ui-tier="phone"] body[data-active-view="callsheet-app"] #callsheet-app select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Contacts search was 227 — same pattern */
  html[data-ui-tier="phone"] body[data-active-view="contacts-app"] #contacts-app input[type="search"],
  html[data-ui-tier="phone"] body[data-active-view="contacts-app"] #contacts-app input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ─── KEYBOARD-OPEN BEHAVIOUR ─────────────────────────────────────────
   * When the soft keyboard is visible (data-keyboard-open="true"), keep
   * modals, sheets, and form action bars within the reduced visible area.
   * Inputs anywhere on the page get scroll-margin so the browser's native
   * "scroll focused input into view" lands them comfortably above the
   * keyboard rather than flush against the top edge. */
  body[data-ui-tier="phone"] input,
  body[data-ui-tier="phone"] textarea,
  body[data-ui-tier="phone"] select {
    scroll-margin-bottom: calc(var(--keyboard-offset, 0px) + 32px);
    scroll-margin-top: 80px;
  }

  /* Modals + bottom sheets respect the keyboard so users can still see
   * the modal footer (Save/Cancel) when typing inside the modal */
  body[data-keyboard-open="true"] [class*="modal"]:not(.hidden),
  body[data-writer-keyboard="open"] [class*="modal"]:not(.hidden),
  body[data-keyboard-open="true"] [role="dialog"]:not(.hidden),
  body[data-writer-keyboard="open"] [role="dialog"]:not(.hidden),
  body[data-keyboard-open="true"] .phase103-more-sheet,
  body[data-writer-keyboard="open"] .phase103-more-sheet {
    max-height: calc(100dvh - var(--keyboard-offset, 290px) - 16px) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modal footers (Save / Cancel rows) lift above the keyboard so they
   * stay tappable while typing inside the modal */
  body[data-keyboard-open="true"] [class*="modal-footer"],
  body[data-writer-keyboard="open"] [class*="modal-footer"],
  body[data-keyboard-open="true"] [class*="sheet-footer"],
  body[data-writer-keyboard="open"] [class*="sheet-footer"] {
    position: sticky;
    bottom: 0;
    background: inherit;
    z-index: 10;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  /* Spatial planner had overflow: hidden pinned by hotfix11-overflow-fixes
   * AND phase61, so users couldn't scroll its 1745px content on a 754px
   * pane. Beat the ID-level specificity with body + id. */
  body[data-ui-tier="phone"] #spatial-app {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    height: calc(100dvh - var(--phase103-shell, 64px) - var(--phase103-dock, 72px)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  /* When keyboard is open on Spatial, give extra bottom space so room
   * inputs can scroll above the keyboard */
  body[data-keyboard-open="true"][data-ui-tier="phone"] #spatial-app {
    padding-bottom: calc(var(--keyboard-offset, 290px) + 24px) !important;
  }

  /* Hide old spatial content (scc-binder, scc-temporal-bar / day slider)
   * that phase100's spatial suite replaces at runtime via JS. On mobile
   * the JS hide can race with render, so pin it in CSS. */
  #spatial-app > *:not(#p100-spatial-suite):not(.p100-spatial-suite) {
    display: none !important;
  }

  /* On any view that has a deep form (locations / safety / continuity /
   * media), give the active app pane extra bottom padding when the
   * keyboard is open so the user can scroll the last form row above the
   * keyboard line. */
  body[data-keyboard-open="true"] [id$="-app"]:not(.hidden):not(#writer-app) {
    padding-bottom: calc(var(--keyboard-offset, 290px) + 24px) !important;
  }
}