/* Sacred Command Center · Design (the Design Studio). Semantic tokens only: no hex, no rgba (tests/static.mjs S-a2). Buttons, Seg, chips,
   tabs, Sheet and Menu are the kit's; these classes lay out the frame, the composers, the results and the kits. Class prefix ds-.
   Crimson is the one filled button per view and the lit tab's rule; a status is a word. No gradients, glows, pills or side stripes. */

/* The top bar's Design button, beside Create: the same size and look (btn--secondary btn--sm, the word in Create's .label). A word
   from 768 px up; on a phone it folds to a 44 px icon button like its neighbour Create, so the page title the bar carries once the
   page scrolls keeps its room and the bar never scrolls sideways. */
.ds-topbar-btn { margin-right: var(--s-1); }
.ds-topbar-btn > .i { display: none; }
@media (max-width: 767px) {
  .ds-topbar-btn { width: var(--tap); padding: 0; margin-right: 0; }
  .ds-topbar-btn > .label { display: none; }
  .ds-topbar-btn > .i { display: block; margin: 0; }
}

/* The page runs in Present mode: the frame's own Exit replaces the shell's floating "Exit present mode". */
html.is-present:has(.module--design) .present-exit { display: none; }
/* The critical strip in Design says "Exit Design to read them" (CriticalBanner.js) and, with no floating Exit to keep clear of, wraps
   to two lines on a phone instead of cutting its words off. */
@media (max-width: 767px) {
  html.is-present:has(.module--design) .crit--strip { padding-right: var(--gutter); padding-block: var(--s-1); }
  html.is-present:has(.module--design) .crit--strip .crit-t { white-space: normal; }
}
/* 44 px targets (--tap) in Design: a segment with a one-digit label (How many, Takes) is never narrower, and a small search
   field is full height on a phone, as the kit already makes a small select. */
.module--design .seg > button { min-width: var(--tap); }
@media (max-width: 767px) { .module--design input.input--sm { min-height: var(--tap); } }
/* The model menu (Change): each model on two lines, its name and then where it runs or why it cannot run now, wide enough for both. */
.menu:has(.ds-mm-n) { min-width: min(360px, calc(100vw - var(--s-5))); max-width: min(420px, calc(100vw - var(--s-5))); }
.menu-item:has(.ds-mm-n) { padding-block: var(--s-2); }
.menu-item > span:has(> .ds-mm-n) { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ds-mm-n { overflow-wrap: anywhere; }
.ds-mm-h { color: var(--text-3); font-size: var(--fs-caption); font-weight: 500; line-height: 1.4; }

.ds { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding-bottom: var(--s-6); }

/* ── Frame: logo, tabs, client, spend, exit ───────────────────────────────────────────── */
.ds-top {
  display: grid; align-items: center; gap: var(--s-2) var(--s-4);
  grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "logo tabs pick spend exit";
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--line);
}
.ds-logo { grid-area: logo; display: flex; align-items: center; min-height: var(--tap); border-radius: var(--r-button); }
.ds-logo img { display: block; height: auto; max-width: none; }
.ds-logo-full img { width: 139px; }
.ds-logo-eye { display: none; }
.ds-logo-eye img { width: 40px; }
.ds-tabs { grid-area: tabs; min-width: 0; border-bottom: 0; }
.ds-tabs .tab { display: inline-flex; align-items: center; color: var(--text-3); text-decoration: none; }
.ds-tabs .tab[aria-current="page"] { color: var(--text); }
.ds-tabs .tab[aria-current="page"]::after { opacity: 1; transform: none; }
@media (hover: hover) { .ds-tabs .tab:hover { color: var(--text); } }
.ds-pick { grid-area: pick; min-width: 0; display: flex; }
.ds-client { min-width: 0; max-width: 300px; gap: var(--s-2); }
.ds-client .i { margin: 0 -4px 0 0; flex: none; }
.ds-client-l { flex: none; font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); text-transform: uppercase; color: var(--text-3); }
.ds-client-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: var(--fs-cell); font-weight: 700; }
.ds-client-skel { display: inline-block; width: 7rem; height: 14px; vertical-align: middle; }
.ds-spend { grid-area: spend; color: var(--text-2); font-size: var(--fs-cell); white-space: nowrap; }
.ds-spend-l { color: var(--text-3); }
.ds-spend .state { font-size: var(--fs-cell); }
.ds-exit { grid-area: exit; display: flex; align-items: center; gap: var(--s-1); }
.ds-full .i, .ds-exit-btn .i { margin-left: -4px; }

