/* Base layer. The instrument is black; everything is type set on it. Reset, loader, corners and
   readouts, the record popover, tempo and the legacy panel mechanics. Linked in <head> after
   instrument-tokens.css; the keys follow in keyboard.css. */
html.note-loading, html.note-loading body { background:var(--note-casing); }
html.pool-loading #light-canvas { visibility:hidden; }
/* Loader: the NOTE mark and, beneath it, the scene name in 12px muted type. */
#pool-loader { position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--note-pad); background:var(--note-casing); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 800ms var(--note-ease),visibility 0s 800ms; }
html.note-loading #pool-loader { opacity:1; visibility:visible; pointer-events:auto; transition:none; }
.loading-scene { min-height:1.35em; margin:0; color:var(--note-text-muted); font:var(--note-weight-text) var(--note-text-xs)/var(--note-leading) var(--note-font); text-align:center; }
#scale-buttons button:disabled { color:var(--note-text-disabled); cursor:default; }
.loading-mark { width:64px; height:64px; opacity:0; animation:note-arrive 480ms var(--note-ease) 100ms forwards; }
html:not(.note-loading) .loading-mark { animation:none; opacity:0; transition:opacity var(--note-dur) var(--note-ease); }
@keyframes note-arrive { to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { #pool-loader { transition:none; } .loading-mark { animation:none; opacity:1; } }
* { margin: 0; padding: 0; box-sizing: border-box; }
/* iOS ignores user-scalable=no for double-tap zoom; 'manipulation' disables
   double-tap-to-zoom on every control while keeping taps instant. Playing
   surfaces get 'none' (all gestures are ours). */
* { touch-action: manipulation; }
#light-canvas, #keys, .key { touch-action: none; }
html, body { height: 100%; overflow: hidden; background: var(--note-casing); }
body {
  font-family: var(--note-font);
  font-variant-numeric: var(--note-numeric);
  color: var(--note-text);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button, input, select, textarea { font-family: inherit; }

#light-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Type set directly on the scene carries only a soft shadow for legibility. */
#hint {
  position: fixed;
  top: 58px;
  left: 16px;
  color: var(--note-text-muted);
  font: var(--note-weight-text) var(--note-text-xs)/var(--note-leading) var(--note-font);
  text-shadow: var(--note-legibility);
  pointer-events: none;
  transition: opacity 1.6s var(--note-ease);
}
#hint.gone { opacity: 0; }
#hint .hint-touch { display: none; }
@media (hover: none) { #hint .hint-keys { display: none; } #hint .hint-touch { display: inline; } }

/* ---- the corners ---- */
#corner-tl, #corner-tr, #corner-bl, #corner-br {
  position: fixed;
  z-index: 21;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#corner-tl { top: 14px; left: 14px; }
#corner-tr { top: 10px; right: 10px; }
#corner-bl { left: 14px; bottom: 14px; }
#corner-br { right: 14px; bottom: 14px; }
#corner-bl, #corner-br { transition: bottom var(--note-dur-frame) var(--note-ease); }
/* while the console is up it owns the bottom edge; the clusters step above it */
body:not(.kb-min) #corner-bl,
body:not(.kb-min) #corner-br { bottom: calc(var(--kb-h) + 20px); }

/* Readouts and corner controls are words, not chips. */
.chip, .corner-btn {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--note-target);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--note-text);
  font: var(--note-weight-text) var(--note-text-xs)/var(--note-leading) var(--note-font);
  font-variant-numeric: var(--note-numeric);
  cursor: pointer;
}
.corner-btn:hover { color: var(--note-text); }
/* the readout: what's sounding, whatever played it. At rest the last thing
   played stays put and dims — it is never blanked mid-fade. */
#note-box { cursor: default; opacity: 0.56; transition: opacity 0.5s var(--note-ease); }
#note-box.sounding { opacity: 1; transition: opacity 0.12s var(--note-ease); }
#note-readout { min-width: 1.6em; }



/* record */
#record-toggle.recording { color: var(--note-danger); }
#record-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 24px));
  z-index: 22;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: var(--note-pad);
}
#record-menu.open { display: flex; }

/* The metronome in the Play panel is a word, not a glass button. */
.rail-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--note-target);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--note-text-faint);
  cursor: pointer;
}
.rail-btn svg { display: none; }
.rail-btn.active, .rail-btn.on { color: var(--note-text); }
#panel-audio #bpm-display { cursor: ns-resize; }

#root-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
#root-grid button {
  min-height: var(--note-target); padding: 0;
  border: 0; border-radius: 0; background: none;
  color: var(--note-text-faint);
  font: var(--note-text-sm) var(--note-font);
  cursor: pointer;
}
#root-grid button.active { color: var(--note-text); font-weight: var(--note-weight-label); }


/* pitch guide while touching the dark */
#pitch-guide { position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity var(--note-dur) var(--note-ease); }
#pitch-guide.show { opacity: 1; }
.guide-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--note-rule); }
.guide-line.root { background: var(--note-track); }
#note-tag {
  position: absolute; transform: translate(-50%, -160%);
  font: var(--note-weight-text) var(--note-text-xs)/var(--note-leading) var(--note-font);
  color: var(--note-text);
  text-shadow: var(--note-legibility);
  white-space: nowrap;
}

