/* T7 — Song header ("Now Playing"), src/studio/header/.

   One row: artwork 48, title block (grows), KEY and BPM steppers, the
   Metronome control (only without the mixer), the section picker, then
   a divider, then bookmark · download · share, ending at the centre's
   right edge (the Layout button is in the top bar, decision 39). Items
   14px apart; controls 34px tall, radius 9.
   Section colours come from --st-sect-* (tokens.css) through --sect. */

.hd {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.hd[hidden],
.hd [hidden] { display: none; }

/* ---- Artwork and title ------------------------------------------------------ */

.hd-art {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(-135deg, var(--st-art-rose) 14.645%, var(--st-art-violet) 85.355%);
  color: var(--st-on-accent);
}
.hd-art .st-icon { width: 20px; height: 20px; }
.hd-art { position: relative; overflow: hidden; }
/* The YouTube thumbnail over the gradient (api/thumbnail.ts): it shows once loaded, and goes if it fails. */
.hd-art__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hd-art__thumb[data-loaded='true'] { opacity: 1; }

.hd-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* The title truncates down to this before anything else gives way (fit.ts). */
  min-width: 64px;
}
.hd-title__song {
  margin: 0;
  overflow: hidden;
  color: var(--st-text);
  font: 600 18px/normal var(--st-font);
  letter-spacing: -0.3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hd-title__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
  font: 400 13px/normal var(--st-font);
  white-space: nowrap;
}
.hd-title__artist { overflow: hidden; color: var(--st-text-dim); text-overflow: ellipsis; }
.hd-title__dot { flex: none; width: 3px; height: 3px; border-radius: 2px; background: var(--st-text-faint); }
.hd-title__stems { flex: none; color: var(--st-text-faint); }

/* ---- Key and BPM steppers --------------------------------------------------- */

.hd-control {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hd-control__label {
  color: var(--st-text-faint);
  font: 400 10px/normal var(--st-font-mono);
  letter-spacing: 1px;
}

.hd-stepper {
  display: flex;
  align-items: center;
  height: 34px;
  border-radius: var(--st-radius-control);
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface);
}
.hd-stepper__btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--st-radius-control);
  background: none;
  color: var(--st-text-dim);
  cursor: pointer;
}
.hd-stepper__btn .st-icon { width: 13px; height: 13px; }
.hd-stepper__btn:hover:not(:disabled) { background: var(--st-surface-2); color: var(--st-text); }
.hd-stepper__btn:disabled { opacity: 0.35; cursor: default; }
.hd-stepper__btn:focus-visible { outline: 2px solid var(--st-accent); outline-offset: -2px; }

.hd-stepper__value {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  height: 34px;
  margin: 0 -0.5px;
  padding: 0 8px;
  border: solid var(--st-line);
  border-width: 0 1px;
  color: var(--st-text);
  font: 600 13px/normal var(--st-font-mono);
  white-space: nowrap;
  /* A button (decision 49: it resets), drawn exactly as the readout was. */
  position: relative;
  border-radius: 0;
  background: none;
  cursor: pointer;
}
.hd-control--key .hd-stepper__value { min-width: 23px; }
.hd-control--bpm .hd-stepper__value { min-width: 39px; }
/* The same hover and focus as − and +; at the original it stays the readout. */
.hd-stepper__value:hover:not([aria-disabled='true']) { background: var(--st-surface-2); }
.hd-stepper__value:focus-visible { outline: 2px solid var(--st-accent); outline-offset: -2px; }
.hd-stepper__value[aria-disabled='true'] { cursor: default; }

/* The signed change ("+1", "−2", "1.25×") on the stepper's top edge, centred
   over the value (decision 49): the strong Tag (controls.css), tighter and
   opaque so the stepper's edge doesn't show through. Up takes the chord ink,
   down the accent; the sign says it too. Out of flow: the stepper keeps its
   size and the header's fit is unchanged. */
.hd-stepper__badge.st-tag {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1px 5px;
  background: color-mix(in srgb, var(--tag-color) 10%, var(--st-surface));
  pointer-events: none;
}
.hd-stepper__badge[data-tone='up'] { --tag-color: var(--st-chord-ink); }
.hd-stepper__badge[data-tone='down'] { --tag-color: var(--st-accent); }

