/* ─────────────────────────────────────────────────────────
   CRM CONSOLE: PRIMITIVES

   One block per primitive in components/crm/ui, in the order of
   ui/index.ts. Class names are ui-<primitive>, ui-<primitive>-<part>
   and ui-<primitive>--<variant>; state is is-<state> or an ARIA
   attribute. Only tokens (tokens.css): no literal colours, no bare font
   sizes. A new primitive gets a new block here, never a rule in
   screens.css.
   ───────────────────────────────────────────────────────── */

/* ── Icon ──────────────────────────────────────────────── */

.ui-icon {
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

/* ── Button ────────────────────────────────────────────── */

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--c-space-1);
  flex: none;
  height: var(--c-control-md);
  padding: 0 var(--c-space-3);
  border: 0;
  border-radius: var(--c-radius-full);
  font-family: inherit;
  font-size: var(--c-text-md);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--c-motion-fast) var(--c-ease),
    color var(--c-motion-fast) var(--c-ease),
    opacity var(--c-motion-fast) var(--c-ease);
}

.ui-button--md {
  height: var(--c-control-md);
}

.ui-button-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* A label never breaks inside a word, whatever the row around it
     allows (overflow-wrap: anywhere on .ui-row): "Back" stays one word
     when a pending spinner takes room beside it. */
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.ui-button--sm {
  height: var(--c-control-sm);
  padding: 0 var(--c-space-3);
  font-size: var(--c-text-sm);
}

.ui-button--block {
  display: flex;
  width: 100%;
}

.ui-button--primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.ui-button--primary:hover:not(:disabled) {
  background: var(--c-accent-hover);
}

.ui-button--secondary {
  background: var(--c-surface);
  color: var(--c-text);
}

.ui-button--secondary:hover:not(:disabled) {
  background: var(--c-surface-2);
}

/* On a grey fill (a group, the draft card, the composer) the secondary
   button lifts to the raised colour instead of vanishing into it. */
:is(.ui-group-list, .ui-draft, .ui-composer-box, .ui-alert) .ui-button--secondary {
  background: var(--c-raised);
  box-shadow: 0 0 0 var(--c-hairline) var(--c-control-edge);
}

:is(.ui-group-list, .ui-draft, .ui-composer-box) .ui-button--secondary:hover:not(:disabled) {
  background: var(--c-surface-2);
}

.ui-button--tinted {
  background: var(--c-accent-tint);
  color: var(--c-accent);
}

.ui-button--tinted:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-accent) 18%, var(--c-bg));
}

.ui-button--destructive {
  background: var(--c-danger);
  color: var(--c-on-danger);
}

.ui-button--destructive:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-danger) 86%, var(--c-text));
}

.ui-button--ghost {
  background: transparent;
  color: var(--c-accent);
  padding: 0 var(--c-space-2);
}

.ui-button--ghost:hover:not(:disabled) {
  background: var(--c-hover);
}

.ui-button:active:not(:disabled) {
  filter: brightness(0.95);
}

.ui-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.ui-button .ui-icon {
  width: 14px;
  height: 14px;
}

.ui-button-kbd {
  margin-left: var(--c-space-1);
  font-family: var(--c-font-ui);
  font-size: var(--c-text-xs);
  font-weight: 500;
  opacity: 0.55;
}

.ui-spinner {
  width: 12px;
  height: 12px;
  border-radius: var(--c-radius-full);
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  animation: ui-spin 0.7s linear infinite;
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Icon button ───────────────────────────────────────── */

.ui-icon-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--c-control-md);
  height: var(--c-control-md);
  border-radius: var(--c-radius-full);
  color: var(--c-text-2);
  transition: background-color var(--c-motion-fast) var(--c-ease), color var(--c-motion-fast) var(--c-ease);
}

.ui-icon-button--md {
  width: var(--c-control-md);
  height: var(--c-control-md);
}

.ui-icon-button--sm {
  width: var(--c-control-sm);
  height: var(--c-control-sm);
}

.ui-icon-button .ui-icon {
  width: 17px;
  height: 17px;
}

.ui-icon-button--sm .ui-icon {
  width: 14px;
  height: 14px;
}

.ui-icon-button--ghost:hover:not(:disabled) {
  background: var(--c-hover);
  color: var(--c-text);
}

.ui-icon-button--secondary {
  background: var(--c-surface);
  color: var(--c-text);
}

.ui-icon-button--tinted {
  background: var(--c-accent-tint);
  color: var(--c-accent);
}

.ui-icon-button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ── Pill and dot ──────────────────────────────────────── */

.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 20px;
  padding: 0 var(--c-space-2);
  border-radius: var(--c-radius-full);
  font-size: var(--c-text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
}

.ui-pill--neutral {
  background: var(--c-surface-2);
  color: var(--c-text-2);
}

.ui-pill--accent {
  background: var(--c-accent-tint);
  color: var(--c-accent);
}

.ui-pill--success {
  background: var(--c-success-tint);
  color: var(--c-success);
}

.ui-pill--warning {
  background: var(--c-warning-tint);
  color: var(--c-warning);
}

.ui-pill--danger {
  background: var(--c-danger-tint);
  color: var(--c-danger);
}

.ui-dot {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--c-radius-full);
  background: currentColor;
}

.ui-dot--neutral {
  width: 8px;
  height: 8px;
  background: var(--c-text-4);
}

.ui-dot--accent,
.ui-dot--success,
.ui-dot--warning,
.ui-dot--danger {
  width: 8px;
  height: 8px;
}

.ui-dot--accent {
  background: var(--c-accent);
}

/* Under way right now (a visit in progress): a green dot whose halo
   swells and fades, slowly. Reduced motion keeps the dot alone. */
.ui-live {
  position: relative;
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--c-radius-full);
  background: var(--c-success);
}

.ui-live::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c-success);
  animation: ui-live-halo 2.4s var(--c-ease) infinite;
}

@keyframes ui-live-halo {
  from {
    transform: scale(1);
    opacity: 0.55;
  }
  to {
    transform: scale(2.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-live::after {
    animation: none;
    opacity: 0;
  }
}

.ui-dot--success {
  background: var(--c-success);
}

.ui-dot--warning {
  background: var(--c-warning);
}

.ui-dot--danger {
  background: var(--c-danger);
}

/* ── Badge ─────────────────────────────────────────────── */

.ui-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: var(--c-radius-full);
  font-size: var(--c-text-2xs);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ui-badge--danger {
  background: var(--c-danger);
  color: var(--c-on-danger);
}

.ui-badge--accent {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.ui-badge--neutral {
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--c-text-xs);
  font-weight: 500;
}

/* ── Group and row ─────────────────────────────────────── */

.ui-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ui-group-head {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  min-height: 22px;
  padding: 0 var(--c-space-3) 6px;
}

.ui-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  font-size: var(--c-text-sm);
  font-weight: 600;
  line-height: var(--c-leading-tight);
  color: var(--c-text-2);
}

.ui-group-action {
  display: flex;
  align-items: center;
  gap: var(--c-space-1);
  margin-right: calc(-1 * var(--c-space-2));
}

.ui-group-stack {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
}

.ui-group-list {
  background: var(--c-group-fill);
  border-radius: var(--c-radius-lg);
  overflow: hidden;
}

.ui-group-foot {
  padding: 6px var(--c-space-3) 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* The one divider in the console: a hairline inset from the left, only
   between rows (the iOS grouped-list separator). */
.ui-group-list > * {
  position: relative;
}

.ui-group-list > * + *::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--c-space-3);
  right: 0;
  height: var(--c-hairline);
  background: var(--c-separator);
  pointer-events: none;
}

.ui-row {
  display: flex;
  align-items: baseline;
  gap: var(--c-space-3);
  min-height: 34px;
  padding: var(--c-space-2) var(--c-space-3);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A link or button row sits in a wrapper so the list keeps one child per
   row (the separator rule counts children). */
.ui-row-wrap {
  display: block;
}

.ui-row--custom {
  align-items: center;
  flex-wrap: wrap;
}

.ui-row-label {
  flex: 0 0 var(--c-row-label-w);
  color: var(--c-text-2);
}

.ui-row-value {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.ui-row--stack {
  align-items: center;
}

/* A dl row cannot wrap dt/dd, so a stacked dl row stacks the row itself. */
dl .ui-row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--c-space-hair);
}

.ui-row-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--c-space-hair);
  min-width: 0;
}

.ui-row--stack .ui-row-label {
  flex: none;
  font-size: var(--c-text-sm);
}

.ui-row--numeric .ui-row-label {
  flex: 1;
}

.ui-row--numeric .ui-row-value {
  flex: none;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ui-row--muted .ui-row-value {
  font-weight: 400;
  color: var(--c-text-2);
}

.ui-row--accent .ui-row-value {
  color: var(--c-accent);
}

.ui-row--success .ui-row-value {
  color: var(--c-success);
}

.ui-row--warning .ui-row-value {
  color: var(--c-warning);
}

.ui-row--danger .ui-row-value {
  color: var(--c-danger);
}

.ui-row-leading {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: none;
}

.ui-row-trailing {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-1);
  flex: none;
  margin-left: auto;
  align-self: center;
}

.ui-row--link,
.ui-row--button {
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.ui-row--link:hover,
.ui-row--button:hover:not(:disabled) {
  background: var(--c-hover);
}

.ui-row--link .ui-row-label,
.ui-row--button .ui-row-label {
  color: var(--c-accent);
  font-weight: 500;
  flex: none;
}

.ui-row--button:disabled {
  opacity: 0.45;
  cursor: default;
}

.ui-row-chevron {
  align-self: center;
  margin-left: auto;
  color: var(--c-text-3);
}

/* ── Field and controls ────────────────────────────────── */

.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  min-width: 0;
  flex: 1;
}

.ui-field-main {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  min-width: 0;
}

.ui-field--inline .ui-field-main {
  flex-direction: row;
  align-items: center;
  gap: var(--c-space-2);
}

/* Beside the box, the label keeps to one line; the box gives way. */
.ui-field--inline .ui-field-label {
  flex: none;
  white-space: nowrap;
}

.ui-field-label {
  font-size: var(--c-text-sm);
  font-weight: 500;
  color: var(--c-text-2);
}

.ui-field-hint,
.ui-field-error {
  font-size: var(--c-text-xs);
  color: var(--c-text-2);
}

.ui-field-error {
  color: var(--c-danger);
}

/* Controls on a fill: one step up, with a hairline lift (tokens.css). */
.ui-group-list,
.ui-composer,
.ui-draft {
  --c-control-fill: var(--c-raised);
  --c-control-lift: 0 0 0 var(--c-hairline) var(--c-control-edge), 0 1px 1px var(--c-shadow);
}

/* Input, Textarea and Select: one family. 28px, 8px corners, the
   control fill, 10px in from the edge, the accent ring on focus. */
.ui-input,
.ui-select {
  width: 100%;
  min-width: 0;
  min-height: var(--c-control-md);
  padding: 0 10px;
  border: 0;
  border-radius: var(--c-radius-control);
  background-color: var(--c-control-fill);
  color: var(--c-text);
  font-size: var(--c-text-md);
  box-shadow: var(--c-control-lift);
  transition:
    box-shadow var(--c-motion-fast) var(--c-ease),
    background-color var(--c-motion-fast) var(--c-ease);
}

.ui-textarea {
  display: block;
  padding: 6px 10px;
  line-height: var(--c-leading);
  resize: vertical;
}

.ui-input::placeholder {
  color: var(--c-text-3);
}

/* Hover darkens the fill by the shared hover wash, whatever the fill is. */
.ui-input:hover:not(:disabled, :focus),
.ui-select:hover:not(:has(:disabled), :focus-within) {
  background-image: linear-gradient(var(--c-hover), var(--c-hover));
}

.ui-input:focus,
.ui-select:focus-within {
  outline: none;
  box-shadow:
    0 0 0 1px var(--c-accent),
    0 0 0 4px var(--c-focus);
}

.ui-input[aria-invalid='true'],
.ui-select:has([aria-invalid='true']) {
  box-shadow:
    0 0 0 1px var(--c-danger),
    0 0 0 4px var(--c-danger-tint);
}

.ui-input:disabled,
.ui-select:has(:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Select: the native element keeps the popup (accessible, and options
   cannot be styled anyway); the wrapper draws the box and the chevron. */
/* ── Date and time field (DateTimeField) ─────────────────
   The trigger is an Input that is a button: the calendar glyph, the
   value (or a grey placeholder), a chevron. The panel opens in the flow
   under it: a month of days on the raised surface, the time menu and
   Done under a hairline. react-day-picker draws the month with its own
   rdp-* classes and no stylesheet of its own here; these are its looks. */
.ui-datetime-trigger {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  text-align: left;
  cursor: pointer;
}

.ui-datetime-icon {
  flex: none;
  color: var(--c-text-2);
}

.ui-datetime-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-datetime-value.is-empty {
  color: var(--c-text-3);
}

.ui-datetime-chevron {
  flex: none;
  color: var(--c-text-3);
  transition: transform var(--c-motion-fast) var(--c-ease);
}

.ui-datetime.is-open .ui-datetime-chevron {
  transform: rotate(180deg);
}

.ui-datetime-panel {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  padding: var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-raised);
  box-shadow: 0 0 0 var(--c-hairline) var(--c-control-edge);
}

.ui-datetime-panel .rdp-root {
  --rdp-cell: 34px;
  font-size: var(--c-text-md);
}

.ui-datetime-panel .rdp-months {
  position: relative;
}

.ui-datetime-panel .rdp-month_caption {
  display: flex;
  align-items: center;
  height: var(--c-control-md);
  padding-left: var(--c-space-1);
}

.ui-datetime-panel .rdp-caption_label {
  font-weight: 600;
  color: var(--c-text);
}

.ui-datetime-panel .rdp-nav {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: var(--c-space-1);
}

.ui-datetime-panel .rdp-button_previous,
.ui-datetime-panel .rdp-button_next {
  display: grid;
  place-items: center;
  width: var(--c-control-md);
  height: var(--c-control-md);
  padding: 0;
  border: 0;
  border-radius: var(--c-radius-full);
  background: transparent;
  color: var(--c-accent);
  cursor: pointer;
}

.ui-datetime-panel .rdp-button_previous:hover,
.ui-datetime-panel .rdp-button_next:hover {
  background: var(--c-accent-tint);
}

.ui-datetime-panel .rdp-button_previous:disabled,
.ui-datetime-panel .rdp-button_next:disabled {
  color: var(--c-text-3);
  background: transparent;
  cursor: default;
}

.ui-datetime-panel .rdp-chevron {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.ui-datetime-panel .rdp-month_grid {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--c-space-1);
}

.ui-datetime-panel .rdp-weekday {
  height: 24px;
  font-size: var(--c-text-xs);
  font-weight: 500;
  color: var(--c-text-3);
  text-align: center;
}

.ui-datetime-panel .rdp-day {
  padding: 1px;
  text-align: center;
}

.ui-datetime-panel .rdp-day_button {
  display: inline-grid;
  place-items: center;
  width: var(--rdp-cell);
  height: var(--rdp-cell);
  padding: 0;
  border: 0;
  border-radius: var(--c-radius-full);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.ui-datetime-panel .rdp-day_button:hover {
  background: var(--c-accent-tint);
}

.ui-datetime-panel .rdp-day_button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--c-focus);
}

.ui-datetime-panel .rdp-today .rdp-day_button {
  color: var(--c-accent);
  font-weight: 600;
}

.ui-datetime-panel .rdp-outside .rdp-day_button {
  color: var(--c-text-3);
}

.ui-datetime-panel .rdp-selected .rdp-day_button {
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 600;
}

.ui-datetime-panel .rdp-disabled .rdp-day_button {
  color: var(--c-text-3);
  opacity: 0.45;
  background: transparent;
  cursor: default;
}

.ui-datetime-panel .rdp-hidden {
  visibility: hidden;
}

.ui-datetime-foot {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  padding-top: var(--c-space-2);
  border-top: var(--c-hairline) solid var(--c-separator);
}

.ui-datetime-foot .ui-select {
  flex: 1;
}

.ui-select {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0;
}

.ui-select::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--c-space-2);
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background-color: var(--c-text-2);
  -webkit-mask: var(--c-glyph-chevron-down) center / contain no-repeat;
  mask: var(--c-glyph-chevron-down) center / contain no-repeat;
  pointer-events: none;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.ui-select:hover::after,
.ui-select:focus-within::after {
  background-color: var(--c-text);
}

.ui-select:has([aria-invalid='true'])::after {
  background-color: var(--c-danger);
}

.ui-select-native {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: var(--c-control-md);
  padding: 0 calc(var(--c-space-2) + 20px) 0 10px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font-size: var(--c-text-md);
  text-overflow: ellipsis;
  cursor: pointer;
}

.ui-select-native:disabled {
  cursor: not-allowed;
}

.ui-select-native:focus-visible {
  outline: none;
}

/* The popup is native; give its rows the theme's colours where the
   browser allows it (Chromium and Firefox on Linux and Windows do). */
.ui-select-native option {
  background-color: var(--c-bg);
  color: var(--c-text);
}

/* Small: the rail's tenant filter and other tight spots. */
.ui-select--sm,
.ui-select--sm .ui-select-native {
  min-height: var(--c-control-sm);
  font-size: var(--c-text-xs);
}

.ui-select--sm .ui-select-native {
  padding: 0 calc(var(--c-space-1) + 14px) 0 var(--c-space-2);
}

.ui-select--sm::after {
  right: var(--c-space-1);
  width: 12px;
  height: 12px;
  margin-top: -6px;
}

.ui-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--c-control-md);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
  cursor: pointer;
  user-select: none;
}

.ui-toggle.is-disabled {
  opacity: 0.5;
  cursor: default;
}

.ui-toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ui-toggle-track {
  position: relative;
  flex: none;
  width: 28px;
  height: 17px;
  border-radius: var(--c-radius-full);
  background: var(--c-surface-2);
  box-shadow: inset 0 0 0 1px var(--c-separator);
  transition: background-color var(--c-motion) var(--c-ease);
}

.ui-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: var(--c-radius-full);
  background: var(--c-on-accent);
  box-shadow: 0 1px 2px var(--c-shadow), 0 0 0 var(--c-hairline) var(--c-control-edge);
  transition: transform var(--c-motion) var(--c-ease);
}

.ui-toggle-input:checked + .ui-toggle-track {
  background: var(--c-success);
  box-shadow: none;
}

.ui-toggle-input:checked + .ui-toggle-track::after {
  transform: translateX(11px);
}

.ui-toggle-input:focus-visible + .ui-toggle-track {
  outline: 3px solid var(--c-focus);
  outline-offset: 1px;
}

.ui-toggle-input:checked ~ .ui-toggle-label {
  color: var(--c-text);
}

/* ── Address input ─────────────────────────────────────── */

/* The Input plus a suggestions panel. The panel is fixed and placed by
   the component (group fills clip), so only its look lives here: a
   raised surface, a hairline, the popover shadow, rows inset 4px the
   way a macOS menu insets its highlight. */
.ui-address-field,
.ui-address {
  position: relative;
  min-width: 0;
}

.ui-address-panel {
  position: fixed;
  z-index: var(--c-z-popover);
  display: flex;
  flex-direction: column;
  padding: var(--c-space-1);
  border-radius: var(--c-radius-md);
  background: var(--c-raised);
  box-shadow:
    0 0 0 var(--c-hairline) var(--c-control-edge),
    var(--c-shadow-popover);
}

.ui-address-panel[hidden] {
  display: none;
}

