/* ============================================================
   v6 Transport row + disclosures (plan item 2.2)
   ============================================================

   docs/visual-spec.md §8 gives row 1 eight controls:
     Play(44) · Stop · Loop · meter · now-playing pill · Tempo · Key · Vol
   Tempo and Key are DISCLOSURES — the button carries the readout, a static
   (merely hidden) panel carries the controls. See src/ui/Disclosure.js for why
   the panels are not built on open.

   Layering note, because this cost a day once: for NORMAL declarations,
   unlayered author rules outrank every layered one, so a layered rule can
   never win against style-v2.css by specificity alone. Rules here that must
   beat style-v2 therefore either (a) carry !important inside the layer — which
   outranks even an unlayered !important — or (b) live in the unlayered block
   at the bottom of this file with a more specific selector. Nothing here uses
   a bare layered rule to fight style-v2.
*/

@layer v6-components {

  /* ============================================================
     Row 1 — geometry
     ============================================================ */
  .playback-bar {
    /* 44px per the spec's row table; style-v2's --transport-height is 48 and
       unlayered, so this needs the in-layer !important to land. */
    height: var(--transport-h, 44px) !important;
    gap: var(--space-3, 12px) !important;
  }
  .playback-controls {
    align-items: center;
    gap: var(--space-2, 8px);
  }
  .playback-settings {
    justify-content: flex-end;
    gap: var(--space-3, 12px) !important;
    /* A flex item's automatic minimum size is its MIN-CONTENT width, so
       without this the group refuses to shrink no matter what its children
       allow, and it overhangs the bar instead (measured: 39px past the right
       edge at 1280px with the longest scale name). (item 2.2 follow-up) */
    min-width: 0;
  }

  /* Play is the only 44px control in the app, and it is a circle. Its label
     stays in the DOM as the accessible name. */
  .playback-controls #playBtn {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: var(--radius-pill, 999px) !important;
    justify-content: center;
  }
  .playback-controls #playBtn .btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .playback-controls #playBtn .v6-icon {
    width: 18px;
    height: 18px;
  }
  .playback-controls #stopBtn {
    width: var(--control-h-md, 30px);
    height: var(--control-h-md, 30px);
    padding: 0 !important;
    border-radius: var(--radius-md, 6px) !important;
  }
  .playback-controls #stopBtn .btn-text { display: none; }

  /* Loop — a ghost toggle that lights amber when it is on (SongTimeline adds
     `.active`, which style-v2 already paints; this only sets the geometry and
     the role colour). */
  /* style-v2's `.btn-icon-sm` and `.btn-icon-sm.active` are unlayered, and an
     unlayered normal declaration beats every layered one — so these need the
     in-layer !important, not more specificity. `.active` there is PURPLE, and
     purple means AI. */
  .playback-controls .zt-transport-toggle {
    width: var(--control-h-md, 30px) !important;
    height: var(--control-h-md, 30px) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 6px) !important;
    background: transparent !important;
    border: 1px solid var(--v6-border, rgba(255, 255, 255, 0.08)) !important;
    color: var(--text-secondary, #a1a1aa) !important;
  }
  .playback-controls .zt-transport-toggle:hover {
    background: var(--surface-500, #27272a) !important;
    color: var(--text-primary, #fafafa) !important;
  }
  .playback-controls .zt-transport-toggle.active {
    background: color-mix(in oklab, var(--color-transport-pause, #f59e0b) 22%, transparent) !important;
    border-color: var(--color-transport-pause, #f59e0b) !important;
    color: var(--color-transport-pause, #f59e0b) !important;
  }

  /* The record button is dead chrome without a MIDI device; RecordButton.js
     sets `hidden` until one connects. `.btn { display: inline-flex }` in
     style-v2 is unlayered, so [hidden] needs the in-layer !important. */
  .v6-record-btn[hidden] { display: none !important; }

  /* ============================================================
     Disclosure — trigger + static panel
     ============================================================ */
  .zt-disclosure {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .zt-disclosure__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--control-h-md, 30px);
    padding: 0 10px;
    background: var(--surface-400, #1f1f23);
    border: 1px solid var(--v6-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-md, 6px);
    color: var(--text-primary, #fafafa);
    font-family: var(--font-sans, system-ui);
    font-size: var(--type-body, 13px);
    line-height: 1.25;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-fast, 120ms),
                border-color var(--duration-fast, 120ms);
  }
  .zt-disclosure__btn:hover {
    background: var(--surface-500, #27272a);
    border-color: var(--v6-border-strong, rgba(255, 255, 255, 0.14));
  }
  .zt-disclosure__btn[aria-expanded="true"] {
    background: var(--surface-600, #2f2f35);
    border-color: var(--v6-border-strong, rgba(255, 255, 255, 0.14));
  }
  .zt-disclosure__btn .v6-icon { color: var(--text-secondary, #a1a1aa); }
  .zt-disclosure__caret { opacity: 0.6; }
  .zt-disclosure__unit {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #71717a);
  }
  .zt-disclosure__label {
    font-size: var(--type-body, 13px);
    font-weight: 500;
  }

  /* The Key disclosure is the ONLY control in row 1 whose width is content-
     driven: "C Major" is 7 characters, "E Phrygian Dominant" is 19, and the
     row has no slack left. Pinned at flex:0 0 auto with nowrap it pushed the
     volume readout off the right edge (measured: 39px of overflow at 1280px
     with the longest scale the picker can produce). It is the one control
     that may shrink, and its label ellipsises rather than the row growing.
     Tempo stays fixed — it is a short, tabular number. (item 2.2 follow-up) */
  #keyDisclosure {
    flex: 0 1 auto;
    min-width: 0;
  }
  #keyDisclosure .zt-disclosure__btn { min-width: 0; }
  #keyDisclosure .zt-disclosure__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Room for "C Major" when there is room; it ellipsises when there is not.
     Deliberately a max, not a min: a min-width here becomes part of the
     group's min-content size and re-creates the overflow it is meant to fix. */
  #keyDisclosure .zt-disclosure__label { max-width: 12rem; }

  /* Readouts are the only mono type in the shell (visual spec §1). */
  .zt-readout {
    font-family: var(--font-mono, monospace);
    font-size: var(--type-readout, 12px);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  /* FIXED, not absolute: the transport lives inside `.container`, a scroll
     box (`overflow-y: auto`) that Song mode shrinks to the height of the
     control panel — an absolutely-positioned panel would open into a
     scrollbar instead of over the arranger. Disclosure.js sets left/top from
     the trigger's rect; these are the pre-measure defaults. */
  .zt-popover {
    position: fixed;
    top: 96px;
    left: 16px;
    z-index: var(--z-popover, 1000);
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--surface-300, #18181b);
    border: 1px solid var(--v6-border-strong, rgba(255, 255, 255, 0.14));
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--shadow-3, 0 8px 24px rgba(0, 0, 0, 0.55));
    color: var(--text-primary, #fafafa);
    font-size: var(--type-body, 13px);
  }
  /* `hidden` has to beat `.zt-popover { display: flex }` AND anything
     unlayered — hence !important inside the layer. */
  .zt-popover[hidden] { display: none !important; }

  .zt-popover__title {
    font-size: var(--type-caption, 12px);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #71717a);
  }
  .zt-popover__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .zt-popover__hint {
    margin: 0;
    font-size: var(--type-caption, 12px);
    line-height: 1.4;
    color: var(--text-muted, #71717a);
  }
  .zt-popover__impact {
    display: grid;
    gap: 7px;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--accent-primary, #8b5cf6) 24%, var(--v6-border-faint, rgba(255,255,255,.08)));
    border-radius: var(--radius-md, 7px);
    background: color-mix(in srgb, var(--accent-primary, #8b5cf6) 7%, transparent);
    color: var(--text-secondary, #a1a1aa);
    font-size: var(--type-caption, 12px);
    line-height: 1.35;
  }
  .zt-popover__impact button {
    justify-self: start;
    min-height: 26px;
    padding: 3px 8px;
    border: 1px solid var(--v6-border-strong, rgba(255,255,255,.14));
    border-radius: var(--radius-sm, 5px);
    background: var(--surface-400, #202024);
    color: var(--text-primary, #fafafa);
    font: inherit;
    cursor: pointer;
  }
  .zt-popover__impact button:hover { border-color: var(--accent-primary, #8b5cf6); }
  /* Roomy panel: the tempo cluster's toolbar compaction (which hides the
     slider below 1200px) does not apply in here. */
  .zt-popover .v6-tempo-cluster {
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  .zt-popover .v6-tempo-slider {
    display: block !important;
    flex: 1 1 120px;
    width: auto !important;
    min-width: 110px;
  }
  .zt-popover .scale-select-compact {
    width: 100%;
    max-width: none;
  }
  /* item 3.7 — Key is Root × Mode. Two full-width selects in one flex row
     would each demand 100%, so inside the row they size to content: the root
     is twelve short names and takes a fixed column, the mode takes the rest.
     `min-width: 0` because a <select> refuses to shrink below its longest
     option otherwise — which is how row 1 gained 39px of overflow last time. */
  .zt-popover__row > .scale-select-compact {
    width: auto;
  }
  .zt-popover .scale-select-root {
    flex: 0 0 62px;
  }
  .zt-popover__row > #scaleSelect {
    flex: 1 1 140px;
    min-width: 0;
  }

  /* ============================================================
     Toggle pill (visual spec §5) — used by Metronome today, by Follow /
     Snap / Versions in 7.1.
     ============================================================ */
  .zt-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--control-h-sm, 24px);
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--v6-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-pill, 999px);
    color: var(--text-secondary, #a1a1aa);
    font-family: var(--font-sans, system-ui);
    font-size: var(--type-caption, 12px);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast, 120ms),
                border-color var(--duration-fast, 120ms),
                color var(--duration-fast, 120ms);
  }
  .zt-toggle:hover {
    border-color: var(--v6-border-strong, rgba(255, 255, 255, 0.14));
    color: var(--text-primary, #fafafa);
  }
  /* "On" is never purple — purple means AI (visual spec §3). */
  .zt-toggle.is-on {
    background: var(--surface-600, #2f2f35);
    border-color: var(--v6-border-strong, rgba(255, 255, 255, 0.14));
    color: var(--text-primary, #fafafa);
  }
  .zt-toggle.is-on::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-transport-play, #22c55e);
  }

  /* ============================================================
     Row 2 — the ⋯ overflow menu
     ============================================================ */
  .zt-disclosure--menu .zt-popover--menu {
    min-width: 260px;
    padding: 6px;
    gap: 2px;
  }
  .zt-popover__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md, 6px);
    color: var(--text-primary, #fafafa);
    font-family: var(--font-sans, system-ui);
    font-size: var(--type-body, 13px);
    text-align: left;
    cursor: pointer;
  }
  .zt-popover__item:hover:not(:disabled) { background: var(--surface-500, #27272a); }
  .zt-popover__item:disabled { opacity: 0.45; cursor: not-allowed; }
  .zt-popover__item .v6-icon {
    margin-top: 2px;
    color: var(--text-secondary, #a1a1aa);
  }
  .zt-popover__item-text { display: flex; flex-direction: column; gap: 2px; }
  .zt-popover__item-label { font-weight: 600; }
  .zt-popover__item-sub {
    font-size: var(--type-caption, 12px);
    line-height: 1.4;
    color: var(--text-muted, #71717a);
  }
  /* Danger is a ghost that only fills on hover (visual spec §5). */
  .zt-popover__item--danger .v6-icon,
  .zt-popover__item--danger .zt-popover__item-label {
    color: var(--color-danger, #ef4444);
  }
  .zt-popover__item--danger:hover:not(:disabled) {
    background: color-mix(in oklab, var(--color-danger, #ef4444) 14%, transparent);
  }

  /* ============================================================
     Editor toolbar — scale eye + Snap, beside the chord strip
     ============================================================ */
  .zt-editor-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
  /* Standing alone (no chord strip to move into) it still needs to look like
     a toolbar row rather than two loose buttons. */
  .container > .zt-editor-toolbar {
    padding: 6px 16px;
  }
}

/* ============================================================
   UNLAYERED — only for rules that must beat style-v2.css by
   specificity (see the layering note at the top of this file).
   ============================================================ */

/* Export is a SECONDARY action. style-v2.css paints it with the brand
   gradient, which the visual spec reserves for the AI (Create ▾ sits two
   inches away wearing the same colour, so neither reads as the important one). */
.v6-ai-strip #exportWavBtn {
    background: var(--surface-400, #1f1f23) !important;
    border: 1px solid var(--v6-border, rgba(255, 255, 255, 0.08)) !important;
    color: var(--text-primary, #fafafa) !important;
}
.v6-ai-strip #exportWavBtn:hover {
    background: var(--surface-500, #27272a) !important;
    border-color: var(--v6-border-strong, rgba(255, 255, 255, 0.14)) !important;
}

/* At narrow widths playback-controls already contains the meter and the
   now-playing pill. Let the settings group occupy an intentional second line
   instead of allowing its wrapped children to escape a fixed 44px row. This
   sits in the same layer as the base height rule so the important declaration
   wins the reversed important-layer order. */
@layer v6-components {
  @media (max-width: 900px) {
    .playback-bar {
      height: auto !important;
      min-height: 40px !important;
    }
  }
}