/* ═══════════════════════════════════════════════════════════════════════════
   bytefret — styles/sheet.css  (Phase 4a Sub-Phase)
   ───────────────────────────────────────────────────────────────────────────
   Sheet-Container + Sheet-Header (das, was OBEN sichtbar ist):
     - #meta-host (hidden source-of-truth für Title/Artist/BPM/Tuning)
     - .tab-area (flex-column container)
     - .sheet-header (persistent above tab-page) + Title-Input + Byline + Music-Chips
     - .music-chip (Toggle-Button für BPM/Tuning/Capo etc.)
     - .chip-popover (GENERIC Popover-Infrastruktur — wird auch von
       footer/notation-popover via cascade-override genutzt; territorial in
       sheet.css weil dominant-User .music-chip ist)
     - .tab-page-host + .empty-hint + .tab-page (sheet container)

   ⏳ FOLGT in Phase 4b (Tab-Content):
     - .tab-line, .jump-line, .volta-line, .section-line, .pm/lr-line, .chord-line,
       .bar-numbers, .string-row, .cell, .bar-sep (mit A8-Repeat-Modifiers)
       Tier-Order (top → bottom): jump → volta → section → pm/lr → bar-numbers
       → chord → string-rows (ADR-24 revised-by-ADR-38 Stages 2+3).

   ⏳ FOLGT in Phase 7 (Distributed):
     - sheet-bezogene Touch-Block-Overrides
     - body.is-read-only sheet-rules
     - sheet-bezogene Print-Overrides (z.B. break-inside)

   Dependencies: base.css (var(--…)), topbar.css (button defaults).
   Cascade: footer.css overrided footer .chip-popover → sheet MUSS vor footer.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── #meta-host (hidden source-of-truth) ─────────────────────────────── */

/* Hidden Source-of-Truth-Container für die ehemaligen Meta-Inputs (Title,
   Artist, BPM, Tuning, …). Sheet-Header + Music-Chip-Popovers spiegeln
   deren Werte via bindMirroredInput. Defensive `display: none !important`
   zusätzlich zum hidden-Attribut: schützt gegen Author-CSS, die das UA-
   `[hidden] { display: none }` versehentlich überschreibt. */
#meta-host { display: none !important; }



/* ─── Tab area / Tab page (das Sheet) ─────────────────────────────────────── */
/* Refinement B Phase 1 — tab-area beherbergt jetzt zwei Karten:
   sheet-header (Title/Artist/Music-Chips) ÜBER der tab-page. flex column
   stapelt sie vertikal mit kleiner Lücke; align-items:center hält beide
   horizontal zentriert wie zuvor die einzelne tab-page. */
.tab-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding: 2.5rem 1.5rem 4rem;
  position: relative;   /* Anchor für .empty-hint */
}

/* ─── Refinement B Phase 1 — Sheet-Header ────────────────────────────────
   Persistentes Header-Element ÜBER der tab-page. Eigene Karten-Optik
   (border + shadow + Sheet-bg) damit es visuell zur Tabulatur gehört
   ohne dass beide ein gemeinsamer Wrapper sein müssen. Title-Input
   ist immer-sichtbar, borderless transparent — sieht aus wie ein
   Header, verhält sich wie ein Input. */
.sheet-header {
  width: max-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.75rem 2.5rem 1.5rem;
  /* Subtiler Paper-Gradient bg-page → bg-page-2 (warmer Verlauf nach unten),
     gibt dem Sheet-Header leichte Tiefe wie ein gewölbtes Notenblatt. */
  background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-page-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}

