/* Sacred Command Center · the client channel (call item 10, staff side): the Messages tab, Inbox > Client messages, the Client portal panel on a
   project, and the Client-made asset card on the Waiting on client board. Semantic tokens only: no hex, no rgba (tests/static.mjs S-a2).
   A state is a word, never a colour alone. Dark is the default; every colour is a token, so Light follows. */

/* ── Messages tab ──────────────────────────────────────────────────────────────────────── */
.cch-wrap { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.cch-thread { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; max-height: min(32rem, 62vh); overflow-y: auto; padding: var(--s-3); }
.cch-day { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.cch-day-h { margin: 0; display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.cch-day-h::before, .cch-day-h::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line); }
.cch-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.cch-msg { display: flex; min-width: 0; }
.cch-msg--staff { justify-content: flex-end; }
.cch-bubble { max-width: min(36rem, 86%); min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.cch-msg--staff .cch-bubble { background: var(--raised); border-color: var(--line-strong); }
.cch-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.cch-meta { margin: 4px 0 0; font-size: var(--fs-caption); color: var(--text-3); display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
.cch-unread { font-weight: 700; color: var(--accent-text); }
.cch-composer { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-top: 1px solid var(--line); }
.cch-composer .textarea { min-height: 96px; width: 100%; }
.cch-count { font-variant-numeric: tabular-nums; color: var(--text-3); font-size: var(--fs-caption); }
.cch-count.is-over { color: var(--accent-text); font-weight: 700; }
.cch-send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.cch-reach { margin: 0; color: var(--text-2); font-size: var(--fs-caption); max-width: var(--measure); }
.cch-err { margin: 0; color: var(--accent-text); font-weight: 600; font-size: var(--fs-caption); }
.cch-off { margin: 0; color: var(--text-2); font-size: var(--fs-caption); }
.cch-empty { padding: var(--s-5) var(--s-3); text-align: center; color: var(--text-3); }

/* ── Inbox > Client messages ───────────────────────────────────────────────────────────── */
.cch-inbox { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-3) 0; }
.cch-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.cch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); align-items: baseline; padding: var(--s-3); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); min-height: var(--tap); }
.cch-list > li:last-child .cch-row { border-bottom: 0; }
@media (hover: hover) { a.cch-row:hover { background: var(--hover); } }
.cch-row-n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cch-row-t { color: var(--text-3); font-size: var(--fs-caption); white-space: nowrap; }
.cch-row-l { grid-column: 1 / -1; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cch-chip { display: inline-flex; align-items: center; margin-left: var(--s-2); padding: 0 var(--s-2); min-width: 1.5rem; justify-content: center; border-radius: var(--r-button); background: var(--accent); color: var(--on-accent); font-size: var(--fs-caption); font-weight: 700; font-variant-numeric: tabular-nums; }
.cch-sum { margin: 0; color: var(--text-2); }

/* ── The Client portal panel on a project ──────────────────────────────────────────────── */
.cch-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3); min-width: 0; }
@container rp-main (min-width: 760px) { .cch-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.cch-ctl { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.cch-ctl .textarea { min-height: 72px; width: 100%; }
.cch-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.cch-pub { margin: 0; color: var(--text-2); font-size: var(--fs-caption); }
.cch-sub { margin: 0 0 var(--s-2); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }

/* What the client sees: a mock of the portal's progress card */
.cch-pcard { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface-2); min-width: 0; }
.cch-pcard.is-hidden { border-style: dashed; }
.cch-pcard-t { margin: 0; font-weight: 700; font-size: var(--fs-h3); overflow-wrap: anywhere; }
.cch-pcard-pct { display: flex; align-items: center; gap: var(--s-3); }
.cch-pcard-pct .num { font-weight: 700; min-width: 4.5ch; font-variant-numeric: tabular-nums; }
.cch-pcard-pct .bar { flex: 1 1 auto; min-width: 0; }
.cch-pcard-no { margin: 0; color: var(--text-2); font-weight: 600; }
.cch-pcard-why { margin: 0; font-size: var(--fs-caption); color: var(--text-3); }
.cch-pcard-l { margin: 0; color: var(--text-2); }
.cch-pcard-note { margin: 0; padding-top: var(--s-2); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.cch-hidden-w { margin: 0; font-weight: 700; color: var(--text-2); }

/* ── Waiting on client: the Client-made asset card and its sheet ───────────────────────── */
.cw-card--asset { position: relative; }
.cw-thumb { display: block; width: 100%; max-height: 7.5rem; object-fit: cover; border-radius: var(--r-button); border: 1px solid var(--line); background: var(--surface-2); }
.cw-card--asset .kcard-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.cw-asset-big { display: block; width: 100%; max-width: 22rem; max-height: 60vh; object-fit: contain; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface-2); margin: 0 auto; }
.cw-asset-note { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.cw-asset-note .textarea { width: 100%; min-height: 80px; }
.kcard.cw-card--asset { max-height: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s-1); }
.kcard.cw-card--asset > * { grid-column: 1; grid-row: auto; }
.cw-card--asset .kcard-acts { position: relative; z-index: 1; }
.cw-card--asset .kcard-next { min-height: 1.25rem; }
.cch-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); min-width: 0; }
.cch-lead { margin: 0; padding: var(--s-3) var(--s-3) 0; color: var(--text-2); max-width: var(--measure); }
.cch-lead b { color: var(--text); }
.cw-wsums { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cw-asum { color: var(--text-3); font-weight: 600; }

/* ── Questions tab and the Question card on the Waiting on client board ───────────────── */
.qn-wrap { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.qn-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); min-width: 0; }
.qn-sum { margin: 0; color: var(--text-2); font-weight: 600; min-width: 0; }
.qn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.qn-q { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-3); border-top: 1px solid var(--line); min-width: 0; }
.qn-list > .qn-q:first-child { border-top: 0; }
.qn-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); min-width: 0; }
.qn-t { font-size: var(--fs-body); font-weight: 700; min-width: 0; overflow-wrap: anywhere; flex: 1 1 18rem; }
.qn-chips { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.qn-meta { margin: 0; color: var(--text-2); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.qn-sep { color: var(--text-3); }
.qn-body { margin: 0; font-size: var(--fs-cell); color: var(--text-2); max-width: var(--measure); overflow-wrap: anywhere; white-space: pre-wrap; }
.qn-opts { list-style: none; margin: var(--s-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); max-width: var(--measure); }
.qn-opt { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-button); background: var(--surface-2); min-width: 0; }
.qn-opt.is-picked { border-color: var(--line-strong); background: var(--raised); }
.qn-opt-l { font-weight: 600; overflow-wrap: anywhere; }
.qn-opt-d { color: var(--text-3); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.qn-picked { font-size: var(--fs-caption); font-weight: 700; color: var(--text-2); }
.qn-ans { margin: var(--s-1) 0 0; padding: var(--s-2) var(--s-3); border-left: 2px solid var(--line-strong); background: var(--surface-2); overflow-wrap: anywhere; }
.qn-staff { margin: 0; color: var(--text-3); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.qn-staff b { color: var(--text-2); }