/* The machine: the playground every instrument runs in. Builds on /assets/tokens.css.
   A grey stage for the work, a white rack of controls beside it, soft pills for every control. */

body.machine { display: grid; grid-template-rows: auto 1fr; height: 100dvh; overflow: hidden; font-size: 13px; }
.bench { display: grid; grid-template-columns: minmax(0, 1fr) 388px; min-height: 0; padding: 0 0 12px 12px; }

/* stage: the artwork, fitted, with the transport and keyframes along the foot */
.stage { position: relative; display: grid; grid-template-rows: 1fr auto auto; min-width: 0; min-height: 0; background: var(--g100); border-radius: var(--r-xl); overflow: hidden; }
.frame { position: relative; display: grid; place-items: center; min-height: 0; padding: 44px clamp(16px, 3vw, 40px) clamp(16px, 2vw, 28px); }
.frame canvas { display: block; max-width: 100%; max-height: 100%; border-radius: 2px; box-shadow: var(--shadow); }
.frame .dims { position: absolute; left: 20px; top: 16px; font-size: 12px; color: var(--g600); }
.transport { display: flex; align-items: center; gap: 14px; padding: 4px 20px 16px; }
.transport .play { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--ink); color: var(--white); cursor: pointer; display: grid; place-items: center; transition: transform .2s var(--ease); }
.transport .play:hover { transform: scale(1.05); }
.transport .play svg { width: 12px; height: 12px; fill: currentColor; }
.transport .play svg[hidden] { display: none; }
.transport .scrub { flex: 1; }
.transport .clock { font-size: 12px; color: var(--g600); white-space: nowrap; }

/* keyframe timeline */
.timeline { padding: 0 20px 16px; display: grid; gap: 6px; max-height: 30vh; overflow-y: auto; }
.timeline[hidden] { display: none; }
.tl-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--g600); }
.tl-lane { display: grid; grid-template-columns: 112px 1fr 24px; align-items: center; gap: 10px; }
.tl-name { overflow-wrap: anywhere; line-height: 1.2; }
.tl-track { position: relative; height: 24px; background: var(--white); border-radius: 999px; cursor: pointer; }
.tl-head { position: absolute; top: 3px; bottom: 3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--accent); pointer-events: none; }
.tl-key { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 0; background: var(--ink); cursor: grab; transform: rotate(45deg); border-radius: 1px; }
.tl-key.ease-smooth { border-radius: 50%; transform: none; }
.tl-key.ease-hold { transform: none; }
.tl-key.sel { background: var(--accent); box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--accent); }
.tl-x { width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--g500); cursor: pointer; font-size: 15px; }
.tl-x:hover { background: var(--white); color: var(--ink); }

/* rack: the controls */
.rack { overflow-y: auto; padding: 8px 20px 64px; scrollbar-width: thin; scrollbar-color: var(--g200) transparent; container-type: inline-size; }
.rack .meta { margin-top: 16px; font-size: 12px; color: var(--g500); }
.rack .seed { flex: 1; text-align: left; }

.group { border-top: 1px solid var(--g150); padding: 14px 0 6px; }
.group:first-of-type { border-top: 0; }
.group > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
.group > summary small { margin-right: auto; font-size: 12px; font-weight: 400; color: var(--g500); }
.group > summary::-webkit-details-marker { display: none; }
.group > summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid var(--g500); border-bottom: 1.5px solid var(--g500); transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); }
.group:not([open]) > summary::after { transform: rotate(-45deg); }
.group-body { display: grid; gap: 8px; padding-bottom: 8px; }

.row { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 32px; }
.row[hidden] { display: none; }
.row .label { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--g600); }
.row .name { overflow-wrap: anywhere; line-height: 1.25; }
.row .name[title] { cursor: help; }
.row.t-text, .row.t-palette, .row.t-media, .row.t-marks { align-items: start; }
.row.t-text .label, .row.t-palette .label, .row.t-media .label, .row.t-marks .label { padding-top: 8px; }
.row.keyed .name { color: var(--accent); }

/* the stopwatch: a small diamond; accent when animated, filled on a keyframe */
.watch, .watch-gap { flex: none; width: 14px; height: 14px; }
.watch { position: relative; border: 0; background: none; cursor: pointer; opacity: 0; transition: opacity .15s; }
.watch::before { content: ""; position: absolute; inset: 3.5px; border: 1.5px solid currentColor; transform: rotate(45deg); border-radius: 1px; }
.row:hover .watch, .watch:focus-visible, .row.keyed .watch { opacity: 1; }
.row.keyed .watch { color: var(--accent); }
.watch.on-key::before { background: var(--accent); border-color: var(--accent); }
@media (hover: none) { .watch { opacity: .5; } }

