/* AdEQ — the Work screens (SPEC-WORK-V2). WORK lane's own stylesheet.
 *
 * Tokens only, no raw px (SPEC-LAYOUT-V1 §5). Loaded after app.css and the
 * other screen sheets, so a rule here is never out-ranked by load order.
 *
 * THE SIX STAGES (D2). The stage colours were written for the old words
 * (in_review, sent) in app.css, screen-bulk.css and screen-tasks.css. These
 * are the same colours under the new words, plus Client Review, which reads
 * as the same sea as Internal Review but stronger: it is still a review, and
 * it is now outside the team. */

/* Board lanes: the dot before the lane name. */
.wb-col.is-s-internal_review .tk-col-head::before { background: var(--c-sea); }
.wb-col.is-s-client_review .tk-col-head::before { background: color-mix(in srgb, var(--c-sea) 70%, var(--ink)); }
.wb-col.is-s-delivered .tk-col-head::before { background: var(--accent); }

/* The stage pill on a board card. */
.wb-stage.is-internal_review { background: color-mix(in srgb, var(--c-sea) 16%, var(--card)); border-color: color-mix(in srgb, var(--c-sea) 40%, var(--rule)); }
.wb-stage.is-client_review { background: color-mix(in srgb, var(--c-sea) 32%, var(--card)); border-color: color-mix(in srgb, var(--c-sea) 60%, var(--rule)); color: var(--ink); }
.wb-stage.is-delivered { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* Bulk Statics: the row, the card, and the stage chip. */
[data-screen="bulk"] .bk-row.is-delivered { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
[data-screen="bulk"] .bk-card.is-delivered { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule-faint)); }
[data-screen="bulk"] .bk-card.is-delivered .bk-n { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
:is([data-screen="bulk"]) .bk-stage.is-internal_review::before { background: var(--c-sea); }
:is([data-screen="bulk"]) .bk-stage.is-client_review::before { background: color-mix(in srgb, var(--c-sea) 70%, var(--ink)); }
:is([data-screen="bulk"]) .bk-stage.is-internal_review { background: color-mix(in srgb, var(--c-sea) 22%, transparent); color: var(--ink); }
:is([data-screen="bulk"]) .bk-stage.is-client_review { background: color-mix(in srgb, var(--c-sea) 36%, transparent); color: var(--ink); }
:is([data-screen="bulk"]) .bk-stage.is-delivered { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
:is([data-screen="bulk"]) .bk-stage.is-delivered::before { background: var(--accent-ink); }

/* The stage on a task's linked work. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-stage.is-delivered { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--rule-faint)); }

/* --- the drag engine (drag.js), on every board -----------------------------
 * A lifted card is raised and outlined in the accent; the gap where it will
 * land is the drop mark. No focus rings: a held card says it is held. */
.dg-ghost, .tk-card.dg-ghost {
  position: fixed; top: 0; left: 0; z-index: var(--z-float); margin: 0;
  pointer-events: none; will-change: transform;
  border-color: var(--accent);
  box-shadow: 0 var(--s-1) var(--s-3) color-mix(in srgb, var(--ink) 22%, transparent);
  opacity: .96;
}
.dg-ghost.is-touch { scale: 1.03; }
.dg-ghost.wk-card, .dg-ghost.tk-card { rotate: -2deg; box-shadow: 0 var(--s-3) var(--s-6) color-mix(in srgb, black 55%, transparent), 0 0 0 var(--s-nudge) var(--accent); }
.is-drop-target { outline: var(--s-nudge) solid var(--accent); outline-offset: calc(var(--s-nudge) * -1); background: color-mix(in srgb, var(--accent) 7%, var(--paper)); }
.dg-gap {
  border: var(--s-px) solid color-mix(in srgb, var(--accent) 55%, var(--rule));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.tk-card.is-lifted { opacity: .35; border-style: solid; box-shadow: none; }
/* Where it will land: a bright line with a dot at each end. */
.dg-line {
  position: relative; height: var(--s-half); margin: calc(var(--s-half) * -1) 0;
  border-radius: var(--r-pill); background: var(--accent);
  box-shadow: 0 0 0 var(--s-half) color-mix(in srgb, var(--accent) 25%, transparent);
}
.dg-line::before, .dg-line::after {
  content: ''; position: absolute; top: 50%; width: var(--s-1h); height: var(--s-1h);
  translate: 0 -50%; border-radius: var(--r-pill); background: var(--accent);
}
.dg-line::before { left: calc(var(--s-half) * -1); }
.dg-line::after { right: calc(var(--s-half) * -1); }
.tk-card.is-held {
  border-color: var(--accent);
  box-shadow: 0 var(--s-half) var(--s-2) color-mix(in srgb, var(--ink) 18%, transparent);
}
body.dg-dragging, body.dg-dragging * { user-select: none; cursor: grabbing; }
/* A movable card does not hand a long press to the phone's text selection. */
[data-drag-id] { -webkit-touch-callout: none; touch-action: manipulation; }

/* The Move menu's divider, and the Move button on a card with no stage. */
.wk-menu-rule { height: var(--s-px); margin: var(--s-half) 0; background: var(--rule); }
.wk-move {
  height: var(--h-xs); padding: 0 var(--s-1); border-radius: var(--r-pill);
  border: var(--s-px) solid var(--rule); background: transparent; color: var(--ink-soft);
  font: var(--t-label); cursor: pointer;
}
.wk-move:hover { color: var(--ink); border-color: var(--ink-soft); }

/* THE SIX STAGE CHIPS on a script, form, or static page. Six chips where
 * there were five, so the row is put on the grid here: 12 either side, 8
 * between, the same 26 tall the bar has always been. */
.script-state { gap: var(--s-1); }
.script-state .states { gap: var(--s-1); }
.script-state .state-chip { padding: 0 var(--s-1h); font-variant-numeric: tabular-nums; }

/* --- the Versions card (work-rail.js) ---------------------------------------- */
.wk-versions { display: grid; gap: var(--s-1h); }
/* ONE ROW A VERSION (2026-11-03): the badge, the name and who and when, the
   tags on the right; hairlines between, the whole row the hover, the one in
   use tinted. The rows run to the card's edges so the hover reads as a row. */
.wk-v-list { display: grid; margin: 0 calc(var(--s-1h) * -1); }
.wk-v-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-1h);
  width: 100%; min-height: var(--s-6); padding: var(--s-1) var(--s-1h);
  background: transparent; border: 0; border-radius: var(--r-md); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background .12s;
}
.wk-v-row + .wk-v-row { box-shadow: 0 calc(var(--s-px) * -1) 0 var(--rule-faint); }
.wk-v-row:hover { background: var(--shade); box-shadow: none; }
.wk-v-row:hover + .wk-v-row { box-shadow: none; }
.wk-v-row.is-current { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: none; }
.wk-v-row.is-current + .wk-v-row { box-shadow: none; }
.wk-v-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wk-v-n {
  display: grid; place-items: center; min-width: var(--h-sm); height: var(--h-sm); padding: 0 var(--s-1);
  border-radius: var(--r-pill); background: var(--shade); color: var(--ink-soft);
  font: 600 12px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.wk-v-row.is-current .wk-v-n { background: var(--accent); color: var(--accent-ink); }
.wk-v-what { display: grid; gap: var(--s-nudge); min-width: 0; }
.wk-v-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.3; }
.wk-v-row.is-current .wk-v-name { font-weight: 600; }
.wk-v-when { color: var(--mute); font-size: 12px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-v-tags { display: grid; justify-items: end; gap: var(--s-half); }
.wk-v-tag {
  display: inline-flex; align-items: center; height: var(--h-xs); padding: 0 var(--s-1);
  border: var(--s-px) solid var(--rule); border-radius: var(--r-pill); color: var(--ink-soft);
  font: 600 11.5px/1 var(--font-body); white-space: nowrap;
}
.wk-v-tag.is-current { border-color: transparent; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); }
.wk-v-more { justify-self: start; margin: var(--s-1) var(--s-1h) 0; }
.wk-v-acts { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.wk-v-acts > .wk-v-save { flex: 1 1 auto; justify-content: center; }
.wk-v-sheet { display: grid; gap: var(--s-2); }
.wk-v-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) / 2), 1fr)); gap: var(--s-1); }
.wk-v-pic { margin: 0; display: grid; gap: var(--s-half); }
.wk-v-pic img { width: 100%; height: auto; border-radius: var(--r-sm); border: var(--s-px) solid var(--rule); background: var(--shade); }
.wk-v-pic figcaption { color: var(--mute); font: var(--t-label); font-weight: 500; }
.wk-v-words { white-space: pre-wrap; margin: 0; font: inherit; color: var(--ink-soft); max-width: 70ch; }
.wk-v-video { width: 100%; max-height: 70vh; border-radius: var(--r-md); background: black; }
.wk-threads { display: grid; gap: var(--s-1); }

/* --- the video page (video-view.js) -----------------------------------------
 * Main and rail side by side from 1024 up, stacked below; the rail sticks
 * under the header like the script and form rails. The page scrolls, never a
 * box inside it. */
.wk-layout { display: grid; gap: var(--gap-section); }
@media (min-width: 1024px) {
  .wk-layout { grid-template-columns: minmax(0, 1fr) calc(var(--w-col) + (var(--gap-section) - var(--gap-rail)) / 2); column-gap: var(--gap-rail); align-items: start; }
  .wk-rail { position: sticky; top: var(--stick-top); }
}
.wk-main { display: grid; gap: var(--s-2); min-width: 0; }
.wk-rail { display: grid; gap: var(--gap-card); min-width: 0; }
.wk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-toolbar); }
.wk-player { display: grid; }
.wk-video { width: 100%; max-height: 75vh; border-radius: var(--r-md); background: black; }
.wk-line { position: relative; height: var(--s-3); border-radius: var(--r-pill); background: var(--shade); }
.wk-dot {
  position: absolute; top: 50%; width: var(--s-2); height: var(--s-2); margin: 0; padding: 0;
  translate: -50% -50%; border-radius: var(--r-pill); cursor: pointer;
  border: var(--s-px) solid var(--card); background: var(--accent);
}
.wk-dot.is-client { background: var(--ink-soft); }
.wk-notes { display: grid; gap: var(--s-2); }
.wk-note { display: flex; align-items: flex-start; gap: var(--s-1); }
.wk-note-txt { display: grid; gap: var(--s-half); min-width: 0; }
.wk-at { height: var(--h-xs); padding: 0 var(--s-1); display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.wk-compose { display: grid; gap: var(--s-1); }
.wk-compose-at { display: flex; align-items: center; gap: var(--s-1); }
.wk-from { display: flex; align-items: center; gap: var(--s-1); }
.wk-sheet { display: grid; gap: var(--gap-field); }
.wk-rail-group { display: grid; gap: var(--gap-card); }

/* THE WORK BOARD ON THE GRID. Its lanes wear the Tasks board's pieces, whose
 * spacing predates the 4px grid; the Videos lane made eight lanes where there
 * were seven, so the board's own spacing is set here once, for every lane. */
[data-screen="client"] .wb-board .wb-col { padding: var(--s-1h) var(--s-1); }
[data-screen="client"] .wb-board .tk-col-head { gap: var(--s-1); }
[data-screen="client"] .wb-board .tk-col-add { padding: 0; }
[data-screen="client"] .wb-board .tk-col-empty { padding: var(--s-2) 0; }
[data-screen="client"] .bar-seg { padding: 0 var(--s-1h); }

/* =====================================================================
 * THE WORK TAB, REDESIGNED (Franz, 2026-10-16, from the approved mockup)
 * ===================================================================== */

/* The summary strip: four tiles, each a filter. */
.wk-sum-box { margin-bottom: var(--s-2); }
.wk-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
/* THE BAR SITS ON THE TILE'S FLOOR. A tile beside one whose line wraps is
   stretched to its height, and stretched rows floated the bars to different
   heights at 390; the line takes the slack and the bar stays at the bottom. */
.wk-tile {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-half); text-align: left; cursor: pointer;
  padding: var(--s-2); border-radius: var(--r-lg); border: var(--s-px) solid var(--rule); background: var(--card); color: var(--ink);
}
.wk-tile:hover { border-color: var(--ink-soft); }
.wk-tile b { font: 800 26px/1 var(--font-poster); }
.wk-tile-name { font: var(--t-section); }
.wk-tile small { color: var(--mute); font-size: 13px; }
.wk-tile.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 var(--s-px) var(--accent); }
.wk-tile-bar { display: block; align-self: end; height: var(--s-half); margin-top: var(--s-1); border-radius: var(--r-pill); background: var(--shade); overflow: hidden; }
.wk-tile-bar i { display: block; height: 100%; background: var(--accent); }
.wk-tile.is-client .wk-tile-bar i { background: var(--c-sea); }
.wk-tile.is-delivered .wk-tile-bar i { background: var(--ink-soft); }
.wk-new { margin-left: 0; }

/* The board: lanes side by side, empty kinds thin. Wider than the page, the
 * board scrolls sideways itself; the page never does. */
.wk-board {
  /* THE TILES' WIDTH (Franz, 2026-10-31: "match the default width of the
   * cards"): a quarter of the page less three gaps, so each lane sits under a
   * tile of the strip above it; never narrower than a card reads at. Wider
   * than the page, the row scrolls sideways inside itself. */
  --wk-lane-w: max(calc((100% - var(--s-2) * 3) / 4), var(--w-col));
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--wk-lane-w); gap: var(--s-2); align-items: start;
  overflow-x: auto; padding-bottom: var(--s-1);
}
.wk-lane {
  display: grid; gap: var(--s-1h); align-content: start; min-width: 0;
  padding: var(--s-1h); border-radius: var(--r-lg);
  border: var(--s-px) solid var(--rule-faint); background: color-mix(in srgb, var(--card) 55%, var(--paper));
}
.wk-lane-head { display: flex; align-items: center; gap: var(--s-1); min-height: var(--h-md); }
.wk-lane-name { margin: 0; font: var(--t-section); }
.wk-lane-n { color: var(--mute); font-weight: 600; }
.wk-lane-acts { margin-left: auto; display: flex; gap: var(--s-half); }
.wk-add, .wk-fold {
  width: var(--h-sm); height: var(--h-sm); padding: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--r-sm); border: var(--s-px) solid var(--rule); background: var(--card); color: var(--ink-soft);
}
.wk-add:hover, .wk-fold:hover { color: var(--ink); border-color: var(--ink-soft); }
.wk-lane.is-shut .wk-fold svg { rotate: -90deg; }
.wk-lane-body { display: grid; gap: var(--s-1h); }
.wk-lane.is-shut .wk-lane-body { display: none; }
.wk-empty { margin: 0; padding: var(--s-2) 0; text-align: center; color: var(--mute); font-size: 13px; }

/* A card that shows the work. */
[data-screen="client"] .wk-card { padding: 0; gap: 0; overflow: hidden; }
.wk-card-body { display: grid; gap: var(--s-1); padding: var(--s-1h); }
.wk-row1 { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.wk-chip {
  height: var(--h-xs); padding: 0 var(--s-1); display: inline-flex; align-items: center; white-space: nowrap;
  border-radius: var(--r-pill); border: var(--s-px) solid var(--rule); background: var(--shade); color: var(--ink-soft); font: 600 12px/1 var(--font-body);
}
.wb-stage.is-read { cursor: default; }
.wk-grip {
  margin-left: auto; flex: none; width: var(--s-3); height: var(--s-3); cursor: grab;
  display: grid; grid-template-columns: repeat(2, calc(var(--s-nudge) * 1.5)); gap: var(--s-nudge) var(--s-nudge); place-content: center;
  border-radius: var(--r-sm); border: var(--s-px) solid var(--rule); background: var(--paper);
}
.wk-grip i { width: calc(var(--s-nudge) * 1.5); height: calc(var(--s-nudge) * 1.5); border-radius: var(--r-pill); background: var(--ink-soft); }
.dg-ghost .wk-grip { background: var(--accent); border-color: var(--accent); }
.dg-ghost .wk-grip i { background: var(--accent-ink); }
.wk-title { margin: 0; font: 600 15px/1.3 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.wk-camp { justify-self: start; color: var(--accent); font-size: 12.5px; font-weight: 600; }

/* What sits on top. */
.wk-hook {
  margin: var(--s-1h) var(--s-1h) 0; padding-left: var(--s-1); border-left: var(--s-nudge) solid var(--rule);
  color: var(--ink-soft); font-size: 13px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wk-form-prev {
  display: grid; gap: var(--s-1); padding: var(--s-1h); border-bottom: var(--s-px) solid var(--rule-faint);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-sea) 28%, var(--card)), var(--card));
}
.wk-form-prev b { font: 700 15px/1.25 var(--font-display); color: var(--ink); }
.wk-lines { display: grid; gap: var(--s-half); }
.wk-lines i { display: block; height: var(--s-1h); border-radius: var(--r-sm); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.wk-lines i:nth-child(2) { width: 80%; }
.wk-lines i:nth-child(3) { width: 60%; }
.wk-shot { display: block; aspect-ratio: 16 / 9; background: var(--shade); overflow: hidden; }
.wk-shot.is-video { aspect-ratio: 9 / 16; max-height: calc(var(--s-12) * 3); background: black; }
.wk-shot-img { width: 100%; height: 100%; object-fit: cover; }
.wk-shot.is-video .wk-shot-img { object-fit: contain; }
[data-screen="client"] .wk-thumbs { margin: 0; border-radius: 0; }
.wk-set { display: flex; align-items: center; gap: var(--s-1); color: var(--mute); font-size: 13px; }
.wk-progress { flex: 1; height: var(--s-half); border-radius: var(--r-pill); background: var(--shade); overflow: hidden; }
.wk-progress i { display: block; height: 100%; background: var(--accent); }

/* A video's cuts, on its script's card. */
.wk-cuts { display: grid; gap: var(--s-1); padding: 0 var(--s-1h) var(--s-1h); }
.wk-cut {
  display: flex; align-items: center; gap: var(--s-1); padding: var(--s-half); width: 100%; text-align: left; cursor: pointer;
  border-radius: var(--r-sm); border: var(--s-px) solid var(--rule); background: var(--paper); color: var(--ink);
}
.wk-cut:hover { border-color: var(--ink-soft); }
.wk-cut-poster { flex: none; width: var(--s-4); height: calc(var(--s-4) * 16 / 9); border-radius: var(--r-sm); background: black; overflow: hidden; }
.wk-cut-poster img { width: 100%; height: 100%; object-fit: cover; }
.wk-cut-what { display: grid; gap: var(--s-nudge); min-width: 0; flex: 1; font-size: 13px; }
.wk-cut-what b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-cut-what span { color: var(--mute); font-size: 12px; }
.wk-cut.is-empty { justify-content: space-between; padding: var(--s-1); border-style: solid; color: var(--mute); font-size: 13px; cursor: default; }
.wk-cut.is-empty .btn-sm { margin-left: 0; }

/* The foot: who has it, which version, the notes, and the date that matters. */
.wk-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-half) var(--s-1h);
  padding: var(--s-1) var(--s-1h); border-top: var(--s-px) solid var(--rule-faint); color: var(--mute); font-size: 12.5px;
}
.wk-who { display: inline-flex; align-items: center; gap: var(--s-half); color: var(--ink-soft); font-weight: 600; }
.wk-avatar {
  width: calc(var(--s-2) + var(--s-nudge)); height: calc(var(--s-2) + var(--s-nudge)); border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--c-plum); color: white; font: 700 10px/1 var(--font-display);
}
.wk-ver { color: var(--ink-soft); font-weight: 700; }
.wk-notes-n { color: var(--ink); font-weight: 600; }
.wk-foot-start, .wk-foot-end { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-half) var(--s-1h); }
.wk-date.is-due { color: var(--ink); font-weight: 600; }
.wk-date.is-late { color: var(--alarm); font-weight: 600; }