/* ---- Metronome control (Play along, Sheet only) ------------------------------ */

.hd-metro {
  --metro: var(--st-stem-metronome);
  --metro-ink: color-mix(in srgb, var(--metro) 40%, var(--st-text-strong));
  flex: none;
  display: flex;
  align-items: center;
  height: 34px;
  overflow: hidden;
  border-radius: var(--st-radius-control);
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface);
}

.hd-metro__toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  /* The spec's layer says 93.5px of content, but the PNG (which wins) draws
     the whole toggle 93.5px wide: the control is 204px in both. */
  min-width: 93.5px;
  height: 34px;
  margin-right: -0.5px;
  padding: 0 11px 0 10px;
  border: 0;
  border-right: 1px solid var(--st-line);
  background: none;
  color: var(--st-text-faint);
  cursor: pointer;
}
.hd-metro[data-on='true'] .hd-metro__toggle {
  border-right-color: color-mix(in srgb, var(--metro) 33%, transparent);
  background: color-mix(in srgb, var(--metro) 12%, transparent);
  color: var(--metro-ink);
}
.hd-metro__toggle:focus-visible { outline: 2px solid var(--st-accent); outline-offset: -2px; }
.hd-metro__icon { width: 15px; height: 15px; color: var(--st-text-faint); }
.hd-metro[data-on='true'] .hd-metro__icon { color: var(--metro); }
/* The needle is cut out of the body in the panel's colour, as in the mixer's row. */
.hd-metro__icon path + path { stroke: var(--st-surface); }
.hd-metro__state { font: 700 12px/normal var(--st-font); letter-spacing: 0.4px; }
.hd-metro__beats { display: flex; align-items: center; gap: 3px; }
.hd-metro__dot { width: 4px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--st-text-faint) 30%, transparent); }
.hd-metro[data-on='true'] .hd-metro__dot { background: color-mix(in srgb, var(--metro) 25%, transparent); }
.hd-metro[data-on='true'] .hd-metro__dot.is-lit { background: var(--metro); }

.hd-metro__rate.st-seg {
  align-self: stretch;
  gap: 2px;
  padding: 3px;
  border-radius: 0;
  outline: 0;
  background: none;
}
.hd-metro__rate .st-seg__item {
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: var(--st-text-faint);
  font: 500 11px/normal var(--st-font-mono);
}
.hd-metro__rate .st-seg__item[aria-checked='true'] {
  outline: 1px solid var(--metro);
  outline-offset: -0.5px;
  background: color-mix(in srgb, var(--metro) 15%, transparent);
  color: var(--metro-ink);
  font-weight: 700;
}
.hd-metro__rate .st-seg__item:focus-visible { outline: 2px solid var(--st-accent); outline-offset: -2px; }

/* ---- Section picker ------------------------------------------------------------ */

.hd-picker { position: relative; flex: none; }

.hd-picker__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: var(--st-radius-control);
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface);
  color: var(--st-text);
  font: 500 13px/normal var(--st-font);
  white-space: nowrap;
  cursor: pointer;
}
.hd-picker__btn .st-icon { width: 14px; height: 14px; }
.hd-picker[data-kind]:not([data-kind='none']) .hd-picker__btn:not(:focus-visible) {
  outline-color: color-mix(in srgb, var(--sect) 33%, transparent);
}
.hd-picker[data-kind]:not([data-kind='none']) .hd-picker__btn {
  background: color-mix(in srgb, var(--sect) 8%, transparent);
  color: color-mix(in srgb, var(--sect) 70%, var(--st-text-strong));
}
.hd-picker__btn:hover { filter: brightness(1.15); }
.hd-picker__btn:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 1px; }
.hd-picker__label { display: flex; }
.hd-picker__at { white-space: pre; }