.sheet-title-input {
  width: 100%;
  min-width: 16rem;
  /* Filled-Style: subtler bg-sunken Hintergrund als permanente "ist ein
     Feld"-Affordance. Konsistent mit den Music-Chips (auch bg-sunken
     default). Funktioniert auf coarse-Pointer (Mobile) ohne Hover-Reveal:
     Default-State zeigt sofort, dass das Element editierbar ist, weil es
     einen Hauch dunkler als der Sheet-Header-Background ist (~7% Alpha). */
  background: var(--bg-sunken);
  /* Subtle Border ergänzt den Filled-Look mit klarer Kante. 3-Stufen-
     Eskalation: rest (border-soft) → hover (border) → focus (accent). */
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -.015em;
  text-align: center;
  padding: .15rem .5rem;
  outline: none;
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.sheet-title-input::placeholder {
  color: var(--text-subtle);
  opacity: .55;
  font-weight: 500;
}
/* Hover: stärkere Border. Bg bleibt bg-sunken (Eskalation via Border-
   Kontrast statt Bg-Tint — sauberer und konsistent mit Music-Chip-Hover). */
.sheet-title-input:hover {
  border-color: var(--border);
}
.sheet-title-input:focus-visible {
  border-color: var(--accent);
  background: var(--bg-sunken);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.sheet-byline {
  display: inline-flex;
  flex-wrap: wrap;          /* erlaubt Wrap auf schmalen Screens (Mobile) statt Overflow */
  align-items: baseline;
  justify-content: center;  /* gewrappte Items bleiben zentriert */
  gap: .35rem;
  max-width: 100%;          /* harte Kappe gegen Overflow des sheet-header */
  font-size: .92rem;
  color: var(--text-muted);
  font-style: italic;     /* klassisch musical: „by Roman Polanski" als Liner-Note-Style */
}
.sheet-byline-prefix { opacity: .7; font-style: italic; }
.sheet-byline-input {
  /* Filled-Style: bg-sunken Default, konsistent mit Title-Input. Auf coarse-
     Pointer ist das die EINZIGE Affordance vor Focus-State (kein Hover),
     daher wichtig dass Default-State klar als Feld erkennbar ist. */
  background: var(--bg-sunken);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  color: var(--text-muted);
  font: inherit;
  font-size: inherit;
  padding: .1rem .35rem;
  outline: none;
  text-align: center;
  min-width: 5rem;          /* etwas konservativer als 6rem für Mobile-Fit */
  max-width: 100%;          /* gegen Overflow innerhalb gewrappter Byline-Row */
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.sheet-byline-input::placeholder {
  color: var(--text-subtle);
  opacity: .5;
}
.sheet-byline-input:hover {
  border-color: var(--border);     /* Eskalation via Border, Bg bleibt */
  color: var(--text);              /* Text wird kontrastvoller */
}
.sheet-byline-input:focus-visible {
  border-color: var(--accent);
  background: var(--bg-sunken);
  color: var(--text);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.sheet-byline-sep { opacity: .5; padding: 0 .15rem; }

/* Music-Chips Phase 2 — <button>-Trigger für Mini-Popovers. position:
   relative ist Anchor für den absoluten .chip-popover. Hover/Active/
   Focus-States: Akzent-Border + Akzent-Soft-Tint. Open-State (Popover
   sichtbar) per data-open-Attribut, das von openChipPopover gesetzt wird. */
.sheet-music-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: .4rem;
  row-gap: 0;             /* vertikales Spacing kommt von ::before-Margins */
  margin-top: 0;          /* Platz wird via ::before margin-top gesteuert */
}

/* Hairline-Divider zwischen Byline und Music-Chips. flex-basis:100%
   bricht die Row in flex-wrap (wirkt wie eine eigene Zeile vor den Chips),
   linear-gradient mit transparent fade-out an den Enden gibt einen
   klassisch-eleganten Trennstrich (~50% Width effektiv sichtbar) statt
   einer harten Vollbreite-Linie. */
.sheet-music-chips::before {
  content: "";
  flex-basis: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border-soft) 30%,
    var(--border-soft) 70%,
    transparent 100%
  );
  margin: .35rem 0 .55rem;
}

/* Lazy-Wrapper (app.js ensurePopoverAnchor) für Chip-/Link-Trigger: position:
   relative-Anker, damit der role=dialog-Popover als GESCHWISTER (nicht als
   Nachfahre des Trigger-Buttons) positioniert werden kann. inline-flex, damit
   der Wrapper den Trigger eng umschließt und in der Flex-Chip-Reihe wie der
   Chip selbst sitzt (gleiche Geometrie wie das vorherige .music-chip-Anchor). */
.popover-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.music-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .3rem .8rem;   /* leicht mehr padding für Gewicht (war .25rem .65rem) */
  background: var(--bg-sunken);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text-muted);
  font: inherit;
  font-size: .8rem;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.music-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}
.music-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.music-chip[data-open] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.chip-glyph { opacity: .65; }
.chip-value { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.music-chip:hover .chip-value,
.music-chip[data-open] .chip-value { color: inherit; }

/* Mini-Popover über dem Chip. position:absolute relativ zum .music-chip.
   Anchor unten am Chip, mittig zentriert. transform-origin top center für
   die scale-Eintreten-Animation. */
.chip-popover {
  position: absolute;
  top: calc(100% + .35rem);
  left: 50%;
  transform: translateX(-50%) scale(.97);
  transform-origin: top center;
  min-width: 11rem;
  max-width: 90vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  padding: .5rem;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s var(--ease), transform .12s var(--ease);
}
.chip-popover[data-open] {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

/* BPM-Stepper-Layout: −10 / − / [input] / + / +10 in einer Reihe */
.chip-popover-stepper {
  display: flex;
  align-items: center;
  gap: .25rem;
  justify-content: center;
}
.chip-popover-stepper button {
  background: var(--bg-sunken);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: .35rem .55rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 2.25rem;
  transition: border-color .1s var(--ease), background .1s var(--ease);
}
.chip-popover-stepper button:hover { border-color: var(--accent); color: var(--accent); }
.chip-popover-stepper input {
  width: 3rem;
  padding: .35rem;
  text-align: center;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.chip-popover-stepper input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Native <select>-Wrapper im Chip-Popover. Das hidden #time-sig / #tuning-
   preset / #capo wird via DOM-Move hier eingehängt — Native-Dropdown-UX
   bleibt erhalten, Listener überleben den Move. */
.chip-popover select {
  width: 100%;
  background: var(--bg-page);
  color: var(--text);
  border: 1px solid var(--border);
  padding: .45rem .65rem;
  font: inherit;
  font-size: .9rem;
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%23A48455' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: 11px;
  padding-right: 1.85rem;
}
:root .chip-popover select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%238A6F47' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.chip-popover select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}


/* tab-page sitzt jetzt unter sheet-header — width:max-content matched
   sich gegenseitig, beide stehen horizontal zentriert in tab-area. Keine
   Layout-Anpassung an .tab-page selbst nötig. */

/* B1-Fix: Wrapper um .tab-page + .empty-hint, damit der Empty-Hint auf
   die TAB-PAGE-Geometrie ankert (50/50% des Wrappers = Mitte tab-page),
   nicht auf die combined sheet-header+tab-page-Box der tab-area. width
   max-content matched die tab-page-Breite, sodass Wrapper ≈ tab-page
   in width und height. */
.tab-page-host {
  position: relative;
  width: max-content;
  max-width: 100%;
}

/* Empty-State-Hint (F10) — nur sichtbar wenn Sheet leer + tutorial nicht gesehen */
.empty-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.1rem 1.6rem 1.2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: system-ui, -apple-system, sans-serif;
  text-align: center;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .04) inset,
    0 8px 28px rgba(0, 0, 0, .12),
    0 2px 6px rgba(0, 0, 0, .06);
  transition: transform .15s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), opacity .25s var(--ease);
}