.ui-address-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-address-option {
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-2);
  padding: 6px var(--c-space-2);
  border-radius: var(--c-radius-sm);
  cursor: default;
}

.ui-address-option[aria-selected='true'] {
  background: var(--c-selection);
}

.ui-address-glyph {
  display: inline-flex;
  flex: none;
  padding-top: 2px;
  color: var(--c-text-2);
}

.ui-address-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--c-leading-tight);
}

.ui-address-main,
.ui-address-secondary {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-address-main {
  font-size: var(--c-text-md);
  font-weight: 600;
  color: var(--c-text);
}

.ui-address-secondary {
  margin-top: var(--c-space-hair);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.ui-address-status {
  padding: 6px var(--c-space-2);
  font-size: var(--c-text-md);
  color: var(--c-text-2);
}

.ui-address-foot {
  margin-top: var(--c-space-1);
  padding: 6px var(--c-space-2) var(--c-space-hair);
  border-top: var(--c-hairline) solid var(--c-separator);
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
  text-align: right;
}

/* ── Table ─────────────────────────────────────────────── */

.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--c-text-md);
}

.ui-table td,
.ui-table th {
  position: relative;
  padding: var(--c-space-2) var(--c-space-3);
  text-align: left;
  font-weight: 400;
  vertical-align: baseline;
}

.ui-table td:first-child {
  color: var(--c-text-2);
}

.ui-table td.ui-num,
.ui-table th + .ui-num {
  font-weight: 500;
  color: var(--c-text);
  text-align: right;
  white-space: nowrap;
}

/* Row separators, inset like the grouped list. */
.ui-table tr + tr > :first-child::before,
.ui-table tfoot tr > :first-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--c-space-3);
  width: 200%;
  height: var(--c-hairline);
  background: var(--c-separator);
}

.ui-table tr {
  overflow: hidden;
}

.ui-table-detail {
  color: var(--c-text-3);
}

.ui-table-heading th {
  padding-top: var(--c-space-3);
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-text-3);
}

.ui-table-total th {
  font-weight: 600;
  color: var(--c-text);
}

.ui-table-total td.ui-num {
  font-weight: 700;
}

/* ── Empty state ───────────────────────────────────────── */

.ui-empty {
  min-width: 0;
}

.ui-empty-text {
  max-width: 60ch;
}

.ui-empty--inline {
  padding: var(--c-space-2) var(--c-space-3);
  color: var(--c-text-2);
}

.ui-empty--page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-2);
  max-width: 420px;
  margin: var(--c-space-8) auto;
  padding: var(--c-space-8) var(--c-space-4);
  text-align: center;
  color: var(--c-text-2);
}

/* ── Skeleton ──────────────────────────────────────────── */

.ui-skeleton {
  display: inline-block;
  width: 5em;
  height: 0.9em;
  vertical-align: -0.1em;
  border-radius: var(--c-radius-sm);
  background: var(--c-surface-2);
  animation: ui-pulse 1.4s var(--c-ease) infinite;
}

.ui-skeleton--wide {
  width: 11em;
}

/* A highlight sweeping left to right, in place of the pulse: the raised
   surface over the fill, faded at both ends so it reads as light, not a
   stripe. The background is the same grey, so a sweep that stops looks
   like the pulse at rest. */
.ui-skeleton--shimmer {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--c-raised) 70%, transparent) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: ui-shimmer 1.6s var(--c-ease) infinite;
}

/* ── Ad source ─────────────────────────────────────────── */
/* components/crm/AdSource.tsx: megaphone, thumbnail, then the path from
   the campaign down to the ad, muted to strong. One line, ellipsised,
   the tooltip carrying the whole of it. The stacked variant (the side
   column, where one line showed only the campaign) puts each level on
   its own line, each ellipsised on its own, no separators. */

.ui-adsource {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}

.ui-adsource-glyph {
  color: var(--c-text-3);
}

.ui-adsource-thumb {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--c-radius-sm);
  object-fit: cover;
  background: var(--c-surface-2);
}

/* The still in an opened journey node or thread marker, and a design render. */
.ui-adsource-thumb--lg {
  width: 56px;
  height: 56px;
}

.ui-adsource-thumb--wide {
  width: 100%;
  max-width: 224px;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: var(--c-radius-md);
}

.ui-adsource-path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-adsource--stacked .ui-adsource-path {
  white-space: normal;
  line-height: 1.35;
}

.ui-adsource--stacked .ui-adsource-step {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-adsource--stacked .ui-adsource-sep {
  display: none;
}

.ui-adsource-seg {
  font-weight: 400;
}

.ui-adsource-seg--campaign {
  color: var(--c-text-3);
}

.ui-adsource-seg--adset {
  color: var(--c-text-2);
  font-weight: 400;
}

.ui-adsource-seg--ad {
  color: var(--c-text);
  font-weight: 500;
}

.ui-adsource-seg--id {
  color: var(--c-text-2);
  font-weight: 400;
}

.ui-adsource-sep {
  color: var(--c-text-4);
}

@keyframes ui-pulse {
  50% {
    opacity: 0.45;
  }
}

@keyframes ui-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-skeleton,
  .ui-media-tile {
    animation: none;
  }
}

.ui-empty-title {
  font-size: var(--c-text-lg);
  font-weight: 600;
  color: var(--c-text);
}

.ui-empty--inline .ui-empty-title {
  font-size: var(--c-text-md);
  font-weight: 500;
}

.ui-empty-action {
  margin-top: var(--c-space-2);
}

/* ── Inline alert ──────────────────────────────────────── */

.ui-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-2);
  padding: var(--c-space-2) var(--c-space-3);
  border-radius: var(--c-radius-md);
  font-size: var(--c-text-sm);
  line-height: var(--c-leading);
}

.ui-alert--error {
  background: var(--c-danger-tint);
  color: var(--c-danger);
}

.ui-alert--notice {
  background: var(--c-accent-tint);
  color: var(--c-text);
}

.ui-alert--notice .ui-alert-icon {
  color: var(--c-accent);
}

.ui-alert--warning {
  background: var(--c-warning-tint);
  color: var(--c-text);
}

.ui-alert--warning .ui-alert-icon {
  color: var(--c-warning);
}

.ui-alert-icon {
  margin-top: 1px;
}

.ui-alert-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
}

.ui-alert-title {
  font-weight: 600;
}

.ui-alert-dismiss {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--c-radius-full);
  color: inherit;
  opacity: 0.7;
}

.ui-alert-dismiss:hover {
  opacity: 1;
  background: var(--c-hover);
}

/* ── Avatar ────────────────────────────────────────────── */

.ui-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: var(--c-radius-full);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-on-accent);
  user-select: none;
}

.ui-avatar--sm {
  width: 24px;
  height: 24px;
  font-size: var(--c-text-2xs);
}

.ui-avatar--md {
  width: 32px;
  height: 32px;
  font-size: var(--c-text-sm);
}

.ui-avatar--lg {
  width: 40px;
  height: 40px;
  font-size: var(--c-text-lg);
}

/* The head of a person's card (ProfileHeader). */
.ui-avatar--xl {
  width: 72px;
  height: 72px;
  font-size: var(--c-text-2xl);
}

.ui-avatar--person {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 40%, var(--c-bg)), color-mix(in srgb, var(--c-accent) 70%, var(--c-bg)));
}

.ui-avatar--setter {
  background: linear-gradient(135deg, var(--c-text-3), var(--c-text-2));
}

.ui-avatar--dave {
  background: var(--c-text);
  color: var(--c-bg);
}

/* ── Segmented ─────────────────────────────────────────── */

/* The track is the fill one step darker than a control's, so a
   Segmented beside a Select reads as the same family: 28px outer at md,
   the control radius, the raised segment for the choice. */
.ui-segmented {
  display: inline-flex;
  gap: var(--c-space-hair);
  padding: var(--c-space-hair);
  border-radius: var(--c-radius-control);
  background: var(--c-surface-2);
}

.ui-segmented--block {
  display: flex;
  width: 100%;
}

.ui-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  height: var(--c-control-sm);
  padding: 0 var(--c-space-3);
  border-radius: calc(var(--c-radius-control) - var(--c-space-hair));
  font-size: var(--c-text-sm);
  font-weight: 500;
  color: var(--c-text);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.ui-segmented--md .ui-segment {
  height: var(--c-control-sm);
}

.ui-segmented--sm .ui-segment {
  height: 20px;
  padding: 0 var(--c-space-2);
  font-size: var(--c-text-xs);
}

.ui-segmented--icons .ui-segment {
  padding: 0;
  width: var(--c-control-sm);
  flex: none;
  color: var(--c-text-2);
}

.ui-segmented--sm.ui-segmented--icons .ui-segment {
  width: 22px;
}

/* A phone: the small size is a finger's too (the control tokens grow). */
@media (max-width: 720px) {
  .ui-segmented--sm .ui-segment {
    height: var(--c-control-sm);
  }

  .ui-segmented--sm.ui-segmented--icons .ui-segment {
    width: var(--c-control-sm);
  }
}

.ui-segment .ui-icon {
  width: 14px;
  height: 14px;
}

.ui-segment:hover {
  background: var(--c-hover);
}

/* --c-segment-on, not --c-raised: in dark the raised grey is the track's,
   and the choice would only show by its hairline. */
.ui-segment[aria-checked='true'],
.ui-segment[aria-current='page'] {
  background: var(--c-segment-on);
  color: var(--c-text);
  box-shadow: 0 1px 2px var(--c-shadow), 0 0 0 var(--c-hairline) var(--c-control-edge);
}

/* ── Page header ───────────────────────────────────────── */

.ui-page-header {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  padding: var(--c-space-3) var(--c-space-6);
  background: var(--c-bg);
  box-shadow: 0 var(--c-hairline) 0 var(--c-separator);
}

.ui-page-header--sticky {
  position: sticky;
  top: 0;
  z-index: var(--c-z-sticky);
  background: var(--c-bar);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* A phone already has the sticky top bar; a second pinned bar under it
   (a contact's header, with its pills and actions) would take a third
   of the screen, so the header scrolls away with the page. */
@media (max-width: 720px) {
  .ui-page-header--sticky {
    position: static;
  }
}

.ui-page-header-who {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  flex: 1;
  min-width: 0;
}

.ui-page-header-text {
  min-width: 0;
}

.ui-page-header-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--c-space-2);
}

.ui-page-title {
  font-size: var(--c-text-lg);
  font-weight: 600;
  line-height: var(--c-leading-tight);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.ui-page-header-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* The grey facts line. No separator dot at a line's start, wherever it
   wraps: every fact carries one, and the line is shifted left by a dot's
   width and clipped there, so only the dots between two facts on one line
   show (it was the contact header's own rule; the conversations preview and
   the Attention drawer wrap it too). */
.ui-page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--c-space-2);
  margin-top: var(--c-space-hair);
  margin-left: calc(-1ch - var(--c-space-2));
  clip-path: inset(-4px -4px -4px calc(1ch + var(--c-space-2)));
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.ui-page-meta > *::before {
  content: '·';
  display: inline-block;
  width: 1ch;
  margin-right: var(--c-space-2);
  color: var(--c-text-3);
  text-align: center;
}

.ui-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* ── Disclosure ────────────────────────────────────────── */

.ui-disclosure-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-1);
  list-style: none;
  font-size: var(--c-text-sm);
  font-weight: 500;
  color: var(--c-accent);
  cursor: pointer;
}

.ui-disclosure-summary::-webkit-details-marker {
  display: none;
}

/* A phone: the line is a finger's height, not the text's. */
@media (max-width: 720px) {
  .ui-disclosure-summary {
    min-height: var(--c-control-sm);
  }
}

.ui-disclosure-chevron {
  transition: transform var(--c-motion-fast) var(--c-ease);
}

.ui-disclosure[open] .ui-disclosure-chevron {
  transform: rotate(90deg);
}

.ui-disclosure-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  padding: var(--c-space-2) 0 var(--c-space-1) 18px;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* ── Journey ───────────────────────────────────────────── */
/* components/crm/ui/Journey.tsx: a vertical path on the grouped fill.
   Round nodes joined by a hairline; an expandable node's head is one
   button with the hover wash and a chevron, a plain node has neither. */

.ui-journey {
  --ui-journey-node: 22px;
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  padding: var(--c-space-3);
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
}

.ui-journey-list {
  display: flex;
  flex-direction: column;
}

.ui-journey-node {
  position: relative;
  display: grid;
  grid-template-columns: var(--ui-journey-node) minmax(0, 1fr);
  column-gap: var(--c-space-2);
  padding-bottom: var(--c-space-3);
}

.ui-journey-node:last-child {
  padding-bottom: 0;
}

/* The path: from under this node to the next one's top. */
.ui-journey-node:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--ui-journey-node) + var(--c-space-hair));
  bottom: var(--c-space-hair);
  left: calc(var(--ui-journey-node) / 2 - 0.5px);
  width: 1px;
  background: var(--c-separator);
}

.ui-journey-marker {
  display: grid;
  place-items: center;
  width: var(--ui-journey-node);
  height: var(--ui-journey-node);
  border-radius: var(--c-radius-full);
  background: var(--c-raised);
  box-shadow: 0 0 0 var(--c-hairline) var(--c-control-edge);
  color: var(--c-text-2);
}

.ui-journey-node--neutral .ui-journey-marker {
  color: var(--c-text-2);
}

.ui-journey-node--accent .ui-journey-marker {
  background: var(--c-accent);
  box-shadow: none;
  color: var(--c-on-accent);
}

.ui-journey-node--success .ui-journey-marker {
  background: var(--c-success-tint);
  box-shadow: none;
  color: var(--c-success);
}

.ui-journey-main {
  min-width: 0;
}

.ui-journey-head {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  min-width: 0;
  min-height: var(--ui-journey-node);
  padding-top: var(--c-space-hair);
}

/* The button's wash reaches a little past the text on each side. */
.ui-journey-head--button {
  width: calc(100% + var(--c-space-3));
  margin: calc(-1 * var(--c-space-hair)) calc(-1 * var(--c-space-2) + var(--c-space-hair)) 0;
  padding: var(--c-space-1) calc(var(--c-space-2) - var(--c-space-hair)) var(--c-space-hair);
  border-radius: var(--c-radius-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--c-motion-fast) var(--c-ease);
}

.ui-journey-head--button:hover {
  background: var(--c-hover);
}

.ui-journey-head--button:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 0;
}

.ui-journey-line {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  min-width: 0;
  line-height: 18px;
}

.ui-journey-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  color: var(--c-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-journey-trailing {
  display: inline-flex;
  flex: none;
  gap: var(--c-space-1);
}

.ui-journey-time {
  flex: none;
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
  white-space: nowrap;
}

.ui-journey-chevron {
  flex: none;
  color: var(--c-text-3);
  transition: transform var(--c-motion-fast) var(--c-ease);
}

.ui-journey-node.is-open .ui-journey-chevron {
  transform: rotate(180deg);
}

.ui-journey-summary {
  overflow: hidden;
  font-size: var(--c-text-sm);
  line-height: 1.35;
  color: var(--c-text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-journey-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  margin-top: var(--c-space-2);
  min-width: 0;
}

.ui-journey-body[hidden] {
  display: none;
}

.ui-journey-body > .ui-button {
  align-self: flex-start;
}

.ui-journey-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2);
  padding-top: var(--c-space-3);
  border-top: var(--c-hairline) solid var(--c-separator);
}

/* ── Receipt and facts ─────────────────────────────────── */
/* components/crm/ui/Receipt.tsx. The receipt is a raised slip (one step
   up from the fill, hairline lift) with dotted leaders; facts are a
   compact two-column dl for anything already opened. */

.ui-receipt {
  display: flex;
  flex-direction: column;
  padding: var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-raised);
  box-shadow: 0 0 0 var(--c-hairline) var(--c-control-edge);
  font-size: var(--c-text-sm);
}

.ui-receipt-heading {
  font-weight: 500;
  color: var(--c-text);
}

.ui-receipt-subheading {
  color: var(--c-text-3);
}

.ui-receipt-lines {
  margin-top: var(--c-space-2);
}

.ui-receipt-lines:first-child {
  margin-top: 0;
}

.ui-receipt-line {
  display: flex;
  align-items: baseline;
  gap: var(--c-space-1);
  padding: var(--c-space-hair) 0;
}

.ui-receipt-label {
  min-width: 0;
  color: var(--c-text-2);
}

.ui-receipt-leader {
  flex: 1;
  min-width: var(--c-space-4);
  border-bottom: 1px dotted var(--c-text-4);
  transform: translateY(-3px);
}

.ui-receipt-value {
  flex: none;
  font-weight: 500;
  color: var(--c-text);
}

.ui-receipt-line--sub .ui-receipt-label {
  padding-left: var(--c-space-3);
  color: var(--c-text-3);
}

.ui-receipt-line--sub .ui-receipt-value {
  font-weight: 400;
  color: var(--c-text-3);
}

.ui-receipt-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--c-space-2);
  margin-top: var(--c-space-2);
  padding-top: var(--c-space-2);
  border-top: var(--c-hairline) solid var(--c-separator);
  font-weight: 600;
  color: var(--c-text);
}

.ui-receipt-total-value {
  font-size: var(--c-text-lg);
}

.ui-receipt-note {
  display: flex;
  align-items: center;
  gap: var(--c-space-1);
  margin-top: var(--c-space-hair);
  color: var(--c-text-3);
}

.ui-facts {
  display: grid;
  grid-template-columns: minmax(56px, max-content) minmax(0, 1fr);
  gap: 3px var(--c-space-3);
  align-content: start;
  min-width: 0;
  font-size: var(--c-text-sm);
}

.ui-facts-row {
  display: contents;
}

.ui-facts dt {
  color: var(--c-text-3);
}

.ui-facts dd {
  min-width: 0;
  font-weight: 500;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

/* Facts in one wrapping strip (a reading pane's head): label, value, next. */
.ui-facts--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-1) var(--c-space-6);
}

.ui-facts--inline .ui-facts-row {
  display: flex;
  gap: calc(var(--c-space-1) + var(--c-space-hair));
  min-width: 0;
}

/* ── Thread: bubble ────────────────────────────────────── */

.ui-msg {
  display: flex;
  flex-direction: column;
  max-width: var(--c-thread-max);
  min-width: 0;
}

.ui-msg--in {
  align-self: flex-start;
  align-items: flex-start;
}

.ui-msg--out {
  align-self: flex-end;
  align-items: flex-end;
}

.ui-msg-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 5px;
  margin: var(--c-space-2) var(--c-space-3) 3px;
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

.ui-msg-meta b {
  font-weight: 600;
  color: var(--c-text-2);
}

.ui-bubble {
  max-width: 100%;
  border-radius: var(--c-radius-bubble);
  font-size: var(--c-text-message);
  line-height: 1.38;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.ui-bubble-body {
  padding: var(--c-space-2) 13px;
}

.ui-msg--in .ui-bubble {
  background: var(--c-bubble-in);
  color: var(--c-text);
}

.ui-msg--out .ui-bubble {
  background: var(--c-bubble-out);
  color: var(--c-on-accent);
}

.ui-msg--in .ui-bubble--tail {
  border-bottom-left-radius: var(--c-radius-tail);
}

.ui-msg--out .ui-bubble--tail {
  border-bottom-right-radius: var(--c-radius-tail);
}

.ui-msg--pending .ui-bubble {
  background: var(--c-bubble-pending);
}

.ui-msg--failed .ui-bubble {
  box-shadow: 0 0 0 1.5px var(--c-danger);
}

.ui-msg--canceled .ui-bubble {
  opacity: 0.5;
  text-decoration: line-through;
}

.ui-msg-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px var(--c-space-3);
  margin: 3px var(--c-space-3) 0;
  font-size: var(--c-text-xs);
  font-weight: 500;
  color: var(--c-text-3);
}

