/* T6 — Chord sheet (src/studio/sheet/*).

   The slot is `.sheet` with `data-place` from the shell:
     right   beside the mixer or live chords (Practice, Play along): 13px text
     center  Sheet only: a card, 16px text, toolbar and body 1096px wide
     bottom / float  the other docks: 16px text
   `data-view` is lead | lyrics | grid, `data-columns` 1 | 2 (two 520px
   columns in Sheet only, one under about 1200px). Section colours come from
   --st-sect-<kind> (tokens.css), shared with the Sections row and player. */

.sheet {
  --sheet-scale: 1;
  --sheet-text: 13px;
  --sheet-width: none;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  container: sheet / inline-size;
  color: var(--st-text);
  font-family: var(--st-font);
}
.sheet[data-place='center'],
.sheet[data-place='bottom'],
.sheet[data-place='float'] { --sheet-text: 16px; }
.sheet[data-place='center'] {
  --sheet-width: 1096px;
  border-radius: var(--st-radius-card);
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface);
  overflow: hidden;
}
.sheet [hidden] { display: none !important; }
.sheet button { font: inherit; }

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

.sheet__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 51px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--st-line);
}
.sheet__head-icon { color: var(--st-accent); }
.sheet__title { flex: 1; margin: 0; font-size: 14px; font-weight: 600; }
/* Sheet only is already maximised and the top bar's Layout switches layouts: no Float, Back to Practice or
   Hide there (decision 46). display: none also takes them out of the tab order and the accessibility tree. */
.sheet[data-place='center'] .sheet__head .st-icon-btn { display: none; }
/* The printout's title and settings line (print.ts): print only (decision 32). */
.sheet__print { display: none; }

/* ---- Toolbar ---------------------------------------------------------------- */

.sheet__toolbar {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--st-line);
}
.sheet__row,
.sheet__used { width: 100%; max-width: var(--sheet-width); }
.sheet__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sheet[data-view='grid'] .sheet__row { gap: 14px; }
.sheet__spacer { flex: 1; }

.sheet .sheet__views { padding: 3px; border-radius: 9px; background: var(--st-surface); }
.sheet .sheet__views .st-seg__item { font-size: 12px; line-height: 14px; }
.sheet[data-place='center'] .sheet__views { background: var(--st-surface); }

