/* A paper score with an ink waveform strip, using the programme's palette. */
#studio {
  position:fixed;
  inset:0;
  z-index:7;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--program-ink);
  color-scheme:light;
}
.arc-studio button {
  background:var(--paper-light);
  border:1px solid var(--program-rule);
  border-radius:0;
  box-shadow:none;
  color:var(--program-ink);
  font:inherit;
  font-size:12px;
  padding:7px 10px;
  transition:background .14s, border-color .14s, translate .14s;
}
.arc-studio button:hover:not(:disabled) {
  background:var(--paper-deep);
  border-color:var(--program-ink);
  box-shadow:none;
  transform:none;
}
.arc-studio button:active:not(:disabled) { translate:0 1px; transform:none; filter:none; }
.arc-studio :is(button, input, canvas):focus-visible {
  outline:2px solid var(--cobalt);
  outline-offset:2px;
}
.arc-studio button:disabled { opacity:.48; cursor:default; }
.arc-studio .studio-primary {
  background:var(--cobalt);
  border-color:var(--cobalt);
  color:var(--paper-light);
  font-weight:700;
  box-shadow:3px 3px 0 var(--program-ink);
}
.arc-studio .studio-primary:hover:not(:disabled) {
  background:var(--program-ink);
  color:var(--paper-light);
  box-shadow:3px 3px 0 var(--cobalt);
}
.studio-header {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px clamp(14px,2vw,30px);
  background:var(--paper-light);
  border-bottom:2px solid var(--program-ink);
  flex:none;
}
.studio-header .program-brand { flex:none; }
.studio-header .program-brand span { display:none; }
.studio-heading {
  display:grid;
  gap:3px;
  flex:1;
  min-width:0;
  padding-left:14px;
  border-left:1px solid var(--program-rule);
}
.studio-heading h1 {
  margin:0;
  font:900 clamp(18px,2vw,28px)/1.15 var(--program-serif);
}
.studio-title {
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
  font-size:12px;
}
.studio-title strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-title small { color:var(--program-muted); font-size:11px; white-space:nowrap; }
.studio-save {
  font-size:11px;
  color:var(--program-muted);
  max-width:18ch;
  text-align:right;
}
.studio-header-actions { display:flex; align-items:center; gap:7px; flex:none; }
.studio-header-actions button { white-space:nowrap; }
.studio-header-actions .program-icon { width:14px; height:14px; }

.studio-layout {
  display:grid;
  grid-template-columns:clamp(198px,17.5vw,254px) minmax(0,1fr) clamp(214px,19vw,273px);
  flex:1;
  min-height:0;
}
.studio-sidebar, .studio-aside {
  padding:16px clamp(12px,1.25vw,20px) 22px;
  background:var(--paper);
  overflow:auto;
  scrollbar-width:thin;
}
.studio-sidebar { border-right:1px solid var(--program-ink); }
.studio-aside { border-left:1px solid var(--program-ink); }
.studio-center { display:flex; flex-direction:column; min-height:0; min-width:0; }
.studio-section-label {
  margin:0 0 10px;
  font:800 16px/1.3 var(--program-serif);
  color:var(--program-ink);
}
.studio-mode-tabs { display:grid; gap:5px; margin-bottom:20px; }
.arc-studio .studio-mode-tabs button {
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px;
  text-align:left;
  font-weight:700;
}
.studio-mode-tabs b { font:700 19px/1 var(--program-num); color:var(--program-muted); }
.studio-mode-tabs small { display:block; color:var(--program-muted); font:400 11px/1.4 -apple-system,sans-serif; }
.arc-studio .studio-mode-tabs button.active {
  background:var(--cobalt);
  border-color:var(--cobalt);
  color:var(--paper-light);
  box-shadow:3px 3px 0 var(--program-ink);
}
.studio-mode-tabs .active :is(b, small) { color:inherit; }