/* takes list + count */
#takes-count {
  margin-left: 8px;
  color: var(--note-text-muted);
  font-variant-numeric: var(--note-numeric);
}
#takes-menu {
  display: none;
  max-height: 44vh;
  overflow-y: auto;
  padding: 0;
  margin-top: 8px;
}
#takes-menu.open { display: block; }
#takes-empty { font-size: var(--note-text-sm); color: var(--note-text-muted); padding: 8px 0; }
.take-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0;
  border-radius: 0;
}
.take-name { flex: 1; font-size: var(--note-text-sm); color: var(--note-text); font-variant-numeric: var(--note-numeric); }
.take-dur { font-size: var(--note-text-sm); color: var(--note-text-muted); font-variant-numeric: var(--note-numeric); }
.take-btn {
  min-height: var(--note-target);
  padding: 0;
  font: var(--note-text-sm) var(--note-font);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--note-text-muted);
  cursor: pointer;
}
.take-btn:hover, .take-btn.playing { color: var(--note-text); }
.take-del { color: var(--note-danger); }

/* playback overlay: the take, on black */
#player-overlay {
  position: fixed; inset: 0;
  z-index: 60;
  display: none;
  align-items: center; justify-content: center;
  background: var(--note-casing);
}
#player-overlay.open { display: flex; }
#player-box { display: flex; flex-direction: column; gap: 16px; align-items: center; max-width: 86vw; }
#player-video { max-width: 86vw; max-height: 78vh; border-radius: 0; }
#player-close {
  min-height: var(--note-target);
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--note-text);
  font: var(--note-weight-text) var(--note-text-xs)/var(--note-leading) var(--note-font);
  cursor: pointer;
}
#record-menu button {
  padding: 0;
  font-size: var(--note-text-sm);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--note-text);
  cursor: pointer;
  white-space: nowrap;
}


/* ---- settings ---- */
.led {
  width: var(--note-dot); height: var(--note-dot);
  border-radius: 50%;
  background: var(--note-text-faint);
}
#record-toggle.recording .led {
  background: var(--note-danger);
  box-shadow: 0 0 8px var(--note-danger);
  animation: led-breathe 1.6s ease-in-out infinite;
}
@keyframes led-breathe { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { #record-toggle.recording .led { animation: none; } }
#bpm-display {
  display: flex; align-items: baseline; gap: 8px;
  cursor: ns-resize;
  user-select: none;
  -webkit-user-select: none;
}
#bpm-num {
  font-weight: var(--note-weight-light);
  font-size: var(--note-text-xl);
  line-height: var(--note-leading-display);
  color: var(--note-text);
  font-variant-numeric: var(--note-numeric);
}
.bpm-unit {
  font-weight: var(--note-weight-text);
  font-size: var(--note-text-xs);
  color: var(--note-text-muted);
}
#midi-ind {
  font-size: var(--note-text-xs);
  color: var(--note-text-disabled);
}
#midi-ind.on { color: var(--scene-accent); }
/* The Sound and scene panels: layering only; field-ui.css and instrument-frame.css place and paint them. */
#panel-audio, #panel-visual { z-index: 30; }
.panel-group { margin-bottom: 24px; }
.panel-group-title {
  font-weight: var(--note-weight-text); font-size: var(--note-text-xs);
  color: var(--note-text-muted); margin-bottom: 8px;
}
.panel-row {
  display: flex; align-items: center; gap: 16px; margin-bottom: 8px;
  font-size: var(--note-text-sm);
}
.panel-row label { flex: initial; color: var(--note-text-muted); }
.panel-row input[type=range] { flex: 1; }
.panel-val { flex: 0 0 48px; text-align: right; font-size: var(--note-text-sm); color: var(--note-text); font-variant-numeric: var(--note-numeric); }
.panel-segmented { display: flex; gap: 0 24px; flex: 1; flex-wrap: wrap; }
.panel-segmented button {
  position: relative;
  min-height: var(--note-target); padding: 0;
  font: var(--note-text-sm) var(--note-font);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--note-text-faint);
  cursor: pointer;
}
.panel-segmented button:hover { color: var(--note-text); }
.panel-segmented button.active { color: var(--note-text); font-weight: var(--note-weight-label); }
#panel-overlay {
  position: fixed; inset: 0; z-index: 25; display: none;
}
#panel-overlay.open { display: block; }

#stats {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  font: var(--note-weight-text) var(--note-text-xs)/var(--note-leading) var(--note-font);
  color: var(--note-text-muted);
  text-shadow: var(--note-legibility);
  z-index: 15;
  display: none;
  font-variant-numeric: var(--note-numeric);
}

/* Type on a bright scene keeps a stronger shadow. */
body.pale-scene #hint, body.pale-scene #note-tag { text-shadow: 0 0 12px #000a, 0 0 2px #0008; }
body.light-ground .guide-line { background: #0d0d0c1f; }
body.light-ground .guide-line.root { background: #0d0d0c40; }

#fatal-overlay {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: var(--note-casing); color: var(--note-text);
  font-size: var(--note-text-sm); padding: 40px; text-align: center; z-index: 100;
}