/* Tablet: lanes keep their width and the board scrolls sideways. */
@media (max-width: 1023px) {
  .wk-sum { gap: var(--s-1); }
}
/* Phone: the strip is two by two and the lanes stack. */
@media (max-width: 639px) {
  .wk-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-tile { padding: var(--s-1h); }
  .wk-tile b { font-size: 20px; }
  .wk-board { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow-x: visible; mask-image: none; }
}

/* The versions card in the bulk static panel, on the grid. */
.wk-rail-group details.rail-card { padding-top: var(--s-2); }

/* ── Work cards, name first; lanes grouped by task (2026-10-19) ──
   Franz: "group according to the task", "title or names on top and then
   onwards and very easy no extra help texts", "rolling text animation if
   required". */
.wk-card-head { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1h) var(--s-1h) var(--s-1); min-width: 0; }
.wk-card-head .wk-title { flex: 1; min-width: 0; }
.wk-card-head .wk-grip { margin-left: 0; }
.wk-card-head .wk-title { font: 700 15px/1.3 var(--font-display); }
.wk-card-head + .wk-hook { margin-top: 0; }
.wk-card-head + .wk-form-prev, .wk-card-head + .wb-thumbs, .wk-card-head + .wk-shot { border-top: var(--s-px) solid var(--rule-faint); }
.wk-form-prev { background: none; padding: 0 var(--s-1h) var(--s-1); border: 0; }
.wk-card-head + .wk-form-prev { border-top: 0; }
.wk-form-prev b { font: 500 13px/1.45 var(--font-body); color: var(--ink-soft); }
.wk-card-head ~ .wk-card-body { padding-top: var(--s-1); }
.wk-upload { margin-left: 0; }

/* ── Each lane organised: its own search and stage filter, and its cards in
   folding groups by task, the fold on the right (2026-10-19). Franz: "we dont
   even need dragging ... we need organization and a filter and search bar for
   each". */
.wk-lane { gap: var(--s-1); }
.wk-lane-tools { display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
.wk-search {
  flex: 1; min-width: 0; height: var(--h-md); display: flex; align-items: center; gap: var(--s-1);
  padding: 0 var(--s-1h); border-radius: var(--r-pill); border: var(--s-px) solid var(--rule);
  background: var(--paper); color: var(--mute); cursor: text; transition: border-color .15s;
}
.wk-search:focus-within { border-color: var(--accent); color: var(--ink-soft); }
.wk-search svg { flex: none; }
.wk-search-in {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none;
  color: var(--ink); font: 500 13px/1 var(--font-body);
}
.wk-search-in::placeholder { color: var(--mute); font-style: normal; }
.wk-lane .wk-filter.is-placeholder .menu-btn-t { font-style: normal; }
.wk-search-in::-webkit-search-cancel-button { cursor: pointer; }
.wk-lane .wk-lane-tools .wk-filter.wk-filter { flex: none; width: auto; max-width: 140px; height: var(--h-md); min-height: 0; padding: 0 var(--s-1) 0 var(--s-1h); border-radius: var(--r-pill); font-size: 12.5px; }
.wk-lane-tools .wk-filter .menu-btn-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.wk-lane-body { gap: var(--s-1h); margin-top: var(--s-half); }
.wk-group { display: grid; gap: var(--s-1); min-width: 0; }
.wk-group + .wk-group { margin-top: var(--s-half); }
.wk-group-head {
  display: flex; align-items: center; gap: var(--s-1); width: 100%; min-width: 0; min-height: var(--h-sm);
  padding: 0 var(--s-half) 0 var(--s-half); border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--ink); font: 700 13.5px/1.3 var(--font-display);
}
.wk-group-name { min-width: 0; }
.wk-group-n {
  flex: none; min-width: var(--s-3); height: var(--s-2h, 20px); padding: 0 var(--s-1); display: inline-grid; place-items: center;
  border-radius: var(--r-pill); background: var(--shade); color: var(--ink-soft); font: 700 11.5px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.wk-group-chev { flex: none; width: var(--h-sm); height: var(--h-sm); display: grid; place-items: center; color: var(--mute); border-radius: var(--r-sm); }
.wk-group-head:hover .wk-group-chev { color: var(--ink); background: var(--shade); }
.wk-group-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.wk-group.is-shut .wk-group-chev svg { rotate: -90deg; }
.wk-group-chev svg { transition: rotate .15s ease; }
.wk-group-cards { display: grid; gap: var(--s-1h); }
.wk-group.is-shut .wk-group-cards { display: none; }
.wk-group.is-shut + .wk-group { margin-top: 0; }
.wk-lane-n { font-variant-numeric: tabular-nums; }

/* A set's statics on its card: rows always their full 4:5 height (a squeezed
   row overlapped the next), six at most, the sixth saying how many more. */
.wk-card .wk-thumbs { grid-auto-rows: max-content; align-content: start; max-height: none; overflow: visible; }
.wk-card .wk-thumbs .wb-thumb { min-height: 0; }
.wk-card .wk-thumbs.is-capped .wb-thumb:nth-child(n+7) { display: none; }
.wk-thumb-more {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: color-mix(in srgb, black 58%, transparent); color: white; font: 700 18px/1 var(--font-display);
}

/* ── Columns you can widen, and a video's cuts in one row (2026-10-19) ──
   Franz: "make each column width increasable ... very smooth", "just one row
   entry with the thumbnail in the aspect ratios". */
@media (min-width: 640px) {
  .wk-board { grid-template-columns: var(--wk-cols, none); }
  .wk-lane { position: relative; }
  .wk-lane-grip {
    /* DEAD CENTRE OF THE GAP: the lane's 1px border, then half the 16px gap. */
    position: absolute; top: 0; bottom: 0; right: calc((var(--s-2) + var(--s-px)) * -1);
    width: var(--s-2); cursor: col-resize; touch-action: none; z-index: 2;
  }
  /* A small handle at the middle, so the edge reads as something to take hold of. */
  .wk-lane-grip::before {
    content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1;
    width: var(--s-1); height: var(--s-4); border-radius: var(--r-pill);
    background: var(--card); border: var(--s-px) solid var(--rule); opacity: 0; transition: opacity .15s ease, border-color .15s ease;
  }
  .wk-lane-grip:hover::before, .wk-lane-grip:focus-visible::before, .wk-board.is-sizing .wk-lane-grip:active::before { opacity: 1; border-color: var(--accent); }
  .wk-lane-grip::after {
    content: ''; position: absolute; top: var(--s-2); bottom: var(--s-2); left: 50%; width: var(--s-px); translate: -50% 0;
    border-radius: var(--r-pill); background: var(--accent); opacity: 0; transition: opacity .15s ease;
  }
  .wk-lane-grip:hover::after, .wk-lane-grip:focus-visible::after, .wk-board.is-sizing .wk-lane-grip:active::after { opacity: .85; }
  .wk-lane-grip:focus-visible { outline: none; }
  .wk-board.is-sizing { cursor: col-resize; user-select: none; }
  .wk-board.is-sizing .wk-lane { transition: none; }
}
@media (max-width: 639px) { .wk-lane-grip { display: none; } }

/* EVERY VIDEO THE SAME HEIGHT (Franz, 2026-11-03: "every video entry must be
   the same size"): one cut or four, each tile is one fixed height, set so the
   usual three (9:16, 4:5, 1:1) fill the card's width; a single cut sits at
   that height on the left instead of filling the card, and a 16:9 beside the
   three wraps under them at the same height. */
.wk-cutstrip-wrap { container-type: inline-size; }
.wk-cutstrip {
  --cut-h: min(calc((100cqw - var(--s-1h) * 2 - var(--s-1) * 2) / 3), 150px);
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-1); padding: 0 var(--s-1h) var(--s-1h); min-width: 0;
}
.wk-cutstrip-t {
  position: relative; flex: none; height: var(--cut-h); aspect-ratio: var(--ar); padding: 0; cursor: pointer;
  border: var(--s-px) solid var(--rule); border-radius: var(--r-sm); background: black; overflow: hidden;
}
.wk-cutstrip-t:hover { border-color: var(--accent); }
.wk-cutstrip-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-cutstrip-z {
  position: absolute; left: var(--s-half); bottom: var(--s-half); padding: var(--s-nudge) var(--s-half); border-radius: var(--r-sm);
  background: color-mix(in srgb, black 62%, transparent); color: white; font: 700 10.5px/1 var(--font-body); font-variant-numeric: tabular-nums;
}

/* One video, every size: the switch in the head, the player in the cut's shape. */
.vv-sizes { margin-left: auto; display: inline-flex; border: var(--s-px) solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: var(--shade); }
.vv-sizes:empty { display: none; }
.vv-size { height: var(--h-md); padding: 0 var(--s-1h); border: 0; background: none; cursor: pointer; color: var(--ink-soft); font: 600 12.5px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.vv-size + .vv-size { border-left: var(--s-px) solid var(--rule); }
.vv-size:hover { color: var(--ink); }
.vv-size.is-on { background: var(--accent); color: var(--accent-ink); }
.wk-player.is-shaped { justify-items: center; }
.wk-player.is-shaped .wk-video {
  width: min(100%, calc(72vh * var(--arn))); max-height: none; aspect-ratio: var(--ar); object-fit: contain;
}
/* No cut yet: the dashed empty tile (as a set's "No 4:5 yet"), in the cut's shape, never taller than half the screen. */
.wk-player.is-shaped .wk-empty-cut {
  width: min(100%, calc(50vh * var(--arn))); aspect-ratio: var(--ar);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-half);
  padding: var(--s-2); text-align: center;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--shade) 50%, transparent); color: var(--ink-soft);
}
.wk-empty-h { font: 600 13px/1.3 var(--font-body); color: var(--ink); }
.wk-empty-s { font-size: 12px; color: var(--mute); }

/* A name renamed where it is read: the field takes the name's own place, size, and weight. */
.wk-rename {
  width: 100%; min-width: 0; height: auto; margin: calc(var(--s-nudge) * -1) 0; padding: var(--s-nudge) var(--s-half);
  border: var(--s-px) solid var(--accent); border-radius: var(--r-sm); background: var(--paper); color: var(--ink);
  font: inherit; letter-spacing: inherit; outline: none;
}
.is-renaming { overflow: visible; }
.wk-title.is-renaming .roll-track, .wk-group-name.is-renaming .roll-track { animation: none; }
.wk-rename-btn { flex: none; width: var(--h-sm); height: var(--h-sm); opacity: 0; transition: opacity .15s ease; }
.wk-card:hover .wk-rename-btn, .wk-card:focus-within .wk-rename-btn, .wk-rename-btn:focus-visible { opacity: 1; }
@media (hover: none) { .wk-rename-btn { opacity: 1; } }
.wk-group-head .wk-group-name { flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; }
/* THE CAMPAIGN, THEN ITS LINES UNDER IT (2026-11-03), both whole lines that
   end in an ellipsis, never a rolling marquee or a hover tip. */
.wk-group-t { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--s-nudge); padding: var(--s-half) 0; }
.wk-group-lines { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); font: 500 12px/1.3 var(--font-body); }
.wk-card-head { position: relative; }
.wk-card-head .wk-rename-btn { position: absolute; right: var(--s-1); top: 50%; translate: 0 -50%; background: var(--card); box-shadow: 0 0 0 var(--s-1) var(--card); }

/* THE WORK TAB BY CREATION (SPEC-SCALE-V1 B, web/work-groups.js). One light
   row per request or loose piece: a small cover, the title, what it holds and
   where it stands, when it was last touched; a request opens to its pieces. */
.wg-bar { display: flex; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-2); flex-wrap: wrap; }
.wg-list { display: flex; flex-direction: column; border-top: var(--s-px) solid var(--rule-faint); }
.wg-row { border-bottom: var(--s-px) solid var(--rule-faint); }
.wg-list .wg-head { display: grid; grid-template-columns: var(--s-8) minmax(0, 1fr) auto var(--s-2); align-items: center; gap: var(--s-2);
  width: 100%; padding: var(--s-1h) var(--s-1); background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink); border-radius: var(--r-md); }
.wg-list .wg-head:hover { background: var(--shade); }
.wg-cover { width: var(--s-8); height: var(--s-8); border-radius: var(--r-sm); overflow: hidden; background: var(--shade); display: grid; place-items: center; flex: none; }
.wg-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wg-cover-none { color: var(--mute); display: inline-flex; }
.wg-main { display: flex; flex-direction: column; gap: var(--s-half); min-width: 0; }
.wg-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-half) var(--s-1); font-size: 13px; color: var(--mute); }
.wg-kind { color: var(--ink-soft); font-weight: 600; }
.wg-stage { padding: var(--s-nudge) var(--s-1); border-radius: var(--r-pill); border: var(--s-px) solid var(--rule); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.wg-stage.is-approved, .wg-stage.is-delivered { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--rule)); }
.wg-stage.is-client_review { color: var(--ink); border-color: color-mix(in srgb, var(--c-sea) 60%, var(--rule)); background: color-mix(in srgb, var(--c-sea) 20%, transparent); }
.wg-stage.is-changes_requested { color: var(--ink); border-color: color-mix(in srgb, var(--c-clay) 60%, var(--rule)); }
.wg-when { font-size: 13px; color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* SCOPED TO THE LIST (2026-10-26). The Cards view's group heads (work-board.js)
   share .wg-head and .wg-chev: unscoped, its border-drawn chevron landed on
   these rows as an odd arrow, and this grid landed on its heads. The chevron
   column is a fixed width, so a row without one keeps its time in line. */
.wg-list .wg-chev { width: auto; height: auto; margin: 0; border: 0; transform: none;
  color: var(--mute); transition: transform .15s; align-self: start; padding-top: var(--s-half); display: inline-flex; justify-content: flex-end; }
.wg-list .wg-row.is-open .wg-chev { transform: rotate(180deg); }
.wg-list .wg-head:hover .wg-chev { color: var(--ink); }
.wg-pieces { display: flex; flex-direction: column; gap: var(--s-half); padding: 0 var(--s-1) var(--s-2) calc(var(--s-8) + var(--s-3)); }
.wg-piece { display: grid; grid-template-columns: var(--s-6) minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-1h);
  padding: var(--s-half) var(--s-1); background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink); border-radius: var(--r-sm); }
.wg-piece:hover { background: var(--shade); }
.wg-piece .wg-cover { width: var(--s-6); height: var(--s-6); }
.wg-piece-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-piece-k { font-size: 13px; color: var(--mute); }
.wg-open { justify-self: start; margin-top: var(--s-half); }
.wg-end { padding: var(--s-3) 0; color: var(--mute); text-align: center; min-height: var(--s-4); }
@media (max-width: 639px) {
  .wg-list .wg-head { grid-template-columns: var(--s-6) minmax(0, 1fr) var(--s-2); }
  .wg-list .wg-head .wg-cover { width: var(--s-6); height: var(--s-6); }
  .wg-when { display: none; }
  .wg-pieces { padding-left: var(--s-1); }
  .wg-piece { grid-template-columns: var(--s-6) minmax(0, 1fr) auto; }
  .wg-piece-k { display: none; }
}

/* REBUILD THUMBNAILS (SPEC-SCALE-V1 C, web/smalls.js): the owner's sheet. */
.sm-sheet { display: flex; flex-direction: column; gap: var(--s-2); }
.sm-bar { display: block; height: var(--s-1); border-radius: var(--r-pill); background: var(--shade); overflow: hidden; }
.sm-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.sm-go { display: flex; gap: var(--s-1); }

/* --- a landing page, opened (landing-view.js, migration 88) -------------------
   The page in a frame at its own size: a phone at 390, or a desktop laid out
   at 1440 and scaled to the column, so it reads as it will on a laptop. */
.lp-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap-toolbar); }
.lp-controls .l-field { display: grid; gap: var(--gap-label); }
.lp-pick { width: auto; }
.lp-url-field { flex: 1 1 var(--w-col); min-width: 0; }
.lp-preview { display: grid; gap: var(--s-1h); }
.lp-preview-bar { display: flex; justify-content: flex-end; }
.lp-stage { display: grid; justify-items: center; min-width: 0; }
.lp-device-box {
  width: calc(var(--lp-w) * var(--lp-scale, 1)); height: calc(var(--lp-h) * var(--lp-scale, 1));
  overflow: hidden; border: var(--s-px) solid var(--rule); border-radius: var(--r-lg); background: var(--card);
}
.lp-device-box.is-phone { border-radius: var(--r-lg); box-shadow: 0 0 0 var(--s-1) var(--shade); }
.lp-frame {
  display: block; border: 0;
  width: var(--lp-w); height: var(--lp-h);
  transform: scale(var(--lp-scale, 1)); transform-origin: top left;
}
/* ITS RATING AT THE ROW'S END (web/stars.js, 2026-11-02): beside the row's
   button, never inside it; the pieces under an open request run full width. */
.wg-list .wg-row:has(> .stars) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-1h); }
.wg-list .wg-row > .stars { padding-right: var(--s-1); }
.wg-list .wg-row > .wg-pieces { grid-column: 1 / -1; }
.wg-piece-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-1h); }

/* CREATE'S LANDING PAGE TAB (web/landing-create.js, 2026-11-02): the choices on
   the left, the page itself live on the right, side by side on a wide screen. */
.lc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); align-items: start; }
@media (max-width: 1023px) { .lc { grid-template-columns: minmax(0, 1fr); } }
.lc-pick { display: grid; gap: var(--s-2); min-width: 0; }
.lc-look { position: sticky; top: calc(var(--header-h) + var(--s-2)); min-width: 0; }
.lc-row { display: grid; gap: var(--s-1); }
.lc-k { font-weight: 600; }
.lc-v { display: grid; gap: var(--s-half); min-width: 0; }
.lc-why { margin: 0; }
.lc-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.lc-sug { margin-left: var(--s-1); font-size: 11.5px; font-weight: 600; color: var(--accent); }
.chip[aria-pressed="true"] .lc-sug { color: inherit; opacity: .85; }
.lc-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-1h); }
.lc-tpl {
  display: grid; gap: var(--s-half); padding: var(--s-1); text-align: left; cursor: pointer;
  border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-md); background: var(--card); color: var(--ink);
}
.lc-tpl:hover { border-color: var(--rule); }
.lc-tpl.is-on { border-color: var(--accent); box-shadow: 0 0 0 var(--s-px) var(--accent); }
.lc-tpl-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: var(--r-sm); background: var(--shade); }
.lc-tpl b { display: flex; flex-wrap: wrap; align-items: baseline; font-size: 13.5px; }
.lc-tpl span:not(.lc-sug) { font-size: 12.5px; color: var(--mute); }
.lc-name { width: 100%; }
.lc-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1h); }