/* fields */
input[type="text"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; min-width: 0; height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-s); outline: none;
  background: var(--g100); color: var(--ink); transition: box-shadow .15s var(--ease), background .15s var(--ease);
}
input:hover, select:hover, textarea:hover { background: var(--g150); }
input:focus, select:focus, textarea:focus { background: var(--white); box-shadow: 0 0 0 1.5px var(--ink); }
textarea { height: auto; min-height: 76px; padding: 8px 10px; resize: vertical; line-height: 1.45; }
select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23121211' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }

/* faders: a soft track that fills to the value (--p, set by the rack), and a round cap */
.fader-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 10px; position: relative; }
.fader-wrap .unit { position: absolute; right: 9px; font-size: 11px; color: var(--g500); pointer-events: none; }
.fader-wrap:has(.unit) .readout { padding-right: 22px; }
.readout { text-align: right; -moz-appearance: textfield; }
.readout::-webkit-inner-spin-button, .readout::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="range"] { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) var(--p), var(--g200) var(--p)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--g200); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px rgba(18, 18, 17, .12), 0 2px 6px rgba(18, 18, 17, .22); transition: transform .15s var(--ease); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px rgba(18, 18, 17, .12), 0 2px 6px rgba(18, 18, 17, .22); }
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--ink), 0 2px 6px rgba(18, 18, 17, .22); }
.row.keyed input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--accent) var(--p), var(--g200) var(--p)); }

.colour { display: grid; grid-template-columns: 32px 1fr; gap: 8px; }
.swatch { width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-s); cursor: pointer; flex: none; box-shadow: inset 0 0 0 1px rgba(18, 18, 17, .12); transition: transform .15s var(--ease); }
.swatch:hover { transform: scale(1.06); }
.hex, .hexlist { text-transform: uppercase; }
.palette { display: grid; gap: 8px; }
.palette-top { display: flex; flex-wrap: wrap; gap: 6px; }
.swatches { display: contents; }
.mini { width: 32px; height: 32px; border: 0; border-radius: var(--r-s); background: var(--g100); cursor: pointer; font-size: 16px; line-height: 1; }
.mini:hover { background: var(--g150); }
.font-field { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.font-field .btn, .rack .strip .btn { height: 32px; padding: 0 14px; }
.media { display: grid; gap: 8px; }
.media-name { color: var(--g600); overflow-wrap: anywhere; padding-top: 8px; }
.switch { -webkit-appearance: none; appearance: none; width: 36px; height: 22px; border-radius: 11px; background: var(--g200); position: relative; cursor: pointer; transition: background .2s var(--ease); }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s var(--ease); }
.switch:checked { background: var(--ink); }
.switch:checked::after { transform: translateX(14px); }

/* marks */
.marks { display: grid; gap: 8px; }
.mark-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mark-list:empty { display: none; }
.mark-chip { display: flex; align-items: stretch; border-radius: var(--r-s); background: var(--g100); overflow: hidden; }
.mark-chip.used { box-shadow: inset 0 0 0 1.5px var(--ink); }
.mark-add { display: grid; justify-items: center; gap: 2px; border: 0; background: none; padding: 6px 8px; cursor: pointer; font-size: 11px; color: var(--g600); }
.mark-add:hover { color: var(--ink); }
.mark-x { border: 0; background: none; padding: 0 8px; cursor: pointer; color: var(--g500); }
.mark-x:hover { color: var(--ink); background: var(--g150); }

/* buttons and labels in the rack carry the Medium weight; running text stays Regular */
.rack .btn, .transport .clock, .readout { font-weight: 500; }

/* patch and export strips */
.strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.strip + .strip { margin-top: 8px; }
.strip select, .strip input[type="text"], .strip input[type="number"] { width: auto; flex: 1; }
.note { font-size: 12px; color: var(--g600); min-height: 1em; }
.note.warn { color: var(--accent); }
.progress { height: 3px; border-radius: 2px; background: var(--g150); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }
.saved { display: grid; gap: 2px; }
.saved:empty { display: none; }
.saved button { display: flex; justify-content: space-between; gap: 8px; text-align: left; border: 0; border-radius: var(--r-s); background: none; padding: 6px 8px; cursor: pointer; }
.saved button:hover { background: var(--g100); }
.saved .x { color: var(--g500); padding: 0 4px; }
.saved .x:hover { color: var(--ink); }
.saved time { color: var(--g500); font-size: 12px; }