@media (max-width: 1279px) {
  .ds-top { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo spend pick exit" "tabs tabs tabs tabs"; }
  .ds-spend { justify-self: end; }
}
@media (max-width: 767px) {
  .ds { gap: var(--s-3); }
  .ds-top { gap: var(--s-2); grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo pick exit" "tabs tabs tabs" "spend spend spend"; }
  .ds-logo-full { display: none; }
  .ds-logo-eye { display: block; }
  .ds-pick { justify-content: flex-end; }
  .ds-client { max-width: 100%; }
  .ds-client-l { display: none; }
  .ds-spend { justify-self: start; font-size: var(--fs-caption); }
  .ds-full span, .ds-exit-btn span { display: none; }
  .ds-full, .ds-exit-btn { width: var(--tap); padding: 0; }
  .ds-full .i, .ds-exit-btn .i { margin: 0; }
  .ds-tabs { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); border-top: 1px solid var(--line); }
}

/* ── Panels and the pieces inside them ────────────────────────────────────────────────── */
.ds-panel { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
@media (max-width: 767px) { .ds-panel { padding: var(--s-3); } }
.ds-panel-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.ds-panel-r { color: var(--text-3); font-size: var(--fs-caption); }
.ds-h, .ds-label { margin: 0; font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); text-transform: uppercase; color: var(--text-2); }
.ds-cap { margin: 0; color: var(--text-3); font-size: var(--fs-caption); line-height: 1.45; overflow-wrap: anywhere; }
.ds-val { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ds-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
.ds-mt { margin-top: var(--s-3); }
.ds-col { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.ds-search { width: 220px; max-width: 100%; }
.ds-panel .empty { padding: var(--s-2) 0; }

/* ── Making tabs: composer left, results right ────────────────────────────────────────── */
.ds-make { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (min-width: 1024px) { .ds-make { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); } }
.ds-form { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.ds-block { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.ds-block .seg { flex-wrap: wrap; height: auto; }
.ds-block > .seg { align-self: flex-start; }
.ds-pair { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.ds-pair > .ds-block { flex: 0 1 auto; }
.ds-model { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.ds-model-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-model-n { margin: 0; color: var(--text); font-weight: 700; }
.ds-go, .ds-two-go { display: flex; flex-direction: column; gap: var(--s-2); }
/* Write's Draft and Polish stay in view as a making tab's Generate does (design-making.css). */
.ds-wr-composer .ds-two-go {
  position: sticky; bottom: 0; z-index: 2;
  margin-inline: calc(var(--s-4) * -1); padding: var(--s-3) var(--s-4);
  background: var(--surface); border-top: 1px solid var(--line);
}
@media (max-width: 767px) { .ds-wr-composer .ds-two-go { margin-inline: calc(var(--s-3) * -1); padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom)); } }
.ds-why { margin: 0; color: var(--text-2); font-size: var(--fs-caption); line-height: 1.45; }
.ds-why .state { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
.ds-why .state-why { margin-left: 0; color: var(--text-2); }
.ds-rules { margin: 0; color: var(--text-2); font-size: var(--fs-caption); line-height: 1.45; }
.ds-rules .ds-link { margin-left: var(--s-1); }
.ds-frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.ds-slot {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; min-height: 96px; padding: var(--s-3);
  background: var(--surface-2); color: var(--text-3); border: 1px dashed var(--line-strong); border-radius: var(--r-card);
  font: inherit; font-size: var(--fs-cell); font-weight: 600; text-align: center;
}
button.ds-slot:not(:disabled) { cursor: pointer; }
button.ds-slot:disabled { cursor: default; }
.ds-slot.is-full { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: var(--s-2); border-style: solid; }
.ds-modes { display: grid; gap: var(--s-2); }
.ds-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: var(--tap); padding: var(--s-2) var(--s-3); background: transparent; color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-card); font: inherit; text-align: left; cursor: pointer; }
.ds-mode[aria-pressed="true"] { background: var(--raised); border-color: var(--text-3); }
.ds-mode-t { font-size: var(--fs-cell); font-weight: 700; }

.ds-results-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.ds-results-h .seg { flex-wrap: wrap; height: auto; }
.ds-group { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); min-width: 0; }
.ds-group-h { display: flex; flex-direction: column; gap: 2px; }
.ds-group-t { margin: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.ds-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s-2); }
@media (max-width: 767px) { .ds-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-tile { display: block; padding: 0; border: 0; background: transparent; border-radius: var(--r-button); cursor: pointer; min-width: 0; }
.ds-tile .st-thumb { aspect-ratio: 1 / 1; }

/* ── Workflows and Runs ───────────────────────────────────────────────────────────────── */
.ds-wf, .ds-runs, .ds-lib, .ds-kit { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.ds-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); }
.ds-head-m { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ds-head-a { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ds-title { margin: 0; font-size: var(--fs-h2); font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.ds-switch { display: flex; gap: var(--s-1); margin-bottom: var(--s-2); }
.ds-switch .btn { text-decoration: none; }
.ds-wf > .ds-why { margin-top: calc(var(--s-2) * -1); }

/* ── Workflows builder (ds-wf-): the list, then the palette, the canvas and the inspector ─────────────────────────────── */
/* The canvas is a dark field with steps as flat cards (a hairline, no shadow). A port is a 12 px dot on the card's edge: hollow
   when nothing is joined, filled when it is; while a join is drawn the inputs that take it turn crimson and the rest fade. A
   For each is a dashed box. Wires are one SVG layer (dashed when a list gathers every shot). Geometry lives in
   workflows-graph.js (NODE_W 148, HEAD_H 40, ROW_H 22, FOOT_H 10): these sizes must match it. */
.ds-wf-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (min-width: 1100px) { .ds-wf-home { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.ds-wf-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ds-wf-row { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) 0; border-top: 1px solid var(--line); min-width: 0; }
.ds-wf-row:first-child { border-top: 0; }
.ds-wf-row-m { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: var(--tap); padding: var(--s-2); margin-left: calc(var(--s-2) * -1); color: inherit; text-decoration: none; border-radius: var(--r-button); }
@media (hover: hover) { a.ds-wf-row-m:hover { background: var(--hover); } }
.ds-wf-row-t { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.ds-wf-row-f { color: var(--text-3); font-size: var(--fs-caption); line-height: 1.45; }
.ds-wf-row-run { flex: none; font-size: var(--fs-caption); white-space: nowrap; }
.ds-wf-row > .btn, .ds-wf-row > .icon-btn { flex: none; }
@media (max-width: 767px) {
  .ds-wf-row { flex-wrap: wrap; }
  .ds-wf-row-m { flex-basis: calc(100% - var(--tap) - var(--s-2)); }
  .ds-wf-row-run { order: 3; margin-left: 0; }
}
.ds-wf-skel { display: flex; flex-direction: column; gap: var(--s-2); }
.ds-wf-skel span { display: block; height: 44px; background: var(--skeleton); border-radius: var(--r-button); }

.ds-wf-head .ds-head-m { gap: 2px; flex: 1 1 22rem; }
.ds-wf-backlink { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; min-height: 32px; margin-left: -4px; color: var(--text-2); font-size: var(--fs-cell); font-weight: 600; text-decoration: none; }
@media (hover: hover) { .ds-wf-backlink:hover { color: var(--text); } }
.ds-wf-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-3); min-width: 0; }
.ds-wf-title { width: min(30rem, 100%); min-height: var(--tap); font-size: 20px; font-weight: 800; }
.ds-wf-saved { color: var(--text-3); font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); text-transform: uppercase; white-space: nowrap; }
.ds-wf-saved.is-dirty { color: var(--text); }
.ds-wf-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); }
.ds-wf-note p { flex: 1 1 18rem; margin: 0; color: var(--text-2); font-size: var(--fs-cell); line-height: 1.45; }

.ds-wf-build { --ds-wf-h: clamp(400px, calc(100dvh - 370px), 820px); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: start; }
@media (min-width: 1100px) {
  .ds-wf-build { grid-template-columns: 176px minmax(0, 1fr) 304px; }
  .ds-wf-build.is-ro { grid-template-columns: minmax(0, 1fr) 304px; }
}
@media (max-width: 767px) { .ds-wf-build { --ds-wf-h: max(340px, 56dvh); } }

/* The palette: a column on a desktop; between a phone and a desktop its groups wrap above the canvas; on a phone it is a sheet. */
.ds-wf-pal { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
@media (min-width: 1100px) { .ds-wf-pal { max-height: calc(var(--ds-wf-h) + 52px); overflow-y: auto; padding-right: var(--s-1); } }
.ds-wf-pal-g { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-wf-pal-s { position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-2); background: transparent; color: var(--text-2);
  border: 0; border-radius: var(--r-button); font: inherit; font-size: var(--fs-cell); font-weight: 600; text-align: left; cursor: grab; touch-action: pan-y; }
.ds-wf-pal-s::after { content: ""; position: absolute; inset: -4px 0; }
.ds-wf-pal-s .i { flex: none; color: var(--text-3); }
.ds-wf-pal-s:disabled { cursor: not-allowed; opacity: 0.5; }
@media (hover: hover) { .ds-wf-pal-s:not(:disabled):hover { background: var(--hover); color: var(--text); } }
@media (max-width: 1099px) {
  .ds-wf-pal-g { flex-direction: row; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
  .ds-wf-pal-g > .ds-label { flex-basis: 100%; }
  .ds-wf-pal-s { border: 1px solid var(--line-strong); }
}
.ds-wf-pal--sheet .ds-wf-pal-g { flex-direction: row; flex-wrap: wrap; gap: var(--s-2); }
.ds-wf-pal--sheet .ds-wf-pal-s { min-height: var(--tap); border: 1px solid var(--line-strong); cursor: pointer; }
.ds-wf-pal--phone { display: inline-flex; flex-direction: row; margin-right: var(--s-1); }
.ds-wf-ghost { position: fixed; z-index: 80; transform: translate(-50%, -50%); padding: var(--s-2) var(--s-3); background: var(--raised); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: var(--r-button); box-shadow: var(--shadow); font-size: var(--fs-cell); font-weight: 700; pointer-events: none; white-space: nowrap; }

/* The canvas */
.ds-wf-canvas { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ds-wf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); min-height: 44px; }
.ds-wf-tools .btn .i { margin-left: -2px; }
.ds-wf-tools-sep { width: 1px; height: 20px; margin: 0 var(--s-1); background: var(--line); }
.ds-wf-zoomgrp { display: inline-flex; align-items: center; gap: var(--s-1); }
.ds-wf-zoom { min-width: 3.4em; color: var(--text-2); font-size: var(--fs-caption); font-weight: 700; text-align: center; }
.ds-wf-tip { flex: 1 1 16rem; margin: 0 0 0 var(--s-2); color: var(--text-3); font-size: var(--fs-caption); line-height: 1.4; text-align: right; }
@media (max-width: 767px) {
  .ds-wf-tools { gap: 2px; }
  .ds-wf-tools-sep { display: none; }
  .ds-wf-zoomgrp { margin-left: auto; gap: 2px; }
  .ds-wf-tip { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ds-wf-vp { position: relative; height: var(--ds-wf-h); overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none; }
.ds-wf-vp.is-ro { cursor: grab; }
.ds-wf-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ds-wf-blank { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); padding: var(--s-4); text-align: center; pointer-events: none; }
.ds-wf-blank-t { margin: 0; color: var(--text); font-weight: 700; }

.ds-wf-grp { position: absolute; z-index: 0; border: 1px dashed var(--line-strong); border-radius: var(--r-panel); }
.ds-wf-grp.is-sel { border-style: solid; border-color: var(--text-2); }
.ds-wf-grp-h { position: absolute; left: 14px; top: 0; display: flex; align-items: center; gap: var(--s-2); height: 28px; max-width: calc(100% - 28px); padding: 0 6px; background: transparent;
  border: 0; border-radius: var(--r-button); color: var(--text-2); font: inherit; font-size: var(--fs-cell); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: grab; }
.ds-wf-grp-t { overflow: hidden; text-overflow: ellipsis; }
.ds-wf-grp-o { overflow: hidden; text-overflow: ellipsis; color: var(--text-3); font-weight: 600; letter-spacing: 0; text-transform: none; }
.ds-wf-grp-size { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-right: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); border-radius: 0 0 var(--r-card) 0; cursor: nwse-resize; }

.ds-wf-wires { position: absolute; z-index: 1; left: 0; top: 0; max-width: none; overflow: visible; pointer-events: none; }
.ds-wf-wire { fill: none; stroke: var(--text-3); stroke-width: 1.5; }
.ds-wf-wire.is-list { stroke-dasharray: 6 4; }
.ds-wf-wire.is-over { stroke-dasharray: 2 4; }
.ds-wf-wire.is-sel { stroke: var(--text); stroke-width: 2.5; }
.ds-wf-wire.is-draft { stroke: var(--accent-mark); stroke-dasharray: 4 4; }
.ds-wf-wire-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }

.ds-wf-node { position: absolute; z-index: 2; display: flex; flex-direction: column; width: 148px; background: var(--surface); border-radius: var(--r-button); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ds-wf-node.is-sel { background: var(--raised); box-shadow: inset 0 0 0 2px var(--text); }
.ds-wf-node.has-issue:not(.is-sel) { box-shadow: inset 0 0 0 1px var(--text-3); }
.ds-wf-node--input { height: 72px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.ds-wf-node-h { display: flex; flex-direction: column; justify-content: center; gap: 1px; flex: none; height: 40px; min-width: 0; padding: 0 10px; background: transparent; border: 0;
  border-radius: var(--r-button) var(--r-button) 0 0; color: var(--text); font: inherit; text-align: left; cursor: grab; }
.ds-wf-vp.is-ro .ds-wf-node-h, .ds-wf-vp.is-ro .ds-wf-grp-h { cursor: pointer; }
.ds-wf-node-k { overflow: hidden; color: var(--text-3); font-size: var(--fs-cell); font-weight: 700; letter-spacing: 0.06em; line-height: 1.25; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ds-wf-node-fix { color: var(--danger-text); }
.ds-wf-node-t { overflow: hidden; font-size: var(--fs-cell); font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ds-wf-port { position: relative; display: flex; align-items: center; flex: none; width: 100%; height: 22px; margin: 0; padding: 0 10px; background: transparent; border: 0; border-radius: 0;
  color: var(--text-2); font: inherit; font-size: var(--fs-cell); font-weight: 600; text-align: left; cursor: pointer; }
.ds-wf-port:disabled { cursor: default; color: var(--text-2); }
.ds-wf-port--out { justify-content: flex-end; text-align: right; }
.ds-wf-port--note { color: var(--danger-text); cursor: default; }
.ds-wf-port-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-wf-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: var(--bg); border-radius: var(--r-button); box-shadow: inset 0 0 0 2px var(--text-3); }
.ds-wf-port--in .ds-wf-dot, .ds-wf-port--over .ds-wf-dot { left: -6px; }
.ds-wf-port--out .ds-wf-dot { right: -6px; }
.ds-wf-port--out .ds-wf-dot, .ds-wf-port.is-bound .ds-wf-dot { background: var(--text-3); }
.ds-wf-port.is-need .ds-wf-port-l { color: var(--danger-text); }
.ds-wf-port.is-from .ds-wf-dot { background: var(--accent-mark); box-shadow: inset 0 0 0 2px var(--accent-mark); }
.ds-wf-port--over { position: absolute; left: 0; top: 0; width: 24px; height: 28px; padding: 0; }
@media (hover: hover) {
  .ds-wf-port:not(:disabled):hover { color: var(--text); }
  .ds-wf-port:not(:disabled):hover .ds-wf-dot { box-shadow: inset 0 0 0 2px var(--text); }
}
.ds-wf-vp.is-joining .ds-wf-port.is-ok .ds-wf-dot { background: var(--accent-mark); box-shadow: inset 0 0 0 2px var(--accent-mark); }
.ds-wf-vp.is-joining .ds-wf-port.is-ok { color: var(--text); }
.ds-wf-vp.is-joining .ds-wf-port.is-no { opacity: 0.35; }
/* A press on a step, a port or a box title highlights it instead of scaling it: a step that shrank under the pointer would move its
   dots away from the wires. */
.ds-wf-node-h:active, .ds-wf-port:active, .ds-wf-grp-h:active { transform: none; }
.ds-wf-node-h:active { background: var(--hover); }
.ds-wf-port:active .ds-wf-dot { box-shadow: inset 0 0 0 2px var(--text); }

/* The inspector */
.ds-wf-insp { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
@media (min-width: 1100px) { .ds-wf-insp { max-height: calc(var(--ds-wf-h) + 52px); overflow-y: auto; } }
@media (max-width: 767px) { .ds-wf-insp { padding: var(--s-3); } }
.ds-wf-back { align-self: flex-start; margin-left: calc(var(--s-2) * -1); }
.ds-wf-back .i { margin-left: -4px; }
.ds-wf-insp-b { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.ds-wf-insp-h { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ds-wf-insp-t { margin: 0; color: var(--text); font-size: 18px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.ds-wf-insp-name { font-weight: 700; }
.ds-wf-sec { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.ds-wf-sec .select { width: 100%; }
.ds-wf-sec > .btn, .ds-wf-place > .btn, .ds-wf-rules .btn { align-self: flex-start; max-width: 100%; white-space: normal; text-align: left; padding-top: 6px; padding-bottom: 6px; }
/* ParamForm in a 270 px column: each setting's name over its control. */
.ds-wf-insp .st-form .st-row { flex-wrap: wrap; row-gap: var(--s-2); }
.ds-wf-insp .st-form .st-row > .st-m { flex: 1 1 100%; }
.ds-wf-insp .st-form .st-row > .seg, .ds-wf-insp .st-form .st-row > .st-seg, .ds-wf-insp .st-form .st-row > .st-stepper, .ds-wf-insp .st-form .st-row > .st-picker { margin-left: 0; max-width: 100%; }
.ds-wf-insp .st-form .st-row > .st-picker { flex: 1 1 100%; }
.ds-wf-place { flex-direction: row; flex-wrap: wrap; align-items: center; }
.ds-wf-place .ds-label { flex-basis: 100%; }
.ds-wf-inline { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ds-wf-port-ed { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ds-wf-port-ed + .ds-wf-port-ed { margin-top: var(--s-2); }
.ds-wf-port-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px var(--s-2); }
.ds-wf-port-n { color: var(--text); font-size: var(--fs-cell); font-weight: 700; }
.ds-wf-port-ed.is-need .ds-wf-port-n { color: var(--danger-text); }
.ds-wf-compose { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); min-width: 0; }
.ds-wf-compose.is-words { padding: var(--s-1); background: var(--bg); border: 1px solid var(--line-field); border-radius: var(--r-button); }
.ds-wf-compose.is-words:focus-within { border-color: var(--text-3); }
.ds-wf-compose .ds-wf-words { flex: 1 1 100%; min-height: 44px; padding: 6px; background: transparent; border: 0; resize: vertical; }
.ds-wf-compose .ds-wf-words:focus-visible { outline: none; }
.ds-wf-words-ro { flex: 1 1 100%; margin: 0; padding: 4px 6px; color: var(--text); font-size: var(--fs-cell); overflow-wrap: anywhere; }
.ds-wf-ref { max-width: 100%; min-height: 32px; overflow-wrap: anywhere; }
.ds-wf-insert { align-self: flex-start; max-width: 100%; letter-spacing: 0; text-transform: none; font-size: var(--fs-cell); }
.ds-wf-insert .i { margin-left: -2px; }
.ds-wf-issues { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 1.1em; color: var(--danger-text); font-size: var(--fs-caption); line-height: 1.45; }
.ds-wf-issues .link-btn { color: inherit; text-align: left; }
.ds-wf-warn { display: block; margin: 0; color: var(--danger-text); font-size: var(--fs-caption); line-height: 1.45; }
.ds-wf-rules { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: 0; list-style: none; color: var(--text); font-size: var(--fs-cell); line-height: 1.45; }
.ds-wf-rules li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.ds-wf-rule-k { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: var(--fs-caption); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ds-wf-rule-k::before { content: ""; flex: none; width: 10px; height: 2px; background: var(--accent-mark); }
.ds-wf-kv { display: flex; flex-direction: column; margin: 0; }
.ds-wf-kv > div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--fs-cell); }
.ds-wf-kv > div:first-child { border-top: 0; }
.ds-wf-kv dt { color: var(--text-3); }
.ds-wf-kv dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; }
.ds-wf-members { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-cell); }
.ds-wf-members li { min-height: 28px; }
.ds-wf-remove { color: var(--danger-text); }

/* Test this step and Run for a client (sheets) */
.ds-wf-try, .ds-wf-runsheet { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.ds-wf-try-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); }
.ds-wf-try-pick { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 4px; background: transparent; border: 1px solid var(--line); border-radius: var(--r-button); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ds-wf-try-pick[aria-pressed="true"], .ds-wf-try-pick[aria-checked="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.ds-wf-try-pick .st-thumb, .ds-wf-try-out .st-thumb { aspect-ratio: 1 / 1; }
.ds-wf-try-go { display: flex; flex-direction: column; gap: var(--s-2); }
.ds-wf-foot { margin: 0; color: var(--text-2); font-size: var(--fs-cell); font-weight: 600; }
.ds-wf-try-pick .ds-cap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-wf-try-out { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.ds-wf-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: 0; }
.ds-wf-price b { color: var(--text); font-size: 22px; font-weight: 800; }
.ds-wf-cost { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; font-size: var(--fs-cell); }
.ds-wf-cost li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
.ds-wf-cost li:first-child { border-top: 0; }
.ds-wf-cost b { color: var(--text); font-weight: 700; }
.ds-wf-draft { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-card); }
.ds-wf-draft-t { margin: 0; color: var(--text); font-weight: 700; }
.ds-wf-draft-b { margin: 0; color: var(--text-2); font-size: var(--fs-cell); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ds-list { display: flex; flex-direction: column; }
.ds-list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; min-height: var(--tap); padding: var(--s-2); background: transparent; color: var(--text); border: 0; border-top: 1px solid var(--line); border-radius: 0; font: inherit; text-align: left; cursor: pointer; }
.ds-list-row:first-child { border-top: 0; }
.ds-list-row[aria-pressed="true"] { background: var(--hover); }
@media (hover: hover) { .ds-list-row:hover { background: var(--hover); } }
.ds-list-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-list-t { font-weight: 600; overflow-wrap: anywhere; }
.ds-strip { padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.ds-runs-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (min-width: 1100px) { .ds-runs-cols { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); } }

/* ── Client kit ───────────────────────────────────────────────────────────────────────── */
.ds-kit-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (min-width: 1024px) { .ds-kit-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-wide { grid-column: 1 / -1; }
.ds-kvs { display: flex; flex-direction: column; }
.ds-kv { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-cell); }
.ds-kv:first-child { border-top: 0; }
.ds-kv-k { color: var(--text-3); font-weight: 600; }
.ds-kv-v { min-width: 0; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 767px) { .ds-kv { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); } }
.ds-files { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ds-file { display: flex; flex-direction: column; gap: var(--s-1); width: 96px; }
.ds-els { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-3); }
.ds-el { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ds-el-t { color: var(--text); font-size: var(--fs-cell); font-weight: 600; overflow-wrap: anywhere; }

/* ── Write (ds-wr-), client kit (ds-ck-) and library (ds-lib-) ────────────────────────── */
/* CONCEPTS and the rule kinds are tracked caps with the crimson dash (the kit's eyebrow), never a pill. A status is a word with
   an icon: a check for approved or covered, the alert mark for what stops a request. */
.ds-wr-concept { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--text); font-size: var(--fs-caption); font-weight: 800; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; }
.ds-wr-concept::before { content: ""; flex: none; width: 12px; height: 2px; background: var(--accent); }
.ds-wr-hint { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); margin: 0; color: var(--text-3); font-size: var(--fs-caption); line-height: 1.45; }
.ds-wr-form { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }

/* Context: the facts and approved memory that go in with the brief, each with its own remove button (44 px with its halo). */
.ds-wr-ctx { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.ds-wr-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.ds-wr-chip { display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; min-height: 32px; padding-left: var(--s-2); background: var(--surface-2); color: var(--text-2); border-radius: var(--r-button); font-size: var(--fs-caption); line-height: 1.3; }
.ds-wr-chip-k { flex: none; color: var(--text-3); font-weight: 700; }
.ds-wr-chip-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.ds-wr-chip-x { position: relative; display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; background: transparent; color: var(--text-3); border: 0; border-radius: var(--r-button); cursor: pointer; }
.ds-wr-chip-x::after { content: ""; position: absolute; inset: -6px; }
@media (hover: hover) { .ds-wr-chip-x:hover { background: var(--hover); color: var(--text); } }
.ds-wr-group { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ds-wr-group-l { margin: 0; color: var(--text-3); font-size: var(--fs-caption); font-weight: 600; }
.ds-wr-off { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }

/* Drafts: cards side by side where there is room; a kept card reads as text, not a field. */
.ds-wr-refused { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-card); }
.ds-wr-refused-t { margin: 0; color: var(--text); font-weight: 700; }
.ds-wr-refused-b { margin: 0; color: var(--text-2); line-height: 1.45; }
.ds-wr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-3); align-items: start; }
.ds-wr-card { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-card); }
.ds-wr-card.is-approved { border-color: var(--line-strong); }
.ds-wr-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); }
.ds-wr-kind { color: var(--text-2); font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); text-transform: uppercase; }
.ds-wr-state { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--text); font-size: var(--fs-caption); font-weight: 700; }
.ds-wr-state .i { color: var(--gilt); }
.ds-wr-title { font-weight: 700; }
.ds-wr-body { min-height: 64px; max-height: 24em; line-height: 1.5; field-sizing: content; }
.ds-wr-title[readonly], .ds-wr-body[readonly] { background: transparent; border-color: var(--line); }
.ds-wr-check { display: flex; align-items: flex-start; gap: var(--s-1); margin: 0; color: var(--text); font-size: var(--fs-caption); font-weight: 600; line-height: 1.45; }
.ds-wr-check .i { flex: none; margin-top: 1px; color: var(--accent-mark); }
.ds-wr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ds-wr-acts > .icon-btn { margin-left: auto; }