/* A PIECE'S BRIEF, on its card (2026-11-03). */
.wb-brief {
  display: flex; align-items: baseline; gap: var(--s-half); min-width: 0; margin: 0 var(--s-1h) var(--s-1);
  padding: var(--s-half) var(--s-1); border: 0; border-radius: var(--r-sm); background: var(--shade);
  color: var(--ink-soft); font: 500 12.5px/1.3 var(--font-body); text-align: left; cursor: pointer;
}
.wb-brief:hover { color: var(--ink); }
.wb-brief-k { flex: none; font-weight: 600; color: var(--ink); }
.wb-brief-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* THE WHOLE HEADING ANSWERS THE POINTER (Franz, 2026-11-03: "for the umpteenth
   time i want the whole thing highlighted on hover"), and its words are never
   selected by a quick double click. */
.wk-group-head { border-radius: var(--r-md); padding: var(--s-half) var(--s-1); margin: 0 calc(var(--s-half) * -1); width: calc(100% + var(--s-1)); user-select: none; transition: background .12s; }
.wk-group-head:hover { background: var(--shade); }
.wk-group-head:hover .wk-group-chev { background: none; }
/* ONE CAMPAIGN, ONE FRAME (Franz, 2026-11-03: "they are connected but look
   fully disjointed"): the campaign's heading tops a quiet panel, and its lines
   sit inside it as lighter headings on a thread down the left, each folding
   on its own, so the eye reads campaign, then line, then the work. */
.wk-group {
  padding: var(--s-1); border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--shade) 35%, transparent);
}
.wk-group + .wk-group { margin-top: var(--s-1h); }
.wk-group .wk-group-head { margin: 0; width: 100%; }
.wk-sub { display: grid; gap: var(--s-1); min-width: 0; padding-left: var(--s-1h); border-left: var(--s-px) solid var(--rule); margin-left: var(--s-1); }
.wk-sub + .wk-sub { margin-top: var(--s-1h); }
.wk-sub-head {
  display: flex; align-items: center; gap: var(--s-1); min-height: var(--h-sm); padding: var(--s-half) var(--s-1);
  margin-left: calc(var(--s-1) * -1); border-radius: var(--r-md); background: none;
  color: var(--ink-soft); font: 600 13px/1.3 var(--font-body); cursor: pointer; user-select: none; transition: background .12s, color .12s;
}
.wk-sub-head:hover { background: var(--shade); color: var(--ink); }
.wk-sub-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wk-sub-t { flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; }
.wk-sub-cards { display: grid; gap: var(--s-1h); }
.wk-sub.is-shut .wk-sub-cards { display: none; }
.wk-sub.is-shut .wk-group-chev svg { rotate: -90deg; }

/* EVERY STAGE IN ONE SLIM ROW (2026-11-03): a thin bar split by stage, then
   each stage with its count; the colours are the stage pills' own. */
.wk-sum.wk-stages { display: grid; gap: var(--s-1); grid-template-columns: none; }
.wk-stagebar { display: flex; height: var(--s-1); border-radius: var(--r-pill); overflow: hidden; background: var(--shade); }
.wk-stagebar > i { display: block; min-width: var(--s-1); }
.wk-stagechips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.wk-stagechip {
  display: inline-flex; align-items: center; gap: var(--s-1); height: var(--h-md); padding: 0 var(--s-1h);
  border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-pill); background: var(--card);
  color: var(--ink-soft); font: 500 13px/1 var(--font-body); cursor: pointer;
}
.wk-stagechip b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.wk-stagechip.is-zero { opacity: .55; }
.wk-stagechip:hover { border-color: var(--ink-soft); }
.wk-stagechip.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 var(--s-px) var(--accent); color: var(--ink); }
.wk-stagechip-dot { width: var(--s-1); height: var(--s-1); border-radius: var(--r-pill); background: var(--mute); }
:is(.wk-stagechip, .wk-stagebar > i).is-draft .wk-stagechip-dot, .wk-stagebar > i.is-draft { background: var(--mute); }
.wk-stagechip.is-internal_review .wk-stagechip-dot, .wk-stagebar > i.is-internal_review { background: color-mix(in srgb, var(--c-sea) 55%, var(--card)); }
.wk-stagechip.is-client_review .wk-stagechip-dot, .wk-stagebar > i.is-client_review { background: var(--c-sea); }
.wk-stagechip.is-changes_requested .wk-stagechip-dot, .wk-stagebar > i.is-changes_requested { background: var(--alarm); }
.wk-stagechip.is-approved .wk-stagechip-dot, .wk-stagebar > i.is-approved { background: color-mix(in srgb, var(--accent) 55%, var(--card)); }
.wk-stagechip.is-delivered .wk-stagechip-dot, .wk-stagebar > i.is-delivered { background: var(--accent); }
.wb-brief.is-none { color: var(--accent); background: none; border: var(--s-px) solid var(--rule-faint); }
.wb-brief.is-none .wb-brief-k { color: var(--mute); }

/* ── THE WORK TAB, ONE PINNED BLOCK (Franz, 2026-11-03: "status seems to be
   down and tool bar up ... the sticky scroll needs to be smart") ──────────────
   The bar pins under the client's head as it always has; the stage row pins
   right under the bar; the list's column heads pin under both, and on the
   board each campaign's heading pins under both while its cards go by. The
   heights are measured (client.js holdStation: --wk-bar-h, --wk-sum-h). At
   rest the spacing is what it was: the stage row 20px under the controls and
   the work 20px under the stages. */
main .client-body .bar-toolbar .wk-sum-box {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky);
  background: var(--paper);
  margin: calc(var(--s-2) * -1) 0 0; padding: var(--pad-page-end) 0 0;
  border-bottom: 0;
}
/* The stages first, the toolbar pinned under them (client.js holdStation). */
/* The hairline goes under the whole block, never between its two rows. */
main .client-body .bar-toolbar .dt-toolbar.wk-pinned.is-stuck { border-bottom-color: var(--rule-faint); }

/* THE LIST SCROLLS WITH THE PAGE on a screen wide enough for its columns (1024 up), so
   its heads pin under the block instead of riding away inside their own box
   (the list "broken on scroll", 2026-11-03). Narrower, it keeps its own box. */
@media (min-width: 1024px) {
  main .client-body .dt.wk-table > .dt-scroll { max-height: none; overflow: clip; }
  main .client-body .dt.wk-table .dt-head { top: calc(var(--header-h) + var(--wk-bar-h, 0px) + var(--wk-sum-h, 0px)); z-index: 4; }
}

/* THE PAGE FOOTER (client.js paintPager): where this page sits, Rows, and the
   pages. AdEQ's controls at the bar's own height and gaps; the page you are on
   in the accent. */
.wk-pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-1h);
  margin-top: var(--s-1h); min-height: var(--h-md); color: var(--ink-soft); font-size: 13px;
}
.wk-pager-say { font-variant-numeric: tabular-nums; }
.wk-pager-k { color: var(--mute); }
.wk-pager-rows .seg { min-width: var(--s-6); justify-content: center; font-variant-numeric: tabular-nums; }
.wk-pages { display: inline-flex; align-items: center; gap: var(--s-half); }
.wk-page {
  display: inline-grid; place-items: center; min-width: var(--h-md); height: var(--h-md); padding: 0 var(--s-1);
  border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-pill); background: var(--card);
  color: var(--ink-soft); font: 600 13px/1 var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer;
}
.wk-page:hover:not(:disabled):not(.is-on) { border-color: var(--ink-soft); color: var(--ink); }
.wk-page.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); cursor: default; }
.wk-page:disabled { opacity: .4; cursor: default; }
.wk-page.is-prev svg { rotate: 90deg; }
.wk-page.is-next svg { rotate: -90deg; }
.wk-page-gap { min-width: var(--s-2); text-align: center; color: var(--mute); }

/* ── THE BOARD'S GROUPS, NO THREADS (Franz, 2026-11-03: "dont like this reddit
   style threads cause it reduces space") ─────────────────────────────────────
   A campaign is its framed card; its heading pins under the block while its
   cards scroll by, and the next campaign's pushes it out. A line of business
   is a full-width tinted band inside it, its cards straight under it at the
   card's full width: no rule down the left, no indent. */
.wk-group .wk-group-head {
  position: sticky; top: calc(var(--header-h) + var(--wk-bar-h, 0px) + var(--wk-sum-h, 0px)); z-index: 3;
  background: color-mix(in srgb, var(--shade) 35%, var(--paper));
}
.wk-group .wk-group-head:hover { background: var(--shade); }
.wk-sub { padding-left: 0; border-left: 0; margin-left: 0; gap: var(--s-1); }
.wk-sub + .wk-sub { margin-top: var(--s-1); }
.wk-sub-head {
  margin-left: 0; padding: var(--s-half) var(--s-half) var(--s-half) var(--s-1h);
  background: var(--shade); color: var(--ink);
}
.wk-sub-head:hover { background: color-mix(in srgb, var(--ink) 8%, var(--shade)); }

/* ── THE BOARD SCROLLS, THE PAGE DOESN'T (Franz, 2026-11-04: "horizontal scroll
   is broken and not smart ... the board scrolls, the page doesn't") ──────────
   The board is the one sideways scroller, always, and never wider than the
   page. Each column is as tall as the window under the pinned bars and scrolls
   its own cards, so every column's head stays in sight and a campaign's
   heading pins inside its column. No pager on the board: it holds up to 400
   pieces (client.js BOARD_MAX). A phone keeps the stacked columns. */
@media (min-width: 640px) {
  .wk-board { max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; }
  .wk-lane {
    display: flex; flex-direction: column;
    max-height: calc(100dvh - var(--wk-board-top, calc(var(--header-h) + var(--wk-bar-h, 0px) + var(--wk-sum-h, 0px) + var(--s-5))) - var(--pad-page-end));
  }
  .wk-lane > .wk-lane-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
  .wk-lane-body .wk-group .wk-group-head { top: 0; }
}

/* ── THE LIST'S CARD (Franz, 2026-11-04: "the bottom row should be attached to
   the columns"): the table and its pager are one card, the pager its foot.
   Columns wider than the page make the table its own box (client.js adds
   .is-wide): a sideways scrollbar, the heads pinned inside it, the last
   column reachable. */
main .client-body .dt.wk-table > .dt-scroll { border-bottom-width: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
main .client-body .dt.wk-table > .wk-pager {
  margin-top: 0; padding: var(--s-1) var(--s-2);
  border: var(--s-px) solid var(--rule); border-top-color: var(--rule-faint);
  border-radius: 0 0 var(--r-md) var(--r-md); background: var(--card);
}
@media (min-width: 1024px) {
  main .client-body .dt.wk-table.is-wide > .dt-scroll {
    overflow: auto; scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
    max-height: calc(100dvh - var(--header-h) - var(--wk-bar-h, 0px) - var(--wk-sum-h, 0px) - var(--h-md) - var(--s-2) - var(--s-px) - var(--s-px) - var(--pad-page-end));
  }
  main .client-body .dt.wk-table.is-wide .dt-head { top: 0; }
}

/* THE WORKSPACE'S SETTINGS BOARD (workspace.js, 2026-11-04): a card whose
   head is drawn up front holds the painted card plainly, with no second frame. */
.ws-wrap-body > .pf-field, .ws-wrap-body > .dt { border: 0; padding: 0; background: none; }

/* THE TEMPLATES COLUMN (adeq-6d, web/kit-lib.js): the template library, then
   any saved briefs under a small heading. */
/* The lane's own ground, so cards pass cleanly under the filter instead of showing through it (Franz, 2026-11-05). */
.wk-lane[data-lane="template"] .kl-bar { position: sticky; top: 0; z-index: var(--z-local); padding: 0 0 var(--s-1); background: var(--wk-stack); }
.wk-lane[data-lane="template"] .kl { gap: 0; }
.wk-tpl-briefs { margin: var(--s-2) 0 var(--s-1); font: 700 13px/1.2 var(--font-display); color: var(--ink-soft); }

/* THE OTHER PICKER (work-head.js, Franz 2026-11-04): clients down the left, campaigns on the right, lines as filters.
   Wide and opening leftwards, so whole names show. */
.dt-pop.bk-sw-pop.ow-pop { width: min(calc(var(--s-12) * 6), calc(100vw - var(--s-4))); max-width: min(calc(var(--s-12) * 6), calc(100vw - var(--s-4))); padding: var(--s-1h); }
.ow-body { display: grid; grid-template-columns: calc(var(--s-12) * 2) minmax(0, 1fr); gap: var(--s-1h); height: min(calc(var(--s-12) * 5), 60dvh); min-height: 0; }
.ow-side, .ow-list { overflow-y: auto; min-height: 0; scrollbar-width: none; }
.ow-side::-webkit-scrollbar, .ow-list::-webkit-scrollbar { display: none; }
.ow-side { display: flex; flex-direction: column; gap: var(--s-half); padding-right: var(--s-1h); border-right: 1px solid var(--rule-faint); }
.ow-client { flex: none; width: 100%; padding: var(--s-1) var(--s-1h); border: 0; border-radius: var(--r-md); background: none; color: var(--ink-soft); font: 500 13.5px/1.3 var(--font-body); text-align: left; cursor: pointer; }
.ow-client:hover { background: var(--shade); color: var(--ink); }
.ow-client.is-on { background: var(--shade); color: var(--ink); font-weight: 600; }
.ow-main { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; min-height: 0; }
.ow-lines { flex: none; display: flex; flex-wrap: wrap; gap: var(--s-half); }
.ow-lines[hidden] { display: none; }
.ow-line { height: var(--s-3); padding: 0 var(--s-1h); border: 1px solid var(--rule); border-radius: var(--r-pill); background: none; color: var(--ink-soft); font: 500 12.5px/1 var(--font-body); cursor: pointer; }
.ow-line:hover { color: var(--ink); }
.ow-line.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ow-list { flex: 1 1 auto; }
.ow-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); }
.ow-n { font-weight: 500; color: var(--mute); }
@media (max-width: 639px) {
  .ow-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ow-side { flex-direction: row; overflow-x: auto; padding: 0 0 var(--s-1); border-right: 0; border-bottom: 1px solid var(--rule-faint); }
  .ow-client { width: auto; white-space: nowrap; }
}
/* The bin on the name's row: a round icon the height of its neighbours, on every kind of work. */
.head-acts .tk-icon-btn.head-del { display: inline-flex; align-items: center; justify-content: center; width: var(--h-md); height: var(--h-md); padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-soft); cursor: pointer; }
.head-acts .tk-icon-btn.head-del:hover { background: var(--shade); color: var(--ink); }
.head-acts .sc-switch, .head-acts .bk-switch { display: inline-flex; align-items: center; gap: var(--s-1); height: var(--h-md); padding: 0 var(--s-1h); font-weight: 600; }

/* THE STAGE PILLS, IN ADEQ'S GREEN (Franz, 2026-11-04: "add colour ... like workspace picker button in the header"):
   the one accent, tinted at rest and solid when picked, as the workspace pill is. The dot keeps the stage's colour. */
.wk-stagechip { border: 0; background: color-mix(in srgb, var(--accent) 18%, var(--card)); color: var(--ink); font-weight: 600; }
.wk-stagechip:hover { border-color: transparent; background: color-mix(in srgb, var(--accent) 28%, var(--card)); }
.wk-stagechip.is-zero { opacity: 1; background: color-mix(in srgb, var(--accent) 7%, var(--card)); color: var(--ink-soft); }
.wk-stagechip.is-zero b { color: var(--ink-soft); }
.wk-stagechip.is-on, .wk-stagechip.is-on:hover { background: var(--accent); box-shadow: none; color: var(--accent-ink); }
.wk-stagechip.is-on b { color: var(--accent-ink); }
.wk-stagechip.is-on .wk-stagechip-dot { background: var(--accent-ink); }

/* EVERY DROPDOWN, ONE LOOK (Franz, 2026-11-04: "make the dropdown style uniform"): the same row, the same type, the
   same picked state, ticks or no ticks. No heading: the pill that opened it said what it is. */
.dt-pop { padding: var(--s-half); border-radius: var(--r-md); }
.dt-pop .dt-pop-row { padding: var(--s-1) var(--s-1h); border-radius: var(--r-md); font: 500 13.5px/1.3 var(--font-body); }
.dt-pop .dt-pop-row.is-on { background: color-mix(in srgb, var(--accent) 18%, var(--card)); color: var(--ink); font-weight: 600; }
.dt-pop .dt-pop-row.is-on:hover { background: color-mix(in srgb, var(--accent) 24%, var(--card)); }

/* WHAT A BRIEF MADE, in the Work tab's list (tasks.js): the brief first, its work second. */
.tk-work { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-half); min-width: 0; }
.tk-work-link { max-width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: 500 13px/1.3 var(--font-body); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-work-link:hover { color: var(--accent); }
.tk-work-more, .tk-work-none { font-size: 12.5px; color: var(--mute); }
.sp-tiles:empty { display: none; }

/* THE WORK TAB'S TWO VIEWS (client.js renderWorkTab): both drawn, one shown, so the toggle is a swap. The other keeps
   its width, so its table has measured itself, and takes no height. */
.wk-panes { position: relative; }
.wk-pane.is-off { position: absolute; left: 0; right: 0; top: 0; height: 0; overflow: hidden; visibility: hidden; }

/* A ROW'S PLACE, beside its tick (table.js numberFrom). */
.dt-h-cell.dt-num, .dt-cell.dt-num { justify-content: center; padding: 0; cursor: default; font: 500 12.5px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--mute); }

