/* widgets.css — buttons, fields, knob, slider, segmented, toggle, meter,
   spinner, confirm dialog, pickers, swatches, waveform canvas, and (at the
   bottom) the layout of the five views built out of them.
   Every hit target is at least 44-48 px in its short dimension. */

/* --- button ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--hit); padding: 8px 14px;
  border-radius: var(--r); border: 1px solid var(--border);
  background: var(--card); color: var(--text);
  font-size: var(--fs-sm); font-weight: 500; touch-action: manipulation;
  transition: transform 90ms ease-out, background-color 120ms ease;
}
.btn-icon { display: inline-flex; }
.btn-icon svg { display: block; fill: currentColor; }
.btn.is-pressed { transform: scale(0.97); background: #1c2027; }
.btn:disabled { opacity: 0.42; pointer-events: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #0d0f12; font-weight: 600; }
.btn-ghost { background: transparent; }
.btn-danger { background: transparent; border-color: var(--rec); color: var(--rec); }
.btn-rec { background: var(--rec); border-color: var(--rec); color: #12080a; font-weight: 700; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- field shell -------------------------------------------------------- */

.fld { margin: var(--gap-y) 0; }
.fld:first-child { margin-top: 0; }
.fld:last-child { margin-bottom: 0; }
.fld-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gap); margin-bottom: 2px;
}
.fld-label { font-size: var(--fs-xs); color: var(--sub); }
.fld-val { font-size: var(--fs-xs); color: var(--text); font-variant-numeric: tabular-nums; }
.is-disabled { opacity: 0.4; pointer-events: none; }

/* --- toggle ------------------------------------------------------------- */

.fld-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); min-height: var(--hit-sm);
}
.fld-toggle .fld-label { font-size: var(--fs-md); color: var(--text); min-width: 0; }

.sw {
  position: relative; flex: 0 0 auto;
  width: 52px; height: 30px; border-radius: 15px;
  background: var(--border); border: 1px solid var(--border);
  transition: background-color 140ms ease;
}
/* The pill is 30 px tall for looks; the thumb-sized target is 48. */
.sw::after { content: ''; position: absolute; inset: -9px -4px; border-radius: 24px; }
.sw-knob {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--sub);
  transition: transform 140ms ease, background-color 140ms ease;
}
.sw.is-on { background: rgba(124, 140, 255, 0.35); border-color: var(--accent); }
.sw.is-on .sw-knob { background: var(--accent); transform: translateX(22px); }
.sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- segmented ---------------------------------------------------------- */

.seg {
  display: flex; overflow: hidden; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r);
}
.seg-btn {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 8px;
  font-size: var(--fs-xs); color: var(--sub);
  border-right: 1px solid var(--border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn.is-on { background: var(--accent); color: #0d0f12; font-weight: 600; }
.seg-btn.is-pressed { background: #1c2027; }
.seg-btn.is-on.is-pressed { background: var(--accent); }

/* --- slider (28 px thumb, per the touch-target rule) -------------------- */

.rng {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 30px; margin: 0; background: transparent;
}
.rng::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--border); }
.rng::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -11px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
}
.rng::-moz-range-track { height: 6px; border-radius: 3px; background: var(--border); }
.rng::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
}
.rng:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* --- knob --------------------------------------------------------------- */

.knobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 2px 4px; }
.fld-knob { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 2px 0; }
.fld-knob .fld-label {
  text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.knob {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #22262e, #14171c 70%);
  border: 1px solid var(--border);
  touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none;
}

/* Value arc. Degrades to a plain disc without mask support — still legible,
   because the indicator line carries the value too. */
.knob::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 225deg,
    var(--accent) 0turn calc(var(--knob-fill, 0) * 0.75turn),
    var(--border) calc(var(--knob-fill, 0) * 0.75turn) 0.75turn,
    transparent 0.75turn);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}

/* Origin is the knob's centre: 9 px top offset + 19 px = 28 px = half of 56. */
.knob-ind {
  position: absolute; left: 50%; top: 9px; margin-left: -1.5px;
  width: 3px; height: 15px; border-radius: 2px; background: var(--text);
  transform-origin: 50% 19px; transform: rotate(var(--knob-ang, 0deg));
  pointer-events: none;
}
.knob.is-active { border-color: var(--accent); }
.knob.is-active .knob-ind { background: var(--accent); }
.knob:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- text field --------------------------------------------------------- */

.txt {
  display: block; width: 100%; min-height: var(--hit); padding: 10px 12px;
  border-radius: var(--r); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: var(--fs-md);
}
.txt::placeholder { color: var(--sub); }
.txt:focus { outline: none; border-color: var(--accent); }

/* --- meter -------------------------------------------------------------- */

