/* OBSCURA OS: Sound, the audio editor.

   One window: the top bar, the transport and edit bar, then the timeline
   (track headers, the ruler, the lanes) with the inspector on the right,
   and a status line across the foot. The lanes are canvases drawn by
   sound-timeline.js in these same colours, read from the tokens. On a
   phone the inspector is a drawer, the headers narrow to a name, mute and
   solo, and every control is at least 44px.

   Every colour, size, corner and duration is a theme.css token, so Sound
   follows the site's colourways, its dark mode and its motion setting. */

.sd {
  --sd-insp-w: 304px;
  --sd-head-w: 236px;
  height: 100vh; height: 100dvh;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
}
/* Each row named, so a bar that is hidden leaves its row empty rather than
   moving the timeline into it. */
.sd-top { grid-row: 1; }
.sd-bar { grid-row: 2; }
.sd-work { grid-row: 3; }
.sd-status { grid-row: 4; }
.sd[data-open="false"] .sd-state { visibility: hidden; }
body.sd-app { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--paper); color: var(--ink); font: var(--text-sm)/var(--leading-ui) var(--font-sans); }
.sd *, .sd *::before, .sd *::after { box-sizing: border-box; }
:where(.sd) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.sd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sd svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.sd-grow { flex: 1; }
.sd kbd { font: var(--text-2xs) var(--font-mono); padding: 1px var(--space-1); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--paper-inset); white-space: nowrap; }
.sd code { font: var(--text-xs) var(--font-mono); }
.sd-hint { margin: var(--space-2) 0; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-faint); }
.sd-empty { margin: var(--space-3) 0; color: var(--ink-faint); font-size: var(--text-sm); line-height: 1.5; list-style: none; }
.sd :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sd-lanes:focus-visible { outline-offset: -2px; }

/* ---------------------------------------------------------------- buttons */

.sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 5px 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.sd-btn:hover:not(:disabled) { background: var(--paper-inset); }
.sd-btn:active:not(:disabled) { transform: translateY(1px); }
.sd-btn:disabled { opacity: .5; cursor: default; }
.sd-btn svg { width: 16px; height: 16px; }
.sd-btn-main { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.sd-btn-main:hover:not(:disabled) { background: var(--accent-strong); }
.sd-btn-danger { border-color: var(--danger); background: var(--danger); color: var(--on-danger, var(--on-accent)); }
.sd-btn-sm { min-height: 28px; padding: 2px 10px; font-size: var(--text-xs); }
.sd-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft); cursor: pointer; }
.sd-icon-btn:hover:not(:disabled) { background: var(--paper-inset); color: var(--ink); }
.sd-icon-btn:disabled { opacity: .4; cursor: default; }
.sd-icon-btn[aria-pressed="true"] { color: var(--accent-strong); }

/* ---------------------------------------------------------------- top bar */