/* A FORM, DRAWN (queue-controls.js formMini): headline, a bar a question, its button. One to four a card. */
.fm-minis { display: grid; gap: var(--s-1); padding: var(--s-1h); border-top: var(--s-px) solid var(--rule-faint); background: var(--shade); }
.fm-minis.n-2, .fm-minis.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fm-minis.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-mini { display: flex; flex-direction: column; gap: var(--s-half); min-width: 0; width: 100%; padding: var(--s-1); border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-md); background: var(--card); color: var(--ink); text-align: left; }
button.fm-mini { cursor: pointer; }
button.fm-mini:hover { border-color: var(--accent); }
.fm-mini-h { font: 600 12px/1.3 var(--font-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-mini-q { display: block; height: var(--s-1); border-radius: var(--r-sm); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.fm-mini-go { display: block; height: var(--s-1h); margin-top: var(--s-half); border-radius: var(--r-pill); background: var(--accent); }
.fm-minis.n-1 .fm-mini { max-width: calc(var(--s-12) * 2.5); margin: 0 auto; }
/* In a row's little cover the drawing is all there is room for. */
.qc-cover.is-forms .fm-minis { position: absolute; inset: 0; box-sizing: border-box; grid-auto-rows: minmax(0, 1fr); padding: var(--s-nudge); gap: var(--s-nudge); border: 0; background: none; }
.qc-cover.is-forms .fm-minis.n-1 { grid-template-columns: minmax(0, 1fr); }
.qc-cover.is-forms .fm-minis .fm-mini { box-sizing: border-box; display: flex; width: 100%; min-width: 0; padding: var(--s-nudge); gap: var(--s-px); border-radius: var(--r-sm); height: 100%; margin: 0; max-width: none; background: color-mix(in srgb, var(--ink) 14%, var(--card)); }
.qc-cover.is-forms .fm-mini-h { display: none; }
.qc-cover.is-forms .fm-mini-q { width: 100%; flex: none; height: var(--s-nudge); background: color-mix(in srgb, var(--ink) 30%, transparent); }
.qc-cover.is-forms .fm-mini-go { width: 100%; flex: none; height: var(--s-half); margin-top: auto; }
.qc-cover.is-forms .fm-minis.n-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The columns' toolbar sits as far under the stages as the kanban's. */

/* THE LIGHT COLUMN LINES, back on the Work tab's tables (Franz, 2026-11-04). */
.dt.is-visual .dt-cell { border-right: var(--s-px) solid var(--rule-faint); }

/* EVERY MENU OPENS AND CLOSES THE SAME QUICK WAY; a pill's chevron turns with it. */
@keyframes pop-in { from { opacity: 0; transform: translateY(calc(var(--s-half) * -1)); } to { opacity: 1; transform: none; } }
.dt-pop { animation: pop-in .12s cubic-bezier(.2, .8, .2, 1); transform-origin: top; }
.dt-pop.is-leaving { opacity: 0; transform: translateY(calc(var(--s-nudge) * -1)); transition: opacity .09s ease, transform .09s ease; pointer-events: none; }
.pill .pill-chev { transition: rotate .12s ease; }
.pill[aria-expanded="true"] { border-color: var(--ink-soft); }
.pill[aria-expanded="true"] .pill-chev { rotate: 180deg; }
@media (prefers-reduced-motion: reduce) { .dt-pop, .dt-pop.is-leaving, .pill .pill-chev { animation: none; transition: none; } }

/* EVERY TAB STARTS THE SAME, AND NOTHING MOVES WHEN IT PINS (Franz, 2026-11-04: "every tab looks different").
   The first row sits 20 under the tab rule on every tab. A pinning bar carries that space as its own padding and
   starts at the rule, so its resting place and its pinned place are the same pixel; the rows under it follow. */
main .client-body > .cs-form, main .client-body > .rs-page { margin-top: var(--s-half); }
main .client-body .create-page > .kinds-bar.is-stuck-bar { margin-top: calc(var(--s-2) * -1); padding-top: var(--pad-page-end); }
main .client-body .cm-tabs > .bar-toolbar > .dt-toolbar,
main .client-body .cf-page > .bar-toolbar > .dt-toolbar { margin: calc(var(--s-2) * -1) 0 0; padding: var(--pad-page-end) 0; }
/* Work: the stage row, then the toolbar under it, one block, a 20 gap between each row. */
main .client-body .bar-toolbar .dt-toolbar.wk-pinned,
main .client-body .bar-toolbar > .dt > .dt-toolbar.wk-pinned,
main .client-body .bar-toolbar > .tk-view > .dt > .dt-toolbar.wk-pinned {
  top: var(--header-h); margin: calc(var(--s-2) * -1) 0 0; padding: var(--pad-page-end) 0 calc(var(--pad-page-end) - var(--s-px));
}
main .client-body .cm-tabs > .bar-toolbar > .dt-toolbar,
main .client-body .cf-page > .bar-toolbar > .dt-toolbar { padding-bottom: calc(var(--pad-page-end) - var(--s-px)); }
/* The one-pixel mark before a pinning bar must not push it a pixel down. */
main .client-body .rail-mark + .wk-sum-box,
main .client-body .cm-tabs .rail-mark + .dt-toolbar,
main .client-body .cf-page .rail-mark + .dt-toolbar,
main .client-body .create-page > .rail-mark + .kinds-bar.is-stuck-bar { margin-top: calc(var(--s-2) * -1 - var(--s-px)); }
/* The table starts right under the block, with nothing between to jump when the block pins. */
main .client-body .dt.wk-table > .dt-scroll { margin-top: 0; }
/* TICKING MOVES NOTHING: the verbs sit over the toolbar row, pinned with it, and the table stays put. */
main .client-body .dt.wk-table > .dt-bulk:not([hidden]):not(:empty) {
  position: sticky; z-index: var(--z-header); top: calc(var(--header-h) + var(--wk-sum-h, 0px) + var(--s-1h) + var(--s-px));
  box-sizing: border-box; height: calc(var(--s-6) - var(--s-px) * 2); margin: calc((var(--s-6) + var(--s-1h)) * -1) 0 calc(var(--s-1h) + var(--s-px) * 2);
}
main .client-body .rail-mark + .dt-toolbar.wk-pinned { margin-top: calc(var(--s-2) * -1 - var(--s-px)); }

/* THE BRIEF COLUMNS (Franz, 2026-11-05): text stays in its own cell and ends in an ellipsis, never over its neighbour. */
.dt.tk-briefs .dt-cell { overflow: hidden; }
.dt.tk-briefs .dt-cell-in { width: 100%; min-width: 0; overflow: hidden; }
.dt.tk-briefs .dt-cell-in > span:not(.wl-item):not(.tk-person):not(.tk-work):not(.dt-tags) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt.tk-briefs .dt-cell.is-center .dt-cell-in { justify-content: center; }
.dt.tk-briefs .tk-person { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.dt.tk-briefs .tk-person > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt.tk-briefs .wl-name, .dt.tk-briefs .wl-meta { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The empty line's margin must not push the footer off the table. */
main .client-body .dt.wk-table .dt-empty { margin: 0; }
/* THE WORK COLUMN'S PICTURES (work-strip.js): one row, as tall as the row's old cover, what fits and a count on the last. */
.ws-strip { display: flex; gap: var(--s-half); width: 100%; min-width: 0; height: calc(var(--s-6) + var(--s-1)); overflow: hidden; }
.ws-tile { position: relative; flex: none; height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: var(--r-sm); background: var(--shade); cursor: pointer; }
.ws-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ws-tile:hover { outline: var(--s-px) solid var(--accent); outline-offset: calc(-1 * var(--s-px)); }
.ws-tile.is-drawn { display: grid; border: var(--s-px) solid var(--rule-faint); }
.ws-tile.is-drawn svg { width: 100%; height: 100%; }
.ws-tile .fm-mini { height: 100%; padding: var(--s-half); border: 0; justify-content: center; }
.ws-tile .fm-mini-h { display: none; }
.ws-tile .fm-mini-q { height: var(--s-half); }
.ws-tile .fm-mini-go { height: var(--s-1); margin-top: 0; }
.ws-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .62); color: #fff; font: 600 13px/1.3 var(--font-body); font-variant-numeric: tabular-nums; }
/* The work a brief made reads down one left edge, level with the middle of its row. */
.dt.tk-briefs .dt-cell-in > .tk-work { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; min-width: 0; }
.dt.tk-briefs .tk-work-link { display: block; width: 100%; text-align: left; }
.dt.tk-briefs .tk-work-more { text-align: left; }
/* Files: one height for Docs and Media, so switching between them moves nothing. */
@media (min-width: 1024px) { main .client-body .cf-page > .bar-toolbar > .dt-toolbar { box-sizing: border-box; height: calc(var(--pad-page-end) * 2 + var(--h-md) + var(--s-px) * 2); align-items: center; flex-wrap: nowrap; } }
/* A heading narrower than its label shortens; the column's cells are what keep it readable. */

/* FILES IS A PAGE, NOT A PANEL (Franz, 2026-11-05). The media card's fixed height from its Settings days stayed on here:
   the page believed it ended at 640px while 170 pictures overflowed past it, so the bar let go there and the page's
   end had no padding. It grows with its pictures now, starting 20 under the bar like Docs. */
main .client-body .cf-page .pf-field.media { height: auto; max-height: none; min-height: 0; overflow: visible; }
main .client-body .cf-page .pf-field.media .media-grid { height: auto; max-height: none; overflow: visible; margin-top: 0; flex: none; }
/* Create's row sits 20 over what is under it, as every other bar does. */
main .client-body .create-page > .kinds-bar.is-stuck-bar { margin-bottom: 0; padding-bottom: calc(var(--pad-page-end) - var(--s-px)); }

/* THE STACKS (Franz, 2026-11-05: "the scroll in these stacks ain't good"). A column scrolls with no bar of its own. The
   campaign heading pins as a solid band the full width of its stack, the line heading under it, so a card passes
   cleanly beneath them with nothing showing round the edges. */
.wk-lane { --wk-stack: color-mix(in srgb, var(--shade) 35%, color-mix(in srgb, var(--card) 55%, var(--paper))); --wk-head-h: calc(var(--s-6) + var(--s-1h)); }
.wk-lane > .wk-lane-body { scrollbar-width: none; }
.wk-lane > .wk-lane-body::-webkit-scrollbar { display: none; }
.wk-lane-body .wk-group { padding-top: 0; overflow: clip; }
.wk-lane-body .wk-group .wk-group-head {
  position: sticky; top: 0; z-index: var(--z-sticky); box-sizing: border-box; min-height: var(--wk-head-h);
  margin: 0 calc(var(--s-1) * -1); width: calc(100% + var(--s-2)); padding: var(--s-1) var(--s-2);
  border-radius: 0; background: var(--wk-stack); border-bottom: var(--s-px) solid transparent;
}
.wk-lane-body .wk-group .wk-group-head:hover { background: color-mix(in srgb, var(--ink) 5%, var(--wk-stack)); }
.wk-lane-body .wk-sub-head {
  position: sticky; top: var(--wk-head-h); z-index: var(--z-local); box-sizing: border-box;
  margin-left: calc((var(--s-1) + var(--s-px)) * -1); margin-right: calc(var(--s-1) * -1);
  padding-left: calc(var(--s-2) + var(--s-px)); padding-right: var(--s-2);
  border-radius: 0; background: var(--wk-stack);
}
.wk-lane-body .wk-sub-head:hover { background: color-mix(in srgb, var(--ink) 5%, var(--wk-stack)); }

/* THE COLUMNS, FRAN7ESQUE SOUNDS' WAY (Franz, 2026-11-05: "they are perfect already"): a drag moves only the column in
   hand and nothing else. Wider than the card, the table scrolls sideways inside it, with the tick, the number, and the
   Brief held on the left and Utility on the right, so what you are reading never leaves. Utility sits at the right edge
   when the columns are narrower than the card. */
.dt.tk-briefs .dt-row, .dt.tk-briefs .dt-head { min-width: 100%; }
.dt.tk-briefs .dt-util { margin-left: auto; position: sticky; right: 0; z-index: var(--z-local); background: var(--card); }
.dt.tk-briefs .dt-head .dt-util { background: var(--shade); }
.dt.tk-briefs.is-wide .dt-select, .dt.tk-briefs.is-wide .dt-num, .dt.tk-briefs.is-wide [data-col="title"] { position: sticky; z-index: var(--z-local); background: var(--card); }
.dt.tk-briefs.is-wide .dt-select { left: 0; }
.dt.tk-briefs.is-wide .dt-num { left: var(--s-4); }
.dt.tk-briefs.is-wide [data-col="title"] { left: calc(var(--s-4) + var(--s-5)); }
.dt.tk-briefs.is-wide .dt-head .dt-select, .dt.tk-briefs.is-wide .dt-head .dt-num, .dt.tk-briefs.is-wide .dt-head [data-col="title"] { background: var(--shade); }
.dt.tk-briefs .dt-row:hover .dt-util, .dt.tk-briefs.is-wide .dt-row:hover :is(.dt-select, .dt-num, [data-col="title"]) { background: var(--shade); }
/* THE PILL, ONE GRAMMAR: quiet at rest; hover, open, and picked are the same green tint and border. No solid fills. */
main .client-body .bar-toolbar .dt-toolbar .pill { background: var(--card); border: var(--s-px) solid var(--rule-faint); color: var(--ink-soft); transition: background .12s, color .12s, border-color .12s; }
main .client-body .bar-toolbar .dt-toolbar .pill:hover,
main .client-body .bar-toolbar .dt-toolbar .pill[aria-expanded="true"],
main .client-body .bar-toolbar .dt-toolbar .pill.is-on { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.dt-pop .dt-pop-row:hover { background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--accent); }
.dt-pop .dt-pop-row.is-on, .dt-pop .dt-pop-row.is-on:hover { background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--accent); font-weight: 600; }
/* The sideways bar is always there to grab, not only while scrolling; a mouse has no other way across. */
main .client-body .dt.tk-briefs.is-wide > .dt-scroll { scrollbar-width: none; }
main .client-body .dt.tk-briefs.is-wide > .dt-scroll::-webkit-scrollbar { height: var(--s-1h); width: 0; background: var(--card); }
main .client-body .dt.tk-briefs.is-wide > .dt-scroll::-webkit-scrollbar-thumb { background: var(--rule); border-radius: var(--r-pill); border: var(--s-px) solid var(--card); }
main .client-body .dt.tk-briefs.is-wide > .dt-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* A ROW'S COVER WITH SEVERAL PIECES (Franz, 2026-11-05: "the media thumbnail gets hidden"). .wl-thumb centres its
   children, which shrank these cells to nothing: their pictures are absolute, so a centred cell has no size. Every
   brief that made two to four pieces drew an empty tile. In 56px, three across is slivers, so the first runs tall. */
.qc-cover.wl-thumb:is(.is-grid, .is-mosaic) { place-items: stretch; padding: 0; gap: var(--s-px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.qc-cover.wl-thumb.is-grid:is(.n-3, .n-4) { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.qc-cover.wl-thumb.is-grid.n-3 .qc-cover-cell:first-child { grid-row: span 2; }
.qc-cover.wl-thumb.is-grid .qc-cover-cell { border-radius: 0; }
.qc-cover.wl-thumb.is-grid img { object-fit: cover; }
/* A highlighted row is the tile's own colour, so the tile takes the card's and stays a tile. */
.dt.is-visual .dt-row:is(:hover, .is-selected) .wl-thumb { background: var(--card); border-color: var(--rule); }

/* COLUMNS, RIGHT OF THE SEARCH (2026-11-05). The search gives up the pill's width, so its left edge and Create hold
   the same place on Brief and on Work. */
.dt.tk-briefs .dt-colbtn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); flex: none; width: var(--s-12); padding: 0; }
.bar-toolbar .dt.tk-briefs .dt-toolbar .dt-search { max-width: calc(var(--w-pop) - var(--s-12) - var(--s-1)); }
.dt-pop.dt-col-pop { width: calc(var(--s-12) * 2); min-width: 0; }
.dt-pop .dt-pop-row.dt-col-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); }
.dt-col-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-col-row .ic { flex: none; color: var(--accent); }
.dt-col-row.is-off { color: var(--mute); }
.dt-col-row.is-off .ic { color: var(--mute); }
.dt-col-row.is-pinned .ic { color: var(--mute); }
.dt-col-pop .dt-pop-row.is-pinned { cursor: default; opacity: .6; }
.dt-col-pop .dt-pop-row[draggable="true"] { cursor: grab; }
.dt-col-pop .dt-picker-foot { justify-content: space-between; padding: var(--s-1) var(--s-1) var(--s-half); }

/* A STATUS IS A PILL WORTH LOOKING AT (Franz, 2026-11-05: "really really great"): filled with its stage's own tint, a
   dot with a soft ring, the word in the same colour family. --sp is the stage; everything else is mixed from it. */
.dt.tk-briefs .tk-spill {
  --sp: var(--ink-soft); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); flex: none; width: auto; height: var(--s-4); min-height: 0; margin: 0;
  padding: 0 var(--s-1h); border: var(--s-px) solid color-mix(in srgb, var(--sp) 34%, transparent); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--sp) 15%, var(--card)); color: color-mix(in srgb, var(--sp) 62%, var(--ink)); font: 600 13px/1 var(--font-body); white-space: nowrap;
}
.dt.tk-briefs .tk-spill.is-doing { --sp: var(--c-sea); }
.dt.tk-briefs .tk-spill.is-review { --sp: var(--c-sand); }
.dt.tk-briefs .tk-spill.is-done { --sp: var(--accent); }
.dt.tk-briefs .tk-spill.is-paused { --sp: var(--mute); }
.dt.tk-briefs .tk-spill.is-draft { --sp: var(--mute); border-style: dashed; background: none; }
.dt.tk-briefs .tk-spill .tk-spill-dot { width: var(--s-1); height: var(--s-1); background: var(--sp); box-shadow: 0 0 0 var(--s-nudge) color-mix(in srgb, var(--sp) 22%, transparent); }
.dt.tk-briefs .tk-spill.is-draft .tk-spill-dot { background: none; border: 1.5px solid var(--sp); box-shadow: none; box-sizing: border-box; }
.dt.tk-briefs .tk-spill.is-live { cursor: pointer; transition: background .12s, border-color .12s; }
.dt.tk-briefs .tk-spill.is-live:hover { background: color-mix(in srgb, var(--sp) 26%, var(--card)); border-color: color-mix(in srgb, var(--sp) 55%, transparent); }

/* ACTIONS IN THE CELL: a quiet word and a small chevron, so a cell reads as text and still says it can change. */
.dt.tk-briefs .tk-pick.tk-cellpick { display: inline-flex; align-items: center; gap: var(--s-half); max-width: 100%; min-height: 0; padding: var(--s-half) var(--s-half) var(--s-half) var(--s-1); border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: 500 13px/1.3 var(--font-body); cursor: pointer; white-space: nowrap; }
.dt.tk-briefs .tk-pick.tk-cellpick:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.dt.tk-briefs .tk-pick.tk-cellpick.is-muted { color: var(--mute); }
.dt.tk-briefs .tk-pick.tk-cellpick .pill-chev { flex: none; opacity: .55; }
.dt.tk-briefs .tk-caps, .dt.tk-briefs .tk-pick.tk-cellpick.tk-caps { font: 600 12.5px/1.3 var(--font-body); letter-spacing: .03em; color: var(--ink-soft); }

/* A PERSON'S PHOTO fills whatever round mark holds their initials (person-mark.js). */
.has-face { position: relative; overflow: hidden; color: transparent; padding: 0; }
.face-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border-radius: inherit; background: var(--paper); }

/* THE BRIEF PAGES (2026-11-05): who has it as one row of real pills, the brief's short answers as tiles, what can and
   cannot be said as two lists, then the long part. Nothing empty is drawn. */
.wbt { gap: var(--s-2); }
.wbt-live { display: flex; flex-wrap: wrap; gap: var(--s-1h) var(--s-3); padding: var(--s-1h) var(--s-2); border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-md); background: var(--card); }
.wbt-cell { display: grid; gap: var(--s-half); align-content: start; justify-items: start; min-width: 0; }
.wbt-k, .wbt-cell .wbt-k, .wbt-made .wbt-k { font: 500 12.5px/1.2 var(--font-body); color: var(--mute); }
.wbt-pill, .wbt-status {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; height: var(--s-4); padding: 0 var(--s-1h); margin: 0;
  border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-pill); background: var(--shade); color: var(--ink); font: 600 13px/1 var(--font-body); cursor: pointer; white-space: nowrap;
}
.wbt-pill:hover { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.wbt-pill.is-muted { color: var(--mute); }
.wbt-pill-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wbt-pill .mark { width: var(--s-3); height: var(--s-3); margin-left: calc(var(--s-half) * -1); font-size: 9.5px; flex: none; }
.wbt-status { --sp: var(--ink-soft); background: color-mix(in srgb, var(--sp) 15%, var(--card)); border-color: color-mix(in srgb, var(--sp) 34%, transparent); color: color-mix(in srgb, var(--sp) 62%, var(--ink)); }
.wbt-status:hover { background: color-mix(in srgb, var(--sp) 26%, var(--card)); }
.wbt-status.is-doing { --sp: var(--c-sea); }
.wbt-status.is-review { --sp: var(--c-sand); }
.wbt-status.is-done { --sp: var(--accent); }
.wbt-status-dot { flex: none; width: var(--s-1); height: var(--s-1); border-radius: 50%; background: var(--sp); box-shadow: 0 0 0 var(--s-nudge) color-mix(in srgb, var(--sp) 22%, transparent); }
.wbt-live .tk-asked { display: inline-flex; align-items: center; gap: var(--s-1); height: var(--s-4); font: 500 13px/1 var(--font-body); color: var(--ink); min-width: 0; }
.wbt-live .tk-asked .mark { width: var(--s-3); height: var(--s-3); font-size: 9.5px; flex: none; }
.wbt-head { justify-content: flex-end; }
.wbt-made { display: flex; align-items: center; gap: var(--s-1h); flex-wrap: wrap; }
.wbt-made-list { display: flex; flex-wrap: wrap; gap: var(--s-1); min-width: 0; }
.wbt-made-row { display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; height: var(--s-4); padding: 0 var(--s-1h); border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font: 500 13px/1 var(--font-body); cursor: pointer; }
.wbt-made-row:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.wbt-made-row:disabled { cursor: default; color: var(--mute); }
.wbt-made-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbt-made-m { flex: none; font-size: 12px; color: var(--mute); }
.wbr-one { display: grid; gap: var(--s-1h); }
.wbr-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--s-12) * 2), 1fr)); gap: var(--s-1); }
.wbr-c { display: grid; gap: var(--s-half); align-content: start; padding: var(--s-1h) var(--s-2); border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-md); background: var(--card); min-width: 0; }
.wbr-says { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--s-12) * 3), 1fr)); gap: var(--s-1); }
.wbr-one > .wbr-says .wbr-f { padding: var(--s-1h) var(--s-2); border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-md); background: var(--card); }
.wbr-long { display: grid; gap: var(--s-1h); padding: var(--s-1h) var(--s-2); border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-md); background: var(--card); }
.wbr-one .wbr-k { display: block; margin-bottom: var(--s-half); font: 500 12.5px/1.2 var(--font-body); color: var(--mute); }
.wbr-c .wbr-k { margin-bottom: 0; }
.wbr-one .wbr-v { margin: 0; font: 500 14px/1.4 var(--font-body); color: var(--ink); }
.wbr-one .wbr-rows { margin: 0; padding: 0; list-style: none; font: 400 14px/1.45 var(--font-body); color: var(--ink); }
.wbr-one .wbr-rows > li { margin: 0; padding: var(--s-nudge) 0; border: 0; }
.wbr-say .wbr-rows > li { position: relative; padding-left: var(--s-2); }
.wbr-say .wbr-rows > li::before { content: ''; position: absolute; left: 0; top: calc(var(--s-nudge) + .55em); width: var(--s-1); height: var(--s-1); border-radius: 50%; background: var(--accent); }
.wbr-say.is-no .wbr-rows > li::before { background: var(--alarm); }
.wbr-tag { display: inline-flex; align-items: center; height: var(--s-3); padding: 0 var(--s-1); border-radius: var(--r-pill); background: var(--shade); color: var(--ink); font: 500 12.5px/1 var(--font-body); white-space: nowrap; }
.wbr-chips { gap: var(--s-half); }

