/* Jetons — cotes : SPEC-INTERFACE.md §2, §3b, §9, §11.8 */
@font-face {
  font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
}
:root {
  --bg: #111317; --panel: #171a1f; --raise: #1f232a; --line: #272c34;
  --text: #d6dae0; --muted: #737b87; --faint: #3b414b;
  --accent: #4da3ff; --accent-soft: rgb(77 163 255 / .16); --rec: #ef5d60;
  --beat: #161a1f; --bar: #1c2129; --play: #1d3350;
  --c-i: #9fb3c8; --c-v: #7fd19b; --c-p: #e0b85c; --c-d: #7ec8e3; --c-fx: #f08a5d; --c-auto: #b39dfa;
  --row: 24px;
  color-scheme: dark;
  accent-color: var(--accent);
  font: 13px/1.2 Inter, system-ui, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums slashed-zero;
}
:root[data-density="compact"] { --row: 20px; }
:root[data-density="comfy"] { --row: 28px; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100dvh; overflow: hidden; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; color: inherit; }
button { cursor: default; }

/* Cadre : une seule grille de zones, jamais de défilement de page. Disposition d'IDE :
   patterns + master (o) | grille avec mixer en pied, Atelier dessous (p) | inspecteur (i) ; gouttières redimensionnables. */
#app {
  height: 100dvh; display: grid;
  grid-template:
    "m  m  m  m  m" 32px
    "t  t  t  t  t" 44px
    "o  go p  gi i" minmax(0, 1fr)
    "s  s  s  s  s" 24px / var(--o, 168px) 4px minmax(0, 1fr) 4px var(--i, 232px);
}
#app.no-o { --o: 0px; } #app.no-o #order, #app.no-o [data-gut="o"] { display: none; }
#app.no-i { --i: 0px; } #app.no-i #inst, #app.no-i [data-gut="i"] { display: none; }

.gut { background: var(--line); cursor: col-resize; touch-action: none; }
.gut.h { cursor: row-resize; }
.gut:hover, .gut.drag { background: var(--accent); }
[data-gut="o"] { grid-area: go; } [data-gut="i"] { grid-area: gi; }

/* Barre de vues au-dessus de la grille : sélecteur du pattern (position de la matrice) + onglets de ses vues */

/* Écrans façon machine */
.lcd { flex: none; padding: 5px 10px; font-weight: 600; letter-spacing: .06em; color: #6fe0c8; background: #07090b; border: 1px solid var(--line);
  border-radius: 4px; box-shadow: inset 0 1px 3px rgb(0 0 0 / .6); text-shadow: 0 0 6px rgb(111 224 200 / .35); }
/* Pas de barres de défilement : la vue reste nette ; on défile à la molette (Maj+molette ou molette sur le mixer : horizontal),
   au pavé tactile, au clavier ou en glissant. La position se lit dans la grille (n° de ligne) et le LCD. */
* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }

#menu { grid-area: m; display: flex; align-items: center; padding: 0 4px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
#menu button { flex: none; }
#menu button { height: 24px; padding: 0 10px; background: none; border: 0; border-radius: 4px; }
#menu button:hover, #menu button.open { background: var(--raise); }

#transport { grid-area: t; display: flex; align-items: center; gap: 14px; padding: 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
#transport label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
#transport input { width: 52px; }
#play { width: 88px; height: 28px; flex: none; background: var(--accent); color: #fff; border: 0; border-radius: 4px; }
.tg { height: 28px; padding: 0 10px; flex: none; background: var(--raise); border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }
#rec.on { background: var(--rec); border-color: var(--rec); color: #fff; }
#metro.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#pos { margin-left: auto; }

input:not([type=range]):not([type=checkbox]), select { height: 28px; padding: 0 6px; background: var(--raise); border: 1px solid var(--line); border-radius: 4px; min-width: 0; }

#order, #inst { overflow: auto; background: var(--panel); }
#order { grid-area: o; border-right: 1px solid var(--line); }
#inst { grid-area: i; border-left: 1px solid var(--line); }
#center { grid-area: p; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#ebody { flex: 1; min-height: 0; display: flex; }
#pattern { flex: 1; min-height: 0; min-width: 0; overflow: auto; position: relative; }
#view { flex: 1; min-height: 0; min-width: 0; overflow: auto; }
#pattern[hidden], #ehead[hidden] { display: none; }
/* Barre du mode Édition : une seule ligne compacte (piste, M/S, onglets, outils) */
#ehead { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 2px 8px 2px 0; background: var(--panel); border-bottom: 1px solid var(--line); }
#ehead .trk-top { padding: 0 4px 0 8px; border: 0; box-shadow: inset 2px 0 0 var(--c); gap: 2px; }
#ehead .grp { margin-right: 0; gap: 2px; }
#ehead .ntools .val { min-width: 36px; }
#ehead .trk-top input[data-t="name"] { width: 96px; height: 24px; }
#ehead .trk-top .tabs2 { margin: 0 0 0 4px; }
#ehead .tabs2 button { height: 24px; padding: 0 8px; border-radius: 4px; }
#ehead .ntools { display: contents; }
#ehead .ntools .sep { width: 1px; height: 16px; margin: 0 2px; background: var(--line); }
#ehead .ib { min-width: 24px; height: 24px; }

