/* Page layout (03 section 14). Breakpoints:
 *   >= 1200 px  rail open beside the content (screens decide)
 *   760-1199 px rail collapsible (screens decide)
 *   < 760 px    phone: compact header, bottom tab bar, sheets instead of side panels, capture dock
 *               sticky above the tabs inside env(safe-area-inset-bottom).
 * Screens use the custom media width 760px: @media (max-width: 759.98px) { ... }.
 * --launcher-clear is the space the floating Ask circle needs; players, capture bars and transports
 * reserve it (padding-inline-end or margin-bottom: var(--launcher-clear)). */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body[data-launcher="hidden"] { --launcher-clear: 0px; }

.app-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; width: 100%; }
body[data-dock="open"] .app-body { grid-template-columns: minmax(0, 1fr) var(--dock-width); }
.app-main { min-width: 0; width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 24px var(--page-pad) 40px; outline: none; }
body[data-dock="open"] .app-main { max-width: none; }
/* The dock is fixed to the right edge with its bottom on the window's bottom, so its question box is always in view.
 * Its top follows the header's bottom edge as the page scrolls (--dock-top, set by shell/dock.js). It used to be one
 * window tall but start under the header, which put the question box below the window until the page scrolled.
 * The grid column above keeps the page clear of it. */
.app-dock { position: fixed; top: var(--dock-top, var(--header-h)); right: 0; bottom: 0; z-index: 25; width: var(--dock-width); display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--hairline); min-width: 0; }

/* Views the router draws itself */
.view-error, .view-incomplete { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px 0; max-width: 560px; }

/* Floating launcher, bottom right, clear of the tab bar and capture dock */
.launcher-slot { position: fixed; right: var(--launcher-gap); bottom: var(--launcher-gap); z-index: 30; }
body[data-dock="open"] .launcher-slot { right: calc(var(--dock-width) + var(--launcher-gap)); }

/* Toasts sit above the launcher */
body[data-dock="open"] .toasts { right: calc(var(--dock-width) + var(--launcher-gap)); }
.toasts { position: fixed; right: var(--launcher-gap); bottom: calc(var(--launcher-clear) + 8px); z-index: 40; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }

/* Small marks and handles keep their drawn size but get a 24 px (44 px on phone) hit area. */
.mo-mk, .dy-mk, .ex-hdl, .mv { position: relative; }
.mo-mk::before, .dy-mk::before, .ex-hdl::before, .mv::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: max(100%, var(--target-min)); height: max(100%, var(--target-min)); transform: translate(-50%, -50%); }
.mo-mk, .dy-mk { outline: 1px solid var(--mk-edge); outline-offset: 0; }
.mo-mk:focus-visible, .dy-mk:focus-visible { outline: var(--focus-ring); box-shadow: var(--focus-halo); }
.map-mk[data-state="review"] b { color: var(--ink); }

/* Phone-only parts are hidden on wider layouts */
.tab-bar, .capture-dock { display: none; }

@media (max-width: 1199.98px) {
  :root { --page-pad: 24px; }
}

@media (max-width: 759.98px) {
  :root { --page-pad: 16px; --target-min: 44px; }
  .app-main { padding: 14px var(--page-pad) calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); }
  body[data-capture-dock="shown"] .app-main { padding-bottom: calc(var(--tabbar-h) + var(--capture-dock-h) + 16px + env(safe-area-inset-bottom)); }
  body[data-dock="open"] .app-body { grid-template-columns: minmax(0, 1fr); }
  /* Phone: the dock is a full-screen sheet; keep its close button and question box clear of the notch and home bar. */
  .app-dock { position: fixed; inset: 0; z-index: 50; width: auto; height: auto; border-left: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .tab-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--card); border-top: 1px solid var(--hairline); padding-bottom: env(safe-area-inset-bottom); }
  .capture-dock:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 20; gap: 10px; align-items: center; padding: 10px calc(var(--launcher-clear) - 8px) 10px 16px; background: var(--card); border-top: 1px solid var(--hairline); }
  .launcher-slot { bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); }
  body[data-capture-dock="shown"] .launcher-slot { bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); }
  body[data-dock="open"] .launcher-slot { right: var(--launcher-gap); }
  .toasts { left: 16px; right: 16px; max-width: none; bottom: calc(var(--tabbar-h) + var(--capture-dock-h) + 12px + env(safe-area-inset-bottom)); }
  .btn, .seg a, .seg button, .seg label, .operator-menu__item, .settings-nav a, .tabs a, .tabs button, [role=tab], select.btn, summary { min-height: var(--target-min); }
  .sw { width: 52px; height: 32px; border-radius: var(--radius-chip); }
  .sw::after { top: 4px; left: 4px; width: 24px; height: 24px; }
  .sw:checked::after { left: 24px; }
  .mv, .tile__flag, .toast__close, .iq-tab, .ir-radio, .mode, .mo-select, .mo-inview button, .dy-small, .mo-lane__retry { min-width: var(--target-min); min-height: var(--target-min); }
  .operator-menu__item { min-height: 44px; }
}