/* ─────────────────────────────────────────────
   PANE PIANO — bouton PIANO | SYNTH + panneau SYNTH (Minimoog Model D)
   Construit par src/ui/moog-pane.js. Préfixes pm- / mg-.
   v2 (2026-09-26) : le panneau réutilise les composants de l'appli
   (.knob-body / .knob-mark / .knob-value, .pitch-btn / .on, pastilles de
   section façon onglet MASTER) → mêmes boutons, même police (Share Tech
   Mono héritée de .machine), thèmes clair ET sombre sans règle dédiée.
   Les boutons de l'EN-TÊTE copient ceux de leurs voisins (ROLL, CLEAR REC).
   ───────────────────────────────────────────── */

/* ── En-tête : boutons au style de ROLL / WAVE / LOOP ── */
.pm-seg { display: inline-flex; flex-shrink: 0; gap: 0; }
.pm-seg-btn, .mg-pbtn {
  background: #2a2b30; border: 1px solid #4a4b50; color: #a0a0a8; font-family: inherit;
  font-size: 11px; letter-spacing: 0.12em; padding: 4px 9px; border-radius: 2px; cursor: pointer; line-height: 1.2;
}
.pm-seg-btn:first-child { border-radius: 2px 0 0 2px; }
.pm-seg-btn + .pm-seg-btn { border-left: none; border-radius: 0 2px 2px 0; }
.pm-seg-btn.on { background: #2a1f10; border-color: #ff9440; color: #ff9440; }
.pm-seg-btn + .pm-seg-btn.on { border-left: 1px solid #ff9440; margin-left: -1px; }
/* PIANO | MOOG | PRO M | E-PIANO : seul le dernier bouton VISIBLE (.pm-end, posé
   par ui/moog-pane.js — PRO M et E-PIANO sont masqués hors admin) est arrondi à droite */
#piano-mode-seg .pm-seg-btn + .pm-seg-btn { border-radius: 0; }
#piano-mode-seg .pm-seg-btn.pm-end { border-radius: 0 2px 2px 0; }
/* 4 boutons visibles (admin : PRO M + EP) : plus serré, sinon l'en-tête du pane
   passe sur deux lignes dès qu'une piste a des notes (badge ⏺ N NOTES) */
#piano-mode-seg.pm-4 .pm-seg-btn { padding: 4px 6px; letter-spacing: 0.06em; }
.pm-seg-btn:hover:not(.on), .mg-pbtn:hover { color: #d8d0c0; }
.mg-pbtn { padding: 4px 7px; }

/* ── Pistes PIANO P1..P4 (ui/pno-tracks.js) — même segment que PIANO | SYNTH ;
   trait de couleur sous une piste qui a des notes enregistrées ── */
/* écart + filet vertical entre les synthés (PIANO | MINI M | PRO M | EP) et
   les pistes P1..P4, pour qu'on ne les lise pas comme un seul segment ;
   desktop seulement (mobile : ligne 1 déjà au ras des 360 px) */
html:not(.sd-mobile) .pno-seg { position: relative; margin-left: 12px; }
html:not(.sd-mobile) .pno-seg::before {
  content: ''; position: absolute; left: -11px; top: 3px; bottom: 3px; width: 1px;
  background: #4a4b50; pointer-events: none;
}
.pno-seg .pm-seg-btn { padding: 4px 5px; letter-spacing: 0.06em; position: relative; }
.pno-seg .pm-seg-btn + .pm-seg-btn { border-radius: 0; }
.pno-seg .pm-seg-btn:last-child { border-radius: 0 2px 2px 0; }
.pno-seg .pm-seg-btn.has::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 1px; height: 2px;
  border-radius: 1px; background: var(--pno-c, #cc88ff); pointer-events: none;
}
.mg-psave { color: #ff9440; border-color: #ff944066; background: #1a0e08; margin-left: 2px; }

/* ── Sélecteur de preset (même look que le menu BANK du piano) ── */
.mg-preset { display: flex; align-items: center; gap: 2px; position: relative; }
.mg-pname, .mg-name-input {
  background: #1e1e26; border: 1px solid #3a3a42; color: #c8c0b0; font-family: inherit;
  font-size: 10px; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 3px;
  width: 132px; height: 22px; box-sizing: border-box; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.mg-pname:hover { border-color: #ff9440; }
.mg-pname.edited { color: #ff9440; }
.mg-name-input { cursor: text; color: #ffcf87; border-color: #ff9440; outline: none; text-transform: uppercase; }
.mg-pmenu {
  position: absolute; top: calc(100% + 3px); left: 0; z-index: 50; width: 260px; max-height: 270px; overflow-y: auto;
  background: #16161e; border: 1px solid #3a3a42; border-radius: 3px;
  box-shadow: 0 4px 16px #00000099; padding-bottom: 6px;
  scrollbar-width: thin; scrollbar-color: #ff7a1a66 #16161e;
}
.mg-pm-group {
  font-size: 9px; letter-spacing: 0.16em; color: #ff9440; padding: 9px 11px 3px;
  border-top: 1px solid #26262e; position: sticky; top: 0; background: #16161e;
}
.mg-pm-item {
  display: flex; gap: 8px; align-items: baseline; padding: 4px 11px; cursor: pointer;
  font-size: 11px; color: #d8d0c0; border-left: 2px solid transparent;
}
.mg-pm-item .n { color: #6f665b; font-size: 9px; min-width: 16px; font-variant-numeric: tabular-nums; }
.mg-pm-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-pm-item .x { color: #6f665b; font-size: 10px; padding: 0 2px; }
.mg-pm-item .r { color: #6f665b; font-size: 11px; padding: 0 2px; }
.mg-pm-item .r:hover { color: #ff9440; }
.mg-name-input.mg-rename { flex: 1; width: auto; min-width: 0; height: 20px; }
.mg-pm-item .x:hover, .mg-pm-item .x.sure { color: #ff3030; }
.mg-pm-item:hover { background: #24242e; }
.mg-pm-item.on { background: #2a2038; border-left-color: #ff9440; color: #ffcf87; }
.mg-pm-act { color: #ff9440; letter-spacing: 0.08em; font-size: 10px; padding: 7px 11px; border-bottom: 1px solid #26262e; }
.mg-pm-empty { font-size: 10px; color: #6f665b; padding: 3px 11px 6px; letter-spacing: 0.04em; }

/* ── Panneau ── */
.mg-synth {
  height: 276px; display: flex; flex-direction: column; gap: 4px;
  box-sizing: border-box; user-select: none; -webkit-user-select: none;
}
.mg-panel { flex: 1; min-height: 0; display: flex; gap: 4px; }
.mg-sec {
  flex: 4 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: stretch;
  border: 1px solid var(--border-color); border-radius: 6px;
  background: rgba(0, 0, 0, 0.1); padding: 4px 2px 2px; box-sizing: border-box;
}
.mg-sec.mg-mix { flex: 3.2 1 0; }
.mg-sec:last-child { flex: 2 1 0; }
/* Façades en bois — MINI M (Model D : joues en noyer, panneau brun chaud) et
   PRO M (Prophet-5 : joues en bois blond, panneau anthracite, titres et liserés
   dorés) au lieu du noir de la machine. EP inchangé. Couleurs FIXES (pas de
   variable de thème) : le panneau reste le même en skin clair et sombre, donc
   les étiquettes passent en crème via --text-knob local, et les touches grises
   (.pitch-btn éteint) sont assombries (sinon le gris clair du skin clair les
   délave). */
#moog-wrap:not(.mg-ep) .mg-synth {
  position: relative; padding: 6px 22px 7px; border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.4);
}
#moog-wrap:not(.mg-ep) .mg-synth::before,
#moog-wrap:not(.mg-ep) .mg-synth::after { content: ""; position: absolute; top: 0; bottom: 0; width: 16px; pointer-events: none; }
#moog-wrap:not(.mg-ep) .mg-synth::before { left: 0; border-radius: 6px 0 0 6px; box-shadow: inset -1px 0 0 rgba(0,0,0,0.5); }
#moog-wrap:not(.mg-ep) .mg-synth::after { right: 0; border-radius: 0 6px 6px 0; box-shadow: inset 1px 0 0 rgba(0,0,0,0.5); }
/* MINI M */
#moog-wrap:not(.mg-prom):not(.mg-ep):not(.mg-juno) .mg-synth {
  --text-knob: #ece3d0; --border-color: #5e4c3e;
  --btn-light: #6a6158; --surface-mid: #3a332d; --btn-shadow: #1a1410;
  background: #3a2d23;
}
#moog-wrap:not(.mg-prom):not(.mg-ep):not(.mg-juno) .mg-synth::before,
#moog-wrap:not(.mg-prom):not(.mg-ep):not(.mg-juno) .mg-synth::after {
  background:
    repeating-linear-gradient(90deg, rgba(40,16,4,0.28) 0 1px, transparent 1px 3px, rgba(255,214,170,0.10) 3px 4px, transparent 4px 7px, rgba(40,16,4,0.18) 7px 8px, transparent 8px 11px),
    linear-gradient(90deg, #6b3a1a 0%, #9a5d2c 30%, #8a4f24 60%, #6a3818 100%);
}
#moog-wrap:not(.mg-prom):not(.mg-ep):not(.mg-juno) .mg-sec { background: #44352a; }
/* PRO M */
#moog-wrap.mg-prom .mg-synth {
  --text-knob: #ece6d6; --border-color: #8a7440;
  --btn-light: #605d58; --surface-mid: #33312e; --btn-shadow: #121110;
  background: #262523;
}
#moog-wrap.mg-prom .mg-synth::before,
#moog-wrap.mg-prom .mg-synth::after {
  background:
    repeating-linear-gradient(90deg, rgba(60,30,8,0.22) 0 1px, transparent 1px 3px, rgba(255,230,190,0.12) 3px 4px, transparent 4px 7px, rgba(60,30,8,0.14) 7px 8px, transparent 8px 11px),
    linear-gradient(90deg, #8a5a2c 0%, #c08a4e 30%, #b07a40 60%, #855226 100%);
}
#moog-wrap.mg-prom .mg-sec { background: #2d2c29; }
#moog-wrap.mg-prom .mg-sectitle { background: #d9b870; color: #1a1408; }
/* Onglets de section (CTRL/OSC/MIX/FILTER/OUT) : mode téléphone uniquement
   (styles/mobile-machine.css les affiche) — en desktop les 5 sections restent
   côte à côte. */
.mg-stabs { display: none; }
.mg-sectitle {
  align-self: center; font-size: 9px; letter-spacing: 0.12em; font-weight: 700; line-height: 1.3;
  color: #1a1612; background: #d8d4cc; padding: 1px 6px 0; border-radius: 3px; white-space: nowrap;
}
.mg-grid { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
/* alignées en HAUT : étiquettes des knobs, boutons et molettes sur une même ligne */
.mg-cell { display: flex; align-items: flex-start; justify-content: center; min-width: 0; min-height: 0; padding-top: 5px; }
.mg-mixcell { gap: 4px; align-items: flex-start; }

/* knob de l'appli, format compact */
.mg-k { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mg-klabel { font-size: 8.5px; letter-spacing: 0.06em; color: var(--text-knob); white-space: nowrap; line-height: 1.1; }
/* Knob façon Davies 1900H (Minimoog) : bakélite noire mate, jupe + capuchon,
   trait blanc qui traverse les deux. Remplace le MPC de controls.css ici. */
.knob-body.mg-kbody {
  width: 28px; height: 28px;
  background: #2a2a2d; border: 1px solid #0c0c0d;
  box-shadow: 0 1px 2px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.07);
}
.knob-body.mg-kbody::before {
  inset: 4px;
  background: linear-gradient(170deg, #3c3c40 0%, #2a2a2d 55%, #202022 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
}
.knob-body.mg-kbody .knob-mark { top: 1px; height: 12px; width: 2px; margin-left: -1px; background: #ece9e1; }
.knob-body.mg-kbody.lit { border-color: #0c0c0d; }
.knob-body.mg-kbody.lit .knob-mark { background: var(--accent-bright); }
/* PRO M — knob façon Prophet-5 : noir, cylindrique, bord finement strié, dessus
   plat, trait blanc PEINT du centre au bord (pas de jupe ni de capuchon comme
   le Davies du Moog, pas de halo). */
#moog-wrap.mg-prom .knob-body.mg-kbody {
  background: repeating-conic-gradient(#141416 0 6deg, #2c2c30 6deg 12deg);
  border: 1px solid #060607;
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
#moog-wrap.mg-prom .knob-body.mg-kbody::before {
  inset: 3px;
  background: #202023;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
}
#moog-wrap.mg-prom .knob-body.mg-kbody .knob-mark { top: 2px; height: 12px; width: 2px; margin-left: -1px; background: #f2f0ea; }
#moog-wrap.mg-prom .knob-body.mg-kbody.lit .knob-mark { background: var(--accent-bright); }
.mg-kval.knob-value { font-size: 9px; min-height: 9px; line-height: 1; }
.mg-klabel { letter-spacing: 0.03em; }
.mg-k.mg-off { opacity: 0.35; }

/* interrupteur = .pitch-btn de l'appli, format compact */
.mg-t { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pitch-btn.mg-tbtn { height: 18px; padding: 0 5px; min-width: 38px; font-size: 9px; letter-spacing: 0.08em; margin-top: 6px; white-space: nowrap; }
/* PRO M : interrupteurs empilés dans une case (formes d'onde, destinations) */
.mg-cell.mg-stack { flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding-top: 8px; }
.mg-t.mg-tc .pitch-btn.mg-tbtn { margin-top: 0; height: 16px; }
.mg-oscname .mg-t.mg-tc .pitch-btn.mg-tbtn { margin-top: 3px; }
.mg-mixcell .pitch-btn.mg-tbtn { min-width: 30px; }

/* nom d'oscillateur (+ KBD sous OSC 3) */
.mg-oscname { flex-direction: column; align-items: center; gap: 1px; }
.mg-oscname .mg-oscn { margin-top: 20px; }
.mg-oscn { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-knob); white-space: nowrap; }
.mg-ref { margin-top: 20px; font-size: 8.5px; letter-spacing: 0.1em; color: var(--text-knob); opacity: 0.45; }

/* molettes PITCH / MOD */
.mg-wh { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mg-whtrack {
  position: relative; width: 16px; height: 40px; border-radius: 4px; cursor: ns-resize; touch-action: none;
  border: 1px solid var(--border-color);
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0.25) 0 2px, rgba(255,255,255,0.05) 2px 5px), var(--surface-mid, #2a2b30);
}
.mg-whthumb {
  position: absolute; left: 1px; right: 1px; height: 8px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-bright, #ff9440), var(--accent, #ff7a1a));
  box-shadow: 0 0 6px rgba(255, 122, 26, 0.6);
}

/* ── Mini clavier (3 octaves, suit OCT) — couleurs du clavier 88 touches ── */
.mg-kbd {
  position: relative; height: 46px; flex-shrink: 0; display: flex;
  background: #0a0a0c; border: 1px solid #1a1a2a; border-radius: 4px; overflow: hidden;
  touch-action: none; cursor: pointer;
}
.mg-kbd .mg-w {
  flex: 1; position: relative; border: 1px solid #888; border-top: 0; border-right: none;
  background: linear-gradient(180deg, #d8d4cc 0%, #c0bcb4 70%, #a8a4a0 100%);
}
.mg-kbd .mg-w.down { background: linear-gradient(180deg, #8ad4ff 0%, #4a90cc 100%); }
.mg-kbd .mg-b {
  position: absolute; top: 0; height: 60%; z-index: 2; border: 1px solid #0a0a0c; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #1a1a20 0%, #0e0e14 100%);
}
.mg-kbd .mg-b.down { background: linear-gradient(180deg, #4a9fff 0%, #1a3a7a 100%); }
.mg-kbd .mg-c {
  position: absolute; bottom: 2px; left: 0; right: 0; text-align: center;
  font-size: 8px; font-weight: 700; color: #4a9fff; letter-spacing: 0.04em; pointer-events: none;
}

/* ── JUNE (façon Juno-60 / 106, 2026-10-12) ──
   Panneau anthracite, joues en plastique noir (pas de bois sur un Juno),
   FADERS à capuchon noir strié + trait blanc PEINT (repère orange quand le
   réglage diffère du preset, pas de halo), graduations sérigraphiées,
   touches de couleur façon Roland (orange / jaune / crème) avec une LED
   rouge au-dessus des interrupteurs. Couleurs FIXES : identique en skin
   clair et sombre (comme le MINI M et le PRO M). */
#moog-wrap.mg-juno .mg-synth {
  --text-knob: #ebe7dc; --border-color: #3c3d41;
  --btn-light: #5d5d60; --surface-mid: #2c2d30; --btn-shadow: #0e0e10;
  background: #1c1d1f;
}
#moog-wrap.mg-juno .mg-synth::before,
#moog-wrap.mg-juno .mg-synth::after {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #0d0d0e 0%, #232326 45%, #18181a 100%);
}
#moog-wrap.mg-juno .mg-sec { background: #232427; }
#moog-wrap.mg-juno .mg-sectitle { background: #d9542b; color: #fff6ea; }
#moog-wrap.mg-juno .mg-cell { padding-top: 3px; }
#moog-wrap.mg-juno .mg-grid > .mg-cell:not(.mg-stack) { align-items: stretch; }
/* fader : étiquette, fente graduée, valeur */
.mg-f { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; min-height: 0; }
.mg-fbody {
  position: relative; flex: 1 1 auto; min-height: 36px; width: 26px; cursor: ns-resize; touch-action: none;
}
/* graduations 0 … 10 (sérigraphie), sur la course du capuchon */
.mg-fbody::before {
  content: ""; position: absolute; left: 1px; right: 1px; top: 5px; bottom: 5px; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(235,231,220,0.45) 0 1px, transparent 1px 10%);
  border-bottom: 1px solid rgba(235,231,220,0.45);
}
/* fente */
.mg-fbody::after {
  content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 4px; margin-left: -2px; border-radius: 2px;
  background: #050506; box-shadow: inset 0 1px 1px rgba(0,0,0,0.9), 0 0 0 1px #34353a;
}
/* capuchon : plastique noir strié, trait blanc peint au milieu */
.mg-fcap {
  position: absolute; z-index: 1; left: 50%; width: 20px; height: 10px; margin-left: -10px; border-radius: 2px;
  top: calc((1 - var(--f, 0)) * (100% - 10px));
  background: repeating-linear-gradient(180deg, #202022 0 1px, #111113 1px 2px);
  border: 1px solid #000; box-shadow: 0 1px 2px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
}
.mg-fcap::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; margin-top: -1px; background: #f2efe7; }
.mg-fbody.lit .mg-fcap::after { background: var(--accent-bright, #ff9440); }
.mg-f.mg-off, .mg-jt.mg-off { opacity: 0.35; }
.mg-f.drag .mg-fcap { border-color: #3a3a3e; }
#moog-wrap.mg-juno .mg-whtrack { height: 64px; }
/* touches façon Roland + LED */
.mg-jt { gap: 2px; }
.mg-jled { width: 5px; height: 5px; border-radius: 50%; background: #3a1210; box-shadow: inset 0 1px 1px rgba(0,0,0,0.6); }
.mg-jt.on .mg-jled { background: #ff2a14; }
.pitch-btn.mg-tbtn.mg-jbtn {
  margin-top: 0; height: 17px; min-width: 34px; padding: 0 3px; font-size: 8.5px; letter-spacing: 0.04em; border-radius: 2px; color: #17140f; font-weight: 700;
  border: 1px solid #000; box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,0.35);
}
.pitch-btn.mg-tbtn.mg-jbtn:active { transform: translateY(1px); box-shadow: 0 1px 0 #000; }
.pitch-btn.mg-jbtn.mg-j-orange, .pitch-btn.mg-jbtn.mg-j-orange.on { background: #e2622f; }
.pitch-btn.mg-jbtn.mg-j-yellow, .pitch-btn.mg-jbtn.mg-j-yellow.on { background: #e3c04a; }
.pitch-btn.mg-jbtn.mg-j-cream, .pitch-btn.mg-jbtn.mg-j-cream.on { background: #e6e0cf; }
.mg-jsel .mg-klabel { margin-bottom: 7px; }   /* sélecteur sans LED : touche alignée sur celles des interrupteurs */
/* CHORUS : deux grandes touches I / II + le mode en cours */
.mg-cell.mg-jch { gap: 6px; padding-top: 10px; justify-content: center; }
.mg-jch .pitch-btn.mg-tbtn.mg-jbtn { min-width: 46px; height: 24px; font-size: 11px; letter-spacing: 0.1em; }
.mg-jchm { align-self: center; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: #ff9440; padding-bottom: 3px; }
/* 5 boutons d'instrument (admin) : encore plus serré */
#piano-mode-seg.pm-5 .pm-seg-btn { padding: 4px 5px; letter-spacing: 0.03em; }