/* Accordion — shared chrome that wraps the active keyboard view: stage container,
   iOS callout suppression, collapsible help disclosure, view sizing, phone viewport
   scroll containment, and the bellows-mode meter. */

:root {
  /* Bellows-meter palette. The track sits inside a panel chrome row so
   * a soft surface-2 reads on the cream surface; "active" glow uses
   * the brand accent so it follows the rest of the site. */
  --play-acc-shared-c01: var(--surface-2);
  --play-acc-shared-c02: var(--accent-primary);
  --play-acc-shared-c03: var(--accent-primary-soft);

  /* Shared accordion body / panel gradient. The chromatic, Stradella,
   * and diatonic keyboards all sit on the same wood chassis — defining
   * the gradient here lets all three keyboards switch in lockstep when
   * the page theme flips, instead of each one hard-coding a near-black
   * wood that reads as a floating dark island on the cream page.
   *
   * Light mode: warm medium walnut, an honest piano-accordion body
   *             finish that contrasts with both the cream page chrome
   *             and the white/cream naturals on the keyboard.
   * Dark mode:  near-black warm wood (the original identity) keeps the
   *             keyboard the focal point on an inky page.
   *
   * Edge / border tone is provided separately so each mode can pick its
   * own contrasting hairline against the panel (light-mode wood needs a
   * darker hairline than the brand --border default to actually show). */
  --play-acc-panel-from: #b08c64;
  --play-acc-panel-to: #8c6b48;
  --play-acc-panel-edge: rgba(74, 53, 32, 0.6);

  /* Muted label text painted directly on the wood panel — the
   * stradella row labels (COUNTER-BASS / BASS / MAJOR / …) and the
   * diatonic row labels read this token. Needs enough contrast
   * against the panel to be legible without competing with the
   * buttons.
   *   Light wood → warm dark walnut, in the same family as the
   *                dark-mode panel for visual cohesion.
   *   Dark wood  → warm cream-tan, reads as muted-but-legible on
   *                the dark walnut without going all the way to
   *                pure white. */
  --play-acc-panel-label: #3d2c1c;
}

:root[data-theme='dark'] {
  /* Lifted from near-black (#1c1612 → #2a221a) to a richer walnut so
   * the panel reads as wood instead of just blending into the inky
   * page chrome. Still plenty dark to make the white naturals pop. */
  --play-acc-panel-from: #3d2c1c;
  --play-acc-panel-to: #251a10;
  --play-acc-panel-edge: var(--border);
  --play-acc-panel-label: #c8b89c;
}

/* OS dark mode (no explicit toggle) — mirror the data-theme="dark"
 * block above. Single source of truth keeps the three keyboards
 * (chromatic, stradella, diatonic) consistent under OS-driven dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --play-acc-panel-from: #3d2c1c;
    --play-acc-panel-to: #251a10;
    --play-acc-panel-edge: var(--border);
    --play-acc-panel-label: #c8b89c;
  }
}

.accordion-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px 0;
}

/* ---------- Suppress iOS Safari long-press callout ----------
 *
 * On an iPad/iPhone Safari, long-pressing on a button or any text
 * inside the playing area surfaces the system text-selection menu
 * ("Look Up" / "Translate" / "Find Selection" / "Search Web"). The
 * containers below already set `-webkit-user-select: none` to stop
 * text selection itself, but iOS Safari still shows the callout
 * unless `-webkit-touch-callout: none` is set explicitly on the
 * elements being long-pressed. We blanket the whole stage and the
 * register strip so any descendant — buttons, row labels, the help
 * summary above the keyboard — is callout-suppressed. */
.accordion-stage,
.accordion-stage *,
.register-strip,
.register-strip * {
  -webkit-touch-callout: none;
}

/* ---------- Help panel as a collapsible disclosure ----------
 *
 * The accordion has a long "How to play" section (six bullets
 * covering Stradella, Chromatic, registers, etc.). On desktop
 * there's plenty of room for it under the keyboard, but on iPad
 * Safari (which sits between the phone breakpoint and the desktop
 * layout) the open panel was eating most of the vertical space
 * and squeezing the keyboard above it. Wrapping it in `<details>`
 * lets the player collapse it; JS in accordion.js closes it by
 * default on touch-capable devices.
 *
 * Note: we deliberately do NOT add a base `details.instrument-help
 * { display: block }` rule here — `<details>` is already block by
 * default, and adding the rule would beat the shared mobile-hide
 * rule in `play/style.css` (`.instrument-help { display: none }`)
 * on specificity (0,1,1 vs 0,1,0). The summary styling below uses
 * `details.instrument-help > summary` which still works because the
 * summary inherits the parent's `display: none` and disappears too.
 */
details.instrument-help > summary {
  cursor: pointer;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg);
  margin: 0 0 8px;
  font-weight: 700;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
}

/* WebKit-only marker reset so the chevron we render via ::before is
 * the only disclosure indicator. */
details.instrument-help > summary::-webkit-details-marker {
  display: none;
}

details.instrument-help > summary::before {
  content: '▸';
  display: inline-block;
  font-size: 10px;
  color: var(--accent);
  transition: transform 120ms ease;
}

details.instrument-help[open] > summary::before {
  transform: rotate(90deg);
}

details.instrument-help > summary:hover,
details.instrument-help > summary:focus-visible {
  color: var(--accent);
  outline: none;
}

/* ---------- Bellows mode ----------
 *
 * Phone-as-bellows: a checkbox plus a thin live meter showing how much
 * "air" the player is currently pushing through the instrument. The meter
 * fills based on smoothed accelerometer magnitude (driven from JS via
 * `--bellows-pressure: <0..1>`).
 */