.empty-hint:hover,
.empty-hint:focus-visible {
  border-color: var(--accent);
  transform: translate(-50%, -52%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 12px 32px rgba(0, 0, 0, .15),
    0 0 0 3px var(--accent-glow);
  outline: none;
}

.empty-hint[hidden] {
  display: none;
}

.empty-hint-icon {
  width: 26px;
  height: 26px;
  color: var(--accent);
  opacity: .85;
  margin-bottom: .15rem;
}

.empty-hint-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
}

.empty-hint-action {
  font-size: .82rem;
  font-weight: 400;
  color: var(--text-subtle);
  line-height: 1.35;
}

.tab-page {
  /* --tz = Tab-Zoom-Faktor für Pinch-Zoom auf Touch (1.0 default).
     Alle Cell-Dimensionen + Font-Size skalieren via calc(... * var(--tz)).
     Wird per JS auf Touch via 2-Finger-Pinch gesetzt + in LocalStorage
     bytefret.zoom persistiert. */
  --tz: 1;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  padding: 2.5rem 2.25rem 2rem;
  width: max-content;
  max-width: 100%;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: calc(1rem * var(--tz));
  line-height: 1;
  overflow-x: auto;
  position: relative;
  /* `pan-x pan-y` erlaubt 1-Finger-Pan in beide Richtungen (vertikal scroll
     der Page + horizontal scroll der breiten Tab-Lines), aber blockiert
     `pinch-zoom` weil's NICHT in der Liste ist — JS-Pinch-Handler hat
     freie Bahn für 2-Finger-Geste. Vor 2026-05-09 stand hier `pan-x`
     allein — das blockierte vertikales Scrollen sobald der Finger auf
     der Tabulatur war (User konnte nur am Rand scrollen). */
  touch-action: pan-x pan-y;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Tab-Content (Phase 4b Sub-Phase) — was IN der tab-page rendert:
     - .tab-line (eine Zeile Bars)
     - .volta-line (A8 Stage 2 — 1./2./3. alternative Endings, navigations-
       höchster Tier seit ADR-38)
     - .section-line (A1 Section-Line — strukturell-höchster Tier, unter
       volta-line seit ADR-38 Stage 2)
     - .pm-line + .lr-line (A6 Palm-Mute + Let-Ring)
     - .bar-numbers (mit A8-Repeat-Glyph-Modifiers auf .bar-sep)
     - .chord-line (F6 Chord-Line)
     - .string-row + Saiten-Linie (mit .bar-sep zwischen Bars; A8-Repeat-
       Glyphs |: :| via CSS-Pseudo-Elements)
     - .cell (Tab-Notation Input)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Tab line (eine Zeile Bars mit gemeinsamen String-Lines) ─────────────── */
.tab-line {
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  page-break-inside: avoid;
  width: max-content;
}

/* Bar-Nummerierung über jeder Zeile */
.bar-numbers {
  display: flex;
  align-items: flex-end;
  height: 1.1rem;
  margin-bottom: .4rem;
  font-family: system-ui, sans-serif;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  /* Color-Diät-Tweak: Bar-Numbers zurück auf accent. Refinement C hatte
     sie auf secondary-line gezogen — zu radikal. Bar-Numbers sind
     dauerhafter Navigations-Anker und tragen Tab-Identität, verdienen
     die Brand-Farbe. Selected-State mit accent-Background bleibt
     unverändert (Z. ~1280) — die Selektion dominiert weiterhin. */
  color: var(--accent);
  user-select: none;
}

/* Audit-Pass-3 (2026-05-11): width statt min-width (defensive gegen
   Future-Text-Expansion analog .pm-lead/.lr-lead-Fix). Aktuell leer, kein
   behavior change. flex-shrink:0 + overflow:visible für robustheit falls
   später Text reinkommt (z.B. „Bar:"-Prefix). */
.bar-numbers .num-label {
  display: inline-block;
  width: 1.5rem;
  flex-shrink: 0;
  padding-right: .25rem;
  overflow: visible;
  white-space: nowrap;
}
.bar-numbers .num-sep   { display: inline-block; width: .5rem; flex-shrink: 0; }
.bar-numbers .bar-num   {
  display: inline-block;
  width: calc(var(--bar-size, 8) * var(--cell-width) * var(--tz, 1));   /* B9: matched cell-row */
  text-align: center;
  opacity: .75;
  /* F3 Phase 2 — als <button> für Selection. Reset Browser-Defaults */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: inherit;
  font: inherit;
  font-size: .65rem;            /* mirror old span-style */
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px 2px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease), opacity .12s var(--ease);
}
.bar-numbers .bar-num:hover {
  background: var(--bg-sunken);
  opacity: 1;
}
.bar-numbers .bar-num:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.bar-numbers .bar-num.is-selected {
  background: var(--accent);
  color: var(--accent-on);
  opacity: 1;
  border-color: var(--accent);
}


/* ─── F6 — Chord-Line ─────────────────────────────────────────────────────
   Zwischen .bar-numbers und der ersten .string-row. Geometrie matched
   die bar-numbers via gleicher chord-lead-Breite + chord-slot-Breite.
   `--bar-size` und `--tz` (Pinch-Zoom) werden mitgezogen damit die Slots
   immer exakt über den Bars sitzen. */