.arc-studio input:not([type=range], [type=checkbox], [type=file]) {
  width:100%;
  min-width:0;
  padding:6px 8px;
  color:var(--program-ink);
  background:var(--paper-light);
  border:1px solid var(--program-rule);
  border-radius:0;
  font-family:inherit;
  font-size:12px;
  line-height:1.4;
  font-variant-numeric:tabular-nums;
}
.arc-studio input[type=range] { width:100%; min-width:0; accent-color:var(--cobalt); }
.studio-field { display:block; min-width:0; margin-bottom:10px; }
.studio-field>span, .studio-field>small { display:block; color:var(--program-muted); }
.studio-field>span { margin-bottom:5px; font-size:12px; }
.studio-field>small { margin-top:5px; font-size:11px; line-height:1.55; }
.studio-fields-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.studio-separator { border:0; border-top:1px solid var(--program-rule); margin:17px 0; }
.studio-check { display:flex; align-items:center; gap:7px; margin:8px 0; font-size:12px; line-height:1.4; }
.studio-check input {
  appearance:none;
  display:grid;
  place-items:center;
  flex:none;
  width:15px;
  height:15px;
  margin:0;
  border:1px solid var(--program-muted);
  background:var(--paper-light);
  cursor:pointer;
  transition:background .14s;
}
.studio-check input:checked { border-color:var(--cobalt); background:var(--cobalt); }
.studio-check input:checked::after {
  content:"";
  width:7px;
  height:4px;
  border:solid var(--paper-light);
  border-width:0 0 2px 2px;
  transform:translateY(-1px) rotate(-45deg);
}
.studio-rate { display:flex; justify-content:space-between; margin:12px 0 5px; font-size:12px; }
.studio-rate b, .studio-selected-count { color:var(--cobalt); }
.studio-mini-actions, .studio-quantize-actions, .studio-auto-buttons { display:flex; flex-wrap:wrap; gap:5px; }
.studio-mini-actions { margin:0 0 10px; }
.studio-quantize-actions, .studio-auto-buttons { margin:8px 0 12px; }
.studio-quantize-actions>button, .studio-auto-buttons>button { flex:1 1 auto; }
.arc-studio .studio-sidebar button[data-act=audio],
.arc-studio .studio-quantize-actions button:first-child {
  color:var(--cobalt);
  border-color:var(--cobalt);
}
.studio-auto-status {
  background:var(--paper-light);
  border-left:3px solid var(--cobalt);
  padding:8px 10px;
  font-size:11px;
  line-height:1.6;
}
.studio-auto-status strong { font-size:12px; }
.studio-auto-hint, .studio-info-note, .studio-selection-empty, .studio-issues-ok {
  color:var(--program-muted);
  font-size:11px;
  line-height:1.65;
}
.studio-selection-empty { padding:10px; border:1px dashed var(--program-rule); }
.studio-selected-count { font:800 14px var(--program-serif); margin:0 0 10px; }
.arc-studio .studio-issue {
  display:block;
  width:100%;
  text-align:left;
  border-left:3px solid var(--copper);
  margin:5px 0;
}
.arc-studio .studio-issue.error { border-left-color:var(--vermilion); }
.studio-issue b { font:11px var(--program-mono); margin-right:6px; }
.studio-issues-ok { padding-left:8px; border-left:3px solid var(--cobalt); }
.studio-pass-list { max-height:150px; overflow:auto; }
.studio-pass {
  display:flex;
  justify-content:space-between;
  gap:5px;
  padding:7px 0;
  border-bottom:1px solid var(--program-rule);
  font-size:11px;
}