.bellows-control {
  align-items: center;
  gap: 8px;
}

.bellows-meter {
  display: inline-block;
  width: 64px;
  height: 6px;
  border-radius: 3px;
  background: var(--play-acc-shared-c01, rgba(15, 23, 42, 0.85));
  border: 1px solid var(--border);
  overflow: hidden;
  vertical-align: middle;
  --bellows-pressure: 0;
}

.bellows-meter-fill {
  display: block;
  height: 100%;
  width: calc(var(--bellows-pressure) * 100%);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
  transition: width 60ms linear;
}

/* When bellows mode is active the meter glows to draw the eye to it. */
.bellows-control.is-active .bellows-meter {
  border-color: var(--play-acc-shared-c02, rgba(168, 85, 247, 0.65));
  box-shadow: 0 0 8px -2px var(--play-acc-shared-c03, rgba(168, 85, 247, 0.5));
}

/* The "stage" hosts whichever single view the player has selected. */
.accordion-view {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 4px;
  display: flex;
  justify-content: center;
}

.accordion-view .piano-keyboard {
  width: 100%;
  margin: 0 auto;
  max-width: 980px;
}

/* Desktop-short viewport fix (e.g. devtools open in a landscape window
 * pinning the page to 1728×471). The shared piano-keyboard component
 * has a `@media (max-width: 720px), (max-height: 540px)` rule in
 * play/styles/keyboard.css that sets `height: 100%` on the keyboard —
 * intended for narrow-width phones where the parent has an explicit
 * height for that 100% to resolve against. On the accordion, the
 * `.accordion-view` host has no explicit height, so the mobile rule
 * collapses the keyboard to its own padding (~32px) and the keys
 * squash into a thin strip.
 *
 * Scope this override to wide-but-short viewports only — narrow phones
 * still want the shared keyboard's mobile sizing (full-bleed, scrolls
 * sideways). At desktop widths, restore the standalone-page clamp so
 * the keyboard renders at its declared 180–280px regardless of how
 * cramped the page is vertically. */
@media (max-height: 540px) and (min-width: 721px) {
  .accordion-view .piano-keyboard {
    height: clamp(180px, 32vh, 280px);
    max-height: none;
    min-width: 0;
    max-width: 980px;
  }
}

.accordion-view[data-kind='stradella'],
.accordion-view[data-kind='chromatic'] {
  /* Both button systems can be wide; let them breathe horizontally. */
  justify-content: flex-start;
  /* Narrow desktop viewports (720–1024px) can still drive `--btn-size`
   * down to its 26px floor and produce a row wider than the container —
   * particularly the diagonal bottom row of a 120-bass Stradella. The
   * mobile breakpoint below already adds `overflow: auto` for touch
   * devices, but desktop mouse users need an escape too. Allow the
   * .accordion-view to scroll horizontally whenever its button system
   * exceeds the container; the keyboard remains centred while it fits. */
  overflow-x: auto;
}

/* The diatonic keyboard is the narrowest of the three button systems
 * (just 2 halves of N rows each, with a divider). On both desktop AND
 * mobile we want it centered horizontally so the empty space on either
 * side reads as deliberate breathing room, not a left-pinned widget.
 * `safe center` falls back to flex-start if the content somehow
 * overflows (multi-row tuning at very narrow viewport), keeping the
 * left edge reachable for scroll. */
.accordion-view[data-kind='diatonic'] {
  justify-content: safe center;
  overflow-x: auto;
}

.accordion-view[data-kind='stradella'] > *,
.accordion-view[data-kind='chromatic'] > * {
  width: 100%;
}

/* ---------- Phone-sized viewports ----------
 *
 * Same strategy as the standalone piano page: enforce a minimum tap
 * target for buttons / keys and let the host scroll horizontally when
 * the layout is wider than the viewport. With `touch-action: pan-x` on
 * the buttons themselves, the browser handles horizontal scroll
 * natively (with momentum); the JS in stradella.js / chromatic.js /
 * shared/keyboard.js just defers the press by ~80ms so a swipe that
 * starts on a button doesn't accidentally fire it (see
 * `play/shared/scroll-gesture.js`). */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  /* The shared rule in `play/style.css` makes `.accordion-stage` a
   * flex:1 / overflow:auto playing area — but the register strip lives
   * inside it (right above the buttons, like on a real instrument) and
   * we want it pinned, not scrolling. Override: stage is a flex column
   * with hidden overflow, register strip stays at natural height,
   * `.accordion-view` underneath fills the rest and owns the scroll. */
  .accordion-stage {
    overflow: hidden;
    padding: 4px 0 0;
    gap: 4px;
  }

  .accordion-stage > .register-strip {
    flex: 0 0 auto;
  }

  .accordion-view {
    flex: 1 1 0;
    min-height: 0;
    /* Both axes — horizontal layouts (landscape stradella, wide piano)
     * overflow X; vertical layouts (portrait stradella / chromatic)
     * overflow Y. `auto` shows scrollbars only when actually needed. */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* Centering inside an overflowing container strands the left/top
     * half (scrollLeft/scrollTop can't go negative). Pin to the start
     * so scrolling reaches every column / row. The piano sub-view
     * still re-applies horizontal centering via the piano-keyboard's
     * own width constraint, so a layout that fits the viewport stays
     * centered. */
    justify-content: flex-start;
    /* Edge-to-edge so the swipe-to-scroll affordance reaches the screen
     * edges and there's no dead margin to grab. */
    padding: 0;
  }
}