.meter {
  position: relative; height: 8px; border-radius: 4px;
  background: var(--border); overflow: hidden;
}
.meter-fill {
  display: block; width: 100%; height: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--ok) 0%, var(--warn) 78%, var(--rec) 100%);
}
.meter.is-clip { box-shadow: inset 0 0 0 1px var(--rec); }
.fld-meter { display: flex; flex-direction: column; gap: 4px; }

/* --- spinner ------------------------------------------------------------ */

.spinner {
  display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--accent); border-right-color: var(--accent); }
}

/* --- confirm dialog ----------------------------------------------------- */

.dlg { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.dlg-back {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6);
  opacity: 0; transition: opacity 160ms ease;
}
.dlg.is-open .dlg-back, .dlg.is-open .dlg-card { opacity: 1; }
.dlg-card {
  position: relative; width: 100%; max-width: 22rem; padding: 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  opacity: 0; transition: opacity 160ms ease;
}
.dlg-title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 8px; }
.dlg-msg { font-size: var(--fs-sm); color: var(--sub); }
.dlg-actions { display: flex; gap: var(--gap); margin-top: 16px; }
.dlg-actions .btn { flex: 1 1 0; }

/* --- pickers ------------------------------------------------------------ */

.pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pick-pad {
  position: relative; min-height: 56px; padding: 4px; overflow: hidden;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: var(--fs-xs);
  white-space: nowrap; text-overflow: ellipsis;
}
.pick-pad::before {
  content: ''; position: absolute; inset: 0;
  background: var(--pad-color, var(--accent)); opacity: 0.18; pointer-events: none;
}
.pick-pad.is-taken { opacity: 0.5; }
.pick-pad.is-pressed { border-color: var(--accent); }

.pick-list { display: flex; flex-direction: column; gap: 4px; }
.pick-row { justify-content: space-between; text-align: left; }
.pick-row .btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-meta { flex: 0 0 auto; margin-left: var(--gap); color: var(--sub); font-size: var(--fs-xs); }

/* --- colour swatches ---------------------------------------------------- */

.swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.swatch {
  min-height: 44px; min-width: 0; padding: 0; border-radius: var(--r-sm);
  background: var(--pad-color); border: 2px solid transparent;
}
.swatch.is-on { border-color: var(--text); }

/* --- editor bits -------------------------------------------------------- */

.ed-wave {
  width: 100%; height: 88px; border-radius: var(--r-sm);
  background: var(--bg); border: 1px solid var(--border); touch-action: none;
}
.ed-sample {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gap); margin-bottom: 6px;
}
.ed-sample-name {
  min-width: 0; font-size: var(--fs-md);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ed-sample-meta {
  flex: 0 0 auto; font-size: var(--fs-xs); color: var(--sub);
  font-variant-numeric: tabular-nums;
}
.sheet-editor .sec { margin-bottom: var(--gap-y); }

/* ======================================================================
   VIEW LAYOUT
   The views hand out class names and expect the stylesheet to lay them out.
   Everything below is layout and density only — one flex/grid rule per row of
   controls, so no view needs inline geometry.
   ====================================================================== */

.view-rec, .view-kit, .view-set, .view-jam { display: block; }

/* --- shared row helpers ------------------------------------------------- */

.rec-row, .kit-line, .seq-line, .jam-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: var(--gap-y) 0;
}
.rec-row:first-child, .kit-line:first-child, .seq-line:first-child, .jam-line:first-child { margin-top: 0; }
.rec-row:last-child, .kit-line:last-child, .seq-line:last-child, .jam-line:last-child { margin-bottom: 0; }
.kit-line .btn, .jam-line .btn, .rec-row > .btn { flex: 1 1 auto; }
/* A field dropped into a row (toggle, segmented) keeps its own vertical rhythm
   out of it — the row owns the spacing. */
.rec-row > .fld, .seq-line > .fld { flex: 1 1 140px; min-width: 0; margin: 0; }
/* A segmented control needs its labels: it takes the whole line and lets the
   button next to it wrap, rather than truncating "4 шматків" to "4 …". */
.rec-row > .fld-seg { flex: 1 1 100%; }

.kit-busy, .set-busy, .rec-busy {
  display: flex; align-items: center; gap: 8px;
  margin-top: var(--gap-y); font-size: var(--fs-sm); color: var(--sub);
}

/* --- recorder ----------------------------------------------------------- */

/* The 96 px record button and its readout share a line instead of stacking. */
.rec-live {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: var(--gap-y) 0;
}
.rec-bigrow { flex: 0 0 auto; }
.rec-big { border-radius: 50%; font-size: var(--fs-md); }
.rec-big.is-recording, .rec-big.is-countin { box-shadow: 0 0 0 3px rgba(255, 95, 86, 0.35); }
.rec-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec-status { font-size: var(--fs-sm); color: var(--sub); }
.rec-timer { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-error { margin: 4px 0; font-size: var(--fs-sm); color: var(--rec); }

.rec-review { display: flex; flex-direction: column; gap: var(--gap-y); }
.rec-review .rec-meta {
  flex-direction: row; align-items: center; justify-content: space-between; gap: var(--gap);
}
.rec-duration { font-size: var(--fs-sm); color: var(--sub); font-variant-numeric: tabular-nums; }
.rec-wave, .wave {
  border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--border);
}

