/* Comms window · the Booker view ("Calls · Booker"). Layout and the few controls the design system does not ship,
   for the classes the vendored render layer writes (ch-*). Every colour is a token (var(--wx-*)) from the vendored
   design system (ds/tokens.css), never a typed colour, and no wx-* component is restyled here.
   The view is a surface of its own (wx-base: paper ground, ink type), so it reads the same in every skin and in
   light and dark, which follow the system through the tokens. It sizes to the WINDOW, not the screen: the
   70 / 30 split needs room, so the breakpoints are container queries on .bk. */

/* .comms-view is a shrinking flex item (flex: 1 1 auto; min-height: 0); a view this tall must keep its own height and let the window body scroll */
.bk { container-type: inline-size; container-name: bk; min-width: 0; flex: 0 0 auto; min-height: auto; padding: var(--wx-s4); border: 1px solid var(--wx-hair); border-radius: var(--wx-radius); }
.bk [hidden] { display: none !important; }

/* the desk's own element rules (h3 caps, form labels, boxed inputs) are for its windows; this surface keeps the system's */
.bk h2, .bk h3 { text-transform: none; letter-spacing: normal; color: inherit; margin: 0; }
.bk .ch-form label { text-transform: none; letter-spacing: normal; color: var(--wx-ink); margin: 0; }
.bk .wx-input, .bk .ch-input { margin-top: 0; font-family: var(--wx-sans); letter-spacing: normal; text-transform: none; }
.bk .ch-input { font-size: 15px; }
.bk ul, .bk ol { margin: 0; padding: 0; }

.bk .ch-spacer { flex: 1; }
.bk .ch-halt { display: flex; align-items: center; gap: var(--wx-s4); flex-wrap: wrap; padding: var(--wx-s3) var(--wx-s5);
  border: 1px solid var(--wx-ink); border-radius: var(--wx-radius); background: var(--wx-well); margin-bottom: var(--wx-s3); }
/* the tabs and the page controls share one row that wraps (wx-bar is a fixed 34 px line and is left as the system ships it) */
.bk .ch-tabsrow { display: flex; gap: var(--wx-s2); flex-wrap: wrap; align-items: center; padding: var(--wx-s3) 0; }
.bk .ch-tabs, .bk .ch-pagectl { display: flex; gap: var(--wx-s2); flex-wrap: wrap; align-items: center; }
/* what does not fit a window bar sits in the line under it */
.bk .ch-barsub { margin: 0; padding: var(--wx-s2) var(--wx-s6) 0; display: flex; gap: var(--wx-s3); flex-wrap: wrap; align-items: center; }
.bk .ch-note { min-height: 1.2em; margin: 0 0 var(--wx-s3); }
.bk .ch-main { min-width: 0; }
.bk .ch-status { display: flex; gap: var(--wx-s5); flex-wrap: wrap; align-items: center; padding: var(--wx-s3) 0 0; margin-top: var(--wx-s4);
  border-top: 1px solid var(--wx-hair); font: 400 11px/1.4 var(--wx-mono); color: var(--wx-ink-2); }

/* the 70 / 30 split */
.bk .ch-calls { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--wx-s5); align-items: start; }
.bk .ch-left, .bk .ch-right { display: grid; gap: var(--wx-s5); min-width: 0; }
.bk .ch-view { display: grid; gap: var(--wx-s5); min-width: 0; }
.bk .ch-win { min-width: 0; }
.bk .ch-bar-title { font: 700 13px/1.3 var(--wx-sans); margin: 0; }
.bk .ch-winbody { padding: var(--wx-s5) var(--wx-s6); display: grid; gap: var(--wx-s5); min-width: 0; }
.bk .ch-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wx-s5); }

