/* =====================================================================
   ADR design system · components.css
   Framework-agnostic, dependency-free. Requires tokens.css first.
   Naming: ui-block, ui-block__element, ui-block--modifier.
   States use native pseudo-classes and ARIA/data attributes, never
   presentational state classes:
     :hover :focus-visible :active
     [disabled] [aria-disabled="true"]   disabled (keep the reason in title/aria-describedby)
     [aria-busy="true"]                  loading
     [aria-invalid="true"]               error
     [aria-pressed|selected|checked|current] selected / on
     [data-state] [data-tone] [data-level] [data-mod]  semantic variants
   Sections: 1 base · 2 type · 3 icon, kbd · 4 buttons · 5 form controls ·
   6 field, setting · 7 badges, codes · 8 state · 9 navigation · 10 panels ·
   11 tables · 12 toolbars, filters · 13 menus, overlays · 14 feedback ·
   15 data viz · 16 misc · 16b pickers · 16c choice · 16d structure ·
   16e editors · 17 shell · 18 agent · 19 supervisor, TV ·
   20 layouts · 21 responsive · 22 motion, forced colors
   ===================================================================== */

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: var(--body-fs);
  line-height: var(--lh-md);
  font-weight: var(--fw-regular);
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
ul[role], ol[role], .ui-list { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
img, svg { display: block; max-width: 100%; }
table { border-collapse: separate; border-spacing: 0; }
::selection { background: var(--accent-soft-2); }
[hidden] { display: none !important; }

/* Focus: one solid ring with a 2px gap, everywhere. Outline (not box-shadow)
   so it survives forced-colors mode and never needs a per-component override. */
:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }

.ui-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ui-skip {
  position: absolute; left: var(--s-8); top: -100px; z-index: var(--z-tooltip);
  padding: var(--s-8) var(--s-12); border-radius: var(--r-md);
  background: var(--accent); color: var(--accent-fg); font-weight: var(--fw-semibold);
}
.ui-skip:focus { top: var(--s-8); }

/* ---------- 2. Typography helpers ---------- */
.ui-num, .ui-timer, time { font-feature-settings: var(--font-features-num); }
.ui-code, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: normal;
  letter-spacing: 0;
}
.ui-caps {
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-3);
}
.ui-legacy {
  font-family: var(--font-mono); font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  color: var(--text-3); font-feature-settings: normal; white-space: nowrap;
}
.ui-h1 { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-title); }
.ui-h2 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); }
.ui-h3 { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-semibold); }
.ui-text-2 { color: var(--text-2); }
.ui-text-3 { color: var(--text-3); }
.ui-strong { font-weight: var(--fw-semibold); color: var(--text); }
.ui-small { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.ui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ui-nowrap { white-space: nowrap; }
.ui-spacer { flex: 1 1 auto; }
.ui-row { display: flex; align-items: center; gap: var(--s-8); min-width: 0; }
.ui-stack { display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; }
.ui-stack > * { flex-shrink: 0; }
.ui-divider-v { width: 1px; align-self: stretch; background: var(--border); flex: none; }
hr.ui-divider { border: 0; border-top: 1px solid var(--border); margin: var(--s-12) 0; color: var(--border); height: 0; }

/* ---------- 3. Icon, kbd ---------- */
.ui-icon {
  width: var(--icon); height: var(--icon); flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.ui-icon--xs { width: 12px; height: 12px; stroke-width: 2; }
.ui-icon--sm { width: 14px; height: 14px; }
.ui-icon--lg { width: 20px; height: 20px; }
.ui-icon--xl { width: 24px; height: 24px; }

.ui-keys { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.ui-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border: 1px solid var(--kbd-border); border-bottom-width: 2px; border-radius: var(--r-xs);
  background: var(--kbd-bg); color: var(--kbd-text);
  font: var(--fw-medium) var(--fs-2xs)/1 var(--font-mono);
  font-feature-settings: var(--font-features-num); white-space: nowrap;
}
/* Key cap on a solid fill (primary, danger, hang up): the fill shows through, so the
   cap text keeps the fill's own on-color contrast (a translucent wash would erode it). */
.ui-kbd--on-fill, .ui-btn--primary .ui-kbd, .ui-btn--danger-solid .ui-kbd, .ui-callctl--hangup .ui-kbd {
  background: transparent;
  border-color: color-mix(in srgb, currentColor 55%, transparent);
  color: inherit;
}
.ui-kbd--lg { min-width: 22px; height: 22px; font-size: var(--fs-xs); }

/* ---------- 4. Buttons ---------- */
.ui-btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--border);
  --btn-bd-hover: var(--border-strong);
  --btn-bg-hover: var(--surface-2);
  --btn-bg-active: var(--surface-3);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-6);
  height: var(--ctl-h); padding: 0 var(--ctl-px);
  border: 1px solid var(--btn-bd); border-radius: var(--r-md);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--ctl-fs); font-weight: var(--fw-medium); line-height: 1;
  white-space: nowrap; text-decoration: none; user-select: none;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.ui-btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bd-hover); color: var(--btn-fg); }
.ui-btn:active { background: var(--btn-bg-active); transform: scale(0.97); }
.ui-btn--primary {
  --btn-bg: var(--accent); --btn-fg: var(--accent-fg); --btn-bd: var(--accent);
  --btn-bg-hover: var(--accent-hover); --btn-bg-active: var(--accent-press); --btn-bd-hover: var(--accent-hover);
}
.ui-btn--primary:hover { border-color: var(--accent-hover); }
.ui-btn--ghost {
  --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--text-2);
  box-shadow: none;
}
.ui-btn--ghost:hover { --btn-fg: var(--text); }
.ui-btn--danger { --btn-fg: var(--danger-text); --btn-bg-hover: var(--danger-soft); }
.ui-btn--danger-solid {
  --btn-bg: var(--danger-fill); --btn-fg: var(--danger-on); --btn-bd: var(--danger-fill);
  --btn-bg-hover: var(--danger-hover); --btn-bg-active: var(--danger-hover);
}
.ui-btn--link {
  --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--link); --btn-bg-hover: transparent; --btn-bg-active: transparent;
  height: auto; padding: 0; box-shadow: none; font-weight: var(--fw-medium);
}
.ui-btn--link:hover { text-decoration: underline; }
.ui-btn--sm { height: var(--ctl-h-sm); padding: 0 var(--s-8); font-size: var(--fs-xs); gap: var(--s-4); }
.ui-btn--lg { height: var(--ctl-h-lg); padding: 0 var(--s-16); font-size: var(--fs-md); }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn--icon { width: var(--ctl-h); padding: 0; }
.ui-btn--icon.ui-btn--sm { width: var(--ctl-h-sm); }
.ui-btn[aria-pressed="true"], .ui-btn[aria-expanded="true"] {
  --btn-bg: var(--accent-soft); --btn-bg-hover: var(--accent-soft-2); --btn-fg: var(--accent-text); --btn-bd: var(--accent);
}
.ui-btn[disabled], .ui-btn[aria-disabled="true"] {
  --btn-bg: var(--surface-2); --btn-bg-hover: var(--surface-2); --btn-bg-active: var(--surface-2);
  --btn-fg: var(--text-disabled); --btn-bd: var(--border);
  cursor: not-allowed; box-shadow: none;
}
.ui-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.ui-btn[aria-busy="true"] > * { visibility: hidden; }
.ui-btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--btn-fg); border-right-color: transparent;
  animation: ui-spin 0.7s linear infinite;
}
.ui-btn .ui-keys { margin-left: var(--s-2); }
.ui-btn-group { display: inline-flex; }
.ui-btn-group > .ui-btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.ui-btn-group > .ui-btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ui-btn-group > .ui-btn:focus-visible { z-index: 1; }

/* ---------- 5. Form controls ---------- */
.ui-input, .ui-select, .ui-textarea {
  display: block; width: 100%; min-width: 0;
  height: var(--ctl-h); padding: 0 var(--s-10);
  border: 1px solid var(--border-input); border-radius: var(--r-md);
  background: var(--input-bg); color: var(--text);
  font-size: var(--ctl-fs); line-height: var(--lh-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.ui-textarea { height: auto; min-height: calc(var(--ctl-h) * 2); padding: var(--s-6) var(--s-10); resize: vertical; }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--text-placeholder); opacity: 1; }
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--border-input-hover); }
.ui-input:focus-visible, .ui-select:focus-visible, .ui-textarea:focus-visible { border-color: var(--accent); outline-offset: 1px; }
.ui-input[aria-invalid="true"], .ui-select[aria-invalid="true"], .ui-textarea[aria-invalid="true"] {
  border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger);
}
.ui-input[data-warn], .ui-select[data-warn] { border-color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning); }
.ui-input[readonly], .ui-textarea[readonly] { background: var(--input-bg-readonly); border-color: var(--border-strong); }
.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled {
  background: var(--surface-2); border-color: var(--border); color: var(--text-disabled); cursor: not-allowed;
}
.ui-input--num { text-align: right; font-feature-settings: var(--font-features-num); }
.ui-input--mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
.ui-input--sm, .ui-select--sm { height: var(--ctl-h-sm); font-size: var(--fs-xs); }
/* Native select with a currentColor chevron (no images, no raw colors) */
.ui-select {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--s-32);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
.ui-select:disabled { background-image: none; }

.ui-inputgroup {
  display: flex; align-items: stretch; min-width: 0;
  border: 1px solid var(--border-input); border-radius: var(--r-md); background: var(--input-bg);
}
.ui-inputgroup:hover { border-color: var(--border-input-hover); }
.ui-inputgroup:focus-within { border-color: var(--accent); outline: var(--focus-w) solid var(--focus); outline-offset: 1px; }
.ui-inputgroup:has([aria-invalid="true"]) { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.ui-inputgroup > .ui-input, .ui-inputgroup > .ui-select { border: 0; box-shadow: none; background-color: transparent; height: calc(var(--ctl-h) - 2px); }
.ui-inputgroup > .ui-input:focus-visible { outline: none; }
.ui-inputgroup__addon {
  display: inline-flex; align-items: center; padding: 0 var(--s-8); flex: none;
  color: var(--text-3); font-size: var(--fs-xs); background: var(--surface-2);
}
.ui-inputgroup__addon:first-child { border-right: 1px solid var(--border); border-radius: var(--r-md) 0 0 var(--r-md); }
.ui-inputgroup__addon:last-child { border-left: 1px solid var(--border); border-radius: 0 var(--r-md) var(--r-md) 0; }
.ui-inputgroup__icon { display: inline-flex; align-items: center; padding-left: var(--s-8); color: var(--text-3); }

.ui-search { position: relative; display: flex; align-items: center; min-width: 0; }
.ui-search > .ui-icon { position: absolute; left: var(--s-10); color: var(--text-3); pointer-events: none; }
.ui-search > .ui-input { padding-left: var(--s-32); padding-right: var(--s-40); }
.ui-search > .ui-keys { position: absolute; right: var(--s-8); }

.ui-check { display: inline-flex; align-items: center; gap: var(--s-8); cursor: pointer; min-height: 20px; font-size: var(--ctl-fs); }
.ui-check > input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.ui-check:has(input:disabled) { color: var(--text-disabled); cursor: not-allowed; }

.ui-switch { vertical-align: middle;
  appearance: none; -webkit-appearance: none; flex: none; position: relative; cursor: pointer;
  width: 32px; height: 18px; margin: 0; border-radius: var(--r-pill);
  border: 1px solid var(--border-input); background: var(--surface-4);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ui-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--text-2); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ui-switch:checked { background: var(--accent); border-color: var(--accent); }
.ui-switch:checked::after { transform: translateX(14px); background: var(--accent-fg); }
.ui-switch:disabled { opacity: 0.45; cursor: not-allowed; }
.ui-switch--sm { width: 26px; height: 15px; }
.ui-switch--sm::after { width: 9px; height: 9px; }
.ui-switch--sm:checked::after { transform: translateX(11px); }

.ui-seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-subtle);
}
.ui-seg__item {
  display: inline-flex; align-items: center; gap: var(--s-6);
  height: calc(var(--ctl-h) - 8px); padding: 0 var(--s-10); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); font-size: var(--ctl-fs); font-weight: var(--fw-medium); white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ui-seg__item:hover { color: var(--text); }
.ui-seg__item[aria-pressed="true"], .ui-seg__item[aria-checked="true"] {
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border);
}
.ui-seg--block { display: flex; }
.ui-seg--block .ui-seg__item { flex: 1; justify-content: center; padding: 0 var(--s-6); }

.ui-range { width: 100%; accent-color: var(--accent); height: 20px; margin: 0; background: transparent; color: var(--text); }
.ui-rangefield { display: grid; grid-template-columns: 1fr 72px; gap: var(--s-12); align-items: center; }

.ui-chipinput {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  min-height: var(--ctl-h); padding: 3px var(--s-4);
  border: 1px solid var(--border-input); border-radius: var(--r-md); background: var(--input-bg);
}
.ui-chipinput:focus-within { border-color: var(--accent); outline: var(--focus-w) solid var(--focus); outline-offset: 1px; }
.ui-chip {
  display: inline-flex; align-items: center; gap: var(--s-4); height: 22px; padding: 0 2px 0 var(--s-6);
  border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap;
}
.ui-chip > b { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--text); font-size: var(--fs-2xs); }
.ui-chip__remove {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: 0; border-radius: var(--r-xs); background: transparent; color: var(--text-3); padding: 0;
}
.ui-chip__remove:hover { background: var(--surface-4); color: var(--text); }
.ui-chip[data-mod="unsaved"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.ui-chipinput__add { border: 0; background: transparent; color: var(--link); font-size: var(--fs-xs); font-weight: var(--fw-medium); height: 22px; padding: 0 var(--s-6); display: inline-flex; align-items: center; gap: var(--s-4); }

/* ---------- 6. Field and setting row ---------- */
.ui-field { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.ui-field__head { display: flex; align-items: baseline; gap: var(--s-6); min-width: 0; }
.ui-field__label { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-medium); color: var(--text-2); }
.ui-field__label[data-required]::after { content: " *"; color: var(--danger-text); }
.ui-field__hint { font-size: var(--fs-2xs); line-height: var(--lh-2xs); color: var(--text-3); white-space: nowrap; }
/* In a narrow field the legacy key shrinks to an ellipsis (full name in its title) instead of
   running into the next field (V-e20d9d). */
.ui-field__head > .ui-legacy { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-field__head > .ui-field__label { flex-shrink: 0; max-width: 100%; }
.ui-field__help { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); }
.ui-field__error { display: flex; gap: var(--s-4); align-items: flex-start; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--danger-text); font-weight: var(--fw-medium); }
.ui-field__error > .ui-icon { margin-top: 2px; }
/* A message beside the button the user pressed: it never moves that button or the controls
   above it, and it grows downward if it wraps (VQA-064). */
.ui-row:has(> .ui-action-msg, > .ui-field__error) { align-items: flex-start; }
.ui-row > .ui-action-msg, .ui-row > .ui-field__error { flex: 1 1 14rem; min-width: 0; padding-block: calc((var(--ctl-h) - var(--lh-xs)) / 2); margin: 0; }
.ui-action-msg { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-2); }
/* A form whose fields keep one line for their error, so an error never moves the fields below (VQA-064). */
.ui-form--steady .ui-field:not(:has(> .ui-field__error)) { padding-bottom: calc(var(--lh-xs) + var(--s-4)); }
.ui-form--steady.ui-stack { gap: var(--s-4); }
.ui-form--steady.ui-formgrid { row-gap: var(--s-4); }
/* In a bottom-aligned steady row the button keeps the same reserve, so it lines up with the
   inputs whether or not their errors show (VQA-088). */
.ui-form--steady.ui-row > .ui-btn { margin-bottom: calc(var(--lh-xs) + var(--s-4)); }
/* Dirty (edited, not yet saved/autosaved) marker on a field label */
.ui-field[data-mod="unsaved"] .ui-field__label::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--s-4); vertical-align: 1px;
  border-radius: 50%; background: var(--accent);
}
.ui-field[data-mod="unsaved"] .ui-input, .ui-field[data-mod="unsaved"] .ui-select, .ui-field[data-mod="unsaved"] .ui-textarea { border-color: var(--accent); }

/* Settings: label row (state dot · label · tags · legacy name), then control | help.
   Sections flow in two newspaper columns, so a tall row never leaves a gap beside it. */
/* V3 setting row: label (and a one-line help) left, the control right, 44 px tall. The
   VICIdial name shows on hover or focus; the full help shows while the row has focus. */
