/* Unified orientation layouts: portrait shares one flow, landscape/desktop keeps the three-panel grid. */
@media (orientation: portrait) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .app {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100vh !important;
    margin: 0 auto !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .tempo-card,
  .settings-card,
  .practice-card,
  .collapsible-trigger {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tempo-card {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  .brand-row {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 92px 74px !important;
    align-items: start !important;
    gap: 8px !important;
    min-height: 38px !important;
  }

  .brand-row > div:first-child {
    min-width: 0 !important;
    overflow: visible !important;
  }

  h1 {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: clamp(1.55rem, 6vw, 2.7rem) !important;
  }

  .signature-field,
  .brand-actions {
    display: none !important;
  }

  .advanced-rhythm-toggle,
  .theme-toggle-mobile {
    position: static !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 6px 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: clamp(0.68rem, 2.75vw, 0.82rem) !important;
    line-height: 1 !important;
    transform: none !important;
  }

  .theme-toggle-mobile {
    display: inline-flex !important;
  }

  .theme-dropdown-wrap,
  .theme-toggle-desktop,
  .theme-panel-desktop {
    display: none !important;
  }

  .tempo-panel,
  .slider,
  .visualizer,
  .status-grid,
  .primary-actions,
  body[data-advanced-rhythm="true"] .rhythm-card-wrap,
  body[data-advanced-rhythm="true"] .rhythm-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tempo-panel {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) 50px !important;
    gap: 8px !important;
    min-height: auto !important;
  }

  .icon-button {
    width: 50px !important;
    min-width: 0 !important;
  }

  .tempo-readout,
  #bpmInput {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #bpmInput {
    font-size: clamp(4.2rem, 18vw, 6rem) !important;
  }

  .slider {
    width: calc(100% - var(--slider-thumb-width)) !important;
    max-width: calc(100% - var(--slider-thumb-width)) !important;
    margin-inline: calc(var(--slider-thumb-width) / 2) !important;
    align-self: center !important;
  }

  .visualizer {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }

  .beat-stage {
    min-height: 0 !important;
  }

  .beat-flash {
    inset: 18px !important;
  }

  body[data-advanced-rhythm="true"] .visualizer {
    display: none !important;
  }

  body:not([data-advanced-rhythm="true"]) .rhythm-card-wrap {
    display: none !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-card-wrap {
    display: grid !important;
    grid-area: auto !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px !important;
    gap: 8px !important;
    border: 3px solid var(--border) !important;
    background: var(--panel) !important;
    overflow: hidden !important;
    align-self: stretch !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-heading {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "tools" !important;
    gap: 0 !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-heading .eyebrow {
    display: none !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-heading h2 {
    display: none !important;
    font-size: clamp(1.45rem, 4.5vw, 2.1rem) !important;
    white-space: nowrap !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-enable {
    display: none !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-tools {
    display: grid !important;
    grid-area: tools !important;
    grid-template-columns: max-content 18px minmax(68px, 1fr) !important;
    align-items: center !important;
    justify-content: start !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-legend {
    grid-template-columns: repeat(4, 39px) !important;
    grid-template-rows: 21px !important;
    grid-auto-rows: 21px !important;
    gap: 0 3px !important;
    width: max-content !important;
    min-width: 0 !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-legend span {
    width: 39px !important;
    min-width: 39px !important;
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    font-size: clamp(0.64rem, 2.5vw, 0.74rem) !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-reset {
    justify-self: end !important;
    width: 68px !important;
    min-width: 68px !important;
    height: 25px !important;
    min-height: 25px !important;
    font-size: clamp(0.62rem, 2.35vw, 0.72rem) !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--beat-count, 4), minmax(0, 1fr)) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-beat-bar {
    min-width: 0 !important;
    grid-template-rows: 24px minmax(0, 1fr) 24px !important;
  }

  body[data-advanced-rhythm="true"] .rhythm-cells {
    min-height: 0 !important;
  }

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

  .status-grid > div:nth-child(3) {
    display: none !important;
  }

  .status-grid div {
    min-height: 64px !important;
    overflow: visible !important;
  }

  .status-grid strong {
    line-height: 1.08 !important;
  }

  .primary-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .primary-actions button {
    min-width: 0 !important;
    padding-inline: 6px !important;
  }

  .collapsible-trigger {
    display: flex !important;
    align-items: center !important;
    gap: clamp(8px, 1.5vw, 12px) !important;
    min-height: 50px !important;
    padding: clamp(12px, 2vw, 18px) clamp(14px, 2.5vw, 22px) !important;
    border: 3px solid var(--border) !important;
    background: var(--panel-2) !important;
    color: var(--text) !important;
  }

  .collapsible-label {
    font-size: clamp(1.02rem, 4vw, 1.35rem) !important;
    line-height: 1.24 !important;
  }

  .collapsible-arrow {
    margin-left: auto !important;
  }

  .collapsible-trigger .trigger-switch {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-left: 8px !important;
  }

  .collapsible-trigger .trigger-switch i {
    display: flex !important;
    align-items: center !important;
    width: 44px !important;
    height: 26px !important;
  }

  .collapsible-trigger .trigger-switch i::before {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 2px !important;
  }

  .collapsible-trigger .trigger-switch input:checked + i::before {
    transform: translateX(16px) !important;
  }

  .settings-card,
  .practice-card {
    display: none !important;
  }

  .settings-card.expanded,
  .practice-card.expanded {
    display: grid !important;
    padding: 18px !important;
    border: 3px solid var(--border) !important;
    gap: 10px !important;
  }

  .settings-card.expanded .controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(clamp(76px, 11vw, 112px), auto) !important;
    gap: clamp(8px, 1.6vw, 12px) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .settings-card.expanded .field,
  .settings-card.expanded .switch {
    min-width: 0 !important;
    min-height: clamp(76px, 11vw, 112px) !important;
    padding: clamp(10px, 2vw, 16px) !important;
    gap: clamp(6px, 1.2vw, 10px) !important;
  }

  .settings-card.expanded .field span,
  .settings-card.expanded .switch span {
    font-size: clamp(0.95rem, 2.15vw, 1.18rem) !important;
    line-height: 1.16 !important;
    white-space: nowrap !important;
  }

  .settings-card.expanded .custom-select,
  .settings-card.expanded .custom-select-button,
  .settings-card.expanded .field select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .settings-card.expanded .custom-select-button,
  .settings-card.expanded .field select {
    min-height: clamp(42px, 6vw, 54px) !important;
    padding: 8px 38px 8px 12px !important;
    font-size: clamp(1rem, 2.35vw, 1.25rem) !important;
    line-height: 1.1 !important;
  }

  .settings-card.expanded .custom-select-menu button {
    min-height: clamp(38px, 5.5vw, 48px) !important;
    font-size: clamp(0.95rem, 2.2vw, 1.15rem) !important;
  }

  .settings-card.expanded .toggle-field i {
    width: clamp(46px, 7vw, 58px) !important;
    height: clamp(26px, 4vw, 32px) !important;
  }

  .settings-card.expanded .toggle-field i::before {
    width: clamp(18px, 3vw, 22px) !important;
    height: clamp(18px, 3vw, 22px) !important;
  }

  .settings-card.expanded .toggle-field input:checked + i::before {
    transform: translateX(calc(clamp(46px, 7vw, 58px) - clamp(18px, 3vw, 22px) - 10px)) !important;
  }

  .settings-card.expanded .tempo-presets {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(6px, 1.4vw, 10px) !important;
    margin-top: 0 !important;
  }

  .settings-card.expanded .tempo-presets button {
    min-width: 0 !important;
    min-height: clamp(38px, 6vw, 52px) !important;
    padding-inline: 4px !important;
    font-size: clamp(0.9rem, 2.15vw, 1.1rem) !important;
  }

  .settings-card.expanded .eyebrow,
  .settings-card.expanded h2,
  .settings-card.expanded .panel-close,
  .practice-card.expanded .eyebrow,
  .practice-card.expanded h2,
  .practice-card.expanded .panel-close,
  .practice-card.expanded .practice-heading {
    display: none !important;
  }
}

@media (orientation: landscape) {
  html,
  body {
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
  }

  .app {
    width: 100vw !important;
    height: 100vh !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: var(--ui-gap) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.46fr) minmax(0, 0.98fr) !important;
    grid-template-rows: minmax(0, 0.41fr) minmax(0, 0.59fr) !important;
    grid-template-areas:
      "rhythm tempo settings"
      "rhythm tempo practice" !important;
    gap: var(--ui-gap) !important;
  }

  .collapsible-trigger,
  .theme-toggle-mobile {
    display: none !important;
  }

  .tempo-card,
  .settings-card,
  .practice-card,
  .rhythm-card-wrap {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: var(--ui-pad) !important;
  }

  .tempo-card {
    grid-area: tempo !important;
    display: grid !important;
    grid-template-rows: auto minmax(116px, 0.24fr) auto minmax(150px, 1fr) auto auto !important;
    gap: clamp(4px, 0.6vh, 8px) !important;
  }

  .settings-card {
    display: grid !important;
    grid-area: settings !important;
  }

  .practice-card {
    display: grid !important;
    grid-area: practice !important;
  }

  .rhythm-card-wrap,
  body:not([data-advanced-rhythm="true"]) .rhythm-card-wrap,
  body[data-advanced-rhythm="true"] .rhythm-card-wrap {
    display: grid !important;
    grid-area: rhythm !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: var(--ui-pad) !important;
    border: 3px solid var(--border) !important;
    background: var(--panel) !important;
    overflow: hidden !important;
  }

  body[data-advanced-rhythm="true"] .visualizer,
  .visualizer {
    display: grid !important;
  }

  .advanced-rhythm-toggle {
    display: none !important;
  }
}