.sheet__caption {
  color: var(--st-text-faint);
  font: 400 9.5px/12px var(--st-font-mono);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.sheet__bars { display: flex; align-items: center; gap: 8px; }
.sheet__bars .st-seg { background: var(--st-surface); }
.sheet__bars .st-seg__item { min-width: 30px; font-family: var(--st-font-mono); font-size: 11px; text-align: center; }
.sheet__bars .st-seg__item[aria-checked='true'] { font-weight: 700; }
/* Fewer bars fit than chosen (chrome.ts paintBarsInUse): the number in use is the
   active segment; the choice, kept for a wider panel, is only outlined, dashed. */
.sheet__bars .st-seg__item[data-in-use] {
  outline: 1px solid var(--st-line-strong);
  outline-offset: -0.5px;
  background: var(--st-surface-2);
  color: var(--st-text);
  font-weight: 700;
}
.sheet__bars .st-seg__item[data-limited] {
  outline: 1px dashed var(--st-line-strong);
  background: none;
  color: var(--st-text-dim);
  font-weight: 500;
}

.sheet__simplify { display: flex; align-items: center; gap: 8px; color: var(--st-text-dim); font-size: 12px; cursor: pointer; }
.sheet__used-head { display: flex; align-items: center; justify-content: space-between; height: 12px; }
/* Hangs into the 8px gaps around the 12px caption line, so it adds no height. */
.sheet .sheet__notation { margin-block: -7px; background: var(--st-surface); }
.sheet__notation .st-seg__item { min-width: 26px; font-size: 11px; text-align: center; }
/* ♯ and ♭ come from a fallback font that draws them thin and small: larger and heavier, on the same line box, so the control keeps its height. */
.sheet__notation .st-seg__item + .st-seg__item { font-size: 16px; font-weight: 700; line-height: 13px; }
.sheet .sheet__tool { width: 30px; height: 30px; border-radius: 7px; background: none; }
.sheet .sheet__tool .st-icon { width: 14px; height: 14px; }

.sheet__used { display: flex; flex-direction: column; gap: 8px; }
.sheet__tiles { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.sheet__tiles:focus-visible { outline: 2px solid var(--st-focus-ring, var(--st-accent)); outline-offset: -2px; border-radius: 6px; }
.sheet__tile {
  flex: 1 0 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px 7px;
  border-radius: 9px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface);
}
.sheet[data-place='center'] .sheet__tile { flex: 0 0 76px; }
.sheet__tile[aria-current='true'] { outline-color: var(--st-accent); background: var(--st-menu-chosen-bg); }
.sheet__tile-dia { display: grid; place-items: start center; width: 55px; height: 52px; }
.sheet__tile-dia .dia { display: block; width: 52px; height: auto; margin-top: -1px; overflow: visible; }
.sheet__tile-dia .dia--keyed { width: 55px; margin: 8px 0 0; }
.sheet__tile-name { color: var(--st-chord-ink); font: 700 11px/normal var(--st-font-mono); white-space: nowrap; }
.sheet__tile[aria-current='true'] .sheet__tile-name { color: var(--st-text-strong); }

/* src/diagram's drawing, in the design's colours */
[data-slot='sheet'] .dia { font-family: var(--st-font); }
[data-slot='sheet'] .dia__grid { fill: none; stroke: color-mix(in srgb, var(--st-text-strong) 32%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
[data-slot='sheet'] .dia__nut,
[data-slot='sheet'] .dia__dot { fill: var(--st-text-strong); }
[data-slot='sheet'] .dia__nut { y: 14.5px; height: 4.5px; }
[data-slot='sheet'] .dia:not([data-base='1']) .dia__nut { display: none; }
[data-slot='sheet'] .dia__num { display: none; }
[data-slot='sheet'] .dia__string { display: none; }
[data-slot='sheet'] .dia__mark { fill: var(--st-text-faint); font: 400 10px var(--st-font); }
[data-slot='sheet'] .sheet__base-fret { font: 400 13px var(--st-font-mono); }
[data-slot='sheet'] .dia__open { fill: none; stroke: color-mix(in srgb, var(--st-text-strong) 67%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; r: 3.6px; }
[data-slot='sheet'] .dia__key { fill: var(--st-key); stroke: var(--st-key-edge); stroke-width: 0.6; }
[data-slot='sheet'] .dia__key--black { fill: var(--st-key-black); }
[data-slot='sheet'] .dia__tone { fill: var(--st-key-tone); }
[data-slot='sheet'] .dia__tone--black { fill: var(--st-key); }
[data-slot='sheet'] .dia__tone--root { fill: var(--st-accent); }

/* ---- Body and scrolling ---------------------------------------------------- */

.sheet__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 16px 12px;
}
.sheet[data-place='center'] .sheet__body { padding: 28px 40px; }
.sheet[data-place='center'][data-view='grid'] .sheet__body { padding: 24px 40px; }
.sheet__frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: var(--sheet-width);
  min-height: 0;
}
.sheet[data-columns='2'] .sheet__frame { max-width: none; }
.sheet__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  container-type: size;
  scrollbar-width: thin;
  scrollbar-color: var(--st-line) transparent;
  /* Its focus ring is drawn inside: the panel clips anything outside it. */
  --st-focus-offset: -2px;
}
.sheet__scroll:focus-visible { outline: 2px solid var(--st-focus-ring, var(--st-accent)); outline-offset: var(--st-focus-offset); border-radius: 6px; }
/* Room below the end, so Follow playback can bring any section to the top. */
.sheet__lead[data-columns='1'],
.sheet__grid { padding-bottom: max(0px, calc(100cqh - 96px)); }

/* ---- Blocks (both views) ---------------------------------------------------- */

.sheet__block,
.sheet__gblock {
  --sect: var(--st-line-strong);
  --rail: color-mix(in srgb, var(--sect) 50%, transparent);
  --tag-bg: color-mix(in srgb, var(--sect) 12%, transparent);
  --tag-ink: var(--sect);
  border-left: 2px solid var(--rail);
}
.sheet [data-kind='intro'] { --sect: var(--st-sect-intro); }
.sheet [data-kind='verse'] { --sect: var(--st-sect-verse); }
.sheet [data-kind='chorus'] { --sect: var(--st-sect-chorus); }
.sheet [data-kind='bridge'] { --sect: var(--st-sect-bridge); }
.sheet [data-kind='outro'] { --sect: var(--st-sect-outro); }
.sheet [data-kind='other'] { --sect: var(--st-sect-other); }
.sheet__block[data-kind='none'],
.sheet__gblock[data-kind='none'] { --rail: var(--st-line-strong); }
.sheet__block[data-state='played'],
.sheet__gblock[data-state='played'] {
  --rail: color-mix(in srgb, var(--sect) 25%, transparent);
  --tag-bg: color-mix(in srgb, var(--sect) 7%, transparent);
  /* Dimmer than a coming section's tag, still 4.5:1 (the grey "other" can't dim). */
  --tag-ink: color-mix(in srgb, var(--sect) 82%, var(--st-fade));
}
.sheet [data-kind='other'][data-state='played'] { --tag-ink: var(--sect); }

.sheet__block-head { display: flex; align-items: center; gap: 8px; }
.sheet__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 5px;
  outline: 1px solid var(--rail);
  outline-offset: -0.5px;
  background: var(--tag-bg);
  color: var(--tag-ink);
  font: 700 10px/normal var(--st-font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.sheet__lock { display: grid; place-items: center; width: 12px; height: 12px; margin: -1px -3px -1px -1px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.sheet__lock-icon { width: 10px; height: 10px; }
/* An open lock shows on hover and on keyboard focus. Out of the flow, 0×0
   and transparent otherwise, it stays in the tab order (display: none would not). */
.sheet__lock[aria-pressed='false'] { position: absolute; right: 0; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.sheet__block-head:hover .sheet__lock[aria-pressed='false'],
.sheet__lock[aria-pressed='false']:focus-visible { position: static; width: 12px; height: 12px; opacity: 0.6; pointer-events: auto; }
.sheet__lock[aria-pressed='false']:focus-visible { opacity: 1; }
.sheet__lock:focus-visible { outline: 2px solid var(--st-focus-ring, var(--st-accent)); outline-offset: var(--st-focus-offset, 1px); border-radius: 2px; }
.sheet__time,
.sheet__range { color: var(--st-text-faint); font: 400 10px/normal var(--st-font-mono); white-space: nowrap; }
.sheet__gblock .sheet__time,
.sheet__range { font-size: 10.5px; }

/* ---- Lead and Lyrics ---------------------------------------------------------- */

.sheet__lead { --text: calc(var(--sheet-text) * var(--sheet-scale)); }
.sheet__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sheet[data-place='center'] .sheet__col { gap: 18px; }
.sheet__lead[data-columns='2'] .sheet__page {
  display: grid;
  grid-template-columns: 520px 520px;
  justify-content: center;
  align-content: start;
  gap: 56px;
  min-height: 100cqh;
}
/* A section split between columns goes on under its name and "cont." (pages.ts, decision 44). */
.sheet__cont { font-weight: 500; }
.sheet__block { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.sheet[data-place='center'] .sheet__block { gap: 4px; padding-bottom: 8px; }
.sheet__block .sheet__block-head { padding: 12px 12px 8px; }
.sheet__line { display: flex; flex-direction: column; gap: inherit; padding: 0 12px; font: 400 var(--text)/1.3 var(--st-font-mono); }
.sheet__chords { color: var(--st-chord-ink); font-weight: 700; white-space: pre; }
.sheet__lyric { color: var(--st-text); white-space: pre-wrap; }
.sheet__line[data-state='played'] .sheet__chords { color: var(--st-chord-ink-played); opacity: 0.62; } /* 4.5:1 on the panel */
.sheet__line[data-state='played'] .sheet__lyric { color: var(--st-text-faint); }
.sheet__line[data-state='current'] {
  margin-left: -2px;
  padding: 8px 12px 10px 10px;
  border-left: 2px solid var(--st-accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--st-accent) 7%, transparent);
}
.sheet__line[data-state='current'] .sheet__lyric { color: var(--st-text-strong); font-weight: 700; }
/* The print-only form of a Lead line (print-line.ts). */
.sheet__segs { display: none; }
.sheet__instrumental { margin: 0; padding: 0 12px; color: var(--st-text-faint); font: italic 400 calc(var(--text) * 0.85)/1.3 var(--st-font); }

/* ---- Grid ------------------------------------------------------------------------ */

.sheet__grid {
  --gaps: 0px;
  --bar-w: calc((100cqw - 52px - var(--gaps)) / var(--bars, 12));
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.sheet__grid[data-continuous='true'] { --gaps: max(0px, calc((var(--bars, 12) / 4 - 1) * 6px)); }
.sheet__gblock { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 2px 12px; }
.sheet__gblock .sheet__block-head { padding-bottom: 2px; }
.sheet__now {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--st-accent) 12.5%, transparent);
  color: var(--st-accent-ink);
  font: 600 9px/normal var(--st-font-mono);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.sheet__now::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--st-accent); }
.sheet__grow { display: flex; align-items: center; gap: 10px; }
.sheet__barno { flex: none; width: 28px; color: var(--st-text-faint); font: 400 10.5px/normal var(--st-font-mono); text-align: right; }
.sheet__strip {
  flex: none;
  display: flex;
  height: 46px;
  border-radius: 8px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-panel);
  overflow: hidden;
}
.sheet__strip + .sheet__strip { margin-left: -4px; }
.sheet__bar { position: relative; display: flex; flex: none; width: var(--bar-w); height: 100%; }
.sheet__bar + .sheet__bar { border-left: 1px solid var(--st-line); }
.sheet__beat { position: relative; display: flex; flex: 1; align-items: center; min-width: 0; padding-left: 3px; }
.sheet__beat[data-beat='1'] { padding-left: 9px; }
.sheet__beat + .sheet__beat { border-left: 1px solid color-mix(in srgb, var(--st-text-strong) 4%, transparent); }
.sheet__chord { position: relative; z-index: 1; color: var(--st-chord-ink); font: 700 calc(15px * var(--sheet-scale))/normal var(--st-font-mono); white-space: nowrap; }
.sheet__repeat { color: var(--st-text-faint); font: 400 calc(14px * var(--sheet-scale))/normal var(--st-font-mono); }
.sheet__bar.is-played .sheet__chord { color: var(--st-chord-ink-played); opacity: 0.62; } /* 4.5:1 on the panel */
.sheet__bar.is-current { z-index: 1; outline: 1.5px solid var(--st-accent); outline-offset: -0.75px; background: color-mix(in srgb, var(--st-accent) 8%, transparent); }
.sheet__bar.is-current .sheet__chord { color: var(--st-text-strong); font-size: calc(16px * var(--sheet-scale)); }
.sheet__beat.is-now { background: color-mix(in srgb, var(--st-accent) 25%, transparent); }
.sheet__bar.is-loop::after { content: ''; position: absolute; inset: 0 0 auto; z-index: 2; height: 3px; background: var(--st-loop); }
.sheet__grid[data-looping='false'] .sheet__bar.is-loop::after { opacity: 0.4; }

/* Bars whose names would collide on their beats (fit.ts). flow: each beat cell
   at least as wide as its name, so names keep their order and stay near their
   beats; small: the same at the smallest readable size; stack: two lines,
   beats 1–2 over 3–4, a name wrapping inside its cell rather than escaping it. */
.sheet__bar:not([data-fit='beats']) .sheet__chord { margin-right: 4px; }
.sheet__bar[data-fit='flow'] .sheet__beat,
.sheet__bar[data-fit='small'] .sheet__beat { min-width: auto; }
.sheet__bar[data-fit='small'] .sheet__chord,
.sheet__bar[data-fit='stack'] .sheet__chord { font-size: calc(12px * var(--sheet-scale)); }
.sheet__bar[data-fit='stack'] { flex-wrap: wrap; }
.sheet__bar[data-fit='stack'] .sheet__beat { flex: 0 0 50%; }
.sheet__bar[data-fit='stack'] .sheet__beat[data-beat='3'] { padding-left: 9px; border-left: 0; }
.sheet__bar[data-fit='stack'] .sheet__chord { white-space: normal; overflow-wrap: anywhere; }
.sheet__strip:has(> .sheet__bar[data-fit='stack']) { height: auto; min-height: 46px; }

/* ---- The no-sections notice: one line, "No sections · + Add · ×" (decision 21) ------ */

.sheet__notice {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 5px 0 12px;
  border-radius: 10px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface-2);
}
.sheet__notice-icon { display: grid; place-items: center; flex: none; color: var(--st-text-dim); }
.sheet__notice-icon .st-icon { width: 15px; height: 15px; }
.sheet__notice-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.sheet__notice .st-btn { gap: 5px; font-weight: 600; }
.sheet__notice .st-btn .st-icon { width: 13px; height: 13px; }

