/* Responsive repairs, after feature styles. Desktop composition stays in the
   component sheets. No page-level clipping: fix intrinsic sizing at its source. */
.content-mobile-task-picker { display: none; }
.content-mobile-task-complete { display: none; }
@media (pointer: coarse), (max-width: 720px) {
  /* Intentional floor: feature selectors must not shrink physical hit targets. */
  :where(button, summary, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"])) {
    min-block-size: 44px !important;
  }
  :is(button, summary) { min-inline-size: 44px !important; }
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
    font-size: 16px !important;
  }
  .capacity-task-card { grid-template-columns: 44px minmax(0, 1fr); }
  .capacity-task-actions { gap: 6px; flex-wrap: wrap; }
  .capacity-task-actions .tiny { font-size: 12px; }
  .calendar-list-task { grid-template-columns: 44px minmax(0, 1fr); }
  /* Spatial objects scale as a whole. Inverse sizing changes the objects and
     caused oversized completion circles at Fit. Full-size task controls live
     outside the scaled surface, in the task picker/editor. */
  .content-canvas-surface button { min-block-size: 0 !important; min-inline-size: 0 !important; }
}

.phone-orientation-hint { width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border: 1px solid var(--border-emphasis); border-radius: var(--radius-dialog); background: var(--surface-card); color: var(--content-primary); }
.phone-orientation-hint::backdrop { background: var(--overlay); }
.phone-orientation-hint > svg { width: 60px; height: 60px; fill: none; stroke: var(--primary); stroke-width: 1.6; }
.phone-orientation-hint h2 { margin: 16px 0 10px; font-size: 24px; line-height: 1.2; }
.phone-orientation-hint p { margin: 0 0 20px; font-size: 16px; line-height: 1.5; color: var(--content-secondary); }
.phone-orientation-hint button { width: 100%; font-size: 16px; }

/* Fix the intrinsic HTML height used to reserve image space: the responsive
   width must determine the rendered height, rather than 1086px per card. */
.branch-overview-illustration { height: auto; max-height: 210px; }

@media (max-width: 1050px) {
  .topbar { gap: 12px; }
  .topbar-title, .topbar-title > div { min-width: 0; }
  .topbar-title { flex: 1 1 0; }
  .topbar-title .topbar-artwork { flex: 0 0 32px; }
  .topbar-title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions { flex: 0 0 auto; }
  .song-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .song-hero-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
}

@media (hover: none) and (min-width: 721px) {
  .sidebar:hover, .sidebar:focus-within,
  .content-workspace-iconrail:hover, .content-workspace-iconrail:focus-within { width: 64px; box-shadow: none; }
  .sidebar :is(.brand-text, .nav .label, .sidebar-foot .label, .branch-copy),
  .content-workspace-iconrail .content-nav-label { opacity: 0 !important; pointer-events: none; }
}