.chord-line {
  display: flex;
  align-items: center;
  font-family: system-ui, sans-serif;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .35rem;
  /* Color-Diät-Tweak: Chord-Names zurück auf accent. Sind musikalische
     Daten (nicht UI-Chrome) und meist nur 1–4 pro Sheet sichtbar —
     punktuelle Highlights ohne Inflations-Effekt. */
  color: var(--accent);
  user-select: none;
}
.chord-lead {
  /* matched die Leading-Distanz der bar-numbers exakt: beide 2rem outer
     (border-box: num-label 1.5rem outer + leading num-sep 0.5rem = 2rem;
     chord-lead width 2rem, padding-right .25rem ist INSIDE der width).
     Erste bar-num und erstes chord-slot starten beide bei x = 2rem.

     Audit-Pass-3 (2026-05-11): width statt min-width (defensive gegen
     Future-Text-Expansion analog .pm-lead/.lr-lead-Fix). Aktuell leer,
     kein behavior change. flex-shrink:0 + overflow:visible für robustheit
     falls später Lead-Text reinkommt. */
  display: inline-block;
  width: 2rem;
  flex-shrink: 0;
  padding-right: .25rem;
  overflow: visible;
  white-space: nowrap;
}
.chord-slot {
  /* B8 Audit-Korrektur 2026-05-10: width = cell-width*var + 0.5rem
     matched bar-num (cell-width*var) + num-sep (0.5rem). Mit border-box
     ist padding-right INSIDE der width — content-area = cell-width*var
     matched bar-num content-area exakt. Ohne das +0.5rem driftete jeder
     Bar 0.5rem nach links (cumulative) — Bug in initialer F6+A1-Impl.
     B9 2026-05-10: --cell-width statt 1.7rem-literal — coarse-mode-
     übergreifend automatisch synchronisiert. */
  display: inline-flex;
  align-items: center;
  width: calc(var(--bar-size, 8) * var(--cell-width) * var(--tz, 1) + 0.5rem);
  padding-right: .5rem;
}
.chord {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px dashed var(--border);
  border-radius: 4px;
  color: inherit;
  font: inherit;
  text-align: center;
  padding: 2px 4px;
  outline: none;
  transition: border-color .12s var(--ease), background .12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.chord::placeholder {
  color: var(--text-subtle);
  opacity: .35;
  font-weight: 400;
}
.chord:hover { border-bottom-color: var(--border-strong, var(--text-subtle)); }
.chord:focus-visible {
  border-bottom-color: var(--accent);
  background: var(--bg-sunken);
}

/* ─── A1 — Section-Line ──────────────────────────────────────────────────────
   Höchster Tier ÜBER bar-numbers + chord-line. Geometrie identisch zu
   chord-line (gleiche --bar-size + --tz Multiplikatoren). Visuelle
   Unterscheidung von Chords: bronze/secondary statt orange/accent —
   Sections sind Navigations-Marker, Chords sind musikalische Daten. */
.section-line {
  display: flex;
  align-items: center;
  font-family: system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .25rem;
  color: var(--secondary);
  user-select: none;
}
.section-lead {
  /* Identisch zu chord-lead: 2rem outer, padding-right inside (border-box).
     Erste section-slot startet bei x = 2rem analog zu erster bar-num.

     Audit-Pass-3 (2026-05-11): width statt min-width (defensive analog
     .chord-lead, .pm-lead, .lr-lead). */
  display: inline-block;
  width: 2rem;
  flex-shrink: 0;
  padding-right: .25rem;
  overflow: visible;
  white-space: nowrap;
}
.section-slot {
  /* B8 Audit-Korrektur 2026-05-10 (gleicher Bug wie chord-slot): width muss
     bar-num + num-sep matchen damit jede Section-Marker-Position vertikal
     mit dem zugehörigen Takt aligned. B9 2026-05-10: --cell-width statt
     1.7rem-literal. */
  display: inline-flex;
  align-items: center;
  width: calc(var(--bar-size, 8) * var(--cell-width) * var(--tz, 1) + 0.5rem);
  padding-right: .5rem;
}
.section {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px dashed var(--border);
  border-radius: 4px;
  color: inherit;
  font: inherit;
  text-align: center;
  padding: 2px 4px;
  outline: none;
  transition: border-color .12s var(--ease), background .12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.section::placeholder {
  color: var(--text-subtle);
  opacity: .3;
  font-weight: 400;
  text-transform: none;        /* — soll nicht uppercased werden */
}
.section:hover { border-bottom-color: var(--border-strong, var(--text-subtle)); }
.section:focus-visible {
  border-bottom-color: var(--secondary);
  background: var(--bg-sunken);
}

/* ─── A8 (ADR-38) Stage 3 — Jump-Line (Segno/Coda/Fine/D.S./D.C.) ──────────
   TOP-Tier oberhalb volta-line + section-line. ADR-24 + ADR-38 doppelt-
   revised-by — Jump-Markers sind der NAVIGATIONS-HÖCHSTE Tier (Player-
   Routing-Annotation, übersteuert strukturelle Songform). Anchors
   (Segno/Coda/Fine) wirken am Bar-Anfang, Directives (D.S./D.C.) am
   Bar-Ende — auf einer Line gerendert für visuelle Kompaktheit.

   Glyph-Strategy: Unicode-Symbole 𝄋 (U+1D10B Segno) und 𝄌 (U+1D10C Coda)
   via CSS ::before-Pseudo-Element. Text-Fallback (`[Segno]`/`[Coda]`/
   `Fine`/`D.S. al Fine` etc.) via attr() in @media print + bei nicht-
   renderbaren Fonts (browser-spezifisch, defensive). */
.jump-line {
  display: flex;
  align-items: flex-end;
  height: 1.2rem;
  margin-bottom: .25rem;
  font-family: system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--accent);
  user-select: none;
}
.jump-lead {
  display: inline-block;
  width: 2rem;
  flex-shrink: 0;
}
.jump-slot {
  display: inline-block;
  width: calc(var(--bar-size, 8) * var(--cell-width) * var(--tz, 1) + 0.5rem);
  position: relative;
  height: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
}
/* Anchor-Symbole am Bar-Anfang */
.jump-slot[data-anchor="segno"]::before {
  content: "𝄋 Segno";
  display: inline-block;
}
.jump-slot[data-anchor="coda-mark"]::before {
  content: "𝄌 → Coda";
  display: inline-block;
}
.jump-slot[data-anchor="coda-start"]::before {
  content: "𝄌 Coda";
  display: inline-block;
}
.jump-slot[data-anchor="fine"]::before {
  content: "Fine";
  display: inline-block;
  font-style: italic;
}
/* Directive-Texte am Bar-Ende (rechts neben Anchor wenn beides) */
.jump-slot[data-directive]::after {
  display: inline-block;
  margin-left: .35rem;
  font-style: italic;
  color: var(--secondary, var(--accent));
}
.jump-slot[data-directive="ds-al-fine"]::after  { content: "D.S. al Fine"; }
.jump-slot[data-directive="ds-al-coda"]::after  { content: "D.S. al Coda"; }
.jump-slot[data-directive="dc-al-fine"]::after  { content: "D.C. al Fine"; }
.jump-slot[data-directive="dc-al-coda"]::after  { content: "D.C. al Coda"; }

/* Print: Text-only fallbacks (Unicode-Glyphs werden in vielen Print-Engines
   auf Fallback-Fonts ohne Musical-Symbols gemappt → leere Box-Glyphen).
   Forciere reine Text-Labels für Print-Robustheit. */
@media print {
  .jump-slot[data-anchor="segno"]::before      { content: "[Segno]"; }
  .jump-slot[data-anchor="coda-mark"]::before  { content: "[→ Coda]"; }
  .jump-slot[data-anchor="coda-start"]::before { content: "[Coda]"; }
}

/* ─── A8 (ADR-38) Stage 2 — Volta-Line (1./2./3. alternative Endings) ──────
   Navigations-höchster Tier oberhalb section-line. ADR-24 revised-by-ADR-38:
   section ist strukturell-höchster (Songform), volta-line ist navigations-
   höchster (Player-Routing). Bracket-Glyph via Pseudo-Elements analog
   .pm-slot-Pattern (data-run='single|start|mid|end'). Geometrie identisch
   zu chord-line/section-line via --bar-size-Multiplikator. */
.volta-line {
  display: flex;
  align-items: flex-end;
  height: 1.1rem;
  margin-bottom: .25rem;
  font-family: system-ui, sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--accent);
  user-select: none;
}
.volta-lead {
  display: inline-block;
  width: 2rem;
  flex-shrink: 0;
}
.volta-slot {
  display: inline-block;
  width: calc(var(--bar-size, 8) * var(--cell-width) * var(--tz, 1) + 0.5rem);
  position: relative;
  height: 100%;
}
/* Bracket-Konstruktion: horizontale Linie oben via box-shadow inset top;
   linke vertikale Klammer für start+single; rechte vertikale Klammer für
   end+single. mid-Slots haben nur die horizontale Linie. */
