/* Sacred Command Center · Design · the Run board (#design/runs). Semantic tokens only: no hex, no rgba (tests/static.mjs S-a2).
   Class prefix ds-run-. Buttons, Seg, Sheet, Menu and the honest states are the kit's; the Studio's thumbs (.st-thumb) draw the takes.
   Crimson stays the one filled button of the view (Apply changes, or the first gate's Approve) and the mark of a step that waits or
   failed; a status is a word with a mark, a dot only for work happening now. No gradients, glows, pills or side stripes. */

.ds-run { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.ds-run-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ds-run-back { display: inline-flex; align-items: center; gap: var(--s-1); align-self: flex-start; min-height: var(--tap); color: var(--text-2); font-size: var(--fs-cell); font-weight: 600; text-decoration: none; border-radius: var(--r-button); }
.ds-run-back .i { margin-left: -4px; }
@media (hover: hover) { .ds-run-back:hover { color: var(--text); } }
.ds-run-back:focus-visible, .ds-run-row:focus-visible, .ds-run-wrap:focus-visible, .ds-run-td:focus, .ds-run-card-step:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.ds-run-notlive { margin: 0; }

/* ── Header: the run, what it has cost against the estimate, and what can be done to it ──────────────────────────────── */
.ds-run-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "m money" "m acts"; gap: var(--s-2) var(--s-5); align-items: end; }
.ds-run-head-m { grid-area: m; display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ds-run-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0; color: var(--text-2); font-size: var(--fs-cell); }
.ds-run-meta > * + *::before { content: "·"; margin-right: var(--s-2); color: var(--text-3); }
.ds-run-meta .status::before { content: ""; margin-right: 0; }
.ds-run-money { grid-area: money; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.ds-run-money-v { display: flex; align-items: baseline; gap: var(--s-2); }
.ds-run-money-v b { font-size: var(--fs-h3); font-weight: 800; color: var(--text); }
.ds-run-head-a { grid-area: acts; justify-content: flex-end; }
@media (max-width: 1023px) {
  .ds-run-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "m" "money" "acts"; align-items: start; }
  .ds-run-money { align-items: flex-start; text-align: left; }
  .ds-run-head-a { justify-content: flex-start; }
}

/* ── State words and their marks ──────────────────────────────────────────────────────────────────────────────────── */
.ds-run-state { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text); font-size: var(--fs-caption); font-weight: 700; line-height: 1.3; }
.ds-run-state > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ds-run-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--text-3); }
.ds-run-mark.is-wait, .ds-run-mark.is-bad { color: var(--accent-mark); }
.ds-run-mark.is-done { color: var(--text-2); }
.ds-run-state .dot { margin: 0 4px; }

/* ── Notes under the header ───────────────────────────────────────────────────────────────────────────────────────── */
.ds-run-notes { display: flex; flex-direction: column; gap: var(--s-2); }
.ds-run-note { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--text-2); font-size: var(--fs-cell); line-height: 1.45; }
.ds-run-note .i { margin-top: 1px; color: var(--text-3); }
.ds-run-note.is-stale { border-style: dashed; border-color: var(--line-strong); color: var(--text); }
.ds-run-note.is-bad .i { color: var(--accent-mark); }

/* ── The step strip ───────────────────────────────────────────────────────────────────────────────────────────────── */
.ds-run-strip-w { min-width: 0; }
.ds-run-strip { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-3); margin: 0; padding: 0; list-style: none; }
.ds-run-strip--in { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.ds-run-sr { display: flex; flex: 0 1 auto; min-width: 0; }
.ds-run-si { flex: none; display: flex; }
.ds-run-sb { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 112px; max-width: 200px; min-height: var(--tap); padding: var(--s-1) var(--s-3) var(--s-2) var(--s-2); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-card); font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) { .ds-run-sb:hover { border-color: var(--line-strong); background: var(--hover); } }
.ds-run-sb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ds-run-si.is-wait .ds-run-sb, .ds-run-si.is-bad .ds-run-sb { border-color: var(--accent); }
.ds-run-si.is-stale .ds-run-sb { border-style: dashed; border-color: var(--line-strong); }
.ds-run-si.is-off .ds-run-sb, .ds-run-si.is-idle .ds-run-sb { color: var(--text-2); }
.ds-run-sg { flex: none; display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-1) var(--s-2) var(--s-2); border: 1px dashed var(--line-strong); border-radius: var(--r-panel); }
.ds-run-sg-l { padding: 0 var(--s-1); color: var(--text-3); font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); text-transform: uppercase; }