/* contact */
.bk .ch-contact { display: flex; align-items: center; gap: var(--wx-s5); flex-wrap: wrap; padding: var(--wx-s5) var(--wx-s6); }
.bk .ch-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--wx-well); border: 1px solid var(--wx-hair); font: 600 13px/1 var(--wx-mono); color: var(--wx-ink); }
.bk .ch-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; }
.bk .ch-who b { font: 700 22px/1.15 var(--wx-sans); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.bk .ch-chips { display: flex; gap: var(--wx-s2); flex-wrap: wrap; align-items: center; min-width: 0; }
.bk .ch-lampword { display: inline-flex; align-items: center; gap: var(--wx-s2); font: 500 11px/1.3 var(--wx-mono); color: var(--wx-ink-2); white-space: nowrap; }
/* the footer lines are sentences, not labels: they wrap */
.bk .ch-status .ch-lampword { white-space: normal; }

/* Scribe + Liminade: the transcript beside the face when wide, the face first when narrow */
.bk .ch-scribe { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "tx lim"; min-height: 360px; }
.bk .ch-liminade { grid-area: lim; padding: var(--wx-s5) var(--wx-s6); display: flex; flex-direction: column; gap: var(--wx-s5);
  background: var(--wx-surface); border-left: 1px solid var(--wx-hair-2); min-width: 0; }
.bk .ch-transcript { grid-area: tx; display: flex; flex-direction: column; min-width: 0; }
.bk .ch-lists { display: grid; gap: var(--wx-s5); }

/* the face card: the decision surface (data-ads="decision"). Body 16 px, leading 1.35, a measure in ch. */
.bk .ch-face { font-family: var(--wx-sans); font-size: 16px; line-height: 1.35; max-width: 64ch; color: var(--wx-ink);
  background: var(--wx-sheet); border: var(--wx-border-active); border-radius: var(--wx-radius); padding: var(--wx-s5) var(--wx-s6);
  display: flex; flex-direction: column; gap: var(--wx-s3); }
.bk .ch-face.is-empty { background: transparent; border: 1px dashed var(--wx-line-quiet); }
.bk .ch-face-tags { display: flex; gap: var(--wx-s2); flex-wrap: wrap; align-items: center; }
.bk .ch-face-at { font-size: 15px; color: var(--wx-ink-2); }
.bk .ch-face-head { font: 700 22px/1.2 var(--wx-sans); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.bk .ch-face-quote { margin: 0; font-size: 16px; line-height: 1.35; color: var(--wx-ink-2); }
.bk .ch-face-nums { margin: 0; display: flex; gap: var(--wx-s2); flex-wrap: wrap; align-items: center; font-size: 15px; color: var(--wx-ink-2); }
.bk .ch-face-why { margin: 0; font-size: 15px; line-height: 1.35; color: var(--wx-ink-2); }
.bk .ch-face-acts { display: flex; gap: var(--wx-s3); flex-wrap: wrap; }
.bk .ch-edit { min-height: 88px; font-size: 16px; }

.bk .ch-small { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wx-s2); }
.bk .ch-small li { display: flex; gap: var(--wx-s3); align-items: baseline; justify-content: space-between; font-size: 13px; min-width: 0; }
.bk .ch-small li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.bk .ch-muted { color: var(--wx-ink-3); }
.bk .ch-law { margin: 0; font: 400 11px/1.5 var(--wx-mono); color: var(--wx-ink-3); }
.bk .ch-prose { margin: 0; max-width: 70ch; color: var(--wx-ink-2); font-size: 14px; line-height: 1.45; }
.bk .ch-block { display: block; }
.bk .ch-sub { margin: var(--wx-s3) 0 0; font: 700 13px/1.3 var(--wx-sans); }

/* transcript */
.bk .ch-tlist { list-style: none; margin: 0; padding: var(--wx-s5) var(--wx-s6); display: grid; gap: var(--wx-s4); max-height: 420px;
  overflow-y: auto; align-content: start; flex: 1; }
.bk .ch-line { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--wx-s4); }
.bk .ch-line-t { font: 400 10.5px/1.6 var(--wx-mono); color: var(--wx-ink-3); padding-top: 2px; }
.bk .ch-line-who { font: 600 10px/1.4 var(--wx-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wx-ink-3); }
.bk .ch-line.is-near .ch-line-who { color: var(--wx-ink); }
.bk .ch-line-txt { margin: 1px 0 4px; font-size: 15px; line-height: 1.4; color: var(--wx-ink); overflow-wrap: anywhere; }
.bk .ch-line.is-near .ch-line-txt { color: var(--wx-ink-2); }
.bk .ch-line-meta { display: flex; gap: var(--wx-s1); flex-wrap: wrap; }
.bk .ch-empty { color: var(--wx-ink-3); max-width: 46ch; }
.bk .ch-empty b { display: block; color: var(--wx-ink); font: 600 15px/1.3 var(--wx-sans); margin-bottom: var(--wx-s1); }
.bk .ch-strip { border-top: 1px solid var(--wx-hair-2); padding: var(--wx-s3) var(--wx-s6) var(--wx-s4); }
.bk .ch-strip canvas { display: block; width: 100%; height: 58px; }
.bk .ch-legend { display: flex; justify-content: space-between; gap: var(--wx-s3); flex-wrap: wrap; font: 400 10.5px/1.4 var(--wx-mono); color: var(--wx-ink-3); margin-top: var(--wx-s1); }