.ui-setting {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 46%); align-items: center; column-gap: var(--s-16); row-gap: 0;
  min-height: 44px; padding: var(--s-6) var(--s-8) var(--s-6) var(--s-16); position: relative;
  border-bottom: 1px solid var(--border-subtle); break-inside: avoid; transition: background var(--dur) var(--ease);
}
.ui-setting:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.ui-setting--highlighted { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-setting__head { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: var(--s-6); min-width: 0; min-height: 20px; }
.ui-setting__head > .ui-legacy { opacity: 0; transition: opacity var(--dur) var(--ease); }
.ui-setting:hover .ui-setting__head > .ui-legacy, .ui-setting:focus-within .ui-setting__head > .ui-legacy { opacity: 1; }
/* A long label wraps inside its column instead of running under the control (V-992142, V-b220b7). */
.ui-setting__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); flex-shrink: 0; max-width: 100%; overflow-wrap: break-word; }
.ui-setting__head > .ui-legacy { margin-left: auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ui-setting__control { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
/* Help and the default/reset note share one line under the label: a row is the same height
   modified or not, so Reset never moves the rows below (VQA-065). */
.ui-setting__foot { grid-column: 1; grid-row: 2; display: flex; align-items: baseline; gap: var(--s-8); min-width: 0; min-height: var(--lh-xs); }
.ui-setting__foot > .ui-setting__help { flex: 1 1 0; min-width: min(40%, 12rem); }
/* A control wider than its column (a swatch picker) goes under the label, and the help and its
   Was/Default note keep the full row width, so a change never squeezes the help (VQA-091). */
.ui-setting:has(> .ui-setting__control .ui-swatches) { grid-template-columns: minmax(0, 1fr); }
.ui-setting:has(> .ui-setting__control .ui-swatches) > .ui-setting__control { grid-column: 1; grid-row: 3; padding-top: var(--s-6); }
.ui-setting:focus-within:has(> .ui-setting__control .ui-swatches) .ui-setting__foot > .ui-setting__help { white-space: nowrap; }
.ui-setting__help { grid-column: 1; grid-row: 2; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-setting:focus-within:not(:has(.ui-setting__prov :focus)) .ui-setting__help { white-space: normal; }
.ui-setting__control .ui-field__error { margin-top: 2px; }
.ui-setting__help b, .ui-setting__help strong { color: var(--text-2); font-weight: var(--fw-semibold); }
/* In-depth setting help (setting_help.rs): (i) after the label, a card on hover/focus that floats
   over the form (fixed, placed in window coordinates, so nothing moves), "More" opens the sheet. */
.ui-sethelp { display: inline-flex; flex: none; }
.ui-sethelp > .ui-infotip { width: 18px; height: 18px; }
.ui-sethelp__card {
  position: fixed; left: 0; top: 0; visibility: hidden; z-index: var(--z-popover); width: min(360px, calc(100vw - 16px));
  max-height: min(420px, calc(100vh - 16px)); overflow: auto; padding: var(--s-12); border-radius: var(--r-lg);
  background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); font-weight: var(--fw-regular); white-space: normal;
  display: flex; flex-direction: column; gap: var(--s-8);
}
.ui-sethelp__card p { margin: 0; }
.ui-sethelp__title { color: var(--text); font-weight: var(--fw-semibold); }
.ui-sethelp__short { color: var(--text); }
.ui-sethelp__loading { opacity: .8; }
.ui-sethelp__example { padding: var(--s-8) var(--s-10); border-radius: var(--r-md); background: var(--surface-2); }
.ui-sethelp__tag { display: block; margin-bottom: var(--s-2); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .02em; text-transform: uppercase; color: var(--text-3); }
.ui-sethelp__meta { font-size: var(--fs-xs); color: var(--text-3); }
.ui-sethelp__more { align-self: flex-start; }
.ui-sethelp__sheet { display: flex; flex-direction: column; gap: var(--s-16); padding: var(--s-16); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }
.ui-sethelp__sheet p { margin: 0; }
.ui-sethelp__sheet section:not(.ui-alert) { display: flex; flex-direction: column; gap: var(--s-6); }
.ui-sethelp__sheet ul { margin: 0; padding-left: var(--s-16); display: flex; flex-direction: column; gap: var(--s-4); }
.ui-sethelp__lead { color: var(--text); font-size: var(--fs-md); line-height: var(--lh-md); }
.ui-sethelp__facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-4) var(--s-12); margin: 0; }
.ui-sethelp__facts dt { color: var(--text-3); }
.ui-sethelp__facts dd { margin: 0; color: var(--text); }
.ui-sethelp__related { list-style: none; padding-left: 0 !important; }
.ui-setting__prov { font-size: var(--fs-2xs); line-height: var(--lh-2xs); color: var(--text-3); display: flex; gap: var(--s-6); flex-wrap: nowrap; align-items: baseline; white-space: nowrap; margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.ui-setting__prov > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-setting__prov > .ui-btn { flex: none; }
.ui-setting__prov .ui-btn--link { font-size: var(--fs-2xs); }
/* A full-width row's control starts where the left column's controls start (27 % = 54 % of a half). */
.ui-setting--span { column-span: all; grid-template-columns: minmax(0, 27%) minmax(0, 1fr); }
.ui-setting__dot { position: absolute; left: 4px; top: 18px; width: 7px; height: 7px; border-radius: 50%; }
.ui-setting[data-mod="modified"] .ui-setting__dot { box-shadow: inset 0 0 0 1.5px var(--text-3); }
.ui-setting[data-mod="unsaved"] .ui-setting__dot { background: var(--accent); }
.ui-setting[data-mod="invalid"] .ui-setting__dot { background: var(--danger); }
.ui-setting[data-mod="unsaved"] { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ui-setting[data-mod="invalid"] { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.ui-setting[aria-disabled="true"] .ui-setting__label { color: var(--text-2); }
.ui-setting__reason { display: inline-flex; align-items: center; gap: var(--s-4); font-size: var(--fs-2xs); color: var(--text-3); }
.ui-dotlegend { display: flex; gap: var(--s-12); align-items: center; font-size: var(--fs-xs); color: var(--text-3); flex-wrap: wrap; }
.ui-dotlegend > span { display: inline-flex; align-items: center; gap: var(--s-6); }
.ui-dotlegend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.ui-dotlegend i[data-mod="modified"] { box-shadow: inset 0 0 0 1.5px var(--text-3); }
.ui-dotlegend i[data-mod="unsaved"] { background: var(--accent); }
.ui-dotlegend i[data-mod="invalid"] { background: var(--danger); }
.ui-settings-grid { columns: 2 380px; column-gap: var(--s-24); }
.ui-settings-group { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-8) 0 var(--s-2) var(--s-16); margin: 0; }

/* ---------- 7. Badges, codes, tags, counts ---------- */
:where(.ui-badge) { --tone: var(--text-3); --tone-t: var(--text-2); --tone-s: var(--surface-3); --tone-f: var(--surface-4); --tone-on: var(--text); }
.ui-badge {
  display: inline-flex; align-items: center; gap: var(--s-4); height: 20px; padding: 0 var(--s-6);
  border-radius: var(--r-sm); background: var(--tone-s); color: var(--tone-t);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap;
}
.ui-badge--solid { background: var(--tone-f); color: var(--tone-on); }
.ui-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--tone); }
.ui-badge--caps { text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.ui-badge--lg { height: 24px; padding: 0 var(--s-8); font-size: var(--fs-xs); }
.ui-badge > .ui-icon { width: 12px; height: 12px; stroke-width: 2; }

/* Status code: CODE + plain label (lead and call statuses) */
.ui-status { display: inline-flex; align-items: center; gap: var(--s-6); min-width: 0; white-space: nowrap; color: var(--text-2); }
.ui-status__code {
  display: inline-flex; align-items: center; height: 18px; padding: 0 var(--s-4); border-radius: var(--r-xs);
  font: var(--fw-semibold) var(--fs-2xs)/1 var(--font-mono); color: var(--tone-t, var(--text)); background: var(--tone-s, var(--surface-3));
  box-shadow: inset 0 0 0 1px var(--border);
}
/* Tag: small mono identifier (in-group, direction, transfer target) */
.ui-tag {
  display: inline-flex; align-items: center; gap: 2px; height: 18px; padding: 0 var(--s-4); border-radius: var(--r-xs);
  font: var(--fw-medium) var(--fs-2xs)/1 var(--font-mono); color: var(--text-2);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); white-space: nowrap;
}
.ui-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--surface-4); color: var(--text-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num); line-height: 1;
}
.ui-count[data-tone] { background: var(--tone-f); color: var(--tone-on); }
.ui-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--text-3)); flex: none; display: inline-block; }

/* ---------- 8. Agent state: glyph, pill, timer, chips ---------- */
/* Glyph shape is the non-color cue. Shape comes from the element's own or parent's data-state. */
.ui-glyph {
  --g: 10px;
  display: inline-block; flex: none; width: var(--g); height: var(--g);
  border-radius: 50%; background: var(--st, var(--text-3)); position: relative;
}
.ui-glyph--lg { --g: 14px; }
.ui-glyph--xl { --g: 22px; }
:is([data-state="ready"], [data-state="preview"]) > .ui-glyph, .ui-glyph:is([data-state="ready"], [data-state="preview"]) {
  background: transparent; box-shadow: inset 0 0 0 calc(var(--g) * 0.22) var(--st);
}
:is([data-state="queue"], [data-state="ring"]) > .ui-glyph, .ui-glyph:is([data-state="queue"], [data-state="ring"]) {
  background: conic-gradient(var(--st) 0 50%, transparent 0); box-shadow: inset 0 0 0 calc(var(--g) * 0.16) var(--st);
}
[data-state="paused"] > .ui-glyph, .ui-glyph[data-state="paused"] {
  border-radius: 1px; background: linear-gradient(90deg, var(--st) 0 34%, transparent 34% 66%, var(--st) 66%);
}
:is([data-state="dispo"], [data-state="wrapup"]) > .ui-glyph, .ui-glyph:is([data-state="dispo"], [data-state="wrapup"]) {
  border-radius: 1px; transform: rotate(45deg) scale(0.8);
}
[data-state="wrapup"] > .ui-glyph, .ui-glyph[data-state="wrapup"] { background: transparent; box-shadow: inset 0 0 0 calc(var(--g) * 0.2) var(--st); }
[data-state="dead"] > .ui-glyph, .ui-glyph[data-state="dead"] {
  border-radius: 0;
  clip-path: polygon(18% 0, 50% 32%, 82% 0, 100% 18%, 68% 50%, 100% 82%, 82% 100%, 50% 68%, 18% 100%, 0 82%, 32% 50%, 0 18%);
}
[data-state="park"] > .ui-glyph, .ui-glyph[data-state="park"] {
  border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 calc(var(--g) * 0.22) var(--st);
}
[data-state="3way"] > .ui-glyph, .ui-glyph[data-state="3way"] { border-radius: 0; clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
[data-state="offline"] > .ui-glyph, .ui-glyph[data-state="offline"] { height: calc(var(--g) * 0.25); border-radius: 1px; }

/* State pill: glyph + VICIdial label + optional sub-label (pause code) + optional timer */
.ui-pill {
  display: inline-flex; align-items: center; gap: var(--s-6); height: 22px; padding: 0 var(--s-8) 0 var(--s-6);
  border-radius: var(--r-sm); background: var(--st-s); color: var(--st-t);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.03em; line-height: 1; white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st) 30%, transparent);
}
.ui-pill__sub { font-family: var(--font-mono); font-weight: var(--fw-semibold); letter-spacing: 0; }
.ui-pill__sub::before { content: "· "; font-family: var(--font-sans); }
.ui-pill__time { font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num); letter-spacing: 0; }
.ui-pill--solid, .ui-pill[data-level="over"] { background: var(--st-f); color: var(--st-on); box-shadow: none; }
.ui-pill--solid > .ui-glyph, .ui-pill[data-level="over"] > .ui-glyph { --st: var(--st-on); }
.ui-pill[data-level="over"] .ui-pill__time::before { content: "▲ "; }
/* On a solid pill the timer takes the pill's on-color (a red/amber timer on a fill would vanish) */
.ui-pill--solid .ui-timer[data-level], .ui-pill[data-level="over"] .ui-timer[data-level] { color: inherit; }
.ui-pill--sm { height: 18px; padding: 0 var(--s-6) 0 var(--s-4); gap: var(--s-4); }
.ui-pill--sm > .ui-glyph { --g: 8px; }
.ui-pill--lg { height: 28px; padding: 0 var(--s-10) 0 var(--s-8); font-size: var(--fs-xs); gap: var(--s-8); }
/* Hero: the agent's own state in the agent bar. Solid fill, big timer, live pulse. */
.ui-pill--hero {
  height: 32px; padding: 0 var(--s-12) 0 var(--s-10); gap: var(--s-8); border-radius: var(--r-md);
  background: var(--st-f); color: var(--st-on); box-shadow: none; font-size: var(--fs-sm); letter-spacing: 0.04em;
}
.ui-pill--hero > .ui-glyph { --st: var(--st-on); --g: 12px; }
.ui-pill--hero .ui-pill__time { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.ui-pill--live > .ui-glyph::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  box-shadow: 0 0 0 2px var(--st); opacity: 0;
  animation: ui-pulse var(--pulse-period) var(--ease-out) infinite;
}

.ui-timer { font-feature-settings: var(--font-features-num); white-space: nowrap; }
.ui-timer[data-level="near"] { color: var(--warning-text); font-weight: var(--fw-semibold); }
.ui-timer[data-level="over"] { color: var(--danger-text); font-weight: var(--fw-bold); }
.ui-timer[data-level="over"]::before { content: "▲ "; font-size: 0.8em; }
/* Threshold scale: where a timer turns near / over (per user group and state). Legend and
   editor preview. Set --near and --over as % of the scale; marks carry the times as text. */
.ui-thresholds { position: relative; padding-bottom: 18px; min-width: 160px; }
.ui-thresholds__track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--surface-4) 0 var(--near, 50%), var(--warning) var(--near, 50%) var(--over, 75%), var(--danger) var(--over, 75%));
}
.ui-thresholds__mark { position: absolute; top: 9px; transform: translateX(-50%); font-size: var(--fs-2xs); line-height: var(--lh-2xs); color: var(--text-2); font-feature-settings: var(--font-features-num); white-space: nowrap; }
.ui-thresholds__mark::before { content: ""; position: absolute; left: 50%; top: -11px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: var(--text); }
.ui-thresholds__mark--near { left: var(--near, 50%); }
.ui-thresholds__mark--over { left: var(--over, 75%); }

/* State chip: legend + filter in one (supervisor) */
.ui-statechip {
  display: inline-flex; align-items: center; gap: var(--s-6); height: var(--ctl-h-sm); padding: 0 var(--s-8);
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-2); white-space: nowrap;
}
.ui-statechip:hover { background: var(--surface-3); color: var(--text); }
.ui-statechip > b { color: var(--text); font-feature-settings: var(--font-features-num); font-weight: var(--fw-semibold); }
.ui-statechip[aria-pressed="true"] { background: var(--st-s, var(--accent-soft)); border-color: var(--st, var(--accent)); color: var(--st-t, var(--accent-text)); }
.ui-statechip[aria-pressed="true"] > b { color: inherit; }

.ui-legend-states { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-12); font-size: var(--fs-xs); color: var(--text-2); }
.ui-legend-states > span { display: inline-flex; align-items: center; gap: var(--s-6); }

/* ---------- 9. Navigation: tabs, subnav, breadcrumb, pager ---------- */
.ui-tabs { display: flex; align-items: stretch; gap: var(--s-20); border-bottom: 1px solid var(--border); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ui-tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--s-6);
  height: 36px; padding: 0; border: 0; background: transparent; white-space: nowrap;
  color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none;
}
.ui-tab:hover { color: var(--text); }
.ui-tab[aria-selected="true"], .ui-tab[aria-current="page"] { color: var(--text); font-weight: var(--fw-semibold); }
.ui-tab[aria-selected="true"]::after, .ui-tab[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent);
}
.ui-tab:focus-visible { outline-offset: -2px; }
.ui-tabs--more { overflow: visible; flex-wrap: wrap; }
.ui-tabs__more { font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.ui-tabs__more[aria-expanded="true"] { color: var(--text); }
.ui-tab__count { font-size: var(--fs-2xs); color: var(--text-3); font-weight: var(--fw-medium); font-feature-settings: var(--font-features-num); }
.ui-tab__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ui-tabs--sm { gap: var(--s-16); }
.ui-tabs--sm .ui-tab { height: 32px; font-size: var(--fs-xs); }

.ui-subnav { display: flex; flex-direction: column; gap: 1px; }
.ui-subnav__item {
  position: relative; display: flex; align-items: center; gap: var(--s-8); height: 28px; padding: 0 var(--s-8) 0 var(--s-12);
  border-radius: var(--r-md); color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); white-space: nowrap;
}
.ui-subnav__item:hover { background: var(--surface-3); color: var(--text); }
.ui-subnav__item[aria-current="true"], .ui-subnav__item[aria-current="page"], .ui-subnav__item[aria-current="location"] {
  background: var(--accent-soft); color: var(--accent-text); font-weight: var(--fw-semibold);
}
.ui-subnav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-subnav__count { margin-left: auto; flex: none; font-size: var(--fs-2xs); color: var(--text-3); font-feature-settings: var(--font-features-num); }
.ui-subnav__item i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.ui-subnav__item i[data-mod="unsaved"] { background: var(--accent); }
.ui-subnav__item i[data-mod="invalid"] { background: var(--danger); }
.ui-subnav__item i[data-mod="modified"] { box-shadow: inset 0 0 0 1.5px var(--text-3); }

.ui-breadcrumb { display: flex; align-items: center; gap: var(--s-6); font-size: var(--fs-xs); color: var(--text-3); min-width: 0; }
.ui-breadcrumb a { color: var(--text-2); text-decoration: none; }
.ui-breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.ui-breadcrumb > .ui-icon { width: 12px; height: 12px; }

.ui-pager { display: inline-flex; align-items: center; gap: var(--s-6); font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.ui-pager b { color: var(--text); font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num); }

/* ---------- 10. Panels and cards ---------- */
.ui-panel {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
}
.ui-panel__head {
  display: flex; align-items: center; gap: var(--s-8); flex: none;
  min-height: 40px; padding: 0 var(--pad); border-bottom: 1px solid var(--border);
}
.ui-panel__head .ui-tabs { border-bottom: 0; align-self: stretch; }
.ui-panel__head .ui-tab { height: 39px; }
.ui-panel__title { white-space: nowrap; display: flex; align-items: center; gap: var(--s-8); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-2); margin: 0; }
.ui-panel__title > .ui-icon { color: var(--text-3); }
/* Body scrolls inside the panel; the page never scrolls behind it. */
.ui-panel__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--pad); overscroll-behavior: contain; }
.ui-panel__body--flush { padding: 0; }
.ui-panel__foot {
  flex: none; display: flex; align-items: center; gap: var(--s-8);
  padding: var(--s-8) var(--pad); border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.ui-panel--flat { border-radius: 0; border-width: 0; }
.ui-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--pad); min-width: 0; }
.ui-card--sunken { background: var(--surface-2); }
.ui-section-title { display: flex; align-items: center; gap: var(--s-8); margin: 0 0 var(--s-8); }
.ui-section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- 11. Tables ---------- */
.ui-table-wrap { position: relative; overflow: auto; min-height: 0; background: var(--surface); }
/* A table wider than its wrap fades at the edge it can still scroll to (scroll-driven; no
   overflow means no timeline, so no mask). */
