/* Layout of the compose page. See docs/UI_COMPONENTS.md and docs/RENDERING.md. */

.ui { position: fixed; inset: 0; }

.boot { position: fixed; inset: 0; display: grid; place-items: center; background: #000; z-index: 90; color: rgb(var(--fg) / .5); }

.desktop-only {
  position: fixed; inset: 0; z-index: 95; background: #000; display: grid; place-content: center; text-align: center;
  padding: 24px; gap: .5em;
}
.desktop-only h1 { font-weight: 500; margin: 0; }
.desktop-only p { margin: 0; color: rgb(var(--fg) / .7); }

/* ---- top bar (port of Session.drawTabs) ------------------------------------------------ */
.topbar {
  position: absolute; left: 0; right: 0; top: var(--margin);
  display: flex; justify-content: center; align-items: flex-start; gap: 3.333vw;
  z-index: 60; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.menu-open .topbar > * { pointer-events: none; }

.tab {
  display: inline-grid; justify-items: center; font-size: 2.5vh; line-height: 1.35; white-space: nowrap;
  font-weight: 300; color: rgb(var(--fg) / .25);
  transition: transform 500ms cubic-bezier(.1, .7, .3, 1);
  will-change: transform; cursor: default;
}
/* reserve the width of the medium weight so the light (hover) state never moves neighbours */
.tab::after { content: attr(data-text); grid-area: 1 / 1; font-weight: 500; visibility: hidden; height: 0; }
.tab-text { grid-area: 1 / 1; }
.tab:hover { color: rgb(var(--fg)); cursor: pointer; }
.tab.active { font-weight: 500; color: rgb(var(--fg)); cursor: default; }
.tab.active:hover { color: rgb(var(--fg)); }
.tab.fresh.active { animation: tab-fade 850ms linear both; }
.bloom.active { cursor: default; }
.bloom.active:hover { cursor: default; }
@keyframes tab-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- home ------------------------------------------------------------------------------------ */
.home { position: absolute; inset: 0; pointer-events: none; }
.quote {
  position: absolute; left: 50%; top: 92%; transform: translate(-50%, -50%);
  margin: 0; white-space: nowrap; text-align: center;
  font-weight: 500; font-size: 2vh; line-height: 1; color: rgb(var(--fg) / .5);
  opacity: 0;
}
.quote.in { animation: quote-in 850ms linear forwards; }
@keyframes quote-in { to { opacity: 1; } }
.quote-credit {
  position: absolute; left: 50%; top: 94.667%; transform: translate(-50%, -50%);
  margin: 0; white-space: nowrap; font-size: calc(100vh / 70); line-height: 1; color: rgb(64 61 55);
}
/* two small icons hinting at the drawers; they slide out when a drawer opens */
.edge-hint {
  position: absolute; top: 50%; width: calc(100vh / 35); height: calc(100vh / 35); transform: translate(-50%, -50%);
  opacity: .5; transition: transform 208ms linear;
}
.edge-hint.left { left: calc(100vh / 30 + 100vh / 70); }
.edge-hint.right { right: calc(100vh / 30 + 100vh / 70); transform: translate(50%, -50%); }
.edge-hint.left.away { transform: translate(calc(-50% - 7.2vh), -50%); }
.edge-hint.right.away { transform: translate(calc(50% + 7.2vh), -50%); }

/* ---- fade-from-black regions (old blackOpa1..4) ------------------------------------------------ */
.blackouts { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.blackout { position: absolute; background: #000; opacity: 0; }
.blackout.run { animation: blackout 425ms linear forwards; }
@keyframes blackout { from { opacity: 1; } to { opacity: 0; } }
.blackout.screen { inset: 0; }
.blackout.controls-left { left: 0; width: 37.5vw; bottom: 0; height: 12.24vh; }
.blackout.controls-right { right: 0; width: 15.625vw; bottom: 0; height: 12.24vh; }
.blackout.context { left: 62.5vw; width: 21.875vw; bottom: 0; height: 12.24vh; }
.blackout.grid { left: 0; right: 0; top: calc(var(--grid-y) - 1vh); height: 72.23vh; }
.blackout.ruler { left: 0; right: 0; top: 81.84vh; height: 5.1vh; }

/* everything drawn under an open drawer is dimmed (the original's dark rectangle) */
.home, .loop-view, .struct-view { transition: opacity 375ms linear; }
.ui:has(.drawers.is-open) .home, .ui:has(.drawers.is-open) .loop-view, .ui:has(.drawers.is-open) .struct-view,
.ui:has(.drawers.is-open) .topbar { opacity: .12; }
.topbar { transition: opacity 375ms linear; }

/* ---- loop view ---------------------------------------------------------------- */
.loop-view { position: absolute; inset: 0; pointer-events: none; }
.loop-view > * { pointer-events: auto; }
.loop-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  font-size: var(--fs-md); color: rgb(var(--fg) / .33); pointer-events: none;
}

/* the note grid. Geometry tokens live in tokens.css; the scene reads this element's rectangle. */
.grid-frame {
  --cw: calc(var(--grid-w) / 64);
  --rows: 24;
  --rh: calc(var(--grid-h) / (var(--rows) - 1));
  --accent: 255 245 220;
  position: absolute; left: var(--grid-x); top: var(--grid-y); width: var(--grid-w); height: var(--grid-h);
  pointer-events: none;
}
.grid-hit { position: absolute; inset: -2vh -1vh; touch-action: none; pointer-events: none; }
.grid-frame.interactive .grid-hit { pointer-events: auto; }
.grid-hit.can-add { cursor: pointer; }
.grid-hit.over-note { cursor: grab; }
.grid-hit.dragging { cursor: grabbing; }

.grid-dots {
  position: absolute; left: calc(var(--cw) / -2); top: calc(var(--rh) / -2);
  width: calc(var(--cw) * 64); height: calc(var(--rh) * var(--rows));
  background-image: radial-gradient(circle at 50% 50%, rgb(var(--fg) / .4) .5px, transparent .9px);
  background-size: var(--cw) var(--rh);
  opacity: 0;
}
.grid-dots.hot {
  background-image: radial-gradient(circle at 50% 50%, rgb(var(--fg)) .5px, transparent .9px);
  -webkit-mask-image: radial-gradient(circle at calc(var(--mx, -999px) + var(--cw) / 2) calc(var(--my, -999px) + var(--rh) / 2), #000, transparent calc(var(--grid-w) / 6));
  mask-image: radial-gradient(circle at calc(var(--mx, -999px) + var(--cw) / 2) calc(var(--my, -999px) + var(--rh) / 2), #000, transparent calc(var(--grid-w) / 6));
}
.grid-frame.v0 .grid-dots { opacity: 1; }

.grid-lines {
  position: absolute; inset: 0; opacity: 0;
  border-right: 1px solid rgb(var(--fg) / .2);
  background-image:
    linear-gradient(to right, rgb(var(--fg) / .2) 1px, transparent 1px),
    linear-gradient(to right, rgb(var(--fg) / .125) 1px, transparent 1px);
  background-size: calc(var(--cw) * 16) 100%, calc(var(--cw) * 4) 100%;
}
.grid-frame.on .grid-lines { opacity: 1; }

.playhead { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: rgb(var(--fg)); will-change: transform; }
.marquee {
  position: fixed; z-index: 4; pointer-events: none;
  border: 1px solid rgb(var(--accent)); background: rgb(var(--accent) / .17);
}
.note-info {
  position: absolute; display: grid; gap: .2vh; pointer-events: none; z-index: 3; transform: translateY(-100%);
}
.note-info.right { text-align: right; transform: translate(-100%, -100%); }
.note-info-name { font-weight: 500; font-size: var(--fs-lg); order: 2; line-height: 1.1; }
.note-info-step { font-size: var(--fs-sm); order: 1; color: rgb(var(--fg) / .8); }
@keyframes fade-in { from { opacity: 0; } }

/* time bar */
.timebar {
  --cw: calc(var(--grid-w) / 64);
  position: absolute; left: var(--grid-x); width: var(--grid-w);
  top: calc(var(--grid-y) + var(--grid-h) + 2.55vh); height: 2.04vh; cursor: pointer;
}
.timebar-ticks {
  position: absolute; inset: 0; border-right: 1px solid rgb(var(--fg) / .25);
  background-image:
    linear-gradient(to right, rgb(var(--fg) / .25) 1px, transparent 1px),
    linear-gradient(to right, rgb(var(--fg) / .125) 1px, transparent 1px),
    linear-gradient(to right, rgb(var(--fg) / .125) 1px, transparent 1px);
  background-size: calc(var(--cw) * 16) 100%, calc(var(--cw) * 4) 100%, var(--cw) 75%;
  background-position: 0 0, 0 0, 0 50%;
  background-repeat: repeat-x;
}
.timebar-labels { position: absolute; left: 0; right: 0; top: 100%; }
.timebar-labels span {
  position: absolute; left: calc(var(--i) * var(--cw)); top: .55vh; transform: translateX(-50%);
  font-size: calc(100vh / 90); color: rgb(var(--fg) / .33); font-variant-numeric: tabular-nums;
}
.timebar-cursor { position: absolute; top: 0; height: 100%; width: 1px; left: calc(var(--step) * var(--cw)); background: rgb(var(--fg)); }

/* track bar */
.trackbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14vh;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; pointer-events: none;
}
.trackbar > * { pointer-events: none; }
.track-icons { grid-column: 2; display: flex; gap: calc(var(--icon) / 2); }
.track-icon {
  position: relative; width: calc(100vh / 15); height: 10vh; padding-bottom: var(--margin);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2.2vh;
  pointer-events: auto; cursor: pointer; transition: opacity 320ms linear;
}
.track-icon.dim { opacity: .25; }
.track-petal { width: calc(100vh / 34); height: calc(100vh / 34); display: block; }
.track-name { font-size: calc(100vh / 65); line-height: 1; }
/* "MUTED" sits over the (half-transparent) petal */
.track-muted { position: absolute; left: 50%; bottom: calc(var(--margin) + calc(100vh / 34) / 2 + 2.2vh + calc(100vh / 65)); transform: translate(-50%, 50%); font-size: calc(100vh / 65); color: rgb(var(--fg) / .5); opacity: 0; line-height: 1; }
.track-icon.muted .track-muted { opacity: 1; }

/* the plus is invisible until the pointer is low on the screen or a track is open */
.plus {
  grid-column: 3; justify-self: start; align-self: end; pointer-events: auto; cursor: pointer;
  width: calc(100vh / 15); height: calc(100vh / 15); margin: 0 0 calc(100vh - 91.84vh - 100vh / 30) calc(100vh / 15 / 4);
  display: grid; place-items: center; opacity: 0; transition: opacity 213ms linear;
}
.plus img { width: calc(100vh / 40); height: calc(100vh / 40); display: block; }
.plus.half { opacity: .5; }
.plus:hover:not(:disabled) { opacity: 1; transition: none; }
.menu-open .plus { opacity: 0; }
.trackbar.plus-open .plus { opacity: 1; }
.plus:disabled { cursor: default; }
.trackbar.track-menu .plus { visibility: hidden; }
.trackbar.empty .plus { grid-column: 2; justify-self: center; margin-left: 0; }

/* controls row */
.controls { --aux: calc((100vw - 10vh - 4.6667vw) / 16); position: absolute; inset: 0; pointer-events: none; }
.controls > * { position: absolute; pointer-events: auto; top: 91.84vh; transform: translate(-50%, -50%); }
.controls .tempo { left: calc(var(--grid-x) + var(--aux)); }
.controls .tempo .scroller-text { left: calc(5vw - 10vw / 3.2); }
.controls .click { left: calc(var(--grid-x) + var(--aux) * 3 + .667vw); top: calc(91.84vh - .83vh); }
.controls .record { left: calc(var(--grid-x) + var(--aux) * 5 + 1.333vw); top: calc(91.84vh - .83vh); }
.ctl-label { font-size: var(--fs-sm); color: rgb(var(--fg) / .5); pointer-events: none !important; transform: translate(-50%, -100%) !important; top: 94.3vh !important; white-space: nowrap; }
.controls .click-label { left: calc(var(--grid-x) + var(--aux) * 3 + .667vw); }
.controls .record-label { left: calc(var(--grid-x) + var(--aux) * 5 + 1.333vw); }
.controls .context { left: 70vw; }
.view-btn { width: calc(100vh / 35); height: calc(100vh / 35); opacity: .25; }
.view-btn img { width: 100%; height: 100%; display: block; }
.view-btn:hover, .view-btn.current { opacity: 1; }
.view-btn[data-view="2"] { left: calc(100vw - 10vh); }
.view-btn[data-view="1"] { left: calc(100vw - 10vh - var(--icon)); }
.view-btn[data-view="0"] { left: calc(100vw - 10vh - var(--icon) * 2); }

/* generate flow ----------------------------------------------------------------- */
.generate { position: fixed; inset: 0; z-index: 30; }
.generate-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .78); animation: fade-in var(--t-med) both; }
.generate-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgb(var(--fg) / .6); margin: 0; }
.generate-modes { position: absolute; inset: 0; --c: var(--fg); }
.generate-title { position: absolute; left: 50%; top: calc(50vh - 100vh / 8 * 2.5); transform: translateX(-50%); margin: 0; font-weight: 300; font-size: calc(100vh / 40); line-height: 1.2; white-space: pre; }
.generate-title .kind { color: rgb(var(--c)); font-weight: 300; }
.generate-option {
  position: absolute; width: 0; height: 0; padding: 0;
  left: calc(50vw - (var(--n) - 1) * 100vh / 6 + var(--i) * 100vh / 3); top: calc(50vh - 100vh / 15);
  cursor: pointer;
}
.generate-option::before { content: ""; position: absolute; left: calc(100vh / -7); top: calc(100vh / -7); width: calc(100vh / 3.5); height: calc(100vh / 3.5); } /* hit area, as in the original */
.generate-option img { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: calc(100vh / 7); height: calc(100vh / 7); opacity: .25; pointer-events: none; }
.generate-option.sm img { width: calc(100vh / 8); height: calc(100vh / 8); }
.generate-option span { position: absolute; left: 0; top: calc(100vh / 8); transform: translateX(-50%); white-space: nowrap; font-size: calc(100vh / 40); font-weight: 300; line-height: 1.2; color: rgb(var(--fg) / .333); pointer-events: none; }
.generate-option:hover:not(:disabled) img { opacity: 1; }
.generate-option:hover:not(:disabled) span { color: rgb(var(--fg)); }
.generate-option:disabled { cursor: not-allowed; }
.generate-modes .generate-cancel { position: absolute; left: 50%; top: calc(50vh + 100vh / 8 * 2); transform: translateX(-50%); padding: 0; font-size: calc(100vh / 50); font-weight: 300; line-height: 1.2; letter-spacing: 0; }
.generate-error { position: absolute; left: 50%; top: 68vh; transform: translateX(-50%); color: rgb(var(--danger)); margin: 0; font-size: var(--fs-md); }

.generate-review { position: absolute; inset: 0; --c: var(--fg); }
.generate-hint { position: absolute; left: 50%; top: calc(var(--grid-y) / 1.05); transform: translateX(-50%); margin: 0; font-size: calc(100vh / 60); color: rgb(var(--fg) / .5); }
.quads {
  position: absolute; left: var(--grid-x); top: calc(var(--grid-y) + 3.92vh);
  width: var(--grid-w); height: var(--grid-h);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .667vw;
}
.quad { position: relative; border: 1px solid rgb(var(--fg) / .25); border-radius: var(--radius); overflow: hidden; background: transparent; text-align: left; cursor: pointer; }
.quad:hover, .quad.hover { border-color: rgb(var(--fg) / .5); }
.quad-key { position: absolute; left: 1.7vh; top: 1.7vh; display: grid; gap: 0; z-index: 1; pointer-events: none; }
.quad-key b { font-weight: 300; font-size: calc(100vh / 50); color: rgb(var(--fg) / .5); line-height: 1.1; }
.quad-key i { font-style: normal; font-size: calc(100vh / 75); color: rgb(var(--fg) / .33); }
.roll { position: absolute; inset: 0; width: 100%; height: 100%; }
.roll-note { stroke: rgb(var(--c)); stroke-linecap: round; }
.roll-guide { stroke: rgb(var(--fg) / .125); stroke-width: .08; }
.quad-cursor { stroke: rgb(var(--fg)); stroke-width: .12; }

.generate-bar { --aux: calc((100vw - 10vh - 4.6667vw) / 16); position: absolute; inset: 0; pointer-events: none; }
.generate-bar > * { position: absolute; pointer-events: auto; top: 91.84vh; transform: translate(-50%, -50%); }
.generate-bar .tempo { left: calc(var(--grid-x) + var(--aux)); }
.generate-bar .solo { left: calc(var(--grid-x) + var(--aux) * 5 + 1.333vw); top: calc(91.84vh - .83vh); }
.generate-bar .solo-label { left: calc(var(--grid-x) + var(--aux) * 5 + 1.333vw); }
.generate-bar .context { left: calc(var(--grid-x) + var(--aux) * 3 + 2vw); }
.generate-bar .text-btn { padding: 0; line-height: 1; letter-spacing: 0; font-weight: 300; }
.generate-bar .generate-cancel { left: calc(100vw - var(--grid-x) * 6.6); transform: translate(-100%, -50%); }
.generate-bar .generate-regen { left: calc(100vw - var(--grid-x) * 1.7); transform: translate(-100%, -50%); font-weight: 500; opacity: .333; }
.generate-bar .generate-regen:hover { color: rgb(var(--c)); opacity: 1; }

/* studio view ---------------------------------------------------------------------- */
.studio {
  --gap: .667vw; --c: 255 245 220;
  --fx: calc((var(--grid-w) - 11.111vw - 7 * var(--gap)) / 7);   /* one effect/knob column */
  --ay: calc((var(--grid-h) - 2 * var(--gap)) / 3);              /* one box row */
  position: absolute; left: var(--grid-x); top: var(--grid-y); width: var(--grid-w); height: var(--grid-h);
  display: grid; grid-template-columns: 11.111vw 1fr; grid-template-rows: repeat(3, 1fr); gap: var(--gap);
}
.box { position: relative; border: 1px solid rgb(var(--fg) / .25); border-radius: var(--radius); min-width: 0; min-height: 0; }
.box-title { position: absolute; left: calc(var(--gap) * 1.2); top: calc(var(--gap) + .2vh); font-size: calc(100vh / 60); line-height: 1; color: rgb(var(--c)); white-space: nowrap; }
.box-head { position: absolute; inset: 0; pointer-events: none; }
.box-head .toggle { position: absolute; right: calc(var(--gap) * 2); top: calc(var(--gap) * 2); transform: translate(50%, -50%); pointer-events: auto; cursor: pointer; }
.fxbox.off .box-title, .fxbox.off .box-knobs { opacity: .333; }
.box-knobs { position: absolute; inset: 0; pointer-events: none; }
.box-knobs .knob { pointer-events: auto; left: calc(var(--fx) / 2 + var(--j, 0) * (var(--fx) + var(--gap))); top: calc(var(--ay) / 2 + var(--gap) * .7); }
.studio.drums [class*="area-d"] .box-knobs .knob { left: calc(var(--fx) / 2); top: calc(var(--ay) / 2 + var(--gap) * 1.5); }
.studio.drums [class*="area-d"] .box-knobs .knob:nth-child(2) { top: calc(var(--ay) * 1.5 - var(--gap)); }
.knob { position: absolute; width: calc(100vh / 15); height: calc(100vh / 15); transform: translate(-50%, -50%); cursor: grab; touch-action: none; }
.knob.dragging { cursor: grabbing; }
.knob-label, .knob-value { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; line-height: 1; pointer-events: none; }
.knob-label { bottom: calc(100% + 100vh / 170 + .35vh); font-size: calc(100vh / 65); }
.knob-value { top: calc(100% + 100vh / 170 + .2vh); font-size: calc(100vh / 55); }
.knob-dial { width: 100%; height: 100%; overflow: visible; display: block; }
.knob-ring { fill: none; stroke: rgb(var(--fg)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.knob.automating .knob-ring { fill: rgb(var(--c) / .5); }
.knob-needle { stroke: rgb(var(--fg)); stroke-width: 1; vector-effect: non-scaling-stroke; }

.studio-visual { grid-column: 1; grid-row: 1; display: grid; place-items: center; }
.studio-petal { width: calc(100vh / 14); height: calc(100vh / 14); display: block; }
.studio-fader { grid-column: 1; grid-row: 2 / 4; --g: 1; }
.fader-track { position: absolute; left: calc(50% - var(--gap) * 2.5); width: calc(var(--gap) * 5); top: calc(var(--gap) * 5); bottom: calc(var(--gap) * 8); touch-action: none; cursor: grab; }
.fader-track:active { cursor: grabbing; }
.meter { position: absolute; bottom: 0; width: calc(var(--gap) * 2); height: calc(var(--v, 0) * 100%); background: rgb(var(--c)); }
.meter.l { left: 0; }
.meter.r { left: calc(var(--gap) * 3); }
.fader-handle { position: absolute; left: 0; width: 100%; top: calc((1 - var(--g)) * 100%); height: calc(100vh / 250); background: rgb(var(--fg)); }
.fader-track::before, .fader-track::after { content: ""; position: absolute; top: 0; bottom: 0; width: calc(var(--gap) * 2); border: 1px solid rgb(var(--fg) / .25); box-sizing: border-box; }
.fader-track::before { left: 0; }
.fader-track::after { left: calc(var(--gap) * 3); }
.fader-text { position: absolute; left: 0; right: 0; top: calc(var(--gap) * 1.7 + var(--ay) * 1.5 + 100vh / 25.5 + .2vh); text-align: center; font-size: calc(100vh / 55); line-height: 1; }

.studio-main { grid-column: 2; grid-row: 1 / 4; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(3, 1fr); gap: var(--gap); }
.area-osc1 { grid-column: 1 / 4; grid-row: 1; } .area-env1 { grid-column: 4 / 8; grid-row: 1; }
.area-osc2 { grid-column: 1 / 4; grid-row: 2; } .area-env2 { grid-column: 4 / 8; grid-row: 2; }
.area-fx1 { grid-column: 1; grid-row: 3; } .area-fx2 { grid-column: 2; grid-row: 3; }
.area-fx3 { grid-column: 3 / 6; grid-row: 3; } .area-fx4 { grid-column: 6 / 8; grid-row: 3; }
.area-d0 { grid-column: 1; grid-row: 1 / 3; } .area-d1 { grid-column: 2; grid-row: 1 / 3; } .area-d2 { grid-column: 3; grid-row: 1 / 3; }
.area-d3 { grid-column: 4; grid-row: 1 / 3; } .area-d4 { grid-column: 5; grid-row: 1 / 3; } .area-d5 { grid-column: 6; grid-row: 1 / 3; } .area-d6 { grid-column: 7; grid-row: 1 / 3; }

/* automation view ------------------------------------------------------------------- */
.automation { position: absolute; left: var(--grid-x); top: var(--grid-y); width: var(--grid-w); height: var(--grid-h); --c: 255 245 220; }
.auto-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.auto-line { stroke: rgb(var(--fg) / .125); stroke-width: 2; vector-effect: non-scaling-stroke; }
.automation.active .auto-line { stroke: rgb(var(--c) / .5); }
.auto-dots { position: absolute; inset: 0; pointer-events: none; }
.auto-dot { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: rgb(var(--fg) / .25); }
.automation.active .auto-dot { background: rgb(var(--c)); }
.auto-dot.now { width: calc(100vh / 90); height: calc(100vh / 90); margin: calc(100vh / -180) 0 0 calc(100vh / -180); background: rgb(var(--fg)); }
.auto-hit { position: absolute; inset: -1vh; cursor: grab; touch-action: none; }
.auto-label { position: absolute; z-index: 3; pointer-events: none; display: grid; transform: translateY(-100%); }
.auto-label.right { transform: translate(-100%, -100%); text-align: right; }
.auto-value { font-weight: 500; font-size: var(--fs-lg); order: 2; line-height: 1.1; }
.auto-step { font-size: var(--fs-sm); order: 1; color: rgb(var(--fg) / .8); }

/* drawers (port of the drawer code in Session.draw) ---------------------------------------- */
.drawers { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.drawer { position: absolute; inset: 0; pointer-events: none; }

/* content fades in over ~283 ms (15/255 per frame) and slides 4vh (H/25) over ~208 ms */
.drawer > * {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 283ms linear, transform 208ms linear, visibility 0s linear 283ms;
}
.drawer.open > * { opacity: 1; visibility: visible; transition-delay: 0s; }
.drawer.open > .drawer-list, .drawer.open > .drawer-add, .drawer.open > .drawer-search { pointer-events: auto; }
.drawer-loops > .drawer-title, .drawer-loops > .drawer-empty, .drawer-loops > .drawer-add { transform: translateX(-4vh); }
.drawer-structs > .drawer-title, .drawer-structs > .drawer-empty, .drawer-structs > .drawer-add { transform: translateX(4vh); }
.drawer.open > .drawer-title, .drawer.open > .drawer-empty, .drawer.open > .drawer-add { transform: none; }

.drawer-title { position: absolute; top: var(--margin); margin: 0; display: flex; align-items: flex-start; gap: 1.56vh; font-weight: 300; font-size: 2.5vh; line-height: 1; }
.drawer-title img { width: calc(100vh / 45); height: calc(100vh / 45); margin-top: .67vh; }
.drawer-loops .drawer-title { left: var(--margin); }
.drawer-structs .drawer-title { right: var(--margin); flex-direction: row-reverse; }

/* the search text is dim (1/3) even while typing */
.drawer-search {
  position: absolute; top: var(--margin); width: 22ch; background: none; border: 0; outline: none; padding: 0; margin: 0;
  font-size: calc(100vh / 45); line-height: 1; color: rgb(var(--fg) / .33); user-select: text; -webkit-user-select: text;
  caret-color: rgb(var(--fg) / .5);
}
.drawer-search::placeholder { color: rgb(var(--fg) / .33); }
.drawer-loops .drawer-search { right: var(--margin); text-align: right; }
.drawer-structs .drawer-search { left: var(--margin); text-align: left; }

.drawer-list { position: absolute; top: 0; bottom: 0; width: 20vw; margin: 0; padding: 0; list-style: none; }
.drawer-loops .drawer-list { left: 0; } .drawer-structs .drawer-list { right: 0; }
.drawer-empty { position: absolute; top: 50%; margin: 0; transform: translateY(-50%); font-size: 2vh; color: rgb(var(--fg) / .33); white-space: nowrap; }
.drawer-loops .drawer-empty { left: var(--margin); } .drawer-structs .drawer-empty { right: var(--margin); text-align: right; }

.drawer-item { position: absolute; left: 0; right: 0; cursor: pointer; outline: none; --w: 1; }
.drawer-item.dragging .drawer-blooms { visibility: hidden; }

/* each row's circles shift right (left, for structures) by up to three radii as the pointer nears */
.drawer-blooms { position: absolute; top: 50%; display: flex; align-items: center; gap: calc(var(--r) * .6); transform: translateY(-50%) translateX(calc(var(--k) * var(--r) * 3)); }
.drawer-loops .drawer-blooms { left: var(--margin); }
.drawer-structs .drawer-blooms { right: var(--margin); transform: translateY(-50%) translateX(calc(var(--k) * var(--r) * -3)); }
.drawer-bloom { width: calc(var(--r) * 2); height: calc(var(--r) * 2); flex: none; transform: scale(calc(1 + var(--k) / 3)); }
.drawer-item-empty { display: grid; place-items: center; min-width: calc(var(--r) * 2); font-size: calc(100vh / 70); color: rgb(var(--fg) / .5); }
.drawer-item.hover .drawer-item-empty { color: rgb(var(--fg)); }

.drawer-info { position: absolute; top: 50%; display: grid; gap: .5vh; transform: translateY(-50%); opacity: 0; white-space: nowrap; pointer-events: none; }
.drawer-item.hover .drawer-info { opacity: 1; transition: opacity 255ms linear; }
.drawer-loops .drawer-info { left: calc(var(--margin) + var(--r) * 4 + var(--k) * var(--r) * 3); }
.drawer-structs .drawer-info { right: calc(var(--margin) + var(--r) * 3.6 * var(--w) + var(--k) * var(--r) * 3); text-align: right; justify-items: end; }
.drawer-name { font-weight: 500; font-size: 2.5vh; line-height: 1; }
.drawer-meta { font-size: calc(100vh / 65); line-height: 1; color: rgb(var(--fg) / .5); }

/* the "+" is dim (1/3) until hovered */
.drawer-add { position: absolute; bottom: var(--margin); width: var(--margin); height: var(--margin); display: grid; place-items: center; cursor: pointer; }
.drawer-add img { width: calc(100vh / 35); height: calc(100vh / 35); opacity: .333; }
.drawer-add:hover img { opacity: 1; }
.drawer-loops .drawer-add { left: var(--margin); } .drawer-structs .drawer-add { right: var(--margin); }

.drawer-preview { position: absolute; inset: 0; pointer-events: none !important; }
.drawer-preview-bloom { position: absolute; top: 50vh; transform: translate(-50%, -50%); }
.drawer-loops .drawer-preview-bloom { left: 62.5vw; width: 33.33vh; height: 33.33vh; }
.drawer-structs .drawer-preview-bloom { left: calc(35.71vw + var(--k) * 11.11vw); width: 12.5vh; height: 12.5vh; }

.drag-ghost { position: fixed; left: 0; top: 0; width: 13.33vh; height: 13.33vh; pointer-events: none; will-change: transform; }
.drag-ghost.struct { width: 6.67vh; height: 6.67vh; }

/* structure view ---------------------------------------------------------------------------- */
.struct-view { position: absolute; inset: 0; pointer-events: none; }
.struct-view > * { pointer-events: auto; }
.struct-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-size: calc(100vh / 50); color: rgb(var(--fg) / .33); pointer-events: none !important; }
.struct-row { position: absolute; left: 0; right: 0; top: 50vh; height: 0; display: flex; justify-content: center; pointer-events: none; }
.section {
  position: relative; flex: none; width: calc(100vw / 6); height: 0; pointer-events: none; outline: none;
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast);
}
.section::before { content: ""; position: absolute; left: 0; right: 0; top: calc(100vw / -12); height: calc(100vw / 6); pointer-events: auto; cursor: pointer; }
.section.dragged { transition: none; z-index: 3; cursor: grabbing; }
.section.dragged::before { cursor: grabbing; }
.section:focus-visible::before { outline: 1px solid rgb(var(--fg) / .3); border-radius: 50%; }
.section-bloom { position: absolute; left: 50%; top: 0; width: 10vw; height: 10vw; transform: translate(-50%, -50%); pointer-events: none; }
.section-name { position: absolute; left: 50%; top: 10vw; transform: translate(-50%, -50%); font-size: calc(100vh / 45); white-space: nowrap; pointer-events: none; }
.section-count { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); font-size: calc(100vh / 60); color: rgb(var(--fg) / .5); pointer-events: none; }
.section .repeats { position: absolute; left: calc(50% + 10vw / 6); top: -10vw; transform: translate(-50%, -50%); pointer-events: auto; }
.section.dim { opacity: .5; }
.section.slot { width: calc(100vw / 6 * var(--span, 1)); }
.section.slot.no .section-name { color: rgb(var(--danger)); }

.struct-controls { --aux: calc((100vw - 10vh - 4.6667vw) / 16); position: absolute; inset: 0; pointer-events: none; }
.struct-controls > * { position: absolute; pointer-events: auto; top: 91.84vh; transform: translate(-50%, -50%); }
.struct-controls .tempo { left: 25vw; }
.struct-controls .apply-tempo { left: calc(25vw + var(--aux) * 1.5); top: calc(91.84vh - .83vh); }
.struct-controls .apply-tempo-label { left: calc(25vw + var(--aux) * 1.5); }
.struct-controls .transpose { left: calc(75vw - var(--aux) * 1.4); }
.struct-controls .apply-transpose { left: 75vw; top: calc(91.84vh - .83vh); }
.struct-controls .apply-transpose-label { left: 75vw; }
.struct-controls .scroller.inactive { opacity: .5; }
.dice { width: 4vh; height: 4vh; left: 50vw; opacity: .5; }
.dice img { width: 100%; height: 100%; display: block; }
.dice:hover:not(:disabled), .dice:focus-visible { opacity: 1; }
.dice:disabled { opacity: .5; cursor: default; }
.dice.spin img { animation: dice-spin 2650ms linear; }
@keyframes dice-spin {
  0.0% { transform: rotate(0.0000rad) scale(1.4167); }
  5.03% { transform: rotate(1.9535rad) scale(1.2764); }
  10.06% { transform: rotate(3.6155rad) scale(1.1834); }
  15.09% { transform: rotate(5.0294rad) scale(1.1217); }
  20.13% { transform: rotate(6.2324rad) scale(1.0807); }
  25.16% { transform: rotate(7.2558rad) scale(1.0535); }
  30.19% { transform: rotate(8.1264rad) scale(1.0355); }
  35.22% { transform: rotate(8.8672rad) scale(1.0236); }
  40.25% { transform: rotate(9.4974rad) scale(1.0156); }
  45.28% { transform: rotate(10.0335rad) scale(1.0104); }
  50.31% { transform: rotate(10.4897rad) scale(1.0069); }
  55.35% { transform: rotate(10.8777rad) scale(1.0046); }
  60.38% { transform: rotate(11.2079rad) scale(1.0030); }
  65.41% { transform: rotate(11.4888rad) scale(1.0020); }
  70.44% { transform: rotate(11.7277rad) scale(1.0013); }
  75.47% { transform: rotate(11.9310rad) scale(1.0009); }
  80.5% { transform: rotate(12.1040rad) scale(1.0006); }
  85.53% { transform: rotate(12.2511rad) scale(1.0004); }
  90.57% { transform: rotate(12.3763rad) scale(1.0003); }
  95.6% { transform: rotate(12.4828rad) scale(1.0002); }
  100% { transform: rotate(12.5664rad) scale(1); }
}

/* record a melody ---------------------------------------------------------------------------- */
.generate-record { position: absolute; inset: 0; --c: 0 160 100; }
.rec-title { position: absolute; left: 50%; top: 27.5vh; transform: translateX(-50%); margin: 0; line-height: 1.2; font-weight: 300; font-size: calc(100vh / 50); color: rgb(var(--fg) / .5); }
.rec-bars { position: absolute; left: var(--grid-x); width: var(--grid-w); top: 50vh; height: 0; }
.rec-bar {
  position: absolute; left: calc(var(--i) * var(--grid-w) / 64); top: 0; width: calc(var(--grid-w) / 64 / 4);
  height: calc(var(--v, 0) * 23vh); min-height: 0; transform: translateY(-50%); background: rgb(var(--fg) / .5);
}
.generate.rec-live .rec-bar { background: rgb(255 0 0 / .5); }
.rec-status { position: absolute; left: 50%; bottom: 27.5vh; transform: translateX(-50%); line-height: 1.2; font-weight: 300; margin: 0; font-size: calc(100vh / 50); color: rgb(var(--fg) / .5); text-align: center; max-width: 60ch; }
.rec-status.error { color: rgb(var(--danger)); }
.generate-record .generate-bar .click-label { position: absolute; }
.generate-bar .generate-regen:disabled, .generate-bar .generate-cancel:disabled { opacity: .25; cursor: not-allowed; }
.generate-record .generate-bar .generate-cancel { left: calc(100vw - var(--grid-x) * 6); }
.generate-record .generate-bar .generate-regen { left: calc(100vw - var(--grid-x) * 1.9); }
.generate-record .generate-regen:disabled { opacity: .333; cursor: not-allowed; }

.generate-bar .click { left: calc(var(--grid-x) + var(--aux) * 3 + .667vw); top: calc(91.84vh - .83vh); }
.generate-bar .click-label { left: calc(var(--grid-x) + var(--aux) * 3 + .667vw); }
.generate-bar .ctl-label { top: 94.3vh; }

/* undo / redo: drawn but inert, as in the original */
.history { position: absolute; left: 0; top: 0; pointer-events: none; }
.history img { position: absolute; top: 5.1vh; width: calc(100vh / 35); height: calc(100vh / 35); transform: translate(-50%, -50%); pointer-events: auto; cursor: not-allowed; }
.history .undo { left: 10vh; opacity: .5; }
.history .redo { left: 15vh; opacity: .25; }