/* Vues Pool, Styles, Accords */
.vw { display: grid; gap: 16px; padding: 12px 16px 24px; }
.vw section > header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.vw h3 { margin: 0; font-size: 13px; }
.vw header > span { color: var(--muted); font-size: 12px; }
.vw header button, .vw .acts button, .chord button, .vw td button { height: 24px; padding: 0 10px; background: var(--raise); border: 1px solid var(--line); border-radius: 4px; white-space: nowrap; }
.vw button:disabled { opacity: .4; }
.vw table { border-collapse: collapse; width: 100%; }
.vw th { text-align: left; color: var(--muted); font-weight: 400; font-size: 11px; padding: 0 8px 4px; }
.vw td { padding: 4px 8px; border-top: 1px solid var(--line); white-space: nowrap; }
.vw td input, .vw td select, .toolbar select, .chord select { height: 24px; }
.vw td input[type=number] { width: 56px; }
.vw tr.on td { background: var(--accent-soft); }
.vw .k { color: var(--muted); }
.acts { display: flex; gap: 4px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.toolbar label, .chk { display: flex; align-items: center; gap: 6px; color: var(--muted); }
canvas[data-wave] { display: block; background: var(--bg); border-radius: 3px; }
.lane { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.chord { display: grid; gap: 4px; width: 148px; flex: none; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.chord .pos { color: var(--muted); font-size: 11px; }
.chord b { font-size: 18px; font-weight: 600; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; background: var(--accent-soft); border-radius: 4px; }
.tag button { height: 18px; padding: 0 6px; background: none; border: 0; color: var(--muted); }
.hd .h2 .f.ic { justify-content: flex-start; overflow: visible; }
.hd .h2 .f.ic svg { flex: none; }

/* Sélecteur de case */
#picker { position: fixed; z-index: 11; display: grid; gap: 6px; max-width: 380px; padding: 8px; background: var(--raise); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / .45); }
#picker[hidden] { display: none; }
#picker button { height: 24px; padding: 0 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
#picker button:hover { border-color: var(--accent); }
#picker button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pk-h { color: var(--muted); font-size: 11px; }
.pk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pk-notes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.pk-notes button.sharp { background: var(--bg); }
.pk-notes button.in { box-shadow: inset 0 -2px 0 var(--c-v); }
.pk-hex { display: grid; grid-template-columns: repeat(16, 21px); gap: 2px; }
#picker .pk-hex button { width: 21px; height: 18px; padding: 0; font-size: 10px; }
.pk-list { display: grid; gap: 2px; max-height: 260px; overflow: auto; }
#picker .pk-list button { display: flex; gap: 8px; text-align: left; }

/* Boutons icônes et menus déroulants (details natif) */
.ib { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 28px; height: 28px; padding: 0; flex: none;
  background: var(--raise); border: 1px solid var(--line); border-radius: 4px; color: var(--text); cursor: pointer; }
.ib:hover { border-color: var(--accent); }
.ib.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ib.wide { padding: 0 8px; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ib .k { color: var(--muted); }
.sep { width: 1px; height: 20px; margin: 0 4px; flex: none; background: var(--line); }
.grow { flex: 1; }
details.menu { position: relative; flex: none; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu[open] > summary { border-color: var(--accent); }
.menu-box { position: absolute; top: calc(100% + 4px); left: 0; z-index: 6; display: grid; gap: 4px; min-width: 240px; max-height: 360px; overflow: auto;
  padding: 6px; background: var(--raise); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / .45); }
details.right > .menu-box { left: auto; right: 0; }
details.menu:not([open]) > .menu-box { display: none; }
.menu-box > button { display: flex; gap: 8px; height: 26px; align-items: center; padding: 0 8px; background: none; border: 0; border-radius: 4px; text-align: left; white-space: nowrap; }
.menu-box > button:hover { background: var(--accent-soft); }
.menu-box > button.on { color: var(--accent); }
.menu-box > label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.menu-box hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 2px 0; }
.menu-box.help { width: 300px; }
.menu-box.help p { margin: 0; font-size: 12px; line-height: 1.5; }

/* Éditeur de piste intégré à la Grille (mode Édition) : barre fixe au-dessus, couloir de notes dans la grille */
.trk-top { display: flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-bottom: 1px solid var(--line); box-shadow: inset 0 2px 0 var(--c); }
.trk-top .tnum { color: var(--muted); min-width: 16px; text-align: right; }
.trk-top input[data-t="name"] { width: 160px; font-weight: 600; }
.ms { display: flex; gap: 4px; margin-top: 2px; }
.trk-top .ms { display: flex; gap: 4px; margin: 0 6px; }
.ms button { flex: 1; }
.ms button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.trk-top .tabs2 { margin-left: auto; border-bottom: 0; }
.trk-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px 24px; display: grid; gap: 16px; align-content: start; }
.tabs2 { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs2 button { height: 26px; padding: 0 14px; background: none; border: 0; border-radius: 4px 4px 0 0; color: var(--muted); }
.tabs2 button.on { background: var(--panel); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.ntools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: none; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.ntools .grp { display: flex; align-items: center; gap: 4px; margin-right: 4px; }
.ntools .val { min-width: 40px; text-align: center; color: var(--muted); }
.side-h { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.side-h span { flex: 1; color: var(--muted); font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.clist { display: grid; gap: 2px; }
.grow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 0; border-top: 1px solid var(--line); }
.grow-row b { width: 76px; font-size: 12px; }
.grow-row select { flex: 1; }
.grow-row .note { flex: 1; margin: 0; font-size: 11px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* Couloir de notes (le temps descend avec le tracker), une colonne par note de la gamme */
.nlane { display: flex; flex: none; border-left: 2px solid var(--c); border-right: 2px solid var(--c); }
.nlane.cur { box-shadow: inset 0 0 0 1px var(--accent); }
.nlane.lh { align-items: center; padding: 0 8px; font-size: 12px; font-weight: 500; color: var(--text); background: color-mix(in srgb, var(--c) 18%, var(--panel)); }
.nlane.lh2 { font-size: 11px; color: var(--muted); }
.vch { width: 56px; flex: none; display: flex; align-items: center; padding: 0 6px; color: var(--c-p); font-size: 11px; border-left: 1px solid var(--line); }
.vc { width: 24px; flex: none; border-left: 1px solid var(--line); cursor: pointer; }
.vc.h { display: flex; align-items: center; justify-content: center; cursor: default; font-size: 10px; }
.vc.h.in { color: var(--c-v); }
.vc.h.root { color: var(--accent); }
.vc.out:not(.h):not(.on):not(.hold) { background: rgb(0 0 0 / .25); } /* hors gamme (filtre désactivé) */
.vc.tone { background: rgb(255 255 255 / .035); }
.vc.hold { background: color-mix(in srgb, var(--c) 30%, transparent); }
.vc.on { background: var(--c); }
.vc:not(.h):hover { outline: 1px solid var(--accent); outline-offset: -1px; }

.mods { display: flex; flex-wrap: wrap; gap: 12px; }
.trk-body > section > header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.trk-body h3 { margin: 0; font-size: 13px; }
.trk-body header > span { color: var(--muted); font-size: 12px; }
.mod { display: grid; gap: 4px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.mod b { font-size: 12px; }


#status { grid-area: s; display: flex; gap: 24px; align-items: center; padding: 0 12px; color: var(--muted); background: var(--panel); border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
#status .msg { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.title { height: 28px; padding: 10px 12px 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list button { display: flex; gap: 8px; width: 100%; height: 24px; align-items: center; padding: 0 12px; background: none; border: 0; text-align: left; white-space: nowrap; }
.list button:hover { background: var(--raise); }
.list button.on { background: var(--accent-soft); color: var(--accent); }
.list button.loop { box-shadow: inset 2px 0 0 var(--accent); }
.list .k { width: 20px; flex: none; color: var(--muted); }

/* Ordre + matrice de patterns */
#order .list button { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px; gap: 4px 6px; height: auto; padding: 4px 8px 4px 12px; line-height: 16px; touch-action: none; }
#order .list button .mx { grid-column: 2 / -1; } /* deux lignes : n° · nom · ⟲, puis la matrice sous le nom */
#order .list button.sel:not(.on) { background: color-mix(in srgb, var(--accent) 9%, transparent); }
#order .list button.sel { cursor: grab; }
#order .list button.drop::before { content: ""; position: absolute; left: 4px; right: 4px; top: -1px; height: 2px; background: var(--accent); }
#order .list button.drop.after::before { top: auto; bottom: -1px; }
#order { position: relative; }
.orename { position: absolute; z-index: 3; height: 22px; padding: 0 4px; font: inherit; }
.olp { font-weight: 400; text-align: center; color: var(--muted); cursor: pointer; border-radius: 3px; }
.olp:empty { pointer-events: none; }
.olp:hover { color: var(--text); background: var(--raise); }
.olp.on { color: var(--accent); }
.nm { overflow: hidden; text-overflow: ellipsis; }
span.mx { display: flex; gap: 2px; }
span.mx i { width: 6px; height: 12px; border-radius: 1px; background: var(--c); opacity: .85; }
span.mx i.off { background: var(--faint); opacity: 1; }
span.mx i.mute { opacity: .25; } /* piste muette (M / solo) : sa couleur s'éteint sur toutes les positions */

/* Panneau instrument */
.fld { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 4px; height: 32px; color: var(--muted); font-size: 11px; }
.knob { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 4px; height: 22px; color: var(--muted); font-size: 11px; }
.knob input, .knob select { width: 100%; min-width: 0; margin: 0; }
.knob select { height: 20px; font-size: 11px; }
#inst .knob { grid-template-columns: 84px minmax(0, 1fr) 40px; }

/* Faders (tous les <input type=range>) : gorge fine et creusée, graduations tous les 10 %, remplissage à la couleur de la piste
   (--c) depuis le bas ou depuis le centre (pan), capuchon rectangulaire à trait central. --a, --b : ui/widgets.js. */
input[type=range] {
  --t: 10px; --h: 16px; --f: var(--c, var(--accent));
  --x: calc(var(--a, 0) * (100% - var(--t)) + var(--t) / 2); --y: calc(var(--b, 0) * (100% - var(--t)) + var(--t) / 2);
  -webkit-appearance: none; appearance: none; height: var(--h); margin: 0; cursor: pointer; background:
    linear-gradient(90deg, transparent var(--x), var(--f) var(--x) var(--y), transparent var(--y)) 0 50% / 100% 3px no-repeat,
    linear-gradient(#07080a, #07080a) 0 50% / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px 10%) calc(var(--t) / 2) 100% / calc(100% - var(--t)) 2px no-repeat,
    linear-gradient(var(--faint), var(--faint)) calc(100% - var(--t) / 2) 100% / 1px 2px no-repeat;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: var(--t); height: var(--h); border: 1px solid #07080a; border-radius: 2px;
  background: linear-gradient(90deg, transparent calc(50% - 1px), var(--f) 0 calc(50% + 1px), transparent 0),
    linear-gradient(#6b727d, #3a3f48 45%, #262a31 55%, #3e444d);
  box-shadow: 0 1px 3px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .22); transition: filter .12s;
}
input[type=range]:hover::-webkit-slider-thumb { filter: brightness(1.25); }
input[type=range]:active::-webkit-slider-thumb { filter: brightness(1.45); }
input[type=range]:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
/* Fader vertical (VF, panels.js) : le même dessin tourné d'un quart de tour, le bas = 0 */
.vf { display: flex; justify-content: center; min-height: 0; }
.vf input[type=range] {
  writing-mode: vertical-lr; direction: rtl; width: var(--h); height: 100%; background:
    linear-gradient(to top, transparent var(--x), var(--f) var(--x) var(--y), transparent var(--y)) 50% 0 / 3px 100% no-repeat,
    linear-gradient(#07080a, #07080a) 50% 0 / 3px 100% no-repeat,
    repeating-linear-gradient(to top, var(--faint) 0 1px, transparent 1px 10%) 0 50% / 2px calc(100% - var(--t)) no-repeat,
    linear-gradient(var(--faint), var(--faint)) 0 calc(var(--t) / 2) / 2px 1px no-repeat;
}
.vf input[type=range]::-webkit-slider-thumb { width: var(--h); height: var(--t);
  background: linear-gradient(transparent calc(50% - 1px), var(--f) 0 calc(50% + 1px), transparent 0), linear-gradient(#6b727d, #3a3f48 45%, #262a31 55%, #3e444d); }
#inst output { text-align: right; font-size: 11px; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.btns button, .ms button { height: 22px; padding: 0 8px; background: var(--raise); border: 1px solid var(--line); border-radius: 4px; }
.note { margin: 4px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }


.dev { display: flex; flex-direction: column; gap: 2px; width: 168px; flex: none; padding: 6px 8px; border-right: 1px solid var(--line); }
.dev .knob { grid-template-columns: 64px minmax(0, 1fr) 28px; }
.dev output { text-align: right; font-size: 11px; }
.dev:not(.on) .knob, .dev:not(.on) .note { opacity: .45; }
.dev.on { background: var(--accent-soft); }
.dh { display: flex; align-items: center; gap: 6px; height: 22px; font-weight: 500; }
.dh input { margin: 0; }

/* Grille rigide : largeur de piste = 1 + 7 + champs + écarts + 8 (spec §3b, §11.8) */
.grid { width: max-content; min-width: 100%; user-select: none; }
.r { display: flex; height: var(--row); background: var(--bg); }
.r.beat { background: var(--beat); }
.r.bar { background: var(--bar); }
.r.play { background: var(--play); }
.rn { position: sticky; left: 0; z-index: 1; width: 32px; flex: none; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; color: var(--muted); background: inherit; }
.tk { display: flex; flex: none; padding: 0 8px 0 7px; border-left: 1px solid var(--line); }
.tk.sel { background: var(--accent-soft); }
.f { display: flex; align-items: center; flex: none; width: 20px; margin-left: 8px; color: var(--c-i); white-space: nowrap; scroll-margin: 48px 8px 0 40px; }
.f.n { width: 28px; margin-left: 0; color: var(--text); }
.f.pad { justify-content: center; margin-left: 2px; color: var(--text); cursor: pointer; } /* colonnes de sons d'un DrumKit (spec §12.11) */
.tk > .f.pad:first-child { margin-left: 0; }
.f.pad.empty { color: var(--faint); }
#pattern .f.pad:not(.empty):not(.cur) { color: var(--c-fx); }
.hd .h2 .f.pad { justify-content: center; font-size: 9px; letter-spacing: -.02em; }
.f.v { color: var(--c-v); } .f.p { color: var(--c-p); } .f.d { color: var(--c-d); }
.f.fc, .f.f2c, .f.f3c { width: 8px; color: var(--c-fx); }
.f.fv, .f.f2v, .f.f3v { margin-left: 0; color: var(--c-fx); }
.f.ap, .f.av { color: var(--c-auto); }
.f.empty { color: var(--faint); }
.f.cur { background: var(--accent-soft); outline: 1px solid var(--accent); outline-offset: -1px; }

.hd { position: sticky; top: 0; z-index: 2; }
.hd .r { background: var(--panel); }
.hd .h1 { height: 28px; }
.hd .h2 { height: 20px; font-size: 11px; border-bottom: 1px solid var(--line); }
.hd .h2 .f { color: var(--muted); }
.hd .rn { z-index: 3; }
.th { position: relative; display: block; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; box-shadow: inset 0 2px 0 var(--c); }
.th.mute { color: var(--faint); text-decoration: line-through; }
#pattern .tk.mute:not(.th) .f:not(.cur) { opacity: .35; } /* piste muette sur cette position : notes grisées */
.th.solo { color: var(--accent); }

/* Menus déroulants et clic droit : même élément */
#ctx, #ctx2 { position: fixed; z-index: 10; min-width: 220px; max-height: calc(100dvh - 8px); overflow: auto; padding: 4px; background: var(--raise); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / .4); }
#ctx button, #ctx2 button { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 24px; padding: 0 10px; background: none; border: 0; border-radius: 4px; text-align: left; white-space: nowrap; }
#ctx button:hover, #ctx2 button:hover { background: var(--accent-soft); }
#ctx button.sep, #ctx2 button.sep { margin: 5px 0 0; position: relative; } /* écrase .sep (trait vertical des barres) */
#ctx button.sep::before, #ctx2 button.sep::before { content: ""; position: absolute; top: -3px; left: 6px; right: 6px; border-top: 1px solid var(--line); }
#ctx kbd, #ctx2 kbd { margin-left: 24px; font: inherit; color: var(--muted); }
#ctx .ck, #ctx2 .ck { width: 16px; flex: none; font-style: normal; color: var(--accent); }
#ctx button > span, #ctx2 button > span { flex: 1; }

/* Boîtes de dialogue */
dialog { min-width: 320px; max-width: min(640px, 92vw); padding: 16px; color: var(--text); background: var(--raise); border: 1px solid var(--line); border-radius: 8px; }
dialog::backdrop { background: rgb(0 0 0 / .5); }
dialog h3 { margin: 0 0 12px; font-size: 14px; }
dialog label { display: grid; gap: 4px; margin-bottom: 10px; color: var(--muted); }
dialog table { border-collapse: collapse; width: 100%; }
dialog td { padding: 4px 8px 4px 0; vertical-align: top; }
dialog td:first-child { color: var(--accent); white-space: nowrap; }
dialog menu { display: flex; flex-direction: row-reverse; gap: 8px; margin: 16px 0 0; padding: 0; }
dialog menu button { height: 28px; padding: 0 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
dialog menu button.pri { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ponytail: < 900 px on masque O et I ; onglets « une zone à la fois » plus tard (spec §9) */
@media (max-width: 899px) {
  #app { --o: 0px; --i: 0px; }
  #order, #inst, [data-gut="o"], [data-gut="i"] { display: none; }
}

/* Inspecteur (panneau de droite) : suit le curseur de la grille */
.ifields { display: grid; gap: 2px; }
.ifields button { display: flex; justify-content: space-between; gap: 8px; height: 26px; padding: 0 8px; background: var(--raise); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; text-align: left; }
.ifields button span { color: var(--muted); font-size: 12px; }
.ifields button b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifields button.on { border-color: var(--accent); }
.ifields button:hover { border-color: var(--accent); }

/* En-têtes de piste : accès directs au survol */
.th .thi { position: absolute; right: 2px; top: 5px; display: flex; gap: 2px; }
.thi b { width: 18px; height: 18px; display: grid; place-items: center; font-weight: 400; font-size: 11px; background: var(--raise); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; visibility: hidden; }
.th:hover .thi b, .thi b.on { visibility: visible; } /* M / S actifs : toujours visibles, à place fixe */
.thi b:hover { border-color: var(--accent); color: var(--accent); }
.thi b.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Type de piste et ajout (sélecteur commun) */
.kd { font-style: normal; color: var(--muted); margin-right: 4px; font-size: 11px; }
.tk-add { width: 28px; flex: none; display: grid; place-items: center; color: var(--muted); border-left: 1px solid var(--line); cursor: pointer; }
.tk-add:hover { color: var(--accent); background: var(--accent-soft); }
.addtrack { display: grid; gap: 4px; width: min(460px, 86vw); }
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.kind { display: grid !important; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; color: var(--text) !important; }
.kind:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.kind input { position: absolute; opacity: 0; }
.kind span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.addtrack [class^="for-"] { display: none !important; } /* seul l'instrument du moteur choisi est proposé */
.addtrack[data-kind="synth"] .for-synth, .addtrack[data-kind="wave"] .for-wave, .addtrack[data-kind="kit"] .for-kit, .addtrack[data-kind="audio"] .for-audio { display: grid !important; }
.pk-semi { grid-template-columns: repeat(13, 26px); }
.krow { display: grid; grid-template-columns: 34px 28px 1fr; gap: 6px; align-items: center; height: 22px; font-size: 12px; }
.krow b { color: var(--accent); }
.krow span { color: var(--muted); }
#picker .pk-kit button { display: grid; line-height: 1.1; padding: 2px 0; }
.pk-notes small { color: var(--accent); font-size: 9px; letter-spacing: .04em; }
#picker .pk-semi button { width: 26px; }

/* Palette de commandes */
#pal { position: fixed; inset: 0; z-index: 20; display: grid; justify-items: center; align-items: start; padding-top: 12vh; background: rgb(0 0 0 / .35); }
#pal[hidden] { display: none; }
.pal-box { width: min(560px, 92vw); background: var(--raise); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 16px 40px rgb(0 0 0 / .5); overflow: hidden; }
.pal-box input { width: 100%; height: 40px !important; padding: 0 14px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--panel) !important; font-size: 14px; }
.pal-list { max-height: 50vh; overflow: auto; padding: 4px; }
.pal-list button { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 10px; background: none; border: 0; border-radius: 4px; text-align: left; cursor: pointer; }
.pal-list button .pm { color: var(--muted); font-size: 11px; min-width: 70px; }
.pal-list button kbd { margin-left: auto; font: inherit; color: var(--muted); font-size: 11px; }
.pal-list button.on, .pal-list button:hover { background: var(--accent-soft); }
#ctx2 { z-index: 11; }
#ctx[hidden], #ctx2[hidden], #ctx > button[hidden] { display: none; }
#ctx[data-find]::before { content: "⌕ " attr(data-find); display: block; padding: 4px 10px; color: var(--accent); }
#ctx button:focus-visible { outline: none; background: var(--accent-soft); }

/* Construire (F3) : tiroir sous la grille, qui glisse à l'ouverture. Packs | Rythmes | Boucles */
#build { flex: none; position: relative; height: 0; overflow: hidden; background: var(--panel); border-top: 1px solid transparent;
  transition: height .24s cubic-bezier(.2, .8, .2, 1), border-color .24s; }
#center.building #build { height: var(--z, 300px); border-top-color: var(--line); }
#build:has(.gut.drag) { transition: none; }
#build > .gut { position: absolute; z-index: 2; inset: 0 0 auto; height: 4px; background: transparent; }
#build > .gut:hover, #build > .gut.drag { background: var(--accent); }
#bbody { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); opacity: 0; transform: translateY(12px);
  transition: opacity .2s .06s, transform .24s cubic-bezier(.2, .8, .2, 1); }
#center.building #bbody { opacity: 1; transform: none; }
#bbody > section { min-height: 0; min-width: 0; overflow: auto; }
#bbody button { cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }

/* Packs de la piste (ui/packs.js) : bande collée à la colonne de la piste au premier plan, dans la grille */
#ebody { position: relative; overflow: hidden; }
.pband-sp { width: 232px; flex: none; }
#pband { position: absolute; top: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; min-height: 0; background: var(--panel);
  border-left: 2px solid var(--c, var(--accent)); border-right: 1px solid var(--line); box-shadow: 0 0 16px rgb(0 0 0 / .35); animation: band-in .18s ease-out; }
#pband[hidden] { display: none; }
@keyframes band-in { from { opacity: 0; transform: translateX(-8px); } }
#pband button { cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.pbh { flex: none; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 8px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--panel)); }
.pbh span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 12px; }
.bsrc .all { margin-left: auto; }
#pband .empty { padding: 12px 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }
/* Packs : pastilles de source, liste avec miniatures colorées par moteur */
.bsrc { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; flex: none; }
.bsrc button { height: 22px; padding: 0 9px; background: var(--raise); border: 1px solid var(--line); border-radius: 11px; color: var(--muted); font-size: 12px; }
.bsrc button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.bsrc .ib { min-width: 22px; width: 22px; padding: 0; }
.blist { flex: 1; min-height: 0; overflow: auto; padding: 0 4px 8px; }
.blist .sub { padding: 8px 8px 4px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.it { --k: var(--accent); display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 6px 0 8px; border-radius: 5px; cursor: grab;
  transition: background-color .15s, box-shadow .15s, transform .12s; }
.it:hover { background: var(--raise); transform: translateX(2px); }
.it:active { cursor: grabbing; }
.it .ic { width: 14px; flex: none; color: var(--k); text-align: center; }
.it .nm { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.it canvas { flex: none; width: 48px; height: 16px; color: var(--k); opacity: .8; }
.it.playing { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 1px var(--k, var(--accent)), 0 0 12px color-mix(in srgb, var(--k, var(--accent)) 35%, transparent); } }
.k-audio { --k: #4da3ff; } .k-wave { --k: #a879ff; } .k-synth { --k: #57c785; } .k-kit { --k: #f5a524; } .k-p { --k: #2ec4b6; }

/* Boutons segmentés (barre de piste, Atelier) ; écritures des générateurs et des packs : la case s'allume */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.seg button { min-width: 26px; height: 22px; padding: 0 8px; background: var(--raise); border: 0; border-radius: 0; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--accent-soft); color: var(--accent); }
#pattern .tk.fl { animation: flash .7s ease-out; }
@keyframes flash { from { background-color: color-mix(in srgb, var(--accent) 55%, transparent); } }

/* Barre de piste : moteur, générateurs */
.trk-top .eng { padding: 0 2px; color: var(--c); font-size: 14px; }
.gens { display: inline-flex; align-items: center; gap: 4px; }
.gens .gen { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); }
.gens input[type=number] { width: 34px; height: 22px; padding: 0 2px; text-align: center; }

/* Grille : réagit au glisser (piste visée) et aux écritures de Construire */
#pattern .tk { transition: background-color .15s, box-shadow .15s; }
#pattern .tk.drop { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }

/* Panneau Patterns : la liste défile, le bus Master reste en bas */
#order { display: flex; flex-direction: column; overflow: hidden; }
#olist { flex: 1; min-height: 0; overflow: auto; position: relative; }
#omaster { flex: none; display: grid; gap: 2px; padding: 0 10px 10px; border-top: 1px solid var(--line);
  background: linear-gradient(color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel)); }
#omaster .title { height: auto; padding: 8px 0 2px; color: var(--accent); }
#omaster .knob { grid-template-columns: 48px minmax(0, 1fr); }
/* Tranche master : fader de volume vertical, VU stéréo G / D (même rendu que les VU de piste), puis les retours */
#omaster [data-mix] { display: grid; grid-template: 72px / 16px 6px 6px minmax(0, 1fr); column-gap: 4px; }
#omaster [data-mix] > div { display: grid; align-content: center; gap: 2px; padding-left: 6px; }
#omaster .vf input[type=range] { --t: 10px; --h: 16px; }

/* Inspecteur : Sélection, Instrument (mis en avant), Accords — suit la sélection, sans onglets */
#inst > section { display: grid; gap: 8px; align-content: start; padding: 10px; border-bottom: 1px solid var(--line); }
.ihead { --c: var(--accent); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-left: 8px; box-shadow: inset 2px 0 0 var(--c); }
.ihead b { font-weight: 600; }
.ihead span { color: var(--muted); font-size: 11px; }
.ihead .chips { display: flex; gap: 2px; align-self: center; }
.ihead .chips i { width: 6px; height: 14px; border-radius: 2px; background: var(--c); }
.iacts { display: flex; flex-wrap: wrap; gap: 4px; }
.iacts button { height: 24px; padding: 0 8px; background: var(--raise); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.iacts button:hover { border-color: var(--accent); background: var(--accent-soft); }
#inst > section.iinst { background: linear-gradient(color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel) 140px); box-shadow: inset 0 2px 0 var(--accent); }
.iinst .ihead { align-items: center; padding-left: 0; box-shadow: none; flex-wrap: nowrap; }
.iinst .ihead .ic { color: var(--accent); font-size: 16px; }
.iinst .ihead b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
.iinst .ihead b .k { margin-right: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.iinst .tag { padding: 1px 6px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 10px; }
.iinst .menu-box { max-height: 50vh; overflow: auto; min-width: 200px; }
.icur { display: flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px; background: var(--bg); border-radius: 5px; font-size: 12px; }
.icur > span { color: var(--muted); font-size: 11px; }
.icur b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.icur .k { color: var(--muted); margin-right: 4px; }
.icur .ib { min-width: 22px; height: 22px; }
.iwave { width: 100%; height: 44px; color: var(--accent); background: var(--bg); border-radius: 6px; }
.iparams { display: grid; gap: 6px; }
.iparams > summary { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; list-style: none; }
.iparams > summary::before { content: "▸ "; } .iparams[open] > summary::before { content: "▾ "; }
.iparams[open] { gap: 6px; }
.irow { display: flex; gap: 6px; }
.irow .fld { flex: 1; min-width: 0; }
#inst .knob { grid-template-columns: 64px minmax(0, 1fr) 36px; }
.ichords .crow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 0; border-top: 1px solid var(--line); }
.ichords .crow .pos { width: 26px; color: var(--muted); font-size: 11px; }
.ichords .crow b { flex: 1 1 50%; }
.ichords .crow .ib { order: 1; }
.ichords .crow select { order: 2; flex: 1 1 28%; min-width: 0; height: 24px; font-size: 12px; }
.ichords .grow-row select { height: 24px; font-size: 12px; min-width: 0; }

/* Tiroir : en-tête commun (Construire, SynWave, boucle d'écoute) */
#build { display: flex; flex-direction: column; }
#bhead { flex: none; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-bottom: 1px solid var(--line); }
#bhead .seg button { cursor: pointer; }
#bhead .grow { flex: 1; }
#bhead .lp { max-width: 240px; height: 22px; padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--raise);
  border: 1px solid var(--line); border-radius: 11px; color: var(--muted); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
#bhead .lp:hover { border-color: var(--accent); color: var(--text); }
#bhead .lp.on { --k: var(--accent); background: var(--accent); border-color: var(--accent); color: #fff; animation: pulse 1.6s ease-in-out infinite; }
#bhead .ib { min-width: 24px; height: 24px; }

/* SynWave dans le tiroir : vue d'ensemble | dessin et harmoniques | modulation */
#bbody[data-mode=synwave] { grid-template-columns: 240px minmax(0, 1fr) 220px; }
.swl { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; padding: 8px; border-right: 1px solid var(--line); }
.swh { display: flex; align-items: center; gap: 4px; }
.swh select { flex: 1; min-width: 0; height: 24px; }
.swh .ib { min-width: 24px; height: 24px; }
#wt3d { width: 100%; height: 100%; min-height: 0; background: var(--bg); border-radius: 6px; }
.swc { display: grid; grid-template-rows: auto minmax(0, 1fr) auto 44px; gap: 6px; padding: 8px; min-height: 0; }
.swc .note { margin: 0; }
#wtdraw, #wtspec { width: 100%; height: 100%; min-height: 0; background: var(--bg); border-radius: 6px; cursor: crosshair; touch-action: none; }
.frames { display: flex; gap: 3px; overflow-x: auto; }
.frames canvas { flex: none; width: 40px; height: 26px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; transition: border-color .15s; }
.frames canvas.on { border-color: var(--accent); }
.swops { display: flex; align-items: center; gap: 3px; }
.swops .ib { min-width: 26px; height: 24px; }
.wtlabel { min-width: 44px; color: var(--muted); font-size: 11px; }
.swr { display: grid; gap: 8px; align-content: start; padding: 8px; overflow: auto; border-left: 1px solid var(--line); }
.swr .mod { padding: 6px 8px; }
.swr .knob.wk { grid-template-columns: 56px minmax(0, 1fr) 34px; }

/* ---- Refonte des panneaux (spec §12) : piste au premier plan, mixer en pied de grille, Atelier, Master, historique */
/* Piste au premier plan : son en-tête et sa tranche de mixer prennent sa couleur ; l'Atelier en porte le liseré. */
.th.focus { color: var(--text); background: color-mix(in srgb, var(--c) 16%, var(--panel)); box-shadow: inset 0 3px 0 var(--c); }
#center.building #build { border-top: 2px solid var(--c, var(--line)); }
#bhead .chip { flex: none; max-width: 240px; height: 22px; padding: 0 10px; overflow: hidden; line-height: 22px; white-space: nowrap; text-overflow: ellipsis;
  font-weight: 600; background: color-mix(in srgb, var(--c) 22%, var(--raise)); border-radius: 11px; box-shadow: inset 3px 0 0 var(--c); }

/* Mixer sous chaque piste : pied de grille collant, aligné sur les colonnes (Affichage ▸ Mixer, Ctrl+J) */
#pattern { scroll-padding: 48px 0 64px; }
.r.mx { position: sticky; bottom: 0; z-index: 2; height: auto; background: var(--panel); border-top: 1px solid var(--line); }
.r.mx .rn { align-items: flex-start; padding-top: 5px; font-size: 10px; }
.r.mx .tk { display: grid; grid-template-columns: minmax(0, 1fr) 14px 6px; grid-template-rows: repeat(3, 18px); align-content: center; column-gap: 4px; padding: 3px 6px; }
.tk.focus.arrive { animation: arrive .16s ease-out; }
@keyframes arrive { from { background: transparent; box-shadow: none; } }
.r.mx .tk.focus { background: color-mix(in srgb, var(--c) 10%, transparent); }
.r.mx .knob { grid-column: 1; grid-template-columns: 22px minmax(0, 1fr); height: 14px; gap: 2px; font-size: 10px; }
.r.mx input[type=range] { --t: 8px; --h: 12px; }
.r.mx .vf { grid-column: 2; grid-row: 1 / -1; }
.r.mx .vf input[type=range] { --h: 14px; }
.r.mx .vu { grid-column: 3; grid-row: 1 / -1; }
/* VU-mètre vertical (grid.js setVU) : LED segmentées, vert jusqu'à −18 dB, jaune jusqu'à −6 dB, rouge au-dessus ; trait de crête tenu */
.vu { --g: linear-gradient(to top, #3ddc84 62.5%, #f5c542 0 87.5%, #ef5d60 0); position: relative;
  overflow: hidden; border-radius: 1px; background: linear-gradient(rgb(7 8 10 / .85), rgb(7 8 10 / .85)), var(--g); box-shadow: 0 0 0 1px #07080a; }
.vu::before, .vu::after { content: ""; position: absolute; inset: 0; }
.vu::before { background: var(--g); clip-path: inset(calc((1 - var(--v, 0)) * 100%) 0 0); }
.vu::after { background: linear-gradient(rgb(214 218 224 / min(1, calc(var(--pk, 0) * 20))) 0 0) 0 calc((1 - var(--pk, 0)) * 100%) / 100% 1px no-repeat,
  repeating-linear-gradient(to top, transparent 0 2px, #07080a 2px 3px); }
#app.no-mx .r.mx { display: none; }
#app.no-mx #pattern { scroll-padding-bottom: 0; }

/* Master : volume, retours, puis Mastering en accordéon */
#omaster { max-height: 70%; overflow: auto; }
.mst summary { padding: 8px 0 4px; color: var(--accent); font-weight: 600; cursor: pointer; list-style-position: inside; }
#omaster .dev { width: auto; padding: 4px 0; border-right: 0; border-top: 1px solid var(--line); background: none; }
#omaster .dev .knob { grid-template-columns: 56px minmax(0, 1fr) 30px; }
.tiles.mpre { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 4px; }
.tiles.mpre button { height: 22px; font-size: 11px; }

/* Tuiles : un clic = appliquer (presets d'effets, de mastering, modules à ajouter) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.tiles button { position: relative; height: 28px; padding: 0 8px; overflow: hidden; text-align: left; white-space: nowrap; text-overflow: ellipsis;
  background: var(--raise); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; transition: background-color .16s, border-color .16s; }
.tiles button:hover { border-color: var(--c, var(--accent)); }
.tiles button.on { background: color-mix(in srgb, var(--c, var(--accent)) 20%, var(--raise)); border-color: var(--c, var(--accent)); }
.tiles .ic { margin-right: 6px; color: var(--c, var(--accent)); }
.tiles [data-udel] { position: absolute; right: 4px; top: 6px; padding: 0 2px; font-style: normal; color: var(--muted); visibility: hidden; }
.tiles button:hover [data-udel] { visibility: visible; }
.tiles [data-udel]:hover { color: var(--rec); }

/* Atelier ▸ Effets de la piste : presets et modules à gauche, modules actifs en cartes, bloc vide sinon */
#bbody[data-mode=fx] { grid-template-columns: minmax(0, 1fr); }
.fxr { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 0; height: 100%; }
.fxl { display: flex; flex-direction: column; gap: 6px; padding: 8px; overflow: auto; border-right: 1px solid var(--line); }
.fxl .btns { margin: 0; gap: 4px; }
.fxl .btns button:disabled { opacity: .4; }
.fxl .sub { padding-top: 4px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.fxd { display: flex; min-width: 0; overflow: auto; }
.fxr .dev.on { background: color-mix(in srgb, var(--c) 8%, transparent); }
.fxr .dh .ic { color: var(--c); }
.fxr .dh .ib { margin-left: auto; min-width: 20px; height: 20px; padding: 0; background: none; border: 0; color: var(--muted); cursor: pointer; }
.fxr .dh .ib:hover { color: var(--rec); }
.fxd .empty { flex: 1; display: grid; place-content: center; gap: 4px; margin: 12px; text-align: center; color: var(--muted); border: 1px dashed var(--faint); border-radius: 6px; }
.fxd .empty b { color: var(--text); font-weight: 500; }

/* Historique : icône à droite de la barre de menus */
#menu #histbtn { margin-left: auto; min-width: 28px; padding: 0 6px; font-size: 15px; color: var(--muted); }
#menu #histbtn:hover { color: var(--text); }

/* Contrôles à la souris (ui/widgets.js) : les <select> natifs sont cachés, remplacés par des segments ou une puce ;
   les nombres se règlent en glissant (curseur ↕), à la molette, double-clic pour saisir. */
select[data-ui] { display: none !important; }
.ui-seg { display: inline-flex; flex: none; min-width: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.ui-seg button { flex: 1; height: 22px; padding: 0 8px; white-space: nowrap; background: var(--raise); border: 0; color: var(--muted); font-size: 11px; cursor: pointer;
  transition: background-color .16s, color .16s; }
.ui-seg button + button { border-left: 1px solid var(--line); }
.ui-seg button:hover { color: var(--text); }
.ui-seg button.on { background: var(--accent-soft); color: var(--accent); }
.ui-pick { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: 22px; padding: 0 6px 0 8px; background: var(--raise);
  border: 1px solid var(--line); border-radius: 4px; font-size: 12px; text-align: left; cursor: pointer; transition: border-color .16s; }
.ui-pick span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-pick::after { content: "▾"; flex: none; color: var(--muted); font-size: 10px; }
.ui-pick:hover { border-color: var(--accent); }
.knob .ui-seg, .knob .ui-pick, .fld .ui-seg, .fld .ui-pick { width: 100%; }
.knob select[data-ui] ~ output:empty { display: none; } /* une liste n'affiche pas de valeur à droite : elle prend sa place */
.knob select[data-ui] + .ui-seg:has(~ output:empty), .knob select[data-ui] + .ui-pick:has(~ output:empty) { grid-column: span 2; }
input[type=number]:not(:focus) { cursor: ns-resize; caret-color: transparent; user-select: none; }


/* Éditeur de kit (ui/kit.js, spec §14) : pads 4 × 3 à gauche, réglages du pad choisi à droite */
.kited { display: grid; grid-template-columns: minmax(0, 1fr) 260px; height: 100%; min-height: 0; }
.kited > section { min-height: 0; overflow: auto; padding: 8px; }
.kited header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.kited header span { color: var(--muted); font-size: 11px; }
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kpad { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 8px; height: 52px; padding: 6px 8px;
  text-align: left; background: var(--raise); border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
  transition: border-color .16s, background-color .16s, transform .1s; }
.kpad:hover { border-color: var(--c, var(--accent)); }
.kpad:active { transform: scale(.97); }
.kpad.on { background: color-mix(in srgb, var(--c, var(--accent)) 20%, var(--raise)); border-color: var(--c, var(--accent)); }
.kpad.empty { opacity: .55; border-style: dashed; }
.kpad b { color: var(--c-fx); font-size: 12px; }
.kpad .pn { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.kpad .pk { position: absolute; top: 4px; right: 6px; color: var(--faint); font-size: 10px; }
.kpad canvas { grid-column: 1 / -1; width: 100%; height: 18px; color: var(--c-fx); opacity: .8; }
.kpad.smp canvas { color: #4da3ff; }
.kdet { display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--line); }
.kdet header b { color: var(--c, var(--accent)); }
.kdet .knob { grid-template-columns: 64px minmax(0, 1fr) 44px; }
.kdet output { text-align: right; font-size: 11px; }
.kacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kacts button { height: 24px; padding: 0 8px; background: var(--raise); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.kacts button:hover { border-color: var(--accent); }