/* --- kit ---------------------------------------------------------------- */

.kit-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.kit-chip {
  max-width: 100%; min-height: var(--hit-sm); padding: 0 12px;
  border-radius: var(--r); border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: var(--fs-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color 120ms ease;
}
.kit-chip.is-on { background: var(--accent); border-color: var(--accent); color: #0d0f12; }
.kit-chip.is-pressed { background: #1c2027; }
.kit-chip.is-on.is-pressed { background: var(--accent); }

.kit-list { display: flex; flex-direction: column; }
.kit-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); padding: 4px 0; border-top: 1px solid var(--border);
}
.kit-item:first-child { border-top: 0; }
/* Name on its own line, then duration/size and "on N pads" side by side — three
   stacked lines per sample turned a short library into a scroll. */
.kit-item-main {
  display: grid; grid-template-columns: auto auto; justify-content: start;
  align-items: baseline; column-gap: 8px; min-width: 0;
}
.kit-item-name {
  grid-column: 1 / -1; font-size: var(--fs-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kit-item-main .sub {
  font-size: var(--fs-xs); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kit-item-btns { flex: 0 0 auto; display: flex; gap: 4px; }
.kit-item-btns .btn {
  min-height: var(--hit-sm); padding: 0 7px; font-size: 0.68rem; border-radius: var(--r-sm);
}
/* A per-row delete keeps the red glyph but loses the red frame: it should be
   findable, not the loudest thing in the list. */
.kit-item-btns .btn-danger, .seq-icon.btn-danger { border-color: var(--border); }

/* A pack row is three lines tall; without this its single button stretches to
   match and turns into a slab. */
.kit-packs .kit-item-btns { align-items: center; }
.kit-packs .kit-item { padding: 6px 0; }

/* --- settings + jam ----------------------------------------------------- */

/* Settings is a long column of sliders. Inlining label / track / readout (the
   same shape the sequencer's swing control uses) fits four controls in the
   space that used to hold two. */
.view-set .fld-slider, .seq-ctl .fld-slider {
  display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr) auto;
  align-items: center; column-gap: var(--gap);
}
.view-set .fld-slider .fld-head, .seq-ctl .fld-slider .fld-head { display: contents; }
.view-set .fld-slider .fld-label, .seq-ctl .fld-slider .fld-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-set .fld-slider .rng, .seq-ctl .fld-slider .rng { order: 2; }
.view-set .fld-slider .fld-val, .seq-ctl .fld-slider .fld-val {
  order: 3; min-width: 28px; text-align: right;
}

.view-set-jam { margin-top: var(--gap-y); }
.jam-note, .jam-status, .jam-error { margin: 4px 0; font-size: var(--fs-sm); }
.jam-note { font-size: var(--fs-xs); color: var(--sub); }
.jam-status.is-offline { color: var(--sub); }
.jam-error { color: var(--rec); }
.jam-share-url {
  display: block; width: 100%; margin: 4px 0; padding: 8px 10px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--bg); color: var(--sub); font-size: var(--fs-xs);
}
.jam-peers { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.jam-peer { display: flex; align-items: center; gap: 6px; min-height: 26px; font-size: var(--fs-sm); }
.jam-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.jam-peer-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jam-peer.is-me .jam-peer-name { font-weight: 600; }

/* --- sequencer ---------------------------------------------------------- */

/* The view is a fixed control strip plus a step area that takes what is left,
   so the steps are always on screen without scrolling past the controls. */
.view-host[data-view='seq'] { display: flex; }
.view-seq {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: var(--gap-y);
}
.seq-strip { flex: 0 0 auto; margin-bottom: 0; }

/* transport: play | tempo cell | tap — one line at 360 px, never wrapping. */
.seq-bar { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.seq-bar > .btn {
  flex: 0 0 auto; min-height: var(--hit-sm); padding: 0 10px; white-space: nowrap;
}
.seq-tempo {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: stretch; justify-content: space-between; gap: 1px;
  padding: 1px; border-radius: var(--r);
  background: var(--bg); border: 1px solid var(--border);
}
.seq-tempo .btn {
  flex: 1 1 0; min-width: 30px; min-height: var(--hit-sm); padding: 0;
  border: 0; background: transparent; font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
/* The BPM readout gets its own fixed-width cell, with the number and the unit
   on separate lines — it used to butt straight into the +1 button. */
.seq-bpm {
  flex: 0 0 auto; width: 46px; padding: 0 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.05; text-align: center;
}
.seq-bpmval { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.seq-bpmunit { font-size: 0.56rem; color: var(--sub); letter-spacing: 0.06em; }

/* patterns: the chips are the loud element, new/delete are icon buttons. */
.seq-pats { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.seq-patlabel {
  flex: 0 0 auto; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sub);
}
.seq-patterns {
  flex: 1 1 auto; min-width: 0; display: flex; gap: 4px;
  overflow-x: auto; overflow-y: hidden; padding: 1px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.seq-patterns::-webkit-scrollbar { display: none; }
.seq-pat {
  flex: 0 0 auto; min-width: var(--hit-sm); min-height: var(--hit-sm);
  padding: 0 12px; font-size: var(--fs-md); font-weight: 600;
}
.seq-pat.is-on { background: var(--accent); border-color: var(--accent); color: #0d0f12; }
.seq-icon {
  flex: 0 0 auto; width: var(--hit-sm); min-width: var(--hit-sm);
  min-height: var(--hit-sm); padding: 0;
}

/* swing + record arm live on two tight lines, not four. */
.seq-ctl { flex: 0 0 auto; margin-bottom: 0; }
.seq-ctl .fld-slider { margin: 0 0 2px; grid-template-columns: auto minmax(0, 1fr) auto; }
.seq-ctl .fld-toggle { min-height: var(--hit-sm); }
.seq-ctl .fld-toggle .fld-label { font-size: var(--fs-sm); }

/* --- step grid ---------------------------------------------------------- */

/* 16 steps at an honest touch size do not fit 360 px, so the grid scrolls
   horizontally and snaps a bar at a time. The row head is a sticky left column
   so you always know which pad you are editing. */
.seq-rows {
  --seq-head: 132px; --seq-step-w: 34px;
  flex: 1 1 auto; min-height: 132px;
  overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scroll-padding-left: var(--seq-head);
}
/* width:max-content matters: a sticky child can only travel inside its own
   containing block, so the row has to span the whole scrollable width or the
   head would scroll away after the first screenful. */
.seq-row {
  display: flex; align-items: stretch; gap: 3px; margin-bottom: 4px;
  width: max-content; min-width: 100%;
}
.seq-rowhead {
  position: sticky; left: 0; z-index: 2;
  flex: 0 0 var(--seq-head); width: var(--seq-head); min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 3px 4px; border-radius: var(--r-sm);
  background: var(--card); border: 1px solid var(--border);
}
.seq-rowtitle { display: flex; align-items: center; gap: 5px; min-width: 0; }
.seq-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.seq-rowname {
  min-width: 0; font-size: var(--fs-xs); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seq-rowbtns { display: flex; gap: 2px; }
.seq-rowbtns .btn {
  flex: 1 1 0; min-width: 0; min-height: var(--hit-sm);
  padding: 0 2px; font-size: 0.6rem; border-radius: var(--r-sm);
}
.seq-rowbtns .btn.is-on {
  background: var(--accent); border-color: var(--accent); color: #0d0f12; font-weight: 700;
}
.seq-row.is-muted .seq-steps, .seq-row.is-muted .seq-rowtitle { opacity: 0.42; }

/* min-width: min-content is what makes the row overflow (and therefore scroll)
   instead of squeezing the cells below a thumb's width. */
.seq-steps {
  flex: 1 1 auto; min-width: min-content;
  display: grid; grid-template-columns: repeat(16, minmax(var(--seq-step-w), 1fr));
  gap: 3px;
}
.seq-step {
  min-width: 0; min-height: 40px; padding: 0;
  border-radius: 6px; border: 1px solid var(--border); background: #14171c;
  /* pan-x pan-y, not none: the step grid is a scroller now. */
  touch-action: pan-x pan-y;
  transition: background-color 90ms ease-out;
}
/* Every 4th step marks the bar, and is where the scroll snaps. */
.seq-step.is-accent { background: #212734; border-color: #3a4152; scroll-snap-align: start; }
.seq-step.is-on { background: var(--accent); border-color: var(--accent); }
.seq-step.is-playing { outline: 2px solid var(--text); outline-offset: -2px; }
.seq-step:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.seq-rows > .sub { padding: 8px 2px; }

/* Landscape/short: there is width to spare and no height at all, so the two
   control blocks sit side by side and the steps keep the rest. */
@media (max-height: 460px) {
  .view-seq {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr); column-gap: var(--gap);
  }
  .seq-strip { grid-area: 1 / 1; }
  .seq-strip .sec-title { display: none; }
  .seq-ctl { grid-area: 1 / 2; }
  .seq-rows { grid-area: 2 / 1 / 3 / -1; min-height: 76px; }
}

/* Narrow phones: the row head is the only thing competing with the steps. */
@media (max-width: 380px) {
  .seq-rows { --seq-head: 124px; }
}