/* ═══════════════════════════════════════════
   TABLET RESPONSIVE (≤ 1024px)
   Flat single-row flex layout.
   Progress bar uses the same purple→gold
   gradient as the PC scrubber (via JS).
   Same two-row structure (scrubber + controls) at all sizes — just scaled.
   No layout dissolving, no reordering.
   ═══════════════════════════════════════════ */

/* ── Medium screens (≤ 1024px) ── */
/* ══════════════════════════════════════════════════
   BREAKPOINT 1 — ≤ 1024px  (tablets, small laptops)
   Everything scales down slightly. Same layout structure.
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --player-h: 90px; --touch-min: 44px; }

  header { padding: 7px 14px; gap: 6px; }
  .hdr-top { gap: 8px; }
  .hdr-bot { gap: 8px; }
  .select-group { gap: 6px; }
  .select-group label { font-size: 0.7rem; }
  select { font-size: 0.82rem; padding: 0 28px 0 10px; height: 40px; border-radius: 8px; }
  #songSelect { min-width: 160px; }
  #partSelect { min-width: 140px; }
  .toggle-wrap span { font-size: 0.7rem; }
  .toggle { width: 36px; height: 20px; }
  .toggle-slider::before { width: 13px; height: 13px; }
  .toggle input:checked + .toggle-slider::before { transform: translateX(16px); }
  .header-btn { height: 40px; padding: 0 10px; font-size: 0; gap: 0; border-radius: 8px; min-width: 40px; justify-content: center; }
  .header-btn.icon-btn { padding: 0; width: 40px; }
  .header-btn svg { width: 16px; height: 16px; }

  /* Scrubber strip */
  .scrubber-strip { padding: 6px 14px 2px; }
  .scrub-time { font-size: 0.68rem; min-width: 28px; }

  /* Player main */
  .player-main { padding: 0 14px 4px; }
  .player-left { visibility: hidden; }

  /* Transport */
  .ctrl-btn.skip-btn { flex-direction: column; gap: 1px; width: 42px; height: 42px; }
  .ctrl-btn.skip-btn svg { width: 18px; height: 18px; }
  .skip-label { font-size: 0.58rem; }
  .ctrl-btn.play-btn { width: 48px; height: 48px; }
  .ctrl-btn.play-btn svg { width: 18px; height: 18px; }
  .controls { gap: 4px; }
  .controls .phrase-looper { margin-right: 4px; }

  /* Phrase + speed */
  .phrase-btn { height: 30px; padding: 0 10px; font-size: 0.76rem; }
  .phrase-stop { width: 30px; height: 30px; font-size: 0.73rem; }
  .speed-btn { height: 30px; padding: 0 10px; font-size: 0.76rem; }
  .speed-step-btn { height: 30px; min-width: 26px; font-size: 1rem; }
  .speed-reset-btn { width: 30px; height: 30px; font-size: 0.73rem; }
  .speed-expand-pct { font-size: 0.76rem; min-width: 32px; }

  /* Volume */
  input#volume { width: 70px; }
  .mute-btn svg { width: 18px; height: 18px; }
  .volume-wrap { margin-left: 10px; }

  /* PDF toolbar — match specificity of .pdf-toolbar .pdf-tool-btn so this wins */
  .pdf-toolbar { height: 44px; padding: 0 12px; }
  .pdf-toolbar .pdf-tool-btn { height: 32px; font-size: 0.78rem; padding: 0 9px; }
  .pdf-zoom-label { font-size: 0.75rem; min-width: 36px; }
  .pdf-page-info { font-size: 0.75rem; }
  /* Not enough vertical room for the two-line sub-label at 32px */
  .scroll-sub-label { display: none; }
}

/* ══════════════════════════════════════════════════
   BREAKPOINT 2 — ≤ 820px  (portrait tablets, large phones)
   Brand name shrinks to initials "CG".
   ══════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .brand-full { display: none; }
  .brand-short { display: inline; }
  #songSelect { min-width: 150px; }
  #partSelect { min-width: 130px; }
}

/* ══════════════════════════════════════════════════
   ORIENTATION — landscape tablet
   Flatten both header rows into a single line.
   display:contents makes hdr-top/hdr-bot transparent
   to flex layout so all children share one row.
   ══════════════════════════════════════════════════ */
@media (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) {
  :root { --player-h: 82px; }
  header { flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 5px 10px; gap: 6px; overflow: visible; }
  .hdr-top, .hdr-bot { display: contents; }
  .hdr-icons { display: contents; }
  .brand-logo { width: 26px; height: 26px; }
  .brand-name { font-size: 1rem; }
  select { height: 38px; font-size: 0.8rem; }
  #songSelect { min-width: 0; flex: 1; }
  #partSelect { min-width: 0; flex-shrink: 1; }
  .toggle-wrap span { font-size: 0.68rem; }
  .toggle { width: 34px; height: 19px; }
  .toggle-slider::before { width: 12px; height: 12px; }
  .toggle input:checked + .toggle-slider::before { transform: translateX(15px); }
  .header-btn { height: 38px; flex-shrink: 0; }
  .header-btn.icon-btn { width: 38px; }
  /* PDF toolbar: enough vertical space in landscape tablet — match desktop sizing */
  .pdf-toolbar { height: 50px; padding: 0 16px; }
  .pdf-toolbar .pdf-tool-btn { height: 40px; font-size: 0.85rem; padding: 0 12px; }
  .scroll-sub-label { display: block; }
  .version-tag { display: none; }
}

