/* ═══════════════════════════════════════════════════════════════════════════
   bytefret — styles/overlays.css
   ───────────────────────────────────────────────────────────────────────────
   Floating / Global-State Overlays + cross-cutting Modes:
     - BMC icon-button (Buy-Me-a-Coffee Footer-Affiliate)
     - GLOBAL Reduced Motion sweep (D5 — respect OS-Preference)
     - .tech-strip default-hide (Mobile-Floating-Toolbar shown on coarse-pointer)
     - .print-credit + @media-print Tech-Strip-Hide (orphan print-rules)
     - Read-Only-Banner DOM-element (oben über Topbar)
     - body.is-read-only .tech-strip (defense-in-depth)
     - @media print .read-only-banner (Banner-Print-Override co-located)
     - Welcome-Toast (Erstbesucher) + @keyframes toast-in/-out
     - GLOBAL Print sweep (themes-unabhängig schwarz auf weiß)

   ⏳ FOLGT in Phase 7b (legal.css + Read-Only-Distribution-Cleanup):
     - body.is-read-only sheet-rules → sheet.css
     - body.is-read-only toolbar-bundle → topbar.css
     - body.is-read-only .empty-hint → sheet.css
   ⏳ FOLGT in Phase 7c (Touch-Block + Responsive distribution):
     - Touch-Optimierungen distribute zu Komponenten-Files
     - Responsive @media-block distribute

   Dependencies: ALLE Komponenten-Files (overlays.css MUSS LAST geladen werden,
     weil global Print + Reduced-Motion-Sweep mit !important alle Components
     overrided).
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── BMC icon-button ────────────────────────────────────────────────────── */
.bmc-btn { color: var(--text-muted); }
.bmc-btn:hover { color: var(--accent); }

/* Responsive */
@media (max-width: 720px) {
  .legal-area { padding: 1.5rem .75rem 3rem; }
  .legal-page { padding: 1.75rem 1.25rem 1.5rem; }
  .legal-body h2 { font-size: 1.4rem; }
  .legal-body h3 { font-size: 1.05rem; }
}


/* ─── Reduced Motion — respect OS-Preference (D5) ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}



/* ─── Tab-Notation-Strip — Default versteckt, nur auf Touch sichtbar ──────── */
.tech-strip { display: none; }


/* Print-only Elemente: hidden im Editor, sichtbar im @media print */
.print-credit { display: none; }

/* Strip im Print verstecken */
@media print {
  .tech-strip { display: none !important; }
}

/* ─── A4 (Stage 10) — Read-Only-View ──────────────────────────────────────────
   URL `?view=read-only` → body.is-read-only-Class + Banner sichtbar. CSS hier
   handelt visuelle Aspekte (hide toolbar/songs/share, disable inputs). JS-
   Guards (IS_READ_ONLY in app.js) sind defense-in-depth gegen Mutation. */

/* Read-Only-Banner: oben über Topbar (im DOM vor Topbar). Plain block, kein
   sticky weil Topbar selber sticky ist (Stacking-Konflikt vermieden — Banner
   ist initial-only visible, Topbar bleibt sichtbar beim Scrollen).

   Defensive `[hidden] { display: none !important }` zusätzlich zum HTML-
   Attribut — gleiches Pattern wie `#meta-host` (siehe oben Z. 949). Die
   `.read-only-banner { display: flex }`-Regel hat dieselbe Spezifität wie
   die UA-Regel `[hidden] { display: none }`, gewinnt aber via Author-Origin
   und würde das hidden-Attribut leer-laufen lassen → Banner war permanent
   sichtbar statt nur bei `?view=read-only`. */
.read-only-banner[hidden] { display: none !important; }
.read-only-banner {
  background: var(--bg-elevated);
  border-bottom: 2px solid var(--accent);
  padding: .65rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .9rem;
  color: var(--text);
}
.read-only-banner-text {
  font-style: italic;
  color: var(--text-muted);
}
.read-only-banner-import {
  padding: .45rem 1rem;
  background: var(--accent);
  color: var(--accent-on);
  border: none;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter .12s var(--ease);
}
.read-only-banner-import:hover {
  filter: brightness(1.05);
}
.read-only-banner-import:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Tech-Strip (Mobile-Floating-Toolbar) — Review-Korrektur W3:
   defense-in-depth zusätzlich zu .cell-pointer-events:none. */
body.is-read-only .tech-strip {
  display: none !important;
}

/* Print: Read-Only-Banner hidden — gedruckt wird der Tab wie ein normaler. */
@media print {
  .read-only-banner { display: none !important; }
}

/* ─── Welcome-Toast (Erstbesucher) ────────────────────────────────────────── */
.welcome-toast {
  position: fixed;
  bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  max-width: 26rem;
  width: calc(100% - 2rem);
  padding: 1rem 2.75rem 1rem 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  animation: toast-in .3s var(--ease) both;
}