/* popovers: swatches and fonts */
.sw-pop, .fp-pop { position: fixed; z-index: 50; background: var(--white); border-radius: var(--r-l); box-shadow: 0 0 0 1px rgba(18, 18, 17, .06), 0 24px 64px -16px rgba(18, 18, 17, .35); }
.sw-pop { width: 312px; padding: 14px; display: grid; gap: 12px; }
.sw-head { display: grid; grid-template-columns: 44px 1fr 36px; gap: 8px; align-items: center; }
.sw-big { width: 44px; height: 44px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px rgba(18, 18, 17, .12); }
.sw-hex { text-transform: uppercase; height: 36px !important; font-size: 14px; }
.sw-tool { height: 36px; border: 0; border-radius: var(--r-s); background: var(--g100); cursor: pointer; display: grid; place-items: center; }
.sw-tool svg { width: 15px; height: 15px; fill: var(--ink); }
.sw-tool:hover:not(:disabled) { background: var(--g150); }
.sw-tool:disabled { opacity: .35; cursor: default; }
.sw-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--g100); }
.sw-tabs button { flex: 1; border: 0; border-radius: 999px; background: none; padding: 6px 0; cursor: pointer; color: var(--g600); }
.sw-tabs button.on { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.sw-list { max-height: 340px; overflow-y: auto; display: grid; gap: 12px; padding-right: 2px; scrollbar-width: thin; }
.sw-folder { display: flex; align-items: baseline; gap: 10px; font-size: 12px; color: var(--g600); margin-bottom: 6px; }
.sw-folder span { flex: 1; }
.sw-link { border: 0; background: none; padding: 0; cursor: pointer; font-size: 12px; color: var(--ink); }
.sw-link:hover { color: var(--accent); }
.sw-tiles { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.sw-tile { aspect-ratio: 1; border: 0; border-radius: 5px; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(18, 18, 17, .1); transition: transform .12s var(--ease); }
.sw-tile:hover { transform: scale(1.15); }
.sw-mixer { display: grid; gap: 8px; }
.sw-row { display: grid; grid-template-columns: 36px 1fr 56px; gap: 8px; align-items: center; color: var(--g600); }
.sw-fields { grid-template-columns: 36px 1fr; }
.sw-boxes { display: grid; grid-auto-flow: column; gap: 4px; }
.sw-note { font-size: 12px; color: var(--g500); }

.fp-pop { width: 392px; height: min(580px, 86vh); display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 10px; padding: 14px; }
.fp-search { height: 40px !important; font-size: 15px; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fp-chips button { border: 0; background: var(--g100); border-radius: 999px; padding: 5px 11px; cursor: pointer; font-size: 12px; }
.fp-chips button:hover { background: var(--g150); }
.fp-chips button.on { background: var(--ink); color: var(--white); }
.fp-list { overflow-y: auto; scrollbar-width: thin; margin: 0 -6px; }
.fp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; border: 0; border-radius: var(--r-m); background: none; padding: 9px 8px; cursor: pointer; text-align: left; }
.fp-row:hover { background: var(--g100); }
.fp-row.on { background: var(--g100); }
.fp-name { min-width: 0; font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; font-weight: 400; }
.fp-meta { flex: none; font-size: 11px; color: var(--g500); }
.fp-more { padding: 10px 8px; color: var(--g500); }
.fp-status { font-size: 12px; color: var(--g500); }
.fp-foot { display: flex; gap: 10px; align-items: center; }
.fp-foot .btn { flex: none; white-space: nowrap; }
.fp-hint { font-size: 12px; color: var(--g500); line-height: 1.35; }

.drop { position: fixed; inset: 12px; z-index: 60; display: none; place-items: center; border-radius: var(--r-xl); background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 2px var(--ink); font: 500 32px/1 var(--display); backdrop-filter: blur(6px); }
body.dragging .drop { display: grid; }

/* when a machine can't start */
.fail { grid-column: 1 / -1; max-width: 34em; margin: 48px auto; padding: 24px; border-radius: var(--r-l); background: var(--g100); line-height: 1.5; }
.fail p + p { margin-top: 10px; }
.fail .why { color: var(--g500); font-size: 12px; }
.fail a { text-decoration: underline; }

/* tablet: the rack narrows, and in a narrow rack each label sits above its control, so nothing is
   ever cut short */
@media (max-width: 1080px) { .bench { grid-template-columns: minmax(0, 1fr) 340px; } }
@container (max-width: 420px) {
  .row { grid-template-columns: 1fr; gap: 4px; }
  .row .label, .row.t-text .label, .row.t-palette .label, .row.t-media .label, .row.t-marks .label { padding-top: 0; }
}

/* phone: the stage on top, sticky; the rack scrolls beneath it */
@media (max-width: 760px) {
  body.machine { display: block; height: auto; overflow: visible; }
  .bench { display: block; padding: 0; }
  .stage { position: sticky; top: 0; z-index: 2; height: 56dvh; border-radius: 0 0 var(--r-l) var(--r-l); }
  .frame { padding-top: 36px; }
  .rack { overflow: visible; padding: 12px 16px 48px; }
  .sw-pop, .fp-pop { left: 8px !important; right: 8px; width: auto; }
}

/* the effect stack: one card per layer */
.row.t-stack, .row.t-list { grid-template-columns: 1fr; }
.row.t-stack > .label, .row.t-list > .label { display: none; }
.stack { display: grid; gap: 8px; }
.layers { display: grid; gap: 6px; }
.layer { border-radius: var(--r-m); background: var(--g50); box-shadow: inset 0 0 0 1px var(--g150); transition: opacity .2s var(--ease); }
.layer.off { opacity: .5; }
.layer-head { display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 8px; }
.layer-eye { flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.layer-eye::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--accent); }
.layer.off .layer-eye::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--g500); }
.layer-name { flex: 1; min-width: 0; border: 0; background: none; padding: 6px 6px; text-align: left; cursor: pointer; font-weight: 500; overflow-wrap: anywhere; }
.layer-name::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid var(--g500); border-bottom: 1.5px solid var(--g500); transform: rotate(-45deg) translateY(-2px); transition: transform .2s var(--ease); }
.layer.open .layer-name::after { transform: rotate(45deg) translateY(-3px); }
.layer-btn { flex: none; width: 28px; height: 28px; border: 0; border-radius: var(--r-s); background: none; cursor: pointer; color: var(--g600); }
.layer-btn:hover { background: var(--g150); color: var(--ink); }
.layer-body { display: none; gap: 8px; padding: 4px 12px 12px; }
.layer.open .layer-body { display: grid; }
.layer-body input[type="text"], .layer-body input[type="number"], .layer-body select { background: var(--white); }
.layer-add { font-weight: 500; }