.ui-msg--failed .ui-msg-status {
  color: var(--c-danger);
}

.ui-msg--pending .ui-msg-status {
  color: var(--c-text-2);
}

/* ── Thread: a team note (NoteCard) ─────────────────────
   Not a message: a card at bubble width in the middle of the column, on
   the quiet surface, a thin amber rule at its left edge (nobody outside
   the team sees it), its header inside, the text a size under a bubble's.
   An import's record (note-body.tsx) is a caption over a two-column list. */

.ui-note {
  align-self: center;
  width: min(100%, 560px);
  margin: var(--c-space-2) 0;
  padding: var(--c-space-2) var(--c-space-3) calc(var(--c-space-2) + 2px) calc(var(--c-space-3) + 3px);
  position: relative;
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
  color: var(--c-text);
  min-width: 0;
}

/* The amber rule: a straight bar inset from the corners, not a border bent round them. */
.ui-note::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--c-space-2);
  bottom: var(--c-space-2);
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--c-warning);
}

.ui-note-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 5px;
  margin-bottom: 3px;
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

.ui-note-icon {
  display: inline-flex;
  color: var(--c-warning);
}

.ui-note-label {
  font-weight: 600;
  color: var(--c-text-2);
}

.ui-note-media {
  margin: var(--c-space-1) 0;
}

.ui-note-body {
  font-size: var(--c-text-md);
  line-height: var(--c-leading);
  overflow-wrap: anywhere;
}

.ui-note-text {
  margin: 0;
  white-space: pre-wrap;
}

.ui-note-caption {
  margin: 0 0 var(--c-space-1);
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

.ui-note-fields {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px var(--c-space-3);
  margin: 0;
}

.ui-note-field {
  display: contents;
}

.ui-note-field dt {
  color: var(--c-text-3);
}

.ui-note-field dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ui-note-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--c-accent);
  text-decoration: none;
}

.ui-note-link:hover {
  text-decoration: underline;
}

/* ── Message media (components/crm/ui/Media.tsx) ───────────
   What an MMS carries, above its text bubble on the same side, with no
   bubble of its own: photo tiles, an inline video, file chips. */

.ui-msg-media {
  margin-bottom: var(--c-space-hair);
}

.ui-msg-media + .ui-bubble {
  margin-top: var(--c-space-hair);
}

.ui-media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--c-space-1);
}

.ui-media--end {
  align-items: flex-end;
}

.ui-media-grid {
  display: grid;
  gap: var(--c-space-hair);
  overflow: hidden;
  border-radius: var(--c-radius-bubble);
}

.ui-media-grid--one {
  width: min(240px, 100%);
}

.ui-media-grid--many {
  grid-template-columns: repeat(2, 116px);
}

.ui-media-tile {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--c-surface-2);
  cursor: zoom-in;
  animation: ui-pulse 1.4s var(--c-ease) infinite;
}

.ui-media-grid--one .ui-media-tile {
  aspect-ratio: 4 / 3;
  max-height: 320px;
}

.ui-media-grid--many .ui-media-tile {
  aspect-ratio: 1;
}

/* Three photos: the last one runs the width, so the block stays a rectangle. */
.ui-media-grid--many .ui-media-tile:last-child:nth-child(odd) {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

.ui-media-tile.is-loaded {
  animation: none;
}

.ui-media-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--c-motion) var(--c-ease);
}

.ui-media-tile.is-loaded img {
  opacity: 1;
}

.ui-media-tile.is-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--c-space-1);
  min-height: 96px;
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
  cursor: default;
  animation: none;
}

.ui-media-tile:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: -2px;
}

.ui-media-more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--c-scrim);
  font-size: var(--c-text-xl);
  font-weight: 600;
  color: var(--c-on-scrim);
}

.ui-media-video {
  display: block;
  width: min(260px, 100%);
  max-height: 360px;
  border-radius: var(--c-radius-bubble);
  background: var(--c-surface-2);
}

/* A file in a message: a glyph in a round, the name, then type and size. */
.ui-file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
  max-width: min(280px, 100%);
  padding: var(--c-space-2) var(--c-space-3) var(--c-space-2) var(--c-space-2);
  border: 0;
  border-radius: var(--c-radius-bubble);
  background: var(--c-bubble-in);
  font: inherit;
  color: var(--c-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ui-file-chip:hover {
  box-shadow: inset 0 0 0 100vmax var(--c-hover);
}

.ui-file-chip:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.ui-file-chip-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--c-radius-full);
  background: var(--c-accent-tint);
  color: var(--c-accent);
}

.ui-file-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ui-file-chip-name {
  overflow: hidden;
  font-size: var(--c-text-md);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-file-chip-meta {
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

/* ── Lightbox ──────────────────────────────────────────────
   A photo or a PDF over a near-black scrim, as big as the window allows,
   with a bar (name, "2 of 3", download, close) and side arrows. */

.ui-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-on-scrim);
  font-family: var(--c-font-ui);
}

.ui-lightbox:not([open]) {
  display: none;
}

.ui-lightbox[open] {
  display: flex;
  flex-direction: column;
}

.ui-lightbox::backdrop {
  background: var(--c-scrim-viewer);
}

.ui-lightbox-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--c-space-2);
  padding: var(--c-space-3) var(--c-space-4);
}

.ui-lightbox-bar .ui-icon-button,
.ui-lightbox-stage .ui-icon-button {
  color: var(--c-on-scrim);
}

.ui-lightbox-bar .ui-icon-button:hover,
.ui-lightbox-stage .ui-icon-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-on-scrim) 16%, transparent);
  color: var(--c-on-scrim);
}

.ui-lightbox-title {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ui-lightbox-name {
  overflow: hidden;
  font-size: var(--c-text-md);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-lightbox-meta {
  font-size: var(--c-text-xs);
  color: color-mix(in srgb, var(--c-on-scrim) 65%, transparent);
}

.ui-lightbox-stage {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 var(--c-space-8) var(--c-space-6);
}

.ui-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--c-radius-md);
}

.ui-lightbox-pdf {
  width: min(900px, 100%);
  height: 100%;
  border: 0;
  border-radius: var(--c-radius-md);
  background: var(--c-bg);
}

.ui-lightbox-prev,
.ui-lightbox-next {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}

.ui-lightbox-prev {
  left: var(--c-space-2);
}

.ui-lightbox-next {
  right: var(--c-space-2);
}

@media (max-width: 720px) {
  .ui-lightbox-stage {
    padding: 0 0 var(--c-space-4);
  }
}

/* ── Thread: day, system line, call ────────────────────── */

.ui-day {
  align-self: center;
  margin: 14px 0 6px;
  font-size: var(--c-text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-text-3);
}

.ui-day b {
  font-weight: 600;
  color: var(--c-text-2);
}

/* A system line: 12px, centred, muted; one accent (the glyph's tone or a pill). */
.ui-system-line {
  --ui-system-tone: var(--c-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: center;
  max-width: min(560px, 100%);
  margin: var(--c-space-1) 0 var(--c-space-2);
  font-size: var(--c-text-sm);
  line-height: 18px;
  text-align: center;
  color: var(--c-text-2);
}

.ui-system-line--tone-neutral {
  --ui-system-tone: var(--c-text-3);
}

.ui-system-line--tone-accent {
  --ui-system-tone: var(--c-accent);
}

.ui-system-line--tone-success {
  --ui-system-tone: var(--c-success);
}

.ui-system-line--tone-warning {
  --ui-system-tone: var(--c-warning);
}

.ui-system-line--tone-danger {
  --ui-system-tone: var(--c-danger);
}

.ui-system-line-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  color: var(--ui-system-tone);
}

.ui-system-line-icon .ui-avatar {
  width: 18px;
  height: 18px;
  font-size: var(--c-text-2xs);
}

.ui-system-line-body {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 5px;
  min-width: 0;
}

.ui-system-line b {
  font-weight: 600;
  color: var(--c-text);
}

.ui-system-line-muted {
  color: var(--c-text-3);
}

.ui-system-line-path {
  display: inline;
  color: var(--c-text-2);
}

.ui-system-line-sep {
  margin: 0 4px;
  color: var(--c-text-4);
}

.ui-system-line .ui-pill {
  height: 18px;
  padding: 0 7px;
  font-size: var(--c-text-xs);
}

/* The bare kinds: no fill, the glyph carries the tone. */
.ui-system-line--plain,
.ui-system-line--stage,
.ui-system-line--agent,
.ui-system-line--appointment,
.ui-system-line--follow-up,
.ui-system-line--opt-out {
  background: none;
}

/* A lead arrival opens a story: the one system line with a fill. */
.ui-system-line--lead {
  margin: 10px 0;
  padding: 5px 12px 5px 10px;
  border-radius: var(--c-radius-full);
  background: var(--c-surface);
}

.ui-system-line--opt-out b {
  color: var(--c-danger);
}

/* ── Thread marker ─────────────────────────────────────── */
/* components/crm/ui/ThreadMarker.tsx: a chapter mark across the thread.
   Toned dot, title, time, a hairline rule, then the headline and the
   total on the right; the panel opens under it on the grouped fill. */

.ui-marker {
  --ui-marker-tone: var(--c-accent);
  --ui-marker-tint: var(--c-accent-tint);
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  margin: var(--c-space-2) 0 var(--c-space-3);
}

.ui-marker-bar {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  width: 100%;
  min-width: 0;
  min-height: var(--c-control-sm);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
  text-align: left;
}

.ui-marker-bar--button {
  border-radius: var(--c-radius-sm);
  cursor: pointer;
}

.ui-marker-bar--button:hover .ui-marker-headline,
.ui-marker-bar--button:hover .ui-marker-chevron {
  color: var(--c-text);
}

.ui-marker-bar--button:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.ui-marker-dot {
  flex: none;
  width: var(--c-space-2);
  height: var(--c-space-2);
  margin-left: var(--c-space-hair);
  border-radius: var(--c-radius-full);
  background: var(--ui-marker-tone);
  box-shadow: 0 0 0 3px var(--ui-marker-tint);
}

.ui-marker-dot--accent {
  --ui-marker-tone: var(--c-accent);
  --ui-marker-tint: var(--c-accent-tint);
}

.ui-marker-dot--success {
  --ui-marker-tone: var(--c-success);
  --ui-marker-tint: var(--c-success-tint);
}

.ui-marker-dot--neutral {
  --ui-marker-tone: var(--c-text-3);
  --ui-marker-tint: var(--c-surface-2);
}

.ui-marker-title {
  flex: none;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
}

.ui-marker-time {
  flex: none;
  color: var(--c-text-3);
  white-space: nowrap;
}

.ui-marker-rule {
  flex: 1;
  min-width: var(--c-space-4);
  height: var(--c-hairline);
  background: var(--c-separator);
}

.ui-marker-headline {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--c-text-2);
  transition: color var(--c-motion-fast) var(--c-ease);
}

.ui-marker-headline .ui-icon {
  flex: none;
  color: var(--c-text-3);
}

.ui-marker-headline-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-marker-total {
  flex: none;
  font-weight: 600;
  color: var(--c-text);
}

.ui-marker-chevron {
  flex: none;
  color: var(--c-text-3);
  transition: transform var(--c-motion-fast) var(--c-ease);
}

.ui-marker.is-open .ui-marker-chevron {
  transform: rotate(180deg);
}

.ui-marker-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--c-space-3);
  max-width: 460px;
  margin: var(--c-space-2) 0 0 var(--c-space-4);
  padding: var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-surface);
}

.ui-marker-panel[hidden] {
  display: none;
}

.ui-marker-panel--media {
  grid-template-columns: auto minmax(0, 1fr);
}

.ui-marker-media {
  display: flex;
}

.ui-marker-facts {
  min-width: 0;
}

.ui-marker-actions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: var(--c-space-3);
  padding-top: var(--c-space-2);
  border-top: var(--c-hairline) solid var(--c-separator);
}

/* A visit's turn (VisitCard): a compact centred card, a step up from a
   system line. The glyph's round tint carries the tone; the card itself
   stays the surface so a thread of turns reads quietly. */
.ui-visit {
  --ui-visit-tone: var(--c-success);
  --ui-visit-tint: var(--c-success-tint);
  display: flex;
  justify-content: center;
  align-self: center;
  width: min(440px, 100%);
  margin: var(--c-space-2) 0 var(--c-space-3);
}

.ui-visit--tone-neutral {
  --ui-visit-tone: var(--c-text-3);
  --ui-visit-tint: var(--c-surface-2);
}

.ui-visit--tone-accent {
  --ui-visit-tone: var(--c-accent);
  --ui-visit-tint: var(--c-accent-tint);
}

.ui-visit--tone-success {
  --ui-visit-tone: var(--c-success);
  --ui-visit-tint: var(--c-success-tint);
}

.ui-visit--tone-warning {
  --ui-visit-tone: var(--c-warning);
  --ui-visit-tint: var(--c-warning-tint);
}

.ui-visit--tone-danger {
  --ui-visit-tone: var(--c-danger);
  --ui-visit-tint: var(--c-danger-tint);
}

.ui-visit-card {
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-3);
  width: 100%;
  min-width: 0;
  padding: var(--c-space-2) var(--c-space-3);
  border: var(--c-hairline) solid var(--c-separator);
  border-radius: var(--c-radius-md);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--c-text-sm);
  line-height: 18px;
  text-align: left;
  text-decoration: none;
}

.ui-visit-card--link {
  cursor: pointer;
  transition: background var(--c-motion-fast) var(--c-ease);
}

.ui-visit-card--link:hover {
  background: var(--c-hover);
}

.ui-visit-card--link:hover .ui-visit-chevron {
  color: var(--c-text);
}

.ui-visit-card--link:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.ui-visit-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: var(--c-radius-full);
  background: var(--ui-visit-tint);
  color: var(--ui-visit-tone);
}

.ui-visit-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.ui-visit-head {
  display: flex;
  align-items: baseline;
  gap: var(--c-space-2);
  min-width: 0;
}

.ui-visit-title {
  overflow: hidden;
  font-weight: 600;
  color: var(--c-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-visit-time {
  flex: none;
  margin-left: auto;
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

.ui-visit-when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--c-space-1);
  font-weight: 500;
  color: var(--c-text);
}

.ui-visit-from {
  color: var(--c-text-3);
  font-weight: 400;
}

.ui-visit-arrow {
  color: var(--c-text-4);
}

.ui-visit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--c-space-1);
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

.ui-visit-dot {
  margin-right: var(--c-space-1);
  color: var(--c-text-4);
}

.ui-visit-detail {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  margin-top: var(--c-space-2);
  padding-top: var(--c-space-2);
  border-top: var(--c-hairline) solid var(--c-separator);
}

.ui-visit-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-1) var(--c-space-4);
}

.ui-visit-fact {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
}

.ui-visit-fact-label {
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

.ui-visit-fact-value {
  font-weight: 600;
  color: var(--c-text);
}

.ui-visit-meter {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
}

.ui-visit-meter-track {
  position: relative;
  width: 56px;
  height: 6px;
  overflow: hidden;
  border-radius: var(--c-radius-full);
  background: var(--c-surface-2);
}

.ui-visit-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--ui-visit-meter, 0%);
  border-radius: inherit;
  background: var(--ui-visit-tone);
}

.ui-visit-note {
  display: block;
  color: var(--c-text-2);
}

.ui-visit-note-label {
  margin-right: var(--c-space-1);
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-text-3);
}

.ui-visit-note-text {
  quotes: '\201C' '\201D';
}

.ui-visit-chevron {
  flex: none;
  align-self: center;
  color: var(--c-text-4);
}

@media (prefers-reduced-motion: reduce) {
  .ui-visit-card--link {
    transition: none;
  }
}

.ui-call-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-1);
  align-self: center;
  max-width: 100%;
  margin: 10px 0;
}

.ui-call {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
}

.ui-call-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--c-radius-full);
  background: var(--c-accent-tint);
  color: var(--c-accent);
}

/* A status chip (a do-not-contact turn, the carrier's code) takes the
   call's form and says its tone on the glyph only, as a call does. */
.ui-call--missed .ui-call-icon,
.ui-call--danger .ui-call-icon {
  background: var(--c-danger-tint);
  color: var(--c-danger);
}

.ui-call--answered .ui-call-icon,
.ui-call--success .ui-call-icon {
  background: var(--c-success-tint);
  color: var(--c-success);
}

.ui-call--warning .ui-call-icon {
  background: var(--c-warning-tint);
  color: var(--c-warning);
}

.ui-call-title {
  font-weight: 600;
}

.ui-call-detail {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* One part of a status chip's detail line ("carrier code 30005"): a
   narrow line breaks between parts, never inside one. */
.ui-call-part {
  white-space: nowrap;
}

/* Provenance under a status chip ("by Marc Darkus · in GHL"): the light
   status-line style of a bubble's "Delivered", centred under the chip. */
.ui-call-by {
  font-size: var(--c-text-xs);
  font-weight: 500;
  color: var(--c-text-3);
  text-align: center;
}

.ui-call-extra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-1);
  max-width: 520px;
  font-size: var(--c-text-sm);
}

/* ── The call card (db/204) ────────────────────────────────
   A recorded call under its chip: the summary line, the recording, and a
   footer row (the transcript, folded, or "Generate transcript"), on one
   surface. The player gives up its own pill and sits flat in the card. */
.ui-call-card {
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: 100%;
  border-radius: var(--c-radius-xl);
  background: var(--c-surface);
  overflow: hidden;
  text-align: left;
}

/* The call's own row, as its chip shows it, at the top of the card. */
.ui-call-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--c-space-3) var(--c-space-4) 0 var(--c-space-3);
}

/* One left edge down the card: the head's icon, the summary, the play
   button, the footer's icon and the transcript all start at 12px. */

.ui-call-card-summary {
  margin: 0;
  padding: var(--c-space-3) var(--c-space-4) var(--c-space-1) var(--c-space-3);
  color: var(--c-text);
  font-size: var(--c-text-message);
  line-height: 1.45;
  text-wrap: pretty;
}

.ui-call-card .ui-audio {
  width: auto;
  padding: var(--c-space-2) var(--c-space-3);
  border-radius: 0;
  background: none;
}

/* The footer row: one full-width line under a hairline, an icon, a label,
   a quiet meta, and (on the transcript) a chevron at the far end. */
.ui-call-card-foot {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--c-space-3);
  border-top: var(--c-hairline) solid var(--c-separator);
  color: var(--c-accent);
  font-size: var(--c-text-md);
  font-weight: 500;
  text-align: left;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.ui-call-card-foot::-webkit-details-marker {
  display: none;
}

.ui-call-card-foot:hover {
  background: var(--c-hover);
}

.ui-call-card-foot:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}

.ui-call-card-foot-meta {
  color: var(--c-text-3);
  font-weight: 400;
}

.ui-call-card-chevron {
  margin-left: auto;
  color: var(--c-text-3);
  transition: transform var(--c-motion-fast) var(--c-ease);
}

.ui-call-card-transcript[open] .ui-call-card-chevron {
  transform: rotate(180deg);
}

/* Working, or nothing to transcribe: the same row, not a button. */
.ui-call-card-foot--status {
  color: var(--c-text-2);
  font-weight: 400;
  cursor: default;
}

.ui-call-card-foot--status:hover {
  background: none;
}