.volta-slot[data-run="start"],
.volta-slot[data-run="mid"],
.volta-slot[data-run="end"],
.volta-slot[data-run="single"] {
  box-shadow: inset 0 2px 0 0 currentColor;   /* horizontale Linie oben */
}
.volta-slot[data-run="start"]::before,
.volta-slot[data-run="single"]::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px;
  height: .55rem;
  background: currentColor;
}
.volta-slot[data-run="end"]::after,
.volta-slot[data-run="single"]::after {
  content: "";
  position: absolute;
  right: .5rem; top: 0;             /* .5rem = padding-right zur Bar-Boundary */
  width: 2px;
  height: .55rem;
  background: currentColor;
}
.volta-num {
  display: inline-block;
  padding: 0 .15rem 0 .3rem;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: top;
  margin-top: 1px;
}

/* ─── A6 — Palm-Mute / Let-Ring Lines ────────────────────────────────────────
   Stage 8 (2026-05-10). Boolean-Range-Annotation pro Bar via Click-Toggle
   (kein Text-Input wie chord/section). Run-Detection (computeRuns in app.js)
   klassifiziert consecutive aktive Bars als single|start|mid|end via
   data-run-Attribut auf dem Slot — gestrichelte Linie zwischen toggles
   (Editor) bzw. Bracket-Notation `[P.M. ─ ─ ─ ┐]` (Print) wird per CSS
   abgeleitet. Geometrie identisch zu chord-line/section-line via gleicher
   --bar-size + --tz Multiplikatoren — Toggles sitzen vertikal exakt über
   den Bars.

   Visuelle Distinktion: secondary-Color (bronze) wie section-line — die
   Lines sind ebenfalls Range-Marker, semantisch closer zu sections als zu
   chords (die per-Bar musikalische Daten sind, nicht Range-Modifikator). */
