/* SHARED·WHOROW (441) — the .lg-top-r slot's two alternate contents: the who-chip (avatar +
 * age) and the multi-log switch (same box, teal because it acts, D-440). Copy-first port off
 * logger-surface.css's own "THE TOPBAR PILL" + "MULTI-LOG" blocks (workbench/weaning/_shared/
 * logger-surface.css) — class names unchanged for check 65.
 *
 * ⚠️ .lg-who AND .lg-multi ARE DECLARED TOGETHER, ON PURPOSE, IN THE KEPT SOURCE — the source's
 * own comment says they were "hand-matched in two files for one afternoon", which is exactly
 * how two pills drift by a pixel with nobody able to say which is right. Kept as one rule here
 * too, for the same reason. */
.lg-who, .lg-multi { display: inline-flex; align-items: center; gap: var(--space-8);
  background: var(--surface-card); border-radius: var(--radius-pill); flex: 0 0 auto;
  padding: var(--space-4) var(--space-12) var(--space-4) var(--space-4); }
.lg-who-av, .lg-multi .av { width: var(--dim-24); height: var(--dim-24); flex: 0 0 auto;
  border-radius: var(--radius-round);
  background: var(--teal-100); color: var(--accent); display: grid; place-items: center;
  overflow: hidden; object-fit: cover; }
.lg-who-av svg, .lg-multi .av svg { width: var(--dim-16); height: var(--dim-16); }
.lg-who-a, .lg-multi .lb { font-family: var(--font-label); font-size: var(--text-label);
  font-weight: var(--weight-600); color: var(--text-primary); }

/* MULTI-LOG — takes the who-chip's slot on the logging screen (D-440, 2026-08-09: six placements
 * tried, this is the one that survived — see the kept source for the full record). Teal copy is
 * the one departure from .lg-who: this pill ACTS, the who-chip STATES.
 *
 * ⚠️ ONE DELIBERATE DEVIATION FROM THE KEPT SOURCE: the label colour. The kept source uses
 * --accent (teal-600) at 11px/600 on --surface-card, which measures 4.23:1 — under the 4.5:1
 * floor (check: contrast-audit). --accent-hover (teal-700) clears it at 5.82:1 and is already
 * this app's own darker teal for exactly this situation elsewhere. A hard accessibility gate,
 * not a style opinion — ported everything else byte-for-byte, fixed only the one value that
 * fails WCAG. */
.lg-multi { border: 0; cursor: pointer; }
.lg-multi .lb { color: var(--accent-hover); }
/* ON — fill and label carry the state, never the glyph. A × in the disc would sit two
 * centimetres from the real close button and mean something else entirely. */
.lg-multi[aria-pressed="true"] { background: var(--accent); }
.lg-multi[aria-pressed="true"] .lb { color: var(--cream-75); }
.lg-multi[aria-pressed="true"] .av { background: var(--cream-75); color: var(--accent); }
.lg-multi:active { opacity: 0.72; }
.lg-multi:focus-visible { outline: var(--focus-ring); outline-offset: var(--radius-2); }