/* ── Waiting for you ──────────────────────────────────────────────────────────────────────────────────────────────── */
.ds-run-waiting { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-4); align-items: start; }
.ds-run-gate { border-color: var(--line-strong); }
.ds-run-gate .ds-run-takes { max-width: 420px; }
.ds-run-jumps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); column-gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.ds-run-jump { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t i" "c i"; align-items: center; column-gap: var(--s-2); width: 100%; min-height: var(--tap); padding: var(--s-2) var(--s-1); background: transparent; color: var(--text); border: 0; border-top: 1px solid var(--line); border-radius: 0; font: inherit; text-align: left; cursor: pointer; }
.ds-run-jump-t { grid-area: t; font-size: var(--fs-cell); font-weight: 700; }
.ds-run-jump .ds-cap { grid-area: c; }
.ds-run-jump .i { grid-area: i; color: var(--text-3); }
@media (hover: hover) { .ds-run-jump:hover { background: var(--hover); } }
.ds-run-jump:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ── The board: shots by step ─────────────────────────────────────────────────────────────────────────────────────── */
.ds-run-cols { align-items: start; }
.ds-run-board { min-width: 0; }
.ds-run-wrap { min-width: 0; overflow-x: auto; scrollbar-width: thin; margin: 0 calc(var(--s-4) * -1); padding: 0 var(--s-4) var(--s-1); }
.ds-run-table { width: 100%; min-width: 860px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.ds-run-th, .ds-run-td, .ds-run-rowh { padding: var(--s-2); vertical-align: top; text-align: left; border-top: 1px solid var(--line); }
.ds-run-table thead .ds-run-th { border-top: 0; padding-top: 0; }
.ds-run-th--shot, .ds-run-rowh { width: 156px; padding-left: 0; }
.ds-run-colbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: var(--tap); padding: var(--s-1) var(--s-2); margin-left: calc(var(--s-2) * -1); background: transparent; color: var(--text); border: 0; border-radius: var(--r-button); font: inherit; text-align: left; cursor: pointer; }
.ds-run-col-t { font-size: var(--fs-cell); font-weight: 700; }
@media (hover: hover) { .ds-run-colbtn:hover { background: var(--hover); } }
.ds-run-colbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.ds-run-shot { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-run-shot-n { color: var(--text-3); font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); text-transform: uppercase; }
.ds-run-shot-t { color: var(--text); font-size: var(--fs-cell); font-weight: 700; overflow-wrap: anywhere; }
.ds-run-shot-vo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ds-run-td { border-radius: 0; }
.ds-run-td.is-waiting { background: var(--surface-2); }
.ds-run-td.is-stale .ds-run-body { outline: 1px dashed var(--line-strong); outline-offset: 4px; border-radius: var(--r-button); }
.ds-run-none { padding-top: 2px; }

/* One cell (and a step that runs once): state, progress, takes, words, decision, actions */
.ds-run-body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.ds-run-prog { display: flex; flex-direction: column; gap: 4px; }
.ds-run-bar { display: block; width: 100%; height: 4px; border: 0; border-radius: 2px; background: var(--surface-2); color: var(--text-2); -webkit-appearance: none; appearance: none; overflow: hidden; }
.ds-run-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 2px; }
.ds-run-bar::-webkit-progress-value { background: var(--text-2); border-radius: 2px; }
.ds-run-bar::-moz-progress-bar { background: var(--text-2); border-radius: 2px; }
.ds-run-takes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.ds-run-takes.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Takes sit side by side where the cell is wide enough to judge two at once (a gate box, a phone card, a board of few steps), one
   under the other in a narrow board column. */
