/* Sacred Command Center · Client work. Semantic tokens only: no hex, no rgba (tests/static.mjs S-a2). No colored side stripes, no status dots:
   a status is a word, lateness is a crimson icon plus the word (.late), the only marks are Live, Gilt and the owner mark.
   The roster rail is a column beside the page; the post editor, the confirm and the menus are the kit's. Class prefix cw-. */

/* ── Frame: the roster rail and the workspace ─────────────────────────────────────────── */
.module--work .cw-frame { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--s-4); align-items: start; min-width: 0; }
.cw-main { min-width: 0; }
@media (max-width: 899px) { .module--work .cw-frame { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }

/* ── Containers: the dense Home head (14 px title, one action column) ─────────────────── */
.module--work .ctr-title { font-size: var(--fs-body); }
.module--work .ctr-sum { font-size: var(--fs-cell); }
.module--work .ctr-head { --ctr-act-w: 0px; padding: var(--s-2) var(--s-3); min-height: 56px; }
.module--work .ctr-hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.module--work .ctr-act { position: static; grid-column: 2; align-self: center; padding-right: var(--s-3); }
.module--work .ctr-in { container-type: inline-size; container-name: hc; }
@media (max-width: 559px) {
  .module--work .ctr-hd { grid-template-columns: minmax(0, 1fr); }
  .module--work .ctr-act { grid-column: 1; justify-self: start; padding: 0 var(--s-3) var(--s-2) calc(var(--s-3) + 24px + var(--s-2)); }
}

/* ── The rail ─────────────────────────────────────────────────────────────────────────── */
.cw-rail { position: sticky; top: calc(var(--head-h) + var(--top) + var(--s-3)); display: flex; flex-direction: column; min-width: 0; max-height: calc(100dvh - var(--head-h) - var(--top) - var(--s-5)); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.cw-rail-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--surface); border-bottom: 1px solid var(--line); }
.cw-rail-t { font-size: var(--fs-cell); font-weight: 700; color: var(--text); }
.cw-rail-list { display: flex; flex-direction: column; }
.cw-rail-list > li + li { border-top: 1px solid var(--line); }
.cw-rr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); min-height: 52px; padding: var(--s-2) var(--s-3); color: var(--text); text-decoration: none; transition: background-color var(--t-feedback) var(--ease-out); }
@media (hover: hover) { .cw-rr:hover { background: var(--hover); } }
.cw-rr:active { background: var(--hover); }
.cw-rr.is-sel { background: var(--surface-2); }
.cw-rr.is-sel .cw-rr-t { font-weight: 800; }
.cw-rr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cw-rr-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.cw-rr-t { font-size: var(--fs-cell); font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-rr-s { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: var(--fs-caption); line-height: 1.4; letter-spacing: var(--caption-ls); color: var(--text-3); }
.cw-rr-n { font-size: var(--fs-body); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cw-rr-meta { font-size: var(--fs-caption); white-space: nowrap; }
.cw-rail-none { padding: var(--s-2) var(--s-3); }
.cw-rail-f { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); }
.cw-other { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2); background: var(--surface-2); border-radius: var(--r-button); }
.cw-other-t { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-caption); color: var(--text); }
.cw-other-t .i { color: var(--accent-mark); flex: none; }
.cw-other-l { display: flex; flex-direction: column; gap: 2px; }
.cw-other-l li { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-caption); color: var(--text-2); }
.cw-pick { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; min-width: 0; }
.cw-pick .cw-other { align-self: stretch; }

/* ── All work ─────────────────────────────────────────────────────────────────────────── */
.cw-all { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.cw-strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--s-2); }
.cw-strip .stat { min-height: 84px; }
.cw-strip .stat .stat-v { margin-top: auto; }
.cw-strip .stat .stat-l { margin-bottom: var(--s-2); }
.cw-strip .stat-v.is-none { font-size: var(--fs-cell); min-height: 1.75rem; }
.cw-strip button.stat:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .cw-strip button.stat:hover { background: var(--hover); } }
.cw-saved { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.cw-stack { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.cw-foot { padding: var(--s-2) var(--s-3); margin: 0; border-top: 1px solid var(--line); }
.cw-stack > .cw-foot { border-top: 0; padding: 0 var(--s-1); }
.cw-note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-3); color: var(--text-2); }
.cw-note p { margin: 0; max-width: var(--measure); }
.cw-jump { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3); }
.cw-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cw-bad { color: var(--text); font-weight: 700; }
.cw-kv { padding: var(--s-3); margin: 0; }
.cw-kv dd { font-variant-numeric: tabular-nums; }

/* rows: a post, a review, a feed, a citation, a lead (the dense Home row, in css/modules/home.css) */
.cw-thumb { width: 36px; height: 36px; flex: none; border-radius: var(--r-button); object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.cw-thumb--none { display: grid; place-items: center; color: var(--text-3); }
.cw-post .hrow-lead { width: 48px; }
.cw-review .hrow-acts, .cw-feed .hrow-acts, .cw-cite .hrow-acts { flex-wrap: wrap; justify-content: flex-end; }
.cw-feed .hrow-word { text-transform: none; }

/* a review card (the Reviews tab) */
.cw-rv-head { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border-bottom: 1px solid var(--line); }
.cw-rv-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-rv-who b { font-weight: 700; }
.cw-rv-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); }
.cw-quote { margin: 0; padding: 0; color: var(--text-2); max-width: var(--measure); }
.cw-rv-label { margin: var(--s-1) 0 0; }
.cw-draft { margin: 0; color: var(--text); max-width: var(--measure); white-space: pre-wrap; }