@media (max-width: 720px) {
  .main, .page, .page > *, .data-page, .data-reference-layout { min-width: 0; }
  .topbar-title { min-width: 0; flex: 1; }
  .topbar { height: auto; min-height: 100px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 8px; }
  .topbar-title { width: 100%; }
  .topbar-title > div { flex: 1; }
  .top-actions { width: 100%; justify-content: flex-end; }
  .topbar h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions { flex: 0 0 auto; }
  .page { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .shell { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .mobile-nav { padding-inline: max(7px, env(safe-area-inset-left)) max(7px, env(safe-area-inset-right)); }
  .mobile-nav .label { font-size: 10px; }
  .modal, .v16-modal { max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
  .modal :is(input, select, textarea), .page :is(input, select, textarea) { min-width: 0; max-width: 100%; }
  .form-field, .form-field > label { min-width: 0; }
  .capacity-controls-combined .capacity-primary-row label,
  .capacity-controls-combined .capacity-primary-row select { min-width: 0; width: 100%; }
  .capacity-task-open strong, .task-title { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
  .capacity-task-state { font-size: 12px; line-height: 1.4; }
  .capacity-task-actions { grid-column: 1 / -1; }
  .capacity-time-options button, .capacity-controls-combined .filter { font-size: 12px; }
  .calendar-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .calendar-actions .calendar-select { min-width: 0; }
  .calendar-actions .calendar-select:has(#calendar-month) { grid-column: 1 / 4; grid-row: 1; }
  .calendar-actions .calendar-select:has(#calendar-year) { grid-column: 4 / 6; grid-row: 1; }
  .calendar-actions [data-action="calendar-prev"] { grid-column: 1; grid-row: 2; }
  .calendar-actions [data-action="calendar-next"] { grid-column: 5; grid-row: 2; }
  .calendar-actions [data-action="calendar-today"] { grid-column: 2 / 5; grid-row: 2; }
  .calendar-list-open strong { font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
  .calendar-list-open small { font-size: 12px; }
  .data-workspace-head, .data-library-toolbar, .data-library-toolbar > div { min-width: 0; }
  .data-mode-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-mode-tabs button { min-width: 0; overflow-wrap: anywhere; }
  .data-search { min-width: 0; flex: 1 1 100%; }
  .data-library-toolbar select { min-width: 0; flex: 1; max-width: 100%; }
  .data-preview-media { min-width: 0; max-width: 100%; }
  .data-reference-copy > strong { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
  .persistent-reference-dock { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .persistent-reference-dock > div { grid-template-columns: minmax(0, 1fr) 44px; }
  .marketing-hero-actions { flex-wrap: wrap; }
  .marketing-hero-actions button { max-width: 100%; white-space: normal; }
  .marketing-hero-copy p, .overview-hero p, .contact-card p { font-size: 14px; line-height: 1.55; }
  .song-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; }
  .song-hero-title { align-items: flex-start; }
  .song-hero-title > div { flex: 1; }
  .song-hero h2 { font-size: clamp(24px, 7vw, 34px); line-height: 1.15; overflow-wrap: anywhere; }
  .song-score { text-align: left; }
  .song-hero-actions { grid-column: 1; display: grid; grid-template-columns: minmax(0, 1fr); }
  .global-chat-launcher-wrap,
  body:has(.content-workspace-frame) .global-chat-launcher-wrap { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100vw - 28px); right: 14px; }
  .content-canvas-toolbar, .content-workspace-topbar { flex-wrap: wrap; }
  .content-canvas-toolbar button { font-size: 12px; }
  .content-workspace-frame .content-canvas-shell:has(.content-mobile-task-picker) { grid-template-rows: 154px minmax(0, 1fr); }
  .content-canvas-header { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 6px; padding-block: 8px; }
  .content-mobile-task-picker { display: grid; grid-column: 1 / -1; gap: 4px; padding-bottom: 8px; }
  .content-mobile-task-picker > span { font-size: 12px; color: var(--content-secondary); }
  .content-mobile-task-picker select { width: 100%; padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--surface-input); color: var(--content-primary); }
  .content-narrative-rail { bottom: calc(84px + env(safe-area-inset-bottom)); height: 78px; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 120px; overflow-x: auto; }
  .content-narrative-rail small { font-size: 12px; white-space: normal; line-height: 1.35; }
  .content-canvas-zoom { bottom: calc(164px + env(safe-area-inset-bottom)); }
  .content-canvas-focus { bottom: calc(164px + env(safe-area-inset-bottom)); }
  .content-canvas-focus .content-mobile-task-complete { display: inline-flex; align-items: center; font-size: 12px; }
}

/* Phone landscape retains a compact icon rail, with full-size task editing
   and completion above the spatial overview. No desktop hover drawer. */
@media (pointer: coarse) and (min-width: 721px) and (max-width: 1100px) and (max-height: 600px) {
  .topbar { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .topbar-title .eyebrow { display: none; }
  .content-workspace-frame { height: 100dvh; min-height: 0; }
  .test-environment-banner + .content-workspace-frame { height: calc(100dvh - 44px); }
  .content-workspace-iconrail { padding-top: 6px; }
  .content-workspace-frame .content-canvas-shell:has(.content-mobile-task-picker) { grid-template-rows: 124px minmax(0, 1fr); }
  .content-canvas-header { padding: 6px 12px; row-gap: 4px; }
  .content-mobile-task-picker { display: grid; grid-column: 1 / -1; gap: 3px; }
  .content-mobile-task-picker > span { font-size: 12px; }
  .content-mobile-task-picker select { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--surface-input); color: var(--content-primary); }
  .content-narrative-rail { bottom: max(8px, env(safe-area-inset-bottom)); height: 54px; }
  .content-canvas-zoom { bottom: calc(66px + env(safe-area-inset-bottom)); }
  .content-canvas-focus { inset: 6px 8px calc(8px + env(safe-area-inset-bottom)); width: auto; }
  .content-canvas-focus .content-mobile-task-complete { display: inline-flex; align-items: center; font-size: 12px; }
  body:has(.content-workspace-frame) .global-chat-launcher-wrap { bottom: calc(74px + env(safe-area-inset-bottom)); }
}

/* Idea Studio: actions wrap above the canvas instead of disappearing beyond
   its clipped desktop toolbar. Tools and details keep their existing actions. */
@media (max-width: 760px) {
  .iv-shell { min-width: 0; padding-inline: 0; }
  .iv-scope-tabs { gap: 8px; justify-content: space-between; }
  .iv-scope-tabs button { min-width: 0; flex: 1; font-size: 12px; }
  .iv-studio { height: max(540px, calc(100dvh - 280px)); isolation: isolate; }
  .iv-canvas-toolbar { height: 112px; padding: 8px; flex-direction: column; align-items: stretch; gap: 6px; }
  .iv-canvas-toolbar > div { min-width: 0; gap: 4px; }
  .iv-canvas-toolbar input { width: 100%; min-width: 0; }
  .iv-canvas-toolbar > div:last-child { justify-content: flex-end; }
  .iv-canvas-toolbar > div:last-child button:first-of-type { display: inline-grid; place-items: center; }
  .iv-canvas-toolbar button { padding-inline: 7px; font-size: 12px; flex-shrink: 0; }
  .iv-viewport { inset-block-start: 170px; }
  .iv-tools { top: 180px; left: 8px; }
  .iv-tools > button { width: 44px; height: 44px; }
  .iv-canvas-actions { top: 120px; left: 8px; right: 8px; justify-content: flex-end; gap: 4px; }
  .iv-canvas-actions button { font-size: 12px; }
  .iv-pages { top: 176px !important; left: 58px !important; bottom: 64px; width: calc(100% - 66px); }
  .iv-pages.collapsed { display: none; }
  .iv-inspector, .iv-layers { top: 176px; bottom: 64px; }
  .iv-inbox-tools { grid-template-columns: minmax(0, 1fr); }
  .iv-capture input { width: 0; }
  .iv-pool-list { max-height: none; }
  .iv-canvas-controls button:nth-last-child(-n+2) { display: inline-grid; place-items: center; }
  .iv-canvas-controls { left: 58px; }
  .iv-open-inspector { top: auto; bottom: 8px; }
  .iv-comment-popover, .iv-selection-palette, .iv-connection-actions { bottom: calc(84px + env(safe-area-inset-bottom)); }
}