.ds-run-body { container-type: inline-size; }
.ds-run-td .ds-run-takes.is-many, .ds-run-stepcard .ds-run-takes.is-many { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 232px) { .ds-run-td .ds-run-takes.is-many, .ds-run-stepcard .ds-run-takes.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-run-takes.is-many { max-width: 480px; }
.ds-run-takes:not(.is-many) { max-width: 320px; }
.ds-run-take { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ds-run-take.is-other .st-thumb { opacity: 0.55; }
.ds-run-take.is-picked .st-thumb { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.ds-run-open { position: relative; display: block; width: 100%; min-height: 0; padding: 0; background: transparent; border: 0; border-radius: var(--r-button); cursor: pointer; }
.ds-run-open:disabled { cursor: default; }
.ds-run-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ds-run-letter, .ds-run-clip-n { position: absolute; left: 4px; top: 4px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: var(--r-button); background: var(--scrim); color: var(--linen); font-size: var(--fs-caption); font-weight: 700; line-height: 1; }
.ds-run-take.is-audio { grid-column: 1 / -1; }
.ds-run-file { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--tap); padding: 0 var(--s-2); background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-button); font: inherit; font-size: var(--fs-caption); font-weight: 600; text-align: left; cursor: pointer; }
.ds-run-file .i { color: var(--text-3); }
.ds-run-file:disabled { cursor: default; }
.ds-run-file:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .ds-run-file:not(:disabled):hover { border-color: var(--line-strong); } }
.ds-run-picked { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--text); font-size: var(--fs-caption); font-weight: 700; }
.ds-run-pick { width: 100%; }
.ds-run-words { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--text-2); font-size: var(--fs-caption); line-height: 1.45; }
.ds-run-err { margin: 0; color: var(--text); font-size: var(--fs-caption); line-height: 1.45; overflow-wrap: anywhere; }
.ds-run-dec, .ds-run-edit { margin: 0; color: var(--text-2); font-size: var(--fs-caption); line-height: 1.45; overflow-wrap: anywhere; }
.ds-run-edit .ds-label { margin-right: var(--s-1); }
.ds-run-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.ds-run-acts .btn .i { margin-left: -2px; }
.ds-run-more .i { width: 20px; height: 20px; }

/* A workflow with no For each: its steps as cards */
.ds-run-stepcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); align-items: start; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.ds-run-stepcard { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding: var(--s-2) var(--s-3) var(--s-3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); }
.ds-run-stepcard.is-waiting { background: var(--surface-2); }
.ds-run-stepcard.is-stale { border-style: dashed; border-color: var(--line-strong); }
.ds-run-stepcard:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.ds-run-stepcard .ds-run-colbtn { margin-left: calc(var(--s-2) * -1); }

/* A phone: each shot is a card, its steps one under the other */
.ds-run-cards { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.ds-run-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); }
.ds-run-card-h { margin: 0; font-size: var(--fs-body); }
.ds-run-card-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ds-run-card-step { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2) 0; border-top: 1px solid var(--line); border-radius: 0; }
.ds-run-card-step .ds-run-takes.is-many { max-width: 360px; }

/* ── Side column: script, sound, checks ───────────────────────────────────────────────────────────────────────────── */
.ds-run-self { align-self: flex-start; }
.ds-run-script { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.ds-run-script li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--s-2); color: var(--text); font-size: var(--fs-cell); line-height: 1.45; }
.ds-run-t { color: var(--text-3); font-variant-numeric: tabular-nums; }
.ds-run-sound { display: flex; flex-direction: column; gap: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.ds-run-sound:first-of-type { padding-top: 0; border-top: 0; }
.ds-run-sound-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.ds-run-sound-t { color: var(--text); font-size: var(--fs-cell); font-weight: 700; }
.ds-run-audio { display: block; width: 100%; height: 40px; margin-top: var(--s-1); }
.ds-run-checks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ds-run-check { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "i m w" ". v v"; gap: 2px var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-cell); }
.ds-run-check:first-child { border-top: 0; padding-top: 0; }
.ds-run-check-i { grid-area: i; display: grid; place-items: center; height: 20px; color: var(--text-3); }
.ds-run-check.is-fail .ds-run-check-i { color: var(--accent-mark); }
.ds-run-check-m { grid-area: m; display: flex; flex-direction: column; min-width: 0; }
.ds-run-check-l { color: var(--text); font-weight: 700; }
.ds-run-check-v { grid-area: v; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); color: var(--text); }
.ds-run-check-w { grid-area: w; color: var(--text-2); font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); text-transform: uppercase; }
.ds-run-check.is-fail .ds-run-check-w { color: var(--text); }