/* Memory: one item per row; in the client kit's wide panel, two or three columns. */
.ds-wr-mems { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ds-wr-mem { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.ds-wr-mem:first-child { padding-top: var(--s-1); border-top: 0; }
.ds-wr-mem-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); }
.ds-wr-mem-t { margin: 0; color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.ds-wr-mem-b { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text-2); font-size: var(--fs-cell); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.ds-wr-mem > .ds-wr-acts { margin-top: var(--s-1); }
@media (min-width: 1024px) {
  .ds-wide .ds-wr-mems { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: var(--s-5); }
  .ds-wide .ds-wr-mem, .ds-wide .ds-wr-mem:first-child { padding-top: var(--s-3); border-top: 1px solid var(--line); }
}
.ds-wr-wfs { display: flex; flex-direction: column; margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.ds-wr-wf { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.ds-wr-wf:first-child { border-top: 0; }

/* Client kit: the forms in its sheets, the rules, the people and their consent records, the Machines sheet. */
.ds-ck-form { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.ds-ck-form > section { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.ds-ck-note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-card); }
.ds-ck-set { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.ds-ck-set > legend { margin-bottom: var(--s-2); padding: 0; }
.ds-ck-colors, .ds-ck-files { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.ds-ck-color { display: grid; grid-template-columns: auto minmax(0, 1fr) 7.5rem auto; align-items: center; gap: var(--s-2); }
.ds-ck-color .st-swatch i { width: 24px; height: 24px; }
.ds-ck-add, .ds-ck-cancel { align-self: flex-start; }
.ds-ck-file, .ds-ck-ev { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ds-ck-file .st-thumb, .ds-ck-ev .st-thumb { flex: none; width: 72px; }
.ds-ck-up { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ds-ck-up .select { width: auto; }
.ds-ck-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ds-ck-btns > .btn { max-width: 100%; white-space: normal; text-align: left; }
.ds-ck-pair { display: flex; align-items: center; gap: var(--s-2); }
.ds-ck-pair .input { flex: 1 1 auto; min-width: 0; }
.ds-ck-warn { color: var(--danger-text); }
.ds-ck-key { margin-top: var(--s-2); }
.ds-ck-words { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ds-ck-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--s-3); }

.ds-ck-rules { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ds-ck-rule { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: start; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.ds-ck-rule:first-child { padding-top: var(--s-1); border-top: 0; }
.ds-ck-rule-k { display: inline-flex; align-items: center; gap: 6px; padding-top: 3px; color: var(--text); font-size: var(--fs-caption); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.ds-ck-tied { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
.ds-ck-tied-l { color: var(--text-2); font-weight: 700; }
.ds-ck-rule-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-ck-rule-t { margin: 0; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.ds-ck-rule > .icon-btn { margin-top: -4px; }

.ds-ck-els { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.ds-ck-el { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-1); width: 100%; padding: 0; background: transparent; color: inherit; border: 0; border-radius: var(--r-button); font: inherit; text-align: left; cursor: pointer; }
.ds-ck-el-pic .st-thumb, .ds-ck-photos .st-thumb { width: 100%; aspect-ratio: 1 / 1; }
.ds-ck-el-t { color: var(--text); font-size: var(--fs-cell); font-weight: 700; overflow-wrap: anywhere; }
.ds-ck-consent { display: inline-flex; align-items: flex-start; gap: 4px; margin: 0; color: var(--text-2); font-size: var(--fs-caption); font-weight: 600; line-height: 1.35; }
.ds-ck-consent .i { flex: none; color: var(--accent-mark); }
.ds-ck-consent.is-ok .i { color: var(--text-2); }
.ds-ck-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); }
.ds-ck-photos--edit { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin: 0; padding: 0; list-style: none; }
.ds-ck-photo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ds-ck-photo > .ds-tile { align-self: stretch; }
.ds-ck-cover { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 var(--s-2); color: var(--text-2); font-weight: 600; }
.ds-ck-consents { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ds-ck-consents > * { align-self: stretch; }
.ds-ck-consents > .btn { align-self: flex-start; }
.ds-ck-recs { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.ds-ck-rec { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-card); }
.ds-ck-rec.is-live { border-color: var(--line-strong); }
.ds-ck-rec:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ds-ck-rec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.ds-ck-rec-t { color: var(--text); font-weight: 700; }
.ds-ck-rec-s { color: var(--text-2); font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); text-transform: uppercase; }
.ds-ck-rec-n { margin: var(--s-1) 0 0; color: var(--text-2); font-size: var(--fs-cell); overflow-wrap: anywhere; }
.ds-ck-rec > .ds-wr-acts { margin-top: var(--s-2); }
.ds-ck-new { gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-card); }
.ds-ck-new > legend { margin: 0 0 0 calc(var(--s-1) * -1); padding: 0 var(--s-1); }

/* Library: kind, star and words on one row; files grouped by kind. */
.ds-lib-find { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.ds-lib-star { min-height: 32px; }
.ds-lib-group { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); min-width: 0; }
.ds-lib-tools + .ds-lib-group { padding-top: 0; border-top: 0; }
.ds-lib-gh { display: flex; align-items: baseline; gap: var(--s-2); }
.ds-lib-n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.ds-lib .st-thumb.is-wide, .ds-lib .st-thumb.is-tall { aspect-ratio: 1 / 1; }
@media (min-width: 1100px) { .ds-lib .st-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } }

@media (max-width: 767px) {
  .ds-ck-color { grid-template-columns: auto minmax(0, 1fr) 6.5rem auto; }
  .ds-ck-rule { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-2); }
  .ds-ck-rule-k { grid-column: 1 / -1; padding-top: 0; }
  .ds-ck-els { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-lib-find, .ds-lib-find .ds-search { flex: 1 1 100%; width: 100%; }
}

/* Start from a brief (run-sheet.js, brief.js): the chat-style box at the top of Run for a client, and the shot list it fills */
.ds-brief { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); }
.ds-brief .ds-label { margin: 0; }
.ds-brief-box { display: flex; align-items: flex-end; gap: var(--s-2); }
.ds-brief-ta { flex: 1 1 auto; min-width: 0; min-height: 88px; resize: vertical; }
.ds-brief-go { flex: none; min-height: var(--tap); }
.ds-brief p { margin: 0; }
.ds-brief-s { min-height: 1.45em; color: var(--text-2); font-size: var(--fs-caption); line-height: 1.45; }
.ds-brief-s.is-bad { color: var(--danger-text); }
.ds-brief-shots-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.ds-brief-shots-h .ds-label { margin: 0; }
@media (max-width: 767px) {
  .ds-brief-box { flex-direction: column; align-items: stretch; }
  .ds-brief-go { width: 100%; justify-content: center; }
}

/* ── The studio assistant (modules/design/assistant.js) ──────────────────────────────────
   A floating Sacred Eye button and its card over every Design screen. Translucent floating chrome (the kit's --chrome material,
   solid under reduced transparency); it sits under sheets, menus and toasts. Positions come from the screen as transforms. */
.ds-ai { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.ds-ai-btn, .ds-ai-card { position: fixed; left: 0; top: 0; pointer-events: auto; }
.ds-ai-btn {
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-panel);
  background: var(--chrome); -webkit-backdrop-filter: var(--chrome-filter); backdrop-filter: var(--chrome-filter);
  color: var(--text); cursor: grab; touch-action: none;
  transition: transform var(--t-move) var(--spring), border-color var(--t-feedback) var(--ease-out);
}
.ds-ai-btn[aria-expanded="true"] { border-color: var(--text-3); }
.ds-ai.is-dragging .ds-ai-btn { cursor: grabbing; transition: none; }
.ds-ai.is-docked .ds-ai-btn { cursor: pointer; touch-action: manipulation; }
.ds-ai-btn .ds-ai-eye { transition: transform var(--t-press) var(--ease-out); }
.ds-ai-btn:active .ds-ai-eye { transform: scale(0.94); }
@media (hover: hover) { .ds-ai-btn:hover { border-color: var(--text-3); } }
.ds-ai-eye { display: inline-grid; place-items: center; flex: none; }
.ds-ai-eye img { display: block; }

.ds-ai-card {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--r-panel);
  background: var(--chrome); -webkit-backdrop-filter: var(--chrome-filter); backdrop-filter: var(--chrome-filter);
  box-shadow: var(--shadow);
  animation: ds-ai-in var(--t-move) var(--spring);
}
@keyframes ds-ai-in { from { opacity: 0; } to { opacity: 1; } }
.ds-ai-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); border-bottom: 1px solid var(--line); }
.ds-ai-name { flex: 1; min-width: 0; }
.ds-ai-title { margin: 0; font-size: var(--fs-cell); font-weight: 700; line-height: 1.25; color: var(--text); }
.ds-ai-status { margin: 0; font-size: var(--fs-caption); line-height: 1.3; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-ai-ctl { flex: none; }
.ds-ai-last, .ds-ai-list { padding: var(--s-3); min-height: 0; }
.ds-ai-last { overflow-y: auto; max-height: 46vh; }
.ds-ai-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-3); overscroll-behavior: contain; }
.ds-ai-msg { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ds-ai-msg.is-user { align-self: flex-end; max-width: 88%; padding: var(--s-2) var(--s-3); background: var(--surface-2); border-radius: var(--r-card); }
.ds-ai-last .ds-ai-msg.is-user { align-self: stretch; max-width: none; }
.ds-ai-who { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.ds-ai-text { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.ds-ai-msg.is-event .ds-ai-text, .ds-ai-msg.is-note .ds-ai-text, .ds-ai-welcome { color: var(--text-2); }
.ds-ai-acts { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ds-ai-act { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ds-ai-act-b { max-width: 100%; white-space: normal; text-align: left; min-height: var(--tap); line-height: 1.35; padding-block: var(--s-1); }
.ds-ai-price { font-size: var(--fs-caption); line-height: 1.35; color: var(--text-3); }
.ds-ai-price.is-bad { color: var(--text); }
.ds-ai-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.ds-ai-chip { min-height: var(--tap); }
.ds-ai-form { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
.ds-ai-input { flex: 1; min-width: 0; }
.ds-ai-send { flex: none; width: var(--tap); padding: 0; }
.ds-ai-send .i { margin: 0; }
.ds-ai-reopen { gap: var(--s-2); }
.ds-ai.is-docked .ds-ai-card { border-radius: var(--r-panel); }
@media (max-width: 767px) {
  .ds-ai-last { max-height: 38vh; }
  .ds-ai-reopen span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-ai-btn, .ds-ai.is-dragging .ds-ai-btn { transition: border-color var(--t-feedback) var(--ease-out); }
  .ds-ai-card { animation: ds-ai-in var(--t-feedback) linear; }
}
@media (prefers-contrast: more) { .ds-ai-btn, .ds-ai-card { border-color: var(--text-2); } }