.hd-picker__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 100%;
  max-height: 360px;
  margin: 0;
  padding: 6px;
  overflow: auto;
  list-style: none;
  border-radius: 12px;
  outline: 1px solid var(--st-line-strong);
  outline-offset: -0.5px;
  background: var(--st-popover-bg);
  box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--st-shadow) 70%, transparent);
}
.hd-picker__list[hidden] { display: none; }
.hd-picker__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--st-text);
  font: 500 13px/normal var(--st-font);
  white-space: nowrap;
  cursor: pointer;
}
.hd-picker__item:hover,
.hd-picker__item:focus { background: var(--st-line); }
.hd-picker__item:focus-visible { outline: 2px solid var(--st-accent); outline-offset: -2px; }
.hd-picker__item[aria-selected='true'] { background: color-mix(in srgb, var(--sect, var(--st-text-faint)) 14%, transparent); }
.hd-picker__dot { width: 6px; height: 6px; border-radius: 3px; background: var(--sect, var(--st-text-faint)); }
.hd-picker__name { flex: 1; }
.hd-picker__time { color: var(--st-text-faint); font: 400 11px/normal var(--st-font-mono); }
/* On the selected, hovered or focused row the faint time falls under 4.5:1; it brightens there. */
.hd-picker__item:is([aria-selected='true'], :hover, :focus) .hd-picker__time { color: var(--st-text-dim); }

/* ---- Bookmark, download, share ----------------------------------------------- */

.hd-divider { flex: none; width: 1px; height: 24px; background: var(--st-line); }

.hd-actions { position: relative; flex: none; display: flex; align-items: center; gap: 14px; }
.hd-actions .st-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--st-radius-control);
  background: none;
  color: var(--st-text-dim);
}
.hd-actions .st-icon-btn .st-icon { width: 15px; height: 15px; }
.hd-actions .st-icon-btn:hover { background: var(--st-surface-2); color: var(--st-text); }
.hd-actions .st-icon-btn[aria-pressed='true'] { background: var(--st-accent-soft); color: var(--st-accent); }
.hd-actions .st-icon-btn:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 1px; }

/* Copy link's "Link copied", under the actions for a moment (a polite live region). */
.hd-status {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 41;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--st-surface-2);
  outline: 1px solid var(--st-line-strong);
  outline-offset: -0.5px;
  color: var(--st-text);
  font: 500 12px/normal var(--st-font);
  white-space: nowrap;
  pointer-events: none;
}
/* Empty, it stays in the accessibility tree (so the first message is announced) but out of sight. */
.hd-status:empty {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  outline: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Fitting the row (fit.ts sets data-fit; 0 is the design) --------------------- */

/* 1: secondary text goes: the stem count and the KEY / BPM captions (the groups keep their names). */
.hd[data-fit='1'] :is(.hd-title__dot, .hd-title__stems, .hd-control__label),
.hd[data-fit='2'] :is(.hd-title__dot, .hd-title__stems, .hd-control__label, .hd-art, .hd-divider, .hd-metro__beats),
.hd:is([data-fit='3'], [data-fit='4'], [data-fit='5']) :is(.hd-title__dot, .hd-title__stems, .hd-control__label, .hd-art, .hd-divider, .hd-metro__beats, .hd-picker__at) {
  display: none;
}
/* 2: then the artwork, the dividers and the beat dots; the gaps close up. */
.hd:is([data-fit='2'], [data-fit='3'], [data-fit='4'], [data-fit='5']),
.hd:is([data-fit='2'], [data-fit='3'], [data-fit='4'], [data-fit='5']) .hd-actions { gap: 8px; }
/* 3: the picker drops its time (the transport shows it). */
/* 4: compact steppers and actions (still 24px targets). */
.hd:is([data-fit='4'], [data-fit='5']) .hd-stepper__btn { width: 24px; }
.hd:is([data-fit='4'], [data-fit='5']) .hd-actions { gap: 4px; }
/* 5: the title takes its own line above the controls. */
.hd[data-fit='5'] { flex-wrap: wrap; row-gap: 6px; }
.hd[data-fit='5'] .hd-title { flex-basis: 100%; flex-direction: row; align-items: baseline; gap: 10px; }
.hd[data-fit='5'] .hd-title__song { flex: 0 1 auto; min-width: 0; }
.st-shell__now:has(.hd[data-fit='5']) { align-items: flex-end; }