.ui-call-card-foot--status .ui-spinner {
  color: var(--c-accent);
}

/* The transcript: a turn a block, who above what they said; the lead's
   name in the accent. Long calls scroll inside the card. */
.ui-call-card-turns {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  max-height: 380px;
  margin: 0;
  padding: var(--c-space-1) var(--c-space-4) var(--c-space-4) var(--c-space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.ui-call-turn {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
}

.ui-call-turn-who {
  display: flex;
  align-items: baseline;
  gap: var(--c-space-1);
  color: var(--c-text);
  font-size: var(--c-text-sm);
  font-weight: 600;
}

.ui-call-turn--lead .ui-call-turn-who {
  color: var(--c-accent);
}

.ui-call-turn-role {
  color: var(--c-text-3);
  font-weight: 400;
}

.ui-call-turn-text {
  color: var(--c-text-2);
  font-size: var(--c-text-message);
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .ui-call-card-foot,
  .ui-call-card-chevron {
    transition: none;
  }
}

/* ── Audio player ──────────────────────────────────────── */

/* A voice-memo pill: accent play button, waveform, time, speed, download.
   The played bars are a second layer clipped to --ui-audio-progress. */
.ui-audio {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  /* A set width, not a share of the call chip it sits under (which
     shrink-wraps and would squeeze the waveform). */
  width: 340px;
  max-width: 100%;
  padding: var(--c-space-1) var(--c-space-2) var(--c-space-1) var(--c-space-1);
  border-radius: var(--c-radius-full);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: var(--c-text-xs);
}

.ui-audio audio {
  display: none;
}

.ui-audio-play {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--c-control-md);
  height: var(--c-control-md);
  border-radius: var(--c-radius-full);
  background: var(--c-accent);
  color: var(--c-on-accent);
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.ui-audio-play:hover {
  background: var(--c-accent-hover);
}

.ui-audio-play:active {
  transform: scale(0.94);
}

/* The play glyph's triangle sits optically left; nudge it to centre. */
.ui-audio-play .ui-icon:only-child {
  margin-left: 1px;
}

.ui-audio.is-playing .ui-audio-play .ui-icon {
  margin-left: 0;
}

.ui-audio-track {
  position: relative;
  flex: 1;
  min-width: 96px;
  height: var(--c-control-sm);
  border-radius: var(--c-radius-sm);
  cursor: pointer;
  touch-action: none;
}

.ui-audio-track.is-unknown {
  cursor: default;
}

.ui-audio-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--c-space-hair);
  overflow: hidden;
  pointer-events: none;
}

.ui-audio-bars--played {
  clip-path: inset(0 calc(100% - var(--ui-audio-progress, 0%)) 0 0);
}

.ui-audio-bar {
  flex: 1;
  min-width: 0;
  height: calc(var(--ui-audio-bar, 0.5) * 100%);
  border-radius: var(--c-radius-full);
  background: var(--c-text-4);
}

.ui-audio-bars--played .ui-audio-bar {
  background: var(--c-accent);
}

.ui-audio-time {
  flex: none;
  white-space: nowrap;
  color: var(--c-text-2);
}

.ui-audio-speed {
  flex: none;
  min-width: var(--c-control-md);
  height: var(--c-control-sm);
  padding: 0 var(--c-space-1);
  border-radius: var(--c-radius-full);
  background: var(--c-raised);
  color: var(--c-text);
  font-size: var(--c-text-2xs);
  font-weight: 600;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.ui-audio-speed:hover {
  background: var(--c-hover);
}

.ui-audio-download {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--c-control-sm);
  height: var(--c-control-sm);
  border-radius: var(--c-radius-full);
  color: var(--c-text-3);
  transition: background-color var(--c-motion-fast) var(--c-ease), color var(--c-motion-fast) var(--c-ease);
}

.ui-audio-download:hover {
  background: var(--c-hover);
  color: var(--c-text);
}

.ui-audio--error {
  width: auto;
  padding-right: var(--c-space-3);
  color: var(--c-text-2);
}

.ui-audio--error .ui-audio-play {
  background: var(--c-surface-2);
  color: var(--c-text-3);
}

.ui-audio-error {
  font-size: var(--c-text-sm);
}

.ui-audio-reason {
  color: var(--c-text-3);
}

/* ── Draft card and pending send ───────────────────────── */

.ui-draft {
  align-self: flex-end;
  width: min(460px, 66%);
  margin-top: 14px;
  padding: var(--c-space-3) 14px;
  border-radius: var(--c-radius-xl);
  background: var(--c-surface);
}

.ui-draft-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--c-space-2);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.ui-draft-head b {
  font-weight: 600;
  color: var(--c-text);
}

.ui-draft-meta {
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}

.ui-draft-status {
  margin-left: auto;
}

.ui-draft-body {
  border-radius: 14px;
  background: var(--c-raised);
  box-shadow: inset 0 0 0 1px var(--c-separator);
  font-size: var(--c-text-message);
  line-height: 1.38;
}

/* The draft's editable text: borderless, so the panel is the box. */
.ui-draft-text {
  display: block;
  width: 100%;
  padding: 9px 13px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--c-text);
  font-size: var(--c-text-message);
  line-height: 1.38;
  resize: none;
  field-sizing: content;
  min-height: 2lh;
}

.ui-draft-text:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

/* 1.24.0: why Dave wrote it, and the rest of the turn's drafts (BundlePanel). */
.ui-draft-why {
  margin: 0;
  padding: 9px 13px 0;
  font-size: var(--c-text-sm);
}

.ui-bundle {
  padding: 4px 13px 11px;
  border-top: 1px solid var(--c-separator);
  font-size: var(--c-text-sm);
}

.ui-bundle-head {
  margin: 6px 0 4px;
}

.ui-bundle-list {
  display: grid;
  gap: var(--c-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-bundle-item {
  display: grid;
  gap: 2px;
}

.ui-bundle-body {
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.ui-bundle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.ui-draft-critic {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: var(--c-space-2) var(--c-space-hair) 10px;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.ui-draft-critic .ui-icon {
  margin-top: 2px;
}

.ui-draft-critic--success .ui-icon {
  color: var(--c-success);
}

.ui-draft-critic--warning {
  color: var(--c-warning);
}

.ui-draft-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Discard sits apart at the far end, quieter than the accent. */
.ui-draft-actions .ui-button--ghost {
  margin-left: auto;
  color: var(--c-text-2);
}

.ui-draft-actions .ui-alert {
  flex-basis: 100%;
}

.ui-ring {
  --ui-ring-p: 100%;
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: var(--c-radius-full);
  background: conic-gradient(var(--c-accent) 0 var(--ui-ring-p), var(--c-surface-2) var(--ui-ring-p));
  mask: radial-gradient(circle 4px, transparent 98%, black);
  -webkit-mask: radial-gradient(circle 4px, transparent 98%, black);
}

/* ── Composer ──────────────────────────────────────────── */

.ui-composer {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ui-composer-box {
  padding: 10px var(--c-space-3) var(--c-space-2) var(--c-space-4);
  border-radius: var(--c-radius-bubble);
  transition: background-color var(--c-motion) var(--c-ease);
}

.ui-composer--message .ui-composer-box {
  background: var(--c-surface);
}

.ui-composer--note .ui-composer-box {
  background: var(--c-warning-tint);
}

.ui-composer-input {
  display: block;
  width: 100%;
  min-height: 44px;
  max-height: 40vh;
  padding: 0;
  border: 0;
  background: none;
  resize: none;
  color: var(--c-text);
  font-size: var(--c-text-message);
  line-height: var(--c-leading);
  field-sizing: content;
}

.ui-composer-input:focus {
  outline: none;
}

.ui-composer-input::placeholder {
  color: var(--c-text-3);
}

.ui-composer-input:disabled {
  cursor: not-allowed;
}

.ui-composer-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--c-space-1);
}

.ui-composer-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.ui-composer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ui-composer-foot {
  margin: 6px var(--c-space-4) 0;
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

/* A phone: the box grows to a third of the window, not 40% of the
   screen's full height, so the thread keeps a view with the keyboard up. */
@media (max-width: 720px) {
  .ui-composer-input {
    max-height: calc(var(--c-window-h) / 3);
  }
}

/* ── Search field ──────────────────────────────────────── */

/* The Input with a magnifier inside its leading edge. */
.ui-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.ui-search-glyph {
  position: absolute;
  left: 9px;
  color: var(--c-text-3);
  pointer-events: none;
}

.ui-search-input {
  padding-left: 28px;
}

.ui-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

/* ── Popover ───────────────────────────────────────────── */

/* The AddressInput panel's surface, anchored under its trigger. */
.ui-popover {
  position: relative;
  display: inline-flex;
}

.ui-popover-panel {
  position: absolute;
  top: calc(100% + var(--c-space-1));
  z-index: var(--c-z-popover);
  min-width: 200px;
  max-height: min(560px, 75vh);
  overflow-y: auto;
  padding: var(--c-space-1);
  border-radius: var(--c-radius-md);
  background: var(--c-raised);
  box-shadow:
    0 0 0 var(--c-hairline) var(--c-control-edge),
    var(--c-shadow-popover);
}

.ui-popover-panel--start {
  left: 0;
}

.ui-popover-panel--end {
  right: 0;
}

/* Inside a clipping Group: fixed, placed by the Popover from the
   trigger's box (top or bottom, left, the room as max-height). */
.ui-popover-panel--fixed {
  position: fixed;
  top: auto;
  max-width: calc(100vw - 2 * var(--c-space-2));
}

/* ── Status chip ───────────────────────────────────────── */

/* Several passive states as one pill-button: segments of a short
   phrase, each with its tone's dot, a hairline between two, then the
   caret. Neutral grey like a plain pill; the strong segment takes its
   tone's ink. Pressed, a Facts panel under it. */
.ui-status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
  max-width: 100%;
  height: 22px;
  padding: 0 var(--c-space-2);
  border: 0;
  border-radius: var(--c-radius-full);
  background: var(--c-surface-2);
  font-family: inherit;
  font-size: var(--c-text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--c-text-2);
  cursor: pointer;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.ui-status-chip:hover,
.ui-status-chip[aria-expanded='true'] {
  background-image: linear-gradient(var(--c-hover), var(--c-hover));
}

.ui-status-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.ui-status-chip-seg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.ui-status-chip-seg + .ui-status-chip-seg {
  padding-left: var(--c-space-2);
  box-shadow: calc(-1 * var(--c-hairline)) 0 0 var(--c-text-4);
}

.ui-status-chip-seg .ui-dot {
  width: 6px;
  height: 6px;
}

.ui-status-chip-seg--neutral {
  color: var(--c-text);
}

.ui-status-chip-seg--accent {
  color: var(--c-accent);
}

.ui-status-chip-seg--success {
  color: var(--c-success);
}

.ui-status-chip-seg--warning {
  color: var(--c-warning);
}

.ui-status-chip-seg--danger {
  color: var(--c-danger);
}

.ui-status-chip-aside {
  font-weight: 500;
  color: var(--c-text-3);
}

.ui-status-chip-panel {
  width: max-content;
  max-width: min(340px, calc(100vw - 2 * var(--c-space-4)));
}

/* The panel's facts: a wider gap than an inline Facts list, each value a
   wrapping line of pills and quiet words. */
.ui-status-chip-facts {
  align-items: center;
  gap: var(--c-space-2) var(--c-space-4);
  padding: var(--c-space-2);
}

.ui-status-chip-facts dt {
  color: var(--c-text-2);
}

.ui-status-chip-facts dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 400;
}

.ui-status-chip-quiet {
  color: var(--c-text-3);
}

/* ── List row (a sidebar list driving a pane) ──────────── */

/* A gutter for the unread dot, a 40px avatar, the title and time on one
   line, then the sub-line and two lines of text. The hairline between
   rows starts where the text does; the selected row is a soft accent
   tint (text stays its normal colour, as in a Mail sidebar) and the
   hairlines on either side of it step aside. */
.ui-list-row-item {
  position: relative;
  list-style: none;
}

.ui-list-row-item + .ui-list-row-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 62px;
  right: 10px;
  height: var(--c-hairline);
  background: var(--c-separator);
}

.ui-list-row-item:has(> .is-selected)::before,
.ui-list-row-item:has(> .is-selected) + .ui-list-row-item::before {
  opacity: 0;
}

.ui-list-row {
  display: grid;
  grid-template-columns: 8px 40px minmax(0, 1fr) auto;
  grid-template-areas:
    'mark lead title time'
    'mark lead body body';
  column-gap: 10px;
  row-gap: 1px;
  padding: 10px 10px 10px var(--c-space-1);
  border-radius: var(--c-radius-md);
  color: inherit;
  text-decoration: none;
}

a.ui-list-row:hover {
  background: var(--c-hover);
}

a.ui-list-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.ui-list-row-mark {
  grid-area: mark;
  align-self: start;
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.ui-list-row-lead {
  grid-area: lead;
  align-self: start;
  display: flex;
}

.ui-list-row-title {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  font-size: var(--c-text-md);
  font-weight: 600;
  line-height: var(--c-leading-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-list-row-time {
  grid-area: time;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
  white-space: nowrap;
}

.ui-list-row-body {
  grid-area: body;
  min-width: 0;
  font-size: var(--c-text-md);
  line-height: 1.35;
  color: var(--c-text-2);
}

.ui-list-row-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-bottom: 1px;
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
  white-space: nowrap;
}

.ui-list-row-flag {
  flex: none;
  font-weight: 500;
}

.ui-list-row-flag--neutral {
  color: var(--c-text-2);
}

.ui-list-row-flag--accent {
  color: var(--c-accent);
}

.ui-list-row-flag--success {
  color: var(--c-success);
}

.ui-list-row-flag--warning {
  color: var(--c-warning);
}

.ui-list-row-flag--danger {
  color: var(--c-danger);
}

.ui-list-row-subtext {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-list-row-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.ui-list-row.is-selected,
a.ui-list-row.is-selected:hover {
  background: var(--c-accent-tint);
  color: inherit;
}

/* A phone has no pane beside the list: a selected row is a row. */
@media (max-width: 720px) {
  .ui-list-row.is-selected,
  a.ui-list-row.is-selected:hover {
    background: none;
  }

  .ui-list-row-item:has(> .is-selected)::before,
  .ui-list-row-item:has(> .is-selected) + .ui-list-row-item::before {
    opacity: 1;
  }
}

/* ── Filter chip ───────────────────────────────────────── */

/* A pill-button: the name muted, the value strong, a small caret. Set,
   it takes the accent tint so the bar shows what narrows the list. The
   fill is a control's: the grouped grey on the canvas, raised with a
   hairline on a grey fill (a sidebar), as the context sets it. */
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-1);
  height: var(--c-control-sm);
  padding: 0 10px;
  border: 0;
  border-radius: var(--c-radius-full);
  background: var(--c-control-fill);
  box-shadow: var(--c-control-lift);
  color: var(--c-text);
  font-size: var(--c-text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--c-motion-fast) var(--c-ease), color var(--c-motion-fast) var(--c-ease);
}

.ui-chip:hover {
  background-image: linear-gradient(var(--c-hover), var(--c-hover));
}

.ui-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.ui-chip[aria-expanded='true'] {
  background-image: linear-gradient(var(--c-pressed), var(--c-pressed));
}

.ui-chip.is-set {
  background-color: var(--c-accent-tint);
  box-shadow: none;
  color: var(--c-accent);
}

.ui-chip-label {
  color: var(--c-text-2);
  font-weight: 400;
}

.ui-chip.is-set .ui-chip-label {
  color: inherit;
  opacity: 0.8;
}

.ui-chip-value {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-chip-caret {
  flex: none;
  opacity: 0.7;
}

/* FilterMore: the caret turns over while its row is shown; the count of
   hidden filters set is a small accent disc. */
.ui-chip--more .ui-chip-caret {
  transition: transform var(--c-motion-fast) var(--c-ease);
}

.ui-chip--more[aria-expanded='true'] .ui-chip-caret {
  transform: rotate(180deg);
}

.ui-chip-count {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--c-space-1);
  border-radius: var(--c-radius-full);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: var(--c-text-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ui-chip-panel {
  min-width: 190px;
}

.ui-chip-list {
  display: flex;
  flex-direction: column;
}

/* Rows inset 4px, the highlight a macOS menu's. */
.ui-chip-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px var(--c-space-2) 5px 6px;
  border: 0;
  border-radius: var(--c-radius-sm);
  background: transparent;
  color: var(--c-text);
  font-size: var(--c-text-md);
  text-align: left;
  cursor: default;
}

.ui-chip-item:hover,
.ui-chip-item:focus-visible {
  outline: none;
  background: var(--c-selection);
}

.ui-chip-check {
  display: inline-flex;
  flex: none;
  width: 14px;
  color: var(--c-accent);
}

.ui-chip-item-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-chip-item--clear {
  color: var(--c-text-2);
}

.ui-chip-sep {
  height: var(--c-hairline);
  margin: var(--c-space-1) 6px;
  background: var(--c-separator);
}

/* ── Menu select ───────────────────────────────────────── */

/* A pick from a list with a shape (the stage menu): the Input box as a
   button, then the chip menu's rows in sections under small grey heads,
   each row a name and a grey hint under it. */
.ui-menu-select {
  min-width: 0;
}

.ui-menu-select-popover {
  display: flex;
  width: 100%;
}

.ui-menu-select-trigger {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.ui-menu-select-trigger:hover:not(:disabled) {
  background-image: linear-gradient(var(--c-hover), var(--c-hover));
}

.ui-menu-select-trigger:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px var(--c-accent),
    0 0 0 4px var(--c-focus);
}

.ui-menu-select-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-menu-select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-menu-select-chevron {
  flex: none;
  color: var(--c-text-3);
  transition: transform var(--c-motion-fast) var(--c-ease);
}

.ui-menu-select-trigger[aria-expanded='true'] .ui-menu-select-chevron {
  transform: rotate(180deg);
}

.ui-menu-select-panel {
  width: 280px;
}

.ui-menu-select-list,
.ui-menu-select-section {
  display: flex;
  flex-direction: column;
}

.ui-menu-select-heading {
  padding: var(--c-space-1) var(--c-space-2) var(--c-space-hair) 26px;
  color: var(--c-text-3);
  font-size: var(--c-text-xs);
  font-weight: 600;
}

.ui-menu-select-item {
  align-items: flex-start;
}

.ui-menu-select-item .ui-chip-check {
  padding-top: var(--c-space-hair);
}

.ui-menu-select-item:disabled {
  background: transparent;
  color: var(--c-text-3);
}

.ui-menu-select-item[aria-checked='true'] .ui-menu-select-name {
  font-weight: 600;
}

.ui-menu-select-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ui-menu-select-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-menu-select-hint {
  color: var(--c-text-2);
  font-size: var(--c-text-xs);
  line-height: var(--c-leading-tight);
}

.ui-menu-select-item:disabled .ui-menu-select-hint {
  color: var(--c-text-3);
}

/* ── Command palette ───────────────────────────────────── */

/* Spotlight: a raised sheet a fifth of the way down, over a dim. The
   rows are the address panel's, larger, with a meta column. */
.ui-palette-root {
  position: fixed;
  inset: 0;
  z-index: var(--c-z-overlay);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 14vh var(--c-space-4) var(--c-space-4);
}

.ui-palette-scrim {
  position: absolute;
  inset: 0;
  background: var(--c-scrim);
}

.ui-palette {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: min(560px, 76vh);
  overflow: hidden;
  border-radius: var(--c-radius-xl);
  background: var(--c-raised);
  box-shadow:
    0 0 0 var(--c-hairline) var(--c-control-edge),
    var(--c-shadow-popover);
}

.ui-palette-field {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  flex: none;
  padding: 0 var(--c-space-4);
  box-shadow: 0 var(--c-hairline) 0 var(--c-separator);
}

.ui-palette-glyph {
  flex: none;
  color: var(--c-text-2);
}

.ui-palette-input {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 0;
  background: transparent;
  color: var(--c-text);
  font-size: var(--c-text-lg);
}

.ui-palette-input::placeholder {
  color: var(--c-text-3);
}

.ui-palette-input:focus {
  outline: none;
}

.ui-palette-spinner {
  flex: none;
  color: var(--c-text-3);
}

.ui-palette-esc,
.ui-palette-foot kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 var(--c-space-1);
  border-radius: var(--c-radius-sm);
  background: var(--c-hover);
  box-shadow: 0 0 0 var(--c-hairline) var(--c-control-edge);
  color: var(--c-text-2);
  font-family: var(--c-font-ui);
  font-size: var(--c-text-2xs);
  font-weight: 600;
}

.ui-palette-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--c-space-1) var(--c-space-2) var(--c-space-2);
}

.ui-palette-group + .ui-palette-group {
  margin-top: var(--c-space-1);
}

.ui-palette-heading {
  padding: var(--c-space-2) var(--c-space-2) var(--c-space-1);
  color: var(--c-text-2);
  font-size: var(--c-text-xs);
  font-weight: 600;
}

.ui-palette-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px var(--c-space-2);
  border-radius: var(--c-radius-md);
  color: var(--c-text);
  text-decoration: none;
  cursor: default;
}

