/* Band tune panel (BD6; band DESIGN §2.5, §2.3 touch rules) per layout class. Not a core sheet: a Band overlay inside
   BD5b's #bd-tune-panel host in .bd-hud. views/tune.js sets data-layout on .bd-tunepanel from the viewport (tall, short,
   tablet-tall, tablet-wide, wide) and, while it is open, bd-tune-open and bd-tune-at-<layout> on #app; the rules near the
   end hide the deck under the panel and, on tablets, keep the build beside it when the HUD does not do it itself (marked
   !important: they must win over however such a deck places its controls, inline styles included). Every selector names a
   bd- class; colours are tokens. */

.bd-tunepanel { position: fixed; z-index: 6; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-lift); pointer-events: auto;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: transform var(--t-layout) var(--spring), opacity var(--t-layout) ease-out; }
.bd-tunepanel[hidden] { display: none; }
.bd-tunepanel :is(button, canvas) { pointer-events: auto; touch-action: none; -webkit-touch-callout: none; }

/* From the bottom: phone portrait (min(50 %, 420 px) + the bottom inset) and tablet portrait (45 %). */
.bd-tunepanel:is([data-layout="tall"], [data-layout="tablet-tall"]) { left: 0; right: 0; bottom: 0; border-radius: 24px 24px 0 0;
  padding: 12px calc(var(--sar) + 16px) calc(var(--sab) + 12px) calc(var(--sal) + 16px); transform: translateY(104%); }
.bd-tunepanel[data-layout="tall"] { height: calc(min(50vh, 420px) + var(--sab)); }
.bd-tunepanel[data-layout="tablet-tall"] { height: calc(45vh + var(--sab)); }

/* From the right, below the top bar: phone landscape (55 % of the width), tablet landscape and desktop (60 %). */
.bd-tunepanel:is([data-layout="short"], [data-layout="tablet-wide"], [data-layout="wide"]) { right: 0; bottom: 0;
  top: calc(var(--sat) + 8px + var(--bd-bar) + 8px); border-radius: 24px 0 0 24px; transform: translateX(104%);
  padding: 12px calc(var(--sar) + 16px) calc(var(--sab) + 12px) 16px; }
.bd-tunepanel[data-layout="short"] { width: 55vw; flex-direction: row; align-items: stretch; gap: 12px; }
.bd-tunepanel:is([data-layout="tablet-wide"], [data-layout="wide"]) { width: 60vw; }

.bd-tunepanel.is-in { transform: none; }

/* The control row: the two modes on the left, start over and Done on the right (a column in short). */
.bd-tune-bar { display: flex; align-items: center; gap: 12px; flex: none; }
.bd-tune-modes { display: flex; gap: 8px; margin-right: auto; }
.bd-tunepanel[data-layout="short"] .bd-tune-bar { flex-direction: column; justify-content: flex-start; gap: 8px; }
.bd-tunepanel[data-layout="short"] .bd-tune-modes { flex-direction: column; margin: 0 0 auto; }

.bd-tune-mode, .bd-tune-btn { appearance: none; border: 0; margin: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer;
  display: grid; place-items: center; flex: none; -webkit-user-select: none; user-select: none;
  transition: transform var(--t-micro) var(--spring), background-color var(--t-micro), box-shadow var(--t-micro); }
.bd-tune-mode { width: 72px; height: 56px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow), var(--press); }
.bd-tune-mode .ico { width: 30px; height: 30px; }
.bd-tune-mode[aria-pressed="true"] { background: var(--bd-melody); box-shadow: 0 0 0 3px var(--ink), var(--press); }
.bd-tune-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow), var(--press); }
.bd-tune-btn .ico { width: 28px; height: 28px; }
.bd-tune-done { width: 72px; height: 72px; background: var(--coral); }
.bd-tune-done .ico { width: 34px; height: 34px; stroke-width: 2.8; }
.bd-tunepanel .is-pressed { transform: scale(.94); transition-duration: 90ms; }

/* 9-10 only: one hint line above the work area. */
.bd-tune-hint { margin: 0; flex: none; font-size: var(--label); font-weight: 700; line-height: 1.25; color: var(--muted); }
.bd-tune-hint[hidden] { display: none; }

/* The work area: colour bands drawn on the canvas (low sand, high butter), at least 260 px tall on phones and 360 on tablets
   where the panel has room, and it fills the rest of the panel (no dead space under it). */
.bd-tune-work { position: relative; flex: 1 1 260px; min-height: 120px; border-radius: 16px; overflow: hidden;
  background: var(--sand); box-shadow: inset 0 0 0 2px var(--hair); }