.welcome-toast[data-closing] {
  animation: toast-out .2s var(--ease) both;
}

.welcome-headline {
  margin: 0 0 .2rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}

.welcome-body {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.welcome-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-subtle);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}

.welcome-close:hover {
  background: var(--bg-sunken);
  color: var(--text);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-toast,
  .welcome-toast[data-closing] { animation: none; }
}

@media (pointer: coarse) {
  .welcome-close {
    width: 44px;
    height: 44px;
    top: .25rem;
    right: .25rem;
  }
  .welcome-toast {
    padding-right: 3.25rem;
    /* Notched-iPhones (X+, 14 Pro etc.) haben einen Home-Indicator-Bar
       am unteren Rand. Bottom-Offset etwas erhöht (3.5rem statt 3rem),
       damit der Toast nicht hinter dem Indicator klebt. env(safe-area-
       inset-bottom) addiert den system-reservierten Pad. */
    bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ─── Print — immer schwarz auf weiß, theme-unabhängig ────────────────────── */
@media print {
  @page { margin: 1.5cm; }
  body {
    background: white !important;
    color: black !important;
  }
  .topbar, footer, .empty-hint, .welcome-toast { display: none !important; }
  /* Defensive: Falls beim Drucken ein chip-popover oder view-popover
     noch geöffnet ist (z.B. User druckt mit offenem BPM-Stepper),
     nicht mit aufs Blatt. */
  .chip-popover, .view-popover { display: none !important; }
  .tab-area {
    padding: 0;
    background: none;
  }
  .tab-page {
    --tz: 1 !important;            /* Pinch-Zoom-Override im Print zurücksetzen */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    width: 100%;
    max-width: none;
    overflow: visible;
    color: black;
    gap: 1.5rem;
  }

  /* Footer-Credit rechts unten: Logo + bytefret.com. Echte HTML-Elemente
     statt pseudo-element + background-image — Print-zuverlässig. Brand-
     Block oben wurde entfernt (User-Wunsch 2026-05-09: nur Title oben,
     Brand kommt unten rechts als dezenter Credit). */
  .print-credit {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 1.5rem;
    padding-top: .75rem;
    border-top: 1px solid #dcdcdc;
    font-family: system-ui, sans-serif;
    font-size: .8rem;
    letter-spacing: -.005em;
    color: #888;
  }
  .print-credit img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: .85;
  }

  /* Refinement B Phase 1 — Sheet-Header ist jetzt echtes DOM-Element
     (.sheet-header) statt Pseudo-Element auf .tab-page. Im Print bleibt
     er sichtbar (NICHT in der display:none-Liste oben), aber sw-styled:
     border/shadow weg, schwarz auf weiß, Music-Chips als dezente
     Grautext-Liste statt Pills. updatePrintTitle() ist mit B1 zu
     renderSheetHeader umbenannt + komplett neu (siehe app.js); die
     CSS-Variablen --print-title/--print-meta sind weggefallen, daher
     hier KEINE ::before/::after-Regeln mehr. */
  .sheet-header {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 .75rem !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid #dcdcdc !important;
    break-after: avoid;
    page-break-after: avoid;
    width: 100% !important;
  }
  .sheet-title-input {
    color: #111 !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    letter-spacing: -.012em !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
  }
  .sheet-byline {
    color: #555 !important;
    font-size: .92rem !important;
  }
  .sheet-byline-input {
    color: #555 !important;
    border: none !important;
    background: none !important;
  }
  .sheet-byline-input::placeholder { color: transparent !important; }
  .sheet-title-input::placeholder { color: transparent !important; }
  /* Hairline-Divider im Print ausblenden — der sheet-header hat schon
     einen border-bottom als visueller Separator vor der Tab-Page; eine
     zweite innere Hairline wäre redundant und linear-gradient hat
     unvorhersagbares Druckertreiber-Rendering. */
  .sheet-music-chips::before { display: none !important; }
  .music-chip {
    background: none !important;
    border: none !important;
    color: #555 !important;
    padding: 0 .5rem !important;
    font-size: .85rem !important;
  }
  .chip-glyph { opacity: 1 !important; color: #555 !important; }
  .chip-value { color: #111 !important; }

  .bar-numbers { color: #555 !important; opacity: 1; }
  .bar-numbers .bar-num { color: #333 !important; opacity: 1; }
  /* F6 — Chord-Line im Print: kein dashed-underline / background, schwarzer
     bold Text als Songbook-Standard. Implicit-Mode (Toggle off, aber Akkorde
     gesetzt) wird trotzdem gedruckt — User-Intent: Akkorde sind Daten, Toggle
     steuert nur die Editor-Sichtbarkeit. */
  .chord-line { color: #111 !important; opacity: 1 !important; font-weight: 700; }
  .chord {
    border: none !important;
    background: none !important;
    color: #111 !important;
  }
  .chord::placeholder { color: transparent !important; }

  /* A1 — Section-Line im Print: schwarzer bold uppercase Text, kein
     dashed-underline. Section-Marker bleiben als Navigations-Hilfe sichtbar
     (Songbook-Konvention für Verse/Chorus-Labels). */
  .section-line { color: #111 !important; opacity: 1 !important; font-weight: 700; letter-spacing: .05em; }
  .section {
    border: none !important;
    background: none !important;
    color: #111 !important;
    text-transform: uppercase;
  }
  .section::placeholder { color: transparent !important; }

  /* B7 — Print-Section-Brackets analog zu ASCII-Export ([Verse]). Brackets
     via ::before/::after auf .section-slot (span-Wrapper) — auf <input>
     direkt sind Pseudo-Elemente nicht spec-konform (replaced element).
     :has()-Selector limitiert auf gefüllte Slots, damit leere Slots keine
     leeren []-Brackets zeigen. ::before und ::after werden als flex-children
     vor und nach dem input inserted (slot ist inline-flex). */
  .section-line .section-slot:has(.section:not(:placeholder-shown))::before {
    content: '[';
    color: #111;
    font-weight: 700;
  }
  .section-line .section-slot:has(.section:not(:placeholder-shown))::after {
    content: ']';
    color: #111;
    font-weight: 700;
  }

  /* A6 — Palm-Mute / Let-Ring im Print: Standard-Tab-Notation
     `[P.M. ─ ─ ─ ┐]` über aktive Bars. Toggle-Buttons ausgeblendet, Editor-
     Run-Connector-Pseudos (absolute-positioned dashed lines) komplett
     zurückgesetzt. Print-Layout über border-top am Slot + ::before/::after
     für Bracket-Glyphs.

     Single-vs-Start/End-Architektur (Audit-Pass-Korrektur 2026-05-10):
     - SINGLE: NUR ::before mit '[P.M.]' (komplette Klammer in einem Glyph),
       ::after bleibt content:none → ein zentrales Flex-Item. Verhindert das
       Doppel-Bracket-Bug („[P.M.]]" durch separate ::before+::after).
     - START: ::before '[P.M.' linksbündig (margin-right: auto), ::after bleibt
       content:none. Border-top überstreicht ganzen Slot — visuell „Bracket
       am Anfang, Linie nach rechts weiter".
     - MID: keine Glyphs (beide Pseudos none), nur border-top über volle Breite.
     - END: ::before content:none, ::after ']' rechtsbündig (margin-left: auto).
       Border-top überstreicht Slot bis zur rechten Klammer.

     Border-top: Hairline (1px solid #555) statt dashed — drucker-robust
     (dashed-Linien fallen in Halftone-Rendering oft als komplette Lücken weg). */
  .pm-line, .lr-line {
    color: #111 !important;
    opacity: 1 !important;
    font-weight: 700;
  }
  .pm-toggle, .lr-toggle { display: none !important; }
  /* Editor-Pseudos abschalten. !important nötig: Editor-Selektoren sind
     data-run-attribute-spezifischer als unsere ungetag-ten Reset-Regeln. */
  .pm-slot::before, .pm-slot::after,
  .lr-slot::before, .lr-slot::after {
    content: none !important;
    border-top: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
  }
  /* Run-Decoration: nur start/mid/end bekommen border-top (single ist isoliert,
     braucht keine Linie). */
  .pm-slot[data-run="start"], .pm-slot[data-run="mid"], .pm-slot[data-run="end"],
  .lr-slot[data-run="start"], .lr-slot[data-run="mid"], .lr-slot[data-run="end"] {
    border-top: 1px solid #555;
    padding-top: 1px;
  }

  /* SINGLE: nur ::before mit kompletter `[P.M.]` Klammer, zentral platziert
     (slot ist justify-content: center). */
  .pm-slot[data-run="single"]::before {
    content: '[P.M.]' !important;
    color: #111;
    font-size: .75rem;
  }
  .lr-slot[data-run="single"]::before {
    content: '[let ring]' !important;
    color: #111;
    font-size: .7rem;
    font-style: italic;
  }

  /* START: '[P.M.' / '[let ring' linksbündig via margin-right:auto. */
  .pm-slot[data-run="start"]::before {
    content: '[P.M.' !important;
    color: #111;
    font-size: .75rem;
    margin-right: auto;
  }
  .lr-slot[data-run="start"]::before {
    content: '[let ring' !important;
    color: #111;
    font-size: .7rem;
    font-style: italic;
    margin-right: auto;
  }

  /* END: ']' rechtsbündig via margin-left:auto. */
  .pm-slot[data-run="end"]::after,
  .lr-slot[data-run="end"]::after {
    content: ']' !important;
    color: #111;
    font-size: .75rem;
    margin-left: auto;
  }

  /* Empty-Line-Collapse analog B6 — wenn Toggle on aber kein Bar aktiv
     (kein Slot hat data-run), die ganze Line nicht drucken. */
  .pm-line:not(:has(.pm-slot[data-run])) { display: none; }
  .lr-line:not(:has(.lr-slot[data-run])) { display: none; }

  /* B6 — Wenn Chord-/Section-Toggle on aber alle Slots leer (placeholder-
     shown), ganze Line verstecken statt visuelle Leerzeile zu drucken.
     :has()-Selector ab Chrome 105 / Safari 15.4 / Firefox 121 (alle ab
     2023, OK für 2026 baseline). Selector-Logik: wenn die Line KEIN
     einziges Slot mit gefülltem input enthält, display:none. */
  .chord-line:not(:has(.chord:not(:placeholder-shown))) {
    display: none;
  }
  .section-line:not(:has(.section:not(:placeholder-shown))) {
    display: none;
  }
  .string-label { color: #111 !important; }
  /* Bar-Trenner und Saiten-Linien hell-grau (#dcdcdc = Gainsboro, 86%):
     vier Iterationen User-Feedback "grau statt schwarz" / "heller". Auf
     diesem Niveau eindeutig als Light-Grey erkennbar, plus Halftone-
     Rendering greift zuverlässig auch auf Druckern mit grobem Dithering. */
  .bar-sep {
    color: #dcdcdc !important;
    font-weight: 400 !important;
  }
  .cell { background: transparent !important; color: black !important; box-shadow: none !important; }
  .string-row::after {
    background: #dcdcdc !important;
    opacity: 1 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Page-Break-Verhalten: bei langen Songs nicht mitten in einer Tab-Zeile
     umbrechen. break-inside ist modern, page-break-inside legacy fallback. */
  .tab-line {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Legal pages */
  .legal-area { padding: 0; }
  .legal-page {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    max-width: 100%;
    color: black !important;
  }
  .legal-page::before { display: none; }
  .legal-body h2,
  .legal-body h3,
  .legal-body h4 { color: black !important; }
  .legal-body h3 { border-bottom-color: #888 !important; }
  .legal-body p,
  .legal-body li,
  .legal-body strong { color: black !important; }
  .legal-body a { color: black !important; text-decoration: underline; }
  .legal-body code { background: #f0f0f0 !important; color: black !important; border-color: #ccc !important; }
  .legal-card { background: #f5f5f5 !important; border-color: #ccc !important; border-left-color: #555 !important; }
  .legal-card-eyebrow,
  .legal-card-address { color: #333 !important; }
  .legal-footer { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Distributed @media-Overrides (Phase 7c) — tech-strip Coarse-Activation
   ═══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  /* ─── Tab-Notation-Strip — über System-Keyboard ──────────────────────────
     flex-wrap: wrap statt overflow-x: auto. Alle Buttons immer sichtbar,
     kein Hidden-Affordance, kein Touch-Scroll-Konflikt mit Buttons.
     Auto-Layout: 1 Reihe auf Tablets (≥~600px), 2 Reihen auf typischen
     Phones (~360-420px), 3 Reihen auf sehr schmalen (<300px). */
  .tech-strip[data-active] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;       /* JS passt via visualViewport für iOS-Keyboard an */
    z-index: 30;
    padding: .5rem .5rem .45rem;
    padding-bottom: max(.45rem, env(safe-area-inset-bottom));
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .12);
  }

  .tech-strip button {
    flex: 0 0 auto;
    min-width: 44px;
    height: 44px;
    padding: 0 .55rem;
    font-family: "JetBrains Mono", "Fira Code", Menlo, monospace;
    font-size: 1.05rem;
    font-weight: 600;
    background: var(--bg-page);
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;       /* eliminiert Double-Tap-Zoom-Delay */
    -webkit-tap-highlight-color: transparent;
    transition: background .12s var(--ease), border-color .12s var(--ease), transform .08s var(--ease);
  }
  .tech-strip button:active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(.94);
  }
  /* Visuelle Gruppen-Trennung — etwas mehr Air zwischen Gruppen */
  .tech-strip button.strip-sep { margin-left: .5rem; }
  /* Nav-Buttons (← →) farblich abheben */
  .tech-strip button.strip-nav {
    color: var(--accent);
    font-size: 1.25rem;
    font-weight: 700;
    background: transparent;
    border-color: transparent;
  }
  .tech-strip button.strip-nav:active {
    background: var(--accent-soft);
    border-color: var(--accent);
  }
}