/* rail instruments */
.bk .ch-kvs { padding: var(--wx-s4) var(--wx-s5); display: grid; gap: var(--wx-s2); min-width: 0; }
.bk .ch-kv { display: flex; justify-content: space-between; gap: var(--wx-s3); align-items: baseline; font-size: 13px; }
.bk .ch-num { font: 500 12px/1.3 var(--wx-mono); font-variant-numeric: tabular-nums; }
.bk .ch-big .ch-num, .bk .ch-big { font: 800 40px/1.05 var(--wx-sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.bk .ch-ns { font: 400 11px/1.3 var(--wx-mono); color: var(--wx-ink-3); }
.bk .ch-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: var(--wx-s1); }
.bk .ch-row { display: flex; gap: var(--wx-s3); flex-wrap: wrap; align-items: center; }
.bk .ch-mono-note { font: 400 11px/1.3 var(--wx-mono); color: var(--wx-ink-2); }

/* the handset (fixture visuals): a slab device, neutral tokens only, no red / green */
.bk .ch-endpoint { padding: var(--wx-s5); display: grid; gap: var(--wx-s5); justify-items: center; }
.bk .ch-phone { width: 100%; max-width: 280px; background: var(--wx-slab); border: 1px solid var(--wx-slab-line); border-radius: 30px; padding: 10px; }
.bk .ch-screen { min-height: 470px; border-radius: 22px; background: var(--wx-slab); border: 1px solid var(--wx-slab-line); color: var(--wx-slab-ink);
  display: flex; flex-direction: column; padding: var(--wx-s4) var(--wx-s5) var(--wx-s6); }
.bk .ch-ph-bar { display: flex; justify-content: space-between; font: 500 11px/1.2 var(--wx-mono); color: var(--wx-slab-ink-2); }
.bk .ch-ph-bar .ch-num { font: 500 11px/1.2 var(--wx-mono); color: var(--wx-slab-ink); }
.bk .ch-ph-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--wx-s3); padding-top: var(--wx-s9); }
.bk .ch-ph-state { font: 500 12px/1.3 var(--wx-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wx-slab-ink-2); }
.bk .ch-ph-name { font: 700 22px/1.2 var(--wx-sans); letter-spacing: -0.02em; }
.bk .ch-ph-num { font: 500 15px/1.3 var(--wx-mono); color: var(--wx-slab-ink); }
.bk .ch-ph-timer .ch-num { font: 500 22px/1.2 var(--wx-mono); color: var(--wx-slab-ink); }
.bk .ch-ph-note { font: 400 11px/1.5 var(--wx-mono); color: var(--wx-slab-ink-2); max-width: 26ch; }
.bk .ch-ph-btns { margin-top: auto; display: flex; gap: var(--wx-s7); justify-content: center; flex-wrap: wrap; padding-top: var(--wx-s7); }
.bk .ch-ph-btn { display: flex; flex-direction: column; align-items: center; gap: var(--wx-s2); min-width: var(--wx-tap); min-height: var(--wx-tap);
  background: transparent; border: 0; color: var(--wx-slab-ink); font: 500 12px/1.2 var(--wx-sans); cursor: pointer; padding: 0; }
