/* T4 — Sections row (src/studio/sections/). The header (title, Clear, Add)
   lines up with the mixer's track headers, and the lane with its ruler and
   waveform lanes: the timeline runs from 8px in at each end of the lane,
   with 1px either side of each block so neighbours show a 2px seam. These
   numbers are LANE_INSET_PX and BLOCK_INSET_PX in src/studio/sections/timeline.ts.
   Section colours are the shared --st-sect-* tokens. */

.sections {
  position: relative;
  display: flex;
  gap: 8px;
  height: 30px;
  font-family: var(--st-font);
}

/* ---- Header --------------------------------------------------------------- */

.sections__head {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  width: 236px;
  padding-left: 4px;
  box-sizing: border-box;
}

.sections__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--st-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sections__head .st-btn--sm {
  height: 26px;
  padding: 0 9px;
  gap: 5px;
  color: var(--st-text-dim);
  font-size: 12px;
  flex: none;
}
.sections__head .st-btn--sm .st-icon { width: 12px; height: 12px; }
.sections__head .st-btn--secondary:not(:disabled):hover { color: var(--st-text); }

/* Reset (decision 80): styled exactly like Clear and Add (same st-btn--secondary st-btn--sm), next to Clear, shown only while saved edits differ from the chart. */
.sections__reset[hidden] { display: none; }
/* The header is 236px at every layout, so it is tight exactly while Reset
   shows: then Clear, Reset and Add go icon-only (26px squares) and the
   "Sections" title keeps its room. Their aria-label and tooltip carry the name. */
.sections__head:has(.sections__reset:not([hidden])) .st-btn--sm { width: 26px; padding: 0; justify-content: center; }
.sections__head:has(.sections__reset:not([hidden])) .st-btn__label { display: none; }

/* ---- Clear confirmation ----------------------------------------------------- */

.sections__confirm {
  position: absolute;
  top: calc(100% + 6px);
  left: 4px;
  z-index: 20;
  width: 228px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 10px;
  outline: 1px solid var(--st-line-strong);
  outline-offset: -0.5px;
  background: var(--st-surface-2);
  box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--st-shadow) 70%, transparent);
}
.sections__confirm[hidden] { display: none; }
.sections__confirm-text { margin: 0 0 10px; color: var(--st-text); font-size: 12px; line-height: 1.45; }
.sections__confirm-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* ---- Lane ------------------------------------------------------------------- */

.sections__lane {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  border-radius: 7px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-panel);
  overflow: hidden;
}

.sections__block {
  --sect: var(--st-sect-other);
  position: absolute;
  top: 3px;
  left: calc(9px + (100% - 16px) * var(--from, 0));
  display: flex;
  align-items: center;
  gap: 4px;
  width: calc((100% - 16px) * var(--span, 0) - 2px);
  height: 22px;
  padding: 0 7px;
  box-sizing: border-box;
  border-radius: 5px;
  outline: 1px solid color-mix(in srgb, var(--sect) 40%, transparent);
  outline-offset: -0.5px;
  background: color-mix(in srgb, var(--sect) 10%, transparent);
  color: var(--sect);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
  /* Narrow selected blocks drop × (Delete still removes): see the @container rule at the end. */
  container-type: inline-size;
  transition: outline-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.sections__block:hover { outline-color: color-mix(in srgb, var(--sect) 70%, transparent); }

.sections__name {
  /* The start of the name always shows, so a narrow selected block still reads and can be grabbed. */
  min-width: 12px;
  overflow: hidden;
  font: 700 9.5px/1 var(--st-font-mono);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  /* Cut short with an ellipsis, never mid-letter; the block's accessible name is the whole name. */
  text-overflow: ellipsis;
}

/* Locked: dimmer outline and name, and a lock at the right. The name keeps
   4.5:1 on its block (82% of the section colour; the grey "other" colour
   can't be dimmed at all). */
.sections__block.is-locked {
  outline-color: color-mix(in srgb, var(--sect) 25%, transparent);
  color: color-mix(in srgb, var(--sect) 82%, var(--st-fade));
  cursor: default;
}
.sections__block.is-locked[data-kind='other'] { color: var(--sect); }
.sections__locked { display: flex; margin-left: auto; color: color-mix(in srgb, var(--sect) 80%, transparent); }
.sections__locked .st-icon { width: 10px; height: 10px; }

/* Selected: brighter fill, full-colour outline and a glow, the lock toggle,
   ×, and a grip at each edge. */
.sections__block.is-selected {
  z-index: 1;
  padding: 0 9px;
  outline: 1.5px solid var(--sect);
  outline-offset: -0.75px;
  background: color-mix(in srgb, var(--sect) 18%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sect) 33%, transparent);
  color: var(--sect);
}
.sections__block.is-selected.is-locked { outline-color: color-mix(in srgb, var(--sect) 60%, transparent); }