.sd-top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 6px 10px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.sd-top .os-app-home { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-md); }
.sd-top .os-app-home:hover { background: var(--paper-inset); }
.sd-brand { margin: 0 var(--space-1) 0 0; font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.sd-projpick { position: relative; min-width: 0; }
.sd-project { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 320px; min-height: 34px; padding: 5px 10px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); cursor: pointer; }
.sd-project:hover, .sd-project[aria-expanded="true"] { border-color: var(--rule-strong); background: var(--paper-inset); }
.sd-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sd-project svg { width: 16px; height: 16px; color: var(--ink-faint); }
.sd-state { margin: 0; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--ink-faint); }
.sd-state[data-save-state="failed"] { color: var(--danger); font-weight: 600; }
.sd-helpwrap { position: relative; flex: none; }
.sd-menu { position: absolute; z-index: 60; top: calc(100% + var(--space-1)); left: 0; min-width: 250px; max-width: min(360px, calc(100vw - 20px)); max-height: calc(100dvh - 120px); overflow-y: auto; padding: 6px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 14px 36px rgba(16, 16, 24, .18); animation: sd-pop var(--dur-3) var(--ease-standard); }
.sd-menu[hidden] { display: none; }
.sd-menu-right { left: auto; right: 0; }
.sd-menu-fixed { position: fixed; }
.sd-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 32px; padding: 6px 11px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; }
.sd-menu button:hover:not(:disabled), .sd-menu button:focus-visible { background: var(--paper-inset); outline: none; }
.sd-menu button:disabled { color: var(--ink-faint); cursor: default; }
.sd-menu hr { margin: 6px var(--space-1); border: 0; border-top: 1px solid var(--rule); }
.sd-menu-head { margin: 4px 11px 2px; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.sd-menu-key { border: 0; background: none; color: var(--ink-faint); }
@keyframes sd-pop { from { opacity: 0; transform: translateY(-4px); } }

/* ---------------------------------------------------------------- the transport and edit bar */

.sd-bar { position: relative; display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 46px; padding: 5px 10px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.sd-bar[hidden] { display: none; }
.sd-group { display: flex; align-items: center; gap: 2px; padding-right: var(--space-2); border-right: 1px solid var(--rule); }
.sd-zoom { border-right: 0; padding-right: 0; }
.sd-tb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; }
.sd-tb:hover:not(:disabled) { background: var(--paper-inset); color: var(--ink); }
.sd-tb:disabled { opacity: .4; cursor: default; }
.sd-tb[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.sd-tb-word { padding: 0 8px; }
.sd-tb-play { width: 38px; color: var(--ink); }
.sd-tb-play.is-on { color: var(--accent-strong); }
.sd-tb-rec { color: var(--danger); }
.sd-tb-rec[aria-pressed="true"] { background: var(--danger-soft); color: var(--danger); }
.sd-transport .sd-tb svg { width: 19px; height: 19px; }
.sd-clockwrap { display: flex; flex-direction: column; justify-content: center; min-width: 116px; min-height: 36px; padding: 2px 10px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-inset); }
.sd-clock { font: 600 var(--text-lg)/1.1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); }
.sd-clock-sel { font: var(--text-2xs)/1.2 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.sd-clock-sel:empty { display: none; }
.sd.is-recording .sd-clock { color: var(--danger); }
.sd-master { width: 160px; height: 28px; flex: none; }
.sd-lufs { display: grid; grid-template-columns: auto auto; column-gap: 5px; align-content: center; flex: none; height: 30px; font: var(--text-2xs)/1.25 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.sd-lufs em { font-style: normal; }
.sd-lufs b { min-width: 5ch; font-weight: 600; text-align: right; color: var(--ink); }
.sd-tempowrap { position: relative; flex: none; }
.sd-tb-tempo { gap: 2px; padding: 0 4px 0 8px; font: 600 var(--text-xs) var(--font-mono); font-variant-numeric: tabular-nums; }
.sd-tb-tempo svg { width: 14px; height: 14px; }
.sd-tb-speed { min-width: 40px; font: 600 var(--text-xs) var(--font-mono); font-variant-numeric: tabular-nums; }
.sd-tb-speed.is-on { background: var(--warn-soft); color: var(--warn); }
.sd-fx-menu { top: calc(100% - 2px); }

/* ---------------------------------------------------------------- body */

.sd-work { display: grid; grid-template-columns: minmax(0, 1fr) var(--sd-insp-w); min-height: 0; }
.sd[data-insp="false"] .sd-work, .sd[data-open="false"] .sd-work { grid-template-columns: minmax(0, 1fr); }
.sd[data-insp="false"] .sd-insp, .sd[data-open="false"] .sd-insp { display: none; }
.sd-main { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; background: var(--paper); }
.sd-boot { margin: var(--space-6); color: var(--ink-faint); }

/* The start screen. */
.sd-start { height: 100%; overflow-y: auto; padding: var(--space-6) max(var(--space-5), calc((100% - 1040px) / 2)) var(--space-7); animation: sd-arrive var(--dur-4) var(--ease-standard); }
.sd-start[hidden] { display: none; }
@keyframes sd-arrive { from { opacity: 0; transform: translateY(6px); } }
.sd-h { margin: 0 0 var(--space-2); font: 650 var(--text-2xl)/1.15 var(--font-headline); letter-spacing: -.01em; }
.sd-h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-md); }
.sd-lead { max-width: var(--measure); margin: 0 0 var(--space-5); font-size: var(--text-md); line-height: var(--leading-prose); color: var(--ink-soft); }
.sd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); }
.sd-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); }
.sd-card h3 { margin: 0; font-size: var(--text-md); }
.sd-card p { margin: 0 0 var(--space-2); color: var(--ink-soft); line-height: 1.5; }
.sd-card > .sd-btn, .sd-card-row { margin-top: auto; }
.sd-card-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sd-recent { margin: 0; padding: 0; list-style: none; max-width: 760px; }
.sd-recent li { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--rule); }
.sd-recent li[hidden] { display: none; }
.sd-recent-open { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border: 0; background: none; text-align: left; cursor: pointer; }
.sd-recent-open:hover { background: var(--paper-inset); }
.sd-recent-open svg { color: var(--ink-faint); }
.sd-recent-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-recent-meta { margin-left: auto; padding-left: var(--space-3); font-size: var(--text-xs); color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the timeline */

.sd-edit { display: grid; grid-template-columns: var(--sd-head-w) minmax(0, 1fr); grid-template-rows: 30px minmax(0, 1fr); flex: 1; min-height: 0; }
.sd-edit[hidden] { display: none; }
.sd-corner { display: flex; align-items: center; padding: 0 10px; background: var(--paper-raised); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.sd-ruler { display: block; width: 100%; height: 30px; cursor: text; touch-action: none; }
.sd-heads { position: relative; overflow: hidden; background: var(--paper-raised); border-right: 1px solid var(--rule); }
.sd-lanes { position: relative; overflow: auto; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.sd-lanes.is-editing { touch-action: none; }
.sd-stage { position: relative; }
/* The spectral selection's bar, beside the box it acts on. */
.sd-specbar { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--radius-md); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule-strong), 0 8px 20px rgba(16, 16, 24, .16); }
.sd-specbar[hidden] { display: none; }
.sd-canvas, .sd-over { position: absolute; top: 0; left: 0; display: block; pointer-events: none; will-change: transform; }

/* A track's header. The thin bar on the left is the track's own hue, the
   colour its clips are drawn in. */
.sd-heads-in { position: relative; }
.sd-head { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 8px 4px 13px; border-bottom: 1px solid var(--rule); }
.sd-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: hsl(var(--sd-th, 212) 45% 55%); }
.sd-head.is-cur { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.sd-head-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sd-head-name { flex: 1; min-width: 0; min-height: 26px; padding: 1px 4px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font-weight: 650; text-overflow: ellipsis; }
.sd-head-name:hover { border-color: var(--rule); }
.sd-head-name:focus { border-color: var(--accent); background: var(--paper); }
.sd-ms { flex: none; width: 26px; height: 24px; padding: 0; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-soft); font: 700 var(--text-2xs) var(--font-mono); cursor: pointer; }
.sd-ms:hover { border-color: var(--ink-faint); }
.sd-ms[aria-pressed="true"] { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.sd-ms-solo[aria-pressed="true"] { border-color: var(--good); background: var(--good-soft); color: var(--good); }
.sd-head-more { width: 26px; height: 26px; }
.sd-head-mix { font-size: var(--text-2xs); color: var(--ink-faint); }
.sd-head-mix span { flex: none; width: 28px; font-weight: 600; }
.sd-head-mix input[type="range"] { flex: 1; min-width: 0; height: 18px; margin: 0; accent-color: var(--accent); }
.sd-head-mix output { flex: none; width: 42px; text-align: right; font: var(--text-2xs) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.sd-head-meter { display: block; width: 100%; height: 6px; margin-top: 2px; }
.sd-head-add { margin: 10px 8px; }
/* A take lane's header, under its track's: indented, the track's hue
   faint beside it. */
.sd-lane-head { position: relative; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 22px; border-bottom: 1px solid var(--rule); background: var(--paper-inset); }
.sd-lane-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: hsl(var(--sd-th, 212) 45% 55%); opacity: .45; }
.sd-lane-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--text-2xs) var(--font-mono); letter-spacing: .04em; color: var(--ink-soft); }

