/* ============================================================
   v6 Section strip — colored bands above the arranger timeline
   ============================================================
*/

@layer v6-components {

  /* The strip is the BAND ROW and nothing else (item 2.6). It used to be a
     flex row — label · bands · buttons — so the first band started about
     100px right of the canvas's left edge and no arithmetic could line a band
     up with the clips underneath it. The label and the buttons moved into
     .timeline-header (.v6-section-strip__tools) rather than into a caption row
     of their own, which measured 64px against this row's 32px — half of it
     taken out of the arranger canvas on the same axis item 2.4 reclaimed.
     Horizontal padding has to stay off this element: a band's
     `left` is measured from the canvas's own zoom and scroll, so any inset
     here shifts every band off the clip column it labels. */
  .v6-section-strip {
    display: block;
    padding: 3px 0 4px;
    background: var(--surface-300, #18181b);
    border-bottom: 1px solid var(--v6-border-faint, rgba(255,255,255,0.04));
    color: var(--text-secondary, #a1a1aa);
    font-family: var(--font-sans, system-ui);
    font-size: var(--text-xs, 12px);
  }

  /* The strip labels the canvas and now sits directly on top of it, so it
     collapses with it — style-v2.css already hides .timeline-canvas-wrapper
     and .timeline-track-headers at the container's 36px collapsed height. The
     tools go with it: "+ Section" editing a surface nobody can see is worse
     than not offering it. */
  .song-timeline-container.collapsed .v6-section-strip,
  .song-timeline-container.collapsed .v6-section-strip__tools {
    display: none;
  }
  /* On its OWN rule, not in the list above. A selector list is not forgiving:
     an engine that cannot parse `:has()` drops the whole rule, so bundling
     these together would have left the strip and the tools visible over a
     collapsed arranger instead of costing only the separator. (The separator
     is inserted BEFORE the tools, so only the `:has()` form can reach it —
     the sibling combinator the other way round matches nothing.) */
  .song-timeline-container.collapsed .timeline-separator:has(+ .v6-section-strip__tools) {
    display: none;
  }

  /* The label + buttons group, living in .timeline-controls. */
  .v6-section-strip__tools {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .v6-section-strip__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted, #71717a);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
  }
  .v6-section-strip__label .v6-icon {
    color: var(--accent-primary, #8b5cf6);
  }

  /* No border and no radius: a band's `left` is measured from this element's
     padding box, so a 1px border would offset every band 1px from the canvas
     column it labels. The row is full-bleed for the same reason. */
  .v6-section-strip__bands {
    position: relative;
    width: 100%;
    height: 28px;
    background: rgba(0, 0, 0, 0.30);
    border: 0;
    border-radius: 0;
    overflow: hidden;
    min-width: 0;
  }

  .v6-section-strip__empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #71717a);
    font-size: 11px;
  }
  .v6-section-strip__empty strong {
    color: var(--text-secondary, #a1a1aa);
    font-weight: 600;
    margin: 0 4px;
  }

  .v6-section-strip__actions {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
  }

  /* ------------------------------------------------------------
     Narrow windows: shed the header's chrome before it collides
     ------------------------------------------------------------
     `.timeline-header` is a nowrap control row exactly like transport row 1,
     and that one is on record overflowing at 1280 (Part 3b). The tools have
     93px of slack at 1280x800 and run out around 1100, where the build
     button used to overrun `.timeline-info` by ~34px and paint the bar
     counter straight through its label. Shed the least informative thing
     first — the caption, since the two buttons say what they do — then the
     build button's words, which its icon and tooltip still carry.

     These MUST stay below the base rules and they are scoped to the tools
     group on purpose. A media query adds no specificity, so the first cut of
     this sat ABOVE `.v6-section-strip__label { display: inline-flex }` at
     equal weight and source order kept the caption visible at every width —
     an inert rule that read as a working guard. Belt (order) and braces
     (specificity), because the failure is silent. */
  @media (max-width: 1180px) {
    .v6-section-strip__tools .v6-section-strip__label { display: none; }
  }
  @media (max-width: 1080px) {
    .v6-section-strip__tools .v6-section-strip__build .btn-text { display: none; }
  }
  @media (max-width: 1000px) {
    .v6-section-strip__tools .v6-section-strip__add .btn-text { display: none; }
  }

  /* ============================================================
     Band
     ============================================================ */
  .v6-section-band {
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;

    background: linear-gradient(180deg,
      color-mix(in oklab, var(--band-color) 35%, transparent) 0%,
      color-mix(in oklab, var(--band-color) 20%, transparent) 100%);
    border: 1px solid color-mix(in oklab, var(--band-color) 55%, transparent);
    border-radius: var(--radius-sm, 4px);

    color: var(--text-primary, #fafafa);
    font-family: var(--font-sans, system-ui);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
    transition: filter var(--duration-fast, 120ms),
                box-shadow var(--duration-fast, 120ms);
    overflow: hidden;
    min-width: 0;
  }
  .v6-section-band:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--band-color) 70%, transparent) inset;
  }
  .v6-section-band:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--surface-200), 0 0 0 4px var(--band-color);
  }

  /* The section that is LOOPING — set from the loop region, so a loop made by
     dragging the ruler lights the band too. Visual spec §4's active-band
     treatment: the fill lifts to 45% and a 1px hairline in full hue runs along
     the top. No white ring: the ring is the arranger's SELECTED CLIP, and two
     selections in one hue language would be two meanings for one mark.
     (The spec describes that treatment for "the section under the playhead".
     Clicking a band loops it AND seeks to it, so the two coincide at the click;
     a marker that FOLLOWS the playhead needs a class of its own rather than
     this one, or the two states would overwrite each other.) */
  .v6-section-band.is-active {
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--band-color) 45%, transparent) 0%,
      color-mix(in oklab, var(--band-color) 28%, transparent) 100%);
    border-color: var(--band-color);
    box-shadow: inset 0 1px 0 0 var(--band-color);
  }
  .v6-section-band.is-active .v6-section-band__name {
    color: #ffffff;
  }
  /* Both `.is-active` and `:focus-visible` are (0,2,0), and `.is-active` is
     declared later — so it overwrote the focus ring's box-shadow outright,
     leaving the LOOPING band with no visible focus at all (the ring is a
     box-shadow because :focus-visible sets `outline: none`). That is exactly
     the band a keyboard user is standing on, since focus follows the band they
     just activated. Restating both shadows at (0,3,0) wins over each. Swapping
     the source order instead would fix focus and hand :hover the win over
     .is-active, so this is the safe form. */
  .v6-section-band.is-active:focus-visible {
    box-shadow: 0 0 0 2px var(--surface-200), 0 0 0 4px var(--band-color),
                inset 0 1px 0 0 var(--band-color);
  }

  /* The rename affordance. Off the row until the band is hovered or focused —
     a strip of pencils reads as clutter, and the band's own tooltip carries
     the double-click. `--tight` bands have no room for it either. */
  .v6-section-band__edit {
    display: none;
    /* OUT OF THE FLOW. The band is `justify-content: space-between`, so a third
       child appearing on hover re-spread the row and slid the "4b" readout left
       every time the pointer entered a band — a strip of fifteen twitching under
       the cursor, and a moving target on a narrow one. The band is already
       `position: absolute`, so it is the containing block. `right: 7px` clears
       the 5px resize handle. */
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    padding: 0 2px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
  }
  .v6-section-band__edit .v6-icon {
    width: 11px;
    height: 11px;
  }
  .v6-section-band:hover .v6-section-band__edit,
  .v6-section-band:focus-visible .v6-section-band__edit {
    display: inline-flex;
  }
  /* The pencil now sits where "4b" is, so the count yields the spot while the
     pointer is on the band. `visibility`, not `display`: the box stays, so
     nothing reflows and the count comes back in the same pixels. The bar range
     is in the band's own tooltip meanwhile. Not on the derived tail — it has
     no pencil to swap in, so hiding its count would just blank it. */
  .v6-section-band:not(.v6-section-band--unlabelled):hover .v6-section-band__bars,
  .v6-section-band:not(.v6-section-band--unlabelled):focus-visible .v6-section-band__bars {
    visibility: hidden;
  }
  .v6-section-band__edit:hover { color: #ffffff; }
  /* Written against :hover/:focus-visible, not the bare class: a media query
     adds no specificity and neither does source order across equal weights —
     `.v6-section-band--tight .…__edit` (two classes) would have LOST to the
     hover rule above (three) and the pencil would have shown on a band with no
     room for its own name. */
  .v6-section-band--tight:hover .v6-section-band__edit,
  .v6-section-band--tight:focus-visible .v6-section-band__edit {
    display: none;
  }

  /* Bars the clips cover but no section claims. Derived, not stored: nothing
     to rename, retype or resize, so it does not read as a control. */
  .v6-section-band--unlabelled {
    cursor: default;
    background: repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.05) 0 6px,
      rgba(255, 255, 255, 0.02) 6px 12px);
    border-style: dashed;
    color: var(--text-muted, #71717a);
  }
  .v6-section-band--unlabelled:hover { filter: none; box-shadow: none; }

  .v6-section-band__name {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .v6-section-band__bars {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
  }
  .v6-section-band__settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    color: rgba(255, 255, 255, 0.46);
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    font-size: 9px;
    line-height: 1;
    opacity: .72;
  }
  .v6-section-band__settings.has-override {
    color: #f0abfc;
    background: rgba(236,72,153,.16);
    opacity: 1;
    filter: drop-shadow(0 0 4px color-mix(in srgb, #f0abfc 45%, transparent));
  }
  /* The NAME is the meaningful half. On a band too narrow to carry both, the
     length goes — otherwise a four-bar section at fit zoom becomes a coloured
     "4b" chip with no name on it. _layout() sets this from the measured width. */
  .v6-section-band--tight .v6-section-band__bars { display: none; }

  .v6-section-band__resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
  }
  .v6-section-band__resize:hover {
    background: rgba(255, 255, 255, 0.20);
  }

  /* ============================================================
     Section popover (rename + change type + delete)
     ============================================================ */
  .v6-section-popover {
    position: fixed;
    z-index: var(--z-popover, 1000);
    width: 320px;
    /* _placeAbove() pins a panel taller than the window to the top; without
       this it would still run off the bottom, and a fixed element cannot be
       scrolled into view by the page. */
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: 12px;
    background: var(--v6-panel, var(--surface-300, #18181b));
    border: 1px solid var(--v6-border-strong, rgba(255, 255, 255, 0.14));
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-4, 0 24px 64px rgba(0,0,0,0.7));
    color: var(--text-primary, #fafafa);
    font-family: var(--font-sans, system-ui);

    opacity: 0;
    transform: scale(0.96) translateY(2px);
    transform-origin: bottom center;
    transition: opacity var(--duration-fast, 120ms) var(--ease-out-quart),
                transform var(--duration-fast, 120ms) var(--ease-out-quart);
  }
  .v6-section-popover--visible {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  .v6-section-popover__head label,
  .v6-section-popover__row label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #71717a);
    margin-bottom: 4px;
  }
  .v6-section-popover__head input,
  .v6-section-popover__row input {
    width: 100%;
    padding: 6px 8px;
    background: var(--surface-400, #1f1f23);
    border: 1px solid var(--v6-border, rgba(255,255,255,0.08));
    border-radius: var(--radius-sm, 4px);
    color: var(--text-primary, #fafafa);
    font-family: var(--font-sans, system-ui);
    font-size: 13px;
  }
  .v6-section-popover__head input:focus,
  .v6-section-popover__row input:focus {
    outline: none;
    border-color: var(--accent-primary, #8b5cf6);
  }
  .v6-section-popover__row { margin-top: 10px; }

  .v6-section-popover__music {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--v6-border-faint, rgba(255,255,255,.06));
  }
  .v6-section-popover__music-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-secondary, #a1a1aa);
    font-size: 11px;
  }
  .v6-section-popover__music-head strong {
    color: var(--text-primary, #fafafa);
    font-size: 11px;
  }
  .v6-section-popover__music-head span {
    color: var(--text-muted, #71717a);
    font-size: 10px;
  }
  .v6-section-popover__row--music {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
  }
  .v6-section-popover__row--music select,
  .v6-section-popover__row--music input {
    min-width: 0;
    width: 100%;
    min-height: 28px;
    padding: 4px 7px;
    background: var(--v6-panel-raised, var(--surface-400, #1f1f23));
    border: 1px solid var(--v6-border, rgba(255,255,255,.08));
    border-radius: 5px;
    color: var(--text-primary, #fafafa);
    font-size: 11px;
  }
  .v6-section-popover__row--tempo {
    grid-template-columns: 76px minmax(0, 1fr) 68px;
  }
  .v6-section-popover__row--music select:focus,
  .v6-section-popover__row--music input:focus {
    outline: none;
    border-color: var(--accent-primary, #8b5cf6);
  }

  .v6-section-popover__types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .v6-section-popover__type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: var(--surface-400, #1f1f23);
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    color: var(--text-secondary, #a1a1aa);
    font-size: 11px;
    cursor: pointer;
    transition: background var(--duration-fast, 120ms),
                border-color var(--duration-fast, 120ms);
  }
  .v6-section-popover__type:hover {
    background: var(--surface-500, #27272b);
  }
  .v6-section-popover__type--active {
    background: var(--surface-500, #27272b);
    border-color: var(--type-color, var(--accent-primary, #8b5cf6));
    color: var(--text-primary, #fafafa);
  }
  .v6-section-popover__type-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--type-color, var(--accent-primary, #8b5cf6));
  }

  .v6-section-popover__footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--v6-border-faint, rgba(255,255,255,0.04));
  }
  /* Reorder. Sections could not be moved at all before item 2.6 — the only
     way to put the bridge earlier was to retype every band after it. */
  .v6-section-popover__move {
    display: inline-flex;
    gap: 4px;
    margin-right: auto;
  }
  .v6-section-popover__move .btn[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  /* ============================================================
     Add-section menu
     ============================================================ */
  .v6-section-add-menu {
    position: fixed;
    z-index: var(--z-popover, 1000);
    width: 220px;
    /* Eleven section types is ~384px of menu: taller than the space above the
       header on a 800px window, so it scrolls rather than losing its top. */
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: 6px;
    background: var(--v6-panel, var(--surface-300, #18181b));
    border: 1px solid var(--v6-border-strong, rgba(255, 255, 255, 0.14));
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-4, 0 24px 64px rgba(0,0,0,0.7));

    opacity: 0;
    transform: scale(0.96) translateY(2px);
    transform-origin: bottom left;
    transition: opacity var(--duration-fast, 120ms) var(--ease-out-quart),
                transform var(--duration-fast, 120ms) var(--ease-out-quart);
  }
  .v6-section-add-menu__header {
    padding: 6px 10px 8px;
    border-bottom: 1px solid var(--v6-border-faint, rgba(255,255,255,0.04));
    margin-bottom: 4px;
    font-size: 10px;
    color: var(--text-muted, #71717a);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .v6-section-add-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    color: var(--text-primary, #fafafa);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    transition: background var(--duration-fast, 120ms);
  }
  .v6-section-add-menu__item:hover {
    background: var(--surface-500, #27272b);
  }
  .v6-section-add-menu__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--type-color, var(--accent-primary, #8b5cf6));
    flex-shrink: 0;
  }
  .v6-section-add-menu__label {
    flex: 1;
    font-weight: 500;
  }
  .v6-section-add-menu__hint {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--text-muted, #71717a);
  }
}