/* ── The cut ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.ds-run-cut-m { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (max-width: 1023px) { .ds-run-cut-m { grid-template-columns: minmax(0, 1fr); } }
.ds-run-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); }
.ds-run-video.is-wait { display: grid; place-items: center; }
.ds-run-cut-s { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.ds-run-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; list-style: none; color: var(--text); font-size: var(--fs-cell); }
.ds-run-facts .ds-label { margin-right: var(--s-1); }
.ds-run-tl { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--s-1); }
.ds-run-track { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-2); align-items: center; min-width: 560px; }
.ds-run-track-l { color: var(--text-3); font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); text-transform: uppercase; }
.ds-run-track-b { display: flex; align-items: center; min-height: 28px; min-width: 0; padding: 0 var(--s-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-button); color: var(--text-2); font-size: var(--fs-caption); }
.ds-run-track-b > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-run-track-b.is-stale { border-style: dashed; border-color: var(--line-strong); }
.ds-run-track-b.is-pending, .ds-run-track-b.is-queued, .ds-run-track-b.is-running { color: var(--text-3); background: transparent; border-style: dashed; }
.ds-run-clips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.ds-run-clip { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-run-clip-b { position: relative; display: block; height: 56px; min-height: 56px; padding: 0; background: var(--surface-2); border: 0; border-radius: var(--r-button); overflow: hidden; cursor: pointer; }
.ds-run-clip-b:disabled { cursor: default; }
.ds-run-clip-b:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ds-run-clip-b .st-thumb { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.ds-run-clip-t { overflow: hidden; color: var(--text); font-size: var(--fs-caption); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ds-run-span-1 { grid-column: span 1; } .ds-run-span-2 { grid-column: span 2; } .ds-run-span-3 { grid-column: span 3; } .ds-run-span-4 { grid-column: span 4; } .ds-run-span-5 { grid-column: span 5; } .ds-run-span-6 { grid-column: span 6; }
.ds-run-span-7 { grid-column: span 7; } .ds-run-span-8 { grid-column: span 8; } .ds-run-span-9 { grid-column: span 9; } .ds-run-span-10 { grid-column: span 10; } .ds-run-span-11 { grid-column: span 11; } .ds-run-span-12 { grid-column: span 12; }
.ds-run-span-13 { grid-column: span 13; } .ds-run-span-14 { grid-column: span 14; } .ds-run-span-15 { grid-column: span 15; } .ds-run-span-16 { grid-column: span 16; } .ds-run-span-17 { grid-column: span 17; } .ds-run-span-18 { grid-column: span 18; }
.ds-run-span-19 { grid-column: span 19; } .ds-run-span-20 { grid-column: span 20; } .ds-run-span-21 { grid-column: span 21; } .ds-run-span-22 { grid-column: span 22; } .ds-run-span-23 { grid-column: span 23; } .ds-run-span-24 { grid-column: span 24; }
.ds-run-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); max-width: 640px; margin: 0; padding: 0; list-style: none; }
.ds-run-pair-i { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ds-run-files { display: flex; flex-direction: column; gap: var(--s-2); }
.ds-run-files-l { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; list-style: none; }
.ds-run-files-l li { display: flex; align-items: center; gap: var(--s-2); color: var(--text); font-size: var(--fs-cell); font-weight: 700; }

/* ── The runs list ────────────────────────────────────────────────────────────────────────────────────────────────── */
.ds-run-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ds-run-row { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 10rem 9.5rem 20px; align-items: center; gap: var(--s-3); min-height: 64px; padding: var(--s-2); color: var(--text); text-decoration: none; border-top: 1px solid var(--line); border-radius: 0; }
.ds-run-list li:first-child .ds-run-row { border-top: 0; }
@media (hover: hover) { .ds-run-row:hover { background: var(--hover); } }
.ds-run-row > .i { color: var(--text-3); }
.ds-run-row-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-run-row-t { font-weight: 700; overflow-wrap: anywhere; }
.ds-run-row-n { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-cell); }
.ds-run-row-n .num { font-weight: 700; }
/* The run's state and, while it goes, how many of its steps wait for a person (it reads Running while any step is being made). */
.ds-run-row-s { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ds-run-row-wait { font-size: var(--fs-caption); font-weight: 700; color: var(--text); }
@media (max-width: 1023px) {
  .ds-run-row { grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "m s i" "n w i"; row-gap: var(--s-1); }
  .ds-run-row-m { grid-area: m; } .ds-run-row > .ds-run-row-s { grid-area: s; } .ds-run-row-n { grid-area: n; flex-direction: row; align-items: baseline; gap: var(--s-1); } .ds-run-row-w { grid-area: w; text-align: right; } .ds-run-row > .i { grid-area: i; }
}
@media (max-width: 767px) {
  .ds-run-row { grid-template-columns: minmax(0, 1fr) 20px; grid-template-areas: "m i" "s i" "n i" "w i"; }
  .ds-run-row-w { text-align: left; }
}

/* ── Sheets ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
.ds-run-sheet { display: flex; flex-direction: column; gap: var(--s-4); }
.ds-run-sheet-s { display: flex; flex-direction: column; gap: var(--s-2); }
.ds-run-shots { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ds-run-shots-i { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.ds-run-shots-i:first-child { border-top: 0; }
.ds-run-shots-th { display: block; width: 72px; }
.ds-run-shots-th.is-empty { aspect-ratio: 16 / 9; background: var(--surface-2); border-radius: var(--r-button); }
.ds-run-shots-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-run-shots-t { color: var(--text); font-size: var(--fs-cell); font-weight: 700; }
.ds-run-ta { min-height: 160px; }
/* A step card takes focus after a decision on it (its buttons change as the step moves on), as a board cell does. */
.ds-run-stepcard:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.ds-run-shotedit { display: flex; flex-direction: column; gap: var(--s-3); margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.ds-run-shotedit-s { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); margin: 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-card); }
.ds-run-shotedit-s > .btn { align-self: flex-start; }
.ds-run-shotedit-two { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: var(--s-2); }