/* THE TABS, THE TOOLBAR UNDER THEM, PINNED WITH THE NAME AS ONE BLOCK (Franz, 2026-11-05). The toolbar has the Files bar's
   spacing, 20 above and 20 below, and the block rests where it pins, so stuck is the same picture as at rest. */
.wk-barhold { background: var(--paper); }
:is([data-screen="script"], [data-screen="form"], [data-screen="bulk"]) .wk-barrow > .subtabs:not(.zz) { position: static; margin: 0; padding: 0; border-bottom: var(--s-px) solid var(--rule-faint); background: none; }
:is([data-screen="script"], [data-screen="form"], [data-screen="bulk"]) .wk-barrow > :is(.scene-rail, .fm-bar, .bk-bar):not(.zz) {
  position: static; display: flex; align-items: center; box-sizing: border-box; min-width: 0; height: auto; margin: 0; padding: var(--pad-page-end) 0; border: 0; background: none; transform: none; box-shadow: none;
}
@media (min-width: 1024px) {
  :is([data-screen="script"], [data-screen="form"], [data-screen="bulk"]) .page-head.is-stuck-head:not(.zz) {
    position: sticky; top: var(--header-h); z-index: var(--z-sticky); margin: calc(var(--s-2) * -1) 0 0; padding: var(--s-2) 0 var(--s-half); background: var(--paper); box-shadow: none;
  }
  .wk-barhold { position: sticky; top: var(--stick-top); z-index: var(--z-sticky); }
  /* THE RIGHT COLUMN NEVER LEAVES (Franz, 2026-11-05): it rests where it pins, open or folded, fold button and all. */
  :is([data-screen="script"] .live-rail, [data-screen="form"] .fm-rail, [data-screen="bulk"] .bk-rail):not(.zz) { position: sticky; align-self: start; top: var(--stick-top); margin-top: 0; max-height: calc(100vh - var(--stick-top) - var(--pad-page-end)); }
  :is([data-screen="script"], [data-screen="form"]) .page-head.is-stuck-head:not(.zz) > .page-back { top: calc(50% + (var(--s-2) - var(--s-half)) / 2); }
}
[data-screen="script"] [id^="scene-"] { scroll-margin-top: calc(var(--stick-top, 112px) + var(--s-12) + var(--s-3)); }
.req-row[hidden] { display: none; }
.req-adds { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.sc-brief > .req-row:not([hidden]) ~ .req-adds { margin-top: var(--s-1h); }

/* THE MAIN PILL: the stage leads the bar in the one solid fill, its count beside it. The rest of the bar stays quiet. */
.wk-main-hold { display: inline-flex; flex: none; }
/* The stage is a quiet tinted pill as wide as its words, wearing the fill only once one is picked: Brief View | Work View is what leads. */
main .client-body .bar-toolbar .dt-toolbar .pill.wk-main { display: inline-flex; align-items: center; gap: var(--s-1h); padding: 0 var(--s-1h) 0 var(--s-2); background: color-mix(in srgb, var(--accent) 18%, var(--card)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink); font-weight: 600; }
main .client-body .bar-toolbar .dt-toolbar .pill.wk-main:hover, main .client-body .bar-toolbar .dt-toolbar .pill.wk-main[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 28%, var(--card)); color: var(--ink); }
main .client-body .bar-toolbar .dt-toolbar .pill.wk-main.is-picked { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* THE VIEW LEADS THE BAR AND STANDS OUT (Franz, 2026-11-05). */
main .client-body .bar-toolbar .dt-toolbar .bw-switch .seg { padding: 0 var(--s-2); font: 700 14px/1 var(--font-body); }
main .client-body .bar-toolbar .dt-toolbar .bw-switch { flex: none; border: var(--s-px) solid var(--accent); }
.pill.wk-main b { font-weight: 700; font-variant-numeric: tabular-nums; }
.wk-pane .dt-toolbar .dt-count { display: none; }
.wk-sdot { display: block; width: var(--s-1); height: var(--s-1); border-radius: 50%; background: var(--mute); }
.wk-sdot.is-internal_review { background: color-mix(in srgb, var(--c-sea) 55%, var(--card)); }
.wk-sdot.is-client_review { background: var(--c-sea); }
.wk-sdot.is-changes_requested { background: var(--alarm); }
.wk-sdot.is-approved { background: color-mix(in srgb, var(--accent) 55%, var(--card)); }
.wk-sdot.is-delivered { background: var(--accent); }
.pill.wk-main.is-picked .wk-sdot { background: var(--accent-ink); }
.dt-pop.wk-main-pop { min-width: calc(var(--s-12) * 2 + var(--s-3)); }
.dt-pop .dt-pop-row.wk-main-row { display: flex; align-items: center; gap: var(--s-1); }
.wk-main-dot { flex: none; width: var(--s-1); height: var(--s-1); }
.wk-main-t { flex: 1 1 auto; min-width: 0; }
.wk-main-row b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.wk-main-row.is-zero { color: var(--mute); }
main .client-body .bar-toolbar > .tk-view > .dt > .rail-mark + .dt-toolbar.wk-pinned { margin-top: calc(var(--s-2) * -1 - var(--s-px)); }
main .client-body .bar-toolbar .dt-toolbar .bw-switch { box-sizing: border-box; height: var(--h-md); padding: var(--s-nudge); gap: var(--s-nudge); border-radius: var(--r-pill); overflow: hidden; }
main .client-body .bar-toolbar .dt-toolbar .bw-switch .seg { height: 100%; min-height: 0; border: 0; border-radius: var(--r-pill); }
main .client-body .dt.wk-table.tk-briefs > .dt-scroll { margin-top: calc(var(--s-px) * -1); }

/* THE CELLS THAT ARE PILLS: quiet, no colour, one height, so a row of them reads as a row. */
.dt.tk-briefs .tk-cellpill, .dt.tk-briefs .tk-pick.tk-cellpick.is-pill {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-half); flex: none; height: var(--s-4); min-height: 0; margin: 0;
  padding: 0 var(--s-1h); border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-pill); background: var(--shade); color: var(--ink); white-space: nowrap;
}
/* THE TYPE PILL, THE WEBSITE'S TABS AT PILL SIZE (screen-site-home.css .hm-tabs): full colour, dark words, in both themes. */
.dt.tk-briefs .tk-cellpill.is-video { --t: #E88A2E; }
.dt.tk-briefs .tk-cellpill.is-statics { --t: #F2D338; }
.dt.tk-briefs .tk-cellpill.is-forms { --t: #96C93D; }
.dt.tk-briefs .tk-cellpill.is-landing { --t: #3FA9C9; }
.dt.tk-briefs .tk-cellpill:is(.is-video, .is-statics, .is-forms, .is-landing) {
  border-color: transparent; color: #0B0D0C;
  background: radial-gradient(70% 60% at 100% 0%, rgb(255 255 255 / .22), transparent 70%), linear-gradient(165deg, color-mix(in srgb, var(--t) 88%, #fff), var(--t) 60%, color-mix(in srgb, var(--t) 88%, #000));
}
.dt.tk-briefs .tk-pick.tk-cellpick.is-pill:hover { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.dt.tk-briefs .tk-pick.tk-cellpick.is-pill.is-muted { color: var(--mute); }

/* A CAMPAIGN AND ITS LINES, ONE TIGHT STACK (Franz, 2026-11-05). Heads sit flush and pin. Open, a campaign's total steps
   aside because its lines say it; shut, it says the whole. What is open wears the green. */
.wk-group.has-subs:not(.is-shut) > .wk-group-head > .wk-group-n, .wk-group.has-subs:not(.is-shut) .wk-group-lines { display: none; }
.wk-group:not(.is-shut) > .wk-group-head .wk-group-name, .wk-sub:not(.is-shut) > .wk-sub-head .wk-sub-t { color: var(--accent); }
.wk-sub:not(.is-shut) > .wk-sub-head { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.wk-group-n { min-width: var(--s-4); height: var(--s-3); padding: 0 var(--s-1); background: color-mix(in srgb, var(--accent) 18%, var(--card)); color: var(--ink); font: 700 12.5px/1 var(--font-body); }
.wk-lane-body .wk-group { padding-bottom: var(--s-half); }
.wk-lane-body .wk-group > div { gap: 0; }
.wk-lane-body .wk-sub { gap: 0; }
.wk-lane-body .wk-sub + .wk-sub { margin-top: 0; }
.wk-lane-body .wk-sub-cards { padding: var(--s-1) 0; }

/* FILES: Upload is a label, so it is told to sit like the pills beside it. */
main .client-body .cf-page .dt-toolbar .media-add { box-sizing: border-box; display: inline-flex; align-items: center; height: var(--h-md); margin: 0; }
main .client-body .cf-page .dt-toolbar > * { align-self: center; }

/* THE TABS LEAD THE PAGE (Franz, 2026-11-05): back arrow in the gutter, tabs on the page's margin, the count and the verbs
   at the right of the same row, one rule under it all. */
.client-bar { position: relative; display: flex; align-items: center; gap: var(--s-3); min-width: 0; min-height: calc(var(--h-md) + var(--s-2)); border-bottom: var(--s-px) solid var(--rule); }
.client-bar > .subtabs { flex: 0 1 auto; align-self: stretch; display: flex; align-items: stretch; gap: calc(var(--s-3) + var(--s-half)); min-width: 0; margin: 0; border-bottom: 0; }
.client-bar > .subtabs > .subtab { box-sizing: border-box; height: auto; margin: 0; padding: 0; }
.client-acts { display: flex; align-items: center; gap: var(--s-1h); flex: none; margin-left: auto; }
.client-acts .client-stats { display: inline-flex; align-items: baseline; gap: var(--s-1h); margin: 0; padding: 0; border: 0; }
.client-acts .client-stats .stat { display: inline-flex; flex-direction: row; align-items: baseline; gap: var(--s-half); padding: 0; white-space: nowrap; }
.client-acts .stat::before { content: none; }
.client-acts .stat-v { font: 600 14px/1 var(--font-body); color: var(--ink); }
.client-acts .stat-l { font: 400 13px/1 var(--font-body); color: var(--mute); }
.client-acts .client-viewas, .client-acts .client-set { margin: 0; }
@media (min-width: 1024px) {
  .client-bar > .page-back { position: absolute; margin: 0; left: calc(var(--pad-page) * -1 + (var(--pad-page) - var(--back)) / 2); top: 50%; transform: translateY(-50%); }
}
@media (max-width: 1023px) { .client-bar { flex-wrap: wrap; row-gap: 0; } .client-acts { margin-left: 0; width: 100%; padding: var(--s-1) 0; } }

/* A CUT-OUT PHOTO has no ground of its own, so dark hair vanished on a dark mark. It gets a tinted one, as the website's
   team tile gives it, and sits closer in so the face reads at this size. */
.face-img[src$=".png"] { background: color-mix(in srgb, var(--accent) 50%, var(--mute)); object-position: 50% 12%; transform: scale(1.3); transform-origin: 50% 30%; }
.has-face { isolation: isolate; }

/* EVERY PAGE ENDS ON THE TOOLBAR'S SPACING, 20 (Franz, 2026-11-05). The board keeps a strip under its lanes for its sideways
   bar, so that strip sits inside the page's end rather than on top of it; the table's last hairline does the same. */
@media (min-width: 1024px) {
  main .client-body .wk-board { margin-bottom: calc(var(--wk-board-pad, var(--s-1)) * -1); }
  main .client-body .dt.wk-table.tk-briefs { margin-bottom: calc(var(--s-px) * -1); }
}
main .client-body .profile-form.cs-form:has(> [data-card]):is(:last-child, :has(+ div > .pf-status:empty:only-child)) { margin-bottom: 0; }

/* The client's mark in the header's picker: a size up, centred in the pill. */
#client-pick-mark, .client-pick-mark { display: inline-grid; place-items: center; flex: none; }
.client-pick-mark .mark { width: var(--s-3); height: var(--s-3); font-size: 10px; }

/* NO CREATE IN THE HEADER (Franz, 2026-11-05): every client has a Create tab. Its wiring stays so nothing else breaks. */
.top-right > .btn-create { display: none; }
/* The client's tabs sit close under the header, the row's own height being the space. */
.client-top:not(.zz) { padding-top: var(--s-half); }

/* A PHONE'S BRIEF ROW: the name, then what it made under it. */
@media (max-width: 639px) {
  .dt.is-visual.tk-briefs .dt-cell[data-col="work"] { display: block; flex: 1 1 100%; }
  .dt.tk-briefs .dt-cell[data-col="work"] .dt-cell-in { width: 100%; }
}

/* WORK VIEW, CLOSER TOGETHER (Franz, 2026-11-05: "there are going to be too many soon"): heads at one row's height,
   lines a row apart, and no gap the head and its first line have to cross. */
.wk-lane { --wk-head-h: var(--s-5); }
.wk-lane-body { gap: var(--s-1); }
.wk-lane-body .wk-group + .wk-group { margin-top: 0; }
.wk-lane-body .wk-group { gap: 0; padding-bottom: 0; }
.wk-lane-body .wk-group .wk-group-head { padding: var(--s-half) var(--s-2); }
.wk-lane-body .wk-sub-head { min-height: var(--h-sm); padding-top: 0; padding-bottom: 0; }
.wk-lane-body .wk-group-n { height: var(--s-3); min-width: var(--s-3); }
.wk-lane-body .wk-sub-cards { gap: var(--s-1); padding: var(--s-half) 0 var(--s-1); }
.wk-lane-body .wk-group-cards { gap: var(--s-1); }

/* THE STAGE IS THE LOUDEST THING ON A CARD (Franz, 2026-11-05: "the status button has to be more prominent"): bigger,
   bolder, and filled, each stage its own. */
.wk-card .wb-stage, .wp-panel .wb-stage { height: var(--h-md); padding: 0 var(--s-1h); gap: var(--s-1); font: 700 13px/1.3 var(--font-body); }
.wb-stage.is-draft { background: color-mix(in srgb, var(--ink) 14%, var(--card)); border-color: color-mix(in srgb, var(--ink) 35%, transparent); color: var(--ink); }
.wb-stage.is-internal_review { background: color-mix(in srgb, var(--c-sea) 55%, var(--card)); border-color: var(--c-sea); color: var(--ink); }
.wb-stage.is-client_review { background: var(--c-sea); border-color: var(--c-sea); color: #fff; }
.wb-stage.is-changes_requested { background: var(--c-sand); border-color: var(--c-sand); color: #0B0D0C; }
.wb-stage.is-approved { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.wb-stage:is(.is-draft, .is-internal_review, .is-client_review, .is-changes_requested, .is-approved, .is-delivered):hover { filter: brightness(1.1); }
.wb-stage .wb-stage-chev { opacity: 1; }

/* THE SIDE PANEL'S PLAYER: one stage that holds still while the sizes change inside it. */
.wp-player { display: grid; gap: var(--s-1); justify-items: center; min-width: 0; }
.wp-stage { container-type: size; display: grid; place-items: center; width: 100%; height: min(58vh, calc(var(--s-12) * 5)); border-radius: var(--r-lg); background: var(--shade); overflow: hidden; }
.wp-video { display: block; width: min(100cqw, calc(100cqh * var(--arn, .5625))); aspect-ratio: var(--ar, 9 / 16); background: #000; object-fit: contain; }
.wp-sizes { margin-left: 0; }

/* ONE CARD, NOT FOUR BOXES (Franz, 2026-11-05): the stage on the card's right, one hover ring, the card's. */
.wk-row1 { flex-wrap: nowrap; }
.wk-row1 .wb-stage { order: 2; flex: none; margin-left: auto; }
.wk-row1 .wk-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-row1 .stars { gap: var(--s-nudge); }
.wk-card-body > .wk-upload { justify-self: start; margin: 0; }
/* THE FACTS (work-board.js cardFacts): two even columns on one hairline grid, the same on every card. */
.wk-facts-box { container-type: inline-size; margin: 0 var(--s-1h) var(--s-1h); }
/* Everything in here is in em off a size read from the card's width, so a kanban column dragged wider or narrower
   scales the words, the photos, and the gaps together, smoothly, and the two columns stay even. */
.wk-facts { --fs: clamp(11px, 3.7cqw, 12.5px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-px); overflow: hidden; border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-md); background: var(--rule-faint); font: 500 var(--fs)/1.3 var(--font-body); }
/* EVERY FACT THE SAME: the label, its colon, and the value straight after it, with one small gap. */
.wk-cell { display: flex; align-items: center; gap: .4em; min-width: 0; min-height: 2.7em; padding: .3em .65em; border: 0; background: var(--card); text-align: left; font: inherit; color: var(--ink); }
.wk-cell.is-wide { grid-column: 1 / -1; }
button.wk-cell { cursor: pointer; }
button.wk-cell:hover { background: var(--shade); }
button.wk-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wk-cell.is-link .wk-cell-t { color: var(--accent); }
.wk-cell-k { flex: none; color: var(--mute); white-space: nowrap; }
.wk-cell-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-cell-t.is-due { font-weight: 600; }
.wk-cell-t.is-late { color: var(--alarm); font-weight: 600; }
.wk-cell-t.is-mute { color: var(--mute); }
.wk-cell-p { display: inline-flex; align-items: center; gap: .3em; min-width: 0; }
.wk-cell-p .tk-mark { flex: none; width: 1.5em; height: 1.5em; font-size: 1em; }
.wk-cell-p.is-none { color: var(--mute); }
/* What can be changed is a mild pill around the value alone. */
.wk-pick { display: inline-flex; align-items: center; gap: .25em; min-width: 0; max-width: 100%; height: 2em; padding: 0 .4em; border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-pill); background: var(--shade); color: var(--ink); font: inherit; cursor: pointer; }
.wk-pick:hover { border-color: var(--rule); background: color-mix(in srgb, var(--ink) 8%, var(--shade)); }
.wk-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wk-pick .pill-chev { flex: none; opacity: .75; }
[data-screen="client"] .tk-card.wk-card:hover { border-color: var(--accent); }
.wk-cutstrip-t:hover { border-color: var(--rule); }
.wk-cutstrip-t:hover img { filter: brightness(1.08); }

/* A VIDEO'S SCENES ON HOVER (scene-hover.js): laid over the still, the tile's own shape, under anything written on it. */
.scene-hover { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wk-cutstrip-z, .ws-more, .wl-badge { z-index: 1; }
/* Each tile keeps that order to itself, so nothing on it rides over a pinned column when the table scrolls sideways. */
.ws-tile, .wk-card, .wk-cutstrip-t, .wl-thumb, .wk-shot, .hm-card-shot, .wc-shot { isolation: isolate; }

/* THE SIDE PANEL, REORGANISED (Franz, 2026-11-05): the name smaller, everything about the piece on one row, the tabs, then
   one static with its name and stage on one row. No second stage, no arrows beside numbers that already walk the set. */
.wp-in { gap: var(--s-1h); }
.tk-read-title.wp-title { margin: 0; font-size: 20px; line-height: 1.3; }
.wp-meta { gap: var(--s-half) var(--s-1); }
.wp-meta .wp-rate { margin-left: auto; }
.wp-editor[hidden], .wp-pane[hidden] { display: none; }
.wp-ed-in { display: grid; gap: var(--s-1h); min-width: 0; }
.wp-ed-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); min-width: 0; }
.wp-ed-t { min-width: 0; font: 700 15px/1.3 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-editor { container-type: inline-size; }
.wp-editor .bk-design { margin: 0; }
.wp-editor .bk-tools { flex-wrap: wrap; row-gap: var(--s-half); }
.wp-editor .bk-sizes { width: 100%; }
/* STACKED, AND SIDE BY SIDE ONLY ONCE THE PANEL HAS BEEN WIDENED ENOUGH FOR BOTH. */
@container (min-width: 760px) {
  .wp-ed-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: var(--s-2); }
  .wp-ed-in > * { grid-column: 1 / -1; }
  .wp-ed-in > :is(.bk-design, .bk-design-wrap) { grid-column: 1; }
  .wp-ed-in > .bk-lines { grid-column: 2; }
}
.wp-editor .commit-row { display: none; }

/* A TEMPLATE'S COPY, IN ITS SECTIONS (tpl-ig.js igSections). */
.bk-sec { padding: var(--s-1h) 0 0; border-top: var(--s-px) solid var(--rule-faint); }
.bk-ig + .bk-sec { margin-top: 0; border-top: 0; }
.bk-sec + .bk-sec { margin-top: var(--s-1h); }
.bk-sec-h { margin: 0 0 var(--s-1); font: 700 14px/1.3 var(--font-body); color: var(--ink); }
.bk-sec-in { display: grid; gap: var(--s-1); min-width: 0; }
.bk-sec-in .bk-fg { margin: 0; }
.bk-sec-in .bk-fg.is-solo .lbl { display: none; }
.bk-sec-in .bk-fg.is-pair + .bk-fg.is-pair .bk-fi-l { display: none; }
.bk-ig-tpl { width: 100%; min-height: var(--s-5); }
.wp-editor .bk-ig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wp-editor .bk-ig > div.bk-ig-pick { grid-column: 1 / -1; }
/* The Background picker beside the copy says the style, so the row above the creative need not. */
.wp-editor .bk-stylepick { display: none; }
.wp-editor .bk-tools { border-radius: var(--r-lg); }

/* THE ONE LADDER'S NEW STEP ON A BRIEF, in the colour of its stage on work. */
.tk-spill.is-changes .tk-spill-dot, .dt-pop-row .tk-dot.is-changes { background: var(--c-clay); }
.dt.tk-briefs .tk-spill.is-changes, .wbt-status.is-changes { --sp: var(--c-clay); }

/* A CARD'S ROW: size, rating, stage. Its foot: when it was made, how urgent, when it last moved. */
.wk-row1 .stars, .wk-row1 > :not(.wk-chip):not(.wb-stage):not(.wk-upload) { flex: none; }

/* THE VIEW SWITCH: two icons, just left of the search on whichever bar it is in. */
.dt-toolbar > .bw-switch.is-icons { order: 1; flex: none; }
/* LEFT OF THE SEARCH (Franz, 2026-11-06): the search and everything after it step past the toggle. */
.dt-toolbar:has(> .bw-switch.is-icons) > :is(.dt-search, .dt-search ~ :not(.bw-switch)) { order: 2; }
.bw-switch.is-icons .seg.is-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--s-5); padding: 0; }

/* A WHOLE PAGE IN THE SIDE PANEL (work-peek.js): the panel holds the name, stage, and rating, so the page's own go; its two
   columns stack; nothing pins to a page header that is not here. */
.wp-page .page-head, .wp-page .sc-head, .wp-page .script-state, .wp-page .rail-fold, .wp-page .rail-dock-btn { display: none; }
.wp-page :is(.script-layout, .wk-layout, .fm-layout) { display: block; }
.wp-page :is(.wk-barhold, .subtabs, .sc-tabs, .fm-tabs, .wk-barrow) { position: static; }
.wp-page :is(.sc-stage, .sc-stage + *, .states) { display: none; }
.wp-page .scene { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.wp-page .scene-side { border-left: 0; padding-left: 0; }
.wp-page .fm-sec-body { grid-template-columns: minmax(0, 1fr); }
.wp-page :is(.live-rail, .fm-rail, .wk-rail) { position: static; width: auto; max-height: none; margin-top: var(--s-2); }
.wp-subtabs { margin: 0; }
.wp-editor[hidden], .wp-statics-tab[hidden], .wp-page[hidden] { display: none; }
.wp-statics-tab { display: grid; gap: var(--s-1h); min-width: 0; }

/* ONE ROW OF STATICS (work-board.js oneRow): no bar, whole tiles, snapping, the count on the last. */
.wk-card .wk-thumbs.wk-thumbs { display: flex; gap: var(--s-1); margin: 0 var(--s-1h); padding: var(--s-1) 0; max-height: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; background: none; }
.wk-card .wk-thumbs::-webkit-scrollbar { display: none; }
.wk-card .wk-thumbs .wb-thumb { flex: none; position: relative; width: var(--tile-w, 96px); aspect-ratio: 4 / 5; scroll-snap-align: start; isolation: isolate; }
.wk-card .wk-thumb-more { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgb(0 0 0 / .62); color: #fff; font: 600 13px/1.3 var(--font-body); cursor: pointer; }

/* NOTHING PINS IN THE SIDE PANEL: every page's sticky parts are measured against a page header that is not in here. */
.wp-panel .wp-in :is(.page-head.is-stuck-head, .fm-bar, .scene-rail, .sc-tabs, .live-rail, .bk-tabs, .bk-bar, .bk-rail, .fm-rail, .wk-rail, .wk-barhold) { position: static; top: auto; }

/* A FOLD IN THE SIDE PANEL: its name on the left, the chevron top right, the same rule between each. */
.wp-fold { min-width: 0; border-top: var(--s-px) solid var(--rule-faint); }
.wp-fold > summary, .wp-row-head { display: flex; align-items: center; gap: var(--s-1); min-height: var(--s-5); cursor: pointer; list-style: none; }
.wp-fold > summary::-webkit-details-marker { display: none; }
.wp-fold > summary::before, .wp-fold > summary::after { display: none; content: none; }
.wp-fold-h { flex: 1 1 auto; min-width: 0; font: 700 14px/1.3 var(--font-body); color: var(--ink); }
/* The chevron is the house one (app.css), down shut and up open. */
.wp-fold[open] > summary .wp-fold-chev, .wp-row.is-open > .wp-row-head .wp-fold-chev { transform: rotate(180deg); }
.wp-fold-in { display: grid; gap: var(--s-1); min-width: 0; padding-bottom: var(--s-1h); }
.wp-fold.is-quiet { border-top: 0; }
.wp-fold.is-quiet .wp-fold-h { font: 600 13px/1.3 var(--font-body); color: var(--ink-soft); }
.wp-fold .scene-note-h, .wp-fold .bk-hist-h > span:first-child { display: none; }
.wp-page .scene-side, .wp-page .fm-sec-side { border: 0; padding: 0; min-width: 0; }

/* THE STATICS, STACKED: one row each, open in place. */
.wp-rows { display: grid; gap: var(--s-1); min-width: 0; }
.wp-row { scroll-margin-top: var(--s-8); min-width: 0; border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-md); background: var(--card); }
.wp-row-head { padding: var(--s-1); }
.wp-row-head:hover { background: var(--shade); border-radius: var(--r-md); }
.wp-row-pic { flex: none; width: var(--s-5); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-sm); background: var(--shade); }
.wp-row-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-row-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.3 var(--font-body); color: var(--ink); }
.wp-row-stage { flex: none; }
.wp-panel .wp-row-stage .wb-stage { height: var(--h-sm); padding: 0 var(--s-1); font-size: 12px; }
.wp-row-body { display: none; min-width: 0; padding: var(--s-half) var(--s-1h) var(--s-1h); border-top: var(--s-px) solid var(--rule-faint); }
.wp-row.is-open > .wp-row-body { display: block; }
.wp-ed-head { display: none; }
/* The creative at a size to judge, not a full-width poster, wherever it stacks. */
.wp-editor .bk-design-frame { width: min(100%, calc(var(--s-12) * 4)); margin-inline: auto; }

/* A CARD'S FOLD: top right, as every fold is. */
.wk-card-fold { flex: none; width: var(--h-sm); height: var(--h-sm); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--mute); cursor: pointer; }
.wk-card-fold:hover { color: var(--ink); background: var(--shade); }
.wk-card-fold svg { transition: rotate .15s ease; }
.wk-card-fold.is-shut svg { rotate: -90deg; }
/* Shut keeps the name, the work, and its bar of size, rating, and stage (Franz, 2026-11-06). */
.wk-card.is-shut > .wk-facts-box, .wk-card.is-shut > .wk-card-body > :not(.wk-row1), .wk-card.is-shut > .wk-card-media { display: none; }
.wk-card-head .wk-rename-btn { right: calc(var(--h-sm) + var(--s-1h)); background: none; box-shadow: none; }

/* ONE TREE, NOT BOXES IN BOXES (Franz, 2026-11-06: "how these come together in a connected way"): the column, its
   campaign, its line, its pieces, each a step down in size, all on one left edge, a piece a row of its group. */
.wk-lane-name { font-size: 18px; }
.wk-lane-body .wk-group .wk-group-head { font: 700 15px/1.3 var(--font-display); }
.wk-lane-body .wk-sub-head { font: 600 13.5px/1.3 var(--font-body); }
.wk-lane-body .wk-group .wk-card { --card-x: var(--s-2); margin-inline: calc(var(--s-1) * -1); border: 0; border-top: var(--s-px) solid var(--rule-faint); border-radius: 0; background: none; }
.wk-lane-body .wk-group .wk-sub-cards, .wk-lane-body .wk-group .wk-group-cards { gap: 0; padding: 0; }
.wk-lane-body .wk-sub-head + .wk-sub-cards > .wk-card:first-child { border-top: 0; }
[data-screen="client"] .wk-lane-body .wk-group .tk-card.wk-card:hover { border-color: var(--rule-faint); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.wk-card-head .wk-title { font: 600 13px/1.35 var(--font-body); }
.wk-lane-body .wk-card .wk-card-head { padding: var(--s-half) var(--s-1) var(--s-half) var(--card-x); }
/* ONE RHYTHM DOWN A CARD: an 8px step between the work, its bar, and its facts, and the card's own bottom edge the same
   as its sides, so an open card sits square whatever follows it. */
.wk-lane-body .wk-card .wk-cutstrip { padding: 0 var(--card-x) var(--s-1); }
.wk-lane-body .wk-card .wk-thumbs.wk-thumbs { margin-inline: var(--card-x); padding: 0 0 var(--s-1); }
.wk-lane-body .wk-card .wk-card-head + .wb-thumbs { border-top: 0; }
.wk-lane-body .wk-card .fm-minis { margin: 0 var(--card-x) var(--s-1); padding: 0; border: 0; background: none; }
.wk-lane-body .wk-card .wk-card-body { gap: var(--s-1); padding: 0 var(--card-x) var(--s-1h); }
.wk-lane-body .wk-card:not(.is-shut) .wk-card-body { padding-bottom: var(--s-1); }
.wk-lane-body .wk-card .wk-facts-box { margin: 0 var(--card-x) var(--s-2); }
/* The bar: size, rating, and stage all one height on one line. */
.wk-row1 { min-height: var(--h-sm); }
.wk-card .wk-row1 .wb-stage { height: var(--h-sm); padding: 0 var(--s-1); font-size: 12.5px; }
.wk-lane-body .wk-card .wk-row1 .wk-chip { display: inline-flex; align-items: center; height: var(--h-sm); min-height: 0; padding: 0 var(--s-1); font-size: 12px; }
.wk-row1 .stars { padding: 0; }

/* WHAT IS OPEN IS LIT at the line; a piece opening changes nothing of its own ground or name (Franz, 2026-11-06). */
.wk-lane-body .wk-sub:not(.is-shut) > .wk-sub-head { background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.wk-lane-body .wk-card:not(.is-shut) .wk-card-head .wk-title { color: var(--ink); }

/* EVERY FOLD ON ONE LINE: the campaign's, the line's, and the card's chevrons share one right edge, and the count is
   a plain number beside them, no circle. */
.wk-lane-body .wk-group .wk-group-head, .wk-lane-body .wk-sub-head { padding-right: var(--s-1); }
.wk-lane-body .wk-group-n.wk-group-n { min-width: 0; height: auto; padding: 0; background: none; color: var(--ink-soft); font: 600 13px/1.3 var(--font-body); font-variant-numeric: tabular-nums; }

/* THE FOLD, THE PROFILE AND SETTINGS CARDS' OWN (Franz, 2026-11-06; app.css .card-fold): a small shaded square with a clear
   chevron, down when open and right when shut, the same at every level of the board. */
.wk-lane-body .wk-group-chev, .wk-lane-body .wk-card-fold { width: var(--fold-w); height: var(--fold-w); margin-inline: var(--s-nudge); border-radius: var(--r-sm); background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.wk-lane-body .wk-group-head:hover .wk-group-chev, .wk-lane-body .wk-sub-head:hover .wk-group-chev, .wk-lane-body .wk-card-fold:hover { background: color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink); }

/* A landing page's choices, level with each other in the panel. */
.wp-page .lp-controls { align-items: start; }
.wp-page .lp-controls .l-field { margin-top: 0; }

/* A SHUT CAMPAIGN: its name and lines, its stage, its count, its fold, each with room, the same step above and below. */
.wk-lane-body .wk-group.is-shut .wk-group-head { padding-block: var(--s-1); }
.wk-lane-body .wk-group-n.wk-group-n { margin-inline: var(--s-half); }
.wk-group-stage { flex: none; height: var(--s-3); padding: 0 var(--s-1); font: 600 12px/1.3 var(--font-body); cursor: inherit; }

/* THE COUNT AND THE PENCIL SHARE ONE SLOT: the same width, just left of the fold, so down a column the numbers, the pencils,
   and the chevrons each stand in one straight line, each centred on its row. */
.wk-lane-body .wk-group-n.wk-group-n { box-sizing: border-box; width: var(--s-3); margin-inline: 0; text-align: center; display: inline-grid; place-items: center; }
.wk-lane-body .wk-sub-head, .wk-lane-body .wk-group .wk-group-head { gap: 0; }

.wk-lane-body .wk-card-head .wk-rename-btn { width: var(--s-3); height: var(--s-3); padding: 0; display: grid; place-items: center; right: calc(var(--s-1) + var(--fold-w) + var(--s-nudge) * 2); }

[data-screen="client"] .wk-lane-body .wk-group .tk-card.wk-card.is-shut:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }

/* A STATIC'S HOVER RING SITS INSIDE ITS TILE, so the row's edge never cuts it. */
.wk-card .wk-thumbs .wb-thumb:hover { box-shadow: none; }
.wk-card .wk-thumbs .wb-thumb:hover::after { content: ''; position: absolute; inset: 0; z-index: 2; border: 2px solid var(--accent); border-radius: inherit; pointer-events: none; }

/* EVERY PIECE'S NAME STANDS ON ITS OWN STRIP (Franz, 2026-11-06), a neutral step of the ground, the same on every type, so
   it reads as the title at a glance and stays below the green of its line. */
.wk-lane-body .wk-card .wk-card-head { min-height: var(--s-5); margin-bottom: var(--s-1); background: color-mix(in srgb, var(--ink) 7%, var(--card)); }
.wk-lane-body .wk-card .wk-card-head .wk-title { font-weight: 600; color: var(--ink); }
.wp-row-head { background: color-mix(in srgb, var(--ink) 7%, var(--card)); border-radius: var(--r-md); }
.wp-row.is-open > .wp-row-head { border-radius: var(--r-md) var(--r-md) 0 0; }

/* ROUNDED STRIPS, A HAIR APART (Franz, 2026-11-06): the campaign, the line, and the piece's name are each a soft rounded
   strip inset from the group's edge, with a small step between any two that meet, the words and the chevrons where they
   were. The strip's tone comes from --strip, a stronger step in day, where 7% barely showed. */
:is(.wk-lane, .wp-panel) { --t: var(--accent); --t-ink: color-mix(in srgb, var(--t) 85%, var(--ink)); --strip: color-mix(in srgb, var(--ink) 12%, var(--card)); --line-open: color-mix(in srgb, var(--t) 30%, #E7EAE4); }
:root[data-theme="light"] :is(.wk-lane, .wp-panel) { --strip: color-mix(in srgb, var(--ink) 8%, var(--card)); --line-open: color-mix(in srgb, var(--t) 30%, var(--card)); --t-ink: color-mix(in srgb, var(--t) 45%, var(--ink)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) :is(.wk-lane, .wp-panel) { --strip: color-mix(in srgb, var(--ink) 8%, var(--card)); --line-open: color-mix(in srgb, var(--t) 30%, var(--card)); --t-ink: color-mix(in srgb, var(--t) 45%, var(--ink)); } }
.wk-lane-body .wk-group { padding-bottom: var(--s-half); }
.wk-lane-body .wk-group .wk-group-head { margin-inline: calc((var(--s-1) - var(--s-half)) * -1); margin-top: var(--s-half); width: calc(100% + var(--s-1)); padding-left: calc(var(--s-2) - var(--s-half)); padding-right: var(--s-half); border-radius: var(--r-md); }
.wk-lane-body .wk-sub-head { margin-inline: calc((var(--s-1) - var(--s-half)) * -1); margin-top: var(--s-half); padding-left: calc(var(--s-2) - var(--s-half)); padding-right: var(--s-half); border-radius: var(--r-md); }
.wk-lane-body .wk-sub:not(.is-shut) > .wk-sub-head { background: var(--line-open); }
.wk-lane-body .wk-group .wk-card { border-top: 0; }
.wk-lane-body .wk-card .wk-card-head { margin: var(--s-half) var(--s-half) var(--s-1); padding-left: calc(var(--card-x) - var(--s-half)); padding-right: var(--s-half); border-radius: var(--r-md); background: var(--strip); }
.wk-lane-body .wk-card-head .wk-rename-btn { right: calc(var(--s-half) + var(--fold-w) + var(--s-nudge) * 2); }

/* OPEN FULL PAGE, BESIDE THE STAGE AND CUT LIKE IT: the same height, shape, and weight, a soft green so the stage stays the
   loud one. In a narrow card it says Open, so nothing in the bar wraps or shrinks. */
.wk-card-body { container-type: inline-size; }
.wk-open { order: 2; flex: none; display: inline-flex; align-items: center; height: var(--h-sm); margin-left: auto; padding: 0 var(--s-1); border: var(--s-px) solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--ink); font: 700 12.5px/1.3 var(--font-body); white-space: pre; cursor: pointer; }
.wk-open:hover { background: color-mix(in srgb, var(--accent) 28%, var(--card)); }
.wk-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wk-row1 .wb-stage { order: 3; }
.wk-row1:has(.wk-open) .wb-stage { margin-left: 0; }
@container (max-width: 320px) { .wk-open-more { display: none; } }
/* A landing page's or a single static's picture sits on the same margins as every other card's media. */
.wk-lane-body .wk-card .wk-shot { display: block; width: auto; margin: 0 var(--card-x) var(--s-1); overflow: hidden; border-radius: var(--r-sm); }

/* A LINE IS LIT SHUT OR OPEN, the same strip, the same green word (Franz, 2026-11-06). */
.wk-lane-body .wk-sub > .wk-sub-head { background: var(--line-open); }
.wk-lane-body .wk-sub > .wk-sub-head .wk-sub-t { color: var(--accent); }

/* The line is a heading, not a row: bigger than the piece under it, a clear step under its campaign. */
.wk-lane-body .wk-group .wk-group-head { font-size: 16px; }
.wk-lane-body .wk-sub-head { min-height: var(--s-4); font: 700 14.5px/1.3 var(--font-body); }

/* THE HEADING SAYS WHAT IT IS (Franz, 2026-11-06): a small literal tag right after the name, never at the far end. Short of
   room the tag drops under the name and a long name wraps, so a name is never clipped for it. */
.wk-head-name { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-nudge) var(--s-1); }
.wk-head-kind { flex: none; padding: var(--s-nudge) var(--s-1); border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-soft); font: 500 11px/1.3 var(--font-body); white-space: nowrap; }

/* THE FOUR COLOURS (Franz, 2026-11-06), the website's slot cards: Statics yellow, Video orange, Lead Forms sky, Landing Pages
   deep blue. Chosen to stay apart for colour-blind eyes: no red, no green beside orange. --on is the word on a full fill. */
:root { --ty-statics: #F2D338; --ty-video: #E88A2E; --ty-forms: #3FA9C9; --ty-landing: #3B6FB6; --ty-none: #AEB6AF; }
:is(.wk-lane, .wp-panel).is-t-videos { --t: var(--ty-video); }
:is(.wk-lane, .wp-panel).is-t-statics { --t: var(--ty-statics); }
:is(.wk-lane, .wp-panel).is-t-form { --t: var(--ty-forms); }
:is(.wk-lane, .wp-panel).is-t-landing { --t: var(--ty-landing); --t-ink: color-mix(in srgb, var(--t) 55%, var(--ink)); }
/* By Status each stage owns one of the four, the same as its dot in the stage menu; New is the neutral before work starts. */
.wk-lane.is-s-draft { --t: var(--ty-none); }
.wk-lane:is(.is-s-internal_review, .is-s-in_review) { --t: var(--ty-landing); --t-ink: color-mix(in srgb, var(--t) 55%, var(--ink)); }
.wk-lane.is-s-client_review { --t: var(--ty-forms); }
.wk-lane.is-s-changes_requested { --t: var(--ty-video); }
.wk-lane:is(.is-s-approved, .is-s-delivered, .is-s-sent) { --t: var(--ty-statics); }
.wk-lane-name { padding: var(--s-nudge) var(--s-1h); border-radius: var(--r-pill); color: var(--on, #0B0D0C); background: radial-gradient(70% 60% at 100% 0%, rgb(255 255 255 / .22), transparent 70%), linear-gradient(165deg, color-mix(in srgb, var(--t) 88%, #fff), var(--t) 60%, color-mix(in srgb, var(--t) 88%, #000)); }
.wk-lane-body .wk-sub > .wk-sub-head .wk-sub-t { color: color-mix(in srgb, var(--t) 45%, #1B1F1D); }
/* A LINE'S STRIP IS THE SAME PASTEL DAY AND NIGHT, ITS WORDS DARK ON IT (Franz, 2026-11-06). */
.wk-lane-body .wk-sub-head > .wk-group-n.wk-group-n, .wk-lane-body .wk-sub-head .wk-group-chev.wk-group-chev, .wk-lane-body .wk-sub-head:hover .wk-group-chev.wk-group-chev, .wk-lane-body .wk-sub-head .wk-head-kind { color: #1B1F1D; }
.wk-lane-body .wk-sub-head .wk-head-kind { background: color-mix(in srgb, var(--t) 26%, transparent); }

/* INSIDE A COLUMN OR ITS PANEL, A STAGE IS A SHADE OF THAT COLOUR: an outline when new, deepening to the full colour at Completed. */
[data-screen] :is(.wk-lane, .wp-panel) :is(.wb-stage.wb-stage, .tk-stage.tk-stage, .wk-pick.wbt-st.wbt-st) { border-color: color-mix(in srgb, var(--t) 55%, transparent); background: none; color: var(--t-ink); }
[data-screen] :is(.wk-lane, .wp-panel) :is(.wb-stage.wb-stage, .tk-stage.tk-stage, .wk-pick.wbt-st.wbt-st):is(.is-internal_review, .is-in_review, .is-doing) { border-color: transparent; background: color-mix(in srgb, var(--t) 26%, var(--card)); color: var(--ink); }
[data-screen] :is(.wk-lane, .wp-panel) :is(.wb-stage.wb-stage, .tk-stage.tk-stage, .wk-pick.wbt-st.wbt-st):is(.is-client_review, .is-review) { border-color: transparent; background: color-mix(in srgb, var(--t) 48%, var(--card)); color: var(--ink); }
[data-screen] :is(.wk-lane, .wp-panel) :is(.wb-stage.wb-stage, .tk-stage.tk-stage, .wk-pick.wbt-st.wbt-st):is(.is-changes_requested, .is-changes) { border-color: transparent; background: color-mix(in srgb, var(--t) 72%, var(--card)); color: var(--on, #0B0D0C); }
[data-screen] :is(.wk-lane, .wp-panel) :is(.wb-stage.wb-stage, .tk-stage.tk-stage, .wk-pick.wbt-st.wbt-st):is(.is-approved, .is-delivered, .is-sent, .is-done) { border-color: transparent; background: var(--t); color: var(--on, #0B0D0C); }
.wk-lane .wk-lane-tools .wk-filter.wk-filter { border-color: color-mix(in srgb, var(--t) 45%, transparent); background: color-mix(in srgb, var(--t) 14%, var(--card)); color: var(--t-ink); }
.wk-lane .wk-open { border-color: color-mix(in srgb, var(--t) 55%, transparent); background: color-mix(in srgb, var(--t) 12%, var(--card)); }
.wk-lane .wk-open:hover { background: color-mix(in srgb, var(--t) 28%, var(--card)); }
.wk-lane .fm-mini-go { background: var(--t); }

/* OUTSIDE A COLUMN A STAGE WEARS ITS OWN OF THE FOUR: the stage menu's dots, the panel's pill, and the Status column. */
.wk-sdot.is-draft { background: var(--ty-none); }
.wk-sdot.is-internal_review { background: var(--ty-landing); }
.wk-sdot.is-client_review { background: var(--ty-forms); }
.wk-sdot.is-changes_requested { background: var(--ty-video); }
.wk-sdot:is(.is-approved, .is-delivered) { background: var(--ty-statics); }
.wb-stage.is-internal_review { border-color: transparent; background: var(--ty-landing); color: #0B0D0C; }
.wb-stage.is-client_review { border-color: transparent; background: var(--ty-forms); color: #0B0D0C; }
.wb-stage.is-changes_requested { border-color: transparent; background: var(--ty-video); color: #0B0D0C; }
.wb-stage:is(.is-approved, .is-delivered) { border-color: transparent; background: var(--ty-statics); color: #0B0D0C; }
.dt.tk-briefs .tk-spill.is-doing { --sp: var(--ty-landing); }
.dt.tk-briefs .tk-spill.is-review { --sp: var(--ty-forms); }
.dt.tk-briefs .tk-spill.is-changes { --sp: var(--ty-video); }
.dt.tk-briefs .tk-spill.is-done { --sp: var(--ty-statics); }
.dt.tk-briefs .tk-cellpill.is-forms { --t: var(--ty-forms); }
.dt.tk-briefs .tk-cellpill.is-landing { --t: var(--ty-landing); }

/* THE STAGE PILL LEADS THE BAR IN SOLID GREEN; the filters beside it stay the plain pills (Franz, 2026-11-06). */
/* The same make as By Type beside it: a ring, a small gap, and the filled pill inside, the same weight of word. */
:is(main .client-body, [data-screen="home"]) .bar-toolbar .dt-toolbar .pill.wk-main.wk-main, :is(main .client-body, [data-screen="home"]) .bar-toolbar .dt-toolbar .pill.wk-main.wk-main:hover, :is(main .client-body, [data-screen="home"]) .bar-toolbar .dt-toolbar .pill.wk-main.wk-main[aria-expanded="true"] { box-sizing: border-box; height: var(--h-md); border: var(--s-px) solid var(--accent); background: var(--accent); box-shadow: inset 0 0 0 var(--s-nudge) var(--paper); color: var(--accent-ink); font: 700 14px/1 var(--font-body); }
.pill.wk-main.wk-main b { color: inherit; }

/* The last column's grip stays inside it: past the edge it made 16px of scroll over nothing, and the column stopped short. */
@media (min-width: 640px) {
  .wk-lane:last-child > .wk-lane-grip { right: 0; }
}

/* TYPE AND PRIORITY PILLS, A LITTLE SHORTER, AND THE PRIORITY'S LEVEL READS BY HOW SOLID IT IS (Franz, 2026-11-06; still no colour). */
.dt.tk-briefs .tk-cellpill:is(.is-video, .is-statics, .is-forms, .is-landing), .dt.tk-briefs .tk-pick.tk-cellpick.is-pill.tk-caps { padding-inline: var(--s-1); }
.dt.tk-briefs .tk-pick.tk-cellpick.is-pill.is-p-high { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.dt.tk-briefs .tk-pick.tk-cellpick.is-pill.is-p-medium { border-color: transparent; background: color-mix(in srgb, var(--ink) 18%, var(--card)); color: var(--ink); }
.dt.tk-briefs .tk-pick.tk-cellpick.is-pill.is-p-low { border-color: var(--rule); background: none; color: var(--ink-soft); }
.dt.tk-briefs .tk-pick.tk-cellpick.is-pill:is(.is-p-high, .is-p-medium, .is-p-low):hover { border-color: var(--accent); }

/* THE BRIEF TAB'S FACTS ARE THE CARDS' GRID; four across where the page is wide. */
.wbt { grid-template-columns: minmax(0, 1fr); }
.wbt-grid { margin: 0; }
@container (min-width: 720px) { .wbt-grid .wk-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wk-pick.is-muted { color: var(--mute); }

/* A CAMPAIGN'S HEAD IS ONE ROW, THE SAME OPEN OR SHUT (Franz, 2026-11-06): its name in white and its pill, then its count and its
   fold in the same columns as the lines'. Shut the pill is its stage; open it says Campaign. */
.wk-lane-body .wk-group .wk-group-head { height: var(--s-6); min-height: 0; padding-block: 0; }
.wk-lane-body .wk-group-t { display: contents; }
.wk-lane-body .wk-group-lines { display: none; }
.wk-lane-body .wk-group-head .wk-head-name { flex: 0 1 auto; flex-wrap: nowrap; margin-right: var(--s-1); }
.wk-lane-body .wk-group.wk-group > .wk-group-head .wk-group-name { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.wk-lane-body .wk-group.wk-group > .wk-group-head > .wk-group-n { display: inline-grid; margin-left: auto; margin-right: 0; }
.wk-lane-body .wk-group-head .wk-group-stage, .wk-group-kind { flex: none; display: inline-flex; align-items: center; height: var(--h-sm); margin: 0; padding: 0 var(--s-1); border-radius: var(--r-pill); font: 600 12.5px/1 var(--font-body); }
.wk-group-kind { background: var(--t); color: var(--on, #0B0D0C); }
.wk-group.is-shut .wk-group-kind, .wk-group:not(.is-shut) .wk-group-stage { display: none; }

/* A PIECE IS ONE COLOUR, TITLE AND BODY, facts included, on the same edges as the line above it, rounded; its hover stays
   inside that shape; the gap between pieces stays (Franz, 2026-11-06). */
[data-screen="client"] .wk-lane-body .wk-group .tk-card.wk-card { margin-inline: calc((var(--s-1) - var(--s-half)) * -1); margin-top: var(--s-half); border: 0; border-radius: var(--r-md); background: var(--strip); }
[data-screen="client"] .wk-lane-body .wk-group .tk-card.wk-card:hover, [data-screen="client"] .wk-lane-body .wk-group .tk-card.wk-card.is-shut:hover { background: color-mix(in srgb, var(--ink) 4%, var(--strip)); }
.wk-lane-body .wk-card .wk-card-head { background: none; }
.wk-lane-body .wk-card .wk-cell { background: var(--strip); }
.wk-lane-body .wk-card button.wk-cell:hover { background: color-mix(in srgb, var(--ink) 6%, var(--strip)); }

/* ONE SET OF PILLS, WORK VIEW AND BRIEF VIEW ALIKE (Franz, 2026-11-06). A value nobody changes here wears the same pill, no arrow. */
.wk-pick.is-read { cursor: default; }
.wk-pick.is-read:hover { border-color: var(--rule-faint); background: var(--shade); }
/* Priority by how solid it is, no colour. */
.wk-pick.is-p-high { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.wk-pick.is-p-medium { border-color: transparent; background: color-mix(in srgb, var(--ink) 18%, var(--card)); color: var(--ink); }
.wk-pick.is-p-low { border-color: var(--rule); background: none; color: var(--ink-soft); }
/* A stage or status is the same solid pill wherever it is read. */
.wk-pick.wbt-st.is-doing, [data-screen] .tk-stage.tk-stage:is(.is-internal_review, .is-in_review) { border-color: transparent; background: var(--ty-landing); color: #0B0D0C; }
.wk-pick.wbt-st.is-review, [data-screen] .tk-stage.tk-stage.is-client_review { border-color: transparent; background: var(--ty-forms); color: #0B0D0C; }
.wk-pick.wbt-st.is-changes, [data-screen] .tk-stage.tk-stage.is-changes_requested { border-color: transparent; background: var(--ty-video); color: #0B0D0C; }
.wk-pick.wbt-st.is-done, [data-screen] .tk-stage.tk-stage:is(.is-approved, .is-delivered, .is-sent) { border-color: transparent; background: var(--ty-statics); color: #0B0D0C; }
.dt.tk-briefs .tk-spill:is(.is-doing, .is-review, .is-changes, .is-done) .tk-spill-dot { display: none; }

/* THE CLIENT'S SIDE WEARS THE SAME PILLS (Franz, 2026-11-06): a brief's status and its work's stage are the solid ones too. */
[data-screen] .tk-status.tk-status:is(.is-doing, .is-review, .is-changes, .is-done), [data-screen] .wg-stage.wg-stage { display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 var(--s-1h); border-radius: var(--r-pill); font: 600 12.5px/1 var(--font-body); }
[data-screen] .tk-status.tk-status::before { display: none; }
[data-screen] .tk-status.tk-status.is-doing, [data-screen] .wg-stage.wg-stage:is(.is-internal_review, .is-in_review) { border-color: transparent; background: var(--ty-landing); color: #0B0D0C; }
[data-screen] .tk-status.tk-status.is-review, [data-screen] .wg-stage.wg-stage.is-client_review { border-color: transparent; background: var(--ty-forms); color: #0B0D0C; }
[data-screen] .tk-status.tk-status.is-changes, [data-screen] .wg-stage.wg-stage.is-changes_requested { border-color: transparent; background: var(--ty-video); color: #0B0D0C; }
[data-screen] .tk-status.tk-status.is-done, [data-screen] .wg-stage.wg-stage:is(.is-approved, .is-delivered, .is-sent) { border-color: transparent; background: var(--ty-statics); color: #0B0D0C; }
/* An unrated piece still shows its dots in a fact or a cell, read-only too. */
:is(.wk-cell, .dt-cell) .stars.is-read.is-none { display: inline-flex; }

/* THE CARD'S SECOND ROW: its size, Open Full Page, and the live stage, ending on the line of the chevron above it. */
.wk-lane-body .wk-card .wk-card-head { margin-right: 0; margin-bottom: var(--s-half); }
/* ONE MARGIN, BOTH SIDES, EVERY WIDTH (Franz, 2026-11-06): words and media start 16 in from the piece's left; media, bars, and
   facts end 16 in from its right, and so do the stage's end and each chevron's drawn arrow, whose 22px box is 5px wider each side.
   The pencil's edge and the count's end share the line just left of the chevrons. */
.wk-lane-body .wk-group .wk-group-head, .wk-lane-body .wk-sub.wk-sub:not(.zz) > .wk-sub-head { padding-left: var(--s-2); }
.wk-lane-body .wk-group-chev, .wk-lane-body .wk-card-head .wk-card-fold { margin-left: var(--s-nudge); margin-right: calc(var(--s-1) - var(--s-px)); }
.wk-lane-body .wk-card-head .wk-rename-btn { right: calc(var(--s-1h) + var(--fold-w) + var(--s-px)); }
.wk-lane-body .wk-sub-head > .wk-group-n.wk-group-n { margin-right: 0; }
/* Narrow, the row gives way, never the margin: Open Full Page says Open, and the size chip shortens. */
.wk-lane-body .wk-card { container-type: inline-size; }
.wk-lane-body .wk-card .wk-card-body { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.wk-lane-body .wk-row1 { min-width: 0; }
.wk-lane-body .wk-row1 .wk-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-lane-body .wk-set { min-width: 0; margin: 0 var(--card-x) var(--s-1); color: var(--ink); font: 600 13px/1.35 var(--font-body); }
.wk-slots { flex: 1 1 0; display: flex; gap: var(--s-nudge); min-width: 0; }
.wk-slots i { flex: 1 1 0; min-width: 0; height: var(--s-nudge); border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 16%, transparent); }
.wk-slots i.is-on { background: var(--ink); }
/* The end of a campaign has the room its top has. */
.wk-lane-body .wk-group:not(.is-shut) { padding-bottom: var(--s-1); }
.wk-card-media { padding-top: var(--s-half); }

/* EVERY COLLAPSE ICON THE SAME, NO BOX (Franz, 2026-11-06). */
.wk-lane .wk-fold, .wk-lane-body .wk-group-chev, .wk-lane-body .wk-card-fold, .wk-lane-body .wk-group-head:hover .wk-group-chev, .wk-lane-body .wk-sub-head:hover .wk-group-chev, .wk-lane-body .wk-card-fold:hover, .wk-lane .wk-fold:hover { width: var(--fold-w); height: var(--fold-w); border: 0; background: none; box-shadow: none; }
.wk-lane .wk-fold, .wk-lane-body .wk-group-chev, .wk-lane-body .wk-card-fold { color: var(--ink); }
:is(.wk-lane .wk-fold, .wk-lane-body .wk-group-chev, .wk-lane-body .wk-card-fold) svg :is(path, polyline, line) { stroke-width: 2.6; }
.wk-lane .wk-fold:hover, .wk-lane-body .wk-group-head:hover .wk-group-chev, .wk-lane-body .wk-sub-head:hover .wk-group-chev, .wk-lane-body .wk-card-fold:hover { color: var(--ink); }

/* NOTHING SHOWS THROUGH THE PINNED HEADS: each sits on a square of the group's own colour with its rounded strip on top, and
   the 4px gaps above and below stay filled while the work slides under (Franz, 2026-11-06). */
.wk-lane-body .wk-group { background: var(--wk-stack); }
.wk-lane-body .wk-group .wk-group-head, .wk-lane-body .wk-sub.wk-sub:not(.zz) > .wk-sub-head { border-radius: 0; background: var(--wk-stack); box-shadow: 0 var(--s-half) 0 var(--wk-stack), 0 calc(var(--s-half) * -1) 0 var(--wk-stack); }
.wk-lane-body .wk-group .wk-group-head:hover, .wk-lane-body .wk-sub.wk-sub:not(.zz) > .wk-sub-head:hover { background: var(--wk-stack); }
.wk-lane-body .wk-sub-head { top: calc(var(--s-6) + var(--s-half)); }
.wk-lane-body .wk-sub > .wk-sub-head::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-md); background: var(--line-open); }
.wk-lane-body .wk-group > .wk-group-head::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-md); transition: background .12s; }
.wk-lane-body .wk-group > .wk-group-head:hover::before { background: color-mix(in srgb, var(--ink) 5%, var(--wk-stack)); }

/* EVERY COLUMN RUNS TO THE PAGE'S END, AND THE PAGE ITSELF NEVER MOVES SIDEWAYS. */
html:has(.wk-board), body:has(.wk-board) { overflow-x: clip; }
/* A taller column never stretches what is in it: groups and lines keep their own height and stack from the top. */
.wk-lane-body, .wk-lane-body .wk-group, .wk-lane-body .wk-group-cards, .wk-lane-body .wk-sub-cards { align-content: start; }
.wk-lane { align-content: start; }
.wk-lane .wk-fold { display: grid; place-items: center; align-self: center; margin-right: var(--s-2); padding: 0; }
@media (min-width: 640px) {
  .wk-lane { height: calc(100dvh - var(--wk-board-top, calc(var(--header-h) + var(--wk-bar-h, 0px) + var(--wk-sum-h, 0px) + var(--s-5))) - var(--pad-page-end)); }
}

/* THE BRIEF VIEW'S STATUS: A SHADE OF THE ROW'S TYPE, THE SAME STEPS AS A COLUMN. */
.dt.tk-briefs .tk-spill { --t: var(--ty-statics); }
.dt.tk-briefs .tk-spill.is-ty-video { --t: var(--ty-video); }
.dt.tk-briefs .tk-spill.is-ty-forms { --t: var(--ty-forms); }
.dt.tk-briefs .tk-spill.is-ty-landing { --t: var(--ty-landing); }
.dt.tk-briefs .tk-spill.tk-spill.is-doing { border-color: transparent; background: color-mix(in srgb, var(--t) 26%, var(--card)); color: var(--ink); }
.dt.tk-briefs .tk-spill.tk-spill.is-review { border-color: transparent; background: color-mix(in srgb, var(--t) 48%, var(--card)); color: var(--ink); }
.dt.tk-briefs .tk-spill.tk-spill.is-changes { border-color: transparent; background: color-mix(in srgb, var(--t) 72%, var(--card)); color: var(--on, #0B0D0C); }
.dt.tk-briefs .tk-spill.tk-spill.is-done { border-color: transparent; background: var(--t); color: var(--on, #0B0D0C); }
.dt.tk-briefs .tk-spill.is-live:is(.is-doing, .is-review, .is-changes, .is-done):hover { filter: brightness(1.06); }
.dt.tk-briefs .fm-mini-go { background: var(--ty-forms); }

/* PILLS, A SIZE DOWN AND THE SAME HEIGHT ACROSS A ROW; NORMAL CASE. */
.dt.tk-briefs .tk-cellpill, .dt.tk-briefs .tk-pick.tk-cellpick.is-pill, .dt.tk-briefs .tk-spill.tk-spill { height: var(--h-sm); padding-inline: var(--s-1); gap: var(--s-half); font-size: 12.5px; letter-spacing: 0; }
.wk-pick { height: 1.85em; padding: 0 .35em; gap: .2em; }
.wk-cell { min-height: 2.5em; }

/* THE TABLE FILLS THE PAGE: its rows, then one empty row that carries the column lines down to the foot; the sideways bar lies over their ends, see-through, so nothing stops them short. */
@media (min-width: 640px) {
  .dt.tk-briefs > .dt-scroll { display: flex; flex-direction: column; scrollbar-width: none; }
  .dt.tk-briefs .dt-inner, .dt.tk-briefs .dt-body { display: flex; flex: 1 0 auto; flex-direction: column; }
}
.dt.tk-briefs .dt-row:last-child { border-bottom: var(--s-px) solid var(--rule-faint); }
.dt-hbar { position: relative; z-index: var(--z-sticky); box-sizing: border-box; height: var(--s-1h); margin-top: calc(var(--s-1h) * -1); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; background: none; }
.dt-hbar[hidden] { display: none; }
.dt-hbar-in { height: var(--s-px); }

/* The column's plus stands where its fold was, on the chevrons' line. */
.wk-lane-acts .wk-add { margin-right: calc(var(--s-2) + (var(--fold-w) - var(--h-sm)) / 2); }

/* THE WORK TAB'S SPACING (Franz, 2026-11-06), every item half a step further apart. --wk-gap is that step. */
.wk-lane { --wk-gap: calc(var(--s-half) + var(--s-nudge)); }
.wk-lane-body .wk-sub-head, [data-screen="client"] .wk-lane-body .wk-group .tk-card.wk-card { margin-top: var(--wk-gap); }
.wk-lane-body .wk-group .wk-group-head, .wk-lane-body .wk-sub.wk-sub:not(.zz) > .wk-sub-head { box-shadow: 0 var(--wk-gap) 0 var(--wk-stack), 0 calc(var(--wk-gap) * -1) 0 var(--wk-stack); }
.wk-lane-body .wk-sub-head { top: calc(var(--s-6) + var(--wk-gap)); }
/* A campaign's end has the air its top has, and its frame reads a touch clearer. */
.wk-lane-body .wk-group { border-color: color-mix(in srgb, var(--rule) 90%, var(--ink)); }
.wk-lane-body .wk-group:not(.is-shut) { padding-bottom: calc(var(--s-1h) + var(--s-nudge)); }
/* The bar sits under the name by the same step as everything else in a piece. */
.wk-lane-body .wk-card .wk-card-head { min-height: 0; margin-block: 0; padding-block: calc(var(--s-1) + var(--s-nudge)) var(--wk-gap); }
.wk-lane-body .wk-card-head .wk-rename-btn { top: calc(50% + var(--s-nudge)); }
.wk-card-media { padding-top: 0; }
/* Pills: a hair less room left and right, each in step with its size. */
.wk-lane-body .wk-group-head .wk-group-stage, .wk-group-kind, .wk-head-kind, .wk-card .wk-row1 .wb-stage, .wk-lane-body .wk-card .wk-row1 .wk-chip, .wk-open { padding-inline: var(--wk-gap, calc(var(--s-half) + var(--s-nudge))); }
.wk-pick { padding-inline: .6em; }
.wk-lane .wk-lane-name { padding-inline: calc(var(--s-1) + var(--s-nudge)); }

/* EVERY FOLD ON THE BOARD WEARS THE PENCIL'S HOVER (app.css), the pencil beside it the same square. A line's pastel strip takes it
   in the strip's own dark, its chevron turning the pastel. */
.wk-lane-body .wk-group-head:hover .wk-group-chev.wk-group-chev, .wk-lane-body .wk-sub-head:hover .wk-group-chev.wk-group-chev, .wk-lane-body .wk-card-fold.wk-card-fold:hover, .wk-card-head .wk-rename-btn.wk-rename-btn:hover { background: var(--fold-tile); color: var(--ink); }
.wk-lane-body .wk-sub-head:hover .wk-group-chev.wk-group-chev { background: color-mix(in srgb, #1B1F1D 14%, transparent); color: #1B1F1D; }

/* A COLUMN'S HEAD IS ONE ROW (Franz, 2026-11-06): its name, its count, the search, and the plus, on a light line right across
   the column. The search takes the room that is left; where there is none it is a small round button, and it opens out
   when it is used, the name giving way only then. */
.wk-lane-head { min-width: 0; margin-inline: calc(var(--s-1h) * -1); padding: 0 var(--s-1h) var(--s-1h); border-bottom: var(--s-px) solid var(--rule); }
.wk-lane-name { flex: none; white-space: nowrap; }
.wk-lane-n { flex: none; }
.wk-lane-head .wk-search { flex: 1 1 0; min-width: var(--h-md); margin-left: var(--s-half); padding: 0 var(--s-1); gap: var(--s-half); overflow: hidden; transition: min-width .15s ease, border-color .15s; }
.wk-lane-head .wk-search svg { margin-inline: var(--s-half); }
/* A label carries a margin of its own, which set the search off its row. Too narrow for the word, it is just the glass. */
.wk-lane-head .wk-search { margin-block: 0; container-type: inline-size; }
@container (max-width: 92px) { .wk-lane-head .wk-search-in::placeholder { color: transparent; } }
.wk-lane-head .wk-search:is(:focus-within, :has(.wk-search-in:not(:placeholder-shown))) { min-width: min(148px, 60%); }
.wk-lane-head:has(.wk-search:focus-within, .wk-search-in:not(:placeholder-shown)) .wk-lane-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wk-lane-acts { flex: none; margin-left: 0; }
.wk-lane-head:not(:has(.wk-search)) .wk-lane-acts { margin-left: auto; }

/* THE TAGS ARE GREY, DAY AND NIGHT (Franz, 2026-11-06): Campaign and Line of Business say what a heading is, so they stand back
   from the type's colour, with the strongest words the grey will carry. A line's name goes bolder. */
.wk-lane { --tag: #3A3F3C; --tag-ink: #EDEFEA; --tag-edge: #6B726D; }
:root[data-theme="light"] .wk-lane { --tag: #D4D7D1; --tag-ink: #1B1F1D; --tag-edge: #979C95; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .wk-lane { --tag: #D4D7D1; --tag-ink: #1B1F1D; --tag-edge: #979C95; } }
.wk-lane-body .wk-group-head .wk-group-kind.wk-group-kind, .wk-lane-body .wk-sub-head .wk-head-kind.wk-head-kind { box-sizing: border-box; border: var(--s-px) solid var(--tag-edge); background: var(--tag); color: var(--tag-ink); font-weight: 600; }
.wk-lane-body .wk-sub > .wk-sub-head .wk-sub-t { font-weight: 800; }

/* A SELECTED ROW IS LIT RIGHT ACROSS, the pinned cells at both ends too, hovered or not (Franz, 2026-11-06). */
.dt.tk-briefs.dt.tk-briefs .dt-row.is-selected :is(.dt-util, .dt-select, .dt-num, [data-col="title"]) { background: color-mix(in srgb, var(--accent) 9%, var(--card)); }

/* The counts read a step bolder than the words beside them. */
.wk-lane-body .wk-group .wk-group-n.wk-group-n { font-weight: 800; }
.wk-lane-n { font-weight: 700; }

/* A piece's pieces, one step apart from the name down: its media, how many are through, its facts, then the bar, the last thing
   on it open or shut, with Upload Video just above the bar. */
.wk-lane-body .wk-card:not(.is-shut) .wk-card-body { padding-bottom: var(--s-1h); }
.wk-lane-body .wk-card .wk-facts-box { margin-bottom: var(--s-1); }
.wk-lane-body .wk-card .wk-card-body > .wk-row1 { order: 2; }
/* One form's preview runs the card's margins, as every other piece's media does. */
.wk-lane-body .wk-card .fm-minis.n-1 .fm-mini { max-width: none; }

/* THE DOUBLE EDGE, THE ALL PILL'S MAKE, ON EVERY PILL THAT SAYS WHERE A PIECE STANDS (Franz, 2026-11-07): a ring, a clear gap, and the fill
   inside. The gap is truly empty, so it shows whatever the pill sits on: a card, a row, a hovered or selected row. A filled pill's
   fill changes by stage and column, so its ring is a mask over its own background and can never disagree with it. */
:root:root:root :is(.wb-stage, .tk-stage, .wk-pick.wbt-st, .tk-status, .wg-stage, .tk-spill, .bk-stage, .bk-lens-stage, .sc-stage):is(.is-internal_review, .is-in_review, .is-client_review, .is-changes_requested, .is-approved, .is-delivered, .is-sent, .is-doing, .is-review, .is-changes, .is-done), :root:root:root .tk-cellpill:is(.is-video, .is-statics, .is-forms, .is-landing) { position: relative; border: calc(var(--s-nudge) + var(--s-px)) solid transparent; background-clip: padding-box; padding-inline: calc(var(--s-half) + var(--s-nudge)); }
:root:root:root :is(.wb-stage, .tk-stage, .wk-pick.wbt-st, .tk-status, .wg-stage, .tk-spill, .bk-stage, .bk-lens-stage, .sc-stage):is(.is-internal_review, .is-in_review, .is-client_review, .is-changes_requested, .is-approved, .is-delivered, .is-sent, .is-doing, .is-review, .is-changes, .is-done)::after, :root:root:root .tk-cellpill:is(.is-video, .is-statics, .is-forms, .is-landing)::after { content: ''; position: absolute; inset: calc((var(--s-nudge) + var(--s-px)) * -1); padding: var(--s-px); border-radius: inherit; background: inherit; background-clip: border-box; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
/* An outlined stage, and the plain pills beside it, are two fine lines of their own colour. */
:root:root:root :is(.wb-stage, .wk-pick.wbt-st, .tk-spill, .bk-stage, .sc-stage):not(:is(.is-internal_review, .is-in_review, .is-client_review, .is-changes_requested, .is-approved, .is-delivered, .is-sent, .is-doing, .is-review, .is-changes, .is-done)), :root:root .wk-open { border-style: double; border-width: var(--s-half); background-clip: padding-box; padding-inline: var(--s-1); }
:root:root .wk-lane-body .wk-card .wk-row1 .wk-open { padding-inline: calc(var(--s-half) + var(--s-nudge)); }
/* The size pill stays plain (Franz, 2026-11-07), and a long one ends in an ellipsis. */
.wk-lane-body .wk-card .wk-row1 .wk-chip { display: block; line-height: calc(var(--h-sm) - var(--s-nudge)); }
/* In Brief View the pills get more room each side. */
:root:root:root:root .dt.tk-briefs .tk-cellpill.tk-cellpill { overflow: visible; }
:root:root:root .dt.tk-briefs :is(.tk-cellpill, .tk-spill):is(.is-video, .is-statics, .is-forms, .is-landing, .is-doing, .is-review, .is-changes, .is-done) { padding-inline: var(--s-1h); }

/* A COLUMN'S LABEL IS MADE LIKE THE ALL PILL (Franz, 2026-11-06): a ring, a small gap, and the fill inside, in the column's own colour,
   By Type and By Status alike. */
.wk-lane .wk-lane-head .wk-lane-name { box-sizing: border-box; height: var(--h-md); padding: 0 var(--s-1h); border: var(--s-px) solid var(--t); background: var(--t); box-shadow: inset 0 0 0 var(--s-nudge) color-mix(in srgb, var(--card) 55%, var(--paper)); color: var(--on, #0B0D0C); font: 700 15px/calc(var(--h-md) - var(--s-nudge)) var(--font-body); }

/* A BRIEF NOBODY HAS (Franz, 2026-11-07: "alert mode entirely"): the whole card filled in its column's colour, dark words,
   edge pulsing until someone picks it up. Colour only from the four, never red. By Status it borrows yellow from New's grey. */
.wk-lane.is-s-draft .wk-alert { --t: var(--ty-statics); }
.wk-card.wk-alert { --t-on: #14170F; display: grid; gap: var(--s-1); margin-bottom: var(--s-1); padding: var(--s-1h); border: 0; background: var(--t, var(--ty-statics)); color: var(--t-on); cursor: pointer; animation: wk-alert 1.8s ease-in-out infinite; }
.wk-alert-t { margin: 0; font: 800 15px/1.3 var(--font-display); color: inherit; }
.wk-alert-said { margin: 0; font: 600 13px/1.4 var(--font-body); color: inherit; }
.wk-alert-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); }
.wk-alert-who { font: 700 13px/1.3 var(--font-body); color: inherit; }
.wk-alert-take.btn { flex: none; background: var(--t-on); border-color: var(--t-on); color: #fff; }
.wk-alert-take.btn:hover { background: #000; border-color: #000; }
@keyframes wk-alert { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t, var(--ty-statics)) 70%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--t, var(--ty-statics)) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .wk-card.wk-alert { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--t, var(--ty-statics)) 45%, transparent); } }
/* The same alert in the stack: the whole row, pinned cells too, in its type's colour, until someone picks it up. */
.dt.tk-briefs .dt-row:has(.tk-wait) { --t: var(--ty-statics); --t-on: #14170F; }
.dt.tk-briefs .dt-row:has(.tk-wait.is-ty-video) { --t: var(--ty-video); }
.dt.tk-briefs .dt-row:has(.tk-wait.is-ty-forms) { --t: var(--ty-forms); }
.dt.tk-briefs .dt-row:has(.tk-wait.is-ty-landing) { --t: var(--ty-landing); }
.dt.tk-briefs .dt-row:has(.tk-wait), .dt.tk-briefs .dt-row:has(.tk-wait) > *, .dt.tk-briefs .dt-row:has(.tk-wait):hover > * { background: var(--t); color: var(--t-on); }
.dt.tk-briefs .dt-row:has(.tk-wait) .dt-cell-in :not(.btn) { color: inherit; }
.dt.tk-briefs .tk-wait.btn { background: var(--t-on); border-color: var(--t-on); color: #fff; }
.dt.tk-briefs .wl-item:has(> .tk-wait) { display: flex; align-items: center; gap: var(--s-1); width: 100%; }
.dt.tk-briefs .wl-item > .tk-wait { flex: none; margin-left: auto; }
.dt.tk-briefs .wl-item:has(> .tk-wait) .wl-words { flex: 1; min-width: 0; }

/* THE ADEQ SCORE (Franz, 2026-11-08): a plain pill, EQ in the brand green and the number in bold, a dash before anything is scored. */
.wk-lane-body .wk-card .wk-row1 .wk-score { flex: none; }
.wk-score b { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.wk-score.is-none b { color: var(--mute); font-weight: 600; }
.wk-lane-body .wk-card .wk-row1 .wk-score { display: inline-flex; align-items: center; gap: var(--s-half); }
.wk-score-k { color: var(--accent); font-weight: 800; }
.score-chip { display: inline-flex; align-items: center; justify-content: center; min-width: var(--s-5); height: var(--h-sm); padding: 0 var(--s-1); border: var(--s-px) solid var(--rule); border-radius: var(--r-pill); color: var(--ink); font: 800 13px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.score-chip.is-none { border-style: dashed; color: var(--mute); font-weight: 600; }