.studio-transport, .studio-toolbar {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  flex:none;
  padding:9px 12px;
  background:var(--paper-light);
  border-bottom:1px solid var(--program-rule);
}
.studio-transport .transport-icon, .studio-toolbar .studio-icon-button {
  display:grid;
  place-items:center;
  padding:0;
  width:32px;
  height:32px;
}
.studio-transport .program-icon, .studio-toolbar .program-icon { width:16px; height:16px; }
.studio-clock {
  padding:0 3px;
  font:700 17px/1 var(--program-mono);
  font-variant-numeric:tabular-nums;
  min-width:96px;
}
.studio-clock small { display:block; font:10px var(--program-mono); color:var(--program-muted); margin-top:4px; }
.studio-countdown { color:var(--vermilion); font-size:13px; }
.studio-state {
  padding:3px 5px;
  border:1px solid var(--program-rule);
  color:var(--program-muted);
  font-size:11px;
  white-space:nowrap;
}
.studio-state.recording, .arc-studio .record-button { color:var(--vermilion); }
.record-button path { fill:currentColor; }
.arc-studio .record-button.armed {
  color:var(--paper-light);
  background:var(--vermilion);
  border-color:var(--vermilion);
}
.transport-spacer { flex:1; }
.studio-transport .studio-check { margin:0; white-space:nowrap; font-size:11px; }
.studio-wave-wrap {
  flex:none;
  padding:9px 13px 6px;
  background:var(--stage);
  color:var(--paper);
}
.studio-wave-heading { display:flex; justify-content:space-between; gap:8px; font-size:11px; }
.studio-wave-heading span:last-child { color:#CDBCA9; }
.studio-wave { display:block; width:100%; height:45px; touch-action:none; cursor:crosshair; }
.studio-toolbar { gap:4px; }
.studio-toolbar button { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.arc-studio .studio-toolbar button.active {
  background:var(--cobalt);
  border-color:var(--cobalt);
  color:var(--paper-light);
}
.toolbar-divider { height:18px; border-left:1px solid var(--program-rule); margin:0 3px; }
.studio-toolbar label {
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  font-size:11px;
  white-space:nowrap;
}
.studio-toolbar input[type=range] { width:70px; }
.studio-lane-labels {
  display:flex;
  padding-left:62px;
  padding-right:20px;
  height:29px;
  flex:none;
  border-bottom:1px solid var(--program-ink);
  background:var(--paper-deep);
}
.studio-lane-labels span {
  flex:1;
  display:grid;
  place-items:center;
  border-left:1px solid var(--program-rule);
  font:700 12px var(--program-mono);
}
.studio-lane-labels .ring { color:var(--cobalt); }
.studio-roll-wrap { position:relative; flex:1; min-height:165px; background:var(--paper-light); overflow:hidden; }
.studio-roll { width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }
.studio-roll:focus-visible { outline-offset:-2px; }
.studio-empty-audio {
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:10px;
  padding:16px;
  text-align:center;
  background:#F6F0E2EC;
}
.studio-empty-audio>.program-icon { width:30px; height:30px; color:var(--cobalt); }
.studio-empty-audio h2 { font:900 clamp(20px,2.4vw,32px) var(--program-serif); margin:0; }
.studio-empty-audio p { color:var(--program-muted); font-size:12px; margin:0; }
.studio-empty-audio small { font:10px var(--program-mono); color:var(--program-muted); }
.studio-key-strip {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:7px;
  flex:none;
  border-top:1px solid var(--program-rule);
  background:var(--paper-deep);
}
.studio-key-strip kbd {
  padding:3px 7px;
  border:1px solid var(--program-ink);
  border-radius:3px;
  background:var(--paper-light);
  box-shadow:0 2px 0 var(--program-ink);
  font:11px var(--program-mono);
  transition:translate .1s, background .1s;
}
.studio-key-strip kbd.down { background:var(--cobalt); color:var(--paper-light); translate:0 2px; box-shadow:none; }
.studio-key-strip small, .studio-footer { font-size:11px; color:var(--program-muted); }
.studio-key-strip small { margin-left:5px; }
.studio-footer {
  flex:none;
  display:flex;
  justify-content:space-between;
  gap:5px;
  flex-wrap:wrap;
  padding:5px 12px;
  border-top:1px solid var(--program-rule);
  background:var(--paper-light);
}
.studio-drawer {
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  width:min(280px,90vw);
  z-index:4;
  padding:6px;
  border:1px solid var(--program-ink);
  background:var(--paper-light);
  box-shadow:4px 4px 0 var(--program-ink);
  animation:program-rise .16s ease-out both;
}
.studio-header-actions { position:relative; }
.studio-drawer button { display:block; width:100%; text-align:left; border-color:transparent; }
.studio-drawer button small { display:block; margin-top:3px; color:var(--program-muted); font-size:11px; }
.studio-drawer .studio-check { padding-inline:9px; }

.studio-dialog-backdrop, .studio-help-overlay { position:absolute; z-index:10; }
.studio-dialog {
  width:min(560px,100%);
  padding:clamp(16px,3vw,28px);
}
.studio-dialog h2 { margin:0 0 10px; font:900 25px var(--program-serif); }
.studio-dialog p { font-size:13px; line-height:1.6; color:var(--program-muted); }
.studio-dialog .actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; margin-top:16px; }
.studio-dialog .studio-field { margin-top:13px; }
.studio-dialog .studio-danger { margin-right:auto; color:var(--vermilion); }
.studio-difficulty-error { min-height:16px; margin:8px 0; font-size:12px; color:var(--vermilion); }
.studio-audition-dialog .studio-field>span { display:flex; justify-content:space-between; }
.studio-audition-dialog .studio-field b { color:var(--cobalt); }
.studio-audition-presets { display:flex; gap:6px; flex-wrap:wrap; }
.studio-calibrate-dialog .cal-taps { display:flex; gap:10px; justify-content:center; margin:22px 0; }
.cal-taps span { width:19px; height:19px; border:1px solid var(--program-ink); background:var(--paper-deep); }
.cal-taps span.pulse { background:var(--vermilion); }
.cal-tap-instruction {
  padding:12px;
  background:var(--paper-deep);
  color:var(--program-ink);
  font:700 18px var(--program-mono);
  text-align:center;
}
.studio-help-panel { width:min(950px,100%); padding:clamp(16px,3vw,30px); }
.studio-help-panel header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:2px solid var(--program-ink);
  padding-bottom:12px;
  margin-bottom:16px;
}
.studio-help-panel h2, .studio-help-content h3 { margin:0; font:900 25px var(--program-serif); }
.studio-help-columns { display:grid; grid-template-columns:minmax(140px,215px) minmax(0,1fr); gap:20px; }
.studio-help-nav { display:grid; align-content:start; gap:4px; }
.studio-help-nav button { text-align:left; }
.arc-studio .studio-help-nav button.active, .arc-studio .studio-help-nav button.active:hover:not(:disabled) { background:var(--cobalt); color:var(--paper-light); }
.studio-help-content h3 { font-size:21px; }
.studio-help-content :is(p, li, .studio-help-tip, .studio-help-note) { font-size:13px; line-height:1.75; }
.studio-help-content :is(ul, ol) { padding-left:20px; }
.studio-help-tip, .studio-help-note { background:var(--paper-deep); border-left:3px solid var(--cobalt); padding:10px 13px; margin:10px 0; }
.studio-loading {
  position:absolute;
  inset:0;
  z-index:8;
  display:grid;
  place-content:center;
  background:#EEE6D3E8;
  color:var(--cobalt);
  font:800 18px var(--program-serif);
}

@media(max-width:1100px) {
  .studio-header .program-brand b { display:none; }
  .studio-state:not(.recording) { display:none; }
}
@media(max-width:820px) {
  .studio-header { flex-wrap:wrap; gap:8px; }
  .studio-header-actions { margin-left:auto; }
  .studio-layout { grid-template-columns:1fr 1fr; overflow:auto; }
  .studio-center { grid-column:1/-1; grid-row:1; min-height:480px; }
  .studio-sidebar, .studio-aside { overflow:visible; border:0; border-top:1px solid var(--program-ink); }
  .studio-aside { border-left:1px solid var(--program-rule); }
}
@media(max-width:500px) {
  .studio-layout, .studio-help-columns { grid-template-columns:minmax(0,1fr); }
  .studio-heading { padding-left:8px; }
  .studio-header-actions { width:100%; flex-wrap:wrap; }
  .studio-title small { display:none; }
  .studio-toolbar label { margin-left:0; }
  .studio-help-nav { grid-template-columns:1fr 1fr; }
}