.pm-line, .lr-line {
  display: flex;
  align-items: center;
  font-family: system-ui, sans-serif;
  font-size: .75rem;
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: .2rem;
  user-select: none;
}
.pm-lead, .lr-lead {
  /* Audit-Pass-2-Korrektur 2026-05-10: WIDTH (fixed) statt min-width damit
     der Lead bei langen Labels nicht expandiert und alle nachfolgenden Slots
     nach rechts schiebt. flex-shrink:0 sichert ab dass auch im flex-container
     die Width nicht zusammenstaucht. Geometrie-Match identisch zu chord-lead/
     section-lead/numLabel+numLeadSep (2rem outer total) — Toggle bleibt mittig
     zur Bar-Cell darunter.

     Audit-Pass-2-Refinement 2026-05-10: overflow:VISIBLE statt hidden — der
     Lead-Text-Container bleibt fixed 2rem, aber längere Labels (z.B. „let
     ring", ~2.5rem natural width) dürfen mit text-align:right nach LINKS aus
     der Spalte herausragen (in das tab-page-padding-left, ~2.25rem desktop
     / 1.1rem mobile). Damit kann lr-lead seinen vollen Songbook-konformen
     Text „let ring" zeigen ohne die Slot-Geometrie zu beeinflussen. Layout
     bleibt mathematisch korrekt, Text bleibt voll lesbar. */
  display: inline-block;
  width: 2rem;
  flex-shrink: 0;
  padding-right: .25rem;
  font-style: italic;
  font-size: .7rem;
  text-align: right;
  opacity: .8;
  overflow: visible;
  white-space: nowrap;
}
.pm-slot, .lr-slot {
  /* B8/B9-Pattern (siehe section-slot): width = bar-size × cell-width × tz
     + 0.5rem für Bar-Num-Sep-Match. position:relative anchort die ::after-
     Run-Linie. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--bar-size, 8) * var(--cell-width) * var(--tz, 1) + 0.5rem);
  padding-right: .5rem;
  position: relative;
}
.pm-toggle, .lr-toggle {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1.5px solid var(--border-soft);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.pm-toggle[aria-pressed="true"],
.lr-toggle[aria-pressed="true"] {
  background: var(--secondary);
  border-color: var(--secondary);
}
.pm-toggle:hover:not([aria-pressed="true"]),
.lr-toggle:hover:not([aria-pressed="true"]) {
  border-color: var(--secondary);
  background: var(--bg-sunken);
}
.pm-toggle:focus-visible,
.lr-toggle:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* Run-Decoration: gestrichelte Linie zwischen consecutive aktiven Toggles.
   Anker auf den Slot (relative); ::after füllt die rechte Slot-Hälfte. */
.pm-slot[data-run="start"]::after,
.pm-slot[data-run="mid"]::after,
.lr-slot[data-run="start"]::after,
.lr-slot[data-run="mid"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% + 9px);
  right: 0;
  height: 0;
  border-top: 1.5px dashed var(--secondary);
  pointer-events: none;
}
/* Linke Hälfte für mid/end (Connect to previous toggle) */
.pm-slot[data-run="mid"]::before,
.pm-slot[data-run="end"]::before,
.lr-slot[data-run="mid"]::before,
.lr-slot[data-run="end"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: calc(50% + 9px);
  height: 0;
  border-top: 1.5px dashed var(--secondary);
  pointer-events: none;
}

/* ─── String row + die durchgängige Saiten-Linie ──────────────────────────── */
.string-row {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(1.5rem * var(--tz, 1));
}

.string-row::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.9rem;
  right: 0;
  height: 1px;
  background: var(--string);
  z-index: 0;
  pointer-events: none;
  transition: background-color .35s var(--ease);
}

/* Saiten-Hierarchy: Bass-Saiten präsenter als Treble */
.string-row[data-str="0"]::after { opacity: .55; }
.string-row[data-str="1"]::after { opacity: .65; }
.string-row[data-str="2"]::after { opacity: .75; }
.string-row[data-str="3"]::after { opacity: .85; }
.string-row[data-str="4"]::after { opacity: .92; }
.string-row[data-str="5"]::after { opacity: 1;   }

.string-row > * { position: relative; z-index: 1; }

.string-label {
  display: inline-block;
  min-width: 1.5rem;
  padding-right: .35rem;
  text-align: right;
  color: var(--secondary-line);
  user-select: none;
  font-weight: 600;
  letter-spacing: .02em;
}

.bar-sep {
  display: inline-block;
  width: .5rem;
  text-align: center;
  color: var(--secondary-line);
  user-select: none;
  font-weight: 700;
  position: relative;   /* A8 — Anker für repeat-Pseudo-Elements (Dots + Count) */
}

/* A8 (ADR-38) Stage 1 — Repeat-Markers via Pseudo-Elements.
   Geometry-preserving: .bar-sep bleibt .5rem fixed. Die Dots der :| und |:
   Glyphs sitzen absolut positioniert links/rechts vom |-Strich, ohne den
   Footprint des sep-Elements zu ändern. So bleibt die gesamte Spalten-
   Geometrie (chord-line, section-line, pm-line, bar-numbers, string-rows)
   konsistent ausgerichtet auch wenn Repeats gesetzt sind.

   Anzeige der Doppel-Vertikal-Linie (||:  bzw.  :||) durch box-shadow auf
   dem sep-Element selbst — kein 2. DOM-Element nötig. */
.bar-sep.repeat-start,
.bar-sep.repeat-end {
  color: var(--accent);
  font-weight: 800;
}
.bar-sep.repeat-start {
  box-shadow: inset -0.1rem 0 0 currentColor;   /* zweiter Strich rechts */
}
.bar-sep.repeat-end {
  box-shadow: inset 0.1rem 0 0 currentColor;    /* zweiter Strich links */
}
.bar-sep.repeat-start.repeat-end {
  /* :||: — back-to-back close+open: beide Striche links UND rechts */
  box-shadow: inset 0.1rem 0 0 currentColor,
              inset -0.1rem 0 0 currentColor;
}
.bar-sep.repeat-start::after {
  content: "•";
  position: absolute;
  right: -0.45rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7em;
  color: currentColor;
  pointer-events: none;
}
.bar-sep.repeat-end::before {
  content: "•";
  position: absolute;
  left: -0.45rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7em;
  color: currentColor;
  pointer-events: none;
}
/* Count-Indicator: über dem :| als kleines ×n. Wird per child-Element
   .repeat-count-badge gerendert (NICHT via ::before/::after, weil die schon
   für die •-Dots verwendet werden). Nur auf Saite-0 (oberste string-row)
   gerendert vom Renderer — sonst würden 6 Counts untereinander erscheinen.
   Steht nur bei count > 2 (default 2 implizit, kein Indicator). */