.bd-tunepanel:is([data-layout="tablet-tall"], [data-layout="tablet-wide"], [data-layout="wide"]) .bd-tune-work { flex-basis: 360px; }
.bd-tunepanel[data-layout="short"] .bd-tune-work { flex: 1 1 auto; min-width: 0; }
/* Short is a grid: the control column on the left, the 9-10 hint line above the work area on the right (in a row the
   hint took the width and left the work area 24 px). */
.bd-tunepanel[data-layout="short"]:not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; }
.bd-tunepanel[data-layout="short"] .bd-tune-bar { grid-column: 1; grid-row: 1 / span 2; }
.bd-tunepanel[data-layout="short"] .bd-tune-hint { grid-column: 2; grid-row: 1; }
.bd-tunepanel[data-layout="short"] .bd-tune-work { grid-column: 2; grid-row: 2; }
.bd-tunepanel[data-layout="short"] .bd-tune-hint[hidden] + .bd-tune-work { grid-row: 1 / span 2; }
.bd-tune-area { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.bd-tune-area[hidden] { display: none; }

/* The playback bubble: 32 px in the melody colour, riding the line in time with the band. */
.bd-tune-bubble { position: absolute; left: 0; top: 0; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%;
  background: var(--bd-melody); border: 3px solid var(--ink); box-sizing: border-box;
  box-shadow: 0 0 0 3px var(--card), 0 3px 10px rgba(93, 63, 26, .4); pointer-events: none;
  opacity: 0; transition: opacity var(--t-micro); will-change: transform; }
.bd-tune-bubble.is-on { opacity: 1; }

/* The deck while the panel is open, for a HUD that does not place it itself (BD5b's HUD marks itself .is-tune and moves its
   own deck column; these rules then stand back): pads, the tune button and the tray hide under the panel (the tray button
   too); in tall and short the build hides as well; on tablets and desktops the build stays enabled beside the panel. */
#app.bd-tune-open .bd-hud:not(.is-tune) :is(.bd-pad, #bd-tune, .bd-tray, #bd-tray-open) { visibility: hidden !important; pointer-events: none !important; }
#app.bd-tune-open:is(.bd-tune-at-tall, .bd-tune-at-short) .bd-hud:not(.is-tune) #bd-build { visibility: hidden !important; pointer-events: none !important; }
#app.bd-tune-open.bd-tune-at-tablet-tall .bd-hud:not(.is-tune) #bd-build { position: fixed !important; left: calc(var(--sal) + 16px) !important;
  right: auto !important; top: auto !important; bottom: calc(45vh + var(--sab) + 12px) !important; margin: 0 !important; }
#app.bd-tune-open:is(.bd-tune-at-tablet-wide, .bd-tune-at-wide) .bd-hud:not(.is-tune) #bd-build { position: fixed !important;
  left: calc(var(--sal) + 16px) !important; right: auto !important; top: auto !important; bottom: calc(var(--sab) + 16px) !important; margin: 0 !important; }

/* A core toast must not sit on the work area while the panel is open: it moves under the top bar, and to the band's side
   of a side panel. The tune's own undo toast (Start again, a replaced tune) is placed by views/tune.js instead (inline
   left/top, clear of the work area, the controls and the chips) and made compact: only its round Undo button shows, the
   line stays for screen readers. */
#app.bd-tune-open ~ .toast { top: calc(var(--sat) + 8px + var(--bd-bar) + 12px); bottom: auto; }
.toast.has-undo.bd-tune-toast { padding: 6px; gap: 0; border-radius: 999px; max-width: none; }
.toast.has-undo.bd-tune-toast > :not(button), .toast.has-undo.bd-tune-toast .undo-btn > :not(.ico) { position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.toast.has-undo.bd-tune-toast .undo-btn { width: var(--tap); height: var(--tap); min-height: 0; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
.toast.has-undo.bd-tune-toast .undo-btn .ico { width: 28px; height: 28px; }
#app.bd-tune-open.bd-tune-at-short ~ .toast { left: 22.5vw; max-width: calc(45vw - 32px); }
#app.bd-tune-open:is(.bd-tune-at-tablet-wide, .bd-tune-at-wide) ~ .toast { left: 20vw; max-width: calc(40vw - 32px); }

@media (prefers-reduced-motion: reduce) {
  .bd-tunepanel { transition: opacity var(--t-calm) linear; }
  .bd-tunepanel:not(.is-in) { opacity: 0; }
  .bd-tunepanel:is([data-layout]) { transform: none; }
  .bd-tunepanel .is-pressed { transform: none; opacity: .85; }
}