@property --tw-fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tw-fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes ui-table-edge {
  from { --tw-fade-l: 0px; --tw-fade-r: 40px; mask-image: linear-gradient(to right, transparent, #000 var(--tw-fade-l), #000 calc(100% - var(--tw-fade-r)), transparent); }
  4% { --tw-fade-l: 40px; }
  96% { --tw-fade-r: 40px; }
  to { --tw-fade-l: 40px; --tw-fade-r: 0px; mask-image: linear-gradient(to right, transparent, #000 var(--tw-fade-l), #000 calc(100% - var(--tw-fade-r)), transparent); }
}
@supports (animation-timeline: scroll()) {
  .ui-table-wrap { animation: ui-table-edge linear both; animation-timeline: scroll(self inline); }
}
.ui-table { width: 100%; font-size: var(--table-fs); line-height: var(--lh-sm); }
.ui-table th, .ui-table td {
  height: var(--row-h); padding: 0 var(--cell-px); text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.ui-table thead th {
  position: sticky; top: 0; z-index: 2; height: 30px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); color: var(--text-2);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.ui-table th.is-num, .ui-table td.is-num { text-align: right; font-feature-settings: var(--font-features-num); }
.ui-table td.is-num { font-feature-settings: var(--font-features-num); }
.ui-table td.is-muted { color: var(--text-3); }
.ui-th-sort {
  display: inline-flex; align-items: center; gap: var(--s-4); height: 100%; padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.ui-th-sort::after { content: "↕"; font-size: 10px; color: var(--text-3); letter-spacing: 0; }
th[aria-sort="ascending"] .ui-th-sort, th[aria-sort="descending"] .ui-th-sort { color: var(--text); }
th[aria-sort="ascending"] .ui-th-sort::after { content: "▲"; color: var(--accent-text); font-size: 8px; }
th[aria-sort="descending"] .ui-th-sort::after { content: "▼"; color: var(--accent-text); font-size: 8px; }
.ui-th-sort:hover { color: var(--text); }
/* Header action (column filter / column menu). Pressed = a filter applies to this column. */
.ui-th-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: var(--s-2); vertical-align: middle;
  padding: 0; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--text-3);
}
.ui-th-btn:hover { background: var(--surface-4); color: var(--text); }
.ui-th-btn[aria-pressed="true"], .ui-th-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.ui-th-btn .ui-icon { width: 12px; height: 12px; stroke-width: 2; }
.ui-th-btn:focus-visible { outline-offset: 0; }
.ui-table tbody tr { background: var(--surface); }
.ui-table tbody tr:hover { background: var(--surface-3); }
.ui-table tbody tr[aria-selected="true"] { background: var(--selection); }
.ui-table tbody tr[aria-current="true"] { background: var(--accent-soft); }
.ui-table tbody tr:focus-visible { outline-offset: -2px; }
.ui-table tbody tr[data-stale] td { color: var(--text-3); }
.ui-table td.is-check, .ui-table th.is-check { width: 36px; padding: 0 10px; }
.ui-table td.is-check input, .ui-table th.is-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); vertical-align: middle; }
.ui-table__primary { color: var(--text); font-weight: var(--fw-medium); }
.ui-table__primary a { color: inherit; text-decoration: none; }
.ui-table__primary a:hover { color: var(--link); text-decoration: underline; }
.ui-table__id { color: var(--text-3); font-size: var(--fs-2xs); margin-left: var(--s-4); font-feature-settings: var(--font-features-num); }
/* Freeze the first data column (after the checkbox) while scrolling sideways */
.ui-table--freeze :is(th, td):nth-child(-n + 2) { position: sticky; z-index: 1; background: inherit; }
.ui-table--freeze :is(th, td):nth-child(1) { left: 0; }
.ui-table--freeze :is(th, td):nth-child(2) { left: 36px; box-shadow: 1px 0 0 var(--border); }
.ui-table--freeze thead :is(th):nth-child(-n + 2) { z-index: 3; background: var(--surface-2); }
.ui-table tfoot td {
  position: sticky; bottom: 0; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 0;
  font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num);
}
/* Rows with data-state (supervisor, user status) show state with the pill glyph in their state cell, never an edge stripe; over-limit rows get a full-row wash */
.ui-table tr[data-level="over"] { background: color-mix(in srgb, var(--st-dead) var(--wash), var(--surface)); }
.ui-table tr[data-level="over"]:hover { background: color-mix(in srgb, var(--st-dead) 11%, var(--surface)); }
.ui-table tr[data-level="near"] { background: color-mix(in srgb, var(--warning) 6%, var(--surface)); }
.ui-table tr[data-level="near"]:hover { background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }

/* Row actions: always rendered and keyboard reachable; quieter until row hover/focus */
.ui-row-actions { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; }
.ui-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-3);
}
.ui-iconbtn:hover { background: var(--surface-4); color: var(--text); }
.ui-iconbtn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.ui-iconbtn[disabled], .ui-iconbtn[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; background: transparent; }
.ui-iconbtn .ui-icon { width: 15px; height: 15px; }
tr:hover .ui-iconbtn, tr:focus-within .ui-iconbtn { color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .ui-table tbody tr .ui-row-actions { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
  .ui-table tbody tr:hover .ui-row-actions, .ui-table tbody tr:focus-within .ui-row-actions,
  .ui-table tbody tr[aria-selected="true"] .ui-row-actions, .ui-row-actions:has([aria-expanded="true"]) { opacity: 1; }
}
.ui-table__foot {
  display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; min-height: 32px; padding: 0 var(--cell-px);
  border-top: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-3);
}
.ui-table__foot b { color: var(--text-2); font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num); }

/* ---------- 12. Toolbars, filters, saved views, bulk bar ---------- */
.ui-toolbar { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; min-width: 0; }
.ui-filter {
  display: inline-flex; align-items: center; height: var(--ctl-h-sm); border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden;
}
.ui-filter__field { padding: 0 var(--s-4) 0 var(--s-8); color: var(--text-2); }
.ui-filter__op { padding: 0 var(--s-4); color: var(--text-3); font-size: var(--fs-2xs); }
.ui-filter__value { padding: 0 var(--s-6) 0 var(--s-2); color: var(--text); font-weight: var(--fw-semibold); }
.ui-filter__remove { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; width: 24px; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--text-3); padding: 0; }
.ui-filter__remove:hover { background: var(--surface-3); color: var(--text); }
.ui-filter__remove:focus-visible { outline-offset: -2px; border-radius: 0 var(--r-md) var(--r-md) 0; }
.ui-filter--add { border-style: dashed; color: var(--text-2); padding: 0 var(--s-8); gap: var(--s-4); background: transparent; font-weight: var(--fw-medium); }
.ui-filter--add:hover { color: var(--text); background: var(--surface-3); }
.ui-views { display: inline-flex; align-items: center; gap: 2px; }
.ui-views__item {
  display: inline-flex; align-items: center; gap: var(--s-6); height: var(--ctl-h-sm); padding: 0 var(--s-8);
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap;
}
.ui-views__item:hover { background: var(--surface-3); color: var(--text); }
.ui-views__item[aria-current="true"] { background: var(--surface-4); color: var(--text); font-weight: var(--fw-semibold); }
.ui-bulkbar {
  display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; min-height: 40px; padding: var(--s-4) var(--s-12);
  background: var(--accent-soft); border-bottom: 1px solid var(--accent-soft-2); font-size: var(--fs-sm);
}
.ui-bulkbar__count { font-weight: var(--fw-semibold); color: var(--text); font-feature-settings: var(--font-features-num); }
.ui-bulkbar .ui-btn:not(.ui-btn--link) { --btn-bg: var(--surface); }

/* ---------- 13. Menus, popovers, tooltips, modals, drawers ---------- */
.ui-menu {
  min-width: 200px; padding: var(--s-4); border-radius: var(--r-lg);
  background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm); z-index: var(--z-popover);
}
.ui-menu__label { padding: var(--s-6) var(--s-8) var(--s-2); }
.ui-menu__item {
  display: flex; align-items: center; gap: var(--s-8); width: 100%; height: 30px; padding: 0 var(--s-8);
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); text-align: left; text-decoration: none; font-size: var(--fs-sm);
}
.ui-menu__item > .ui-icon { color: var(--text-3); }
.ui-menu__item > .ui-keys, .ui-menu__item > .ui-menu__meta { margin-left: auto; }
.ui-menu__meta { color: var(--text-3); font-size: var(--fs-xs); font-feature-settings: var(--font-features-num); }
.ui-menu__item:hover, .ui-menu__item[data-active] { background: var(--surface-3); }
.ui-menu__item[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--accent-text); font-weight: var(--fw-bold); }
.ui-menu__item--danger { color: var(--danger-text); }
.ui-menu__item--danger > .ui-icon { color: var(--danger-text); }
.ui-menu__item[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; }
/* A disabled item's reason sits on its own line under the label, never beside it (V-887d84, V-a6142d). */
.ui-menu__item[aria-disabled="true"] { flex-wrap: wrap; height: auto; min-height: 30px; padding-block: var(--s-6); row-gap: 2px; }
.ui-menu__item[aria-disabled="true"] > .ui-menu__meta { flex: 1 0 100%; margin-left: 0; white-space: normal; }
.ui-menu__sep { height: 1px; margin: var(--s-4) calc(var(--s-4) * -1); background: var(--border); }
.ui-popover {
  position: absolute; z-index: var(--z-popover); width: 320px; border-radius: var(--r-lg);
  background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
}
.ui-popover__head { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-10) var(--s-12); border-bottom: 1px solid var(--border); }
.ui-popover__body { padding: var(--s-8); max-height: 420px; overflow: auto; }
.ui-popover__foot { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-6) var(--s-12); border-top: 1px solid var(--border); font-size: var(--fs-2xs); color: var(--text-3); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.ui-popover__foot > span { display: inline-flex; gap: var(--s-4); align-items: center; white-space: nowrap; }
.ui-tooltip {
  position: absolute; z-index: var(--z-tooltip); max-width: 280px; padding: var(--s-6) var(--s-8); border-radius: var(--r-md);
  background: var(--surface-inverse); color: var(--text-inverse); font-size: var(--fs-xs); line-height: var(--lh-xs); box-shadow: var(--shadow-md);
}
.ui-tooltip .ui-kbd { background: transparent; color: var(--text-inverse); border-color: var(--text-inverse-2); }

.ui-scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--overlay); }
.ui-modal {
  position: fixed; z-index: var(--z-modal); left: 50%; top: 12vh; transform: translateX(-50%);
  width: min(var(--modal-w), calc(100vw - 32px)); max-height: 76vh; display: flex; flex-direction: column;
  margin: 0; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-xl);
  background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-lg);
}
.ui-modal--lg { width: min(var(--modal-w-lg), calc(100vw - 32px)); }
.ui-modal::backdrop { background: var(--overlay); }
.ui-modal__head { display: flex; align-items: flex-start; gap: var(--s-12); padding: var(--s-16) var(--s-20) var(--s-12); }
.ui-modal__title { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); }
.ui-modal__sub { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.ui-modal__body { flex: 1 1 auto; overflow: auto; padding: 0 var(--s-20) var(--s-16); }
.ui-modal__foot { display: flex; align-items: center; gap: var(--s-8); justify-content: flex-end; padding: var(--s-12) var(--s-20); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.ui-modal__foot > .ui-small { margin-right: auto; color: var(--text-3); }
.ui-modal__icon { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--tone-s); color: var(--tone-t); }

.ui-drawer {
  display: flex; flex-direction: column; width: var(--drawer-w); max-width: 100vw; min-height: 0;
  background: var(--surface); border-left: 1px solid var(--border);
}
.ui-drawer--overlay { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-modal); box-shadow: var(--shadow-lg); } /* above its scrim (--z-overlay) */
.ui-drawer__head { flex: none; display: flex; align-items: center; gap: var(--s-8); min-height: 44px; padding: 0 var(--s-12); border-bottom: 1px solid var(--border); }
.ui-drawer__body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ui-drawer__section { padding: var(--s-12) var(--s-16); }
.ui-drawer__section + .ui-drawer__section { border-top: 1px solid var(--border-subtle); }
.ui-drawer__foot { flex: none; display: flex; align-items: center; gap: var(--s-8); padding: var(--s-8) var(--s-12); border-top: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-3); }

/* ---------- 14. Feedback: toast, banner, alert, empty, skeleton, spinner, progress, ring ---------- */
.ui-toasts { position: fixed; z-index: var(--z-toast); right: var(--s-16); bottom: var(--s-16); display: flex; flex-direction: column; gap: var(--s-8); width: 380px; max-width: calc(100vw - 32px); }
.ui-toasts--above-savebar { bottom: calc(var(--savebar-h) + var(--s-16)); }
.ui-toast {
  display: flex; align-items: center; gap: var(--s-10); min-height: 44px; padding: var(--s-8) var(--s-8) var(--s-8) var(--s-12);
  border-radius: var(--r-lg); background: var(--surface-raised); color: var(--text); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg); font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.ui-toast__body { flex: 1; min-width: 0; }
.ui-toast__title { font-weight: var(--fw-semibold); }
.ui-toast__meta { color: var(--text-2); font-size: var(--fs-xs); }
.ui-toast__icon { flex: none; color: var(--tone-t, var(--accent-text)); }
.ui-toast .ui-ring { color: var(--accent); }
.ui-toast .ui-ring__label { color: var(--text); }
/* Agent workspace: toasts dock at the bottom of the script column, never over lead fields or dispositions */
.ui-ws__script { position: relative; }
.ui-ws__toast { position: absolute; left: var(--s-12); right: var(--s-12); bottom: var(--s-12); z-index: var(--z-toast); }

:where(.ui-banner, .ui-alert) { --tone: var(--info); --tone-t: var(--info-text); --tone-s: var(--info-soft); }
.ui-banner {
  display: flex; align-items: center; gap: var(--s-10); min-height: 40px; padding: var(--s-6) var(--s-12) var(--s-6) var(--s-16);
  background: var(--tone-s); color: var(--text); border-bottom: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.ui-banner > .ui-icon { color: var(--tone-t); }
.ui-banner__text { flex: 1; min-width: 0; }
.ui-banner__text b { font-weight: var(--fw-semibold); }
.ui-banner__meta { color: var(--text-2); }
.ui-banner--card { border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); border-radius: var(--r-lg); }
/* Password rules (password_rules.rs): shown before typing, ticked live; a broken rule is red with an x. */
.ui-pw-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-2); }
.ui-pw-rules__item { display: flex; align-items: flex-start; gap: var(--s-6); }
.ui-pw-rules__item > .ui-icon { flex: none; margin-top: 2px; color: var(--text-3); }
.ui-pw-rules__item[data-state="met"] > .ui-icon { color: var(--success-text); }
.ui-pw-rules__item[data-state="broken"] { color: var(--danger-text); }
.ui-pw-rules__item[data-state="broken"] > .ui-icon { color: var(--danger-text); }
.ui-pw-errors { margin: var(--s-4) 0 0; padding-left: var(--s-16); }
.ui-pw-meter { display: flex; align-items: center; gap: var(--s-8); margin-top: calc(-1 * var(--s-4)); }
.ui-pw-meter__bar { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); }
.ui-pw-meter__seg { height: 4px; border-radius: var(--r-pill); background: var(--border); }
.ui-pw-meter[data-strength="weak"] .ui-pw-meter__seg[data-on] { background: var(--danger); }
.ui-pw-meter[data-strength="fair"] .ui-pw-meter__seg[data-on] { background: var(--warning); }
.ui-pw-meter[data-strength="strong"] .ui-pw-meter__seg[data-on] { background: var(--success); }
.ui-pw-meter__label { flex: none; min-width: 8.5em; text-align: right; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-2); }
.ui-pw-meter[data-strength="weak"] .ui-pw-meter__label { color: var(--danger-text); }
.ui-pw-meter[data-strength="fair"] .ui-pw-meter__label { color: var(--warning-text); }
.ui-pw-meter[data-strength="strong"] .ui-pw-meter__label { color: var(--success-text); }

.ui-alert {
  display: flex; gap: var(--s-8); align-items: flex-start; padding: var(--s-8) var(--s-12);
  border-radius: var(--r-md); background: var(--tone-s); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent); font-size: var(--fs-xs); line-height: var(--lh-xs);
}
.ui-alert > .ui-icon { color: var(--tone-t); margin-top: 1px; }
.ui-alert__text { flex: 1; min-width: 0; }
.ui-alert__text b { font-weight: var(--fw-semibold); }

.ui-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-8); padding: var(--s-40) var(--s-24); max-width: 440px; margin: 0 auto; }
.ui-empty__icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tone-s, var(--surface-3)); color: var(--tone-t, var(--text-2)); margin-bottom: var(--s-4); }
.ui-empty__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.ui-empty__text { font-size: var(--fs-sm); color: var(--text-2); }
.ui-empty__actions { display: flex; gap: var(--s-8); margin-top: var(--s-8); flex-wrap: wrap; justify-content: center; }

.ui-skel { display: block; height: 12px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--skeleton-a) 0%, var(--skeleton-b) 50%, var(--skeleton-a) 100%); background-size: 200% 100%; animation: ui-shimmer 1.4s linear infinite; }
.ui-skel--line { height: 10px; margin: 5px 0; }
.ui-skel--block { height: auto; border-radius: var(--r-md); }
.ui-skel--circle { border-radius: 50%; }

.ui-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: ui-spin 0.8s linear infinite; flex: none; }

.ui-progress { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--surface-4); overflow: hidden; }
.ui-progress__bar { position: absolute; inset: 0 auto 0 0; width: var(--value, 0%); border-radius: inherit; background: var(--tone, var(--accent)); }
.ui-progress--sm { height: 4px; }

/* Countdown ring: set --ring (0..1 remaining) on the element; SVG inside uses r=15.9155 (circumference 100) */
.ui-ring { width: 28px; height: 28px; position: relative; flex: none; display: inline-grid; place-items: center; }
.ui-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ui-ring circle { fill: none; stroke-width: 3; }
.ui-ring__track { stroke: color-mix(in srgb, currentColor 22%, transparent); }
.ui-ring__value { stroke: currentColor; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--ring, 1) * 100); stroke-linecap: round; }
.ui-ring__label { font-size: var(--fs-2xs); font-weight: var(--fw-bold); font-feature-settings: var(--font-features-num); }

/* ---------- 15. Data viz: KPI, gauge, stacked state bar, sparkline, chart ---------- */
.ui-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ui-kpi { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--s-10) var(--s-12); min-width: 0; }
.ui-kpi + .ui-kpi { border-left: 1px solid var(--border-subtle); }
.ui-kpi__label { display: flex; align-items: center; gap: var(--s-6); }
.ui-kpi__value { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num); color: var(--text); white-space: nowrap; letter-spacing: -0.01em; }
.ui-kpi__value small { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-3); letter-spacing: 0; }
.ui-kpi__meta { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-kpi__meta b { color: var(--text-2); font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num); }
.ui-kpi[data-tone] .ui-kpi__value { color: var(--tone-t); }
.ui-kpi__control { position: absolute; right: var(--s-8); top: var(--s-8); display: flex; gap: 2px; }
.ui-kpi__foot { display: flex; align-items: center; gap: var(--s-8); min-width: 0; }
.ui-kpi__foot > .ui-spark { flex: 0 1 120px; width: 120px; min-width: 48px; margin-left: auto; }   /* fixed aspect keeps the end marker round */
/* Inline figures (v2 admin home, supervisor floor totals): figure first, label and meta beside it. */
.ui-kpis--inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-24); background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0 var(--s-2); }
.ui-kpis--inline > .ui-kpi { display: grid; grid-template-columns: auto auto; column-gap: var(--s-6); row-gap: 0; align-items: center; padding: 0; background: transparent; }
.ui-kpis--inline > .ui-kpi + .ui-kpi { border-left: 0; }
.ui-kpis--inline .ui-kpi > * { grid-column: 2; }
.ui-kpis--inline .ui-kpi > .ui-kpi__value { grid-column: 1; grid-row: 1 / span 2; font-size: var(--fs-xl); line-height: var(--lh-xl); letter-spacing: -0.02em; }
.ui-kpis--inline .ui-kpi__label.ui-caps { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-medium); color: var(--text-2); }
.ui-kpis--inline .ui-kpi__meta { max-width: 220px; }
/* Delta: signed change vs a named period. data-tone = direction x whether up is good;
   the arrow and sign carry the direction, so it never relies on color. */
.ui-delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-semibold); color: var(--tone-t, var(--text-2)); white-space: nowrap; font-feature-settings: var(--font-features-num); }
.ui-delta > small { font-weight: var(--fw-regular); color: var(--text-3); font-size: inherit; margin-left: 2px; }