/* Phones: fields at 16px (smaller makes iPhone Safari zoom in on every tap), controls at least
   44px tall, and room to breathe between them. */
@media (max-width: 760px) {
  body.machine { font-size: 15px; }
  .rack { padding: 16px 20px 64px; }
  .group { padding: 18px 0 8px; }
  .group > summary { font-size: 17px; padding-bottom: 14px; }
  .group-body { gap: 14px; }
  .row { min-height: 44px; }
  .row .label { font-size: 14px; }
  input[type="text"], input[type="number"], input[type="search"], select, textarea { height: 44px; font-size: 16px; padding: 0 12px; }
  textarea { height: auto; min-height: 96px; padding: 10px 12px; }
  .fader-wrap { grid-template-columns: minmax(0, 1fr) 76px; gap: 14px; }
  input[type="range"] { height: 36px; }
  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; }
  input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }
  .swatch, .mini { width: 44px; height: 44px; }
  .colour { grid-template-columns: 44px 1fr; }
  .switch { width: 46px; height: 28px; border-radius: 14px; }
  .switch::after { width: 22px; height: 22px; }
  .switch:checked::after { transform: translateX(18px); }
  .rack .btn, .font-field .btn, .rack .strip .btn { min-height: 44px; }
  .strip { gap: 8px; }
  .strip + .strip { margin-top: 10px; }
  .watch, .watch-gap { width: 20px; height: 20px; }
  .layer-head { padding: 6px 6px 6px 10px; }
  .layer-btn, .layer-eye { width: 40px; height: 40px; }
  .layer-body { gap: 12px; padding: 6px 14px 16px; }
  .transport { gap: 16px; padding: 6px 16px 16px; }
  .transport .play { width: 46px; height: 46px; }
  .transport .clock { font-size: 13px; }
  .tl-track { height: 32px; }
  .tl-key { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
  .fp-row { padding: 12px 10px; }
  .fp-chips button { padding: 8px 12px; font-size: 14px; }
  .sw-tile { min-width: 26px; }
  .note { font-size: 14px; }
}

/* Typing on the stage (the Type tester): a text box laid exactly over the row it edits. */
.frame canvas { touch-action: manipulation; }
.stage-edit { position: absolute; z-index: 2; margin: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; resize: none; overflow: hidden;
  font-kerning: normal; outline: 1px dashed color-mix(in srgb, currentColor 35%, transparent); outline-offset: 4px; caret-color: currentColor; }
.stage-edit:focus, .stage-edit:focus-visible { box-shadow: none; border-radius: 0; outline: 1px dashed color-mix(in srgb, currentColor 35%, transparent); outline-offset: 4px; }