.bar-sep .repeat-count-badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}


/* ─── Cells ───────────────────────────────────────────────────────────────── */
.cell {
  width: calc(var(--cell-width) * var(--tz, 1));   /* B9: --cell-width = 1.7rem desktop / 2.5rem coarse */
  height: calc(1.5rem * var(--tz, 1));
  text-align: center;
  background: transparent;
  color: var(--text);
  border: none;
  font: inherit;
  padding: 0;
  margin: 0;
  outline: none;
  caret-color: var(--accent);
  border-radius: 4px;
  transition: background .12s var(--ease), box-shadow .12s var(--ease);
}

/* Bar-Highlight on Cell-Focus — alle Cells im aktiven Bar bekommen einen
   subtilen Akzent-Tint zur Orientierung beim Scrollen durch viele Bars.
   MUSS vor :hover und :focus-visible stehen — bei gleicher Specificity
   (0,2,0) wird via Source-Order entschieden, und Hover/Focus müssen
   dominieren wenn aktiv. */
.cell.bar-active { background: var(--bar-active-bg); }
/* F3 Phase 2 — Bar-Selection-Highlight, stärker als bar-active. Inset
   box-shadow oben+unten als visuelle Klammer (zeigt das ganze Bar
   wird als Block bearbeitet). */
.cell.bar-selected {
  background: var(--accent-soft);
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}

.cell:hover { background: var(--cell-hover); }

.cell:focus-visible {
  background: var(--accent-soft);
  box-shadow:
    inset 0 0 0 1px var(--accent),
    0 0 14px var(--accent-glow);
}

.cell::placeholder { color: transparent; }


/* ═══════════════════════════════════════════════════════════════════════════
   Read-Only-Distribution (Phase 7b) — body.is-read-only sheet-rules
   ───────────────────────────────────────────────────────────────────────────
   `?view=read-only` → body.is-read-only Class. Sheet-Komponenten:
     - .cell/.chord/.section/.pm-toggle/.lr-toggle/.sheet-title-input/
       .sheet-byline-input → pointer-events:none + visuelle Reset
     - .empty-hint hide (Tap-a-cell-to-start wäre verwirrend)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Disable-Pattern: pointer-events:none auf editierbare Felder. JS-Guards
   (IS_READ_ONLY in handlers + applyMutation + saveState) sind defense-in-depth. */
body.is-read-only .cell,
body.is-read-only .chord,
body.is-read-only .section,
body.is-read-only .pm-toggle,
body.is-read-only .lr-toggle,
body.is-read-only .sheet-title-input,
body.is-read-only .sheet-byline-input {
  pointer-events: none;
  cursor: default;
  user-select: text;        /* Selection erlaubt für Read-Only-Use-Cases */
}

/* .bar-num bewusst NICHT disabled — Plan-Intent: "Bar-Selection erlauben,
   User kann mit Bars interagieren ohne State zu ändern. Copy/Paste sind
   eh hidden." Audit-Pass-Korrektur 2026-05-11. */

/* Cells im Read-Only: visuell als Text statt Input — kein bg, kein border. */
body.is-read-only .cell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.is-read-only .chord,
body.is-read-only .section {
  background: transparent !important;
  border: none !important;
}
body.is-read-only .sheet-title-input,
body.is-read-only .sheet-byline-input {
  border: none !important;
  background: transparent !important;
}


/* Empty-Hint — Review-Korrektur W4: 'Tap a cell to start' wäre verwirrend
   wenn Cells disabled sind. */
body.is-read-only .empty-hint {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Distributed @media-Overrides (Phase 7c) — sheet-bezogene Coarse + Responsive
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .tab-area { padding: 1.5rem .75rem 3rem; gap: .65rem; }
  .tab-page { padding: 1.5rem 1.1rem 1.25rem; gap: 1.5rem; }
  .sheet-header { padding: 1rem 1.25rem .9rem; }
  .sheet-title-input { font-size: 1.4rem; min-width: 12rem; }
  .sheet-byline { font-size: .85rem; }
  /* Mobile-Fix: Byline-Inputs noch kompakter damit „by [Artist]" + ggf.
     „[Composer]" auf 360px-Phones in den sheet-header passt. Bei flex-wrap
     gehen die Inputs notfalls auf zwei Zeilen — der Mid-Dot-Separator
     wird dann ausgeblendet, weil er sonst am Anfang der zweiten Zeile
     steht. */
  .sheet-byline-input { min-width: 4rem; }
  .sheet-byline-sep { display: none !important; }
}

/* Mini-Phone (≤360px, iPhone-SE-Klasse): Sheet-Header darf noch enger.
   Verfügbare Breite nach sheet-header padding (2.5rem links+rechts) auf
   320px-Viewports ist nur ~280px — Title-min-width 12rem (192px) +
   Byline-Inputs 4rem werden zu eng. Reduktion auf 10rem / 3rem damit
   Wrap-Verhalten sauber bleibt und Title-Placeholder sichtbar ist.
   Music-Chips kompakter (kleineres Padding + Font), damit BPM/Time/
   Tuning/Capo nicht auf 3 Zeilen stacken. */
@media (max-width: 360px) {
  .sheet-header { padding: .85rem 1rem .75rem; }
  .sheet-title-input { min-width: 10rem; font-size: 1.25rem; }
  .sheet-byline-input { min-width: 3rem; }
  .sheet-byline { font-size: .8rem; }
  .music-chip { padding: .25rem .55rem; font-size: .75rem; }
}