/* Band gauge: drop % against the limit. Bands: normal | soft | hard | stopped */
.ui-gauge { position: relative; height: 8px; border-radius: var(--r-pill); overflow: visible; margin-top: var(--s-6);
  background: linear-gradient(90deg, var(--success-soft) 0 var(--soft, 60%), var(--warning-soft) var(--soft, 60%) var(--limit, 75%), var(--danger-soft) var(--limit, 75%));
  box-shadow: inset 0 0 0 1px var(--border); }
.ui-gauge__value { position: absolute; left: 0; top: 0; bottom: 0; width: var(--value, 0%); border-radius: inherit; background: var(--tone, var(--success)); }
.ui-gauge__limit { position: absolute; top: -4px; bottom: -4px; left: var(--limit, 75%); width: 2px; background: var(--danger); border-radius: 1px; }
.ui-gauge__scale { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--text-3); margin-top: 3px; font-feature-settings: var(--font-features-num); }

/* Stacked bar of agents by state: segments carry data-state; 2px surface gaps */
.ui-statebar { display: flex; gap: 2px; height: 10px; border-radius: var(--r-xs); overflow: hidden; }
.ui-statebar > [data-state] { flex: var(--n, 1) 1 0; background: var(--st); min-width: 3px; }
.ui-statebar--lg { height: 16px; }
.ui-statebar--tv { height: 28px; border-radius: var(--r-sm); }

.ui-spark { width: 100%; height: 28px; overflow: visible; }
.ui-spark polyline { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ui-spark .ui-spark__limit { stroke: var(--chart-limit); stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ui-spark .ui-spark__area { fill: color-mix(in srgb, var(--chart-1) 14%, transparent); stroke: none; }
.ui-spark .ui-spark__past { stroke: var(--text-3); }   /* earlier periods recede; the current one keeps the series color */
.ui-spark .ui-spark__now { fill: var(--chart-1); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* TimeChart (VQA-128): lines over a time span, a dashed limit, change marks above the plot. */
.ui-tchart { position: relative; padding-top: 14px; }
.ui-tchart__plot { display: block; width: 100%; height: 100%; min-height: 36px; overflow: visible; border-bottom: 1px solid var(--chart-axis); }
/* Crosshair (light board, Steve 11-11 21:46): hover, tap or arrow keys read a point; the tip floats, nothing moves. */
.ui-tchart__area { position: relative; }
.ui-tchart__hit { position: absolute; inset: 0; cursor: crosshair; touch-action: pan-y; border-radius: 2px; }
.ui-tchart__hit:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.ui-tchart__cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text-3); pointer-events: none; }
.ui-tchart__tip { top: calc(100% + 4px); margin-left: 8px; pointer-events: none; white-space: nowrap; max-width: none; font-variant-numeric: tabular-nums; }
.ui-tchart__tip[data-side="left"] { margin-left: -8px; transform: translateX(-100%); }
.ui-tchart__tip-time { font-weight: var(--fw-semibold); }
.ui-tchart__tip-row { display: flex; align-items: center; gap: var(--s-6); }
.ui-tchart__tip-row::before { content: ""; flex: none; width: 10px; height: 0; border-top: 2px solid var(--chart-1); }
.ui-tchart__tip-row[data-slot="0"]::before { border-top-color: transparent; }
.ui-tchart__tip-row[data-slot="2"]::before { border-top-color: var(--chart-2); } .ui-tchart__tip-row[data-slot="3"]::before { border-top-color: var(--chart-3); }
.ui-tchart__tip-row[data-slot="4"]::before { border-top-color: var(--chart-4); } .ui-tchart__tip-row[data-slot="5"]::before { border-top-color: var(--chart-5); }
.ui-tchart__tip-row[data-slot="9"]::before { border-top: 2px dashed var(--chart-limit); }
.ui-tchart__line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ui-tchart__line[data-slot="2"] { stroke: var(--chart-2); } .ui-tchart__line[data-slot="3"] { stroke: var(--chart-3); }
.ui-tchart__line[data-slot="4"] { stroke: var(--chart-4); } .ui-tchart__line[data-slot="5"] { stroke: var(--chart-5); }
.ui-tchart__line[data-dashed="true"] { stroke-width: 1.5; stroke-dasharray: 5 3; }
.ui-tchart__limit { stroke: var(--chart-limit); stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ui-tchart__marks { position: absolute; inset: 0 0 auto 0; height: 14px; pointer-events: none; }
.ui-tchart__mark { position: absolute; top: 0; transform: translateX(-50%); pointer-events: auto; color: var(--chart-1); line-height: 14px; font-size: 11px; }
.ui-tchart__mark[data-slot="2"] { color: var(--chart-2); } .ui-tchart__mark[data-slot="3"] { color: var(--chart-3); }
.ui-tchart__mark[data-slot="4"] { color: var(--chart-4); } .ui-tchart__mark[data-slot="5"] { color: var(--chart-5); }
.ui-tchart__glyph { display: inline-block; min-width: 12px; text-align: center; cursor: default; border-radius: 3px; }
.ui-tchart__glyph:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; }
@media (forced-colors: active) { .ui-tchart__cross { border-color: CanvasText; } .ui-tchart__line { stroke: CanvasText; } .ui-tchart__limit { stroke: Highlight; } .ui-tchart__mark { color: CanvasText; } }

.ui-chart { display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; }
.ui-chart__head { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; }
.ui-chart__legend { display: flex; gap: var(--s-12); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-2); }
.ui-chart__legend > span { display: inline-flex; align-items: center; gap: var(--s-6); }
.ui-chart__swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: none; }
.ui-chart__swatch--line { height: 2px; border-radius: 1px; }
.ui-chart__swatch--limit { height: 0; border-top: 2px dashed var(--chart-limit); background: none; }
.ui-chart svg { width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.ui-chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.ui-chart__axis { stroke: var(--chart-axis); stroke-width: 1; }
.ui-chart__tick { fill: var(--text-3); font-size: 11px; font-feature-settings: var(--font-features-num); }
.ui-chart__label { fill: var(--text-2); font-size: 11px; font-weight: 600; font-feature-settings: var(--font-features-num); }
.ui-chart__bar { fill: var(--c, var(--chart-1)); }
.ui-chart__line { fill: none; stroke: var(--c, var(--chart-1)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-chart__limit { stroke: var(--chart-limit); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ui-chart__hover { fill: var(--text); opacity: 0.05; }
.ui-chart__tip {
  position: absolute; z-index: var(--z-tooltip); min-width: 160px; padding: var(--s-8) var(--s-10); border-radius: var(--r-md);
  background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); font-size: var(--fs-xs); pointer-events: none;
}
.ui-chart__tip dl { display: grid; grid-template-columns: auto 1fr auto; gap: 2px var(--s-8); align-items: center; margin-top: var(--s-4); }
.ui-chart__tip dd { text-align: right; font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num); }
.ui-chart__plot { position: relative; }
.ui-chart__table { font-size: var(--fs-xs); }

/* ---------- 16. Misc: avatar, tenant, dl, timeline, player, steps, diff, calendar, slots, next ---------- */
.ui-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.02em;
}
.ui-avatar--sm { width: 22px; height: 22px; font-size: var(--fs-2xs); }
.ui-avatar--lg { width: 40px; height: 40px; font-size: var(--fs-sm); }
.ui-tenant { display: inline-flex; align-items: center; gap: var(--s-8); min-width: 0; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.ui-tenant__mark { width: 22px; height: 22px; border-radius: var(--r-sm); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: var(--brand-fg); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.ui-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-6) var(--s-16); font-size: var(--fs-sm); }
.ui-dl dt { color: var(--text-3); }
.ui-dl dd { margin: 0; color: var(--text); min-width: 0; }
.ui-timeline { display: flex; flex-direction: column; }
.ui-timeline__item { position: relative; display: grid; grid-template-columns: 16px 1fr auto; gap: 2px var(--s-10); padding-bottom: var(--s-12); }
.ui-timeline__item::before { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 2px; background: var(--border); }
.ui-timeline__item:last-child::before { display: none; }
.ui-timeline__marker { width: 12px; height: 12px; margin: 4px 2px 0; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--tone, var(--text-3)); }
.ui-timeline__title { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.ui-timeline__time { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-feature-settings: var(--font-features-num); }
.ui-timeline__body { grid-column: 2 / -1; font-size: var(--fs-xs); color: var(--text-2); }
.ui-player { display: inline-flex; align-items: center; gap: var(--s-8); height: 28px; padding: 0 var(--s-8) 0 2px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--text-2); }
.ui-player__play { width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-fg); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ui-player__wave { display: inline-flex; align-items: center; gap: 1px; height: 16px; }
.ui-player__wave i { width: 2px; border-radius: 1px; background: var(--text-3); display: block; }

.ui-steps { display: flex; align-items: center; gap: var(--s-8); counter-reset: step; flex-wrap: wrap; }
.ui-steps__item { display: inline-flex; align-items: center; gap: var(--s-8); font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; counter-increment: step; }
.ui-steps__item::before {
  content: counter(step); width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 1.5px var(--border-input); color: var(--text-2);
}
.ui-steps__item + .ui-steps__item::after { order: -1; content: ""; width: 32px; height: 1px; background: var(--border-strong); }
.ui-steps__item[data-done]::before { content: "✓"; background: var(--success-fill); color: var(--success-on); box-shadow: none; }
.ui-steps__item[data-done] { color: var(--text-2); }
.ui-steps__item[aria-current="step"] { color: var(--text); font-weight: var(--fw-semibold); }
.ui-steps__item[aria-current="step"]::before { background: var(--accent); color: var(--accent-fg); box-shadow: none; }
.ui-steps__item[data-error]::before { content: "!"; background: var(--danger-fill); color: var(--danger-on); box-shadow: none; }
.ui-steps__item[data-error] { color: var(--danger-text); }
/* A done step links back to it */
.ui-steps__item > a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-input); text-underline-offset: 3px; border-radius: var(--r-xs); }
.ui-steps__item > a:hover { color: var(--text); text-decoration-color: currentColor; }
/* Vertical wizard (campaign create, tenant provisioning): steps with a one-line summary */
.ui-steps--vertical { flex-direction: column; align-items: stretch; gap: 0; }
.ui-steps--vertical .ui-steps__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--s-10); align-items: start; padding-bottom: var(--s-16); position: relative; white-space: normal; }
.ui-steps--vertical .ui-steps__item + .ui-steps__item::after { content: none; }
.ui-steps--vertical .ui-steps__item:not(:last-child) > .ui-steps__label::before { content: ""; position: absolute; left: 10px; top: 26px; bottom: 4px; width: 2px; border-radius: 1px; background: var(--border-strong); }
.ui-steps--vertical .ui-steps__item[data-done]:not(:last-child) > .ui-steps__label::before { background: var(--success); }
.ui-steps__label { display: flex; flex-direction: column; gap: 1px; padding-top: 2px; min-width: 0; }
.ui-steps__desc { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); font-weight: var(--fw-regular); }

.ui-diff { width: 100%; font-size: var(--fs-sm); }
.ui-diff th { text-align: left; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-3); padding: var(--s-6) var(--s-8); border-bottom: 1px solid var(--border); }
.ui-diff td { padding: var(--s-8); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.ui-diff del { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--danger-text); background: var(--danger-soft); padding: 1px 4px; border-radius: var(--r-xs); font-feature-settings: var(--font-features-num); }
.ui-diff ins { text-decoration: none; color: var(--success-text); background: var(--success-soft); padding: 1px 4px; border-radius: var(--r-xs); font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num); }
.ui-diff tr[data-conflict] td { background: var(--warning-soft); }

.ui-cal { width: 100%; }
.ui-cal__head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.ui-cal__month { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-right: auto; }
.ui-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.ui-cal__dow { font-size: var(--fs-2xs); color: var(--text-3); font-weight: var(--fw-semibold); height: 20px; line-height: 20px; }
.ui-cal__day {
  position: relative; height: 28px; border: 0; border-radius: var(--r-sm); background: transparent; padding: 0;
  font-size: var(--fs-xs); color: var(--text); font-feature-settings: var(--font-features-num);
}
.ui-cal__day:hover { background: var(--surface-3); }
.ui-cal__day[data-out] { color: var(--text-3); }
.ui-cal__day[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--border-input); font-weight: var(--fw-semibold); }
.ui-cal__day[aria-selected="true"] { background: var(--accent); color: var(--accent-fg); font-weight: var(--fw-semibold); }
.ui-cal__day[data-has]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.ui-cal__day[aria-selected="true"][data-has]::after { background: var(--accent-fg); }
.ui-cal__day[aria-disabled="true"] { color: var(--text-disabled); background: repeating-linear-gradient(135deg, var(--hatch) 0 2px, transparent 2px 6px); cursor: not-allowed; }
.ui-cal__day[data-holiday] { color: var(--danger-text); }
.ui-cal__note { display: flex; gap: var(--s-12); flex-wrap: wrap; font-size: var(--fs-2xs); color: var(--text-3); margin-top: var(--s-6); }

.ui-slots { width: 100%; font-size: var(--fs-xs); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.ui-slots th { height: 26px; padding: 0 var(--s-8); text-align: left; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.ui-slots td { white-space: nowrap; height: 28px; padding: 0 var(--s-8); border-bottom: 1px solid var(--border-subtle); font-feature-settings: var(--font-features-num); }
.ui-slots tr:last-child td { border-bottom: 0; }
.ui-slots td:last-child { text-align: right; color: var(--text-3); }
.ui-slots tr[data-slot="closed"] td { background: repeating-linear-gradient(135deg, var(--hatch) 0 2px, transparent 2px 7px); color: var(--text-3); }
.ui-slots tr[data-slot="closed"] td:last-child { color: var(--warning-text); font-weight: var(--fw-semibold); }
.ui-slots tr[data-slot="last"] td:last-child { color: var(--success-text); font-weight: var(--fw-semibold); }
.ui-slots tr[aria-selected="true"] td { background: var(--accent-soft); box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); font-weight: var(--fw-semibold); color: var(--text); }

.ui-next { list-style: none; display: flex; flex-direction: column; gap: var(--s-6); counter-reset: next; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-2); }
.ui-next > li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-8); counter-increment: next; }
.ui-next > li::before { content: counter(next); width: 18px; height: 18px; border-radius: 50%; background: var(--surface-4); color: var(--text-2); font-size: var(--fs-2xs); font-weight: var(--fw-bold); display: inline-flex; align-items: center; justify-content: center; }
.ui-next b { color: var(--text); font-weight: var(--fw-semibold); }

/* Command palette */
.ui-palette { top: 10vh; width: min(var(--palette-w), calc(100vw - 32px)); max-height: 70vh; overflow: hidden; }
.ui-palette__input { display: flex; align-items: center; gap: var(--s-10); padding: 0 var(--s-16); height: 52px; border-bottom: 1px solid var(--border); }
.ui-palette__input input { flex: 1; align-self: stretch; border: 0; background: transparent; font-size: var(--fs-lg); outline: none; color: var(--text); min-width: 0; }
/* The query row is the focus target's visible frame (the bare input has no border of its own) */
.ui-palette__input:focus-within { outline: var(--focus-w) solid var(--focus); outline-offset: -3px; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.ui-palette__input input::placeholder { color: var(--text-placeholder); }
.ui-palette__list { flex: 1; overflow: auto; padding: var(--s-6); }
.ui-palette__group { padding: var(--s-8) var(--s-10) var(--s-4); }
.ui-palette__item { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 2px var(--s-10); padding: var(--s-6) var(--s-10); border-radius: var(--r-md); color: var(--text); text-decoration: none; }
.ui-palette__item > .ui-icon { color: var(--text-3); }
.ui-palette__item[aria-selected="true"] { background: var(--accent-soft); }
.ui-palette__item[aria-selected="true"] > .ui-icon { color: var(--accent-text); }
.ui-palette__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.ui-palette__title mark { background: none; color: var(--accent-text); font-weight: var(--fw-bold); }
.ui-palette__path { grid-column: 2; display: flex; gap: var(--s-8); align-items: center; font-size: var(--fs-xs); color: var(--text-3); min-width: 0; }
.ui-palette__aside { grid-row: 1 / span 2; grid-column: 3; display: flex; align-items: center; gap: var(--s-6); font-size: var(--fs-xs); color: var(--text-3); }

/* Shortcut sheet */
.ui-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-16) var(--s-24); }
.ui-shortcuts__group h3 { margin-bottom: var(--s-6); }
.ui-shortcuts__row { display: flex; align-items: center; gap: var(--s-8); min-height: 28px; font-size: var(--fs-sm); border-bottom: 1px solid var(--border-subtle); }
.ui-shortcuts__row > span:first-child { flex: 1; color: var(--text-2); }
.ui-shortcuts__or { font-size: var(--fs-2xs); color: var(--text-3); }

/* Sticky save bar */
.ui-savebar {
  position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--s-10);
  min-height: var(--savebar-h); padding: var(--s-8) var(--s-16); background: var(--surface-raised);
  border-top: 1px solid var(--border-strong); box-shadow: 0 -6px 16px -8px light-dark(rgb(17 21 27 / 0.12), rgb(0 0 0 / 0.5)); font-size: var(--fs-sm);
}
.ui-savebar__count { display: inline-flex; align-items: center; gap: var(--s-8); font-weight: var(--fw-semibold); white-space: nowrap; }
.ui-savebar__count::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ui-savebar__diff { flex: 1; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-feature-settings: var(--font-features-num); }
.ui-savebar__diff b { color: var(--text); font-weight: var(--fw-medium); }
.ui-savebar__error { display: inline-flex; align-items: center; gap: var(--s-4); color: var(--danger-text); font-weight: var(--fw-semibold); white-space: nowrap; }

/* ---------- 16b. Pickers: combobox, multiselect, listbox, date, date range, time, duration, number stepper ---------- */
/* Combobox (APG combobox + listbox): the input keeps focus, options are aria-activedescendant
   targets. Single select shows the value; multiselect shows chips, then "+N" past two lines. */
.ui-combo { position: relative; min-width: 0; }
.ui-combo__field {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); min-width: 0;
  min-height: var(--ctl-h); padding: 2px var(--s-32) 2px var(--s-4);
  border: 1px solid var(--border-input); border-radius: var(--r-md); background: var(--input-bg); cursor: text;
}
.ui-combo__field:hover { border-color: var(--border-input-hover); }
.ui-combo__field:focus-within { border-color: var(--accent); outline: var(--focus-w) solid var(--focus); outline-offset: 1px; }
.ui-combo__field:has([aria-invalid="true"]) { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.ui-combo__field > .ui-icon { color: var(--text-3); margin-left: var(--s-6); }
.ui-combo__input {
  flex: 1 1 64px; min-width: 64px; height: calc(var(--ctl-h) - 6px); padding: 0 var(--s-6);
  border: 0; background: transparent; color: var(--text); font-size: var(--ctl-fs); outline: none;
}
.ui-combo__input::placeholder { color: var(--text-placeholder); opacity: 1; }
.ui-combo__more { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); padding: 0 var(--s-4); white-space: nowrap; }
.ui-combo__toggle {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2);
}
.ui-combo__toggle:hover { background: var(--surface-3); color: var(--text); }
.ui-combo__toggle:focus-visible { outline-offset: -2px; }
.ui-combo__field .ui-chip { height: 22px; }
.ui-combo__pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: var(--z-popover); min-width: 220px;
  border-radius: var(--r-lg); background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.ui-combo__pop > .ui-search { padding: var(--s-6); border-bottom: 1px solid var(--border); }