.ui-palette-option.is-active {
  background: var(--c-selection);
}

.ui-palette-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--c-text-2);
}

.ui-palette-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: var(--c-leading-tight);
}

.ui-palette-title,
.ui-palette-subtitle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-palette-title {
  font-size: var(--c-text-md);
  font-weight: 600;
}

.ui-palette-subtitle {
  margin-top: var(--c-space-hair);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.ui-palette-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
  flex: none;
  color: var(--c-text-3);
  font-size: var(--c-text-xs);
}

.ui-palette-empty {
  margin: 0;
  padding: var(--c-space-6) var(--c-space-4);
  color: var(--c-text-2);
  font-size: var(--c-text-md);
  text-align: center;
}

.ui-palette-foot {
  display: flex;
  gap: var(--c-space-4);
  flex: none;
  padding: var(--c-space-2) var(--c-space-4);
  color: var(--c-text-3);
  font-size: var(--c-text-xs);
  box-shadow: 0 calc(-1 * var(--c-hairline)) 0 var(--c-separator);
}

.ui-palette-foot kbd + kbd {
  margin-left: var(--c-space-hair);
}

.ui-palette-foot kbd {
  margin-right: var(--c-space-1);
}

@media (max-width: 720px) {
  .ui-palette-root {
    padding-top: var(--c-space-4);
  }

  .ui-palette-meta .ui-pill {
    display: none;
  }
}

/* ── Drawer ────────────────────────────────────────────── */

/* A detail pane beside a list, opened by the URL (Drawer.tsx). The pane
   is the canvas; a hairline edge separates it from the list, and its own
   body scrolls under a pinned head. */
.ui-drawer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--c-bg);
  box-shadow: calc(-1 * var(--c-hairline)) 0 0 var(--c-separator);
}

.ui-drawer-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-3);
  padding: var(--c-space-4) var(--c-space-4) var(--c-space-3) var(--c-space-6);
  background: var(--c-bar);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 var(--c-hairline) 0 var(--c-separator);
}

.ui-drawer-text {
  flex: 1;
  min-width: 0;
}

.ui-drawer-title {
  font-size: var(--c-text-lg);
  font-weight: 600;
  line-height: var(--c-leading-tight);
}

.ui-drawer-meta {
  margin-top: var(--c-space-hair);
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.ui-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--c-space-4) var(--c-space-6) var(--c-space-8);
}

@media (max-width: 960px) {
  .ui-drawer {
    box-shadow: 0 calc(-1 * var(--c-hairline)) 0 var(--c-separator);
  }
}

/* ── Dialog (native <dialog>, showModal) ───────────────────
   The panel is the dialog's child so a press on the dialog itself is a
   press on the scrim. The top layer puts it above everything; the
   ::backdrop is the ⌘K sheet's scrim. */
.ui-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 14vh var(--c-space-4) var(--c-space-4);
  border: 0;
  background: transparent;
  color: var(--c-text);
  font-family: var(--c-font-ui);
  font-size: var(--c-text-md);
  overflow-y: auto;
}

.ui-dialog:not([open]) {
  display: none;
}

.ui-dialog::backdrop {
  background: var(--c-scrim);
}

.ui-dialog-panel {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-4);
  width: min(440px, 100%);
  margin: 0 auto;
  padding: var(--c-space-5);
  border-radius: var(--c-radius-xl);
  background: var(--c-raised);
  box-shadow:
    0 0 0 var(--c-hairline) var(--c-control-edge),
    var(--c-shadow-popover);
  /* Fields in the panel sit on the raised fill: the canvas's control look. */
  --c-control-fill: var(--c-surface);
}

/* A panel focused on open (Dialog focusPanel) draws no ring around itself. */
.ui-dialog-panel[tabindex='-1']:focus {
  outline: none;
}

.ui-dialog--lg .ui-dialog-panel {
  width: min(560px, 100%);
}

/* The sheet variant: the centred panel, and at phone width a bottom sheet. */
.ui-dialog-grab {
  display: none;
}

@media (max-width: 720px) {
  .ui-dialog--sheet {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    overflow: hidden;
  }
  .ui-dialog--sheet:not([open]) {
    display: none;
  }
  .ui-dialog--sheet .ui-dialog-panel {
    width: 100%;
    max-height: 90%;
    overflow-y: auto;
    /* A scroll inside the sheet that hits its end never moves the page. */
    overscroll-behavior: contain;
    padding: var(--c-space-2) var(--c-space-4) calc(var(--c-space-6) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--c-radius-xl) var(--c-radius-xl) 0 0;
    background: var(--c-bg);
  }
  .ui-dialog--sheet .ui-dialog-grab {
    position: relative;
    display: block;
    align-self: center;
    width: var(--c-space-8);
    height: var(--c-space-1);
    border-radius: var(--c-radius-full);
    background: var(--c-text-4);
  }
  /* The grabber's reach: a thumb-sized strip around the bar. */
  .ui-dialog--sheet .ui-dialog-grab::after {
    content: '';
    position: absolute;
    inset: calc(var(--c-space-3) * -1) calc(var(--c-space-8) * -1);
  }
  /* The grabber and the header are the drag handle (Dialog useSheetDrag):
     the browser neither scrolls nor selects under the finger. */
  .ui-dialog--sheet [data-drag] {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
  }
  .ui-dialog--sheet {
    overscroll-behavior: contain;
  }
  .ui-dialog--sheet .ui-dialog-title {
    font-size: var(--c-text-xl);
  }
}

.ui-dialog-head {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
}

.ui-dialog-title {
  margin: 0;
  font-size: var(--c-text-lg);
  font-weight: 600;
  line-height: 1.3;
}

.ui-dialog-desc {
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.ui-dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}

.ui-dialog-text {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  color: var(--c-text-2);
  line-height: 1.45;
}

.ui-dialog-text p {
  margin: 0;
}

.ui-dialog-form {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}

.ui-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--c-space-2);
}

/* Actions keep their full width (a narrow sheet wraps them to a second
   line instead of squeezing a label). */
.ui-dialog-actions > .ui-button {
  flex: none;
  min-width: max-content;
}

@media (max-width: 720px) {
  .ui-dialog {
    padding-top: var(--c-space-8);
  }
}

/* ── EditableGroup (a group turned into its own small form) ─ */
.ui-editable-form {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  width: 100%;
  padding: var(--c-space-1) 0;
}

.ui-editable-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-items: start;
  gap: var(--c-space-3);
}

/* A switch or a hint-carrying field takes the whole line. */
.ui-editable-fields > .ui-toggle {
  grid-column: 1 / -1;
}

.ui-editable-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--c-space-2);
}

.ui-editable-status {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* ── Stat tile ─────────────────────────────────────────── */

.ui-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--c-space-2);
  margin: 0;
}

.ui-stat {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  min-width: 0;
  padding: var(--c-space-3) var(--c-space-4);
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
}

.ui-stat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2);
  font-size: var(--c-text-sm);
  font-weight: 500;
  color: var(--c-text-2);
}

.ui-stat-label-text {
  min-width: 0;
}

.ui-stat-value {
  margin: 0;
  font-size: var(--c-text-2xl);
  font-weight: 600;
  line-height: var(--c-leading-tight);
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

.ui-stat-value.is-empty {
  color: var(--c-text-3);
}

.ui-stat-detail {
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
}

/* The foot (a sparkline) sits at the bottom, so tiles in a row align. */
.ui-stat-foot {
  margin: auto 0 0;
  padding-top: var(--c-space-2);
}

/* ── Delta ─────────────────────────────────────────────── */

.ui-delta {
  flex: none;
  font-size: var(--c-text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: var(--c-leading-tight);
  white-space: nowrap;
}

.ui-delta--pill {
  padding: 1px 6px;
  border-radius: var(--c-radius-full);
}

.ui-delta--text {
  font-size: var(--c-text-2xs);
  font-weight: 500;
}

.ui-delta--good {
  color: var(--c-success);
}

.ui-delta--bad {
  color: var(--c-danger);
}

.ui-delta--neutral {
  color: var(--c-text-3);
}

.ui-delta--pill.ui-delta--good {
  background: var(--c-success-tint);
}

.ui-delta--pill.ui-delta--bad {
  background: var(--c-danger-tint);
}

.ui-delta--pill.ui-delta--neutral {
  background: var(--c-surface-2);
  color: var(--c-text-2);
}

/* ── Sparkline ─────────────────────────────────────────── */

.ui-spark {
  display: block;
  width: 100%;
  height: 34px;
  overflow: visible;
}

.ui-spark-prev,
.ui-spark-line {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ui-spark-prev {
  stroke: var(--c-prev);
  stroke-width: 1.5;
  stroke-dasharray: 2 3;
}

.ui-spark-line {
  stroke: var(--c-accent);
  stroke-width: 2;
}

.ui-spark-dot {
  fill: var(--c-accent);
}

/* ── Conversion flow ───────────────────────────────────── */

.ui-flow {
  margin: 0;
  padding: var(--c-space-5) var(--c-space-4) var(--c-space-4);
}

.ui-flow-steps {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 0 var(--c-space-1);
  text-align: center;
}

.ui-flow-name {
  font-size: var(--c-text-sm);
  font-weight: 500;
  color: var(--c-text-2);
}

.ui-flow-count {
  margin-top: var(--c-space-1);
  font-size: var(--c-text-2xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: var(--c-leading-tight);
  color: var(--c-text);
}

.ui-flow-step.is-zero .ui-flow-count {
  color: var(--c-text-3);
}

.ui-flow-step.is-unknown .ui-flow-count {
  color: var(--c-text-4);
}

.ui-flow-note {
  min-height: 15px;
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

/* The phone view's parts: the line between two rows and each row's bar. */
.ui-flow-from,
.ui-flow-bar {
  display: none;
}

.ui-flow-art {
  position: relative;
  margin-top: var(--c-space-4);
}

.ui-flow-art svg {
  display: block;
  width: 100%;
  height: 150px;
}

.ui-flow-node {
  fill: var(--c-accent);
}

.ui-flow-band {
  fill: var(--c-flow);
}

.ui-flow-band.is-leak {
  fill: var(--c-danger-tint);
}

.ui-flow-zero {
  fill: none;
  stroke: var(--c-text-4);
  stroke-width: 2;
  stroke-dasharray: 3 4;
}

.ui-flow-ghost {
  fill: none;
  stroke: var(--c-text-4);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.ui-flow-rate {
  position: absolute;
  top: 50%;
  left: calc(var(--ui-flow-x) * 100%);
  padding: 2px 7px;
  border-radius: var(--c-radius-full);
  background: var(--c-raised);
  box-shadow:
    0 1px 3px var(--c-shadow),
    0 0 0 var(--c-hairline) var(--c-control-edge);
  font-size: var(--c-text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.ui-flow-rate.is-leak {
  background: var(--c-danger);
  box-shadow: none;
  color: var(--c-on-danger);
}

.ui-flow-rate.is-muted {
  font-weight: 500;
  color: var(--c-text-3);
}

.ui-flow-leak {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  margin: var(--c-space-4) calc(-1 * var(--c-space-4)) calc(-1 * var(--c-space-4));
  padding: var(--c-space-3) var(--c-space-4);
  box-shadow: inset 0 var(--c-hairline) 0 var(--c-separator);
  font-size: var(--c-text-md);
  color: var(--c-text-2);
}

.ui-flow-leak-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--c-radius-full);
  background: var(--c-danger);
}

.ui-flow-leak-text {
  flex: 1;
  min-width: 0;
}

.ui-flow-leak-text strong {
  font-weight: 600;
  color: var(--c-text);
}

.ui-flow-leak-action {
  flex: none;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .ui-flow {
    padding: var(--c-space-2) var(--c-space-4) var(--c-space-4);
  }

  .ui-flow-art {
    display: none;
  }

  .ui-flow-steps {
    display: flex;
    flex-direction: column;
  }

  .ui-flow-step {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    column-gap: var(--c-space-3);
    align-items: center;
    padding: 0;
    text-align: left;
  }

  .ui-flow-from {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: var(--c-space-2);
    padding: 3px 0 3px 22px;
    font-size: var(--c-text-xs);
    color: var(--c-text-3);
  }

  .ui-flow-from::before {
    content: '';
    width: 1px;
    height: 14px;
    margin-right: var(--c-space-1);
    background: var(--c-text-4);
  }

  .ui-flow-from.is-leak {
    font-weight: 600;
    color: var(--c-danger);
  }

  .ui-flow-name {
    grid-row: 2;
    font-size: var(--c-text-md);
    color: var(--c-text);
  }

  .ui-flow-bar {
    display: block;
    grid-row: 2;
    height: 8px;
    overflow: hidden;
    border-radius: var(--c-radius-full);
    background: var(--c-surface-2);
  }

  .ui-flow-bar-fill {
    display: block;
    width: calc(var(--ui-flow-fill) * 100%);
    height: 100%;
    border-radius: var(--c-radius-full);
    background: var(--c-accent);
  }

  .ui-flow-count {
    grid-row: 2;
    grid-column: 3;
    min-width: 48px;
    margin: 0;
    font-size: var(--c-text-lg);
    text-align: right;
  }

  .ui-flow-note {
    display: none;
  }

  .ui-flow-leak {
    flex-wrap: wrap;
    margin-top: var(--c-space-3);
  }

  .ui-flow-leak-action {
    flex-basis: 100%;
    padding-left: calc(8px + var(--c-space-3));
  }
}

/* ── Charts: BarList, ColumnChart ──────────────────────── */

.ui-bars {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  margin: 0;
  padding: var(--c-space-3) var(--c-space-4);
  list-style: none;
}

.ui-bars-row {
  display: grid;
  grid-template-columns: minmax(84px, 30%) 1fr;
  align-items: center;
  gap: var(--c-space-3);
  font-size: var(--c-text-md);
}

.ui-bars-label {
  overflow: hidden;
  color: var(--c-text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-bars-track {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  min-width: 0;
}

/* The value sits at the tip, so the bar takes at most what is left. */
.ui-bars-bar {
  flex: none;
  width: calc(var(--ui-bar) * (100% - 96px));
  height: 16px;
  border-radius: 0 4px 4px 0;
  background: var(--c-accent);
}

.ui-bars-bar.is-zero {
  width: 2px;
  background: var(--c-separator);
}

.ui-bars-value {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--c-text);
  white-space: nowrap;
}

.ui-columns {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  margin: 0;
  padding: var(--c-space-4) var(--c-space-4) var(--c-space-3) var(--c-space-4);
}

.ui-columns-plot {
  position: relative;
  height: 140px;
  margin-left: 32px;
}

.ui-columns-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ui-columns-tick {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--ui-bar) * 100%);
  height: 1px;
  background: var(--c-separator);
}

.ui-columns-tick-label {
  position: absolute;
  right: calc(100% + var(--c-space-2));
  top: -7px;
  font-size: var(--c-text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--c-text-3);
}

.ui-columns-bars,
.ui-columns-axis {
  display: flex;
  gap: 2px;
}

.ui-columns-bars {
  position: absolute;
  inset: 0;
  align-items: flex-end;
}

.ui-columns-axis {
  margin-left: 32px;
}

.ui-columns-slot {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  min-width: 0;
  border-radius: var(--c-radius-sm);
  outline: none;
}

.ui-columns-slot:hover,
.ui-columns-slot:focus-visible {
  background: var(--c-hover);
}

.ui-columns-slot:focus-visible {
  box-shadow: 0 0 0 3px var(--c-focus);
}

.ui-columns-bar {
  width: min(100%, 24px);
  height: calc(var(--ui-bar) * 100%);
  border-radius: 4px 4px 0 0;
  background: var(--c-accent);
}

.ui-columns-bar.is-zero {
  height: 1px;
  border-radius: 0;
  background: var(--c-text-4);
}

.ui-columns-tip {
  position: absolute;
  bottom: calc(100% + var(--c-space-1));
  left: 50%;
  z-index: var(--c-z-popover);
  display: none;
  flex-direction: column;
  gap: var(--c-space-hair);
  padding: var(--c-space-1) var(--c-space-2);
  border-radius: var(--c-radius-sm);
  background: var(--c-raised);
  box-shadow:
    0 0 0 var(--c-hairline) var(--c-control-edge),
    var(--c-shadow-popover);
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}

.ui-columns-slot:hover .ui-columns-tip,
.ui-columns-slot:focus-visible .ui-columns-tip {
  display: flex;
}

.ui-columns-tip-value {
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-text);
}

.ui-columns-tip-label {
  font-size: var(--c-text-xs);
  color: var(--c-text-2);
}

.ui-columns-x {
  flex: 1;
  min-width: 0;
  overflow: visible;
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
  text-align: center;
  white-space: nowrap;
}

/* The previous period: the same series, paler. */
.ui-columns-slot.is-prev .ui-columns-bar {
  background: var(--c-prev);
}

.ui-columns-slot.is-prev .ui-columns-bar.is-zero,
.ui-columns-x.is-prev {
  color: var(--c-text-3);
}

/* A column that counts against (a low score): grey, not the accent. */
.ui-columns-slot.is-muted .ui-columns-bar {
  background: var(--c-text-4);
}

/* Values over the columns, no grid: a slim chart. */
.ui-columns--values {
  padding: 0;
}

.ui-columns--values .ui-columns-plot {
  height: 96px;
  margin-left: 0;
}

.ui-columns--values .ui-columns-axis {
  margin-left: 0;
  padding-top: 3px;
  box-shadow: inset 0 var(--c-hairline) 0 var(--c-separator);
}

.ui-columns--values .ui-columns-bars,
.ui-columns--values .ui-columns-axis {
  gap: var(--c-space-2);
}

.ui-columns--values .ui-columns-slot {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.ui-columns--values .ui-columns-bar {
  width: min(100%, 34px);
  height: calc(var(--ui-bar) * (100% - 18px));
  min-height: 1px;
}

.ui-columns-value {
  font-size: var(--c-text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--c-text-2);
  white-space: nowrap;
}

.ui-columns-slot.is-prev .ui-columns-value {
  color: var(--c-text-3);
}

/* At phone width a slim chart names every other week. */
@media (max-width: 720px) {
  .ui-columns--values .ui-columns-bars,
  .ui-columns--values .ui-columns-axis {
    gap: var(--c-space-1);
  }

  .ui-columns--values .ui-columns-x:nth-child(even) {
    visibility: hidden;
  }
}

.ui-columns-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
  text-align: center;
}

/* ── Data table ────────────────────────────────────────── */

.ui-datatable {
  overflow-x: auto;
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
}

/* More columns past an edge: the content fades out there, so a wide table
   says it scrolls instead of looking cut off. The mask is alpha only. */
.ui-datatable--more-right {
  mask-image: linear-gradient(to right, var(--c-mask-solid) calc(100% - var(--c-space-8)), transparent);
}

.ui-datatable--more-left {
  mask-image: linear-gradient(to left, var(--c-mask-solid) calc(100% - var(--c-space-8)), transparent);
}

.ui-datatable--more-left.ui-datatable--more-right {
  mask-image: linear-gradient(
    to right,
    transparent,
    var(--c-mask-solid) var(--c-space-8),
    var(--c-mask-solid) calc(100% - var(--c-space-8)),
    transparent
  );
}

.ui-datatable-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--c-text-md);
}

.ui-datatable-table th,
.ui-datatable-table td {
  padding: var(--c-space-2) var(--c-space-3);
  text-align: left;
  font-weight: 400;
  white-space: nowrap;
  vertical-align: middle;
}

.ui-datatable-table thead th {
  padding-top: var(--c-space-3);
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-text-2);
  box-shadow: inset 0 calc(-1 * var(--c-hairline)) 0 var(--c-separator);
}

.ui-datatable-table .ui-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ui-datatable-row + .ui-datatable-row > * {
  box-shadow: inset 0 var(--c-hairline) 0 var(--c-separator);
}

.ui-datatable-row:hover > * {
  background-image: linear-gradient(var(--c-hover), var(--c-hover));
}

/* The name column stays put while the numbers scroll. */
.ui-datatable-name {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 220px;
  max-width: 360px;
  background: var(--c-surface);
}

.ui-datatable-name-inner {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  min-width: 0;
  white-space: normal;
}

.ui-datatable-row[data-depth='1'] .ui-datatable-name-inner {
  padding-left: var(--c-space-5);
}

.ui-datatable-row[data-depth='2'] .ui-datatable-name-inner {
  padding-left: calc(2 * var(--c-space-5));
}

.ui-datatable-row--child .ui-datatable-name {
  font-weight: 400;
}

.ui-datatable-toggle,
.ui-datatable-toggle-space {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.ui-datatable-toggle {
  padding: 0;
  border: 0;
  border-radius: var(--c-radius-sm);
  background: none;
  color: var(--c-text-3);
  cursor: pointer;
  transform: rotate(-90deg);
  transition: transform var(--c-motion-fast) var(--c-ease);
}

.ui-datatable-toggle[aria-expanded='true'] {
  transform: none;
}

.ui-datatable-toggle:hover {
  background: var(--c-hover);
  color: var(--c-text);
}

.ui-datatable-toggle:focus-visible,
.ui-datatable-head:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.ui-datatable-head {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-hair);
  padding: 0;
  border: 0;
  border-radius: var(--c-radius-sm);
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.ui-datatable-head.is-active {
  color: var(--c-text);
}

.ui-datatable-arrow {
  display: inline-flex;
  opacity: 0;
}

.ui-datatable-head:hover .ui-datatable-arrow,
.ui-datatable-head.is-active .ui-datatable-arrow {
  opacity: 1;
}

.ui-datatable-arrow.is-asc {
  transform: rotate(180deg);
}

.ui-datatable-empty {
  padding: var(--c-space-6) var(--c-space-3);
  color: var(--c-text-2);
  text-align: center;
  white-space: normal;
}

/* A header's label over its grey second line. */
.ui-datatable-head {
  flex-direction: column;
  align-items: flex-start;
}

.ui-num .ui-datatable-head {
  align-items: flex-end;
}

.ui-datatable-head-label {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-hair);
}

.ui-datatable-sub {
  display: block;
  font-weight: 400;
  color: var(--c-text-3);
}

thead th.is-selected .ui-datatable-head {
  color: var(--c-accent);
}

/* Sticky: the rows scroll under the header and over the total. The
   separate border model keeps sticky cells' fills and hairlines. */
.ui-datatable--sticky {
  overflow: auto;
  max-height: max(560px, calc(var(--c-screen-h) - 300px));
}

.ui-datatable--sticky .ui-datatable-table {
  border-collapse: separate;
  border-spacing: 0;
}

.ui-datatable--sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--c-surface);
  vertical-align: bottom;
}

