/* AdEQ — the Tasks tab: the board, the list and the panel on the right.
 *
 * Every rule sits under [data-screen="client"] — the Tasks tab is part of the
 * client page — and every class starts `tk-`, so nothing here can reach the
 * Work tab's table or the Create form however broad a selector gets. The panel
 * is appended to <body>, which is still under <html data-screen>, so the same
 * wall holds for it.
 *
 * AND THE BULK STATICS PAGE (2026-10-03), which opens one static in the same
 * panel on the right and reads its notes with the same sections — so the wall
 * is two screens wide, `:is(client, bulk)`, and still not one wider.
 *
 * The sizes are the four SPEC-UI-V1 allows: 23 for the task's name, 16 for a
 * section, 13 for labels and meta, 14 for everything read. Colours are the
 * tokens; the status dots use the muted client tints, never a second accent.
 */

:is([data-screen="client"], [data-screen="bulk"]) .tk-page .muted,
:is([data-screen="client"], [data-screen="bulk"]) .tk-panel .muted { color: var(--mute); }

/* ── the bar ──────────────────────────────────────────────────────────────── */

:is([data-screen="client"], [data-screen="bulk"]) .tk-toolbar .tk-new,
:is([data-screen="client"], [data-screen="bulk"]) .tk-page .dt-toolbar .tk-new {
  height: var(--h-md); padding: 0 var(--s-2); display: inline-flex; align-items: center;
  font-size: 13px;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-page .dt-toolbar .seg-group { height: var(--h-md); }

/* ── nothing yet ──────────────────────────────────────────────────────────── */

:is([data-screen="client"], [data-screen="bulk"]) .tk-empty {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-4); text-align: center; margin-top: var(--s-1);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-half);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-empty-h { margin: 0; font: 600 16px/1.3 var(--font-display); color: var(--ink); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-empty .hint { max-width: 56ch; margin: var(--s-half) 0 var(--s-2); }

/* ── the board ────────────────────────────────────────────────────────────── */

/* FOUR COLUMNS THAT SHARE THE WIDTH, and a row of them that scrolls sideways
   only when the window is too narrow for four. The columns themselves never
   scroll: a scroll box inside the page is what made cards below the fold
   unreachable twice (see the Work tab), so a long column simply makes the
   page longer. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-board {
  display: grid; gap: var(--s-1h); align-items: start;
  grid-template-columns: repeat(4, minmax(232px, 1fr));
  overflow-x: auto; padding-bottom: var(--s-3);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-col {
  background: color-mix(in srgb, var(--card) 55%, var(--paper));
  border: 1px solid var(--rule-faint); border-radius: var(--r-lg);
  padding: var(--s-1) var(--s-1) var(--s-1h); min-height: 180px;
  display: flex; flex-direction: column;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-head {
  display: flex; align-items: center; gap: var(--s-1);
  padding: var(--s-nudge) var(--s-half) var(--s-1);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-name { font: 600 13px/1.2 var(--font-display); color: var(--ink); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-count {
  font: 500 13px/1 var(--font-display); color: var(--mute); font-variant-numeric: tabular-nums;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-head::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--mute);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-col.is-doing .tk-col-head::before { background: var(--c-sea); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-col.is-review .tk-col-head::before { background: var(--c-sand); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-col.is-done .tk-col-head::before { background: var(--accent); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-add {
  margin-left: auto; width: 26px; height: 26px; border-radius: var(--r-sm);
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--mute);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-add:hover { color: var(--ink); border-color: var(--rule); background: var(--card); }

:is([data-screen="client"], [data-screen="bulk"]) .tk-col-body {
  display: flex; flex-direction: column; gap: var(--s-1); flex: 1 1 auto;
  min-height: 60px; border-radius: var(--r-md);
  transition: background .12s ease;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-body.is-drop { background: color-mix(in srgb, var(--accent) 7%, transparent); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-empty {
  margin: 0; padding: var(--s-2) 0; text-align: center; font-size: 13px; color: var(--mute);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-drop-mark {
  height: 2px; border-radius: 2px; background: var(--accent); margin: -5px var(--s-nudge);
}

/* A CARD SAYS FOUR THINGS AND NO MORE: what it is, how far along, who has it
   and when it is due. Everything else is one click away on the right. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-1h) var(--s-1h) var(--s-1); cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: var(--s-1);
  transition: border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-card:hover { border-color: var(--ink-soft); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card:focus-visible { outline: none; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card.is-open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card.is-dragging { opacity: .35; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card[draggable="true"] { cursor: grab; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card[draggable="true"]:active { cursor: grabbing; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-title {
  margin: 0; font: 600 14px/1.4 var(--font-body); color: var(--ink);
  overflow-wrap: anywhere;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-card.is-done .tk-card-title { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--mute); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-prog { display: flex; align-items: center; gap: var(--s-1); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-n {
  font: 500 13px/1 var(--font-display); color: var(--mute); font-variant-numeric: tabular-nums; flex: none;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-asks {
  list-style: none; margin: -2px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-nudge);
  font-size: 13px; line-height: 1.4; color: var(--ink-soft);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-asks li { display: flex; gap: var(--s-1); min-width: 0; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-asks li > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-asks-n {
  flex: none; min-width: 30px; font: 500 13px/1.4 var(--font-display); color: var(--mute); font-variant-numeric: tabular-nums;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-asks li.is-done { color: var(--mute); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-asks li.is-done .tk-card-asks-n { color: var(--accent); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-chips { display: flex; flex-wrap: wrap; gap: var(--s-half); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-chips .tag { margin: 0; font-size: 12px; background: var(--shade); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-foot {
  display: flex; align-items: center; gap: var(--s-1); padding-top: var(--s-nudge); min-width: 0;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-who {
  font-size: 13px; color: var(--ink-soft); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The quick-add field at the top of a column. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-quick .textarea {
  width: 100%; background: var(--card); border-color: var(--ink-soft);
  font: 600 14px/1.4 var(--font-body); padding: var(--s-1) var(--s-1h);
}

/* ── shared bits: the bar, the flag, the date, the person ─────────────────── */

:is([data-screen="client"], [data-screen="bulk"]) .tk-bar {
  flex: 1 1 auto; height: 4px; border-radius: 4px; overflow: hidden;
  background: var(--rule); min-width: 40px;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-bar-in { display: block; height: 100%; border-radius: 4px; background: var(--ink-soft); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-bar.is-full .tk-bar-in { background: var(--accent); }

:is([data-screen="client"], [data-screen="bulk"]) .tk-flag {
  display: inline-flex; align-items: center; font-size: 12px; line-height: 1.5;
  padding: 1px var(--s-1); border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-soft);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-flag.is-high { border-color: var(--alarm); color: var(--alarm); }

:is([data-screen="client"], [data-screen="bulk"]) .tk-due {
  margin-left: auto; flex: none; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-due.is-soon { color: var(--ink); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-due.is-late { color: var(--alarm); }
:is([data-screen="client"], [data-screen="bulk"]) .dt-cell .tk-due { margin-left: 0; }

:is([data-screen="client"], [data-screen="bulk"]) .tk-mark.is-sm { width: 22px; height: 22px; font-size: 9px; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-mark.is-empty {
  background: none; border-style: solid; color: var(--mute);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-person { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-person > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

:is([data-screen="client"], [data-screen="bulk"]) .tk-status {
  display: inline-flex; align-items: center; gap: var(--s-1); font-size: 13px; color: var(--ink-soft);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-status::before,
:is([data-screen="client"], [data-screen="bulk"]) .tk-dot {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--mute); display: inline-block;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-status.is-doing::before, :is([data-screen="client"], [data-screen="bulk"]) .tk-dot.is-doing { background: var(--c-sea); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-status.is-review::before, :is([data-screen="client"], [data-screen="bulk"]) .tk-dot.is-review { background: var(--c-sand); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-status.is-done::before, :is([data-screen="client"], [data-screen="bulk"]) .tk-dot.is-done { background: var(--accent); }

/* The list's cells. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-row-title { font-weight: 600; color: var(--ink); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-row-title.is-open { color: var(--accent); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-prog-cell { display: flex; align-items: center; gap: var(--s-1); width: 100%; }

/* ── the panel ────────────────────────────────────────────────────────────── */

/* IT COMES IN FROM THE RIGHT AND LEAVES THE PAGE WHERE IT WAS. Under the
   app header (z 10) and above the page's sticky bars (z 9), so the board's
   toolbar slides under it rather than through it. It is the one scroll box
   here, and it has to be: it is taller than the window by design, and the
   page behind it keeps its own place. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-panel {
  position: fixed; top: var(--header-h); right: 0; bottom: 0; z-index: 9;
  /* UP TO 40% OF THE PAGE, NO SHADOW (Franz, 2026-11-02: "remove the shadow
     mate behind and let it get a bit wider upto 40% of the page"): 40% on a
     wide screen, never narrower than it was (two columns, 640), and the whole
     width on a phone. */
  width: min(100vw, max(calc(var(--w-col) * 2), 40vw));
  background: var(--paper); border-left: var(--s-px) solid var(--rule);
  box-shadow: none;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(28px); opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-panel.is-in { transform: none; opacity: 1; }
/* ON A CLIENT PAGE IT OPENS UNDER THE PINNED NAME AND TABS (2026-11-03): at
   the app bar it sat behind them, and its title, status, Pause, and close
   were hidden. */
[data-screen="client"] .tk-panel { top: calc(var(--app-h) + var(--client-top-h, 0px)); }
@media (prefers-reduced-motion: reduce) {
  :is([data-screen="client"], [data-screen="bulk"]) .tk-panel { transition: none; }
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-panel-load { padding: var(--s-5) var(--s-4); }

:is([data-screen="client"], [data-screen="bulk"]) .tk-panel-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3); background: var(--paper);
  border-bottom: 1px solid var(--rule-faint);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-pick { border: 1px solid var(--rule); border-radius: 999px; margin-left: 0; height: var(--h-md); padding: 0 var(--s-1h); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-edit { height: var(--h-md); padding: 0 var(--s-2); font-size: 13px; margin-right: var(--s-half); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-icon-btn {
  width: var(--h-md); height: var(--h-md); border-radius: var(--r-sm); flex: none; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--ink-soft);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-icon-btn:hover { background: var(--shade); color: var(--ink); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-icon-btn.is-quiet { width: 24px; height: 24px; color: var(--mute); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-icon-btn.is-quiet:hover { color: var(--alarm); background: none; }

:is([data-screen="client"], [data-screen="bulk"]) .tk-panel-in { padding: var(--s-2) var(--s-3) var(--s-8); }

/* THE TITLE AND THE FACTS, read first. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-read-title {
  margin: var(--s-half) 0 var(--s-2); font: var(--t-title); letter-spacing: var(--tr-title); color: var(--ink);
  overflow-wrap: anywhere;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-facts {
  display: grid; grid-template-columns: 132px 1fr; gap: var(--s-nudge) 0; margin: 0 0 var(--s-3);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-facts dt {
  font-size: 13px; color: var(--mute); min-height: 32px; display: flex; align-items: center;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-facts dd {
  margin: 0; min-height: 32px; display: flex; align-items: center; min-width: 0; font-size: 14px; color: var(--ink);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-pick {
  display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%;
  padding: var(--s-half) var(--s-1); margin-left: -9px; border-radius: var(--r-sm);
  background: none; border: 1px solid transparent; cursor: pointer;
  font: 400 14px/1.3 var(--font-body); color: var(--ink); text-align: left;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-pick:hover:not(:disabled) { background: var(--shade); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-pick:disabled { cursor: default; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-pick.is-muted { color: var(--mute); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-due-read.is-late { color: var(--alarm); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-tags-read { display: flex; flex-wrap: wrap; gap: var(--s-half); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-tags-read .tag { margin: 0; background: var(--shade); }

/* ── the panel's sections ─────────────────────────────────────────────────── */

:is([data-screen="client"], [data-screen="bulk"]) .tk-sec {
  border-top: 1px solid var(--rule-faint); padding: var(--s-2) 0 var(--s-3);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-sec-head {
  display: flex; align-items: center; gap: var(--s-1h); margin: 0 0 var(--s-1h);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-sec-h { margin: 0; font: 600 16px/1.3 var(--font-display); color: var(--ink); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-sec-meta {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-sec-meta .tk-bar { width: 90px; flex: none; }
:is([data-screen="client"], [data-screen="bulk"]) details.tk-sec > summary { list-style: none; cursor: pointer; }
:is([data-screen="client"], [data-screen="bulk"]) details.tk-sec > summary::-webkit-details-marker { display: none; }
:is([data-screen="client"], [data-screen="bulk"]) details.tk-sec > summary::after { margin-left: var(--s-half); }
:is([data-screen="client"], [data-screen="bulk"]) details.tk-sec:not([open]) > summary::after { transform: none; }
:is([data-screen="client"], [data-screen="bulk"]) details.tk-sec[open] > summary::after { transform: rotate(180deg); }
:is([data-screen="client"], [data-screen="bulk"]) details.tk-sec:not([open]) > summary { margin-bottom: 0; }

/* TO MAKE, ONE SLOT AT A TIME (2026-10-02). Each item is a small card: its
   name and count on top, then one numbered line per thing to make, each with
   its own circle and its own picker. A filled slot reads as the work's name;
   an open one reads as the picker, so what is left is what still has a
   chevron. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-check { display: flex; flex-direction: column; gap: var(--s-1); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-item {
  border: 1px solid var(--rule-faint); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--card) 55%, var(--paper));
  padding: var(--s-1) var(--s-1h) var(--s-1);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-item.is-done { border-color: color-mix(in srgb, var(--accent) 35%, var(--rule-faint)); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-item-head { display: flex; align-items: center; gap: var(--s-1); min-height: var(--h-md); padding-bottom: var(--s-half); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-item-what { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-item-name { font: 600 14px/1.35 var(--font-body); color: var(--ink); overflow-wrap: anywhere; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-item-sub { font-size: 13px; color: var(--mute); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-item-n { font: 500 13px/1 var(--font-display); color: var(--mute); font-variant-numeric: tabular-nums; flex: none; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-item.is-done .tk-item-n { color: var(--accent); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-item-head .chip { font-size: 13px; padding: var(--s-half) var(--s-1h); flex: none; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-item-head .chip.is-go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slots { list-style: none; margin: 0; padding: 0; }
/* SIX COLUMNS WITH FIXED INSETS (2026-10-03): tick, slot, type, name, stage,
   verb. The name is the only column that gives; everything else keeps its
   width so the type chips and the stage tags line up down the item. The
   labels row above uses the same template, so a label sits over its column. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot,
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-cols {
  /* MORE AIR BETWEEN THE COLUMNS (2026-10-03): 18px gutters and a little
     more room for the slot and the stage, so the name column is the only
     thing that gives and the four never crowd each other. */
  display: grid; grid-template-columns: 20px 104px 66px minmax(0, 1fr) 100px 24px; align-items: center; column-gap: var(--s-2);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot { min-height: 38px; border-top: 1px solid var(--rule-faint); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-cols {
  padding: var(--s-nudge) 0 var(--s-1); font: 600 11px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--mute);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot .tk-span { grid-column: 3 / 6; min-width: 0; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot .tk-work-kind { justify-self: start; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot .tk-work-name { min-width: 0; justify-self: stretch; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot > .tk-icon-btn { justify-self: end; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-stage {
  justify-self: start; font: 500 12px/1 var(--font-body); color: var(--ink-soft);
  border: 1px solid var(--rule-faint); border-radius: 999px; padding: var(--s-half) var(--s-1); white-space: nowrap;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-stage.is-approved,
:is([data-screen="client"], [data-screen="bulk"]) .tk-stage.is-sent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--rule-faint)); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-stage.is-draft { color: var(--mute); }
@media (max-width: 620px) {
  :is([data-screen="client"], [data-screen="bulk"]) .tk-slot,
  :is([data-screen="client"], [data-screen="bulk"]) .tk-slot-cols { grid-template-columns: 20px 74px 0 minmax(0, 1fr) 76px 24px; column-gap: var(--s-1); }
  :is([data-screen="client"], [data-screen="bulk"]) .tk-slot .tk-work-kind,
  :is([data-screen="client"], [data-screen="bulk"]) .tk-slot-cols > :nth-child(3) { visibility: hidden; overflow: hidden; }
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-name {
  display: flex; flex-direction: column; font-size: 13px; color: var(--ink-soft); line-height: 1.25;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot.is-filled .tk-slot-name { color: var(--mute); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-opt { font-size: 12px; color: var(--mute); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-said { font-size: 13px; color: var(--ink-soft); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-pick {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%;
  height: 28px; padding: 0 var(--s-1); border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: none; color: var(--ink-soft); font: 500 13px/1 var(--font-body); cursor: pointer;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-pick:hover { border-style: solid; border-color: var(--accent); color: var(--ink); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-add-item {
  margin-top: var(--s-1); display: inline-flex; align-items: center; gap: var(--s-1);
  height: var(--h-md); padding: 0 var(--s-1h); border: 1px solid var(--rule); border-radius: 999px;
  background: none; color: var(--ink-soft); font: 500 13px/1 var(--font-body); cursor: pointer;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-add-item:hover { color: var(--ink); border-color: var(--accent); }
/* The item editor and the add-item box, in a popover. */
.dt-pop .tk-ed-row { display: flex; align-items: center; gap: var(--s-1); margin: var(--s-1) 0 var(--s-1); }
.dt-pop .tkf-place, .dt-pop .tk-ed-row + .input, .dt-pop > .input { width: 100%; margin-bottom: var(--s-1); }
.dt-pop .tk-ed-foot { display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-half); }
.dt-pop .tk-ed-remove:hover { color: var(--alarm); }
.dt-pop .tk-link-h { margin: var(--s-1) 0 var(--s-half); font: 600 12px/1.2 var(--font-body); color: var(--mute); }

:is([data-screen="client"], [data-screen="bulk"]) .tk-tick {
  width: 20px; height: 20px; border-radius: 50%; flex: none; padding: 0;
  border: 1.5px solid var(--rule); background: none; color: var(--accent-ink);
  display: grid; place-items: center;
}
:is([data-screen="client"], [data-screen="bulk"]) button.tk-tick { cursor: pointer; }
:is([data-screen="client"], [data-screen="bulk"]) button.tk-tick:hover { border-color: var(--accent); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-tick.is-on { background: var(--accent); border-color: var(--accent); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-work { display: flex; align-items: center; gap: var(--s-1); min-height: 28px; font-size: 13px; min-width: 0; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-work-kind {
  flex: none; font: 500 12px/1 var(--font-body); color: var(--mute);
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: var(--s-half) var(--s-1);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-work-name {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left; min-width: 0;
  font: 500 14px/1.3 var(--font-body); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-work-name:hover:not(:disabled) { color: var(--accent); text-decoration: underline; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-work.is-gone .tk-work-name { color: var(--mute); font-style: italic; cursor: default; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-work-state { font-size: 13px; color: var(--mute); text-transform: capitalize; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-work .tk-icon-btn { margin-left: auto; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-loose { margin-top: var(--s-1); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-loose-h { margin: var(--s-1) 0; font: 600 13px/1.2 var(--font-body); color: var(--ink-soft); }

/* The brief, read: a label over each paragraph that was written. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-brief-read { margin: 0; display: grid; grid-template-columns: 132px 1fr; gap: var(--s-1) 0; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-brief-read dt { font-size: 13px; color: var(--mute); padding-top: 1px; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-brief-read dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Papers and links, read. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-papers-read { display: flex; flex-direction: column; gap: var(--s-1); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-docs { display: flex; flex-wrap: wrap; gap: var(--s-1); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-doc-read {
  font-size: 13px; padding: var(--s-half) var(--s-1h); border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-soft);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-link-read { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── the form: New Task and Edit Task ────────────────────────────────────── */

/* FIVE NUMBERED STEPS, top to bottom, so where to start is never a question. */
.tkf { display: flex; flex-direction: column; gap: 0; max-width: 760px; }
.tkf-step { display: grid; grid-template-columns: 32px 1fr; gap: 0 var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--rule-faint); }
.tkf-step:first-child { border-top: 0; padding-top: var(--s-half); }
.tkf-step-head { display: contents; }
.tkf-n {
  grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 600 13px/1 var(--font-display);
  background: var(--shade); color: var(--ink); border: 1px solid var(--rule);
}
.tkf-step-words { margin: var(--s-half) 0 var(--s-1h); }
.tkf-h { margin: 0; font: 600 16px/1.3 var(--font-display); color: var(--ink); }
.tkf-hint { margin: var(--s-half) 0 0; font-size: 13px; color: var(--mute); line-height: 1.45; }
.tkf-body { grid-column: 2; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.tkf-title { font: 600 16px/1.3 var(--font-body); padding: var(--s-1h) var(--s-1h); width: 100%; }
.tkf-field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.tkf-label { font: 600 13px/1.2 var(--font-body); color: var(--ink-soft); }
.tkf-pair { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-2); }
.tkf-date { width: 100%; }
.tkf-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.tkf-chips .chip { font-size: 13px; padding: var(--s-half) var(--s-1h); }
.tkf-chips .chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tkf-chips.is-small { margin-top: var(--s-1); }
.tkf-chips.is-small .chip { font-size: 12px; padding: var(--s-half) var(--s-1); }
.tkf-box { width: 100%; font-size: 14px; resize: vertical; }
.tkf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1h) var(--s-2); }
.tkf-field.is-wide, .tkf-grid > .tkf-field.is-wide { grid-column: 1 / -1; }

/* What to make: one row per kind, a stepper, and the extras once it is on. */
.tkf-make { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.tkf-make-row {
  display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap;
  padding: var(--s-1) var(--s-1h); min-height: 48px; border-top: 1px solid var(--rule-faint); background: var(--card);
}
.tkf-make-row:first-child { border-top: 0; }
.tkf-make-row.is-on { background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.tkf-make-name { font: 600 14px/1.2 var(--font-body); color: var(--ink); flex: 0 0 120px; }
.tkf-make-row:not(.is-on) .tkf-make-name { color: var(--ink-soft); font-weight: 500; }
.tkf-stepper { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); }
.tkf-step-btn {
  width: var(--h-md); height: var(--h-md); border: 0; background: none; cursor: pointer; border-radius: 999px;
  font: 500 16px/1 var(--font-body); color: var(--ink-soft);
}
.tkf-step-btn:hover:not(:disabled) { color: var(--ink); background: var(--shade); }
.tkf-step-btn:disabled { opacity: .35; cursor: default; }
.tkf-count { min-width: 26px; text-align: center; font: 600 14px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tkf-upto { width: 78px; font-size: 13px; padding: var(--s-1) var(--s-1); }
.tkf-place { flex: 1 1 170px; min-width: 0; max-width: 260px; font-size: 13px; padding: var(--s-1) var(--s-1); }
.tkf-select { width: 100%; }
.tkf-more { border: 1px solid var(--rule-faint); border-radius: var(--r-md); padding: 0 var(--s-1h); }
.tkf-more > summary {
  cursor: pointer; list-style: none; padding: var(--s-1h) 0; font-size: 13px; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.tkf-more > summary::-webkit-details-marker { display: none; }
.tkf-more:not([open]) > summary::after { transform: none; }
.tkf-more[open] > summary::after { transform: rotate(180deg); }
.tkf-more > .tkf-grid { padding: var(--s-half) 0 var(--s-2); }
.tkf-foot {
  position: sticky; bottom: -26px; display: flex; align-items: center; gap: var(--s-1);
  padding: var(--s-2) 0 0; margin-top: var(--s-half); background: var(--paper); border-top: 1px solid var(--rule-faint);
}
.tkf-msg { margin: 0; font-size: 13px; color: var(--alarm); }

/* The conversation uses the script page's thread and composer as they are. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-thread .scene-comments { margin-bottom: var(--s-1h); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-thread .comment-form .field + .comment-form-foot { margin-top: var(--s-1); }
/* "Note" names the field a script comment is pinned to. A task's notes are
   about the whole task, so the label says nothing and is left out. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-thread .comment-field { display: none; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-thread .comment-head { justify-content: space-between; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-log { font-size: 13px; }

/* The Link Existing picker. */
.dt-pop .tk-link-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; margin-top: var(--s-1); }
.dt-pop .tk-link-row { display: flex; align-items: center; gap: var(--s-1); }
.dt-pop .tk-link-row .tk-work-kind {
  flex: none; font: 500 12px/1 var(--font-body); color: var(--mute);
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: var(--s-half) var(--s-1);
}
.dt-pop-row .tk-mark { width: 20px; height: 20px; font-size: 8px; }
.dt-pop-row .tk-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--mute); }
.dt-pop-row .tk-dot.is-doing { background: var(--c-sea); }
.dt-pop-row .tk-dot.is-review { background: var(--c-sand); }
.dt-pop-row .tk-dot.is-done { background: var(--accent); }

/* The strip on Create that says which task the work is for. */
:is([data-screen="client"], [data-screen="bulk"]) .create-task-strip {
  display: flex; align-items: center; gap: var(--s-1h); flex-wrap: wrap;
  margin: 0 0 var(--s-2); padding: var(--s-1) var(--s-2);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--rule));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  border-radius: var(--r-md); font-size: 14px; color: var(--ink-soft);
}
:is([data-screen="client"], [data-screen="bulk"]) .create-task-strip .cts-say { flex: 1 1 auto; min-width: 0; }
:is([data-screen="client"], [data-screen="bulk"]) .create-task-strip .cts-name { font-size: 14px; font-weight: 600; }
:is([data-screen="client"], [data-screen="bulk"]) .create-task-strip .chip { font-size: 13px; padding: var(--s-half) var(--s-1h); }

/* ── narrow ───────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  :is([data-screen="client"], [data-screen="bulk"]) .tk-facts, :is([data-screen="client"], [data-screen="bulk"]) .tk-brief-read { grid-template-columns: 104px 1fr; }
  .tkf-grid, .tkf-pair { grid-template-columns: 1fr; }
  .tkf-step { grid-template-columns: 1fr; }
  .tkf-n { display: none; }
  .tkf-body { grid-column: 1; }
  :is([data-screen="client"], [data-screen="bulk"]) .tk-panel-in { padding: var(--s-2) var(--s-2) var(--s-8); }
}

/* One line of tags in a list row, the Work table's rule: two fit, and the
   count says the rest. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-page .dt-cell .dt-tags { flex-wrap: nowrap; overflow: hidden; }

/* ── a card unfolds on the board (2026-10-03) ───────────────────────────────
   Franz: "cards need to be expandable here too in the kanbans ... to see a
   nice glimpse of the stuff". A chevron at the end of the card's foot; the
   glimpse is the offer and each item's slots, with what fills them and where
   each stands — read, not edited; the panel is still where things change. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-more {
  margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: var(--r-sm);
  display: grid; place-items: center; border: 1px solid transparent; background: none; color: var(--mute);
  transition: transform .18s ease, color .12s ease;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-more:hover { background: var(--fold-tile); color: var(--ink); border-color: transparent; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-more.is-open { transform: rotate(180deg); color: var(--ink-soft); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-foot .tk-due + .tk-card-more { margin-left: var(--s-1); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-glimpse {
  display: flex; flex-direction: column; gap: var(--s-half);
  border-top: 1px solid var(--rule-faint); padding-top: var(--s-1);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-glimpse-say { margin: 0 0 var(--s-half); font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-glimpse-h {
  margin: var(--s-1) 0 var(--s-nudge); display: flex; justify-content: space-between; gap: var(--s-1);
  font: 600 12px/1.3 var(--font-body); color: var(--ink);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-glimpse-n { color: var(--mute); font-variant-numeric: tabular-nums; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-glimpse-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-half); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-glimpse-list li { display: flex; align-items: center; gap: var(--s-1); min-width: 0; font-size: 12.5px; color: var(--ink-soft); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-glimpse-t { flex: 1 1 auto; min-width: 0; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-glimpse-list li.is-empty,
:is([data-screen="client"], [data-screen="bulk"]) .tk-glimpse-list li.is-hand { color: var(--mute); font-style: italic; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-glimpse .tk-stage { flex: none; font-size: 11px; padding: var(--s-half) var(--s-1); }

/* ── the board by priority, the status as a green picker (2026-10-03) ───────
   Franz: "lets make the main view as priority so we have high medium low and
   a proper green bg picker on the top that shows new wip and done very
   nicely". Columns are High, Medium and Low; each column's dot says how
   urgent (the alarm for High, a muted tint for Medium, the faintest for
   Low); the status is a filled pill on every card and a filled filter in
   the bar. The accent is the status's colour and nothing else's here. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-col.is-p-high .tk-col-head::before { background: var(--alarm); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-col.is-p-medium .tk-col-head::before { background: var(--c-sand); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-col.is-p-low .tk-col-head::before { background: var(--c-slate); }

/* THE CARD'S HEAD: the status pill left, the fold top right. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-head { display: flex; align-items: center; gap: var(--s-1); margin: -2px -2px 0 0; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-head .tk-card-more { margin-left: auto; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-pill {
  display: inline-flex; align-items: center; gap: var(--s-half); height: 24px; padding: 0 var(--s-1);
  border-radius: 999px; border: 0; font: 600 12px/1 var(--font-body); letter-spacing: .01em;
  background: color-mix(in srgb, var(--accent) 22%, var(--card)); color: var(--accent);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-pill.is-doing { background: color-mix(in srgb, var(--accent) 45%, var(--card)); color: var(--ink); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-pill.is-review { background: color-mix(in srgb, var(--accent) 65%, var(--card)); color: var(--accent-ink); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-pill.is-done { background: var(--accent); color: var(--accent-ink); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-pill:hover:not(:disabled) { filter: brightness(1.12); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-pill:disabled { cursor: default; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-chev { display: inline-flex; opacity: .8; }

/* WHO HAS IT, WHO ASKED: two quiet rows, a key, a mark, a name. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-foot { flex-direction: column; align-items: stretch; gap: var(--s-half); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-person { display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-person .tk-due { margin-left: auto; }
/* "ASSIGNED TO" AND "ASSIGNED BY", said in full and set as a label column:
   the same width on both rows, so the two marks and names line up. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-k { flex: none; width: 84px; font: 500 12px/1 var(--font-body); color: var(--mute); white-space: nowrap; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-person.is-by .tk-card-who { color: var(--mute); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-person.is-by .tk-mark { opacity: .75; }

/* THE STATUS FILTER in the bar: one segmented control, the chosen one filled. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-seg {
  display: inline-flex; align-items: center; gap: var(--s-nudge); padding: var(--s-half); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--rule-faint));
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-opt {
  display: inline-flex; align-items: center; gap: var(--s-1); height: 26px; padding: 0 var(--s-1h); border: 0; border-radius: 999px;
  background: none; color: var(--ink-soft); font: 500 13px/1 var(--font-body);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-opt:hover { color: var(--ink); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-opt.is-on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-n { font-variant-numeric: tabular-nums; opacity: .7; font-size: 12px; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-status-opt.is-on .tk-status-n { opacity: .85; }
/* Three columns now, not four: each a little wider. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-board.is-priority { grid-template-columns: repeat(3, minmax(260px, 1fr)); }

/* ── louder names, live facts, a table that scrolls (2026-10-03) ────────────
   Franz: "the high medium low and also name of task label has to be much
   bigger ... catch the eye". */
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-name { font: 700 17px/1.2 var(--font-display); letter-spacing: .005em; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-count { font-size: 15px; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-head::before { width: 10px; height: 10px; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card-title { font: 700 18px/1.3 var(--font-display); letter-spacing: .005em; }

/* The facts in two columns: who and when on the left, the state of the task
   on the right. Each column is the existing label-and-value grid. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-facts-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--s-4); margin-bottom: var(--s-1);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-facts-wrap .tk-facts { grid-template-columns: 112px minmax(0, 1fr); margin: 0; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-date-in {
  width: auto; max-width: 180px; padding: var(--s-half) var(--s-1); font-size: 13px; color-scheme: dark;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-date-in.is-late { border-color: var(--alarm); color: var(--alarm); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-asked { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ink-soft); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-dot.is-p-high, .dt-pop-row .tk-dot.is-p-high { background: var(--alarm); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-dot.is-p-medium, .dt-pop-row .tk-dot.is-p-medium { background: var(--c-sand); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-dot.is-p-low, .dt-pop-row .tk-dot.is-p-low { background: var(--c-slate); }
@media (max-width: 720px) {
  :is([data-screen="client"], [data-screen="bulk"]) .tk-facts-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* THE SLOT TABLE SCROLLS SIDEWAYS INSIDE ITS ITEM, the Profile cards' way:
   real column widths, the bar hidden until it is used. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-scroll {
  overflow-x: auto; overflow-y: hidden; margin: 0 -12px; padding: 0 var(--s-1h);
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-table { min-width: 680px; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot,
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-cols {
  grid-template-columns: 20px 118px 70px minmax(220px, 1fr) 128px 60px; column-gap: var(--s-2);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-util { display: inline-flex; justify-content: flex-end; gap: var(--s-nudge); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-util .tk-icon-btn.is-drop:hover { color: var(--alarm); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-stage.is-pick { display: inline-flex; align-items: center; gap: var(--s-half); background: none; cursor: pointer; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-stage.is-pick:hover { border-color: var(--ink-soft); color: var(--ink); }
/* Edit Task, in the accent: the one verb in the bar that changes the task. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-panel-bar .tk-edit { height: var(--h-md); padding: 0 var(--s-2); font-size: 13px; }

/* ── the slots as the Profile's table (2026-10-03) ──────────────────────────
   `dataTable`, as the Links card uses it, without search or checkboxes. The
   item's own head already says "3 of 3", so the table's toolbar line (its row
   count and Columns menu) is not drawn here; the header row is the top. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-dt { margin-top: var(--s-1); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-dt .dt-toolbar { display: none; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-cell { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-cell .tk-slot-name { flex-direction: row; align-items: baseline; gap: var(--s-1); white-space: nowrap; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-dt .tk-work-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-dt .tk-work-name:hover { text-decoration-color: var(--accent); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-slot-dt .tk-slot-pick { height: 28px; }

/* THE PANEL EDITS IN PLACE (2026-10-14): the name, and the brief. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-title-edit {
  display: block; width: 100%; resize: none; overflow: hidden; padding: var(--s-nudge) var(--s-1); margin-left: -6px; margin-right: -6px;
  width: calc(100% + 12px); border: 1px solid transparent; border-radius: var(--r-sm); background: none; cursor: text;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-title-edit:hover { border-color: var(--rule); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-title-edit:focus { border-color: var(--ink-soft); outline: none; background: var(--paper); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-brief-row { display: grid; grid-template-columns: 1fr; gap: var(--s-half); margin: 0 0 var(--s-2); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-brief-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-brief-box { width: 100%; resize: none; overflow: hidden; min-height: 40px; font-size: 14px; }

/* THE LINE OF BUSINESS, FIRST AND PLAIN (2026-10-14). */
.tkf-chips.is-big .chip { font-size: 14px; padding: var(--s-1) var(--s-2); }
.tkf-line-say { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--mute); }
:is([data-screen="client"], [data-screen="bulk"]) .create-task-strip[hidden] { display: none; }

/* ── THE TASK AS A FULL PAGE (SPEC-PORTAL-V2 §7) ────────────────────────────
   The panel's own pieces, laid out with room: a head row (back, title, verbs),
   the client's request band, then tabs. On a wide screen the conversation
   sits beside the tabs and stays in view; narrower, it is a tab. The prose
   keeps its reading width; the page itself is full width. */
:is([data-screen="client"]) .tk-full { padding: 0 0 var(--s-8); }
:is([data-screen="client"]) .tk-full-head {
  display: flex; align-items: flex-start; gap: var(--s-2); margin: 0 0 var(--s-2);
}
:is([data-screen="client"]) .tk-full-head .page-back { flex: none; }
:is([data-screen="client"]) .tk-full-title { flex: 1 1 auto; min-width: 0; }
:is([data-screen="client"]) .tk-full-title .tk-read-title,
:is([data-screen="client"]) .tk-full-title .tk-title-edit { margin: 0; font: var(--t-title); letter-spacing: var(--tr-title); }
:is([data-screen="client"]) .tk-full-verbs { flex: none; display: flex; align-items: center; gap: var(--s-1); }

:is([data-screen="client"]) .tk-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
  margin: 0 0 var(--s-2); padding: var(--s-1) var(--s-2);
  border: 1px solid var(--rule-faint); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--card) 60%, var(--paper));
  font-size: 14px; color: var(--ink);
}
:is([data-screen="client"]) .tk-band-from { color: var(--ink-soft); }
:is([data-screen="client"]) .tk-band-pref { display: inline-flex; align-items: center; gap: var(--s-1); }
:is([data-screen="client"]) .tk-band .btn-sm { margin-left: auto; }

:is([data-screen="client"]) .tk-tabs { display: flex; gap: var(--s-3); border-bottom: 1px solid var(--rule); margin: 0 0 var(--s-2); }
:is([data-screen="client"]) .tk-tab {
  background: none; border: 0; padding: var(--s-1) 0; margin-bottom: -1px; cursor: pointer;
  font-size: 14px; color: var(--mute); border-bottom: 2px solid transparent;
}
:is([data-screen="client"]) .tk-tab:hover { color: var(--ink-soft); }
:is([data-screen="client"]) .tk-tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

:is([data-screen="client"]) .tk-full-grid { display: block; }
:is([data-screen="client"]) .tk-full-grid.is-wide {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(calc(340px + (var(--s-4) - var(--gap-rail)) / 2), calc(420px + (var(--s-4) - var(--gap-rail)) / 2)); gap: var(--gap-rail); align-items: start;
}
:is([data-screen="client"]) .tk-full-body > .tk-sec:first-child,
:is([data-screen="client"]) .tk-full-body > .tk-history { border-top: 0; padding-top: 0; }
:is([data-screen="client"]) .tk-full-body .tk-brief-row,
:is([data-screen="client"]) .tk-full-body .tk-log { max-width: var(--w-read); }
:is([data-screen="client"]) .tk-slot-line { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: 13px; }
:is([data-screen="client"]) .tk-full-side {
  position: sticky; top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto;
  border-left: 1px solid var(--rule-faint); padding-left: var(--s-3);
}
:is([data-screen="client"]) .tk-full-side > .tk-sec { border-top: 0; padding-top: 0; }

@media (max-width: 640px) {
  :is([data-screen="client"]) .tk-full-head { flex-wrap: wrap; }
  :is([data-screen="client"]) .tk-full-title { flex-basis: calc(100% - 48px); }
  :is([data-screen="client"]) .tk-full-verbs { width: 100%; }
  :is([data-screen="client"]) .tk-tabs { gap: var(--s-3); overflow-x: auto; }
  :is([data-screen="client"]) .tk-band .btn-sm { margin-left: 0; }
}

/* ── CLIENT MODE (SPEC-PORTAL-V3 §4) ────────────────────────────────────────
   A client's board is by status, Drafts first when there are any, so four or
   five columns share the width. Their status is read, never picked. */
:is([data-screen="client"]) .tk-board.is-status { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
:is([data-screen="client"]) .tk-status-pill:disabled { cursor: default; }
:is([data-screen="client"]) .tk-full-verbs .tk-status { font-size: 13px; }

/* THE FULL BRIEF, FOR THE DESIGNER (web/brief-view.js, Create a Brief v2).
   Cards in the order a designer works; read-only; a section with nothing in
   it is not drawn. Labels sit beside or above their words in plain case. */
.bv { display: grid; gap: var(--s-2); margin: var(--s-2) 0 0; }
.bv-card {
  display: grid; gap: var(--s-1h); padding: var(--s-2);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md);
}
.bv-h { margin: 0; font: 600 16px/1.3 var(--font-display); color: var(--ink); }
.bv-field { display: grid; gap: var(--s-half); }
.bv-k { font-size: 13px; color: var(--mute); }
.bv-v { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.bv-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.bv-chip { cursor: default; }
.bv-text-grid { display: grid; gap: var(--s-1h); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--w-col)), 1fr)); }
.bv-text-card {
  display: grid; gap: var(--s-1); align-content: start; padding: var(--s-1h);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.bv-text-n { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.bv-text-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-1); align-items: start; }
.bv-text-row > .bv-k { grid-column: 1 / -1; }
.bv-copy { align-self: start; }
.bv-asset-list { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.bv-asset {
  display: inline-flex; align-items: center; min-height: var(--h-sm); padding: 0 var(--s-1h);
  border: 1px solid var(--rule); border-radius: var(--r-pill); font-size: 13px; color: var(--ink);
  overflow-wrap: anywhere; text-decoration: none;
}
a.bv-asset:hover { border-color: var(--ink-soft); }
.bv.is-compact .bv-card { padding: var(--s-1h); }

/* Where a client's sent brief is: its queue place, or that it is being made. */
.tk-queue-say { margin: calc(var(--s-1) * -1) 0 var(--s-2); color: var(--ink-soft); font-size: 13.5px; }
.tk-empty-art { display: block; width: calc(var(--w-col) * .5); margin: 0 auto var(--s-1); }
.tk-empty-art .ba { width: 100%; height: auto; display: block; }

/* A brief's place in the queue, by its page's verbs, and the card's menu. */
.tk-queue-said { font-size: 13px; color: var(--mute); white-space: nowrap; }
.tk-card-menu {
  display: inline-flex; align-items: center; justify-content: center; width: var(--h-sm); height: var(--h-sm);
  padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-soft); cursor: pointer;
}
.tk-card-menu:hover { background: var(--shade); color: var(--ink); }
/* A client's sent brief carries more verbs (its place, Pause, Edit Brief,
   Use Again): they wrap rather than push the page sideways on a phone. */
:is([data-screen="client"]) .tk-full-verbs { flex-wrap: wrap; row-gap: var(--s-1); }
:is([data-screen="client"]) .tk-queue-said { flex: 1 1 100%; color: var(--ink-soft); font-size: 13px; }
@media (min-width: 640px) { :is([data-screen="client"]) .tk-queue-said { flex: 0 1 auto; } }

/* ══ THE QUEUE AND THE BRIEF CARDS, REDRAWN (adeq-fe, approved by adeq-9d,
   2026-10-26). Franz: "the queue thing is absolutely garbage". Linear's rows
   (one line, quiet meta, verbs on hover), Asana's dates (soft, only soon and
   late coloured), Trello's covers (a picture, two lines, one meta row).
   Drawn with brief-art.js and the house tokens only. ═══════════════════════ */

/* ── shared: the glyph, the badge, the sizes, the cover, a face ── */
.qc-ic { display: inline-grid; place-items: center; width: var(--s-1h); height: var(--s-1h); flex: none; }
.qc-ic svg { width: 100%; height: 100%; display: block; }
.qc-badge {
  display: inline-flex; align-items: center; gap: var(--s-half); height: var(--h-xs); padding: 0 var(--s-1);
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--ink);
  font: 600 13px/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.qc-badge .qc-ic { color: var(--accent); }
.qc-badge.is-next { background: var(--accent); color: var(--accent-ink); }
.qc-badge.is-next .qc-ic { color: var(--accent-ink); }
.qc-badge.is-paused { background: var(--shade); color: var(--ink-soft); }
.qc-badge.is-paused .qc-ic { color: var(--ink-soft); }
.qc-sizes { display: inline-flex; flex-wrap: wrap; gap: var(--s-half); min-width: 0; }
.qc-size {
  display: inline-flex; align-items: center; gap: var(--s-half); 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: 500 13px/1 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.qc-size-box { display: block; border: 1.25px solid currentColor; opacity: .8; }
.qc-cover { position: relative; display: block; overflow: hidden; background: var(--shade); }
.qc-cover > .ba, .qc-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.qc-cover > img { object-fit: cover; background: var(--shade); }
.qc-cover > img:not([src]) { visibility: hidden; }
.qc-cover.is-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-px); background: var(--rule-faint); }
.qc-cover-cell { position: relative; background: var(--shade); min-width: 0; }
.qc-cover-cell > .ba { position: absolute; inset: 0; width: 100%; height: 100%; }
.qs-face {
  width: var(--h-xs); height: var(--h-xs); border-radius: var(--r-pill); flex: none; display: inline-grid; place-items: center;
  font: 600 13px/1 var(--font-body); font-size: 10px; color: var(--ink); background: color-mix(in srgb, var(--accent) 22%, var(--card));
}
.qs-face.is-empty { background: none; border: var(--s-px) solid var(--mute); }

/* ── (1) the lane ── */
.qs { display: grid; gap: var(--s-3); margin: 0 0 var(--s-4); }
.qs-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.qs-h { margin: 0; font: var(--t-section); letter-spacing: var(--tr-section); color: var(--ink); }
.qs-sum { display: inline-flex; align-items: center; gap: var(--s-1); font-size: 13px; color: var(--ink-soft); }
/* CARD-SIZED, ALWAYS (adeq-9d, on live: two slots each stretched to half the
   page, a 690px cover of one cropped still). A fixed track, left-aligned:
   two slots stay two cards, four and more wrap. */
.qs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 320px)); justify-content: start; gap: var(--gap-card); }
/* THE SLOT TILES (2026-10-29): All Work's .wk-tile, in its four-across
   .wk-sum grid. A slot in use is a little greener; a free one is quiet. */
.qs-tile { position: relative; cursor: default; }
.qs-tile[role="button"] { cursor: pointer; }
.qs-tile.is-free { background: none; border-style: solid; }
.qs-tile.is-free b, .qs-tile.is-free .qs-tile-name { color: var(--ink-soft); }
.qs-tile.is-busy { background: color-mix(in srgb, var(--accent) 8%, var(--card)); border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.qs-tile.is-busy:hover, .qs-tile.is-busy:focus-visible { border-color: var(--accent); }
.qs-tile.is-over { border-style: solid; }
.qs-tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-tile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-tile-next { display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
.qs-tile-next .qs-next-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.qs-tile .qs-pause { position: absolute; top: var(--s-1h); right: var(--s-1h); }
.qs-tile:hover .qs-pause, .qs-tile:focus-within .qs-pause { opacity: 1; }
.qs-slot {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  background: var(--card); border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-lg);
}
.qs-slot[role="button"] { cursor: pointer; }
.qs-slot[role="button"]:hover, .qs-slot:focus-visible { border-color: var(--rule); }
.qs-slot.is-mine { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule-faint)); }
/* A SLOT IN USE WEARS THE GREEN (Franz, 2026-10-28: "a bit better with colour,
   AdEQ fill"): a soft green fill, a green edge, and its number filled; a free
   slot stays a quiet dashed outline. */
.qs-slot:not(.is-free) {
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--rule-faint));
}
.qs-slot:not(.is-free)[role="button"]:hover, .qs-slot:not(.is-free):focus-visible { border-color: var(--accent); }
.qs-slot:not(.is-free) .qs-num { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.qs-slot:not(.is-free) .qs-track { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.qs-slot.is-over { border-style: solid; }
.qs-slot-art { position: relative; }
/* The cover is a capped box and a picture is CONTAINED in it, never a giant crop. */
.qs-slot-cover { height: 140px; }
.qs-slot-cover > img { object-fit: contain; }
.qs-slot.is-free .qs-slot-cover > .ba { inset: var(--s-1) 0; height: calc(100% - var(--s-2)); }
.qs-num {
  position: absolute; top: var(--s-1); left: var(--s-1); min-width: var(--h-xs); height: var(--h-xs); padding: 0 var(--s-1);
  display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--card); color: var(--ink);
  font: 600 13px/1 var(--font-display); box-shadow: 0 0 0 var(--s-px) var(--rule-faint);
}
.qs-state {
  position: absolute; top: var(--s-1); right: var(--s-1); height: var(--h-xs); padding: 0 var(--s-1);
  display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--card); color: var(--ink-soft);
  font: 500 13px/1 var(--font-body); box-shadow: 0 0 0 var(--s-px) var(--rule-faint);
}
.qs-state:empty { display: none; }
.qs-state.is-review { color: var(--accent); }
.qs-slot-body { display: grid; align-content: start; gap: var(--s-1); min-width: 0; padding: var(--s-1h) var(--pad-card) var(--pad-card); }
.qs-slot-title {
  margin: 0; font: 600 14px/1.35 var(--font-body); color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qs-kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); min-width: 0; font-size: 13px; color: var(--ink-soft); }
.qs-prog { display: flex; align-items: center; gap: var(--s-1); }
.qs-track { flex: 1; height: var(--s-half); border-radius: var(--r-pill); background: var(--rule-faint); overflow: hidden; }
.qs-track b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.qs-prog-n { font: 500 13px/1 var(--font-body); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.qs-slot-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-half) var(--s-1); min-height: var(--h-sm); }
.qs-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink); }
.qs-sp { flex: 1; }
.qs-due { font: 500 13px/1 var(--font-body); color: var(--ink-soft); white-space: nowrap; }
.qs-due.is-late { color: var(--alarm); }
.qs-quiet {
  display: inline-flex; align-items: center; gap: var(--s-half); height: var(--h-sm); padding: 0 var(--s-1);
  border: var(--s-px) solid var(--rule); border-radius: var(--r-sm); background: none; color: var(--ink-soft);
  font: 500 13px/1 var(--font-body); cursor: pointer;
}
.qs-quiet:hover, .qs-quiet:focus-visible { color: var(--ink); border-color: var(--ink-soft); }
/* SECONDARY VERBS WAIT FOR A HOVER OR A FOCUS, and are always shown on a
   touch screen. Each is also in the card's menu and on the brief's page. */
.qs-slot .qs-pause { position: absolute; right: var(--s-1); bottom: var(--s-1); background: var(--card); }
.qs-slot:hover .qs-pause, .qs-slot:focus-within .qs-pause { opacity: 1; }
.qs-slot.is-free { background: none; border: 1.5px solid var(--rule); }
.qs-slot.is-free .qc-cover { background: none; }
.qs-slot.is-free .qs-slot-title { font-weight: 500; color: var(--ink-soft); }
.qs-next {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); padding: var(--s-1);
  background: var(--card); border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-md);
}
.qs-next-t { flex: 1 1 var(--s-12); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.qs-start { flex: 1 0 100%; }
/* IN A FREE SLOT'S TILE, THE BUTTON IS ITS OWN SIZE (2026-11-03): stretched
   across the tile it hid the next brief's name and was cut off at the edge. */
.qs-tile .qs-tile-next { overflow: visible; }
.qs-tile-next .qs-next-t { flex: 1 1 auto; }
.qs-tile-next .qs-start { flex: none; width: auto; }
.qs-th { width: var(--s-6); height: var(--s-4); flex: none; border-radius: var(--r-sm); }

/* ── the queue rows ── */
.qs-queue { display: grid; gap: var(--s-1); }
.qs-queue-top { display: flex; align-items: baseline; gap: var(--s-1); }
.qs-h3 { margin: 0; font: var(--t-label); letter-spacing: var(--tr-label); font-size: 14px; color: var(--ink); }
.qs-n { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.qs-hint { margin-left: auto; font-size: 13px; color: var(--mute); }
.qs-list { overflow: hidden; background: var(--card); border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-lg); }
.qs-row {
  position: relative; display: grid; align-items: center; gap: var(--s-1h);
  grid-template-columns: var(--s-2) var(--h-sm) var(--s-6) minmax(0, 1fr) auto auto minmax(var(--s-12), auto) var(--s-8) auto;
  min-height: var(--s-6); padding: var(--s-1) var(--s-1h) var(--s-1) var(--s-1); border-top: var(--s-px) solid var(--rule-faint);
}
.qs-row:first-child { border-top: 0; }
.qs-row:hover, .qs-row:focus-within { background: color-mix(in srgb, var(--shade) 70%, var(--card)); }
.qs-row[hidden] { display: none; }
.qs-row.is-draggable { cursor: grab; }
.qs-grip { display: grid; place-items: center; color: var(--mute); opacity: 0; }
.qs-pos {
  width: var(--h-sm); height: var(--h-sm); display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--shade); color: var(--ink); font: 600 13px/1 var(--font-display); font-variant-numeric: tabular-nums;
}
.qs-pos.is-paused { color: var(--ink-soft); }
.qs-row .qs-th { height: var(--s-4); }
.qs-row-t {
  display: grid; gap: var(--s-nudge); min-width: 0; padding: 0; border: 0; background: none; color: inherit;
  text-align: left; font: inherit; cursor: pointer;
}
.qs-row-t:disabled { cursor: inherit; }
.qs-row-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.qs-row-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--mute); }
.qs-row-t:not(:disabled):hover b { text-decoration: underline; }
.qs-row-due { font: 500 13px/1 var(--font-body); color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qs-acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-half); }
/* ALWAYS IN SIGHT (Franz, 2026-11-03: "these queue up and down should be more
   adeq style and always visible and not just on hover"): the arrows are round
   pills like every other control, and the grip shows too. */
.qs-grip { opacity: 1; }
.qs-icon {
  width: var(--h-sm); height: var(--h-sm); display: inline-grid; place-items: center; padding: 0;
  border: var(--s-px) solid var(--rule); border-radius: var(--r-pill); background: var(--card); color: var(--ink); cursor: pointer;
}
.qs-icon:hover:not(:disabled), .qs-icon:focus-visible { border-color: var(--ink-soft); background: var(--shade); }
.qs-icon:disabled { cursor: default; opacity: .35; }
.qs-all { justify-self: start; }
.qs-queue.is-paused .qs-list { background: none; border-style: solid; }
.qs-queue.is-paused .qs-row { grid-template-columns: var(--s-2) var(--h-sm) var(--s-6) minmax(0, 1fr) auto; }
.qs-queue.is-paused .qs-th, .qs-queue.is-paused .qs-row-t { opacity: .7; }
/* LIFTED, by drag.js: a step up, an accent ring, and nothing ghosted behind. */
.qs-row.is-lifted {
  z-index: 1; background: var(--card); border-radius: var(--r-md);
  box-shadow: 0 var(--s-1) var(--s-2) rgb(0 0 0 / .18), 0 0 0 var(--s-px) var(--accent);
}

@media (max-width: 639px) {
  .qs-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .qs-slot { grid-template-columns: calc(var(--s-12) + var(--s-1)) minmax(0, 1fr); grid-template-rows: none; }
  .qs-slot-cover { height: 100%; min-height: calc(var(--s-12) + var(--s-2)); }
  .qs-state { display: none; }
  .qs-slot-body { padding: var(--s-1h); }
  .qs-slot.is-free { grid-template-columns: 1fr; }
  .qs-slot.is-free .qs-slot-art .qc-cover { display: none; }
  .qs-slot.is-free .qs-slot-body { padding-left: var(--s-5); }
  .qs-row { grid-template-columns: var(--h-sm) var(--s-5) minmax(0, 1fr) auto; gap: var(--s-1); min-height: var(--s-8); }
  .qs-row .qs-grip, .qs-row .qc-sizes, .qs-row .qs-face, .qs-row .qs-row-due { display: none; }
  .qs-row .qs-th { width: var(--s-5); height: var(--s-3); }
  .qs-queue:not(.is-paused) .qs-acts .qs-quiet { display: none; }
  .qs-queue.is-paused .qs-row { grid-template-columns: var(--h-sm) var(--s-5) minmax(0, 1fr) auto; }
  .qs-hint { display: none; }
}

/* ── (3) the board card: a cover, then four quiet lines ── */
:is([data-screen="client"], [data-screen="bulk"]) .tk-card.bc {
  position: relative; padding: 0; gap: 0; overflow: hidden; border-color: var(--rule-faint);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-card.bc:hover { border-color: var(--rule); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-card.bc.is-open { border-color: var(--accent); }
.bc-art { position: relative; }
.bc-cover { height: calc(var(--s-8) + var(--s-1h)); }
.tk-card.is-done .bc-cover { opacity: .7; }
.bc-badge { position: absolute; top: var(--s-1); left: var(--s-1); }
/* With a tick in the corner (multi-select, 2026-11-03), the queue badge sits beside it. */
.pg-card .bc-badge { left: calc(var(--s-1) + var(--s-3) + var(--s-half)); }
/* THE CONTROLS, TOP RIGHT, ALWAYS (Franz, 2026-10-03): the ⋯ menu and the fold. */
.bc-ctl {
  position: absolute; top: var(--s-1); right: var(--s-1); display: flex; gap: var(--s-nudge);
  background: var(--card); border-radius: var(--r-sm); box-shadow: 0 0 0 var(--s-px) var(--rule-faint);
}
.bc-ctl > button, .bc-menu {
  width: var(--h-sm); height: var(--h-sm); display: inline-grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-soft); cursor: pointer;
}
.bc-ctl > button:hover, .bc-ctl > button:focus-visible { background: var(--shade); color: var(--ink); }
.bc-body { display: grid; gap: var(--s-1); padding: var(--s-1h); min-width: 0; }
:is([data-screen="client"], [data-screen="bulk"]) .bc-title {
  /* The size stays Franz's 18px display face (above: "much bigger ... catch the eye"); only two lines. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bc-kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); min-width: 0; font-size: 13px; color: var(--ink-soft); }
.bc-prog { display: flex; align-items: center; gap: var(--s-1); }
.bc-prog .tk-bar { background: var(--rule-faint); }
.bc-prog .tk-bar-in { background: var(--accent); }
.bc-foot { display: flex; align-items: center; gap: var(--s-1); min-width: 0; padding-top: var(--s-half); }
.bc-foot .dt-spacer { flex: 1; }
.bc-pair { display: inline-flex; align-items: center; gap: var(--s-half); min-width: 0; }
.bc-pair .tk-mark { width: var(--s-3); height: var(--s-3); font-size: 9px; flex: none; }
.bc-arrow { color: var(--mute); display: inline-grid; }
:is([data-screen="client"], [data-screen="bulk"]) .bc-pair .tk-mark.is-empty { border: var(--s-px) solid var(--mute); background: none; }
.bc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink); margin-left: var(--s-half); }
.bc-name.is-none { color: var(--mute); }
.bc-foot .tk-due { margin-left: 0; }
:is([data-screen="client"], [data-screen="bulk"]) .bc-foot .tk-due.is-soon { color: var(--accent); }

/* On a phone the board is still columns side by side, so the card stays upright. */
.bc-pair .tk-card-who { margin-left: var(--s-half); color: var(--mute); font-size: 13px; }
.bc-pair .tk-take { margin-left: var(--s-half); min-height: var(--h-xs); }
/* Pick Up, and for a manager Assign beside it (2026-11-02). */
.tk-take-pair { display: inline-flex; align-items: center; gap: var(--s-half); }
.tk-take-pair .tk-take { margin-left: 0; }

/* ── WIDE LANES THAT SCROLL SIDEWAYS (web/board-lanes.js, Franz 2026-10-27) ──
   The Tasks board and a client's Briefs board: every column a real width
   (--col-w, 320px unless this person dragged it), the board scrolling
   sideways when they do not fit. Only overscroll-x is contained, so the wheel
   still moves the page up and down; the page itself never scrolls sideways. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-board.is-wide {
  /* THE TILES' WIDTH AND GAP (Franz, 2026-10-31): a quarter of the page less
     three gaps, as the four tiles above it (.wk-sum), so each column sits
     under a tile; never narrower than a card can read at. */
  --lane-w: max(calc((100% - var(--s-2) * 3) / 4), calc(var(--w-col) * .75));
  display: flex; gap: var(--s-2); align-items: flex-start;
  max-width: 100%; min-width: 0;
  /* scroll: sideways only, so a trackpad swipe at the board's end is not
     the browser's back gesture; the wheel still moves the page vertically. */
  overscroll-behavior-x: contain;
  overflow-x: auto;
  /* The 2px that keeps a focus ring from clipping sits outside the page's
     edge, so the columns start and end where the tiles do. */
  padding: var(--s-nudge) var(--s-nudge) var(--s-2); margin-inline: calc(var(--s-nudge) * -1);
  max-width: calc(100% + var(--s-nudge) * 2); scrollbar-width: thin;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-board.is-wide::-webkit-scrollbar { height: 8px; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-board.is-wide::-webkit-scrollbar-thumb { background: var(--rule); border-radius: var(--r-sm); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-board.is-wide.is-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-board.is-wide.is-panning { cursor: grabbing; user-select: none; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-board.is-wide > .tk-col {
  position: relative; flex: 0 0 var(--col-w, var(--lane-w)); width: var(--col-w, var(--lane-w)); min-width: 0;
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-board.is-wide .tk-col-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-board.is-wide .tk-col-count { flex: none; }

/* The grip: the column's right edge, a line on hover, focus, or drag. */
.tk-board.is-wide .bl-grip {
  position: absolute; top: 0; bottom: 0; right: calc(-1 * var(--s-2)); width: var(--s-2); z-index: 2;
  cursor: col-resize; touch-action: none;
}
.tk-board.is-wide .bl-grip::after {
  content: ''; position: absolute; top: var(--s-2); bottom: var(--s-2); left: 50%; width: 2px; transform: translateX(-50%); border-radius: var(--r-sm); background: transparent;
  transition: background .12s ease;
}
.tk-board.is-wide .bl-grip:hover::after, .tk-board.is-wide .bl-grip.is-dragging::after, .tk-board.is-wide .bl-grip:focus-visible::after { background: var(--accent); }

/* ⋯ in the header's top-right corner. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-menu {
  width: 26px; height: 26px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--mute);
}
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-head > .tk-col-menu { margin-left: auto; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-head > .tk-col-add + .tk-col-menu { margin-left: 0; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-col-menu:hover { color: var(--ink); border-color: var(--rule); background: var(--card); }

/* THE RAIL: a folded column, its name and count running down it. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-board.is-wide > .tk-col.is-rail {
  flex-basis: 48px; width: 48px; min-height: 240px; padding: var(--s-1h) 0; cursor: pointer; align-items: center;
}
.tk-board.is-wide > .tk-col.is-rail:hover { border-color: var(--rule); }
.tk-board.is-wide > .tk-col.is-rail > :not(.tk-col-head) { display: none; }
.tk-board.is-wide > .tk-col.is-rail .tk-col-head {
  writing-mode: vertical-rl; padding: var(--s-half) 0; gap: var(--s-1h);
}
.tk-board.is-wide > .tk-col.is-rail .tk-col-head > :is(button, .tk-col-add, .tk-col-menu) { display: none; }
.tk-board.is-wide > .tk-col.is-rail .tk-col-name { overflow: visible; }

@media (max-width: 639px) {
  :is([data-screen="client"], [data-screen="bulk"]) .tk-board.is-wide > .tk-col:not(.is-rail) { flex-basis: min(var(--col-w, var(--w-col)), 84vw); width: min(var(--col-w, var(--w-col)), 84vw); }
  .tk-board.is-wide .bl-grip { display: none; }
}

/* A SLOT WITH NO PICTURE (Franz, 2026-10-28: "blank, no infographic"): its
   number and state sit on one row at the card's top, padded as the body. */
.qs-slot-art.is-bare { display: flex; align-items: center; gap: var(--s-1); padding: var(--pad-card) var(--pad-card) 0; }
.qs-slot-art.is-bare .qs-num, .qs-slot-art.is-bare .qs-state { position: static; }
.qs-slot-art.is-bare .qs-state { margin-left: auto; }
.qs-slot-art.is-bare .qs-pause { position: static; opacity: 1; }
.qs-slot { grid-template-rows: auto 1fr; }
.qs-slot.is-free .qs-slot-body { padding-top: var(--s-1h); }
@media (max-width: 639px) {
  .qs-slot:has(> .qs-slot-art.is-bare) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .qs-slot.is-free .qs-slot-body { padding-left: var(--s-1h); }
  .qs-slot-art.is-bare { padding: var(--s-1h) var(--s-1h) 0; }
}
/* A SLOT A BIGGER PLAN ADDS (2026-10-30): the tile, quiet, with Unlock. */
.qs-tile.is-locked { background: none; opacity: .62; }
.qs-tile.is-locked b, .qs-tile.is-locked .qs-tile-name { color: var(--mute); }
.qs-tile.is-locked .qs-unlock { font-size: 13px; font-weight: 600; color: var(--accent); }
/* A brief's rating sits beside its title (web/stars.js, 2026-11-02). */
.tk-full-title:has(> .stars) { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1h); }

/* THE BRIEF IN THE PANEL, AS THE CLIENT'S BRIEF PICKS IT (2026-11-02): one
   dropdown box per list, the open boxes, then Add a Detail for the rest. */
:is([data-screen="client"], [data-screen="bulk"]) .tk-bf-one { display: grid; gap: var(--s-2); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-bf { display: grid; gap: var(--s-half); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-bf-texts { display: grid; gap: var(--s-2); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-bf-texts:empty { display: none; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-bf-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
:is([data-screen="client"], [data-screen="bulk"]) .tk-bf-more:empty { display: none; }
:is([data-screen="client"], [data-screen="bulk"]) .tk-bf-more-k { color: var(--mute); font-size: 13px; margin-right: var(--s-half); }

/* THE WORK A BRIEF MADE, on the client's brief page (2026-11-03). */
.wg-brief-work { display: grid; gap: var(--s-1); margin: 0 0 var(--s-3); }
.wg-brief-work .bf-sec-h { margin: 0; }
.wg-brief-say { margin: 0; color: var(--accent); font-weight: 600; }

/* PAUSE IS ALWAYS IN SIGHT (Franz, 2026-11-03: "the pause button should be
   proper ... everywhere"; CLAUDE.md: nothing important behind a hover). The
   reorder arrows still wait for a hover; Pause does not. */

/* THE QUEUE, THE TEAM'S MAIN THING (Franz, 2026-11-03): its own card with a
   real heading and a sentence on what happens next; each row says who asked,
   since when, its priority, and who has it, or Pick Up. */
.qs-queue.is-main {
  padding: var(--s-2); gap: var(--s-1h);
  background: var(--card); border: var(--s-px) solid var(--rule); border-radius: var(--r-lg);
}
.qs-queue.is-main .qs-list { border-color: var(--rule-faint); background: var(--paper); }
.qs-queue.is-main .qs-queue-top { align-items: center; flex-wrap: wrap; row-gap: var(--s-half); }
.qs-h2 { margin: 0; font: 600 20px/1.2 var(--font-display); color: var(--ink); }
.qs-count {
  min-width: var(--h-sm); height: var(--h-sm); padding: 0 var(--s-1); display: inline-grid; place-items: center;
  border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font: 600 13px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.qs-sum { font-size: 14px; color: var(--ink-soft); }
.qs-prio { font-size: 12.5px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.qs-prio.is-p-high { color: var(--alarm); }
.qs-who { display: inline-flex; align-items: center; gap: var(--s-half); font-size: 13px; color: var(--ink-soft); white-space: nowrap; min-width: 0; }
.qs-take { white-space: nowrap; }

/* A CARD SAYS MORE (2026-11-03): up to four pieces it made, each whole, and
   the brief's first words with what it is for. */
.qc-cover.is-grid { display: grid; gap: var(--s-nudge); padding: var(--s-nudge); grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--shade); }
.qc-cover.is-grid.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qc-cover.is-grid .qc-cover-cell { position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--card); min-height: 0; }
.qc-cover.is-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bc-say { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.bc-goal { display: inline-block; margin-right: var(--s-half); padding: 0 var(--s-half); border-radius: var(--r-sm); background: var(--shade); color: var(--ink); font-weight: 600; font-size: 12px; }

/* A PIECE OF WORK IN THE SIDE PANEL (web/work-peek.js, 2026-11-03): the
   Briefs panel's frame; its stage in the bar, and for statics each one with
   its own stage and lines, edited in place. */
[data-screen="client"] .wp-in { display: grid; gap: var(--s-2); }
.wp-kind { flex: none; }
.wp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.wp-meta .wb-brief { margin: 0; }
.wp-thumbs { margin: 0; }
.wp-statics { display: grid; gap: var(--s-1h); }
.wp-static { display: grid; gap: var(--s-1); padding: var(--s-1h); border: var(--s-px) solid var(--rule-faint); border-radius: var(--r-lg); background: var(--card); }
.wp-static-head { display: flex; align-items: center; gap: var(--s-1); min-width: 0; }
.wp-static-n {
  flex: none; width: var(--h-xs); height: var(--h-xs); display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--shade); font: 600 12px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.wp-static-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-fields { display: grid; gap: var(--s-1); }
.wp-field { display: grid; gap: var(--s-nudge); }
.wp-field-k { font-size: 12px; font-weight: 600; color: var(--mute); }
.wp-field-in { min-height: 0; resize: none; overflow: hidden; }
.wp-shot { width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--r-md); background: var(--shade); }
.wp-say { margin: 0; color: var(--ink-soft); }

/* ONE STATIC AT A TIME in the side panel (2026-11-03): All, then a tab per static. */
.wp-tabs { flex-wrap: wrap; justify-self: start; }
.wp-pane { display: grid; gap: var(--s-1h); }
.wp-big { display: grid; place-items: center; min-height: calc(var(--s-12) * 3); padding: var(--s-1); border-radius: var(--r-lg); background: var(--shade); }
.wp-big img { max-width: 100%; max-height: 62vh; object-fit: contain; border-radius: var(--r-md); }
.wp-static-head .qs-icon svg { rotate: 90deg; }
.wp-static-head .wp-next svg { rotate: -90deg; }

/* THE SLOTS, COMPACT (Franz, 2026-11-03: "a similar thing to slots too like
   compact as these cards have now become, but smart"): each slot one slim
   card, its number in a small circle, its brief (or Free and the next one,
   with Start), and a thin line for how much is made; Pause in its corner. */
.sl-strip > .wk-sum { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--w-col) - var(--s-4))), 1fr)); gap: var(--s-1h); }
.sl-strip .qs-tile {
  display: grid; grid-template-columns: var(--h-sm) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: var(--s-1); row-gap: var(--s-nudge);
  align-content: center; min-height: 0; padding: var(--s-1) var(--s-1h);
}
.sl-strip .qs-tile > b {
  grid-row: 1 / span 2; align-self: center; width: var(--h-sm); height: var(--h-sm); display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--shade); color: var(--ink); font: 700 13px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.sl-strip .qs-tile.is-busy > b { background: var(--accent); color: var(--accent-ink); }
.sl-strip .qs-tile .qs-tile-name { grid-column: 2; font: 600 13.5px/1.3 var(--font-body); padding-right: var(--s-8); }
.sl-strip .qs-tile > small { grid-column: 2; font-size: 12.5px; }
.sl-strip .qs-tile .wk-tile-bar { grid-column: 1 / -1; margin-top: var(--s-half); height: var(--s-nudge); }
.sl-strip .qs-tile.is-free .wk-tile-bar, .sl-strip .qs-tile.is-locked .wk-tile-bar { display: none; }
.sl-strip .qs-tile .qs-pause { top: 50%; right: var(--s-1h); translate: 0 -50%; }
.sl-strip .qs-tile.is-busy .qs-tile-name, .sl-strip .qs-tile.is-busy > small { padding-right: calc(var(--s-8) + var(--s-2)); }
.sl-strip .qs-tile-next .qs-start { height: var(--h-xs); padding: 0 var(--s-1h); }

/* THE FULL BRIEF TAB on a piece's own page (web/work-brief.js, 2026-11-03):
   the brief's title and Open the Brief, for the team one row of the task's
   facts, then the brief's cards two across where there is room. */
.wbt-pane[hidden] { display: none; }
.wbt { display: grid; gap: calc(var(--s-2) + var(--s-half)); container-type: inline-size; }
.wbt-head { display: flex; align-items: center; gap: var(--s-1h); min-width: 0; }
.wbt-title { flex: 1 1 auto; min-width: 0; margin: 0; font: 600 20px/1.3 var(--font-display); color: var(--ink); }
.wbt-facts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--w-col) * .5), 1fr)); gap: var(--s-1h) var(--s-2);
  padding: var(--s-2); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md);
}
.wbt-fact { display: grid; gap: var(--s-half); min-width: 0; }
.wbt-k { font-size: 13px; color: var(--mute); }
.wbt-v { font-size: 14px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
/* THE BRIEF, READ (work-brief.js briefRead): Create a Brief's numbered panels
   (screen-portal.css .bf-panel, its head and number unchanged), only what was
   given. Two across where the column holds two, one below that; each answer a
   quiet label over its words, lists as rows with a hairline between, short
   picks as chips. Every gap is the page's 20, the toolbar's own rhythm. */
.wbr { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--s-2) + var(--s-half)); align-items: start; }
@container (min-width: 760px) {
  .wbr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wbr > .wbr-panel.is-full { grid-column: 1 / -1; }
  .wbr-body.is-cols { grid-template-columns: repeat(auto-fit, minmax(calc(var(--w-col) * .75), 1fr)); column-gap: var(--s-3); }
}
.wbr-panel { min-width: 0; }
.wbr-body { display: grid; gap: var(--s-2); align-content: start; padding: 0 var(--s-3) var(--s-3); }
.wbr-f { display: grid; gap: var(--s-half); min-width: 0; align-content: start; }
.wbr-k { font-size: 13px; color: var(--mute); }
.wbr-v { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.wbr-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.wbr-chip { cursor: default; }
.wbr-rows { margin: 0; padding: 0; list-style: none; }
.wbr-rows > li {
  padding: var(--s-1) 0; border-top: var(--s-px) solid var(--rule-faint);
  font-size: 14px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere;
}
.wbr-rows > li:first-child { border-top: 0; padding-top: 0; }
.wbr-rows > li:last-child { padding-bottom: 0; }
.wbr-rows.is-numbered { counter-reset: wbr; }
.wbr-rows.is-numbered > li { display: grid; grid-template-columns: var(--s-3) minmax(0, 1fr); counter-increment: wbr; }
.wbr-rows.is-numbered > li::before { content: counter(wbr); color: var(--mute); font-variant-numeric: tabular-nums; }
.wbr-assets { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.wbr-asset {
  display: inline-flex; align-items: center; min-height: var(--h-sm); padding: 0 var(--s-1h);
  border: var(--s-px) solid var(--rule); border-radius: var(--r-pill); font-size: 13px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
}
a.wbr-asset:hover { border-color: var(--ink-soft); }
.wbt-empty { margin: 0; }
/* A FORM'S TWO TABS: the Full Brief hides the form below them. */
/* Doubled class and the screen, to outrank the form's own [data-screen] display rules without !important. */
[data-screen="form"] .fm-main.is-brief.is-brief > :not(.fm-keep) { display: none; }
[data-screen="form"] .fm-main:not(.is-brief) > .wbt-pane { display: none; }  /* a form only: a set of statics is .fm-main too, and lost its brief to this */

/* THE SLOTS PANEL, from the header's Slots pill (slots.js openSlotsPanel,
   2026-11-03). Wide and right-aligned under the bar, the page's own paper and
   rule, no shadow; one section a client, the slots four across the full
   width, then the queue. It scrolls the page's way: no wheel trap, it simply
   stops at the screen's bottom edge. */
.sp-panel {
  position: fixed; right: var(--s-2); z-index: var(--z-pop);
  width: min(calc(100vw - var(--s-4)), calc(var(--w-col) * 4));
  max-height: calc(100dvh - var(--app-h) - var(--s-3)); overflow: auto;
  display: grid; align-content: start; gap: var(--s-2); padding: var(--s-2);
  background: var(--paper); border: var(--s-px) solid var(--rule); border-radius: var(--r-lg);
}
.sp-head { display: flex; align-items: center; gap: var(--s-1h); min-width: 0; }
.sp-h { margin: 0; font: var(--t-section); letter-spacing: var(--tr-section); color: var(--ink); }
.sp-sum { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sp-list { display: grid; gap: var(--s-1h); }
.sp-client { display: grid; gap: var(--s-1h); padding: var(--s-1h) var(--s-2) var(--s-2); background: var(--card); border: var(--s-px) solid var(--rule); border-radius: var(--r-md); }
.sp-client.is-shut { padding-bottom: var(--s-1h); }
.sp-client.is-shut > .sp-client-body { display: none; }
.sp-client-head {
  display: flex; align-items: center; gap: var(--s-1h); min-width: 0; min-height: var(--h-sm); padding: 0;
  background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.sp-client-name { font: 600 15px/1.3 var(--font-display); }
.sp-client-say { font-size: 13px; color: var(--ink-soft); }
.sp-chev { display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm); color: var(--ink-soft); transition: transform .15s ease; }
.sp-client.is-shut .sp-chev { transform: rotate(-90deg); }
.sp-client-head:hover .sp-chev { color: var(--ink); }
.sp-client-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
/* The strip inside: no margin of its own, its slots across the whole width. */
.sp-panel .sl-strip { margin: 0; gap: var(--s-1h); }
.sp-panel .qs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; }
@media (max-width: 639px) {
  .sp-panel { right: var(--s-2); left: var(--s-2); width: auto; }
  .sp-panel .qs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}