/* ── Phone ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .ds-run { gap: var(--s-3); }
  .ds-run-sb { max-width: 180px; }
  .ds-run-strip-w { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--s-1); overflow-x: auto; scrollbar-width: thin; }
  .ds-run-strip, .ds-run-strip--in { flex-wrap: nowrap; }
  .ds-run-strip { align-items: flex-start; }   /* the visible steps sit at the top of the scroller, not under a taller For each further along */
  .ds-run-shotedit-two { grid-template-columns: minmax(0, 1fr); }
  .ds-run-sr { flex: none; }
  .ds-run-meta { column-gap: var(--s-3); }
  .ds-run-meta > * + *::before { content: none; }
  .ds-run-head-a .btn { flex: 1 1 auto; }
  .ds-run-track { min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ds-run-clips { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; }
  .ds-run-clip { grid-column: auto; }
}

/* Fast picking on a phone (runs-board.js, runs-side.js NextDecision): each take a full-width card with a big Pick button, Approve
   and Redo one thumb each, and Next decision kept at the bottom of the screen. From 768 px the board keeps its table. */
.ds-run-next { display: flex; justify-content: flex-end; margin: var(--s-3) 0 0; }
.ds-run-next-b { gap: var(--s-2); min-height: var(--tap); }
.ds-run-next-n { color: var(--text-2); font-weight: 600; }
@media (max-width: 767px) {
  .ds-run-next { position: sticky; bottom: 0; z-index: 2; margin: var(--s-3) calc(-1 * var(--s-2)) 0; padding: var(--s-2); background: var(--bg); border-top: 1px solid var(--line); }
  .ds-run-next-b { width: 100%; min-height: 52px; justify-content: center; font-size: var(--fs-body); }
  .ds-run-cards .ds-run-takes, .ds-run-cards .ds-run-takes.is-many, .ds-run-gate .ds-run-takes, .ds-run-gate .ds-run-takes.is-many { grid-template-columns: minmax(0, 1fr); max-width: none; gap: var(--s-3); }
  .ds-run-cards .ds-run-take, .ds-run-gate .ds-run-take { gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-card); }
  .ds-run-cards .ds-run-take.is-picked, .ds-run-gate .ds-run-take.is-picked { border-color: var(--text); }
  .ds-run-cards .ds-run-open, .ds-run-gate .ds-run-open { width: 100%; }
  .ds-run-cards .ds-run-pick, .ds-run-gate .ds-run-pick { width: 100%; min-height: 52px; font-size: var(--fs-body); }
  .ds-run-cards .ds-run-acts, .ds-run-gate .ds-run-acts { display: flex; flex-wrap: nowrap; gap: var(--s-2); }
  .ds-run-cards .ds-run-acts > .btn, .ds-run-gate .ds-run-acts > .btn { flex: 1 1 0; min-width: 0; min-height: 52px; justify-content: center; padding-inline: var(--s-2); white-space: nowrap; }
  .ds-run-cards .ds-run-more, .ds-run-gate .ds-run-more { flex: none; min-width: 52px; min-height: 52px; }
}