/* ── One client ───────────────────────────────────────────────────────────────────────── */
.cw-client { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.cw-client-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-2) var(--s-5); }
.cw-client-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; }
.cw-client-t { margin: 0; font-size: var(--fs-h2); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.cw-client-pg { margin-left: var(--s-1); }
.cw-kpis { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; }
.cw-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.cw-kpi-n { margin: 0; font-size: var(--fs-h3); font-weight: 800; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.cw-kpi-n.is-none { font-size: var(--fs-cell); font-weight: 600; color: var(--text-3); line-height: 1.6; }
.cw-kpi.is-bad .cw-kpi-n { color: var(--accent-mark); }
.cw-kpi-l { font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--caption-ls); color: var(--text-3); }
.cw-panel { padding-top: var(--s-3); }
.cw-bridge { margin: 0; }
.cw-route { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.cw-route-t { margin: 0; font-size: var(--fs-h3); font-weight: 700; }
.cw-route-s { margin: 0; color: var(--text-2); max-width: var(--measure); }
.cw-route .tbtn { max-width: 100%; height: auto; min-height: 32px; padding-block: 6px; white-space: normal; text-align: left; }
.cw-route .tbtn .i { margin-left: 2px; flex: none; }

@media (max-width: 719px) {
  .cw-client-h { align-items: flex-start; }
  .cw-kpis { gap: var(--s-2) var(--s-4); }
  .cw-post .hrow-lead { width: 44px; }
}

/* an anchor in the toolbar tier is a button, not a link: no underline */
.module--work a.tbtn, .module--work a.tbtn:hover { text-decoration: none; }

/* ── Waiting on client: the board by item type (M6, M21) ──────────────────────────────── */
/* No roster rail in this view: the board takes the width, and its Client select stands in for the rail. */
.module--work .cw-frame--board { grid-template-columns: minmax(0, 1fr); }
.cw-pane { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.cw-views { min-width: 0; }
.cw-waiting { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.cw-wtool { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.cw-wsum { margin: 0; font-size: var(--fs-cell); font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cw-wctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.cw-wsel { display: inline-flex; align-items: center; gap: var(--s-2); }
.cw-wsel .label { margin: 0; font-size: var(--fs-caption); }
.cw-wsel .select-wrap { width: 12rem; }
/* what is off, said once above the board, with the control that is off */
.cw-offstrip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.cw-offwhy { min-width: 0; flex: 1 1 18rem; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-2); }
.cw-offwhy b { color: var(--text); font-weight: 700; }
.cw-offrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding-top: var(--s-3); margin-top: var(--s-3); border-top: 1px solid var(--line); }
/* the board: the kit's board, column and card classes; a card has no stage menu, so its name takes the whole line */
.cw-board { padding-bottom: var(--s-3); }
.cw-board .col-meta { padding-left: 0; }
.cw-card .kcard-link { grid-column: 1 / -1; }
.cw-colnote { margin: 0; padding: 0 var(--s-1); }
.cw-colstate { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-1); min-width: 0; }
.cw-colstate--nc { padding: var(--s-3); border: 1px dashed var(--line-strong); border-radius: var(--r-card); }
.cw-nc-why { margin: 0; font-size: var(--fs-cell); font-weight: 600; color: var(--text); }
.cw-nc { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.cw-nc dt { margin-top: var(--s-2); font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--caption-ls); color: var(--text-3); }
.cw-nc dd { margin: 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.cw-board-phone .cw-colstate--nc { margin: 0; }
/* where each type comes from */
.cw-src { display: flex; flex-direction: column; }
.cw-src-row { padding: var(--s-3); border-top: 1px solid var(--line); }
.cw-src-row:first-child { border-top: 0; }
.cw-src-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-2); }
.cw-src-d { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2px var(--s-3); margin: 0; font-size: var(--fs-cell); }
.cw-src-d dt { color: var(--text-3); font-weight: 600; }
.cw-src-d dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; max-width: var(--measure); }
@media (max-width: 559px) { .cw-src-d { grid-template-columns: minmax(0, 1fr); } .cw-src-d dd { margin-bottom: var(--s-1); } }

/* the item sheet (it lives in the layer, so no module scope) */
.cw-sheet { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.cw-src-line { margin: 0; }
.cw-facts { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: 0; font-size: var(--fs-cell); }
.cw-facts dt { color: var(--text-3); font-weight: 600; }
.cw-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 479px) { .cw-facts { grid-template-columns: minmax(0, 1fr); } .cw-facts dd { margin-bottom: var(--s-1); } }
.cw-sh { margin: var(--s-3) 0 0; }
.cw-text { margin: 0; color: var(--text); max-width: var(--measure); white-space: pre-wrap; overflow-wrap: anywhere; }
.cw-photo { width: 96px; height: 96px; border-radius: var(--r-button); object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.cw-remind { margin: 0; max-width: var(--measure); }
.cw-diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.cw-diff-col { min-width: 0; }
.cw-diff-k { margin: var(--s-2) 0 2px; font-size: var(--fs-caption); font-weight: 600; color: var(--text-3); }
@media (max-width: 559px) { .cw-diff { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.cw-latest { margin-top: var(--s-2); }
.cw-acts-list { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-2) 0 0; }
.cw-acts-list li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-acts-list b { font-size: var(--fs-cell); font-weight: 700; }
.cw-queue-link { margin: var(--s-2) 0 0; }