.ui-datatable--sticky thead th.ui-datatable-name {
  z-index: 3;
}

/* A value with its change under it. */
.ui-datatable-value {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: var(--c-leading-tight);
}

.ui-datatable-value-main {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ui-datatable-value-main.is-empty {
  font-weight: 400;
  color: var(--c-text-3);
}

.ui-datatable-value-delta {
  min-height: 12px;
}

/* The inline bar beside a volume. */
.ui-datatable-bar {
  display: inline-block;
  flex: none;
  width: 44px;
  height: 6px;
  overflow: hidden;
  border-radius: var(--c-radius-full);
  background: var(--c-surface-2);
}

.ui-datatable-bar-fill {
  display: block;
  width: calc(var(--ui-heat) * 100%);
  height: 100%;
  border-radius: var(--c-radius-full);
  background: var(--c-accent);
}

/* Heat: the accent, up to --c-heat at the column's best. */
.ui-datatable-table td.is-heat {
  background-color: color-mix(in srgb, var(--c-accent) calc(var(--ui-heat) * var(--c-heat)), transparent);
}

/* A number cell as a button (the chart follows it). */
.ui-datatable-cell {
  display: inline-flex;
  justify-content: flex-end;
  min-width: 100%;
  margin: calc(-1 * var(--c-space-1)) calc(-1 * var(--c-space-2));
  padding: var(--c-space-1) var(--c-space-2);
  border: 0;
  border-radius: var(--c-radius-sm);
  background: none;
  font: inherit;
  color: inherit;
  text-align: right;
  cursor: pointer;
}

.ui-datatable-cell:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.ui-datatable-cell[aria-pressed='true'] {
  box-shadow: inset 0 0 0 1.5px var(--c-accent);
}

.ui-datatable-row.is-selected > * {
  background-image: linear-gradient(var(--c-accent-tint), var(--c-accent-tint));
}

.ui-datatable-row.is-selected > .ui-datatable-name {
  box-shadow: inset 2px 0 0 var(--c-accent);
}

.ui-datatable-row--pinned .ui-datatable-name {
  color: var(--c-text-2);
}

/* The total: the darker fill, pinned to the foot. */
.ui-datatable-total > * {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background-color: var(--c-surface-2);
  font-weight: 600;
}

.ui-datatable-total > .ui-datatable-name {
  z-index: 3;
  background-color: var(--c-surface-2);
}

.ui-datatable-total .ui-datatable-value-main {
  font-weight: 600;
}

/* ── Calendar week and day ─────────────────────────────────
   A bounded surface in the manner of Calendar on macOS: a hairline
   frame, a header row of days on the rail grey, an hour gutter, one
   column per day with a line on every hour and a fainter one on the
   half. The calendar fills whatever height its parent gives it (a flex
   column, as on /crm/calendar) and scrolls its hours inside, the day
   heads and the gutter pinned; with no height given it takes its
   natural one, --ui-cal-hour per hour. Nothing is a fixed px height.

   Geometry is custom properties the component sets: --ui-cal-hours on
   the grid; per event --ui-cal-top / --ui-cal-len in hours from the
   first hour drawn and --ui-cal-lane of --ui-cal-lanes for events side
   by side. Positions are fractions of the column's height, so the grid
   can stretch. Kinds: visit solid, hold dashed, phone slimmer, drive a
   hatched grey block, busy a faint wash. */

.ui-calendar {
  /* The least an hour is drawn at; it grows to fill the frame. */
  --ui-cal-hour: calc(var(--c-space-8) + var(--c-space-7));
  --ui-cal-gutter: calc(var(--c-space-8) + var(--c-space-6));
  --ui-cal-min-col: calc(var(--c-space-8) * 3.5);
  --ui-cal-gap: var(--c-space-hair);
  --ui-cal-line: var(--c-separator);
  --ui-cal-half: color-mix(in srgb, var(--c-separator) 35%, transparent);
  --ui-cal-head: var(--c-rail);
  /* A drive's hatch and edge: the secondary label colour, thinned. */
  --ui-cal-hatch: color-mix(in srgb, var(--c-text-2) 22%, transparent);
  --ui-cal-hatch-edge: color-mix(in srgb, var(--c-text-2) 30%, transparent);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--c-separator);
  border-radius: var(--c-radius-lg);
  background: var(--c-bg);
}

.ui-calendar--week {
  --ui-cal-min-col: calc(var(--c-space-8) * 3.5);
}

.ui-calendar--day {
  --ui-cal-min-col: calc(var(--c-space-8) * 6);
}

/* A grid container of one auto row: the grid inside stretches to the
   frame when it is shorter, and scrolls when it is taller. */
.ui-calendar-scroll {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.ui-calendar-grid {
  --ui-cal-step: calc(100% / var(--ui-cal-hours));
  display: grid;
  grid-template-columns: var(--ui-cal-gutter) repeat(var(--ui-cal-days), minmax(var(--ui-cal-min-col), 1fr));
  grid-template-rows: auto minmax(calc(var(--ui-cal-hours) * var(--ui-cal-hour)), 1fr);
  min-width: min-content;
}

/* The head row: the corner and the day heads, pinned to the top of the
   scroll on the rail grey, a line under it. */
.ui-calendar-corner,
.ui-calendar-dayhead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ui-cal-head);
  box-shadow: inset 0 -1px 0 var(--ui-cal-line);
}

.ui-calendar-corner {
  left: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 var(--c-space-2) var(--c-space-2);
  font-size: var(--c-text-2xs);
  font-weight: 600;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ui-calendar-dayhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: flex-start;
  gap: var(--c-space-1);
  padding: var(--c-space-3) var(--c-space-3) var(--c-space-2);
  box-shadow:
    inset 1px 0 0 var(--ui-cal-line),
    inset 0 -1px 0 var(--ui-cal-line);
}

/* What covers the whole day, under the head: a strip each. */
.ui-calendar-allday {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  flex-basis: 100%;
  min-width: 0;
  margin: var(--c-space-1) 0 0;
  padding: 0;
  list-style: none;
}

.ui-cal-allday {
  overflow: hidden;
  padding: var(--c-space-hair) var(--c-space-2);
  border-radius: var(--c-radius-sm);
  background: color-mix(in srgb, var(--c-surface-2) 80%, transparent);
  box-shadow: inset 2px 0 0 var(--ui-cal-rep, var(--c-text-4));
  font-size: var(--c-text-2xs);
  font-weight: 500;
  color: var(--c-text-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-calendar-weekday {
  font-size: var(--c-text-sm);
  font-weight: 500;
  color: var(--c-text-2);
}

.ui-calendar-date {
  font-size: var(--c-text-lg);
  font-weight: 600;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.ui-calendar-dayhead[aria-current='date'] .ui-calendar-weekday,
.ui-calendar-dayhead[aria-current='date'] .ui-calendar-date {
  color: var(--c-accent);
}

/* The hour gutter, pinned to the left when a week scrolls sideways. */
.ui-calendar-gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--c-bg);
}

.ui-calendar-hour {
  position: absolute;
  top: calc(var(--ui-cal-at) * var(--ui-cal-step));
  right: var(--c-space-2);
  transform: translateY(-50%);
  font-size: var(--c-text-2xs);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ui-calendar-hour:first-child {
  transform: translateY(var(--c-space-1));
}

/* A line on every hour, a fainter one on the half, and the day's own
   line at its left; the gradients repeat per hour of the column. */
.ui-calendar-col {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--ui-cal-step) - 1px),
      var(--ui-cal-line) calc(var(--ui-cal-step) - 1px) var(--ui-cal-step)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--ui-cal-step) / 2 - 1px),
      var(--ui-cal-half) calc(var(--ui-cal-step) / 2 - 1px) calc(var(--ui-cal-step) / 2),
      transparent calc(var(--ui-cal-step) / 2) var(--ui-cal-step)
    );
  box-shadow: inset 1px 0 0 var(--ui-cal-line);
}

.ui-cal-slot {
  position: absolute;
  top: calc(var(--ui-cal-top) * var(--ui-cal-step) + var(--ui-cal-gap) / 2);
  height: calc(var(--ui-cal-len) * var(--ui-cal-step) - var(--ui-cal-gap));
  left: calc(var(--ui-cal-lane) / var(--ui-cal-lanes) * 100% + var(--ui-cal-gap));
  width: calc(var(--ui-cal-span, 1) / var(--ui-cal-lanes) * 100% - var(--ui-cal-gap) * 2);
  min-height: var(--c-space-3);
}

/* Rep colours, when several reps share the grid: the bar at a block's
   left. Mid-tone, so each reads on the light and the dark ground.
   The classes work outside the grid too (a legend beside it). */
.ui-cal-tone-0 { --ui-cal-rep: var(--c-rep-0); }
.ui-cal-tone-1 { --ui-cal-rep: var(--c-rep-1); }
.ui-cal-tone-2 { --ui-cal-rep: var(--c-rep-2); }
.ui-cal-tone-3 { --ui-cal-rep: var(--c-rep-3); }
.ui-cal-tone-4 { --ui-cal-rep: var(--c-rep-4); }
.ui-cal-tone-5 { --ui-cal-rep: var(--c-rep-5); }

.ui-cal-event {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: var(--c-space-1) var(--c-space-2);
  border-radius: var(--c-radius-sm);
  font-size: var(--c-text-xs);
  line-height: var(--c-leading-tight);
  color: var(--c-text);
  text-decoration: none;
}

/* Each line keeps its height; what does not fit is clipped at the
   bottom, never squeezed into the line above. */
.ui-cal-event > * {
  flex-shrink: 0;
}

.ui-cal-event--short {
  flex-direction: row;
  align-items: center;
  gap: var(--c-space-1);
  padding-block: 0;
}

a.ui-cal-event:hover {
  filter: brightness(0.97);
}

a.ui-cal-event:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}

.ui-cal-event-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-cal-event-sub {
  color: var(--c-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-cal-event-pill {
  display: flex;
  margin-top: auto;
}

.ui-cal-event--short .ui-cal-event-pill {
  display: none;
}

.ui-cal-event--visit {
  background: var(--c-accent-tint);
  box-shadow: inset 3px 0 0 var(--ui-cal-rep, var(--c-accent));
}

.ui-cal-event--hold {
  background: color-mix(in srgb, var(--c-accent-tint) 50%, var(--c-bg));
  outline: 1px dashed var(--c-warning);
  outline-offset: -1px;
}

.ui-cal-tone-0 .ui-cal-event--hold,
.ui-cal-tone-1 .ui-cal-event--hold,
.ui-cal-tone-2 .ui-cal-event--hold,
.ui-cal-tone-3 .ui-cal-event--hold,
.ui-cal-tone-4 .ui-cal-event--hold,
.ui-cal-tone-5 .ui-cal-event--hold {
  box-shadow: inset 3px 0 0 var(--ui-cal-rep);
}

.ui-cal-event--phone {
  width: 70%;
  background: var(--c-success-tint);
  box-shadow: inset 3px 0 0 var(--ui-cal-rep, var(--c-success));
}

/* A drive is a block of its own between the visits, hatched in a
   neutral grey so it reads as neither a visit (accent), a hold (dashed
   warning) nor the rep's own time (a flat wash). It takes no lane: it
   spans the column under anything it brushes against. Its words show
   once it has a line's height; a quarter hour is the hatch alone. */
.ui-cal-slot--drive {
  min-height: 0;
  z-index: 0;
}

.ui-cal-slot:not(.ui-cal-slot--drive) {
  z-index: 1;
}

.ui-cal-event--drive {
  background-color: var(--c-surface);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--ui-cal-hatch) 0 var(--c-space-hair),
    transparent var(--c-space-hair) calc(var(--c-space-2) - var(--c-space-hair))
  );
  box-shadow: inset 0 0 0 var(--c-hairline) var(--ui-cal-hatch-edge);
  color: var(--c-text-2);
}

.ui-cal-event--drive .ui-cal-event-title {
  font-weight: 500;
}

/* A rep's drive and busy time carry the rep's bar too. */
.ui-cal-slot[class*='ui-cal-tone-'] .ui-cal-event--drive {
  box-shadow:
    inset 3px 0 0 var(--ui-cal-rep),
    inset 0 0 0 var(--c-hairline) var(--ui-cal-hatch-edge);
}

.ui-cal-slot[class*='ui-cal-tone-'] .ui-cal-event--busy {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ui-cal-rep) 55%, transparent);
}

.ui-cal-event--drive .ui-cal-event-sub {
  color: var(--c-text-3);
}

.ui-cal-event--tiny {
  padding: 0;
}

.ui-cal-event--tiny > * {
  display: none;
}

.ui-cal-event--busy .ui-cal-event-title {
  font-weight: 500;
}

.ui-cal-event--busy {
  background: color-mix(in srgb, var(--c-surface-2) 60%, transparent);
  color: var(--c-text-3);
}

.ui-cal-event--busy .ui-cal-event-sub {
  color: var(--c-text-3);
}

/* The one open in an inspector, ringed in its kind's colour. */
.ui-cal-event.is-selected {
  box-shadow:
    inset 3px 0 0 var(--c-accent),
    0 0 0 2px var(--c-accent);
}

.ui-cal-event--hold.is-selected {
  box-shadow: 0 0 0 2px var(--c-warning);
}

a.ui-cal-event--drive:hover {
  color: var(--c-text);
}

.ui-cal-event--drive.is-selected {
  box-shadow: 0 0 0 2px var(--c-text-2);
  color: var(--c-text);
}

.ui-cal-event--phone.is-selected {
  box-shadow:
    inset 3px 0 0 var(--c-success),
    0 0 0 2px var(--c-success);
}

.ui-cal-event.is-past:not(.is-selected) {
  opacity: 0.55;
}

/* How it went. A no-show: struck through on red, never dimmed away. */
.ui-cal-event.is-no-show {
  background: var(--c-danger-tint);
  box-shadow: inset 3px 0 0 var(--c-danger);
}

.ui-cal-event.is-no-show .ui-cal-event-title {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--c-danger) 70%, transparent);
}

.ui-cal-event.is-no-show.is-past:not(.is-selected),
.ui-cal-event.is-unreported.is-past:not(.is-selected) {
  opacity: 0.85;
}

/* No outcome yet: an amber dot before the name. */
.ui-cal-event-flag {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: var(--c-space-1);
  border-radius: var(--c-radius-full);
  background: var(--c-warning);
  vertical-align: 0.1em;
}

.ui-cal-event-check {
  color: var(--c-success);
  font-weight: 700;
}

/* A hold whose time came unconfirmed: grey, dashed, nothing live. */
.ui-cal-event.is-lapsed {
  background: var(--c-surface-2);
  outline-color: var(--c-text-4);
  color: var(--c-text-3);
}

/* The visit a selected drive belongs to. */
.ui-cal-event.is-related:not(.is-selected) {
  outline: 2px solid color-mix(in srgb, var(--c-text-2) 45%, transparent);
  outline-offset: 0;
}

