/* Phone uses six full views; landscape tablet keeps the graph beside five tabs. */
.mobile-header { display: none; }
#tab-audio[data-playing="true"]::after { content: ''; position: absolute; top: 7px; right: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--hot); }
#tab-audio[data-playing="true"][aria-selected="true"]::after { background: var(--lit-ink-1); }
/* Let content pass under the fixed surfaces; keep resting gaps inside the scroll. */
@media (min-width: 761px) {
  .console-title { z-index: 1; background: var(--stage); }
  .console > .player { position: relative; z-index: 1; }
  .view-shell { --scroll-inset-start: calc(2 * var(--gap)); --scroll-inset-end: 0px; z-index: 0; margin-block: calc(-1 * var(--scroll-inset-start)) calc(-1 * var(--scroll-inset-end)); }
  .console:has(> .player:not([hidden])) > .view-shell { --scroll-inset-end: calc(2 * var(--gap)); }
  .view-area { padding-block: var(--scroll-inset-start) var(--scroll-inset-end); scroll-padding-block: var(--scroll-inset-start) max(8px, var(--scroll-inset-end)); }
}
@media (max-width: 760px) {
  .workspace { display: block; padding: 0; --mobile-top: calc(58px + env(safe-area-inset-top)); --mobile-content-top: var(--mobile-top); --mobile-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .mobile-header { position: fixed; inset: 0 0 auto; height: var(--mobile-top); padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); background: var(--hot); color: var(--lit-ink-1); display: flex; align-items: center; justify-content: space-between; gap: 8px; z-index: 4; pointer-events: auto; }
  .mobile-header h1 { margin: 0; min-width: 0; font: 400 23px/1 var(--font-display); letter-spacing: -.025em; text-transform: uppercase; }
  .mobile-header .workspace-tools { flex: none; }
  .mobile-header .workspace-tools > button { color: var(--lit-ink-1); }
  .mobile-header .workspace-tools > button:is(:hover, :focus-visible, :active) { background: color-mix(in oklch, var(--lit-ink-1) 12%, transparent); color: var(--lit-ink-1); }
  .mobile-header .workspace-tools > button[aria-disabled="true"] { color: var(--lit-ink-1); opacity: .7; }
  .mobile-header #help-toggle[data-attention="true"]::after { background: var(--lit-ink-1); }
  .mobile-header .refresh-status { top: calc(100% + 8px); bottom: auto; max-width: min(280px, 80vw); color: var(--ink-1); background: var(--surface-2); border: 1px solid var(--line); }
  .mobile-header .workspace-tools[data-refresh="failed"] .refresh-status { color: var(--hot); }
  .console { position: absolute; inset: 0 max(8px, env(safe-area-inset-right)) var(--mobile-bottom) max(8px, env(safe-area-inset-left)); width: auto; min-height: 0; gap: 6px; pointer-events: none; }
  .console > * { pointer-events: auto; }
  .console-title, .greeting { display: contents; }
  .greeting h1, .greeting p { display: none; }
  .console-title .mode-tabs { position: fixed; inset: auto 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 8px max(8px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--stage); z-index: 6; pointer-events: auto; }
  .console-title .mode-tabs button { display: grid; place-items: center; min-height: 52px; padding: 10px 0; border: 0; border-radius: 8px; corner-shape: superellipse(var(--corner-k)); background: transparent; color: var(--ink-3); }
  .console-title .mode-tabs button[aria-selected="true"] { background: var(--hot); color: var(--lit-ink-1); }
  .console-title .mode-tabs button:not([aria-selected="true"]):is(:hover, :focus-visible) { background: var(--surface-2); color: var(--ink-1); }
  .console-title .mode-tabs .tab-symbol { display: block !important; }
  .console-title .mode-tabs .tab-symbol svg { width: 26px; height: 26px; stroke-width: 1.5; }
  .console-title .mode-tabs .tab-reading, .console-title .mode-tabs .tab-key { display: none; }
  .console-title .mode-tabs button:active .tab-symbol { transform: translateY(1px) scale(.94); }
  .view-shell { margin-bottom: calc(-1 * var(--gap)); }
  .view-area { padding-top: calc(var(--mobile-content-top) + 8px); padding-bottom: calc(2 * var(--gap)); scroll-padding-block: calc(var(--mobile-content-top) + 8px) 16px; -webkit-overflow-scrolling: touch; }
  .view-area > .bucket { min-height: 100%; }
  body[data-mobile-view="graph"] .console { padding-top: calc(var(--mobile-content-top) + 8px); }
  .view-area input, .view-area select { font-size: 16px; }
  .view-area .body-box, .view-area .detail { padding: 18px 16px; }
  .view-area .review-note { padding-inline: 16px; }
  .view-area .instrument-action, .view-area .close { min-height: 44px; }
  .view-area .rocker-key { min-width: 44px; min-height: 44px; }
  .view-area .reading-action a { min-height: 44px; display: inline-flex; align-items: center; }
  .scroll-rail { top: calc(var(--mobile-content-top) + 12px); right: 2px; }
  .help-tabs button { min-height: 44px; padding-inline: 2px; letter-spacing: .02em; font-size: 10px; }
  .help-heading #shortcuts-close { width: 44px; height: 44px; }

  #graph-view { position: absolute; inset: var(--mobile-content-top) max(8px, env(safe-area-inset-right)) var(--mobile-bottom) max(8px, env(safe-area-inset-left)); width: auto; border: 0; border-radius: 0; }
  body.preview-hidden[data-mobile-view="graph"] #graph-view { display: block; }
  #graph-view .graph-heading { display: none; }
  #graph-view .graph-label.source { display: flex; font-size: 9px; }
  #graph-view .graph-label.hub { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  #graph-view .graph-handle { inset: 13px; }
  #graph-view .graph-label.hub .id, #graph-view .graph-label.hub .t { left: 44px; }
  #graph-view .graph-label.hub.label-left .id, #graph-view .graph-label.hub.label-left .t { left: auto; right: 44px; }
  #graph-view .graph-label.hub .t { max-width: min(220px, 58vw); }
  #graph-view .graph-footer { bottom: 10px; inset-inline: 8px; justify-content: center; }
  #graph-view .graph-controls { border-radius: 8px; }
  #graph-view .graph-controls button { min-width: 44px; height: 44px; font-size: 12px; }
  #graph-view .graph-controls button:first-child, #graph-view .graph-controls button:last-child { font-size: 23px; }

  .console > .player { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: calc(var(--mobile-content-top) + 22px) 22px 22px; overflow-y: auto; scroll-padding-top: calc(var(--mobile-content-top) + 16px); }
  .player header { margin-bottom: 18px; flex: none; }
  .player .eyebrow, .player-format { font-size: 10px; }
  .player .deck { display: grid; grid-template-columns: minmax(0, 1fr) 64px; grid-template-areas: 'tape tape' 'readout play'; gap: 32px 12px; width: 100%; margin-block: auto; }
  .player .readout { grid-area: readout; }
  .player .counter { font-size: clamp(34px, 9vw, 52px); }
  .player .player-duration { font-size: 12px; margin-top: 8px; }
  .player .level { height: 18px; margin-top: 16px; }
  .player .level i { height: 6px; }
  .player .level i.on { height: 16px; }
  .player #play { grid-area: play; width: 64px; height: 80px; align-self: center; }
  .player .play-symbol { width: 44px; height: 44px; }
  .player .player-message { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 10px; white-space: normal; }
}
@media (max-width: 760px) and (pointer: coarse) { #graph-fly { display: none; } }
@media (max-width: 760px) and (max-height: 540px) {
  .workspace { --mobile-top: calc(50px + env(safe-area-inset-top)); --mobile-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .mobile-header h1 { font-size: 20px; }
  .console-title .mode-tabs { padding-top: 4px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .console-title .mode-tabs button { min-height: 48px; }
  .console > .player { padding: calc(var(--mobile-content-top) + 14px) 20px 14px; }
  .player .counter { font-size: 32px; }
  .player .player-message { margin-top: 14px; padding-top: 10px; }
}
@media (min-width: 520px) and (max-width: 760px) and (max-height: 540px) {
  .player .deck { grid-template-columns: 100px minmax(0, 1fr) 60px; grid-template-areas: 'tape readout play'; gap: 20px; }
}
@media (max-width: 360px) {
  .console-title .mode-tabs { gap: 1px; }
  .console-title .mode-tabs .tab-symbol svg { width: 24px; height: 24px; }
  .console > .player { padding: calc(var(--mobile-content-top) + 18px) 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .console-title .mode-tabs button:active .tab-symbol { transform: none; } }

/* JS selects this layout once, keeping tab visibility and sizing in agreement. */
body[data-layout="tablet"] .console-title .mode-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 3px; }
body[data-layout="tablet"] .console-title .mode-tabs button { min-height: 48px; gap: 4px; padding-inline: 3px; }
body[data-layout="tablet"] .console > .player { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px 18px; }
body[data-layout="tablet"] .player header { flex: none; margin-bottom: 24px; }
body[data-layout="tablet"] .player .player-format { display: block; }
body[data-layout="tablet"] .player .deck { flex: none; grid-template-columns: minmax(0, 1fr) 60px; grid-template-areas: 'tape tape' 'readout play' 'level level'; gap: 24px 16px; margin-block: auto; }
body[data-layout="tablet"] .tape-transport { width: 100%; height: auto; aspect-ratio: 320 / 172; }
body[data-layout="tablet"] .player .counter { font-size: 38px; }
body[data-layout="tablet"] .player #play { width: 60px; height: 64px; }
body[data-layout="tablet"] .player .play-symbol { width: 38px; height: 38px; }
body[data-layout="tablet"] .player .level { height: 16px; }
body[data-layout="tablet"] .player .player-message { flex: none; margin-top: 24px; font-size: 10px; }
body[data-layout="tablet"] .graph-controls button { min-width: 44px; height: 44px; }
@media (pointer: coarse) { body[data-layout="tablet"] #graph-fly { display: none; } }