/* ---------------------------------------------------------------- the inspector */

.sd-insp { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; background: var(--paper-raised); border-left: 1px solid var(--rule); }
.sd-tabs { display: flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 4px 0 8px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.sd-tabs::-webkit-scrollbar { display: none; }
.sd-tabs [role="tab"] { min-height: 39px; padding: 0 6px; border: 0; background: none; color: var(--ink-faint); font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; }
.sd-tabs [role="tab"][aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px var(--accent); }
.sd-insp-x { display: none; }
.sd-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 14px 40px; }
.sd-pane[hidden] { display: none; }
.sd-sec { padding: 10px 0 12px; border-bottom: 1px solid var(--rule); display: grid; gap: 10px; }
.sd-sec:last-child { border-bottom: 0; }
.sd-sec-h { margin: 2px 0 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); }
.sd-sec-h4 { margin: 6px 0 0; font-size: var(--text-xs); font-weight: 700; color: var(--ink-soft); }
.sd-field { display: grid; gap: 4px; min-width: 0; }
.sd-field > span:first-child { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); }
.sd-field input:not([type="range"]), .sd-field select { width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); }
.sd-field-inline { display: flex; align-items: center; gap: 8px; }
.sd-field-inline select { width: auto; }
.sd-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sd-slide { display: flex; align-items: center; gap: 8px; }
.sd-slide input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.sd-slide .sd-num { flex: none; width: 76px !important; }
.sd-unit { display: flex; align-items: center; gap: 6px; }
.sd-unit input { flex: 1; min-width: 0; }
.sd-unit em { flex: none; min-width: 2.5em; font-style: normal; font-size: var(--text-xs); color: var(--ink-faint); }
.sd-row-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sd-check { display: flex; align-items: flex-start; gap: 8px; min-height: 30px; padding-top: 5px; font-size: var(--text-sm); line-height: 1.35; cursor: pointer; }
.sd-check input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); }
.sd-check-sm { min-height: 24px; padding-top: 2px; font-size: var(--text-xs); }
.sd-facts { display: grid; gap: 4px; margin: 0; font-size: var(--text-xs); }
.sd-facts div { display: flex; justify-content: space-between; gap: var(--space-3); }
.sd-facts dt { color: var(--ink-soft); }
.sd-warn-t { color: var(--danger); font-weight: 700; }
.sd-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sd-marks { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.sd-marks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.sd-mark-t { min-height: 30px; padding: 0 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font: var(--text-xs) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); cursor: pointer; }
.sd-mark-t:hover { border-color: var(--warn); color: var(--ink); }
.sd-mark-name { min-width: 0; min-height: 30px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.sd-loud-main { display: flex; align-items: baseline; gap: 8px; }
.sd-loud-n { font: 650 var(--text-3xl)/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sd-loud-u { font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); }
.sd-table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.sd-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.sd-table th, .sd-table td { padding: 5px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.sd-table thead th { background: var(--paper-inset); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); white-space: nowrap; }
.sd-table tbody tr:last-child td, .sd-table tbody tr:last-child th { border-bottom: 0; }
.sd-numcol { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-flag { margin-left: 4px; padding: 0 4px; border: 1px solid var(--warn); border-radius: var(--radius-sm); font-size: var(--text-2xs); font-weight: 700; color: var(--warn); }
.sd-hist { margin: 0; padding: 0; list-style: none; }
.sd-hist button { display: flex; justify-content: space-between; gap: 8px; width: 100%; min-height: 32px; padding: 4px 8px; border: 0; border-left: 2px solid transparent; background: none; text-align: left; cursor: pointer; font-size: var(--text-xs); }
.sd-hist button:hover { background: var(--paper-inset); }
.sd-hist button.is-now { border-left-color: var(--accent); background: var(--accent-soft); font-weight: 650; }
.sd-hist button.is-undone { color: var(--ink-faint); }
.sd-hist-t { flex: none; font-variant-numeric: tabular-nums; color: var(--ink-faint); }

/* The Effects tab: a chain of slots, each with its switch and its knobs. */
.sd-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); overflow: hidden; }
.sd-seg button { min-height: 30px; min-width: 0; padding: 2px 8px; border: 0; background: var(--paper); color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.sd-seg button + button { border-left: 1px solid var(--rule-strong); }
.sd-seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.sd-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-autos { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.sd-autos li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.sd-autos input { width: 100%; min-width: 0; min-height: 30px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.sd-slots { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sd-slot { border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.sd-slot-h { display: flex; align-items: center; gap: 4px; min-height: 36px; padding: 2px 2px 2px 4px; border-bottom: 1px solid var(--rule); background: var(--paper-inset); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.sd-slot-h:last-child { border-bottom: 0; }
.sd-pow { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; padding: 0; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-faint); cursor: pointer; }
.sd-pow svg { width: 15px; height: 15px; }
.sd-pow[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); }
.sd-slot-name { flex: 1; min-width: 0; min-height: 28px; padding: 0 4px; border: 0; background: none; text-align: left; font-size: var(--text-xs); font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.sd-slot.is-off .sd-slot-name, .sd-slot.is-missing .sd-slot-name { color: var(--ink-faint); }
.sd-slot.is-off .sd-slot-b { opacity: .55; }
.sd-slot.is-missing .sd-hint, .sd-slot-err { margin: 6px 8px; }
.sd-slot-err { font-size: var(--text-xs); color: var(--danger); }
.sd-gr { flex: none; width: 60px; height: 8px; }
.sd-plug-v { margin-left: 4px; font: 600 var(--text-2xs) var(--font-mono); letter-spacing: .04em; color: var(--ink-faint); }
.sd-slot-b { padding: 6px 8px 8px; }
.sd-curve-eq { height: 132px; margin: 0 0 4px; touch-action: none; cursor: crosshair; }
.sd-eq-vals summary { display: flex; align-items: center; min-height: 30px; font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.sd-eq-vals[open] summary { margin-bottom: 6px; }
/* A folded section's marker: a chevron that turns down when it opens. */
.sd-eq-vals summary::before, .sd-plug-api summary::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 9px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-2) var(--ease-standard); }
.sd-eq-vals[open] summary::before, .sd-plug-api[open] summary::before { transform: rotate(45deg); }
.sd-eq-vals summary::-webkit-details-marker, .sd-plug-api summary::-webkit-details-marker { display: none; }
.sd-knobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px 4px; align-items: start; }
.sd-knob-w { display: grid; justify-items: center; gap: 1px; min-width: 0; }
.sd-knob { width: 44px; height: 44px; border-radius: 50%; cursor: ns-resize; touch-action: none; }
.sd-knob svg { width: 44px; height: 44px; fill: none; stroke-linecap: round; }
.sd-knob-track { stroke: var(--rule-strong); stroke-width: var(--icon-stroke); }
.sd-knob-arc { stroke: var(--accent); stroke-width: calc(var(--icon-stroke) * 2); }
.sd-knob-cap { fill: var(--paper-raised); stroke: var(--rule-strong); stroke-width: var(--icon-stroke); }
.sd-knob-tick { stroke: var(--ink); stroke-width: var(--icon-stroke); }
.sd-slot.is-off .sd-knob-arc { stroke: var(--ink-faint); }
.sd-knob:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.sd-knob-n { max-width: 100%; font-size: var(--text-2xs); font-weight: 600; color: var(--ink-soft); text-align: center; line-height: 1.25; overflow-wrap: anywhere; }
.sd-knob-v { width: 100%; max-width: 86px; min-height: 22px; padding: 0 2px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font: var(--text-2xs) var(--font-mono); font-variant-numeric: tabular-nums; text-align: center; color: var(--ink); }
.sd-knob-v:hover { border-color: var(--rule); }
.sd-knob-v:focus { border-color: var(--accent); background: var(--paper-raised); }
.sd-knob-sel, .sd-knob-tog { grid-column: span 2; align-self: center; }
.sd-ms-fx { width: 30px; }
.sd-ms-fx.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }

/* Plug-ins. */
.sd-plugs { margin: var(--space-3) 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.sd-plugs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--rule); }
.sd-plug-t { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.sd-plug-m { font-size: var(--text-2xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sd-plug-d { font-size: var(--text-xs); color: var(--ink-soft); }
.sd-plug-api { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.5; }
.sd-plug-api summary { min-height: 32px; display: flex; align-items: center; font-weight: 700; color: var(--ink); cursor: pointer; }
.sd-plug-api p { margin: 0 0 var(--space-2); }
.sd-code { margin: 0; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-inset); font: var(--text-2xs)/1.5 var(--font-mono); color: var(--ink); white-space: pre; }

/* ---------------------------------------------------------------- the mixer */

/* The timeline's other view: a strip for each track, bus and VCA side by
   side, scrolling across, with the mix and its analysis held at the
   right. A strip is a column: name, inserts, sends, routing, pan, then
   the fader and its meter taking the height that is left. */
.sd-mixer { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--paper); }
.sd-mixer[hidden] { display: none; }
.sd-mix-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--rule); background: var(--paper-raised); }
.sd-mix-desk { display: flex; flex: 1; min-height: 0; }
.sd-mix-strips { display: flex; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; }
.sd-mix-empty { padding: var(--space-4); }
.sd-mix-master { display: flex; flex: none; border-left: 1px solid var(--rule-strong); background: var(--paper-raised); }
.sd-strip { position: relative; display: flex; flex-direction: column; gap: 6px; flex: none; width: 112px; min-height: 0; padding: 0 6px 8px; border-right: 1px solid var(--rule); background: var(--paper-raised); }
.sd-strip::before { content: ""; height: 4px; margin: 0 -6px; background: hsl(var(--sd-th, 212) 45% 55%); }
.sd-strip-bus::before { background: var(--accent); }
.sd-strip-vca::before { background: var(--warn); }
.sd-strip-master::before { background: var(--ink-faint); }
.sd-strip-h { display: flex; align-items: center; gap: 2px; min-width: 0; }
.sd-strip-name { flex: 1; min-width: 0; min-height: 28px; margin: 0; padding: 2px 4px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font-size: var(--text-xs); font-weight: 650; text-overflow: ellipsis; }
.sd-strip-name:hover { border-color: var(--rule); }
.sd-strip-name:focus { border-color: var(--accent); background: var(--paper); }
.sd-strip-fixed { display: flex; align-items: center; }
.sd-strip-more { width: 26px; height: 28px; }
.sd-strip-io { display: grid; gap: 4px; align-content: start; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.sd-strip-lab { margin: 2px 0 0; font: 700 var(--text-2xs)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.sd-strip-tag { justify-self: start; margin: 0; padding: 0 5px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); font: 700 var(--text-2xs)/1.6 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sd-strip-info { margin: 0; font-size: var(--text-2xs); line-height: 1.4; color: var(--ink-faint); overflow-wrap: anywhere; }
.sd-ins, .sd-sends { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sd-ins-b { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 24px; padding: 1px 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: 600 var(--text-2xs) var(--font-mono); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.sd-ins-b span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sd-ins-b:hover { border-color: var(--rule-strong); background: var(--paper-inset); }
.sd-ins-b.is-off, .sd-ins-b.is-missing { color: var(--ink-faint); text-decoration: line-through; }
.sd-ins-add { justify-content: center; border-style: dashed; color: var(--ink-soft); }
.sd-ins-add svg { width: 12px; height: 12px; }
.sd-send { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 4px; align-items: center; }
.sd-send .sd-ins-b { grid-column: 1 / -1; }
.sd-send.is-off { opacity: .55; }
.sd-send input[type="range"] { width: 100%; min-width: 0; height: 18px; margin: 0; accent-color: var(--accent); }
.sd-send output { font: var(--text-2xs) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.sd-send-pre { flex: none; font-style: normal; color: var(--accent-strong); }
.sd-strip-sel { display: grid; gap: 1px; font: 700 var(--text-2xs)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.sd-strip-sel select { width: 100%; min-height: 26px; padding: 1px 4px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); font: var(--text-2xs) var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.sd-strip-pan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 4px; align-items: center; }
.sd-strip-pan .sd-strip-lab { grid-column: 1 / -1; }
.sd-strip-pan input { width: 100%; min-width: 0; height: 18px; margin: 0; accent-color: var(--accent); }
.sd-strip-pan output { font: var(--text-2xs) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); min-width: 3ch; text-align: right; }
.sd-strip-body { display: flex; justify-content: center; gap: 8px; flex: 1; min-height: 120px; }
.sd-fader-w { display: flex; justify-content: center; width: 34px; }
/* A fader as on a desk: a slot, and a cap with a line across it. */
.sd-fader { -webkit-appearance: none; appearance: none; writing-mode: vertical-lr; direction: rtl; width: 30px; height: 100%; margin: 0; background: transparent; cursor: ns-resize; }
.sd-fader::-webkit-slider-runnable-track { width: 4px; border-radius: var(--radius-sm); background: var(--rule-strong); }
.sd-fader::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 16px; margin-left: -12px; border: 1px solid var(--ink-faint); border-radius: var(--radius-sm); background: var(--ink); box-shadow: inset 0 -7px 0 var(--paper-raised), inset 0 7px 0 var(--paper-raised); }
.sd-fader::-moz-range-track { width: 4px; border-radius: var(--radius-sm); background: var(--rule-strong); }
.sd-fader::-moz-range-thumb { width: 26px; height: 14px; border: 1px solid var(--ink-faint); border-radius: var(--radius-sm); background: var(--ink); box-shadow: inset 0 -6px 0 var(--paper-raised), inset 0 6px 0 var(--paper-raised); }
.sd-fader:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sd-strip-meter { width: 22px; height: 100%; }
.sd-strip-read { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
.sd-strip-db, .sd-strip-pk { width: 100%; min-width: 0; min-height: 26px; padding: 1px 3px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font: var(--text-2xs) var(--font-mono); font-variant-numeric: tabular-nums; text-align: center; color: var(--ink); }
.sd-strip-vca .sd-strip-read { grid-template-columns: minmax(0, 1fr); }
.sd-strip-pk { cursor: pointer; color: var(--ink-soft); }
.sd-strip-pk.is-clip, .sd-tp.is-clip { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.sd-strip-auto { margin: 0; font: 700 var(--text-2xs)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--accent-strong); }
.sd-strip-ms { display: flex; justify-content: center; gap: 4px; min-height: 24px; }
.sd-strip-ms .sd-ms { width: 40px; }
.sd-scope { display: flex; flex-direction: column; gap: 4px; width: 196px; padding: 8px 10px; overflow-y: auto; }
.sd-vscope { display: block; width: 164px; height: 164px; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.sd-corr { display: block; width: 164px; height: 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.sd-scope-facts { margin-top: 6px; }
.sd-tp { white-space: nowrap; min-height: 24px; padding: 0 4px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font: var(--text-2xs) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }

/* ---------------------------------------------------------------- status */

.sd-status { display: flex; align-items: center; gap: 16px; min-height: 26px; padding: 0 12px; overflow: hidden; background: var(--paper-raised); border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: var(--text-2xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sd-status span:empty { display: none; }
body.sd-app #ppBadge { left: auto; right: var(--space-2); bottom: 1px; min-height: 24px; padding: 1px var(--space-2); font-size: var(--text-2xs); box-shadow: none; }
.sd[data-open="true"] .sd-status { padding-right: 132px; }

/* ---------------------------------------------------------------- dialogs */

.sd-dialog { width: min(500px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 24px 60px rgba(0, 0, 0, .3); }
.sd-dialog-wide { width: min(760px, calc(100vw - 24px)); }
.sd-dialog::backdrop { background: rgba(10, 10, 16, .4); }
.sd-dlg { display: grid; gap: var(--space-3); padding: var(--space-5); }
.sd-dlg-h { margin: 0; font-size: var(--text-lg); overflow-wrap: anywhere; }
.sd-dlg-body p { margin: 0 0 var(--space-2); color: var(--ink-soft); line-height: 1.5; }
.sd-dlg-body .sd-hint { color: var(--ink-faint); }
.sd-dlg-fields { display: grid; gap: var(--space-3); }
.sd-dlg-err { margin: 0; color: var(--danger); font-size: var(--text-xs); }
.sd-dlg-err:empty { display: none; }
.sd-dlg-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.sd-prog { width: 100%; height: 8px; accent-color: var(--accent); }
.sd-target { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sd-fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px var(--space-4); margin-bottom: var(--space-2); }
.sd-fx-notes { margin: 0 0 var(--space-2); padding-left: 1.1em; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-faint); }
.sd-fx-notes b { color: var(--ink-soft); font-weight: 600; }
.sd-curve { display: block; width: 100%; height: 160px; margin: var(--space-2) 0 var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.sd-curve-sq { width: 220px; height: 200px; }
.sd-curve-spec { height: 140px; margin: 0; }
.sd-eq td, .sd-eq th { white-space: nowrap; }
.sd-eq td:nth-child(3) { display: flex; align-items: center; gap: 8px; }
.sd-eq input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--accent); }
.sd-eq output { width: 46px; font: var(--text-2xs) var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.sd-eq .sd-num { width: 84px; min-height: 28px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); }
.sd-export { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); max-height: min(64vh, 680px); overflow: auto; padding-right: 2px; }
.sd-fs { margin: 0 0 var(--space-2); padding: 0; border: 0; display: grid; gap: var(--space-2); min-width: 0; align-content: start; }
.sd-fs legend { margin-bottom: var(--space-2); padding: 0; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sd-fs [hidden] { display: none !important; }
.sd-batch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); max-height: min(64vh, 680px); overflow: auto; padding-right: 2px; }
.sd-batch .sd-fs:first-child { grid-column: 1 / -1; }
.sd-batch > .sd-hint { grid-column: 1 / -1; }
.sd-batch-files { margin: 0; padding: 0; list-style: none; max-height: 180px; overflow-y: auto; border-top: 1px solid var(--rule); }
.sd-batch-files li { display: flex; align-items: center; gap: 8px; min-height: 34px; border-bottom: 1px solid var(--rule); font-size: var(--text-xs); }
.sd-batch-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sd-batch-s, .sd-batch-r { flex: none; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sd-batch-r:empty { display: none; }
.sd-batch-err { color: var(--danger); }
.sd-plats { display: grid; gap: 0; }
.sd-plats small { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sd-notes-pre { max-height: 200px; overflow: auto; white-space: pre-wrap; }
.sd-field textarea { width: 100%; min-height: 96px; padding: 6px 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); font: inherit; line-height: 1.45; resize: vertical; }
.sd-preset-save { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.sd-preset-save .sd-field { flex: 1; }
.sd-radio { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius-sm); cursor: pointer; }
.sd-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sd-radio:has(input:disabled) { opacity: .55; cursor: default; }
.sd-radio input { margin: 3px 0 0; accent-color: var(--accent); }
.sd-radio span { display: grid; gap: 2px; font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.45; }
.sd-radio b { font-size: var(--text-sm); color: var(--ink); }
.sd-keys-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); max-height: 60vh; overflow: auto; }
.sd-keys-h { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-sm); }
.sd-keys { display: grid; gap: 6px; margin: 0; font-size: var(--text-xs); }
.sd-keys div { display: flex; justify-content: space-between; gap: var(--space-4); }
.sd-keys dt { color: var(--ink-soft); }
.sd-keys dd { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; margin: 0; }
.sd-keys div { align-items: center; }
.sd-keys-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--space-2); }
.sd-keys-ch { min-height: 24px; padding: 0 8px; }
.sd-keys-ch.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.sd-keys-mine { margin-left: 4px; font: 700 var(--text-2xs) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); }
.sd-keys-none { font-size: var(--text-2xs); color: var(--ink-faint); }