/* Under way now: a green ring and the live dot before the title. */
.ui-cal-event.is-live:not(.is-selected) {
  box-shadow: 0 0 0 1.5px var(--c-success);
}

.ui-cal-event-live {
  margin-right: var(--c-space-1);
  vertical-align: 0.1em;
}

.ui-calendar-count {
  margin-left: auto;
  font-size: var(--c-text-xs);
  font-weight: 500;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

.ui-calendar-now {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(var(--ui-cal-top) * var(--ui-cal-step));
  height: 2px;
  background: var(--c-danger);
  pointer-events: none;
}

.ui-calendar-now::before {
  content: '';
  position: absolute;
  left: calc(var(--c-space-1) * -1);
  top: -3px;
  width: var(--c-space-2);
  height: var(--c-space-2);
  border-radius: var(--c-radius-full);
  background: var(--c-danger);
}

/* ── Calendar strip ────────────────────────────────────────
   The phone's week: a row of days, the shown one a filled accent
   circle, today's number in the accent otherwise. */

.ui-calstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
}

.ui-calstrip-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-hair);
  padding: var(--c-space-1) 0;
  border-radius: var(--c-radius-md);
  color: var(--c-text-3);
  text-decoration: none;
}

.ui-calstrip-day:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: -2px;
}

.ui-calstrip-weekday {
  font-size: var(--c-text-xs);
  font-weight: 600;
}

.ui-calstrip-date {
  display: grid;
  place-items: center;
  width: calc(var(--c-space-7) + var(--c-space-hair));
  height: calc(var(--c-space-7) + var(--c-space-hair));
  border-radius: var(--c-radius-full);
  font-size: var(--c-text-lg);
  font-weight: 600;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.ui-calstrip-dot {
  width: 4px;
  height: 4px;
  border-radius: var(--c-radius-full);
  background: var(--c-text-3);
}

.ui-calstrip-dot.is-empty {
  visibility: hidden;
}

.ui-calstrip-day.is-today .ui-calstrip-date {
  color: var(--c-accent);
}

.ui-calstrip-day[aria-current='date'] .ui-calstrip-date {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

/* ── Inspector ─────────────────────────────────────────────
   The selected item on the rail's grey beside the screen; its groups
   are raised a step. Below 960px a bottom sheet (or gone). */

.ui-inspector {
  --c-control-fill: var(--c-raised);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--c-rail);
  box-shadow: inset var(--c-hairline) 0 0 var(--c-separator);
}

.ui-inspector .ui-group-list {
  background: var(--c-raised);
}

.ui-inspector .ui-group-list .ui-button--secondary {
  background: var(--c-surface);
}

.ui-inspector-grab {
  display: none;
}

.ui-inspector-close {
  position: absolute;
  top: var(--c-space-3);
  right: var(--c-space-3);
}

.ui-inspector-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-5);
  padding: var(--c-space-5);
}

.ui-inspector-head {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  padding-right: var(--c-space-6);
  min-width: 0;
}

.ui-inspector-head-text {
  min-width: 0;
}

.ui-inspector-title {
  margin: 0;
  font-size: var(--c-text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--c-leading-tight);
}

.ui-inspector-meta {
  margin: var(--c-space-hair) 0 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

@media (max-width: 960px) {
  .ui-inspector--hide {
    display: none;
  }

  /* The sheet holds still and its body scrolls, so the grab bar stays
     in reach; the drag to dismiss and the page's scroll lock are
     useSheetDrag's (InspectorSheet.tsx). */
  .ui-inspector.ui-inspector--sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--c-z-overlay);
    max-height: 60vh;
    overflow: hidden;
    overscroll-behavior: contain;
    will-change: transform;
    border-radius: var(--c-radius-xl) var(--c-radius-xl) 0 0;
    background: var(--c-bar);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: var(--c-shadow-popover);
  }

  .ui-inspector--sheet .ui-inspector-grab {
    position: relative;
    display: block;
    align-self: center;
    flex-shrink: 0;
    width: calc(var(--c-space-8) + var(--c-space-1));
    height: 5px;
    margin-top: var(--c-space-2);
    border-radius: var(--c-radius-full);
    background: var(--c-text-4);
  }

  /* A finger-sized target around the thin bar. */
  .ui-inspector--sheet .ui-inspector-grab::before {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--c-space-3)) calc(-1 * var(--c-space-7));
  }

  .ui-inspector--sheet .ui-inspector-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: var(--c-space-3);
    padding: var(--c-space-3) var(--c-space-4) calc(var(--c-space-5) + env(safe-area-inset-bottom));
  }

  .ui-inspector--sheet .ui-inspector-close {
    top: var(--c-space-2);
  }
}

/* ── Route ─────────────────────────────────────────────────
   The day as a road: a line down the left, round markers on it for
   the places, the drives between as muted legs, the red now marker. */

.ui-route {
  --ui-route-dot: var(--c-space-8);
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-route::before {
  content: '';
  position: absolute;
  left: calc(var(--ui-route-dot) / 2 - 1px);
  top: calc(var(--ui-route-dot) / 2);
  bottom: calc(var(--ui-route-dot) / 2);
  width: 2px;
  border-radius: 1px;
  background: var(--c-surface-2);
}

.ui-route-stop,
.ui-route-leg {
  position: relative;
  display: grid;
  grid-template-columns: var(--ui-route-dot) minmax(0, 1fr);
  column-gap: var(--c-space-3);
}

.ui-route-stop {
  align-items: start;
}

/* Two places with no drive between them still get a stretch of road. */
.ui-route-stop + .ui-route-stop {
  margin-top: var(--c-space-5);
}

.ui-route-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--ui-route-dot);
  height: var(--ui-route-dot);
  border-radius: var(--c-radius-full);
  background: var(--c-surface);
  color: var(--c-text-2);
  box-shadow: 0 0 0 3px var(--c-bg);
}

.ui-route-stop--done .ui-route-dot {
  background: var(--c-success);
  color: var(--c-on-accent);
}

.ui-route-stop--next .ui-route-dot {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

/* Under way: green, ringed in its own tint. */
.ui-route-stop--live .ui-route-dot {
  background: var(--c-success);
  color: var(--c-on-accent);
  box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 6px var(--c-success-tint);
}

.ui-route-body {
  min-width: 0;
}

.ui-route-leg {
  align-items: center;
  padding: var(--c-space-3) 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
}

.ui-route-leg-mark {
  z-index: 1;
  justify-self: center;
  display: inline-flex;
  padding: 3px 0;
  background: var(--c-bg);
  color: var(--c-text-3);
}

.ui-route-leg-text {
  min-width: 0;
}

.ui-route-leg--now {
  font-weight: 600;
  color: var(--c-danger);
}

.ui-route-leg--now .ui-route-leg-mark {
  padding: 0;
  background: none;
}

.ui-route-now {
  width: 10px;
  height: 10px;
  border-radius: var(--c-radius-full);
  background: var(--c-danger);
  box-shadow: 0 0 0 3px var(--c-bg);
}

.ui-route-place {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  min-height: var(--ui-route-dot);
  margin: 0;
  font-size: var(--c-text-md);
  color: var(--c-text-2);
}

.ui-route-place-time {
  font-weight: 600;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.ui-route-card {
  display: block;
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
}

.ui-route-card-head {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
  padding: var(--c-space-3);
  list-style: none;
}

summary.ui-route-card-head {
  cursor: pointer;
  border-radius: var(--c-radius-lg);
}

summary.ui-route-card-head::-webkit-details-marker {
  display: none;
}

summary.ui-route-card-head:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}

.ui-route-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--c-space-2);
  min-width: 0;
}

.ui-route-card-time {
  font-weight: 600;
  color: var(--c-text-2);
  font-variant-numeric: tabular-nums;
}

.ui-route-card-meta {
  order: 1;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.ui-route-card-title {
  order: 1;
  min-width: 0;
  font-size: var(--c-text-lg);
  font-weight: 600;
  color: var(--c-text);
}

.ui-route-card-sub {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.ui-route-card-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-1);
}

.ui-route-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  padding: 0 var(--c-space-3) var(--c-space-3);
}

/* The next stop: tinted, the time in the accent over its own line for
   the name. */
.ui-route-card--next {
  background: var(--c-accent-tint);
}

.ui-route-card--next .ui-route-card-time {
  color: var(--c-accent);
}

.ui-route-card--next .ui-route-card-title {
  order: 2;
  flex-basis: 100%;
  margin-top: var(--c-space-1);
}

/* Under way (a visit in progress): the green tint with a ring, the
   name on its own line as the next stop's; emphasised over it. */
.ui-route-card--live {
  background: var(--c-success-tint);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-success) 45%, transparent);
}

.ui-route-card--live .ui-route-card-time {
  color: var(--c-success);
}

.ui-route-card--live .ui-route-card-title {
  order: 2;
  flex-basis: 100%;
  margin-top: var(--c-space-1);
}

/* Done: bare, collapsed to its outcome. */
.ui-route-card--done {
  background: transparent;
}

.ui-route-card--done > .ui-route-card-head {
  padding: 6px 0;
}

.ui-route-card--done > .ui-route-card-body {
  padding: 0 0 var(--c-space-3);
}

/* ── Slot picker ───────────────────────────────────────────
   A strip of days, then the day's times as pills. The chosen day and
   time are the accent; a day with nothing open is greyed. The day's
   panel (its date heading and times) is keyed by the day, so it fades
   in on every switch, even between two days with the same times. */

.ui-slots {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  min-width: 0;
}

.ui-slots-days {
  display: flex;
  gap: var(--c-space-1);
  overflow-x: auto;
  padding: var(--c-space-hair);
  scrollbar-width: thin;
}

.ui-slots-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-hair);
  flex: none;
  min-width: calc(var(--c-space-8) + var(--c-space-5));
  padding: var(--c-space-2);
  border: 0;
  border-radius: var(--c-radius-control);
  background: var(--c-raised);
  box-shadow: 0 0 0 var(--c-hairline) var(--c-control-edge);
  color: var(--c-text);
  font: inherit;
  cursor: pointer;
  transition:
    background-color var(--c-motion-fast) var(--c-ease),
    color var(--c-motion-fast) var(--c-ease),
    box-shadow var(--c-motion-fast) var(--c-ease);
}

.ui-slots-day:hover:not(:disabled) {
  background: var(--c-hover);
}

.ui-slots-day:disabled {
  cursor: default;
  opacity: 0.45;
}

.ui-slots-day[aria-checked='true'] {
  background: var(--c-accent);
  color: var(--c-on-accent);
  box-shadow:
    0 0 0 var(--c-hairline) var(--c-accent),
    0 1px 3px var(--c-shadow);
}

.ui-slots-weekday {
  font-size: var(--c-text-xs);
  font-weight: 500;
}

.ui-slots-date {
  font-size: var(--c-text-md);
  font-weight: 600;
  white-space: nowrap;
}

.ui-slots-count {
  font-size: var(--c-text-2xs);
  color: var(--c-text-3);
}

.ui-slots-day[aria-checked='true'] .ui-slots-count {
  color: var(--c-on-accent);
}

.ui-slots-panel {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  min-width: 0;
  animation: ui-slots-in var(--c-motion) var(--c-ease) both;
}

.ui-slots-heading {
  margin: 0;
  font-size: var(--c-text-md);
  font-weight: 600;
  color: var(--c-text);
}

/* Windshield time (2026-10-02): the day's shop drive, said once. */
.ui-slots-windshield {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
}

.ui-slots-windshield-label {
  margin: 0;
  font-size: var(--c-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.ui-slots-windshield-text {
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

/* The leg map (2026-10-07): the drive the hint names, drawn small under
   the sentence, the block's width at 2:1, rounded like the console's
   other maps. RouteMap's frame (field.css .screen-field-map) brings the
   shimmer and the fade; this gives it its shape everywhere the picker
   sits, over the field app's phone strip and tablet sizes. A wide picker
   (the calendar's, the queue's) keeps it at the side column's width:
   the image is drawn for that size, and it supports the sentence. */
.ui-slots-windshield .ui-slots-map {
  width: 100%;
  max-width: var(--c-side-width);
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 2 / 1;
  margin-top: var(--c-space-1);
  border-radius: var(--c-radius-md);
}

@keyframes ui-slots-in {
  from {
    opacity: 0;
    transform: translateY(var(--c-space-1));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ui-slots-ghost {
  min-height: var(--c-control-lg);
  border-radius: var(--c-radius-full);
  background: var(--c-surface-2);
  animation: ui-pulse 1.4s var(--c-ease) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ui-slots-panel,
  .ui-slots-ghost {
    animation: none;
  }
}

.ui-slots-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--c-space-8) * 2.75), 1fr));
  gap: var(--c-space-2);
}

.ui-slots-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--c-space-hair);
  min-height: var(--c-control-lg);
  padding: var(--c-space-1) var(--c-space-2);
  border: 0;
  border-radius: var(--c-radius-full);
  background: var(--c-accent-tint);
  color: var(--c-accent);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.ui-slots-time:hover {
  background: color-mix(in srgb, var(--c-accent) 18%, var(--c-bg));
}

.ui-slots-time[aria-checked='true'] {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

/* A grid time the rep cannot take (2026-10-02): muted, never tappable. */
.ui-slots-time:disabled {
  background: var(--c-surface-2);
  color: var(--c-text-3);
  cursor: default;
}

.ui-slots-time:disabled:hover {
  background: var(--c-surface-2);
}

.ui-slots-time:focus-visible,
.ui-slots-day:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}

.ui-slots-clock {
  font-size: var(--c-text-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ui-slots-detail {
  font-size: var(--c-text-2xs);
  white-space: nowrap;
}

.ui-slots-empty,
.ui-slots-zone {
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.ui-slots-zone {
  color: var(--c-text-3);
}

/* Route hints (Take A, 2026-10-02): a time next to a visit the rep
   already has near the lead. The chosen day says where the rep will be
   (the hint), offers the times that touch that visit (the suggested
   chips), and tints the same times in the full list. A day with a nearby
   visit gets a dot in the strip, explained once under it. Chosen, a
   suggested time takes the accent like any other. */
.ui-slots-time.is-near {
  --ui-slots-near: color-mix(in srgb, var(--c-success) 72%, var(--c-text));
  background: var(--c-success-tint);
  color: var(--ui-slots-near);
  box-shadow: inset 0 0 0 var(--c-hairline) color-mix(in srgb, var(--c-success) 45%, transparent);
}

.ui-slots-time.is-near:hover {
  background: color-mix(in srgb, var(--c-success) 22%, var(--c-bg));
}

.ui-slots-time.is-near[aria-checked='true'],
.ui-slots-suggest-chip[aria-checked='true'] {
  background: var(--c-accent);
  color: var(--c-on-accent);
  box-shadow: none;
}

.ui-slots-count {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-hair);
}

.ui-slots-near-dot {
  width: calc(var(--c-space-1) + var(--c-space-hair));
  height: calc(var(--c-space-1) + var(--c-space-hair));
  flex: none;
  border-radius: var(--c-radius-full);
  background: var(--c-success);
}

.ui-slots-day[aria-checked='true'] .ui-slots-near-dot {
  background: var(--c-on-accent);
}

.ui-slots-strip-legend {
  display: flex;
  align-items: center;
  gap: var(--c-space-1);
  margin: calc(-1 * var(--c-space-1)) 0 0;
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
}

.ui-slots-subhead {
  margin: var(--c-space-1) 0 0;
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-text-2);
}

.ui-slots-icon {
  width: var(--c-space-4);
  height: var(--c-space-4);
  flex: none;
  fill: currentColor;
}

/* The day's hint, and the better day's (same shape, with its link). */
.ui-slots-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-2);
  padding: var(--c-space-3);
  border-radius: var(--c-radius-lg);
  background: var(--c-success-tint);
  color: color-mix(in srgb, var(--c-success) 72%, var(--c-text));
}

.ui-slots-hint-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--c-space-hair);
  min-width: 0;
  margin: 0;
  font-size: var(--c-text-md);
  color: var(--c-text);
}

.ui-slots-hint-lead {
  font-weight: 600;
}

.ui-slots-hint-more {
  color: var(--c-text-2);
}

.ui-slots-hint-go {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.ui-slots-hint-go:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.ui-slots-suggest {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--c-space-8) * 4.5), 1fr));
  gap: var(--c-space-2);
}

.ui-slots-suggest-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--c-space-hair);
  min-height: var(--c-tap);
  padding: var(--c-space-2) var(--c-space-3);
  border: 0;
  border-radius: var(--c-radius-lg);
  background: var(--c-raised);
  box-shadow: inset 0 0 0 var(--c-hairline) color-mix(in srgb, var(--c-success) 55%, transparent);
  color: color-mix(in srgb, var(--c-success) 72%, var(--c-text));
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.ui-slots-suggest-chip:hover:not([aria-checked='true']) {
  background: var(--c-success-tint);
}

.ui-slots-suggest-chip:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}

.ui-slots-suggest-chip .ui-slots-clock {
  font-size: var(--c-text-lg);
}

.ui-slots-suggest-why {
  font-size: var(--c-text-xs);
  color: var(--c-text-2);
}

.ui-slots-suggest-chip[aria-checked='true'] .ui-slots-suggest-why {
  color: var(--c-on-accent);
}

.ui-slots.is-loading .ui-slots-times {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Action item ───────────────────────────────────────────
   A row you act on in place: who and the wait, one line of what, the
   action bar. The red dot on the wait is the row's only colour. */

.ui-action-item {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-2);
  padding: var(--c-space-3) var(--c-space-4);
  min-width: 0;
}

.ui-action-item-top {
  display: flex;
  align-items: baseline;
  gap: var(--c-space-2);
  min-width: 0;
}

.ui-action-item-name {
  /* The person before the tenant: the name keeps its room (up to most of
     the line) and the grey context ellipsizes first. */
  flex: 0 0 auto;
  max-width: 70%;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  color: var(--c-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.ui-action-item-name:hover {
  color: var(--c-accent);
}

.ui-action-item-context {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-action-item-wait {
  flex: none;
  margin-left: auto;
  font-size: var(--c-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-3);
  white-space: nowrap;
}

/* Its thread is open beside the list (the queue's drawer): the soft
   accent tint a selected ListRow takes, the text its normal colour. */
.ui-action-item.is-current {
  background: var(--c-accent-tint);
}

.ui-action-item.is-urgent .ui-action-item-wait {
  font-weight: 600;
  color: var(--c-danger);
}

.ui-action-item.is-urgent .ui-action-item-wait::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: var(--c-radius-full);
  background: var(--c-danger);
  vertical-align: 1px;
}

.ui-action-item-text {
  margin: 0;
  font-size: var(--c-text-sm);
  line-height: var(--c-leading);
  color: var(--c-text-2);
  overflow-wrap: anywhere;
}

.ui-action-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-2);
}

/* A leading control (the queue's tick, db/162): its own column, the
   row's three parts stacked beside it. */
.ui-action-item.has-leading {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--c-space-3);
}

.ui-action-item-leading {
  flex: none;
  margin-top: -2px;
}

.ui-action-item-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--c-space-2);
  min-width: 0;
}

/* "Open" and its kind: pushed to the far right of the bar. */
.ui-action-item-end {
  margin-left: auto;
}

.ui-action-quote {
  margin: 0;
  padding: var(--c-space-2) var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-raised);
  box-shadow: 0 0 0 var(--c-hairline) var(--c-control-edge);
  font-size: var(--c-text-sm);
  line-height: var(--c-leading);
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.ui-action-quote-flag {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: var(--c-text-xs);
  font-weight: 500;
  color: var(--c-warning);
}