@media (pointer: coarse) {
  /* M1 / B9 — größere Cells für Finger-Tippgenauigkeit. 40×40px = WCAG 2.2
     SC 2.5.8 ✓ (24px Minimum), unter Apple-HIG 44px, dafür bleibt der
     horizontale Scroll überschaubar. Skaliert mit Pinch-Zoom (--tz).
     B9 Audit-Architektur 2026-05-10: --cell-width Override propagiert
     automatisch zu .bar-num, .chord-slot, .section-slot — die ganze
     Tab-Geometrie skaliert konsistent. */
  :root { --cell-width: 2.5rem; }
  .cell {
    height: calc(2.5rem * var(--tz, 1));
    border-radius: 6px;
    /* iOS-Auto-Zoom-Prevention: der fokussierte Cell-<input> darf nie unter
       16px (1rem) fallen, sonst zoomt iOS beim Focus rein. .cell erbt sonst
       `font-size: calc(1rem * var(--tz))` vom .tab-page-Container (Zeile ~425),
       was bei Pinch-Zoom-Out (--tz < 1) unter 16px rutscht. max()-Floor: die
       Cell-Box skaliert weiter mit --tz (height oben + width Zeile 1049), nur
       die Ziffer bleibt ≥16px. Konsistent mit allen anderen Touch-Inputs
       (dialogs.css:239, topbar.css ~1048, Sheet-Header). */
    font-size: max(1rem, calc(1rem * var(--tz, 1)));
  }

  /* KRITISCH: String-Row-Höhe muss mit Cell-Höhe matchen, sonst
     overflowen die Cells aus der fixed-height Row. Die ::after-String-
     Linie sitzt bei top: 50% — passt automatisch. */
  .string-row { height: calc(2.5rem * var(--tz, 1)); }

  /* B2 + B2b — Chord-/Section-Input-Affordance auf Touch. Default-Border
     ist `border-bottom: 1px dashed var(--border)` — dashed-Pattern auf
     Mobile-DPI sind kleine Striche kaum von Pixel-Noise unterscheidbar.
     Solid border + bg-sunken Filled-Style macht das Feld klar erkennbar.
     Konsistent mit Sheet-Header-Inputs (Polish-Pass 2026-05-10) und
     Music-Chips (auch bg-sunken Default). */
  .chord, .section {
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-sunken);
  }
  .chord:focus-visible, .section:focus-visible {
    border-bottom-color: var(--accent);
    background: var(--accent-soft);
  }

  /* Music-Chips auf Touch HIG-konform vergrößern (Default ~28px war für
     Maus-User ok). Plus Stepper-Buttons + Input im Popover. iOS-Auto-
     Zoom-Prevention via 16px-Input-Schwelle. */
  .music-chip { min-height: 44px; padding: .55rem 1rem; font-size: .9rem; }
  .chip-popover-stepper button { min-height: 44px; padding: .55rem .8rem; font-size: .9rem; }
  .chip-popover-stepper input { min-height: 44px; font-size: 1rem; }
  .chip-popover select { min-height: 44px; font-size: 1rem; }

  /* Empty-Hint Text leicht größer */
  .empty-hint { font-size: .95rem; }

  /* Bar-Number Touch-Target-Bump (F3 P2 Mobile-Polish) — Bar-Nums sind als
     <button> klickbar für Selection, aber default ~14px Font + 1em-Höhe ist
     Glücksspiel-Tap. Padding erweitert die Hit-Area auf 44×40+ ohne Text-
     Größe zu ändern; Row-Höhe wächst entsprechend, align-items wechselt zu
     center weil flex-end mit 44px Höhe zu viel weißem Raum erzeugt. */
  .bar-numbers {
    height: auto;
    min-height: 2.75rem;        /* 44px Apple-HIG */
    align-items: center;
    margin-bottom: .25rem;
  }
  .bar-numbers .bar-num {
    min-height: 2.75rem;
    padding: .65rem .25rem;
  }

  /* F6 — Chord-Line auf Touch: input min-height 44px (Apple-HIG), font-size
     1rem für iOS-Auto-Zoom-Prevention, autocapitalize="words" macht aus
     "am" → "Am" auf der Soft-Keyboard. */
  .chord-line { font-size: 1rem; margin-bottom: .25rem; }
  .chord {
    min-height: 2.75rem;
    font-size: 1rem;
    padding: .5rem .25rem;
  }

  /* A1 — Section-Line auf Touch (mirror chord). 1rem Font für iOS-no-zoom,
     2.75rem min-height für Touch-Target-Standard. */
  .section-line { font-size: .9rem; margin-bottom: .2rem; }
  .section {
    min-height: 2.75rem;
    font-size: 1rem;
    padding: .5rem .25rem;
  }

  /* A6 — Palm-Mute / Let-Ring Toggle-Targets auf Touch. WCAG 2.2 SC 2.5.8
     Min-24px ✓ (28px), unter Apple-HIG-44px aber konsistent mit Cell-Größe
     (40px) und Bar-Num-Padding. Größere Toggles würden sonst die Line-Höhe
     dominieren und das vertikale Tab-Budget auffressen. */
  .pm-line, .lr-line { font-size: .9rem; margin-bottom: .25rem; }
  .pm-toggle, .lr-toggle {
    width: 28px;
    height: 28px;
    border-width: 2px;
  }
  .pm-slot[data-run="start"]::after,
  .pm-slot[data-run="mid"]::after,
  .lr-slot[data-run="start"]::after,
  .lr-slot[data-run="mid"]::after {
    left: calc(50% + 14px);
  }
  .pm-slot[data-run="mid"]::before,
  .pm-slot[data-run="end"]::before,
  .lr-slot[data-run="mid"]::before,
  .lr-slot[data-run="end"]::before {
    right: calc(50% + 14px);
  }
}