/* Tick boxes at the size of the text beside them where there is a mouse;
   theme.css gives them 22px and a 44px row where there is a finger. */
@media (pointer: fine) {
  .sd :is(.sd-check, .sd-radio) > input:is([type="checkbox"], [type="radio"]) { width: 16px; height: 16px; min-width: 16px; min-height: 16px; margin: 0; }
  .sd label.sd-check { min-height: 28px; align-items: center; padding-top: 0; }
}

/* ---------------------------------------------------------------- narrower windows */

@media (max-width: 1500px) {
  .sd-master { width: 128px; }
  .sd-tb-word[data-word="low"] span { display: none; }
}
@media (max-width: 1366px) {
  .sd-tb-word span { display: none; }
}
@media (max-width: 1366px) {
  .sd-lufs { display: none; }
}
@media (max-width: 1180px) {
  .sd { --sd-insp-w: 272px; }
  .sd-master { width: 120px; }
  .sd-tabs [role="tab"] { padding: 0 3px; }
}
/* A count beside a heading, in figures. */
.sd-count { margin-left: 4px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* A label track's header: its name and the add button only. */
.sd-head-labels { justify-content: flex-start; padding-top: 8px; }
/* The transcript: words in running lines, each one chosen by a click, a
   drag or the arrow keys; the word being said is underlined as it plays. */
.sd-words-head { position: sticky; top: -4px; z-index: 1; background: var(--paper-raised); }
.sd-words { padding: 8px 2px 16px; font-size: var(--text-sm); line-height: 1.9; color: var(--ink); user-select: none; -webkit-user-select: none; border-radius: var(--radius-sm); }
.sd-words:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sd-wpara { margin: 0 0 10px; }
.sd-wt { margin-right: 4px; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sd-wsp { display: block; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sd-w { padding: 2px 1px; border-radius: var(--radius-sm); cursor: pointer; }
.sd-w:hover { background: var(--paper-inset); }
.sd-w.is-filler { color: var(--ink-faint); text-decoration: underline dotted; text-underline-offset: 3px; }
.sd-w.is-hit { box-shadow: inset 0 -2px var(--warn); }
.sd-w.is-now { box-shadow: inset 0 -2px var(--accent-strong); }
.sd-w.is-sel { background: var(--accent); color: var(--on-accent); }
.sd-words:focus .sd-w.is-cursor { outline: 1px solid var(--focus); outline-offset: 1px; }
/* Presets and templates of your own. */
.sd-presets { margin: 0; padding: 0; list-style: none; display: grid; }
.sd-presets li { display: flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--rule); }
.sd-presets li[hidden] { display: none; }
.sd-presets-n { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-presets-m { font-size: var(--text-xs); color: var(--ink-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Sealed recordings. */
.sd-seals { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.sd-seal { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--rule); }
.sd-seal-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sd-seal-m { font-size: var(--text-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sd-seal-k { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; margin: 0; font-size: var(--text-xs); color: var(--ink-soft); }
.sd-seal-k span { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.sd-seal-k code { font-family: var(--font-mono); overflow-wrap: anywhere; color: var(--ink); }
.sd-seal-say { margin: 0; font-size: var(--text-xs); color: var(--good); }
.sd-seal-say:empty { display: none; }
.sd-seal-say.is-bad { color: var(--danger); }
/* Narrower than the bar: it scrolls along, as on a phone. */
@media (max-width: 1280px) {
  .sd-bar { overflow-x: auto; scrollbar-width: none; }
  .sd-bar::-webkit-scrollbar { display: none; }
}
@media (max-width: 960px) {
  .sd-master, .sd-state { display: none; }
  .sd-mix-desk { overflow-x: auto; }
  .sd-mix-strips { flex: none; overflow: visible; }
  .sd-mix-master { border-left: 0; }
  .sd-export, .sd-batch { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- phones */

@media (max-width: 760px) {
  .sd-work, .sd[data-insp="false"] .sd-work { grid-template-columns: minmax(0, 1fr) !important; }
  .sd-hide-sm, .sd-brand { display: none !important; }
  .sd-top { gap: 4px; padding: 4px 6px; }
  .sd-top .os-app-home { width: 44px; height: 44px; }
  .sd-icon-btn, .sd-tb { min-width: 44px; width: auto; height: 44px; min-height: 44px; }
  .sd-btn, .sd-btn-sm, .sd-project, .sd-menu button, .sd-recent-open, .sd-check, .sd-radio, .sd-tabs [role="tab"], .sd-hist button, .sd-mark-t, .sd-mark-name, .sd-seg button, .sd-slot-name, .sd-knob-v, .sd-eq-vals summary, .sd-plug-api summary, .sd-autos input { min-height: 44px; }
  .sd-pow { width: 44px; height: 44px; }
  .sd-knobs { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .sd-knob-v { max-width: none; }
  .sd-ms-fx { display: none; }
  .sd-strip { width: 124px; }
  .sd-ins-b, .sd-strip-sel select, .sd-strip-db, .sd-strip-pk, .sd-tp, .sd-strip-name { min-height: 44px; }
  .sd-strip-ms .sd-ms { width: 48px; }
  .sd-fader { width: 44px; }
  .sd-fader::-webkit-slider-thumb { width: 40px; height: 24px; margin-left: -18px; box-shadow: inset 0 -11px 0 var(--paper-raised), inset 0 11px 0 var(--paper-raised); }
  .sd-fader-w { width: 46px; }
  .sd-send input[type="range"], .sd-strip-pan input { height: 44px; }
  .sd-mix-bar { overflow-x: auto; scrollbar-width: none; }
  /* Taller than the screen leaves: the desk scrolls up and down as well
     as across, rather than cutting the foot of the strips off. */
  .sd-mix-desk { overflow: auto; }
  .sd-mix-strips, .sd-mix-master { min-height: 640px; }
  .sd-strip-io { overflow: visible; }
  .sd-field input:not([type="range"]), .sd-field select, .sd-eq .sd-num { min-height: 44px; font-size: var(--text-md); }
  .sd-top .sd-grow { display: none; }
  .sd-projpick { flex: 1; min-width: 0; }
  .sd-project { max-width: 100%; }
  .sd-btn-main span { display: none; }
  .sd-btn { min-width: 44px; }
  .sd-bar { gap: 4px; padding: 2px 4px; overflow-x: auto; scrollbar-width: none; }
  .sd-bar::-webkit-scrollbar { display: none; }
  .sd-group { padding-right: 4px; }
  /* The clock first on a phone, whole and never squeezed, and the controls
     after it scroll along under the row's mark (details.js). */
  .sd-clockwrap { order: -1; flex: none; min-width: 104px; padding: 2px 6px; }
  .sd-clock { font-size: var(--text-md); }
  .sd-fx-menu { position: fixed; top: auto; bottom: 8px; left: 8px; right: 8px; max-width: none; }
  .sd-insp { position: fixed; z-index: 69; top: 0; bottom: 0; right: 0; width: min(92vw, 380px); box-shadow: 0 0 0 1px var(--rule), -20px 0 50px rgba(0, 0, 0, .25); animation: sd-drawer var(--dur-3) var(--ease-standard); }
  .sd-insp-x { display: inline-flex; }
  .sd-head { padding: 4px 4px 4px 9px; }
  .sd-head-mix, .sd-head-more { display: none; }
  .sd-head-labels .sd-head-more { display: inline-flex; width: 44px; height: 44px; }
  .sd-head-row { flex-wrap: wrap; }
  .sd-head-name { flex-basis: 100%; min-height: 44px; }
  .sd-ms { width: 44px; height: 44px; }
  .sd-head-add { min-height: 44px; margin: 8px 4px; }
  .sd-lane-head { padding-left: 9px; }
  .sd-lane-n { display: none; }
  .sd-ruler { height: 30px; }
  .sd-status { gap: 10px; min-height: 44px; }
  .sd[data-open="true"] .sd-status { padding-right: 64px; }
  body.sd-app #ppBadge { min-height: 44px; bottom: 0; }
  #sdInfo { display: none; }
  .sd-recent-meta { display: none; }
  .sd-dlg { padding: var(--space-4); }
  .sd-keys-cols, .sd-pair { grid-template-columns: minmax(0, 1fr); }
}
@keyframes sd-drawer { from { transform: translateX(12px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .sd-menu, .sd-start, .sd-insp { animation: none !important; }
}
:root[data-motion="none"] .sd-menu, :root[data-motion="none"] .sd-start, :root[data-motion="none"] .sd-insp { animation: none !important; }