/* Air Beat Board: breakpoints and motion preferences. Loaded last. */

@media (prefers-reduced-motion: reduce) {
  .playhead,
  .step-numbers span,
  .token,
  .cell {
    transition: none;
  }
  .cell.play-hit > .token {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .channel-strip.hit .row-dot {
    animation: none;
  }
}

@media (min-width: 1221px) and (max-height: 1000px) {
  body {
    overflow: hidden;
  }

  .app-shell {
    width: min(1680px, 100vw);
    height: 100svh;
    min-height: 0;
    padding: 6px 8px;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 7px;
  }

  .topbar {
    height: 50px;
    min-height: 0;
    gap: 7px;
    grid-template-columns: minmax(250px, 0.78fr) minmax(560px, 1.62fr) minmax(200px, 0.56fr);
  }

  .brand-lockup {
    padding: 7px 13px;
  }

  h1 {
    font-size: clamp(1.3rem, 1.75vw, 1.78rem);
  }

  .status-pill {
    padding: 7px 10px;
  }

  .transport-strip {
    padding: 6px;
    grid-template-columns: 42px 36px minmax(72px, 0.66fr) minmax(164px, 1fr) minmax(78px, 0.56fr) minmax(138px, 0.9fr);
    gap: 6px;
  }

  .icon-command {
    min-width: 36px;
    min-height: 36px;
  }

  .value-control,
  .master-volume {
    padding: 5px 8px;
  }

  .value-control input[type="number"],
  .value-control select {
    height: 27px;
  }

  .master-strip {
    padding: 7px 10px;
  }

  .meter-block {
    height: 38px;
  }

  .meter-bar {
    height: 36px;
  }

  .workspace {
    min-height: 0;
    grid-template-columns: minmax(235px, 0.46fr) minmax(690px, 2.08fr) minmax(225px, 0.44fr);
    gap: 7px;
  }

  .session-panel,
  .channel-panel {
    padding: 8px;
    gap: 7px;
  }

  .session-card {
    min-height: 126px;
    padding: 14px;
  }

  .left-actions {
    padding: 8px;
    gap: 7px;
  }

  .left-actions .sample-action {
    min-height: 42px;
  }

  .message-panel {
    min-height: 42px;
    padding: 8px 10px;
  }

  .instrument-panel {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .board-shell {
    padding: 5px;
    border-radius: 15px;
  }

  .board-surface {
    padding: 11px 18px;
    grid-template-rows: 28px minmax(320px, 1fr) 42px;
    gap: 7px;
    border-radius: 15px;
  }

  .board-top-details {
    grid-template-columns: 76px 1fr 58px;
  }

  .speaker-grille {
    padding-top: 2px;
    gap: 6px;
  }

  .grid-area {
    grid-template-columns: 96px 1fr;
    gap: 8px;
  }

  .row-labels {
    padding-top: 24px;
  }

  .grid-frame {
    max-height: 480px;
  }

  .board-bottom-controls {
    grid-template-columns: 50px minmax(0, 1fr) 88px;
    gap: 12px;
  }

  .transport-knob {
    width: 46px;
    height: 46px;
  }

  .mini-controls {
    gap: 14px;
  }

  .mini-controls label {
    min-width: 100px;
  }

  .wood-button {
    width: 76px;
    min-height: 34px;
    padding: 0 10px;
  }

  .bottom-dock {
    height: 122px;
    min-height: 0;
    gap: 6px;
  }

  .dock-section {
    padding: 6px 7px;
    gap: 4px;
  }

  .token-tray {
    min-height: 42px;
    gap: 7px;
  }

  .token.ghost-token {
    width: 32px;
    flex: 0 0 32px;
  }

  .state-btn {
    min-height: 40px;
    padding: 5px;
    font-size: 0.78rem;
  }

  .sound-grid {
    gap: 1px 8px;
    align-content: start;
  }

  .sound-panel {
    grid-template-rows: 1fr;
  }

  .sound-title {
    display: none;
  }

  .sound-control span {
    font-size: 0.56rem;
    line-height: 1;
  }

  .sound-control output {
    font-size: 0.56rem;
  }

  .sound-control {
    gap: 1px;
  }

  .sound-control input {
    height: 12px;
  }

  .channel-strips {
    gap: 6px;
  }

  .channel-strip {
    min-height: 70px;
    padding: 6px 7px;
    grid-template-columns: 50px 1fr;
    gap: 7px;
  }

  .channel-controls {
    gap: 4px 6px;
  }

  .knob-control span,
  .toggle-row span,
  .channel-meta span {
    font-size: 0.58rem;
  }

  .toggle-button {
    min-height: 26px;
  }

  .channel-strips .toggle-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .channel-strips .toggle-row span {
    display: none;
  }
}

@media (max-width: 1220px) and (min-width: 821px) {
  .app-shell {
    min-height: auto;
  }

  .topbar {
    grid-template-columns: minmax(240px, 0.56fr) minmax(560px, 1fr);
  }

  .transport-strip {
    grid-template-columns: 46px 38px minmax(72px, 0.6fr) minmax(150px, 0.9fr) minmax(74px, 0.55fr) minmax(128px, 0.75fr);
    gap: 6px;
  }

  .master-strip {
    grid-column: 1 / -1;
    min-height: 54px;
  }

  .workspace {
    grid-template-columns: minmax(230px, 0.34fr) minmax(590px, 1fr);
  }

  .channel-panel {
    grid-column: 1 / -1;
  }

  .instrument-panel {
    grid-template-rows: auto auto;
  }

  .bottom-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .state-btn,
  .sample-action {
    font-size: 0.84rem;
  }

  .board-surface {
    min-height: 560px;
  }

  .channel-strips {
    grid-template-columns: repeat(5, minmax(180px, 1fr));
    grid-template-rows: none;
    overflow-x: auto;
  }

  .channel-strips .toggle-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .channel-strips .toggle-row span {
    display: none;
  }
}

/* Hover and drag-over feedback on cells */
@media (hover: hover) {
  .cell:hover {
    background: rgba(255, 255, 255, 0.075);
  }
}

@media (max-width: 820px) {
  :root {
    --mobile-bar: 68px;
  }

  .app-shell {
    min-height: auto;
    padding: 8px;
    padding-bottom: calc(var(--mobile-bar) + env(safe-area-inset-bottom, 0px) + 20px);
  }

  .topbar,
  .workspace {
    grid-template-columns: 1fr;
  }

  .brand-lockup {
    min-height: 50px;
    padding: 6px 12px;
  }

  h1 {
    font-size: 1.35rem;
  }

  .master-strip {
    display: none;
  }

  /* Transport becomes a fixed bar along the bottom: play, stop, BPM, kit. */
  .transport-strip {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    min-height: var(--mobile-bar);
    padding: 8px;
    grid-template-columns: 52px 44px minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--panel-solid);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5), 0 18px 46px rgba(0, 0, 0, 0.4);
  }

  .transport-strip .value-control {
    min-width: 0;
  }

  .transport-strip .value-control.compact,
  .transport-strip .length-control {
    display: none;
  }

  /* Board first, then the tray, then the drawer tabs and the active panel. */
  .instrument-panel {
    order: -1;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 8px;
  }

  .bottom-dock {
    display: contents;
  }

  .board-shell { order: 1; padding: 5px; }
  .first-run-hint { order: 2; }
  .token-dock { order: 3; }
  .mobile-tabs { order: 4; display: grid; }
  .state-dock { order: 5; }

  :root {
    --board-pad: 10px 8px 12px;
    --cell-min-h: 44px;
  }

  .board-surface {
    min-height: 0;
    padding: var(--board-pad);
    grid-template-rows: auto auto auto;
    gap: 10px;
    transform: none;
  }

  .board-top-details {
    grid-template-columns: 1fr auto;
  }

  .speaker-grille {
    display: none;
  }

  .grid-area {
    min-width: 0;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 4px;
  }

  .row-label {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    padding: 0;
    font-size: 0.8rem;
  }

  .row-label strong,
  .row-label span {
    display: none;
  }

  /* Single-letter row names: K S H P B. */
  .row-label em {
    font-size: 0;
  }

  .row-label em::before {
    content: attr(data-short);
    font-size: 0.8rem;
  }

  .grid-frame {
    width: 100%;
    aspect-ratio: auto;
    max-height: none;
  }

  .beat-grid {
    grid-template-rows: repeat(5, minmax(var(--cell-min-h), 1fr));
  }

  /* Nothing on the board may set a minimum wider than the phone. */
  .board-surface > *,
  .board-bottom-controls > *,
  .mini-controls,
  .mini-controls label,
  .mini-controls input {
    min-width: 0;
  }

  .board-bottom-controls {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .mini-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mini-controls input {
    width: 100%;
  }

  .token-tray {
    justify-content: space-between;
  }

  .token.ghost-token {
    flex: 0 0 36px;
    width: 36px;
  }

  .state-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .state-btn {
    min-height: 56px;
    font-size: 0.76rem;
  }

  .sound-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .channel-strips {
    grid-template-columns: 1fr;
  }

  /* Drawer tabs */
  .mobile-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .workspace:not([data-mobile-tab="inspector"]) .state-dock,
  .workspace:not([data-mobile-tab="session"]) .session-panel,
  .workspace:not([data-mobile-tab="rows"]) .channel-panel {
    display: none;
  }

  /* Touch targets */
  .toggle-button,
  .groove-chip,
  .groove-action,
  .slot-chip,
  .slot-action,
  .row-action,
  .sample-action,
  .inspector-tab,
  .mobile-tabs button {
    min-height: var(--touch-target);
  }
}