.bk .ch-ph-circ { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--wx-slab-ink); background: transparent; }
.bk .ch-ph-btn.is-end .ch-ph-circ { border-style: dashed; }
.bk .ch-ph-btn[aria-pressed="true"] .ch-ph-circ { background: var(--wx-slab-ink); }
.bk .ch-ph-btn[aria-pressed="true"] svg { fill: var(--wx-slab); }
.bk .ch-ph-circ svg { width: 22px; height: 22px; fill: var(--wx-slab-ink); }
.bk .ch-ph-btn:focus-visible { outline: 2px solid var(--wx-slab-ink); outline-offset: 2px; }
.bk .ch-ph-btn:disabled { opacity: .55; cursor: not-allowed; }   /* the handset is the fixture's: against the agent it is shown, not driven (same dimming as .wx-btn:disabled) */
.bk .ch-replay { width: 100%; display: grid; gap: var(--wx-s3); }

/* other views */
.bk .ch-verdict { display: flex; gap: var(--wx-s5); align-items: flex-start; flex-wrap: wrap; padding: var(--wx-s5) var(--wx-s6);
  border: var(--wx-border-active); border-radius: var(--wx-radius-window); background: var(--wx-sheet); }
.bk .ch-verdict p { margin: 0; max-width: 70ch; }
.bk .ch-verdict-text { flex: 1; min-width: 0; display: grid; gap: var(--wx-s2); }
.bk .ch-tbl { overflow-x: auto; max-width: 100%; }
.bk .ch-tbl table { min-width: 100%; }
.bk .ch-json { margin: 0; max-height: 360px; overflow: auto; }
.bk .ch-form { display: grid; gap: var(--wx-s5); max-width: 60ch; }
.bk .ch-form label { display: grid; gap: var(--wx-s1); font: var(--wx-label); }
.bk .ch-input { min-height: var(--wx-tap); padding: var(--wx-s3) var(--wx-s5); border: 1px solid var(--wx-ink);
  border-radius: var(--wx-radius); background: var(--wx-sheet); color: var(--wx-ink); width: 100%; min-width: 0; }
.bk .ch-input:focus-visible { outline: var(--wx-focus); outline-offset: 2px; }

/* the window narrower than the split needs: one column, the decision first */
@container bk (max-width: 900px) {
  .bk .ch-calls { grid-template-columns: minmax(0, 1fr); }
  .bk .ch-scribe { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lim" "tx"; }
  .bk .ch-liminade { border-left: 0; border-bottom: 1px solid var(--wx-hair-2); }
}
@container bk (max-width: 560px) {
  .bk .ch-two { grid-template-columns: minmax(0, 1fr); }
  .bk .ch-liminade, .bk .ch-winbody { padding: var(--wx-s4); }
  .bk .ch-tlist { padding: var(--wx-s4); }
  .bk .ch-strip { padding-inline: var(--wx-s4); }
  /* the five tabs fit one line (Settings no longer sits alone on a second row) */
  .bk .ch-tabs { gap: var(--wx-s1); }
  .bk .ch-tabs > button { padding-inline: 10px; }
  /* tables become stacked rows: every cell carries its own column name (data-label); no column is cut off at a scroll
     edge and none is squeezed to a letter wide. The header row stays in the document for assistive tech. */
  .bk .ch-tbl table, .bk .ch-tbl tbody, .bk .ch-tbl tr, .bk .ch-tbl td { display: block; }
  .bk .ch-tbl table { min-width: 0; }
  .bk .ch-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bk .ch-tbl tr { padding: var(--wx-s3) 0; border-top: 1px solid var(--wx-hair-2); }
  .bk .ch-tbl tbody tr:first-child { border-top: 0; }
  .bk .ch-tbl td { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--wx-s3); padding: 2px 0; border: 0; overflow-wrap: anywhere; }
  .bk .ch-tbl td::before { content: attr(data-label); font: 600 11px/1.4 var(--wx-sans); color: var(--wx-ink-3); }
  .bk .ch-tbl td:empty { display: none; }
  .bk .ch-tbl td[colspan] { display: block; }
  .bk .ch-tbl td[colspan]::before { content: none; }
}

/* the Comms bar above the view: 44 px controls at phone width (px, not rem: this desk's root size is under 16 px) */
@media (max-width: 720px) {
  .comms-bar .act.small { min-height: 44px; min-width: 44px; }
}