/* The lock and × (pointer only: L and Delete do the same from the keyboard).
   The glyph is 11px as designed; the target is the block's full 22px height
   and 15px wide, reaching 2px into the space either side (the negative
   margins keep the layout of an 11px icon, so the design's spacing holds). */
.sections__icon-btn {
  /* Above the edge grips' wider hit areas, which reach over them on a narrow block. */
  position: relative;
  z-index: 1;
  display: grid;
  flex: none;
  place-items: center;
  width: 15px;
  height: 22px;
  margin: 0 -2px;
  color: inherit;
  cursor: pointer;
  opacity: 0.85;
}
.sections__icon-btn:hover { opacity: 1; }
.sections__icon-btn .st-icon { width: 11px; height: 11px; }
.sections__lock { margin-left: auto; }
/* An open lock is rose (the design's "unlocked" hint); a closed one keeps the
   section colour. */
.sections__block:not(.is-locked) .sections__lock { color: var(--st-lock-open); }

.sections__grip {
  position: absolute;
  top: 6px;
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--st-on-accent) 70%, transparent);
  cursor: ew-resize;
}
.sections__grip[data-edge='start'] { left: 2px; }
.sections__grip[data-edge='end'] { right: 2px; }
.sections__grip::before {
  /* A wider hit area than the 3px pill. */
  content: "";
  position: absolute;
  inset: -6px -4px;
}

/* The name box (rename.ts, decision 18): a text field over the block being
   named, in the row rather than the block, so a narrow block still gets a
   readable box. It covers the row's height, starts over the block (the
   block's --from and --span, and the lane's offset --lane-x), is at least
   200px wide, and stays inside the row.
   It wears the colour of the section it names (decision 23): rename.ts sets
   --sect from the kind the typed name gives, so "Chorus" turns it the chorus
   colour as it is typed. */
.sections__rename {
  --sect: var(--st-sect-other);
  --w: max(200px, calc((100% - var(--lane-x, 244px) - 16px) * var(--span, 0) - 2px));
  position: absolute;
  top: 0;
  left: clamp(var(--lane-x, 244px), calc(var(--lane-x, 244px) + 9px + (100% - var(--lane-x, 244px) - 16px) * var(--from, 0)), calc(100% - var(--w)));
  z-index: 10;
  width: var(--w);
  height: 30px;
  margin: 0;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--sect);
  border-radius: 7px;
  background: var(--st-surface-2);
  color: var(--st-text);
  font: 700 12px/1 var(--st-font);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--st-shadow) 70%, transparent);
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Always focused while open (leaving it closes it): a thin border in the
   section's colour and a soft glow of it, no ring. The Studio's 2px accent
   ring (controls.css) is switched off here; the border is the focus
   indicator: 4.5:1 or more on the box and the row for every section colour,
   3.2:1 or more on the glow. */
.sections__rename:focus,
.sections__rename:focus-visible {
  --st-focus-ring-style: none;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sect) 30%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--st-shadow) 70%, transparent);
}
/* The selected name, tinted with the section colour: the text keeps 5.9:1 or more on it. */
.sections__rename::selection {
  background: color-mix(in srgb, var(--sect) 40%, var(--st-surface-2));
  color: var(--st-text);
}

/* Keyboard focus: the Studio's ring (P1's global :focus-visible, which reads
   --st-focus-ring and --st-focus-offset), drawn inside the block because the
   lane clips its overflow; this rule draws the same ring before P1 merges,
   over the selected look (which also uses the outline). The ring is the
   block's own section colour, not the accent (decision 23): 2px, 4.5:1 or
   more on the lane and on the block's fill for every section colour. */
.sections__block { --st-focus-offset: -2px; --st-focus-ring: var(--sect); }
.sections__block:focus-visible,
.sections__block.is-selected:focus-visible {
  outline: 2px solid var(--st-focus-ring, var(--st-text));
  outline-offset: var(--st-focus-offset);
}

/* A selected block whose content box can't hold the name's start, the lock
   and × (12 + 4 + 13 + 4 + 11 = 44px: the lock's target reaches 2px past
   its glyph; the Intro in Practice has 24.5px) keeps the name's start and
   the lock, and drops ×. */
@container (max-width: 43.9px) {
  .sections__remove { display: none; }
}