.ui-combo__foot { display: flex; align-items: center; gap: var(--s-10); padding: var(--s-6) var(--s-10); border-top: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-3); }
.ui-combo__foot > .ui-btn--link { font-size: var(--fs-xs); }
.ui-combo__foot > .ui-btn--link:first-of-type { margin-left: auto; }

.ui-listbox { list-style: none; margin: 0; padding: var(--s-4); max-height: 264px; overflow: auto; overscroll-behavior: contain; }
.ui-listbox__group { padding: var(--s-6) var(--s-8) var(--s-2); }
.ui-option {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: var(--s-8);
  min-height: 30px; padding: var(--s-4) var(--s-8); border-radius: var(--r-sm);
  color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-sm); cursor: pointer; user-select: none;
}
.ui-option:hover { background: var(--surface-3); }
/* Keyboard cursor (aria-activedescendant): fill + full accent ring, distinct from hover and from the selected check */
.ui-option[data-active] { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--accent); }
.ui-option__check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--accent-text); visibility: hidden; }
.ui-option[aria-selected="true"] > .ui-option__check { visibility: visible; }
.ui-option[aria-selected="true"] { font-weight: var(--fw-medium); }
.ui-option__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-option__label mark { background: none; color: var(--accent-text); font-weight: var(--fw-bold); }
.ui-option__label .ui-code { font-weight: var(--fw-semibold); margin-right: var(--s-4); }
.ui-option__meta { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-feature-settings: var(--font-features-num); }
.ui-option[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; background: none; }
.ui-option[aria-disabled="true"] .ui-option__meta { color: var(--text-3); }
.ui-option[data-slot="closed"] { background: repeating-linear-gradient(135deg, var(--hatch) 0 2px, transparent 2px 7px); }
/* Multiselect: the check becomes a checkbox square */
.ui-listbox[aria-multiselectable="true"] .ui-option__check { visibility: visible; width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--border-input); color: transparent; }
.ui-listbox[aria-multiselectable="true"] .ui-option[aria-selected="true"] .ui-option__check { background: var(--accent); box-shadow: none; color: var(--accent-fg); }
.ui-listbox[aria-multiselectable="true"] .ui-option__check .ui-icon { width: 10px; height: 10px; stroke-width: 3; }
.ui-listbox__empty { padding: var(--s-16) var(--s-12); text-align: center; font-size: var(--fs-sm); color: var(--text-2); }

/* Button addon inside an input group (calendar, clock, reveal). Its own ring replaces the group's. */
.ui-inputgroup__btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: calc(var(--ctl-h) - 2px);
  padding: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-2); color: var(--text-2);
}
/* Date and time fields: the whole box opens the picker (VQA-142). */
.ui-input--picker { cursor: pointer; }
.ui-input--picker:focus { cursor: text; }
.ui-inputgroup__btn:hover { background: var(--surface-3); color: var(--text); }
.ui-inputgroup__btn:focus-visible { outline-offset: -2px; }
.ui-inputgroup:has(> .ui-inputgroup__btn:focus-visible) { outline: none; border-color: var(--border-input); }

/* Date / date-range popover: presets | calendar(s), then the typed range and Apply */
.ui-datepop { display: grid; grid-template-columns: auto minmax(0, 1fr); width: max-content; max-width: 100%; }
.ui-datepop__presets { display: flex; flex-direction: column; gap: 1px; padding: var(--s-6); border-right: 1px solid var(--border); background: var(--surface-2); min-width: 136px; }
.ui-datepop__preset { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); height: 28px; padding: 0 var(--s-8); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: var(--fs-xs); text-align: left; white-space: nowrap; }
.ui-datepop__preset:hover { background: var(--surface-3); color: var(--text); }
.ui-datepop__preset[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--fw-semibold); }
.ui-datepop__preset .ui-kbd { height: 16px; min-width: 16px; font-size: var(--fs-2xs); border-bottom-width: 1px; }
.ui-datepop__months { display: flex; gap: var(--s-16); padding: var(--s-10) var(--s-12); }
.ui-datepop__months > .ui-cal { width: 224px; }
.ui-datepop__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; padding: var(--s-8) var(--s-12); border-top: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-3); }
.ui-datepop__foot .ui-input { width: 112px; }
.ui-datepop__foot > .ui-btn:first-of-type { margin-left: auto; }
/* Range in the month grid */
.ui-cal__day[data-range] { background: var(--accent-soft); color: var(--accent-text); border-radius: 0; }
.ui-cal__day[data-range="start"], .ui-cal__day[data-range="end"] { background: var(--accent); color: var(--accent-fg); font-weight: var(--fw-semibold); }
.ui-cal__day[data-range="start"] { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.ui-cal__day[data-range="end"] { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ui-cal__day:focus-visible { outline-offset: 0; z-index: 1; }

/* Duration: h / m / s parts in one boundary, with the stored seconds spelled out
   (VICIdial stores most durations as seconds: wrapup_seconds, pause_max, dial_timeout). */
.ui-duration {
  display: inline-flex; align-items: center; align-self: flex-start; max-width: 100%; height: var(--ctl-h); padding: 0 var(--s-8) 0 var(--s-2); gap: 0;
  border: 1px solid var(--border-input); border-radius: var(--r-md); background: var(--input-bg); font-feature-settings: var(--font-features-num);
}
.ui-duration:hover { border-color: var(--border-input-hover); }
.ui-duration:focus-within { border-color: var(--accent); outline: var(--focus-w) solid var(--focus); outline-offset: 1px; }
.ui-duration:has([aria-invalid="true"]) { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.ui-duration__part {
  width: 3.4ch; height: calc(var(--ctl-h) - 8px); padding: 0 2px; border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--text); font-size: var(--ctl-fs); text-align: right; outline: none;
  font-feature-settings: var(--font-features-num);
}
.ui-duration__part:focus { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.ui-duration__unit { padding: 0 var(--s-6) 0 2px; font-size: var(--fs-xs); color: var(--text-3); }
.ui-duration__total { margin-left: var(--s-4); padding-left: var(--s-8); border-left: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }

/* Number stepper: − value + (dial level, max attempts). Hold or PageUp/PageDown for big steps. */
.ui-numstep { display: inline-flex; align-items: stretch; align-self: flex-start; height: var(--ctl-h); border: 1px solid var(--border-input); border-radius: var(--r-md); background: var(--input-bg); }
.ui-numstep:hover { border-color: var(--border-input-hover); }
.ui-numstep:has(> .ui-numstep__input:focus-visible) { border-color: var(--accent); outline: var(--focus-w) solid var(--focus); outline-offset: 1px; }
.ui-numstep__input { width: 6ch; min-width: 0; padding: 0 var(--s-4); border: 0; background: transparent; color: var(--text); font-size: var(--ctl-fs); font-weight: var(--fw-semibold); text-align: center; outline: none; font-feature-settings: var(--font-features-num); }
.ui-numstep__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--ctl-h) - 2px); padding: 0; border: 0; background: var(--surface-2); color: var(--text-2); }
.ui-numstep__btn:first-child { border-right: 1px solid var(--border); border-radius: var(--r-md) 0 0 var(--r-md); }
.ui-numstep__btn:last-child { border-left: 1px solid var(--border); border-radius: 0 var(--r-md) var(--r-md) 0; }
.ui-numstep__btn:hover { background: var(--surface-3); color: var(--text); }
.ui-numstep__btn:focus-visible { outline-offset: -2px; z-index: 1; }
.ui-numstep__btn[disabled], .ui-numstep__btn[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; background: var(--surface-2); }

/* ---------- 16c. Choice: toggle button, toggle group, choice chips, swatch picker ---------- */
/* Toggle button (aria-pressed). Pressed adds a check, so on/off never relies on color. */
.ui-toggles { display: inline-flex; flex-wrap: wrap; gap: var(--s-4); }
.ui-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4); min-width: var(--ctl-h);
  height: var(--ctl-h); padding: 0 var(--s-10); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-2); font-size: var(--ctl-fs); font-weight: var(--fw-medium); white-space: nowrap;
}
.ui-toggle:hover { background: var(--surface-3); color: var(--text); }
.ui-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: var(--fw-semibold); }
.ui-toggle[aria-pressed="true"]::before { content: "✓"; font-weight: var(--fw-bold); }
.ui-toggle[disabled], .ui-toggle[aria-disabled="true"] { background: var(--surface-2); border-color: var(--border); color: var(--text-disabled); cursor: not-allowed; }
.ui-toggle--sm { height: var(--ctl-h-sm); min-width: var(--ctl-h-sm); padding: 0 var(--s-8); font-size: var(--fs-xs); }
/* Attached group: one boundary, items share borders (days of week, channels) */
.ui-toggles--attached { gap: 0; flex-wrap: nowrap; }
.ui-toggles--attached > .ui-toggle { border-radius: 0; margin-left: -1px; }
.ui-toggles--attached > .ui-toggle:first-child { margin-left: 0; border-radius: var(--r-md) 0 0 var(--r-md); }
.ui-toggles--attached > .ui-toggle:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.ui-toggles--attached > .ui-toggle[aria-pressed="true"], .ui-toggles--attached > .ui-toggle:focus-visible { position: relative; z-index: 1; }

/* Choice chips: quick picks and facet filters (aria-pressed for a set, role=radio for one) */
.ui-chips { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.ui-chip--choice {
  height: 26px; padding: 0 var(--s-10); gap: var(--s-6); border-radius: var(--r-pill); cursor: pointer;
  background: var(--surface); border-color: var(--border-strong); color: var(--text-2); font-weight: var(--fw-medium);
}
.ui-chip--choice:hover { background: var(--surface-3); color: var(--text); }
.ui-chip--choice[aria-pressed="true"], .ui-chip--choice[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: var(--fw-semibold); }
.ui-chip--choice[aria-pressed="true"]::before, .ui-chip--choice[aria-checked="true"]::before { content: "✓"; font-weight: var(--fw-bold); }
.ui-chip--choice > .ui-count { height: 16px; min-width: 16px; }
.ui-chip--choice[aria-pressed="true"] > b, .ui-chip--choice[aria-checked="true"] > b { color: inherit; }

/* Swatch picker (role=radiogroup): wallboard widget colors, tenant brand, chart overrides.
   --sw is the color (data, not a token); --sw-on is its readable mark color (computed server-side). */
.ui-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); min-width: 0; max-width: 100%; }
.ui-swatch {
  position: relative; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--r-md); cursor: pointer;
  background: var(--sw, var(--surface-4)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent);
}
.ui-swatch[aria-checked="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent), 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.ui-swatch[aria-checked="true"]::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: 6px; height: 11px; margin: -6px 0 0 -3px;
  border: solid var(--sw-on, var(--text)); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ui-swatch:focus-visible { outline-offset: 5px; }
.ui-swatch--none { background: repeating-linear-gradient(135deg, var(--surface) 0 5px, var(--surface-3) 5px 7px); }
.ui-swatches__custom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); min-width: 0; max-width: 100%; padding-left: var(--s-8); border-left: 1px solid var(--border); }
/* The preview and the AA badge wrap as whole chips inside the control column (V-c76b8b). */
.ui-swatches__custom > .ui-swatches__preview, .ui-swatches__custom > .ui-badge { white-space: nowrap; flex: none; }
.ui-swatches__custom .ui-input { width: 96px; }
.ui-swatches__preview { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-8); border-radius: var(--r-sm); background: var(--sw); color: var(--sw-on); font-size: var(--fs-xs); font-weight: var(--fw-semibold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent); }

/* ---------- 16d. Structure: column chooser, sortable list, tree ---------- */
/* Sortable list. The handle is the keyboard control: Space lifts (aria-pressed=true), arrows
   move, Space drops, Esc cancels; a live region announces "Moved to position 3 of 9". */
.ui-sortlist { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; counter-reset: sort; }
.ui-sortlist__item {
  position: relative; display: flex; align-items: center; gap: var(--s-8); min-height: 34px; padding: 0 var(--s-8) 0 var(--s-2);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); counter-increment: sort;
}
.ui-sortlist__pos::before { content: counter(sort); }
.ui-sortlist__pos { width: 18px; flex: none; text-align: right; font-size: var(--fs-xs); color: var(--text-3); font-feature-settings: var(--font-features-num); }
.ui-sortlist__main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s-8); }
.ui-sortlist__meta { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; font-feature-settings: var(--font-features-num); }
.ui-sortlist__item[data-dragging] { z-index: 1; border-color: var(--accent); background: var(--surface-raised); box-shadow: var(--shadow-lg); }
.ui-sortlist__item[data-placeholder] { border-style: dashed; border-color: var(--border-input); background: var(--surface-2); counter-increment: none; }
.ui-sortlist__item[data-placeholder] > * { visibility: hidden; }
.ui-sortlist__item[data-locked] .ui-handle { cursor: default; }
.ui-sortlist__drop { position: relative; height: 2px; margin: -1px 0 -1px var(--s-24); border-radius: 1px; background: var(--accent); list-style: none; }
.ui-sortlist__drop::before { content: ""; position: absolute; left: -6px; top: -3px; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface); }
.ui-handle {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 28px;
  padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-3); cursor: grab; touch-action: none;
}
.ui-handle:hover { background: var(--surface-3); color: var(--text); }
.ui-handle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); cursor: grabbing; }
.ui-handle[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; background: transparent; }
.ui-handle .ui-icon { width: 14px; height: 14px; }
/* Compact rows (inside popovers): no boxes, hover fill */
.ui-sortlist--compact { gap: 0; }
.ui-sortlist--compact .ui-sortlist__item { min-height: 30px; border-color: transparent; background: transparent; }
.ui-sortlist--compact .ui-sortlist__item:hover { background: var(--surface-3); }
.ui-sortlist--compact .ui-sortlist__item[data-dragging] { border-color: var(--accent); background: var(--surface-raised); }
.ui-sortlist--compact .ui-sortlist__item[data-placeholder] { border-color: var(--border-input); background: var(--surface-2); }

/* Column chooser: popover with filter, visible columns (drag order, frozen first), hidden columns, reset */
.ui-colchooser { width: 300px; }
.ui-colchooser .ui-popover__body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-6); }
.ui-colchooser .ui-check { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); }
.ui-colchooser__section { padding: var(--s-4) var(--s-8) 0; }

/* Tree (role=tree), flat DOM: every row is a treeitem with aria-level / -setsize / -posinset and
   --level for indent, so long IVR graphs can be windowed. Guides draw one rule per ancestor. */
.ui-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: var(--fs-sm); }
.ui-tree__item {
  --level: 1; --indent: 20px;
  position: relative; display: flex; align-items: center; gap: var(--s-6); min-height: 30px;
  padding: 0 var(--s-8) 0 calc(var(--s-4) + (var(--level) - 1) * var(--indent));
  border-radius: var(--r-sm); color: var(--text); cursor: default; white-space: nowrap;
}
.ui-tree__item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc((var(--level) - 1) * var(--indent)); pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(var(--s-4) + 9px), var(--border-strong) calc(var(--s-4) + 9px) calc(var(--s-4) + 10px), transparent calc(var(--s-4) + 10px) var(--indent));
}
.ui-tree__item:hover { background: var(--surface-3); }
.ui-tree__item[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); }
.ui-tree__item:focus-visible { outline-offset: -2px; }
.ui-tree__twisty { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; color: var(--text-2); transition: transform var(--dur-fast) var(--ease); }
.ui-tree__item[aria-expanded="false"] > .ui-tree__twisty { transform: rotate(-90deg); }
.ui-tree__item:not([aria-expanded]) > .ui-tree__twisty { visibility: hidden; }
.ui-tree__item > .ui-icon { color: var(--text-3); }
.ui-tree__label { font-weight: var(--fw-medium); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-tree__arrow { color: var(--text-3); }
.ui-tree__meta { font-size: var(--fs-xs); color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-tree__item > .ui-row-actions { margin-left: auto; }
.ui-tree__item[data-invalid] .ui-tree__label { color: var(--danger-text); }
.ui-tree__item[data-invalid] > .ui-icon { color: var(--danger-text); }
.ui-tree__key { min-width: 84px; display: inline-flex; justify-content: flex-end; flex: none; }   /* right-aligned so the arrows line up */

/* ---------- 16e. Editors: code editor, script editor, dropzone, file rows ---------- */
/* Code editor: a <textarea> (transparent text, real caret) over a highlighted <pre> with the
   same metrics. Gutter numbers, error lines and a status bar; no editor library. */
.ui-code-editor { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border-input); border-radius: var(--r-md); background: var(--code-bg); overflow: hidden; }
.ui-code-editor:focus-within { border-color: var(--accent); }
.ui-code-editor__bar { display: flex; align-items: center; gap: var(--s-8); min-height: 34px; padding: 0 var(--s-6) 0 var(--s-10); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ui-code-editor__body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; overflow: auto; font: var(--fw-regular) var(--fs-xs)/20px var(--font-mono); font-feature-settings: normal; }
.ui-code-editor__gutter { list-style: none; margin: 0; padding: var(--s-6) var(--s-8) var(--s-6) var(--s-10); background: var(--code-gutter); border-right: 1px solid var(--border); color: var(--text-3); text-align: right; user-select: none; font-feature-settings: var(--font-features-num); }
.ui-code-editor__gutter > li[data-error] { color: var(--danger-text); font-weight: var(--fw-bold); }
.ui-code-editor__gutter > li[data-error]::before { content: "● "; font-size: 0.8em; }
.ui-code-editor__code { position: relative; margin: 0; padding: var(--s-6) 0; white-space: pre; color: var(--code-punct); font: inherit; tab-size: 2; }
.ui-code-editor__line { display: block; padding: 0 var(--s-12); min-height: 20px; }
.ui-code-editor__line[data-current] { background: var(--code-gutter); }
.ui-code-editor__line[data-error] { background: color-mix(in srgb, var(--danger) 8%, var(--code-bg)); }
.ui-code-editor__area { position: relative; min-width: 0; }
.ui-code-editor__input {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--s-6) var(--s-12); margin: 0; border: 0; border-radius: 0; resize: none;
  background: transparent; color: transparent; caret-color: var(--text); font: inherit; white-space: pre; overflow: hidden; tab-size: 2;
}
.ui-code-editor__input:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: -2px; }
.ui-code-editor__input::selection { background: var(--accent-soft-2); color: transparent; }
.ui-code-editor__status { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; min-height: 28px; padding: 0 var(--s-10); border-top: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-3); font-feature-settings: var(--font-features-num); }
.ui-code-editor__status > .ui-field__error { margin-right: auto; }
.ui-tk-key { color: var(--code-key); }
.ui-tk-str { color: var(--code-str); }
.ui-tk-num { color: var(--code-num); }
.ui-tk-kw { color: var(--code-kw); }
.ui-tk-punct { color: var(--code-punct); }
.ui-tk-comment { color: var(--code-comment); font-style: italic; }
.ui-tk-var { color: var(--mark-text); background: var(--mark-bg); border-radius: var(--r-xs); }
.ui-tk-err { text-decoration: wavy underline var(--danger); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Script editor (rich-ish text): one toolbar (roving tabindex), a contenteditable document,
   field tokens as atomic chips, Edit / Preview as lead / HTML. Output is sanitized HTML with
   --A--field--B-- tokens, so legacy scripts round-trip. */
.ui-rte { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border-input); border-radius: var(--r-md); background: var(--input-bg); }
.ui-rte:focus-within { border-color: var(--accent); }
.ui-rte__bar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-height: 38px; padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--r-md) var(--r-md) 0 0; }
.ui-rte__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4); min-width: 28px; height: 28px; padding: 0 var(--s-6); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; }
.ui-rte__btn:hover { background: var(--surface-4); color: var(--text); }
.ui-rte__btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.ui-rte__sep { width: 1px; height: 18px; margin: 0 var(--s-4); background: var(--border-strong); flex: none; }
.ui-rte__bar > .ui-select { width: auto; }
.ui-rte__bar > .ui-seg { margin-left: auto; }
.ui-rte__doc { min-height: 160px; max-height: 420px; overflow: auto; padding: var(--s-12) var(--s-16); color: var(--text); font-size: var(--fs-md); line-height: 1.6; outline: none; }
.ui-rte__doc:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: -2px; border-radius: 0; }
.ui-rte__doc h3 { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-2); margin: var(--s-12) 0 var(--s-4); }
.ui-rte__doc h3:first-child { margin-top: 0; }
.ui-rte__doc p { margin: 0 0 var(--s-8); }
.ui-rte__doc ul, .ui-rte__doc ol { margin: 0 0 var(--s-8); padding-left: var(--s-20); }
.ui-rte__foot { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; min-height: 28px; padding: 0 var(--s-10); border-top: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-3); border-radius: 0 0 var(--r-md) var(--r-md); }
.ui-rte__foot > :last-child { margin-left: auto; }
/* Field token: atomic (contenteditable=false), shows the field name; Preview swaps in .ui-var values */
.ui-vartoken {
  display: inline-flex; align-items: center; gap: 2px; padding: 0 var(--s-4); border-radius: var(--r-xs); vertical-align: baseline;
  background: var(--mark-bg); color: var(--mark-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mark-text) 30%, transparent);
  font: var(--fw-medium) 0.86em/1.5 var(--font-mono); white-space: nowrap; user-select: all;
}
.ui-vartoken::before { content: "{"; opacity: 0.7; }
.ui-vartoken::after { content: "}"; opacity: 0.7; }
.ui-vartoken[data-invalid] { background: var(--danger-soft); color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--danger); text-decoration: wavy underline var(--danger); text-underline-offset: 3px; }

