/* ════════════════════════════════════════════════════════════════════════════════════════════
   MELOGNITE — A' LAYOUT (v3: Nacht-Runde 05.08. — Lesbarkeit, Tap-Hinweis, Paint-Diaet)
   gehoert zu melognite-a2.js. Nur aktiv unter ?a2=1. Erbt Farben aus der Skin (var(--acc)/--txt/
   --ln/--hnt) — jedes Genre behaelt seine Handschrift. PAINT-DIAET: keine text-shadows,
   deckende Flaechen statt Transluzenz (i7: a2 muss unter Wiedergabe unsichtbar billig sein).
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── ⭐ KRITISCHER FIX (05.08., Owner-Befund "scrollen zerstoert den Song"): content-visibility
   greift laut profile.css NUR fuer DIREKTE .unit-Kinder (`.unit > .panel`, `.unit > details.adv`).
   a2 verschiebt Panels/Aufklapper aber eine Ebene tiefer in <details class="a2-fold"> hinein ->
   bei GEOEFFNETEN Folds (Song/Generation Parameters/Seed & History — genau die Screenshots)
   greift die Optimierung nicht mehr: der Inhalt wird ausserhalb des Sichtfensters weiter voll
   gerendert statt uebersprungen -> echte Dauerlast waehrend des Scrollens. Ein Rahmen um den
   GESAMTEN Fold-Container schuetzt Inhalt jeder Tiefe, offen oder zu, ohne jede verschachtelte
   Stelle einzeln nachzuziehen. */