.ui-action-quote-flag .ui-icon {
  flex: none;
  margin-top: 1px;
}

/* ── Lane ──────────────────────────────────────────────────
   A Group with a cap and a collapse: the title is the toggle, "Show N
   more" is the fill's last row. */

.ui-lane {
  container-type: inline-size;
}

.ui-lane .ui-group-head {
  gap: var(--c-space-2);
}

/* The lane's name never clips ("Call ba"): the title keeps its width and
   the grey hint gives way, then goes when the lane is narrow. */
.ui-lane .ui-group-title {
  flex: 1 0 auto;
}

@container (max-width: 420px) {
  .ui-lane-hint {
    display: none;
  }
}

.ui-lane-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: -2px 0 -2px -4px;
  padding: 2px 4px;
  border: 0;
  border-radius: var(--c-radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 720px) {
  .ui-lane-toggle {
    min-height: var(--c-control-sm);
  }
}

.ui-lane-toggle:hover {
  background: var(--c-hover);
}

.ui-lane-toggle:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}

.ui-lane-toggle .ui-icon {
  flex: none;
  color: var(--c-text-3);
}

.ui-lane-chevron {
  transition: transform var(--c-motion-fast) var(--c-ease);
}

.ui-lane.is-collapsed .ui-lane-chevron {
  transform: rotate(-90deg);
}

.ui-lane-urgent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-danger);
  white-space: nowrap;
}

.ui-lane-urgent::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--c-radius-full);
  background: var(--c-danger);
}

.ui-lane-hint {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-lane-more {
  display: flex;
}

.ui-lane-more-button {
  flex: 1;
  padding: var(--c-space-2) var(--c-space-4);
  border: 0;
  background: none;
  color: var(--c-accent);
  font: inherit;
  font-size: var(--c-text-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.ui-lane-more-button:hover {
  background: var(--c-hover);
}

.ui-lane-more-button:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: -2px;
}

/* ── Pane list (a split view's list: three lines a row) ─── */

.ui-pane-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-pane-list-head {
  padding: var(--c-space-3) var(--c-space-2) var(--c-space-1);
  font-size: var(--c-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.ui-pane-row-item {
  min-width: 0;
}

.ui-pane-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: var(--c-space-hair) var(--c-space-2);
  width: 100%;
  padding: calc(var(--c-space-2) + 1px) var(--c-space-3) calc(var(--c-space-2) + var(--c-space-hair)) var(--c-space-2);
  border: 0;
  border-radius: var(--c-radius-md);
  background: none;
  color: var(--c-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--c-motion-fast) var(--c-ease);
}

.ui-pane-row-item + .ui-pane-row-item .ui-pane-row {
  box-shadow: 0 calc(-1 * var(--c-hairline)) 0 var(--c-separator);
}

.ui-pane-row:hover {
  background: var(--c-hover);
}

.ui-pane-row.is-selected,
.ui-pane-row.is-selected:hover {
  background: var(--c-accent-tint);
}

.ui-pane-row-item + .ui-pane-row-item .ui-pane-row.is-selected,
.ui-pane-row-item:has(.is-selected) + .ui-pane-row-item .ui-pane-row,
.ui-pane-row-item + .ui-pane-row-item .ui-pane-row:hover,
.ui-pane-row-item:has(.ui-pane-row:hover) + .ui-pane-row-item .ui-pane-row {
  box-shadow: none;
}

.ui-pane-row-dot {
  margin-top: calc(var(--c-space-1) + var(--c-space-hair));
}

.ui-pane-row-title {
  min-width: 0;
  overflow: hidden;
  font-size: var(--c-text-md);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-pane-row-detail {
  font-weight: 400;
  color: var(--c-text-3);
}

.ui-pane-row-trailing {
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
  white-space: nowrap;
}

.ui-pane-row-trailing--warning {
  font-weight: 600;
  color: var(--c-warning);
}

.ui-pane-row-line,
.ui-pane-row-meta {
  grid-column: 2 / 4;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-pane-row-line {
  font-size: var(--c-text-md);
}

.ui-pane-row-meta {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.ui-pane-row.is-muted .ui-pane-row-line {
  color: var(--c-text-2);
}

/* ── Group, the Settings reading (Group settings) ─────── */

/* A person's card: the label in ink takes the width, the value (or a
   small Select, a Pill) sits at the right edge on one line. */
.ui-group--settings .ui-row {
  align-items: center;
  min-height: 40px;
}

/* The label keeps its word whole and the value gives way (its ellipsis
   below): rows break anywhere, so a long unbroken value (an email) used to
   squeeze the label to one letter per line. */
.ui-group--settings .ui-row-label {
  flex: 1 0 auto;
  color: var(--c-text);
}

.ui-group--settings .ui-row-value {
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A small control beside a label keeps its own width at the right. */
.ui-group--settings .ui-row-label + .ui-field {
  flex: none;
}

.ui-group--settings .ui-row--muted .ui-row-value {
  color: var(--c-text-2);
}

/* ── Sidebar list (SidebarList) ───────────────────────── */

.ui-sidebar-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ui-sidebar-list-section {
  min-width: 0;
}

.ui-sidebar-list-title {
  padding: var(--c-space-3) var(--c-space-2) var(--c-space-1);
  font-size: var(--c-text-xs);
  font-weight: 600;
  color: var(--c-text-3);
}

.ui-sidebar-list-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-sidebar-list-item {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
  min-width: 0;
  padding: 6px var(--c-space-2);
  border-radius: var(--c-radius-md);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.ui-sidebar-list-item:hover {
  background: var(--c-hover);
}

.ui-sidebar-list-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.ui-sidebar-list-item[aria-current='true'] {
  background: var(--c-accent-tint);
}

.ui-sidebar-list-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ui-sidebar-list-name,
.ui-sidebar-list-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-sidebar-list-name {
  font-weight: 500;
}

.ui-sidebar-list-sub {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.ui-sidebar-list-empty {
  margin: 0;
  padding: var(--c-space-4) var(--c-space-2);
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
}

/* ── Profile header (ProfileHeader) ───────────────────── */

.ui-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--c-space-2);
  text-align: center;
}

.ui-profile-name {
  font-size: var(--c-text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ui-profile-line {
  margin: 0;
  color: var(--c-text-2);
}

.ui-profile-extra {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--c-space-2);
  margin-top: var(--c-space-1);
}

/* ── SettingsNav (a thing's own settings sidebar) ─────────
   System Settings' sidebar: small grey section titles, rows with a
   glyph tile, the current one filled with the accent. At phone width
   it becomes grouped lists (the screen moves it under the pane) and
   the current row hides. */

.ui-settings-nav {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-4);
  min-width: 0;
}

.ui-settings-nav-section {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
}

.ui-settings-nav-title {
  padding: 0 var(--c-space-2);
  font-size: var(--c-text-sm);
  font-weight: 600;
  color: var(--c-text-2);
}

.ui-settings-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
}

.ui-settings-nav-item {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  min-height: 30px;
  padding: 4px var(--c-space-2);
  border-radius: var(--c-radius-sm);
  color: var(--c-text);
  font-size: var(--c-text-md);
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.ui-settings-nav-item:hover {
  background: var(--c-hover);
}

.ui-settings-nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.ui-settings-nav-item[aria-current='page'] {
  background: var(--c-accent-tint);
}

.ui-settings-nav-glyph {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--c-radius-sm);
  background: var(--c-surface);
  color: var(--c-text-2);
}

.ui-settings-nav-item[aria-current='page'] .ui-settings-nav-glyph {
  color: var(--c-accent);
}

.ui-settings-nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-settings-nav-count {
  flex: none;
  font-size: var(--c-text-sm);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .ui-settings-nav-title {
    padding: 0 var(--c-space-3) 2px;
  }

  .ui-settings-nav-list {
    gap: 0;
    border-radius: var(--c-radius-lg);
    background: var(--c-surface);
    overflow: hidden;
  }

  .ui-settings-nav-entry {
    position: relative;
  }

  .ui-settings-nav-entry + .ui-settings-nav-entry::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--c-space-3);
    right: 0;
    height: var(--c-hairline);
    background: var(--c-separator);
  }

  .ui-settings-nav-entry:has([aria-current='page']) {
    display: none;
  }

  .ui-settings-nav-entry:has([aria-current='page']) + .ui-settings-nav-entry::before {
    display: none;
  }

  .ui-settings-nav-section:not(:has(.ui-settings-nav-entry:not(:has([aria-current='page'])))) {
    display: none;
  }

  .ui-settings-nav-item {
    min-height: 44px;
    padding: var(--c-space-2) var(--c-space-3);
    border-radius: 0;
  }

  .ui-settings-nav-glyph {
    background: transparent;
  }
}

/* ── SettingRow (one setting, its control in the row) ───── */

.ui-setting {
  flex-wrap: wrap;
  align-items: center;
  min-height: 44px;
  row-gap: var(--c-space-1);
}

.ui-setting-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ui-setting-label {
  font-size: var(--c-text-md);
  font-weight: 500;
  color: var(--c-text);
}

.ui-setting-desc {
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
}

.ui-setting-control {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
  flex: none;
  margin-left: auto;
  max-width: 100%;
}

.ui-setting--wide .ui-setting-control {
  flex: 1 0 100%;
  margin-left: 0;
}

.ui-setting-status {
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
  white-space: nowrap;
}

.ui-setting-value {
  font-weight: 500;
  color: var(--c-text);
  text-align: right;
}

.ui-setting-error {
  flex-basis: 100%;
  font-size: var(--c-text-xs);
  color: var(--c-danger);
}

.ui-setting-unit {
  min-width: 2ch;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
  white-space: nowrap;
}

.ui-setting-input {
  flex: none;
}

.ui-setting-input--sm {
  width: 72px;
  text-align: right;
}

.ui-setting-input--md {
  width: 148px;
  text-align: right;
}

.ui-setting-input--lg {
  width: 248px;
}

.ui-setting-control .ui-select {
  width: auto;
  max-width: 220px;
}

@media (max-width: 720px) {
  .ui-setting-input--lg {
    width: 100%;
  }

  .ui-setting-control:has(.ui-setting-input--lg) {
    flex: 1 0 100%;
    margin-left: 0;
  }
}

/* ── SourceList (the Notes sidebar) ────────────────────── */

.ui-source-list {
  min-width: 0;
}

.ui-source-list-items {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
}

.ui-source-item {
  display: flex;
  flex-direction: column;
  gap: var(--c-space-hair);
  padding: var(--c-space-2) var(--c-space-3);
  border-radius: var(--c-radius-md);
  color: var(--c-text);
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.ui-source-item:hover {
  background: var(--c-hover);
}

.ui-source-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-focus);
}

.ui-source-item[aria-current='page'] {
  background: var(--c-raised);
  box-shadow: 0 1px 2px var(--c-shadow);
}

.ui-source-item-top {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
}

.ui-source-item-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.ui-source-item-sub {
  overflow: hidden;
  font-size: var(--c-text-sm);
  color: var(--c-text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-source-item-sub.is-empty {
  font-style: italic;
  color: var(--c-text-3);
}

/* ── StatStrip ─────────────────────────────────────────────
   A few numbers in one fill, hairlines between; 4 across, 2x2 on a phone. */
.ui-statstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-radius: var(--c-radius-md);
  background: var(--c-group-fill);
}

.ui-statstrip-item {
  min-width: 0;
  padding: var(--c-space-2) var(--c-space-3);
}

.ui-statstrip-item + .ui-statstrip-item {
  box-shadow: inset var(--c-hairline) 0 0 var(--c-separator);
}

.ui-statstrip-label {
  font-size: var(--c-text-xs);
  color: var(--c-text-3);
  white-space: nowrap;
}

.ui-statstrip-value {
  margin: 0;
  font-size: var(--c-text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-statstrip-value.is-empty {
  color: var(--c-text-4);
}

.ui-statstrip-detail {
  font-size: var(--c-text-xs);
  font-weight: 400;
  color: var(--c-text-3);
}

@media (max-width: 720px) {
  .ui-statstrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-statstrip-item:nth-child(3) {
    box-shadow: inset 0 var(--c-hairline) 0 var(--c-separator);
  }

  .ui-statstrip-item:nth-child(4) {
    box-shadow: inset var(--c-hairline) var(--c-hairline) 0 var(--c-separator);
  }
}

/* ── Waterfall ─────────────────────────────────────────────
   Stages on one time axis: label | track with a placed bar | time. */
.ui-waterfall {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 6px var(--c-space-2);
  margin: 0;
  padding: var(--c-space-3);
  border-radius: var(--c-radius-md);
  background: var(--c-group-fill);
  list-style: none;
  font-size: var(--c-text-sm);
}

.ui-waterfall-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

.ui-waterfall-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.ui-waterfall-label b {
  font-weight: 600;
}

.ui-waterfall-label .ui-icon {
  flex: none;
  color: var(--c-accent);
}

.ui-waterfall-row--sub .ui-waterfall-label {
  padding-left: var(--c-space-4);
  font-size: var(--c-text-xs);
  color: var(--c-text-2);
}

.ui-waterfall-row--sub .ui-waterfall-label .ui-mono {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-waterfall-track {
  position: relative;
  height: 8px;
  border-radius: var(--c-radius-full);
  background: var(--c-pressed);
}

.ui-waterfall-row--sub .ui-waterfall-track {
  height: 4px;
}

.ui-waterfall-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ui-wf-l);
  width: max(4px, var(--ui-wf-w));
  border-radius: var(--c-radius-full);
  background: var(--c-accent);
}

.ui-waterfall-value {
  text-align: right;
  font-size: var(--c-text-xs);
  color: var(--c-text-2);
  white-space: nowrap;
}

.ui-waterfall-row--sub .ui-waterfall-value {
  color: var(--c-text-3);
}

@media (max-width: 720px) {
  .ui-waterfall {
    grid-template-columns: 128px minmax(0, 1fr) 48px;
  }
}

/* ── TextDiff ──────────────────────────────────────────────
   A revision read in place: removed struck on red, added on green. */
.ui-diff {
  margin: 0;
  font-size: var(--c-text-md);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ui-diff-del {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--c-danger-tint);
  color: var(--c-text-3);
  text-decoration: line-through;
  text-decoration-color: var(--c-danger);
}

.ui-diff-ins {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--c-success-tint);
  text-decoration: none;
}

/* ── Kbd ───────────────────────────────────────────────────
   A key hint on its own, a small raised cap. */
.ui-kbd {
  display: inline-block;
  min-width: 16px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--c-raised);
  box-shadow: inset 0 0 0 var(--c-hairline) var(--c-control-edge);
  color: var(--c-text-3);
  font-family: var(--c-font-ui);
  font-size: var(--c-text-2xs);
  line-height: 1.4;
  text-align: center;
}

/* ── ScoreScale (a judgement's tiles: number and word) ──── */
.ui-score-scale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: var(--c-space-2);
}

.ui-score-scale-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  height: 60px;
  padding: 0 var(--c-space-1);
  border-radius: var(--c-radius-lg);
  background: var(--c-surface);
  color: var(--c-text);
  transition: background-color var(--c-motion-fast) var(--c-ease);
}

.ui-score-scale-tile:hover:not(:disabled) {
  background: var(--c-surface-2);
}

.ui-score-scale-tile:focus-visible {
  box-shadow: 0 0 0 3px var(--c-focus);
}

.ui-score-scale-tile:disabled {
  opacity: 0.6;
}

.ui-score-scale-n {
  font-size: var(--c-text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ui-score-scale-word {
  font-size: var(--c-text-xs);
  line-height: 1.15;
  color: var(--c-text-2);
  text-align: center;
}

.ui-score-scale-tile[aria-pressed='true'],
.ui-score-scale-tile[aria-pressed='true']:hover {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.ui-score-scale-tile[aria-pressed='true'] .ui-score-scale-word {
  color: inherit;
  opacity: 0.85;
}

@media (max-width: 720px) {
  .ui-score-scale-tile {
    height: 56px;
  }

  .ui-score-scale-word {
    font-size: var(--c-text-2xs);
  }
}

/* ── ProgressTrack (a batch as a thin segmented line) ────── */
.ui-progress-track {
  display: grid;
  grid-template-columns: repeat(var(--ui-steps, 1), minmax(0, 1fr));
  gap: 3px;
}

.ui-progress-track-step {
  height: 3px;
  border-radius: var(--c-radius-full);
  background: var(--c-surface-2);
}

.ui-progress-track-step.is-done {
  background: var(--c-accent);
}

.ui-progress-track-step.is-skipped {
  background: var(--c-text-4);
}

.ui-progress-track-step.is-current {
  background: var(--c-text);
}

@media (max-width: 720px) {
  .ui-progress-track {
    gap: 2px;
  }
}

/* The short version and the warmth (components/crm/ShortVersion.tsx):
   Dave's sentences for the visit, then a warmth row on the label grid.

     How warm   ▮▮▮▯  Warm
                booked, few questions

   The label sits in the same fixed column as a Row's label; the meter
   and its word share one line; the reason runs under them, aligned to
   the meter, never under the label. WarmthLine (meter over reason) is
   also the console's Qualification card value. */
/* The sentences: a little more air than a fact row, the text alone. */
.ui-short-version .ui-row.ui-short-version-body {
  padding-block: var(--c-space-3);
}

.ui-short-version-text {
  margin: 0;
  font-size: var(--c-text-message);
  line-height: var(--c-leading);
  white-space: pre-line;
}

.ui-short-version .ui-row.ui-short-version-warmth {
  display: grid;
  padding-block: var(--c-space-3);
  grid-template-columns: var(--c-row-label-w) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--c-space-3);
  flex-wrap: nowrap;
}

.ui-warmth-label {
  color: var(--c-text-2);
  line-height: var(--c-warmth-line);
}

.ui-warmth-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--c-space-hair);
  min-width: 0;
}

.ui-warmth {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
  min-height: var(--c-warmth-line);
}

.ui-warmth-bars {
  display: inline-flex;
  gap: var(--c-space-hair);
}

.ui-warmth-bars i {
  display: block;
  width: calc(var(--c-space-3) + var(--c-space-hair));
  height: calc(var(--c-space-1) + var(--c-space-hair));
  border-radius: var(--c-radius-full);
  /* Unlit: a tint of the ink, so it shows on any fill, light or dark. */
  background: color-mix(in srgb, var(--c-text) 14%, transparent);
}

.ui-warmth-word {
  font-weight: 600;
  line-height: var(--c-leading-tight);
}

.ui-warmth--hot .ui-warmth-bars i.on,
.ui-warmth--warm .ui-warmth-bars i.on {
  background: var(--c-warning);
}

.ui-warmth--hot .ui-warmth-word,
.ui-warmth--warm .ui-warmth-word {
  color: var(--c-warning);
}

.ui-warmth--cool .ui-warmth-bars i.on {
  background: var(--c-accent);
}

.ui-warmth--cool .ui-warmth-word {
  color: var(--c-accent);
}

.ui-warmth--cold .ui-warmth-bars i.on {
  background: var(--c-text-2);
}

.ui-warmth--cold .ui-warmth-word {
  color: var(--c-text-2);
}

.ui-warmth-reason {
  font-size: var(--c-text-md);
  line-height: var(--c-leading);
  color: var(--c-text-2);
  font-weight: 400;
}

/* A narrow phone: the label over the meter, the reason under it. */
@media (max-width: 360px) {
  .ui-short-version .ui-row.ui-short-version-warmth {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--c-space-1);
  }
}