/* File dropzone: a real "Choose file" button is the keyboard path; the zone is the mouse target.
   data-drag = file over the zone; aria-invalid = rejected type/size (message below). */
.ui-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-6); min-height: 148px;
  padding: var(--s-20); border: 1.5px dashed var(--border-input); border-radius: var(--r-lg); background: var(--surface-2);
  text-align: center; color: var(--text-2); font-size: var(--fs-sm);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ui-dropzone__icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); margin-bottom: var(--s-2); }
.ui-dropzone__title { font-weight: var(--fw-semibold); color: var(--text); }
.ui-dropzone__hint { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); }
.ui-dropzone[data-drag] { border-style: solid; border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.ui-dropzone[data-drag] .ui-dropzone__icon { background: var(--accent); color: var(--accent-fg); box-shadow: none; }
.ui-dropzone[data-drag] .ui-dropzone__title { color: var(--accent-text); }
.ui-dropzone[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.ui-dropzone[aria-invalid="true"] .ui-dropzone__icon { color: var(--danger-text); }
.ui-dropzone--compact { flex-direction: row; min-height: 0; padding: var(--s-10) var(--s-12); text-align: left; justify-content: flex-start; }
.ui-dropzone--compact .ui-dropzone__icon { width: 32px; height: 32px; margin: 0; }
.ui-filelist { list-style: none; display: flex; flex-direction: column; gap: var(--s-6); margin: 0; padding: 0; }
.ui-filerow {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-4) var(--s-10);
  padding: var(--s-8) var(--s-8) var(--s-8) var(--s-10); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.ui-filerow > .ui-icon { color: var(--tone-t, var(--text-3)); }
.ui-filerow__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ui-filerow__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-filerow__meta { font-size: var(--fs-xs); color: var(--text-3); font-feature-settings: var(--font-features-num); }
.ui-filerow__status { display: inline-flex; align-items: center; gap: var(--s-4); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--tone-t, var(--text-2)); white-space: nowrap; font-feature-settings: var(--font-features-num); }
.ui-filerow > .ui-progress { grid-column: 2 / -1; }
.ui-filerow[data-tone="danger"] { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* ---------- 17. Shell: app grid, top bar, rail, page head ---------- */
.ui-app {
  display: grid; height: 100dvh; min-height: 0;
  grid-template: "top top" var(--topbar-h) "rail main" minmax(0, 1fr) / var(--rail-w) minmax(0, 1fr);
}
.ui-app[data-rail="collapsed"] { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }
.ui-app > .ui-topbar { grid-area: top; }
.ui-app > .ui-rail { grid-area: rail; }
.ui-app > .ui-main { grid-area: main; }
.ui-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.ui-main--scroll { overflow: auto; }

.ui-topbar {
  display: flex; align-items: center; gap: var(--s-8); height: var(--topbar-h); padding: 0 var(--s-12) 0 0;
  background: var(--surface); border-bottom: 1px solid var(--border); z-index: var(--z-topbar); min-width: 0;
}
.ui-topbar__brand { display: flex; align-items: center; gap: var(--s-8); width: var(--rail-w); flex: none; padding: 0 var(--s-8) 0 var(--s-12); height: 100%; border-right: 1px solid var(--border); }
.ui-app[data-rail="collapsed"] .ui-topbar__brand { width: auto; padding: 0 var(--s-8) 0 13px; border-right: 0; }
.ui-logo { width: 26px; height: 26px; border-radius: var(--r-md); background: var(--accent); color: var(--accent-fg); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ui-logo .ui-icon { width: 16px; height: 16px; stroke-width: 2.25; }
.ui-switcher {
  display: inline-flex; align-items: center; gap: var(--s-6); height: 30px; padding: 0 var(--s-8); min-width: 0;
  border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap;
}
.ui-switcher:hover { background: var(--surface-3); border-color: var(--border); }
.ui-switcher > .ui-icon:last-child { width: 14px; height: 14px; color: var(--text-3); }
.ui-switcher--scope { border-color: var(--border-strong); font-weight: var(--fw-medium); color: var(--text-2); }
.ui-switcher--scope b { color: var(--text); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.ui-topbar__search { flex: 0 1 440px; min-width: 160px; }
.ui-topbar__search .ui-input { background: var(--surface-2); border-color: var(--border-strong); }
.ui-topbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
/* The connection label keeps a gap to the icon buttons after it (V-76288e). */
.ui-topbar__end > .ui-conn { margin-inline: var(--s-4) var(--s-8); }
.ui-topbar__btn { position: relative; }
.ui-topbar__btn .ui-count { position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: var(--fs-2xs); }
.ui-user { display: inline-flex; align-items: center; gap: var(--s-8); height: 34px; padding: 0 var(--s-6) 0 var(--s-4); border: 0; border-radius: var(--r-md); background: transparent; text-align: left; }
.ui-user:hover { background: var(--surface-3); }
.ui-user__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.1; color: var(--text); }
.ui-user__role { font-size: var(--fs-2xs); color: var(--text-3); line-height: 1.2; }
.ui-conn { display: inline-flex; align-items: center; gap: var(--s-6); font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.ui-conn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.ui-conn[data-tone="warning"]::before { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.ui-conn[data-tone="danger"]::before { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

.ui-rail {
  display: flex; flex-direction: column; min-height: 0; background: var(--surface-2); border-right: 1px solid var(--border);
  z-index: var(--z-rail); font-size: var(--fs-sm);
}
.ui-rail__top { flex: none; padding: var(--s-8) var(--s-8) var(--s-4); display: flex; gap: var(--s-6); }
.ui-rail__top .ui-search { flex: 1; }
.ui-rail__top .ui-input { height: 28px; background: var(--surface); }
.ui-rail__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--s-4) var(--s-8) var(--s-12); }
.ui-rail__label { padding: var(--s-12) var(--s-8) var(--s-4); }
.ui-rail__foot { flex: none; padding: var(--s-6) var(--s-8); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.ui-nav__group, .ui-nav__item {
  display: flex; align-items: center; gap: var(--s-8); width: 100%; height: 28px; padding: 0 var(--s-8);
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-2); text-decoration: none; text-align: left; font-size: var(--fs-sm); white-space: nowrap;
}
.ui-nav__group { color: var(--text); font-weight: var(--fw-medium); margin-top: 2px; }
.ui-nav__group > .ui-icon:first-child { color: var(--text-2); }
.ui-nav__group > .ui-icon:last-child { margin-left: auto; width: 14px; height: 14px; color: var(--text-3); transition: transform var(--dur) var(--ease); }
.ui-nav__group[aria-expanded="true"] > .ui-icon:last-child { transform: rotate(90deg); }
.ui-nav__group:hover, .ui-nav__item:hover { background: var(--surface-4); color: var(--text); }
.ui-nav__items { display: flex; flex-direction: column; gap: 1px; padding: 1px 0 var(--s-6) 15px; margin-left: var(--s-8); border-left: 1px solid var(--border); }
.ui-nav__item { padding-left: var(--s-10); height: 26px; }
/* Long labels end in an ellipsis inside the rail (full text in the title tooltip). */
.ui-nav__group > span, .ui-nav__item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-nav__item > .ui-icon { color: var(--text-3); width: 14px; height: 14px; }
.ui-nav__item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--fw-semibold); }
.ui-nav__item[aria-current="page"] > .ui-icon { color: var(--accent-text); }
.ui-nav__count { margin-left: auto; font-size: var(--fs-2xs); color: var(--text-3); font-feature-settings: var(--font-features-num); }
.ui-nav__item .ui-dot { margin-left: auto; }
.ui-app[data-rail="collapsed"] .ui-rail .ui-nav__group > span,
.ui-app[data-rail="collapsed"] .ui-rail .ui-nav__group > .ui-icon:last-child,
.ui-app[data-rail="collapsed"] .ui-rail .ui-nav__items,
.ui-app[data-rail="collapsed"] .ui-rail .ui-rail__label,
.ui-app[data-rail="collapsed"] .ui-rail .ui-rail__top,
.ui-app[data-rail="collapsed"] .ui-rail .ui-nav__fav,
.ui-app[data-rail="collapsed"] .ui-rail__foot .ui-nav__item > span { display: none; }
.ui-app[data-rail="collapsed"] .ui-nav__group, .ui-app[data-rail="collapsed"] .ui-nav__item { justify-content: center; padding: 0; height: 36px; }
.ui-app[data-rail="collapsed"] .ui-nav__group[aria-current="true"] { background: var(--accent-soft); color: var(--accent-text); }
.ui-app[data-rail="collapsed"] .ui-nav__group[aria-current="true"] > .ui-icon { color: var(--accent-text); }

.ui-pagehead { flex: none; display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-12) var(--s-20) 0; background: var(--surface); border-bottom: 1px solid var(--border); }
.ui-pagehead__row { display: flex; align-items: center; gap: var(--s-10); flex-wrap: wrap; min-width: 0; }
.ui-pagehead__title { display: flex; align-items: baseline; gap: var(--s-8); min-width: 0; }
.ui-pagehead__meta { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-3); }
.ui-pagehead__meta b { color: var(--text-2); font-weight: var(--fw-semibold); }
.ui-pagehead__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.ui-pagehead .ui-tabs { border-bottom: 0; margin-top: var(--s-2); }
.ui-pagehead--plain { padding-bottom: var(--s-12); }

/* ---------- 18. Agent workspace ---------- */
/* clip, not hidden: a focused menu item past the edge must never scroll the workspace sideways (nothing moves). */
.ui-agent {
  display: grid; height: 100dvh; min-height: 0; overflow: clip;
  grid-template-rows: var(--agentbar-h) auto minmax(0, 1fr) var(--legend-h);
  background: var(--bg);
}
.ui-agentbar {
  display: flex; align-items: center; gap: var(--s-10); padding: 0 var(--s-12) 0 var(--s-8);
  background: var(--surface); border-bottom: 1px solid var(--border); min-width: 0;
}
.ui-agentbar__block { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.15; }
.ui-agentbar__block .ui-caps { letter-spacing: 0.05em; }
.ui-agentbar__value { font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-agentbar__value .ui-code { font-size: var(--fs-xs); }
.ui-agentbar__stats { display: flex; align-items: baseline; gap: var(--s-10); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.ui-agentbar__stats b { font-size: var(--fs-sm); color: var(--text); font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num); }

/* Call bar (design v2 header row): identity | timer | controls. data-state tints the whole bar
   very lightly (no edge stripe); DEAD turns it red. Flush under the agent bar, 64 px. */
.ui-callbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-16);
  min-height: var(--callbar-h); padding: var(--s-6) var(--s-16) var(--s-6) var(--s-20);
  background: color-mix(in srgb, var(--st, var(--surface)) 6%, var(--surface)); border-bottom: 1px solid var(--border);
}
.ui-callbar__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-callbar__name { display: flex; align-items: baseline; gap: var(--s-10); font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: -0.01em; white-space: nowrap; min-width: 0; }
.ui-callbar__phone { font-feature-settings: var(--font-features-num); font-weight: var(--fw-regular); color: var(--text-2); }
.ui-callbar__meta { display: flex; align-items: center; gap: var(--s-8); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; min-width: 0; }
.ui-callbar__meta .ui-icon { width: 13px; height: 13px; color: var(--text-3); }
.ui-callbar__meta > span { display: inline-flex; align-items: center; gap: var(--s-4); }
.ui-callbar__time { display: flex; flex-direction: column; align-items: flex-end; padding: 0 var(--s-12); min-width: 120px; }
.ui-callbar__clock { display: flex; align-items: baseline; gap: var(--s-8); }
.ui-callbar__clock .ui-timer { font-size: var(--fs-xl); line-height: 1; font-weight: var(--fw-semibold); color: var(--text); letter-spacing: -0.01em; }
.ui-callbar__line { font-size: var(--fs-2xs); color: var(--text-3); white-space: nowrap; margin-top: 3px; font-feature-settings: var(--font-features-num); }
.ui-callbar__line b { color: var(--st-t, var(--text-2)); font-weight: var(--fw-bold); }
.ui-callbar__ctls { display: flex; align-items: center; gap: var(--s-2); }
.ui-callbar[data-state="dead"] { background: var(--danger-soft); border-bottom-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.ui-callbar__dead { display: flex; align-items: center; gap: var(--s-12); min-width: 0; }
.ui-callbar__deadicon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--danger-fill); color: var(--danger-on); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ui-callbar__deadtitle { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--danger-text); }
.ui-callbar__countdown { display: flex; flex-direction: column; gap: 3px; min-width: 210px; padding: 0 var(--s-12); border-left: 1px solid var(--border); }
.ui-callbar__countdown .ui-row { justify-content: space-between; font-size: var(--fs-xs); color: var(--text-2); }
.ui-callbar__countdown .ui-timer { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--danger-text); }

/* Call control (design v2): a 36 px icon button; the label and key are its tooltip and stay
   in the accessible name. A pressed control shows its label (3-way 0:42, Unmute). Hang up is
   a red 40 px button with its label. */
.ui-callctl {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-6);
  min-width: 36px; height: 36px; padding: 0 var(--s-8); border: 1px solid transparent; border-radius: var(--r-lg);
  background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 0.1s var(--ease);
}
.ui-callctl:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.ui-callctl:active { transform: scale(0.97); }
.ui-callctl > .ui-icon { width: 18px; height: 18px; }
.ui-callctl__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ui-callctl[aria-pressed="true"] .ui-callctl__label, .ui-callctl--hangup .ui-callctl__label, .ui-callctl--labeled .ui-callctl__label {
  position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; display: inline-flex; align-items: center; gap: var(--s-6);
}
.ui-callctl .ui-kbd, .ui-callctl > .ui-callctl__keys { display: none; }
.ui-callctl--hangup {
  height: 40px; padding: 0 var(--s-16); margin-left: var(--s-8); background: var(--danger-fill); border-color: var(--danger-fill); color: var(--danger-on); font-weight: var(--fw-semibold);
}
/* A labeled control (Transfer): as tall as Hang up, bordered, label always shown (VQA-143). */
.ui-callctl--labeled { height: 40px; padding: 0 var(--s-12); border-color: var(--border-strong); background: var(--surface); color: var(--text); font-weight: var(--fw-semibold); }
.ui-callctl--labeled:hover { background: var(--surface-2); border-color: var(--border-strong); }
.ui-callctl--hangup:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--danger-on); }
.ui-callctl[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.ui-callctl[data-tone][aria-pressed="true"] { background: var(--tone-s); border-color: transparent; color: var(--tone-t); }
.ui-callctl[disabled], .ui-callctl[aria-disabled="true"] { background: transparent; border-color: transparent; color: var(--text-disabled); cursor: not-allowed; transform: none; }
.ui-callctl--hangup[aria-disabled="true"] { background: var(--surface-2); border-color: var(--border); }
.ui-callctl--labeled[aria-disabled="true"] { border-color: var(--border); }
.ui-callctl__rec { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); display: inline-block; }
@media (prefers-reduced-motion: reduce) { .ui-callctl:active { transform: none; } }

/* Workspace columns */
.ui-ws { display: grid; grid-template-columns: minmax(280px, 30fr) minmax(340px, 38fr) minmax(320px, 32fr); gap: var(--s-12); padding: var(--s-12); min-height: 0; }
.ui-ws > .ui-panel { min-height: 0; }
.ui-ws__switch { display: none; }

/* Lead form */
.ui-leadform { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-8) var(--s-8); }
.ui-leadform > .ui-field { grid-column: span 3; }
.ui-leadform > .ui-field--full { grid-column: 1 / -1; }
.ui-leadform > .ui-field--2 { grid-column: span 2; }
.ui-leadform > .ui-field--4 { grid-column: span 4; }
.ui-leadform > .ui-field--1 { grid-column: span 1; }
.ui-leadform .ui-field__label { font-size: var(--fs-2xs); }
.ui-leadform .ui-input, .ui-leadform .ui-select { height: 30px; font-size: var(--fs-sm); }
.ui-leadform .ui-textarea { min-height: 48px; font-size: var(--fs-sm); padding-top: 4px; padding-bottom: 4px; }
.ui-attempts { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-3); }