html.mgn-cv .unit > .a2-fold{
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* ── Kopfzeile: Icon + GENRENAME | (Spring) | Performance (2-zeilig) | Plan (2-zeilig) ─────── */
.a2-head{
  display: flex; align-items: stretch;
  gap: calc(var(--u, 1px) * 6);
  margin: 0 0 calc(var(--u, 1px) * 10);
  padding: calc(var(--u, 1px) * 7) calc(var(--u, 1px) * 8);
  border: 1px solid var(--ln, rgba(255,255,255,.14));
  border-radius: calc(var(--u, 1px) * 9);
  background: var(--surf, rgba(0,0,0,.16));
}
.a2-spring{ flex: 1 1 auto; }
.a2-genre{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; flex: 0 0 auto; align-self: center; height: 34px;
  border-radius: calc(var(--u, 1px) * 7);
  color: var(--acc, #d8a24a);
  background: var(--surf2, rgba(255,255,255,.06));
}
.a2-genre svg{ display: block; }
/* 07.08. abends (Eigentuemer): das Wappen war ZU DUNKEL -- heller und klar orange-rot. */
.a2-genre img{ width:26px; height:26px; filter: brightness(0) invert(52%) sepia(90%) saturate(5000%) hue-rotate(-20deg) brightness(1.15); }
/* 07.08. abends (Eigentuemer): Beschriftung zweizeilig neben dem Logo. Typografie
   gespiegelt von den Performance/Plan-Knoepfen: MELOGNITE = small-Groesse,
   Genrename = b-Groesse. Gilt fuer alle Genres. */
.a2-titles{
  display: flex; flex-direction: column; justify-content: center;
  gap: 3px; align-self: center; min-width: 0;
}
.a2-brand{
  font: 600 10px/1 var(--body-f, system-ui, sans-serif);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lab, #cfc7ba); opacity: .8;
  white-space: nowrap;
}
.a2-gname{
  font: 700 14px/1 var(--display, system-ui, sans-serif);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc, #d8a24a);
  white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* Nacht-Runde: REGGAE in den Reggae-Farben (gruen/gold/rot), edel via Text-Clip — statischer Paint. */
html[data-genre="reggae"] .a2-gname{
  background: linear-gradient(90deg, #2e7d3f 0 34%, #d9a112 34% 67%, #b3402a 67% 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.a2-perf, .a2-plan{
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 44px; min-width: 0; flex: 0 1 auto;
  padding: 5px 10px;
  border-radius: calc(var(--u, 1px) * 7);
  border: 1px solid var(--ln, rgba(255,255,255,.20));
  background: rgba(0,0,0,.28);
  color: var(--lab, #cfc7ba);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.a2-perf small, .a2-plan small{
  font: 600 10px/1 var(--body-f, system-ui, sans-serif);
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .8;
}
.a2-perf b, .a2-plan b{
  font: 700 14px/1 var(--display, system-ui, sans-serif);
}
.a2-plan{ border-color: var(--acc, #d8a24a); }
.a2-plan b{ color: var(--acc, #d8a24a); }
.a2-perf:focus-visible, .a2-plan:focus-visible{ outline: 2px solid var(--acc, #d8a24a); outline-offset: 2px; }

/* ── Eingeklappte Abschnitte: SCHMAL, deckend (Paint-Diaet), lesbar ────────────────────────── */
.a2-fold{
  margin: calc(var(--u, 1px) * 6) 0;
  border: 1px solid var(--ln, rgba(255,255,255,.14));
  border-radius: calc(var(--u, 1px) * 8);
  overflow: hidden;
  background: #14100b;
}
.a2-fold > summary{
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; max-height: 46px;
  padding: 0 calc(var(--u, 1px) * 12);
  font: 700 12.5px/1.2 var(--display, system-ui, sans-serif);
  letter-spacing: .06em;
  color: var(--lab, #d9c48c);
  background: #191309;
  /* ⚠ 10.08.: die BESCHRIFTUNG ist ein blosser Textknoten und damit ein anonymes
     Flex-Element -- nicht ansprechbar, `flex: 0 1 auto`, es schrumpfte unter seine
     Inhaltsbreite und brach um; `max-height` schnitt die Zeilen dann ab (gemessen bei
     427 px: "Volumes / Backing Tracks" ueber VIER Zeilenkaesten in 46 px Hoehe).
     `white-space` vererbt sich -- nowrap hier haelt den Titel einzeilig. Der kursive
     Hinweis darf dafuer schrumpfen (Regel weiter unten): er wiederholt nur den ▸-Pfeil. */
  white-space: nowrap;
}
.a2-fold > summary::-webkit-details-marker{ display: none; }
.a2-fold > summary::before{
  content: '▸'; color: var(--acc, #d8a24a);
  font-size: 12px;
}
.a2-fold[open] > summary::before{ content: '▾'; }
/* Nacht-Runde: kursiver Hinweis in der Akzentfarbe; offen -> weg.
   06.08.: Schreibweise "Tap to unfold" wie vom Eigentuemer notiert. */
.a2-fold > summary::after,
[data-mgn-a2="1"] details.adv > summary::after{
  content: 'Tap to unfold';
  margin-left: auto;
  font: italic 600 10px/1 var(--body-f, system-ui, sans-serif);
  letter-spacing: .08em;
  color: var(--acc, #d8a24a);
  opacity: .85;
  /* Der Titel hat Vorrang: der Hinweis schrumpft und endet notfalls mit Auslassung. */
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* ⚠ 06.08.: Song Forms / Generation Parameters / Seed & History tragen jetzt selbst die Klasse
   `a2-fold` (Gleichrangigkeit der fuenf Menues). Damit bekommen sie den ::before-Pfeil dieses
   Moduls -- und haetten daneben noch ihren SKIN-EIGENEN Pfeil `<span class="chev">▸</span>`.
   Zwei Pfeile nebeneinander; der Skin-Pfeil dreht sich beim Oeffnen ausserdem nicht mit. */
[data-mgn-a2="1"] .a2-fold > summary .chev{ display: none !important; }
.a2-fold[open] > summary::after,
[data-mgn-a2="1"] details.adv[open] > summary::after{ content: ''; }
.a2-fold[open] > :not(summary){ margin-top: calc(var(--u, 1px) * 4); }

/* Punkt 7: die inneren Aufklapper (Generation Parameters &c.) im selben Stil. */
[data-mgn-a2="1"] details.adv > summary{
  min-height: 40px;
  padding: 0 calc(var(--u, 1px) * 12);
  display: flex; align-items: center; gap: 8px;
  font: 700 12.5px/1.2 var(--display, system-ui, sans-serif);
  letter-spacing: .06em;
  color: var(--lab, #d9c48c) !important;
  background: #191309 !important;
  border-radius: calc(var(--u, 1px) * 7);
  /* ⚠ 06.08.: Die Skin setzt auf `.adv > summary` ein `text-transform:uppercase`. Seit die drei
     vorhandenen Aufklapper mit den beiden neuen auf EINER Ebene stehen, fiel das als Bruch auf:
     "Volumes / Backing Tracks" und "Performance" gemischt, die drei anderen in Grossbuchstaben --
     inklusive des Hinweises, der dadurch als "TAP TO UNFOLD" erschien. Gemessen war alles andere
     identisch (Clash Display, 12.5px, 700, 0.75px Sperrung); nur diese eine Eigenschaft wich ab.
     Der Eigentuemer hat die fuenf Namen gemischt geschrieben -- also gilt gemischt fuer alle.
     "Gleichwertig" heisst auch typografisch gleich. */
  text-transform: none !important;
}

/* Punkt 6: Song-Form-Flaechen lesbar auf dunkler Flaeche.
   ⚠ KORREKTUR 06.08. (Eigentuemer-Screenshot pop): `var(--lab)` ist in POP eine DUNKLE Tinte
   (helles Genre) -- auf der hier erzwungenen dunklen Flaeche #1a140c war die Beschriftung
   unlesbar (gemessen rgb(92,83,68) auf rgb(26,20,12)). Da die FLAECHE fuer alle Genres fest
   dunkel ist, muss auch die SCHRIFT fest hell sein, nicht skin-abhaengig. */
[data-mgn-a2="1"] .fbtn{
  background: #1a140c !important;
  color: #e8dcc4 !important;
  border: 1px solid rgba(201,164,74,.25) !important;
  text-shadow: none !important;
}
[data-mgn-a2="1"] .fbtn.on{
  background: var(--grad, #b97e14) !important;
  color: #fff !important;
  border-color: transparent !important;
}
[data-mgn-a2="1"] .fbtn small, [data-mgn-a2="1"] .fbtn .fdesc{ color: inherit !important; opacity: .82; }

/* Punkt 8: das alte Plan-Panel entfaellt im A'-Fluss. */
.a2-weg{ display: none !important; }

/* ── Punkt 3 (Eigentuemer-Anmerkung 06.08.): Transport = EINE Reihe, VIER gleich grosse Zellen ─
   Play | Stop | Export | Reset-Doppel. Die vierte Zelle ist genauso gross wie Export und
   HORIZONTAL GETEILT: oben Reset UI, unten Reset Audio.

   ⚠ RUECKNAHME der 3-Zeilen-Loesung vom 05.08. ("nimmt zuviel Platz weg"). Damals war der
   Anlass ein RISS in der Bild-Textur: `.tbar` trug je Genre-Skin ein `background:url(...)`,
   das fuer die alte, ungleiche Original-Proportion gezeichnet war und an einer 4-Spalten-
   Aufteilung sichtbar auseinanderlief.
   ⚠⚠ WARUM DER RISS JETZT NICHT ZURUECKKEHRT: die Ursache war nicht die Spaltenzahl, sondern
   das BILD. Die beiden Zeilen `background: rgba(0,0,0,.2)` + `background-image: none` unten
   ersetzen es durch eine flaechige Farbe -- und eine Farbflaeche kann bei keiner Aufteilung
   reissen. Diese zwei Zeilen sind der Riss-Schutz und duerfen nicht entfallen.
   Play/Stop/Export behalten ihre eigene Foto-Tastenfront (Genre-Identitaet unangetastet, nur
   der TBAR-Rahmen darunter ist Farbe). ax=transport schaltet fuer Bisect ab. */
body:not(.ax-transport) [data-mgn-a2="1"] .tbar{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: calc(var(--u, 1px) * 6) !important;
  align-items: stretch;
  background: rgba(0,0,0,.2) !important;   /* Riss-Schutz 1/2: Farbe statt Textur */
  background-image: none !important;       /* Riss-Schutz 2/2: das Bild bleibt draussen */
  border: 1px solid var(--ln, rgba(255,255,255,.14)) !important;
  border-radius: calc(var(--u, 1px) * 10) !important;
  padding: calc(var(--u, 1px) * 6) !important;
  box-shadow: none !important;
}
body:not(.ax-transport) [data-mgn-a2="1"] .tbar #play,
body:not(.ax-transport) [data-mgn-a2="1"] .tbar #stop,
body:not(.ax-transport) [data-mgn-a2="1"] .tbar #dl{
  grid-row: 1; width: 100%; min-height: 58px;
}
/* Die vierte Zelle: EIN Knopf-Platz in Exportgroesse, innen horizontal geteilt.
   ⚠ KEIN display:contents mehr -- das loeste die beiden Knoepfe frueher zu eigenen Grid-Zellen
   auf (dafuer brauchte es die drei Zeilen). Als eigene Zelle bleiben sie zusammen. */
body:not(.ax-transport) [data-mgn-a2="1"] .tbar .tbtnstack{
  display: flex !important;
  flex-direction: column !important;
  grid-row: 1; grid-column: 4;
  width: 100%; min-height: 58px;
  gap: calc(var(--u, 1px) * 4) !important;
}
body:not(.ax-transport) [data-mgn-a2="1"] .tbar .tbtnstack .tbtn-stk{
  flex: 1 1 0 !important;                  /* obere und untere Haelfte exakt gleich hoch */
  width: 100% !important; height: auto !important;
  min-height: 0 !important;                /* sonst sprengen zwei 30px-Mindesthoehen die Reihe */
  min-width: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  padding: 2px 4px !important;
  line-height: 1.1 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* 06.08. (Eigentuemer: "Resetbutton nicht lesbar"): die Reset-Beschriftung erbte je Skin
     eingravierte/dunkle Farben auf dunkler Chip-Flaeche. Feste dunkle Flaeche + feste helle
     Schrift, wie bei den Song-Form-Flaechen -- lesbar in JEDER Skin, auch auf pop-Creme. */
  background: #241a0e !important;
  background-image: none !important;
  color: #f2e8d0 !important;
  text-shadow: none !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: calc(var(--u, 1px) * 7) !important;
}
/* 06.08. (Eigentuemer-Screenshot housednb: "keine gleichartige Menueumrandung"): die von a2
   selbst gebauten Folds trugen var(--ln) (in housednb nur alpha .16), die uebernommenen
   details.adv den staerkeren Skin-Rand (.3) -- ungleich. EIN fester, warm-neutraler Rand fuer
   ALLE fuenf Menues, sichtbar auf dunklen wie hellen Skins. */
.unit[data-mgn-a2="1"] > .a2-fold{
  border: 1px solid rgba(158,136,92,.45) !important;
}

/* ── Nacht-2: Sing./Acc.-Schalter + Bass/Drums/Synth-Umschalter cremefarben, stilkontrastreich ─
   Owner-Fund (Pop): diese Kontrollen wurden fuer einen HELLEN Panel-Untergrund gezeichnet
   (hartkodiert dunkler Text); der A'-Fold-Hintergrund ist aber bewusst dunkel (Reggae-Vorbild).
   Fix: eigene creme Flaeche NUR fuer diese Kontrollen, mit stilfarbener (var(--acc)) Beschriftung
   -- "kontrastreich im Stildesign", wie vom Eigentuemer verlangt. */
[data-mgn-a2="1"] .mvsw-wrap{
  background: #f2ead9 !important;
  border-radius: 999px !important;
  padding: 4px 11px !important;
  box-shadow: none !important;
}
[data-mgn-a2="1"] .mvl{ text-shadow: none !important; }
[data-mgn-a2="1"] .mvsw-wrap .mvl-l{ color: #2a2013 !important; }
[data-mgn-a2="1"] .mvsw-wrap .mvl-r{ color: #8a7a5c !important; }
[data-mgn-a2="1"] .mvsw-wrap.acc .mvl-l{ color: #8a7a5c !important; }
[data-mgn-a2="1"] .mvsw-wrap.acc .mvl-r{ color: #2a2013 !important; }
[data-mgn-a2="1"] .sscyc{
  background: #f2ead9 !important;
  color: var(--acc, #7a5aa8) !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  font-weight: 800 !important;
}
[data-mgn-a2="1"] .sscyc:hover{ color: var(--acc, #7a5aa8) !important; border-color: rgba(0,0,0,.3) !important; }

/* ⭐ REPARATUR 06.08. (Eigentuemer: reggae-next "Umschalter fuer Drums/Bass/Synth immer noch
   unlesbar, helle Schrift auf hellem Grund" UND techno-next/housednb "Beschriftungen fuer
   Bass-/Drum-/Synth-Wechsel zu hell, nicht lesbar" -- DERSELBE Fehler, eine Ursache):

   Die Regel oben faerbt `.sscyc` SELBST creme (#f2ead9). Der sichtbare Text steht aber nicht im
   Knopf, sondern in einzelnen <span>-Kindern (ein span je Buchstabe, r021: Wort vertikal), und
   die Skin faerbt genau die: `.sscyc span{ color:#efe4c8 !important }` -- ebenfalls CREME.
   Ergebnis: creme Schrift auf cremefarbener Flaeche. Deshalb hat der Cremefarben-Fix vom 05.08.
   dort "nicht gegriffen" -- er hat die Flaeche erwischt, nie den Text.

   ⚠ Die Skin-Regel steht in der instanz-eigenen <style>-Insel und traegt !important. Ein
   schlichtes `.sscyc span` (0,1,1) verliert dagegen nicht, aber `.sscyc:hover span` (0,2,1)
   wuerde bei Gleichstand ueber die Quellreihenfolge gewinnen -- darum der Zeigezustand hier
   ausdruecklich mit hoeherer Spezifitaet (0,3,1). Farbe = dieselbe dunkle Tinte, die dieses
   Modul schon fuer die uebrigen Creme-Flaechen nutzt (Kontrast ~13:1 auf #f2ead9). */
[data-mgn-a2="1"] .sscyc span{ color: #2a2013 !important; }
[data-mgn-a2="1"] .sscyc:hover span,
[data-mgn-a2="1"] .sscyc:focus-visible span{ color: #14100b !important; }
/* ⚠ AUSNAHME 06.08. (Eigentuemer-Screenshot hiphop): die R38-Zyklus-Schalter dort bestehen aus
   Beschriftungs-Platte (.scl, auf creme -> dunkle Tinte RICHTIG) und LCD-WERTEFENSTER (.scv,
   auf dunklem LCD-Grund rgb(8,16,8) -> meine dunkle Tinte machte den Wert UNSICHTBAR).
   Das Fenster bekommt LCD-Gruen zurueck -- hoehere Spezifitaet als die span-Regel oben. */
[data-mgn-a2="1"] .sscyc span.scv{ color: #8dffb0 !important; }
[data-mgn-a2="1"] .sscyc:hover span.scv{ color: #b8ffd0 !important; }

/* Punkt 3: Pause-Zustand = zwei GRUENE Balken auf dem Play-Schild. */
[data-mgn-a2="1"] #play{ position: relative; }
[data-mgn-a2="1"] #play.ppaused .ic{ visibility: hidden; }
[data-mgn-a2="1"] #play.ppaused::after{
  content: '❚❚';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #39d67a;
  font: 800 22px/1 var(--mono, monospace);
  pointer-events: none;
}

/* 07.08.: derselbe Spezifitaets-Schutz fuer das Kopfzeilen-Wappen (s. splash-light.css).
   07.08. abends: heller + orange-rot (Eigentuemer: "zu dunkel"). */
html[class][class][class][class] .a2-genre img{
  filter: brightness(0) invert(52%) sepia(90%) saturate(5000%) hue-rotate(-20deg) brightness(1.15) !important;
}