/* ══════════════════════════════════════════════════
   TABLET LANDSCAPE ONLY — center header items
   min-width: 1024px targets iPads (1024px+) and safely
   excludes all phones (max ~932px in landscape).
   Overrides flex:1 on song so items can center properly.
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
  header { justify-content: center; }
  #songSelect { flex: none; min-width: 160px; max-width: 280px; }
}

/* ══════════════════════════════════════════════════
   TABLET PORTRAIT — single row
   iPads have enough width; keep everything on one line.
   Hide AUTOPLAY text + version tag so it all fits.
   ══════════════════════════════════════════════════ */
@media (min-width: 601px) and (orientation: portrait) and (pointer: coarse) {
  header { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 7px 16px; gap: 6px; }
  .hdr-top { display: contents; }
  .hdr-bot { display: contents; }
  /* Gear sits on the same row as brand+song+part — just don't force it to its own row */
  .hdr-icons { display: flex; align-items: center; gap: 10px; flex-basis: auto; margin-left: auto; }
  #songSelect { min-width: 0; flex-shrink: 1; }
  #partSelect { min-width: 0; flex-shrink: 1; }
  .version-tag { display: none; }
  /* PDF toolbar: iPads have plenty of vertical space — restore desktop sizing
     (overrides the ≤1024px reduction of 44px / 32px / no sub-label) */
  .pdf-toolbar { height: 50px; padding: 0 16px; }
  .pdf-toolbar .pdf-tool-btn { height: 40px; font-size: 0.85rem; padding: 0 12px; }
  .scroll-sub-label { display: block; }
}

/* ══════════════════════════════════════════════════
   TOUCH DEVICES — hide volume, compact PDF toolbar
   Applies to all touch screens (phones + tablets).
   ══════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .volume-wrap { display: none; }
  .btn-label { display: none; }
  #zoomPct { display: none; }
}
/* All touch devices have enough room for full PDF toolbar labels */
@media (pointer: coarse) {
  .pdf-toolbar .btn-label { display: inline; }
  #zoomPct { display: inline; }
}

/* ══════════════════════════════════════════════════
   BREAKPOINT 3 — ≤ 600px  (phones, very narrow windows)
   Pill labels shorten, brand text hidden, logo only.
   Logo moves inline with controls (left-aligned, not centred on own row).
   ══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  :root { --player-h: 88px; }
  .brand-name { display: none; }
  /* Hide text labels on PDF toolbar buttons — now handled by pointer:coarse */
  .phrase-btn .pb-label { font-size: 0; }
  .phrase-btn .pb-label::after { content: 'Loop'; font-size: 0.76rem; }
  #speedLabel { display: none; }
  .speed-label-short { display: inline; font-size: 0.76rem; }
  .speed-expand-pct { min-width: 28px; }
  #songSelect { min-width: 120px; }
  #partSelect { min-width: 110px; }
  /* Safety net — if controls still too wide, wrap rather than overflow */
  .controls { flex-wrap: wrap; justify-content: center; }
}

/* ══════════════════════════════════════════════════
   PHONE PORTRAIT — grid header
   3-column grid: brand (spans 2 rows) | content 1fr | utilities
   Col 1: logo stacked above CG initials
   Col 2 row 1: song select   Col 3 row 1: theme/reset/help
   Col 2 row 2: part + star   Col 3 row 2: autoplay toggle
   Placed AFTER ≤600px so brand-name override wins.
   ══════════════════════════════════════════════════ */
@media (max-width: 600px) and (orientation: portrait) and (pointer: coarse) {
  header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 6px;
    padding: 8px 12px;
    align-items: center;
  }

  /* Dissolve both wrappers so children become direct grid items */
  .hdr-top { display: contents; }
  .hdr-bot { display: contents; }

  /* ── Col 1, rows 1–2: brand stacked vertically ── */
  .brand { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; gap: 3px; align-self: center; }
  .brand-logo { width: 28px; height: 28px; }
  /* Show CG initials under logo (overrides ≤600px brand-name:none) */
  .brand-name  { display: inline; font-size: 0.85rem; }
  .brand-full  { display: none; }
  .brand-short { display: inline; }

  /* ── Col 2, row 1: song select ── */
  .hdr-top .select-group { grid-column: 2; grid-row: 1; display: flex; min-width: 0; }
  .hdr-top .select-group > label { display: none; }
  #songSelect { flex: 1; min-width: 0; }

  /* ── Col 3, row 1: theme / reset / help icon buttons ── */
  .hdr-icons { grid-column: 3; grid-row: 1; margin-left: 0; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .hdr-icons .header-btn.icon-btn { width: 32px; height: 32px; }
  .hdr-icons .header-btn.icon-btn svg { width: 13px; height: 13px; }

  /* ── Col 2, row 2: part select + star ── */
  .hdr-bot .select-group { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 6px; min-width: 0; }
  .hdr-bot .select-group > label { display: none; }
  #partSelect { flex: 1; min-width: 0; }

  /* ── Col 3, row 2: (autoplay toggle moved to settings panel) ── */

  /* Welcome screen: collapse feature grid to single column.
     .trio-wrap in components.css sets repeat(3,1fr) without a media query and
     wins the cascade over the base.css ≤480px rule — override it here. */
  .welcome-screen { overflow-x: hidden; }
  .feature-grid { grid-template-columns: 1fr; max-width: 100%; }
  .trio-wrap { grid-template-columns: 1fr; }

  /* Fullscreen not useful in portrait — hide to give other PDF controls more room */
  #fullscreenBtn { display: none; }
  .toolbar-divider { display: none; }
  /* "Scroll Paused" label is wider than "Scrolling" and clips the zoom button —
     drop the Zoom text when paused, keeping icon + % is enough */
  .pdf-toolbar:has(.scroll-main-btn.state-recording) #zoomToggleBtn .btn-label,
  .pdf-toolbar:has(.scroll-main-btn.state-paused)    #zoomToggleBtn .btn-label { display: none; }
  .version-tag { display: none; }
}