/* ---- Footer ------------------------------------------------------------------------ */

.sheet__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 51px;
  padding: 0 16px;
  border-top: 1px solid var(--st-line);
  color: var(--st-text-faint);
  font-size: 12px;
}
.sheet__follow { display: flex; align-items: center; gap: 8px; color: var(--st-text-dim); cursor: pointer; white-space: nowrap; }
.sheet__legend { display: flex; align-items: center; gap: 16px; font-size: 11.5px; }
.sheet__legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sheet__legend-item--beat .sheet__swatch { width: 14px; height: 10px; border-radius: 2px; outline: 1px solid var(--st-accent); outline-offset: -0.5px; background: color-mix(in srgb, var(--st-accent) 25%, transparent); }
.sheet__legend-item--loop .sheet__swatch { width: 14px; height: 3px; border-radius: 1px; background: var(--st-loop); }
.sheet__legend-item--repeat .sheet__swatch { font: 400 13px/normal var(--st-font-mono); }
.sheet__speed-label { white-space: nowrap; }
.sheet__stepper {
  display: flex;
  align-items: center;
  height: 28px;
  border-radius: 7px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface);
  font: 400 12px/normal var(--st-font-mono);
}
.sheet__step,
.sheet__speed-value { display: grid; place-items: center; height: 100%; padding: 0 9px; }
.sheet__step { border: 0; background: none; color: var(--st-text-dim); cursor: pointer; }
.sheet__step:hover:not(:disabled) { color: var(--st-text); }
.sheet__step:disabled { opacity: 0.4; cursor: default; }
.sheet__speed-value { color: var(--st-text); }

/* A narrow panel (the right dock) has no room for the legend beside the controls. */
@container sheet (max-width: 640px) {
  .sheet__legend { display: none; }
  .sheet__bars { order: 1; width: 100%; }
  .sheet[data-view='grid'] .sheet__row { gap: 8px; }
}