/* Script */
.ui-script { font-size: var(--fs-lg); line-height: 1.62; color: var(--text); }
.ui-script__section { position: relative; padding: var(--s-4) var(--s-12) var(--s-12); border-radius: var(--r-md); }
.ui-script__section + .ui-script__section { margin-top: var(--s-4); }
.ui-script__section[aria-current="step"] { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.ui-script__section[data-done] { color: var(--text-2); }
.ui-script__head { display: flex; align-items: center; gap: var(--s-8); margin-bottom: var(--s-4); }
.ui-script__head .ui-caps { color: var(--accent-text); }
.ui-script__section[data-done] .ui-script__head .ui-caps { color: var(--text-3); }
.ui-script__progress { margin-left: auto; font-size: var(--fs-2xs); color: var(--text-3); font-feature-settings: var(--font-features-num); }
.ui-var { padding: 0 3px; border-radius: var(--r-xs); background: var(--mark-bg); color: var(--mark-text); font-weight: var(--fw-semibold); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--mark-text) 35%, transparent); }
.ui-script__branch { display: flex; gap: var(--s-8); align-items: flex-start; margin-top: var(--s-8); padding: var(--s-6) var(--s-10); border: 1px dashed var(--border-strong); border-radius: var(--r-md); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-2); }
.ui-script__branch b { color: var(--text); }
.ui-script__q { display: grid; grid-template-columns: 18px 1fr; gap: 2px var(--s-8); padding: var(--s-6) 0; font-size: var(--fs-md); line-height: var(--lh-md); border-top: 1px solid var(--border-subtle); }
.ui-script__q > .ui-icon { margin-top: 2px; color: var(--success); }
.ui-script__q > .ui-qnum { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-input); font-size: var(--fs-2xs); font-weight: var(--fw-bold); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; color: var(--text-2); }
.ui-answers { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4); }
.ui-answer {
  display: inline-flex; align-items: center; gap: var(--s-4); height: 24px; padding: 0 var(--s-8); border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-medium);
}
.ui-answer:hover { background: var(--surface-3); color: var(--text); }
.ui-answer[aria-pressed="true"] { background: var(--success-soft); border-color: var(--success); color: var(--success-text); font-weight: var(--fw-semibold); }
.ui-answer__field { color: var(--text-3); font-weight: var(--fw-regular); }
.ui-answer[aria-pressed="true"] .ui-answer__field { color: inherit; }

/* Disposition keypad: fixed 3x3, never moves, never fades */
.ui-arm {
  display: inline-flex; align-items: center; gap: var(--s-6); height: 24px; padding: 0 var(--s-8); border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); white-space: nowrap;
}
.ui-arm::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.ui-arm[aria-pressed="true"] { background: var(--success-soft); border-color: var(--success); color: var(--success-text); }
.ui-arm[aria-pressed="true"]::before { background: var(--success); box-shadow: none; }
.ui-arm .ui-kbd { height: 16px; font-size: var(--fs-2xs); border-bottom-width: 1px; }
.ui-dispo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.ui-dispo__key {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; gap: 1px var(--s-4);
  height: 60px; padding: var(--s-4) var(--s-10) var(--s-4) var(--s-12); text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform 0.1s var(--ease);
}
.ui-dispo__key:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ui-dispo__key:active { transform: scale(0.97); }
.ui-dispo__code { font: var(--fw-semibold) var(--fs-md)/1.2 var(--font-mono); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s-4); }
.ui-dispo__code .ui-icon { width: 12px; height: 12px; color: var(--text-3); stroke-width: 2; }
/* Two lines inside the fixed 60 px card, so "Answering Machine" and "Disconnected Number" read whole (V-1110-10). */
.ui-dispo__label { grid-column: 1 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--fs-xs); line-height: 1.25; color: var(--text-3); overflow: hidden; overflow-wrap: anywhere; }
/* The key sits in the corner in a small box (agent mockup, Steve 11-09). */
.ui-dispo__key > .ui-kbd { position: absolute; top: 7px; right: 8px; height: 18px; min-width: 18px; padding: 0 var(--s-4); border: 1px solid var(--border-strong); border-radius: var(--r-xs); background: var(--surface); box-shadow: none; color: var(--text-2); font: var(--fw-medium) var(--fs-2xs)/16px var(--font-mono); text-align: center; }
.ui-dispo__key[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--surface); box-shadow: none; }
.ui-dispo__key[aria-pressed="true"] .ui-dispo__code, .ui-dispo__key[aria-pressed="true"] .ui-dispo__code .ui-icon { color: var(--surface); }
.ui-dispo__key[aria-pressed="true"] .ui-dispo__label, .ui-dispo__key[aria-pressed="true"] > .ui-kbd { color: var(--surface); opacity: 0.75; }
.ui-dispo__key[aria-pressed="true"] > .ui-kbd { background: transparent; border-color: currentColor; }
.ui-dispo__key[aria-disabled="true"] { background: var(--surface-2); border-style: dashed; cursor: not-allowed; }
.ui-dispo__key[aria-disabled="true"] .ui-dispo__code { text-decoration: line-through; color: var(--text-2); }
/* Waiting only for the hang-up (a click queues it): a normal card, not a refused one. */
.ui-dispo__key[aria-disabled="true"][data-waiting] { background: var(--surface); border-style: solid; cursor: pointer; }
.ui-dispo__key[aria-disabled="true"][data-waiting] .ui-dispo__code { text-decoration: none; color: var(--text); }
.ui-dispo--locked .ui-dispo__key { cursor: not-allowed; }
/* A preview of the keys, not controls: no hover lift, no press. */
.ui-dispo--static .ui-dispo__key { cursor: default; }
.ui-dispo--static .ui-dispo__key:hover { border-color: var(--border); box-shadow: none; transform: none; }
.ui-dispo--static .ui-dispo__key:active { transform: none; }
.ui-dispo--locked .ui-dispo__key[aria-disabled="true"] { border-style: solid; background: var(--surface-2); }
.ui-dispo--locked .ui-dispo__key[aria-disabled="true"] .ui-dispo__code { text-decoration: none; color: var(--text-2); }

/* Pause codes with limits and approval lock */
.ui-pausegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.ui-pausecode {
  display: flex; align-items: center; gap: var(--s-4); height: 28px; padding: 0 var(--s-8); border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-2xs); color: var(--text-2); white-space: nowrap;
}
.ui-pausecode > b { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text); }
.ui-pausecode > span { margin-left: auto; font-feature-settings: var(--font-features-num); }
.ui-pausecode:hover { background: var(--surface-3); }
.ui-pausecode[aria-checked="true"] { background: var(--st-paused-soft); border-color: var(--st-paused); color: var(--st-paused-text); }
.ui-pausecode[aria-checked="true"] > b { color: var(--st-paused-text); }

.ui-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-md); overflow: hidden; }
.ui-stat { background: var(--surface); padding: var(--s-6) var(--s-8); min-width: 0; }
.ui-stat__value { font-size: var(--fs-md); font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num); line-height: 1.3; }
.ui-stat__meta { font-size: var(--fs-2xs); color: var(--text-3); }

.ui-cbdue { display: flex; align-items: center; gap: var(--s-10); padding: var(--s-8) var(--s-10); border-radius: var(--r-md); background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); font-size: var(--fs-xs); }
.ui-cbdue > .ui-icon { color: var(--warning-text); }
.ui-cbdue__text { flex: 1; min-width: 0; }
.ui-cbdue__text b { font-weight: var(--fw-semibold); }

/* Footer shortcut legend (context-sensitive) */
.ui-legend {
  display: flex; align-items: center; gap: var(--s-16); padding: 0 var(--s-12); overflow: hidden;
  background: var(--surface); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap;
}
.ui-legend > span { display: inline-flex; align-items: center; gap: var(--s-6); }
.ui-legend__end { margin-left: auto; color: var(--text-3); }

/* Transfer & 3-way panel (takes the center column; dispositions stay put) */
.ui-xfer { display: flex; flex-direction: column; gap: var(--s-12); }
.ui-xfer__presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.ui-xfer__preset {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 var(--s-8); padding: var(--s-8) var(--s-10);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); text-align: left; color: var(--text);
}
.ui-xfer__preset:hover { background: var(--surface-3); }
.ui-xfer__preset[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ui-xfer__preset > .ui-icon { grid-row: span 2; color: var(--text-2); }
.ui-xfer__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ui-xfer__meta { grid-column: 2; font-size: var(--fs-2xs); color: var(--text-3); font-feature-settings: var(--font-features-num); }
/* A wrapping row: each action is at least as wide as its label and key (equal columns clipped
   "With customer [W]"), and the row grows to fill the panel. */
.ui-xfer__actions { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.ui-xfer__actions .ui-btn { flex: 1 1 auto; justify-content: flex-start; padding: 0 var(--s-8); }
.ui-xfer__actions .ui-btn > .ui-kbd, .ui-xfer__actions .ui-btn > .ui-keys { margin-left: auto; }
.ui-xfer__lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-6); }
.ui-xfer__lines .ui-btn { flex-direction: column; align-items: flex-start; height: auto; padding: var(--s-4) var(--s-8); gap: 3px; }
.ui-xfer__lines .ui-btn > .ui-icon { display: none; }
.ui-xfer__lines .ui-keys { margin-left: 0; }
.ui-agentlist { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.ui-agentlist__row { display: flex; align-items: center; gap: var(--s-8); min-height: 34px; padding: 0 var(--s-10); border: 0; background: var(--surface); text-align: left; font-size: var(--fs-sm); color: var(--text); }
.ui-agentlist__row + .ui-agentlist__row { border-top: 1px solid var(--border-subtle); }
.ui-agentlist__row:hover { background: var(--surface-3); }
.ui-agentlist__row:focus-visible { outline-offset: -2px; border-radius: var(--r-md); }
.ui-agentlist__row[aria-selected="true"] { background: var(--accent-soft); }
.ui-agentlist__row > .ui-pill { margin-left: auto; }

/* Incoming screen pop */
.ui-screenpop { border: 1px solid var(--st-queue); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md), 0 0 0 3px var(--st-queue-soft); overflow: hidden; animation: ui-pop var(--dur-slow) var(--ease-out); }
.ui-screenpop__head { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-8) var(--s-12); background: var(--st-queue-soft); color: var(--st-queue-text); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.ui-screenpop__body { padding: var(--s-10) var(--s-12); display: flex; flex-direction: column; gap: var(--s-6); }

/* ---------- 19. Supervisor and TV ---------- */
.ui-wall { --row-h: var(--row-h-wall); }
.ui-wall td { font-size: var(--fs-sm); }
.ui-wall .ui-pill { min-width: 76px; height: 20px; font-size: var(--fs-xs); }
.ui-wall thead th { font-size: var(--fs-xs); letter-spacing: 0.04em; }
.ui-wall .ui-tag { font-size: var(--fs-xs); }
.ui-wall .ui-legacy { font-size: var(--fs-xs); letter-spacing: -0.02em; }
.ui-wall__reason { display: inline-flex; align-items: center; gap: var(--s-6); min-width: 0; color: var(--text-2); }
.ui-wall__reason .ui-num { color: var(--text); }
.ui-wall__limit { font-size: var(--fs-xs); color: var(--text-3); }
.ui-wall .ui-table__id { font-size: var(--fs-xs); }
.ui-wallgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); min-height: 0; }
.ui-wallgrid > .ui-panel { overflow: hidden; }
/* The floor is one list: two columns of rows at >= 1680 px, one scrolling column below */
@media (max-width: 1679px) {
  .ui-wallgrid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow: auto; align-content: start; }
  .ui-wallgrid > .ui-panel { overflow: visible; }
  .ui-wallgrid .ui-table-wrap { overflow: visible; }
}

/* Listen dock (V3): one 52 px inverse bar under the floor while a monitor runs. */
.ui-dock { display: flex; align-items: center; gap: var(--s-12); min-height: 52px; padding: var(--s-6) var(--s-12) var(--s-6) var(--s-16); flex-wrap: wrap; background: var(--surface-inverse); color: var(--text-inverse); border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.ui-dock__live { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--success); --st-f: var(--success); animation: ui-breathe var(--pulse-period) var(--ease) infinite; }
.ui-dock__title { font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ui-dock__meta { color: var(--text-inverse-2); white-space: nowrap; font-feature-settings: var(--font-features-num); }
.ui-dock .ui-btn { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 28%, transparent); }
.ui-dock .ui-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); border-color: color-mix(in srgb, currentColor 40%, transparent); }
.ui-dock .ui-btn[aria-pressed="true"] { background: color-mix(in srgb, currentColor 18%, transparent); border-color: currentColor; }
.ui-dock .ui-btn--danger { background: var(--danger-fill); border-color: var(--danger-fill); color: var(--danger-on); }
.ui-dock .ui-kbd { background: transparent; color: inherit; opacity: .7; border-color: color-mix(in srgb, currentColor 40%, transparent); }
/* Needs-you card (V3): a status dot, two lines, one action and a dismiss. */
.ui-ny { display: flex; align-items: center; gap: var(--s-12); min-width: 0; padding: var(--s-10) var(--s-8) var(--s-10) var(--s-12); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.ui-ny__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tone, var(--accent)); }
.ui-ny__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ui-ny__title { font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-ny__title b { color: var(--tone-t, inherit); }
.ui-ny__sub { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.ui-wave i { display: block; width: 3px; border-radius: 1px; background: var(--chart-1); }
.ui-wave i[data-who="customer"] { background: var(--chart-3); }

.ui-sidelist { display: flex; flex-direction: column; }
.ui-sidelist__item { display: flex; align-items: flex-start; gap: var(--s-10); padding: var(--s-8) var(--s-12); border-top: 1px solid var(--border-subtle); font-size: var(--fs-xs); }
.ui-sidelist__item:first-child { border-top: 0; }
.ui-sidelist__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-sidelist__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.ui-sidelist__meta { color: var(--text-3); }
.ui-sidelist__icon { width: 28px; height: 28px; border-radius: var(--r-md); background: var(--tone-s); color: var(--tone-t); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ui-sidelist__actions { display: flex; gap: var(--s-6); margin-top: var(--s-4); }
.ui-sidelist__time { font-size: var(--fs-lg); font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num); }
.ui-pos { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-4); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-2xs); font-weight: var(--fw-bold); flex: none; }

/* TV mode: dark by default, read from 4 m */
.ui-tv { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: var(--s-16); height: 100dvh; padding: var(--s-16) var(--s-24); background: var(--bg); overflow: hidden; cursor: none; }
.ui-tv__head { display: flex; align-items: center; gap: var(--s-16); }
.ui-tv__title { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-semibold); }
.ui-tv__meta { font-size: var(--fs-lg); color: var(--text-2); }
.ui-tv__clock { margin-left: auto; font-size: var(--fs-3xl); line-height: 1; font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num); }
.ui-tv__kpis { display: grid; grid-template-columns: 1.55fr 0.75fr 1.15fr 0.95fr 1.9fr; gap: var(--s-16); }
.ui-tvkpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-12) var(--s-20) var(--s-16); min-width: 0; position: relative; overflow: hidden; }
.ui-tvkpi__label { display: flex; align-items: center; gap: var(--s-10); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-2); }
.ui-tvkpi__value { font-size: var(--fs-6xl); line-height: 1; font-weight: var(--fw-bold); font-feature-settings: var(--font-features-num); letter-spacing: -0.03em; margin-top: var(--s-6); white-space: nowrap; }
.ui-tvkpi__value small { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); color: var(--text-2); letter-spacing: 0; }
.ui-tvkpi__meta { font-size: var(--fs-lg); color: var(--text-2); margin-top: var(--s-6); white-space: nowrap; }
.ui-tvkpi[data-tone]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--tone); }
.ui-tvkpi[data-tone] .ui-tvkpi__value { color: var(--tone-t); }
.ui-tvkpi .ui-gauge { height: 14px; margin-top: var(--s-10); }
.ui-tvkpi .ui-statebar { margin-top: var(--s-10); }
.ui-tv__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--s-8); min-height: 0; }
.ui-tvtile {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 0;
  padding: var(--s-6) var(--s-12); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--st) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--st) 30%, var(--border)); overflow: hidden;
}
.ui-tvtile__name { font-size: var(--fs-tv); line-height: var(--lh-tv); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.ui-tvtile__state { display: flex; align-items: center; gap: var(--s-8); font-size: var(--fs-lg); line-height: 1.3; font-weight: var(--fw-bold); color: var(--st-t); letter-spacing: 0.03em; white-space: nowrap; }
.ui-tvtile__state .ui-glyph { --g: 16px; }
.ui-tvtile__time { font-size: var(--fs-4xl); line-height: 1; font-weight: var(--fw-semibold); font-feature-settings: var(--font-features-num); letter-spacing: -0.02em; }
.ui-tvtile__sub { font-family: var(--font-mono); font-weight: var(--fw-bold); }
.ui-tvtile[data-level="over"] { background: var(--st-f); color: var(--st-on); border-color: var(--st-f); }
.ui-tvtile[data-level="over"] .ui-tvtile__state { color: var(--st-on); --st: var(--st-on); }
.ui-tvtile[data-level="over"] .ui-glyph { --st: var(--st-on); }
.ui-tvtile[data-level="over"] .ui-tvtile__time::before { content: "▲ "; font-size: 0.6em; vertical-align: 0.25em; }
.ui-tv__legend { display: flex; align-items: center; gap: var(--s-24); font-size: var(--fs-lg); color: var(--text-2); flex-wrap: wrap; }
.ui-tv__legend > span { display: inline-flex; align-items: center; gap: var(--s-8); }
.ui-tv__legend .ui-glyph { --g: 16px; }
.ui-tv__legend b { color: var(--text); font-feature-settings: var(--font-features-num); }

/* ---------- 20. Layout templates ---------- */
.ui-page { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--s-16) var(--s-20); }
.ui-listpage { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ui-listpage__toolbar { flex: none; display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; padding: var(--s-8) var(--s-20); background: var(--surface); border-bottom: 1px solid var(--border); }
.ui-listpage__table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ui-listpage__table > .ui-table-wrap { flex: 1 1 auto; }
/* Design v2 list template (POST-173): one-line head, ID + name cell, status dot, one-line empty. */
.ui-listhead .ui-listhead__count { white-space: nowrap; }
/* Context under a list head (retention note, the active "changes by" scope). */
.ui-listhead__context { flex: none; display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-8) var(--s-20); background: var(--surface); border-bottom: 1px solid var(--border); }
.ui-listhead__context:empty { display: none; }
.ui-idname { display: inline-flex; align-items: baseline; gap: var(--s-8); min-width: 0; }
.ui-idname__id { flex: none; }
.ui-idname__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-statusdot { display: inline-flex; align-items: center; gap: var(--s-6); color: var(--text-2); white-space: nowrap; }
.ui-statusdot > .ui-icon { color: var(--tone, var(--text-3)); }
.ui-emptyline { display: flex; align-items: center; justify-content: center; gap: var(--s-12); flex-wrap: wrap; padding: var(--s-24) var(--s-20); color: var(--text-2); }
/* Design v2 record editor (POST-174): label | control rows, (i) tips, visible notes. */
.ui-editrow { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: var(--s-4) var(--s-16); align-items: start; padding: var(--s-6) 0; }
.ui-editrow__label { display: flex; align-items: center; gap: var(--s-4); min-height: 32px; }
.ui-editrow__control { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.ui-editrow__note { margin: 0; font-size: var(--fs-xs); color: var(--text-2); }
.ui-editrow[data-mod="unsaved"] .ui-editrow__label::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.ui-infotip { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: help; }
.ui-infotip:hover, .ui-infotip:focus-visible { color: var(--text); background: var(--surface-3); }
.ui-editorhead .ui-statusdot { margin-left: var(--s-4); }
/* An editor head without tabs ends with the same space as a plain page head (V-d8619c). */
.ui-editorhead:not(:has(.ui-tabs)) { padding-bottom: var(--s-12); }
@media (max-width: 640px) { .ui-editrow { grid-template-columns: minmax(0, 1fr); } .ui-editrow__label { min-height: 0; } }
/* Design v2 settings (POST-175): the Modified badge sits with the label. */
.ui-setting__mod { flex: none; }
/* Design v2 queue-inbox (POST-177): one-line items, one action, keyboard first, detail beside. */
.ui-inbox { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-16); align-items: start; min-height: 0; }
.ui-inbox--detail { grid-template-columns: minmax(280px, 2fr) minmax(0, 3fr); }
.ui-inbox__main { display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; }
.ui-inbox__head { display: flex; align-items: center; gap: var(--s-8); min-height: 32px; }
.ui-inbox__chips { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.ui-inbox__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.ui-inbox__list:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-inbox__item { display: flex; align-items: center; gap: var(--s-10); min-height: 44px; padding: var(--s-6) var(--s-8) var(--s-6) var(--s-12); border-top: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--dur) var(--ease); }
.ui-inbox__item:first-child { border-top: 0; }
.ui-inbox__item:hover { background: var(--surface-2); }
.ui-inbox__item[aria-selected="true"] { background: var(--accent-soft); }
.ui-inbox__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tone, var(--text-3)); }
.ui-inbox__title { flex: 1 1 auto; min-width: 0; font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-inbox__meta { flex: none; font-size: var(--fs-xs); color: var(--text-3); }
.ui-inbox__item .ui-row-actions { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .ui-inbox__item .ui-row-actions { opacity: 0; transition: opacity var(--dur) var(--ease); }
  .ui-inbox__item:hover .ui-row-actions, .ui-inbox__item[aria-selected="true"] .ui-row-actions, .ui-inbox__item:focus-within .ui-row-actions { opacity: 1; }
}
.ui-inbox__clear { display: flex; align-items: center; justify-content: center; gap: var(--s-8); margin: 0; padding: var(--s-24) var(--s-20); color: var(--text-2); }
.ui-inbox__clear > .ui-icon { color: var(--success); }
.ui-inbox__detail { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: var(--s-16); }
@media (max-width: 900px) { .ui-inbox--detail { grid-template-columns: minmax(0, 1fr); } }
/* Wizard-import template (POST-178): one page and no steps; the whole page takes a drop. */
.ui-import { position: relative; display: flex; flex-direction: column; gap: var(--s-16); min-height: 60vh; }
.ui-import__idle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-12); min-height: 280px; padding: var(--s-32) var(--s-24); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface); text-align: center; animation: ui-rise var(--dur-slow) var(--ease-out); }
.ui-import__icon { color: var(--text-3); }
.ui-import__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }
.ui-import__problem { margin: 0; font-size: var(--fs-sm); color: var(--danger-text); }
.ui-import__reading { display: flex; flex-direction: column; gap: var(--s-12); padding: var(--s-24); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.ui-import__reading > .ui-skel:nth-child(2) { width: 80%; }
.ui-import__reading > .ui-skel:nth-child(3) { width: 55%; }
.ui-import__overlay { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-8); border: 2px dashed var(--accent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--accent-soft) 88%, transparent); color: var(--accent-text); font-weight: var(--fw-semibold); pointer-events: none; animation: ui-enter-pop var(--dur) var(--ease-out); }
.ui-import__overlay[hidden] { display: none; }
.ui-import[data-stage="mapping"] > :not(.ui-import__overlay, input) { animation: ui-rise var(--dur-slow) var(--ease-out); }
.ui-import__rulepanel { animation: ui-enter-rise var(--dur) var(--ease-out); }
.ui-import__go { min-width: 200px; height: 40px; font-size: var(--fs-md); }
.ui-import__run { display: flex; flex-direction: column; gap: var(--s-12); }
.ui-import__count { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.ui-import__done { display: flex; align-items: center; gap: var(--s-12); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }
.ui-import__check { width: 32px; height: 32px; flex: none; fill: none; stroke: var(--success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-import__check circle { stroke-dasharray: 63; stroke-dashoffset: 63; animation: ui-draw var(--dur-slow) var(--ease-out) forwards; }
.ui-import__check path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: ui-draw var(--dur-slow) var(--ease-out) var(--dur-slow) forwards; }
@keyframes ui-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ui-import__check circle, .ui-import__check path { stroke-dashoffset: 0; } }
.ui-sug { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ui-sug:hover { border-color: var(--border-strong); color: var(--text); }
.ui-sug:active { transform: scale(.96); }
.ui-sug[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-text); color: var(--accent-text); }
.ui-sug__p { font-size: var(--fs-2xs); color: var(--text-3); }
.ui-sug[aria-pressed="true"] .ui-sug__p { color: var(--accent-text); }
@media (forced-colors: active) { .ui-sug[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; } }
.ui-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; flex: 1 1 auto; min-height: 0; }
.ui-split > * { min-height: 0; }
.ui-settings { display: grid; grid-template-columns: var(--subnav-w) minmax(0, 1fr); flex: 1 1 auto; min-height: 0; container: settings / inline-size; }
/* Settings in a narrow space (a ~440 px side panel, a phone) lay out by their own width, not the
   window's (Steve 11-11 17:27): search and filters on top, the sections as a scrolling row, then
   one column of rows with each control under its label. */
@container settings (max-width: 44rem) {
  .ui-settings__nav, .ui-settings__body { grid-column: 1 / -1; }
  .ui-settings__nav { border-right: 0; border-bottom: 1px solid var(--border); overflow: visible; }
  .ui-settings__nav .ui-subnav { flex-direction: row; overflow-x: auto; gap: var(--s-4); padding-bottom: var(--s-2); }
  .ui-settings__nav .ui-subnav__item { flex: none; }
  .ui-settings__nav > .ui-spacer, .ui-settings__nav > .ui-dotlegend { display: none; }
  .ui-settings__scroll { padding-inline: 0; }
  .ui-settings-grid { columns: 1; }
  .ui-setting { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); padding-right: var(--s-12); }
  .ui-setting__control { grid-column: 1; grid-row: 3; }
}
/* Stacked under other cards, the form takes its content height instead of shrinking under them (V-dd296e). */
.ui-stack > .ui-settings { flex: none; }
.ui-settings__nav { display: flex; flex-direction: column; gap: var(--s-8); min-height: 0; padding: var(--s-12); border-right: 1px solid var(--border); background: var(--surface); overflow: auto; }
.ui-settings__body { display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.ui-settings__scroll { flex: 1 1 auto; overflow: auto; padding: var(--s-12) var(--s-20) var(--s-24) var(--s-8); }
.ui-settings__head { display: flex; align-items: baseline; gap: var(--s-12); flex-wrap: wrap; padding: var(--s-4) 0 var(--s-6) var(--s-16); }
.ui-detail { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ui-dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-12); align-content: start; }
.ui-col-3 { grid-column: span 3; } .ui-col-4 { grid-column: span 4; } .ui-col-5 { grid-column: span 5; } .ui-col-6 { grid-column: span 6; }
.ui-col-7 { grid-column: span 7; } .ui-col-8 { grid-column: span 8; } .ui-col-9 { grid-column: span 9; } .ui-col-12 { grid-column: 1 / -1; }
.ui-wizard { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-16); align-items: start; }
/* Two columns while each gets 15rem in the space the form sits in, else one: a form in a side
   panel or on a phone stacks, with its label above its input (Steve 11-11 17:27). */
.ui-formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(15rem, calc((100% - var(--s-20)) / 2))), 1fr)); gap: var(--field-gap) var(--s-20); }
.ui-formgrid > .ui-field--full { grid-column: 1 / -1; }

/* ---------- 21. Responsive ---------- */
/* Admin: rail collapses to icons below 1280, goes off-canvas below 1024 */
@media (max-width: 1279px) {
  .ui-app:not([data-rail="expanded"]) { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }
  .ui-app:not([data-rail="expanded"]) .ui-topbar__brand { width: auto; padding: 0 var(--s-8) 0 13px; border-right: 0; }
  .ui-app:not([data-rail="expanded"]) .ui-rail :is(.ui-rail__top, .ui-rail__label, .ui-nav__items, .ui-nav__fav, .ui-nav__group > span, .ui-nav__group > .ui-icon:last-child) { display: none; }
  .ui-app:not([data-rail="expanded"]) .ui-nav__group { justify-content: center; padding: 0; height: 36px; }
  .ui-settings-grid { columns: 1; }
  .ui-split > .ui-drawer { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; z-index: var(--z-drawer); box-shadow: var(--shadow-lg); }
  /* Agent: two columns; Script becomes a tab next to Lead */
  .ui-ws { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr); }
  .ui-ws__switch { display: inline-flex; }
  .ui-ws > .ui-ws__script { display: none; }
  .ui-ws[data-show="script"] > .ui-ws__script { display: flex; grid-column: 1; grid-row: 1; }
  .ui-ws[data-show="script"] > .ui-ws__lead { display: none; }
}
@media (max-width: 1023px) {
  /* The doubled class matches the specificity of the collapsed-rail rules above, which would
     otherwise keep a rail column and squeeze main into it. */
  .ui-app.ui-app { grid-template: "top" var(--topbar-h) "main" minmax(0, 1fr) / minmax(0, 1fr); }
  .ui-app > .ui-rail { position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--rail-w); transform: translateX(-100%); transition: transform var(--dur) var(--ease); box-shadow: var(--shadow-lg); }
  .ui-app[data-rail="open"] > .ui-rail { transform: none; }
  .ui-ws { grid-template-columns: minmax(0, 1fr); }
  .ui-wizard { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 22. Motion, reduced motion, forced colors ---------- */
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* v2 motion: breathe (live state pill), rise (content enters), drain (undo and wrap timers) */
@keyframes ui-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st-f, var(--accent)) 40%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes ui-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ui-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ui-rise { animation: ui-rise var(--dur-slow) var(--ease) both; }
.ui-breathe { animation: ui-breathe var(--pulse-period) var(--ease) infinite; }
.ui-drain { transform-origin: left; animation: ui-drain var(--drain, 3s) linear forwards; }
@keyframes ui-pulse { 0% { opacity: 0.7; transform: scale(0.7); } 70% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
@keyframes ui-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .ui-pill--live > .ui-glyph::after { display: none; }
  .ui-skel { animation: none; }
  .ui-btn:active { transform: none; }
  .ui-dispo__key:hover, .ui-dispo__key:active { transform: none; }
}

@media (forced-colors: active) {
  .ui-glyph, .ui-statebar > [data-state], .ui-gauge__value, .ui-gauge__limit, .ui-progress__bar, .ui-dot { forced-color-adjust: none; background-color: CanvasText; }
  :is([data-state="ready"], [data-state="preview"], [data-state="park"], [data-state="wrapup"]) > .ui-glyph { background: Canvas; box-shadow: inset 0 0 0 2px CanvasText; }
  .ui-pill, .ui-badge, .ui-tag, .ui-status__code, .ui-kbd, .ui-dispo__key, .ui-callctl, .ui-arm, .ui-statechip, .ui-tvtile, .ui-chip { border: 1px solid CanvasText; }
  .ui-dispo__key[aria-pressed="true"], .ui-btn[aria-pressed="true"], .ui-callctl[aria-pressed="true"], .ui-tab[aria-selected="true"], .ui-nav__item[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .ui-switch { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .ui-switch::after { background: CanvasText; }
  .ui-switch:checked { background: Highlight; }
  .ui-swatch, .ui-swatches__preview { forced-color-adjust: none; }
  .ui-swatch[aria-checked="true"] { outline: 2px solid Highlight; outline-offset: 3px; }
  .ui-toggle[aria-pressed="true"], .ui-chip--choice[aria-pressed="true"], .ui-chip--choice[aria-checked="true"], .ui-option[aria-selected="true"], .ui-option[data-active],
  .ui-tree__item[aria-selected="true"], .ui-cal__day[data-range], .ui-datepop__preset[aria-pressed="true"], .ui-rte__btn[aria-pressed="true"], .ui-th-btn[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .ui-sortlist__item[data-dragging], .ui-dropzone[data-drag] { border: 2px solid Highlight; }
  .ui-sortlist__drop { forced-color-adjust: none; background: Highlight; }
  .ui-thresholds__track { forced-color-adjust: none; }
  .ui-tk-err, .ui-vartoken[data-invalid] { text-decoration-color: CanvasText; }
  .ui-vartoken { border: 1px solid CanvasText; }
}

/* ---------- 23. Motion and feedback system (design v2, POST-170) ----------
   One set of states for every actionable adr-ui element (buttons, icon buttons, chips, tabs,
   segments, menu items, options, rail and list items, rows that open something):
   hover and focus shift background, border and color over .16s cubic-bezier(.2,0,0,1);
   press scales controls to .97 (rows and menu items darken instead of shrinking);
   cursor is pointer when actionable, not-allowed when aria-disabled (still focusable, the reason
   shows on hover, focus and tap from data-reason and reaches screen readers through title),
   progress while a command is in flight (aria-busy). No custom cursor images.
   Entrances: menus and popovers pop, modals and toasts rise, overlay drawers slide in, new rows
   ([data-new]) rise, changed numbers (.ui-tick[data-changed]) tick in place. The individual
   translate/scale properties are animated so a component's own transform is never replaced.
   Section 22's global prefers-reduced-motion override zeroes all of it. */
:is(.ui-btn, .ui-iconbtn, .ui-chip--choice, button.ui-chip, .ui-chip__remove, .ui-tab, .ui-tabs__more, .ui-seg__item,
    .ui-menu__item, .ui-option, .ui-palette__item, .ui-nav__item, .ui-subnav__item, .ui-sidelist__item, .ui-views__item,
    .ui-tree__item, .ui-table td[data-open], .ui-table tbody tr[data-open]) {
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease), scale var(--dur-fast) var(--ease);
}
.ui-table tbody tr { transition: background-color var(--dur) var(--ease); }
.ui-table tbody tr:has(td[data-open]) { cursor: pointer; }
:is(.ui-btn, .ui-iconbtn, .ui-chip--choice, button.ui-chip, .ui-tab, .ui-tabs__more, .ui-seg__item):active:not([disabled], [aria-disabled="true"], [aria-busy="true"]) { scale: 0.97; }
.ui-btn:active { transform: none; }
:is(.ui-menu__item, .ui-option, .ui-palette__item, .ui-nav__item, .ui-subnav__item, .ui-sidelist__item, .ui-views__item):active:not([aria-disabled="true"]) { background: var(--surface-3); }
.ui-table tbody tr:has(td[data-open]):active { background: var(--selection); }
:is(.ui-btn, .ui-iconbtn, .ui-chip, .ui-tab, .ui-seg__item, .ui-menu__item, .ui-option, .ui-nav__item, .ui-tree__item):is([disabled], [aria-disabled="true"]) { cursor: not-allowed; }
/* A command in flight keeps pointer events so the progress cursor shows; Button swallows the click. */
.ui-btn[aria-busy="true"] { pointer-events: auto; cursor: progress; }
:is(.ui-iconbtn, .ui-menu__item, .ui-tab, .ui-chip)[aria-busy="true"] { cursor: progress; }
/* Disabled with a reason: the reason shows on hover, keyboard focus and tap. */
[aria-disabled="true"][data-reason] { position: relative; }
[aria-disabled="true"][data-reason]:is(:hover, :focus-visible, :active)::before {
  content: attr(data-reason); position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 0;
  z-index: var(--z-tooltip); width: max-content; max-width: 260px; padding: var(--s-4) var(--s-8); border-radius: var(--r-md);
  background: var(--surface-inverse); color: var(--text-inverse); box-shadow: var(--shadow-md);
  font-size: var(--fs-xs); font-weight: var(--fw-regular, 400); line-height: var(--lh-xs); text-align: left; white-space: normal;
  pointer-events: none; animation: ui-enter-fade var(--dur) var(--ease);
}
[aria-disabled="true"][data-reason][data-tip="below"]:is(:hover, :focus-visible, :active)::before { bottom: auto; top: calc(100% + 6px); }
[aria-disabled="true"][data-reason][data-tip-x="start"]:is(:hover, :focus-visible, :active)::before { left: 0; translate: 0 0; }
[aria-disabled="true"][data-reason][data-tip-x="end"]:is(:hover, :focus-visible, :active)::before { left: auto; right: 0; translate: 0 0; }
/* Turned disabled under the pointer or focus (Hang up after the hang-up): no tip until the pointer leaves or focus moves (V-1110-11). */
[aria-disabled="true"][data-reason][data-tip-quiet]:is(:hover, :focus-visible, :active)::before { content: none; }
@keyframes ui-enter-pop { from { opacity: 0; translate: 0 -4px; scale: 0.98; } }
@keyframes ui-enter-rise { from { opacity: 0; translate: 0 6px; } }
@keyframes ui-enter-slide { from { opacity: 0; translate: 24px 0; } }
@keyframes ui-enter-fade { from { opacity: 0; } }
@keyframes ui-tick { from { opacity: 0.35; translate: 0 3px; } }
:is(.ui-menu, .ui-popover, .ui-tooltip, .ui-datepop) { animation: ui-enter-pop var(--dur) var(--ease); }
.ui-modal[open], .ui-toast { animation: ui-enter-rise var(--dur-slow) var(--ease); }
.ui-modal::backdrop, .ui-scrim { animation: ui-enter-fade var(--dur) var(--ease); }
.ui-drawer--overlay { animation: ui-enter-slide var(--dur-slow) var(--ease); }
:is(.ui-table tbody tr, .ui-sidelist__item, .ui-filerow, .ui-timeline__item)[data-new] { animation: ui-enter-rise var(--dur-slow) var(--ease); }
.ui-tick { display: inline-block; font-variant-numeric: tabular-nums; }
.ui-tick[data-changed] { animation: ui-tick var(--dur-slow) var(--ease); }