/* ==========================================================================
   COMPONENTS — the F-UI library (design-system.md §8). Markup lives in
   templates/components/**; every class here is documented there and shown on
   /app/styleguide/. Semantic tokens only (see base.css header for the rules).

   Forced-state classes (.is-hover, .is-active, .is-focus) exist so the
   styleguide can show interactive states side by side; they mirror the real
   pseudo-classes exactly.
   ========================================================================== */

@layer components {

  /* Product-dependent component sizes (resolved on the scope element). */
  :root,
  [data-product="site"] {
    --btn-font-size: var(--text-md);
    --btn-font-size-sm: var(--text-md);
    --label-font-size: var(--text-md);
    --label-font-weight: var(--font-weight-medium);
  }

  [data-product="app"] {
    --btn-font-size: var(--text-base);
    --btn-font-size-sm: var(--text-sm);
    --label-font-size: var(--text-sm);
    --label-font-weight: var(--font-weight-semibold);
  }


  /* Headings inside components are UI text: always Inter, even in the public
     scope where bare h1–h4 are Newsreader. */
  :is(.card__title, .dialog__title, .state__title, .attention__title, .disclosure__heading,
      .timeline__day-heading, .panel-title, .page-header__title, .property-card__address,
      .alert__title, .steps__title) {
    font-family: var(--font-family-sans);
    letter-spacing: normal;
  }


  /* ======================================================================
     BUTTONS (§8.1)
     ====================================================================== */
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--color-ghost-text);
    --btn-border: transparent;
    --btn-bg-hover: var(--color-ghost-bg-hover);
    --btn-fg-hover: var(--btn-fg);
    --btn-bg-active: var(--color-surface-pressed);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: var(--space-1) var(--control-padding-x);
    border: var(--border-width) solid var(--btn-border);
    border-radius: var(--radius-control);
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-family-sans);
    font-size: var(--btn-font-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--motion-duration-fast) var(--motion-ease-standard),
      border-color var(--motion-duration-fast) var(--motion-ease-standard),
      color var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .btn:is(:hover, .is-hover) {
    background-color: var(--btn-bg-hover);
    color: var(--btn-fg-hover);
  }

  .btn:is(:active, .is-active) {
    background-color: var(--btn-bg-active);
  }

  .btn.is-focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .btn--primary {
    --btn-bg: var(--color-primary-bg);
    --btn-fg: var(--color-primary-text);
    --btn-bg-hover: var(--color-primary-bg-hover);
    --btn-bg-active: var(--color-primary-bg-active);
  }

  /* Gold CTA: charcoal text only (6.11:1); white on gold fails (3.22:1). */
  .btn--accent {
    --btn-bg: var(--color-accent-bg);
    --btn-fg: var(--color-accent-text);
    --btn-bg-hover: var(--color-accent-bg-hover);
    --btn-bg-active: var(--color-accent-bg-hover);
  }

  .btn--secondary {
    --btn-bg: var(--color-secondary-bg);
    --btn-fg: var(--color-secondary-text);
    --btn-border: var(--color-secondary-border);
    --btn-bg-hover: var(--color-secondary-bg-hover);
    --btn-bg-active: var(--color-surface-pressed);
  }

  .btn--ghost {
    --btn-fg: var(--color-ghost-text);
  }

  .btn--danger {
    --btn-bg: var(--color-danger-solid);
    --btn-fg: var(--color-on-solid);
    --btn-bg-hover: var(--color-danger-solid-hover);
    --btn-bg-active: var(--color-danger-solid-hover);
  }

  .btn--danger-ghost {
    --btn-fg: var(--color-danger-text);
    --btn-bg-hover: var(--color-danger-bg);
    --btn-bg-active: var(--color-danger-bg);
  }

  .btn--link {
    --btn-fg: var(--color-link);
    --btn-fg-hover: var(--color-link-hover);
    --btn-bg-hover: transparent;
    --btn-bg-active: transparent;
    min-height: 1.5rem;
    padding: 0;
    font-weight: var(--font-weight-medium);
    text-decoration-line: underline;
    text-decoration-thickness: var(--border-width);
    text-underline-offset: 0.2em;
  }

  .btn--link:is(:hover, .is-hover) {
    text-decoration-thickness: var(--border-width-strong);
  }

  /* Disabled: dedicated tokens, never opacity (§8). aria-disabled keeps the
     control focusable so its reason can be announced. */
  .btn:is(:disabled, [aria-disabled="true"]),
  .btn:is(:disabled, [aria-disabled="true"]):is(:hover, :active, .is-hover, .is-active) {
    background-color: var(--color-surface-pressed);
    border-color: transparent;
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }

  .btn:is(.btn--ghost, .btn--link, .btn--danger-ghost):is(:disabled, [aria-disabled="true"]),
  .btn:is(.btn--ghost, .btn--link, .btn--danger-ghost):is(:disabled, [aria-disabled="true"]):is(:hover, :active) {
    background-color: transparent;
  }

  .btn--secondary:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--color-border);
    background-color: transparent;
  }

  .btn--sm {
    min-height: var(--control-height-sm);
    padding-inline: calc(var(--control-padding-x) * 0.75);
    font-size: var(--btn-font-size-sm);
    gap: var(--space-1-5);
  }

  .btn--lg {
    min-height: var(--control-height-lg);
    padding-inline: calc(var(--control-padding-x) * 1.25);
  }

  .btn--block {
    width: 100%;
  }

  /* Icon-only: square at the control height; the label is the aria-label. */
  .btn--icon {
    width: var(--control-height);
    min-width: var(--control-height);
    padding: 0;
  }

  .btn--icon.btn--sm {
    width: var(--control-height-sm);
    min-width: var(--control-height-sm);
  }

  .btn--icon.btn--lg {
    width: var(--control-height-lg);
    min-width: var(--control-height-lg);
  }

  /* Loading: spinner replaces the leading icon, width locked by JS, repeat
     clicks ignored (aria-busy). */
  .btn__spinner {
    display: none;
  }

  .btn[aria-busy="true"] {
    cursor: progress;
  }

  .btn[aria-busy="true"] .btn__spinner {
    display: inline-flex;
  }

  .btn[aria-busy="true"] .btn__icon {
    display: none;
  }

  .btn[aria-busy="true"] .btn__spinner .icon {
    animation: ui-spin 0.9s linear infinite;
  }

  .btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .btn-group--end {
    justify-content: flex-end;
  }

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


  /* ======================================================================
     FORM FIELDS (§8.2)
     ====================================================================== */
  .field {
    display: grid;
    gap: var(--space-1-5);
    min-width: 0;
    align-content: start;
  }

  /* A file input would widen the field's `auto` column past a 320px screen (CR-W13-18). */
  .field:has(> input[type="file"]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .field__label,
  .fieldset__legend {
    color: var(--color-text);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    line-height: var(--leading-snug);
  }

  .fieldset__legend {
    margin-bottom: var(--space-2);
  }

  .field__optional {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
  }

  .field__hint {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-ui);
  }

  .field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1-5);
    color: var(--color-danger-text);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-ui);
  }

  .field__error .icon {
    margin-top: 0.1em;
  }

  .field__counter {
    justify-self: end;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: var(--font-numeric-tabular);
  }

  .field__counter.is-over {
    color: var(--color-danger-text);
    font-weight: var(--font-weight-semibold);
  }

  .form-grid {
    display: grid;
    align-content: start;
    gap: var(--space-5);
  }

  .form-row {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  /* ---- Text-like controls (inputs are 16px or larger: no iOS zoom) ---- */
  .control,
  .field :where(
    input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"]),
    select,
    textarea
  ) {
    display: block;
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: max(var(--control-font-size), 1rem);
    line-height: 1.4;
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
  }

  /* A native file input is as wide as its button + file name: keep it inside the field (320px reflow). */
  .field input[type="file"] {
    min-width: 0; /* no automatic grid minimum: the .field track stays as wide as the field */
    max-width: 100%;
  }

  .control:is(:hover, .is-hover),
  .field :where(input, select, textarea):is(:hover, .is-hover) {
    border-color: var(--color-text-secondary);
  }

  .control.is-focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .control::placeholder,
  .field :where(input, textarea)::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
  }

  /* Invalid: 2px danger border (drawn inset so nothing moves) + message. */
  .control[aria-invalid="true"],
  .field :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--color-danger-border);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-danger-border);
  }

  .control:disabled,
  .field :where(input, select, textarea):disabled {
    border-color: var(--color-border);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }

  /* Read-only: no border, sunken, still selectable. */
  .control[readonly],
  .field :where(input, textarea)[readonly] {
    border-color: transparent;
    background-color: var(--color-surface-sunken);
  }

  select.control,
  .field select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("../icons/lucide/chevron-down.e04d7cb60ba1.svg");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    cursor: pointer;
  }

  select.control[multiple],
  .field select[multiple] {
    padding-right: var(--space-3);
    background-image: none;
  }

  textarea.control,
  .field textarea {
    min-height: calc(3lh + var(--space-4));
    max-height: calc(12lh + var(--space-4));
    resize: vertical;
    field-sizing: content;
  }

  .field :where(input[type="date"], input[type="time"], input[type="datetime-local"]) {
    max-width: 16rem;
  }

  /* Leading icon inside a control (search). */
  .control-with-icon {
    position: relative;
  }

  .control-with-icon > .icon {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    translate: 0 -50%;
    color: var(--color-text-muted);
    pointer-events: none;
  }

  .control-with-icon > :is(input, .control) {
    padding-left: 2.5rem;
  }

  /* ---- Checkbox and radio (20px; whole label is the target) ---- */
  .check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--leading-ui);
    cursor: pointer;
  }

  .check__text {
    display: grid;
    gap: var(--space-0-5);
  }

  .check__description {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .check :where(input[type="checkbox"], input[type="radio"]),
  input.checkbox,
  input.radio {
    appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.1rem 0 0;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-1);
    background-color: var(--color-surface);
    cursor: pointer;
    transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
      border-color var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .check input[type="radio"],
  input.radio {
    border-radius: var(--radius-full);
  }

  .check:hover :where(input[type="checkbox"], input[type="radio"]):not(:disabled, :checked),
  .check.is-hover :where(input[type="checkbox"], input[type="radio"]):not(:disabled, :checked) {
    border-color: var(--color-text-secondary);
  }

  .check input.is-focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .check input[type="checkbox"]:is(:checked, :indeterminate),
  input.checkbox:is(:checked, :indeterminate) {
    border-color: var(--color-control-checked-bg);
    background-color: var(--color-control-checked-bg);
  }

  .check input[type="checkbox"]::before,
  input.checkbox::before {
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    background-color: var(--color-control-checked-mark);
    mask: url("../icons/lucide/check.f0a4b960a8ab.svg") center / contain no-repeat;
    transform: scale(0);
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .check input[type="checkbox"]:checked::before,
  input.checkbox:checked::before {
    transform: scale(1);
  }

  .check input[type="checkbox"]:indeterminate::before,
  input.checkbox:indeterminate::before {
    mask-image: url("../icons/lucide/minus.91b0819774ef.svg");
    transform: scale(1);
  }

  .check input[type="radio"]:checked,
  input.radio:checked {
    border-color: var(--color-control-checked-bg);
  }

  .check input[type="radio"]::before,
  input.radio::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-control-checked-bg);
    transform: scale(0);
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .check input[type="radio"]:checked::before,
  input.radio:checked::before {
    transform: scale(1);
  }

  .check :where(input[type="checkbox"], input[type="radio"])[aria-invalid="true"],
  .fieldset--invalid .check :where(input[type="checkbox"], input[type="radio"]):not(:checked) {
    border-color: var(--color-danger-border);
  }

  .check:has(input:disabled) {
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }

  .check :where(input[type="checkbox"], input[type="radio"]):disabled {
    border-color: var(--color-border);
    background-color: var(--color-surface-sunken);
    cursor: not-allowed;
  }

  .choice-list {
    display: grid;
    gap: var(--space-2);
  }

  .choice-list--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }

  /* Consent block: never pre-checked, kept separate from marketing (brief §7). */
  .consent {
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
  }

  .consent .check {
    font-size: var(--text-sm);
  }

  .consent__version {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .fieldset--invalid {
    padding-left: var(--space-4);
    border-left: var(--border-width-accent) solid var(--color-danger-border);
  }

  /* ---- File drop zone (a label wrapping a native file input) ---- */
  .dropzone {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-5);
    border: var(--border-width-strong) dashed var(--color-border-strong);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
      border-color var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .dropzone:hover,
  .dropzone.is-dragover {
    border-color: var(--color-border-accent);
    background-color: var(--color-surface-selected);
  }

  .dropzone:has(:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .dropzone__title {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
  }

  .dropzone__file {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
  }

  .dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }


  /* ======================================================================
     RADIO-CARDS — the hero intent picker (§8.3)
     ====================================================================== */
  .radio-cards__grid {
    container-type: inline-size;
  }

  .radio-cards__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  @container (min-width: 30em) {
    .radio-cards__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .radio-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title mark"
      "icon desc  mark";
    align-items: start;
    gap: var(--space-1) var(--space-3);
    min-height: 5.5rem;
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    cursor: pointer;
    transition:
      border-color var(--motion-duration-fast) var(--motion-ease-standard),
      box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
      background-color var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .radio-card:is(:hover, .is-hover) {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-xs);
  }

  .radio-card:has(:focus-visible),
  .radio-card.is-focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .radio-card__icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-card);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-accent);
  }

  .radio-card__title {
    grid-area: title;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
  }

  .radio-card__check {
    display: none;
    color: var(--color-text-accent);
  }

  .radio-card__description {
    grid-area: desc;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-ui);
  }

  .radio-card__mark {
    grid-area: mark;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
  }

  .radio-card__mark::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-control-checked-bg);
    transform: scale(0);
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
  }

  /* Selected: wash + 2px accent border (inset, no shift) + filled radio + check. */
  .radio-card:has(input:checked) {
    border-color: var(--color-border-accent);
    background-color: var(--color-surface-selected);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-border-accent);
  }

  .radio-card:has(input:checked) .radio-card__mark {
    border-color: var(--color-control-checked-bg);
  }

  .radio-card:has(input:checked) .radio-card__mark::before {
    transform: scale(1);
  }

  .radio-card:has(input:checked) .radio-card__check {
    display: inline-flex;
  }

  .radio-card:has(input:disabled) {
    border-color: var(--color-border-subtle);
    background-color: var(--color-surface-sunken);
    cursor: not-allowed;
  }

  .radio-card:has(input:disabled) :is(.radio-card__title, .radio-card__description) {
    color: var(--color-text-disabled);
  }

  .radio-cards--invalid .radio-card:not(:has(input:checked)) {
    border-color: var(--color-danger-border);
  }


  /* ======================================================================
     BADGES AND CHIPS (§4.7, §4.8, §8.4)
     ====================================================================== */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    min-height: var(--badge-height);
    padding: 0 var(--space-2);
    border: var(--border-width) solid transparent;   /* visible in forced colours */
    border-radius: var(--radius-badge);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    font-size: var(--badge-font-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
  }

  .badge .icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  .badge__label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .badge__meta {
    font-weight: var(--font-weight-medium);
  }

  /* A status badge that shrinks to its icon on narrow screens; the label stays for screen
     readers (sr_label) and as a tooltip. Used in the app top bar so it never overflows at 320 px. */
  @media (max-width: 39.99em) {
    .badge--collapsible .badge__label {
      display: none;
    }
  }

  .badge--info { background-color: var(--color-info-bg); color: var(--color-info-text); }
  .badge--success { background-color: var(--color-success-bg); color: var(--color-success-text); }
  .badge--warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); }
  .badge--danger { background-color: var(--color-danger-bg); color: var(--color-danger-text); }
  .badge--accent { background-color: var(--color-surface-selected); color: var(--color-text-accent); }
  .badge--inverse { background-color: var(--color-surface-inverse); color: var(--color-text-inverse); }
  .badge--danger-solid { background-color: var(--color-danger-solid); color: var(--color-on-solid); }
  .badge--featured { background-color: var(--color-accent-bg); color: var(--color-accent-text); }
  /* Solid chips (the mock's filled status chips): --color-on-solid on the *-solid fills is
     info 5.77:1 dark / 5.00:1 light, success 5.02 / 5.05 — AA in both themes (UI-DARK-3). */
  .badge--info-solid { border-color: transparent; background-color: var(--color-info-solid); color: var(--color-on-solid); }
  .badge--success-solid { border-color: transparent; background-color: var(--color-success-solid); color: var(--color-on-solid); }
  .badge--dashed { border-style: dashed; border-color: var(--color-border-strong); background-color: transparent; }
  .badge--demo {
    border-style: dashed;
    border-color: var(--color-border-strong);
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
  }

  /* Lead stages: text >= 6:1 on its badge; icon + label always. */
  .badge--stage-new { background-color: var(--stage-new-bg); color: var(--stage-new-text); }
  .badge--stage-assigned { background-color: var(--stage-assigned-bg); color: var(--stage-assigned-text); }
  .badge--stage-attempting { background-color: var(--stage-attempting-bg); color: var(--stage-attempting-text); }
  .badge--stage-connected { background-color: var(--stage-connected-bg); color: var(--stage-connected-text); }
  .badge--stage-qualified { background-color: var(--stage-qualified-bg); color: var(--stage-qualified-text); }
  .badge--stage-appointment { background-color: var(--stage-appointment-bg); color: var(--stage-appointment-text); }
  .badge--stage-negotiating { background-color: var(--stage-negotiating-bg); color: var(--stage-negotiating-text); }
  .badge--stage-nurture { background-color: var(--stage-nurture-bg); color: var(--stage-nurture-text); }
  .badge--stage-under-contract { background-color: var(--stage-under-contract-bg); color: var(--stage-under-contract-text); }
  .badge--stage-closed { background-color: var(--stage-closed-bg); color: var(--stage-closed-text); }
  .badge--stage-lost { background-color: var(--stage-lost-bg); color: var(--stage-lost-text); }

  /* Message / call status: the latest provider-confirmed state. Simulated and
     not-configured are warning-toned and dashed — never styled as success. */
  .chip--msg-draft { background-color: var(--msg-draft-bg); color: var(--msg-draft-text); border: var(--border-width) var(--msg-draft-border-style) var(--msg-draft-border); }
  .chip--msg-queued { background-color: var(--msg-queued-bg); color: var(--msg-queued-text); border: var(--border-width) var(--msg-queued-border-style) var(--msg-queued-border); }
  .chip--msg-sent { background-color: var(--msg-sent-bg); color: var(--msg-sent-text); border: var(--border-width) var(--msg-sent-border-style) var(--msg-sent-border); }
  .chip--msg-delivered { background-color: var(--msg-delivered-bg); color: var(--msg-delivered-text); border: var(--border-width) var(--msg-delivered-border-style) var(--msg-delivered-border); }
  .chip--msg-failed { background-color: var(--msg-failed-bg); color: var(--msg-failed-text); border: var(--border-width) var(--msg-failed-border-style) var(--msg-failed-border); }
  .chip--msg-replied { background-color: var(--msg-replied-bg); color: var(--msg-replied-text); border: var(--border-width) var(--msg-replied-border-style) var(--msg-replied-border); }
  .chip--msg-simulated { background-color: var(--msg-simulated-bg); color: var(--msg-simulated-text); border: var(--border-width) var(--msg-simulated-border-style) var(--msg-simulated-border); }
  .chip--msg-self-reported {
    background-color: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    border: var(--border-width) dashed var(--color-border-strong);
  }
  .chip--msg-neutral { background-color: var(--color-surface-sunken); color: var(--color-text-secondary); }

  /* Integration health (+ last-checked time). */
  .chip--health-success { background-color: var(--color-success-bg); color: var(--color-success-text); }
  .chip--health-warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); }
  .chip--health-danger { background-color: var(--color-danger-bg); color: var(--color-danger-text); }
  .chip--health-neutral {
    background-color: transparent;
    color: var(--color-text-secondary);
    border: var(--border-width) dashed var(--color-border-strong);
  }

  /* Count (20px pill). Screen readers get "3 overdue", not just "3". */
  .count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--space-1-5);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-inverse);
    color: var(--color-text-inverse);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: var(--font-numeric-tabular);
    line-height: 1;
  }

  .count--urgent {
    background-color: var(--color-danger-solid);
    color: var(--color-on-solid);
  }

  .count--quiet {
    background-color: var(--color-surface-pressed);
    color: var(--color-text);
  }

  /* Active filter chip with a remove button. */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--control-height-sm);
    padding-left: var(--space-3);
    border: var(--border-width) solid var(--color-border-accent);
    border-radius: var(--radius-full);
    background-color: var(--color-surface-selected);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  .chip__remove {
    display: inline-grid;
    place-items: center;
    width: calc(var(--control-height-sm) - var(--border-width-strong));
    height: calc(var(--control-height-sm) - var(--border-width-strong));
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    text-decoration: none;
  }

  .chip__remove:hover {
    background-color: var(--color-surface-selected-hover);
    color: var(--color-text);
  }


  /* ======================================================================
     CARDS, TILES (§8.5)
     ====================================================================== */
  .card {
    position: relative;
    min-width: 0;
    padding: var(--card-padding);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    color: var(--color-text);
  }

  .card--flush {
    padding: 0;
    overflow: hidden;
  }

  /* A flush card (a table or media edge to edge) still insets its title and footer note, and a
     table inside it drops its own frame so the card's border is the only one. */
  .card--flush > .card__header {
    margin-bottom: 0;
    padding: var(--card-padding) var(--card-padding) var(--space-3);
  }

  .card--flush > .card__footer {
    margin-top: 0;
    padding: var(--space-3) var(--card-padding) var(--card-padding);
  }

  .card--flush > .table-wrap {
    border-width: var(--border-width) 0 0;
    border-radius: 0;
  }

  .card--flush > .table-wrap:first-child {
    border-top-width: 0;
  }

  .card--sunken {
    border-color: var(--color-border-subtle);
    background-color: var(--color-surface-sunken);
  }

  .card--interactive {
    transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
      border-color var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .card--interactive:is(:hover, :focus-within, .is-hover) {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
  }

  .card:is(.card--rule-danger, .card--rule-warning, .card--rule-info, .card--rule-accent) {
    border-left-width: var(--border-width-accent);
  }

  /* (0,3,0) so the rule colour survives the interactive hover border. */
  .card.card--rule-danger:is(*, :hover) { border-left-color: var(--color-danger-border); }
  .card.card--rule-warning:is(*, :hover) { border-left-color: var(--color-warning-border); }
  .card.card--rule-info:is(*, :hover) { border-left-color: var(--color-info-border); }
  .card.card--rule-accent:is(*, :hover) { border-left-color: var(--color-border-accent); }

  .card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
  }

  .card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
  }

  .card__subtitle {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border-subtle);
  }

  /* Whole-card link: the title link's ::after covers the card. */
  .card__link {
    color: inherit;
    text-decoration: none;
  }

  .card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .card__link:focus-visible {
    outline: none;
  }

  .card:has(.card__link:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .card__link:hover {
    color: inherit;
    text-decoration: underline;
  }

  /* Count tile: the whole tile links to the filtered records. */
  .tile {
    display: grid;
    gap: var(--space-1);
    align-content: start;
    min-width: 0;
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
  }

  a.tile {
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
      box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
  }

  a.tile:is(:hover, .is-hover) {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
  }

  .tile__value {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: var(--font-numeric-tabular);
    line-height: 1.15;
  }

  .tile__label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  a.tile:hover .tile__label {
    color: var(--color-text);
    text-decoration: underline;
  }

  .tile__note {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-3);
  }


  /* ======================================================================
     TABLES (§8.6)
     ====================================================================== */
  .table-wrap {
    /* The containing block of absolutely positioned content (a badge's visually hidden text, a
       countdown's live region), so it scrolls with the table instead of widening a 320px page
       (CR-W13-18). */
    position: relative;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
  }

  .table-wrap:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-base);
    font-variant-numeric: var(--font-numeric-tabular);
  }

  .table caption {
    padding: var(--space-3) var(--table-cell-padding-x, var(--space-3));
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    text-align: left;
  }

  .table th {
    position: sticky;
    top: 0;
    z-index: var(--z-raised);
    padding: var(--space-2) var(--table-cell-padding-x, var(--space-3));
    border-bottom: var(--border-width) solid var(--color-border);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    font-size: var(--table-header-font-size, var(--text-sm));
    font-weight: var(--font-weight-semibold);
    text-align: left;
    white-space: nowrap;
  }

  .table td {
    height: var(--table-row-height, 3rem);
    padding: var(--space-2) var(--table-cell-padding-x, var(--space-3));
    border-bottom: var(--border-width) solid var(--color-border-subtle);
    vertical-align: middle;
  }

  .table tbody tr:last-child td {
    border-bottom: 0;
  }

  .table tbody tr:is(:hover, .is-hover) {
    background-color: var(--color-surface-hover);
  }

  .table tbody tr:is(.is-selected, [aria-selected="true"]) {
    background-color: var(--color-surface-selected);
  }

  .table tbody tr:is(.is-selected, [aria-selected="true"]) td:first-child {
    box-shadow: inset var(--border-width-accent) 0 0 var(--color-border-accent);
  }

  .table :is(th, td).num {
    text-align: right;
  }

  .table .table__check {
    width: 2.75rem;
  }

  .table .table__check .check {
    justify-content: center;
  }

  .table .table__actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
  }

  .table__primary {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
  }

  .table__secondary {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: inherit;
    text-decoration: none;
  }

  .table__sort:hover {
    color: var(--color-text);
    text-decoration: underline;
  }

  .table__sort .icon {
    color: var(--color-text-muted);
  }

  th[aria-sort="ascending"] .table__sort,
  th[aria-sort="descending"] .table__sort {
    color: var(--color-text);
  }

  th[aria-sort] .table__sort .icon {
    color: currentColor;
  }

  /* Report tables: sticky first column inside a labelled scroll region. */
  .table--sticky-first :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: var(--z-raised);
    background-color: var(--color-surface);
  }

  .table--sticky-first th:first-child {
    z-index: calc(var(--z-raised) + 1);
    background-color: var(--color-surface-sunken);
  }

  /* Phones: row labels wrap, and the sticky first column takes at most ~45 % of a narrow viewport
     (never less than 8rem), so it never grows wider than the scroll region: every value column can
     be scrolled into view and a focused link is never left under the column (WCAG 1.4.10 / 2.4.11;
     CR-W13-18, G3-51). Wide screens keep one-line labels. */
  @media (max-width: 47.99em) {
    .table th[scope="row"] {
      white-space: normal;
    }

    .table--sticky-first :is(th, td):first-child {
      width: 45vw;
      min-inline-size: 8rem;
      white-space: normal;
      overflow-wrap: anywhere;
    }
  }

  /* Phones: a .table--stack table turns each row into a small card, every cell on its own line
     with its column name (the cell's data-label) in front, so actions and badges never need
     sideways scrolling. */
  @media (max-width: 39.99em) {
    .table--stack thead {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }

    .table--stack,
    .table--stack :is(tbody, tr, th, td) {
      display: block;
      inline-size: 100%;
    }

    .table--stack tbody tr {
      padding: var(--space-3) var(--space-4);
      border-block-end: var(--border-width) solid var(--color-border-subtle);
    }

    .table--stack tbody tr:last-child {
      border-block-end: 0;
    }

    .table--stack tbody :is(th, td) {
      display: grid;
      grid-template-columns: minmax(6rem, 2fr) minmax(0, 3fr);
      gap: var(--space-2);
      align-items: center;
      justify-items: start;
      block-size: auto;
      padding: var(--space-1) 0;
      border: 0;
      background: none;
      text-align: start;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .table--stack tbody :is(.btn, .badge) {
      overflow-wrap: normal;
    }

    .table--stack tbody :is(th, td).num {
      text-align: start;
    }

    .table--stack tbody :is(th, td)[data-label]::before {
      content: attr(data-label);
      color: var(--color-text-secondary);
      font-size: var(--text-sm);
      font-weight: 400;
    }

    .table--stack tbody :is(th, td):not([data-label]) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .table-message {
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
    text-align: center;
  }

  .bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-height: var(--control-height-lg);
    padding: var(--space-1) var(--space-3);
    border: var(--border-width) solid var(--color-border-accent);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-selected);
  }

  .bulk-bar__count {
    margin-right: var(--space-2);
    font-weight: var(--font-weight-semibold);
  }

  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }

  /* A field in the bar keeps its 16px control but not the form's stacking margin; the bar wraps
     so a 320px page never scrolls sideways. */
  .filter-bar > .field {
    min-width: 0;
    margin: 0;
  }


  /* ======================================================================
     TABS (§8.7) and page-level nav tabs
     ====================================================================== */
  .tabs {
    min-width: 0;
  }

  .tabs__list {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-bottom: var(--border-width) solid var(--color-border);
    padding: var(--focus-ring-offset) var(--focus-ring-offset) 0;
    margin: calc(-1 * var(--focus-ring-offset)) calc(-1 * var(--focus-ring-offset)) 0;
  }

  .tabs__list::-webkit-scrollbar {
    display: none;
  }

  .tabs__list.is-scrollable-start { mask-image: linear-gradient(to right, transparent, currentColor 2rem); }
  .tabs__list.is-scrollable-end { mask-image: linear-gradient(to left, transparent, currentColor 2rem); }
  .tabs__list.is-scrollable-start.is-scrollable-end {
    mask-image: linear-gradient(to right, transparent, currentColor 2rem, currentColor calc(100% - 2rem), transparent);
  }

  .tabs__tab {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    min-height: var(--control-height);
    padding: 0 var(--space-3);
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-control) var(--radius-control) 0 0;
  }

  .tabs__tab:is(:hover, .is-hover) {
    color: var(--color-text);
    background-color: var(--color-surface-hover);
  }

  .tabs__tab:is([aria-selected="true"], [aria-current="page"]) {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
  }

  .tabs__tab:is([aria-selected="true"], [aria-current="page"])::after {
    content: "";
    position: absolute;
    right: var(--space-2);
    bottom: calc(-1 * var(--border-width));
    left: var(--space-2);
    height: var(--border-width-accent);
    border-radius: var(--border-width-accent) var(--border-width-accent) 0 0;
    background-color: var(--color-border-accent);
  }

  .tabs__tab:focus-visible {
    outline-offset: calc(-1 * var(--focus-ring-width));
  }

  .tabs__panel {
    padding-top: var(--space-5);
  }

  .tabs__panel:focus-visible {
    outline-offset: var(--space-1);
  }


  /* ======================================================================
     DISCLOSURE SECTIONS (heading + button; §9.3)
     ====================================================================== */
  .disclosure {
    border-bottom: var(--border-width) solid var(--color-border-subtle);
  }

  .disclosure__heading {
    font-size: var(--text-lg);
  }

  .disclosure__button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-2) 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    text-align: left;
  }

  .disclosure__button:hover .disclosure__title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .disclosure__chevron {
    color: var(--color-text-secondary);
    transition: transform var(--motion-duration-base) var(--motion-ease-standard);
  }

  .disclosure__button[aria-expanded="false"] .disclosure__chevron {
    transform: rotate(-90deg);
  }

  .disclosure__summary {
    margin-left: auto;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-regular);
  }

  .disclosure__panel {
    padding-bottom: var(--space-4);
  }

  .disclosure--empty .disclosure__heading {
    display: flex;
    align-items: center;
    min-height: var(--control-height);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
  }


  /* ======================================================================
     ALERTS, ERROR SUMMARY, INLINE NOTICES (§8.11, §8.13)
     ====================================================================== */
  .alert {
    --alert-bg: var(--color-info-bg);
    --alert-rule: var(--color-info-border);
    --alert-fg: var(--color-info-text);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-card);
    background-color: var(--alert-bg);
    box-shadow: inset var(--border-width-accent) 0 0 var(--alert-rule);
    color: var(--color-text);
  }

  .alert--success { --alert-bg: var(--color-success-bg); --alert-rule: var(--color-success-border); --alert-fg: var(--color-success-text); }
  .alert--warning { --alert-bg: var(--color-warning-bg); --alert-rule: var(--color-warning-border); --alert-fg: var(--color-warning-text); }
  .alert--danger { --alert-bg: var(--color-danger-bg); --alert-rule: var(--color-danger-border); --alert-fg: var(--color-danger-text); }
  .alert--neutral { --alert-bg: var(--color-surface-sunken); --alert-rule: var(--color-border-strong); --alert-fg: var(--color-text-secondary); }

  .alert__icon {
    grid-row: span 3;
    margin-top: 0.1em;
    color: var(--alert-fg);
  }

  .alert__title {
    color: var(--alert-fg);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
  }

  .alert__body {
    grid-column: 2;
    font-size: var(--text-base);
  }

  .alert__body > * + * {
    margin-top: var(--space-2);
  }

  .alert__actions {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .alert__reference {
    grid-column: 2;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
  }

  .alert--compact {
    padding: var(--space-2) var(--space-3);
  }

  .error-summary:focus-visible,
  .error-summary:focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .error-summary__list {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-5);
  }

  .error-summary__list a {
    color: var(--color-danger-text);
    font-weight: var(--font-weight-medium);
  }

  .error-summary__list a:hover {
    color: var(--color-text);
  }

  /* Communication restriction / inline notice: icon + text, never colour alone. */
  .notice {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-1-5);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-ui);
  }

  .notice .icon {
    margin-top: 0.1em;
  }

  .notice--warning { color: var(--color-warning-text); }
  .notice--danger { color: var(--color-danger-text); }
  .notice--success { color: var(--color-success-text); }
  .notice--info { color: var(--color-info-text); }


  /* ======================================================================
     TOASTS (§8.8)
     ====================================================================== */
  .toast-region {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    width: min(25rem, calc(100vw - 2 * var(--space-4)));
    pointer-events: none;
  }

  .toast {
    --toast-rule: var(--color-info-border);
    --toast-fg: var(--color-info-text);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-raised);
    box-shadow: inset var(--border-width-accent) 0 0 var(--toast-rule), var(--shadow-md);
    color: var(--color-text);
    pointer-events: auto;
    animation: ui-toast-in var(--motion-duration-base) var(--motion-ease-enter);
  }

  .toast--success { --toast-rule: var(--color-success-border); --toast-fg: var(--color-success-text); }
  .toast--warning { --toast-rule: var(--color-warning-border); --toast-fg: var(--color-warning-text); }
  .toast--danger { --toast-rule: var(--color-danger-border); --toast-fg: var(--color-danger-text); }

  .toast__icon {
    margin-top: 0.1em;
    color: var(--toast-fg);
  }

  .toast__message {
    padding-top: 0.05em;
    font-size: var(--text-base);
    line-height: var(--leading-ui);
  }

  .toast__action {
    grid-column: 2;
    justify-self: start;
  }

  .toast__close {
    margin: calc(-1 * var(--space-1)) 0;
  }

  .toast.is-leaving {
    opacity: 0;
    transition: opacity var(--motion-duration-fade) var(--motion-ease-exit);
  }

  .toast-region--static {
    position: static;
    width: auto;
    max-width: 25rem;
    pointer-events: auto;
  }

  /* Phones: bottom centre, above the CRM bottom tab bar. */
  @media (max-width: 47.99em) {
    .toast-region:not(.toast-region--static) {
      right: auto;
      bottom: calc(var(--bottom-nav-height, 0px) + var(--space-3) + env(safe-area-inset-bottom, 0px));
      left: 50%;
      translate: -50% 0;
    }
  }

  @keyframes ui-toast-in {
    from {
      opacity: 0;
      transform: translateY(var(--motion-distance-md));
    }
  }


  /* ======================================================================
     MODAL AND DRAWER (<dialog>, §8.9)
     ====================================================================== */
  .dialog {
    --dialog-width: 35rem;

    width: min(var(--dialog-width), calc(100vw - 2 * var(--space-4)));
    max-width: none;
    max-height: min(85vh, calc(100dvh - 2 * var(--space-4)));
    margin: auto;   /* centre in the top layer (the reset zeroes the UA margin) */
    padding: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-dialog);
    background-color: var(--color-surface-raised);
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
    overflow: hidden;
  }

  .dialog[open] {
    display: flex;
    flex-direction: column;
    animation: ui-dialog-in var(--motion-duration-slow) var(--motion-ease-enter);
  }

  .dialog::backdrop {
    background-color: var(--color-overlay);
  }

  .dialog--sm { --dialog-width: 25rem; }
  .dialog--md { --dialog-width: 35rem; }
  .dialog--lg { --dialog-width: 45rem; }

  .dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-2) var(--space-5);
  }

  .dialog__title {
    padding-top: var(--space-1);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
  }

  .dialog__body {
    flex: 1 1 auto;
    padding: var(--space-2) var(--space-5) var(--space-5);
    overflow-y: auto;
  }

  .dialog__body > * + * {
    margin-top: var(--space-4);
  }

  .dialog__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: var(--border-width) solid var(--color-border-subtle);
    background-color: var(--color-surface-raised);
  }

  .dialog__discard {
    padding: var(--space-3) var(--space-5);
    border-top: var(--border-width) solid var(--color-warning-border);
    background-color: var(--color-warning-bg);
  }

  .dialog__handle {
    display: none;
  }

  /* Drawer: slides from the right on desktop, bottom sheet on phones. */
  .dialog--drawer {
    --dialog-width: var(--drawer-width, 36rem);

    width: min(var(--dialog-width), 100vw);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    border-width: 0 0 0 var(--border-width);
    border-radius: 0;
  }

  .dialog--drawer[open] {
    animation-name: ui-drawer-in;
  }

  @media (max-width: 47.99em) {
    .dialog--drawer {
      width: 100vw;
      height: auto;
      max-height: 92dvh;
      margin: auto 0 0;
      border-width: var(--border-width) 0 0;
      border-radius: var(--radius-dialog) var(--radius-dialog) 0 0;
    }

    .dialog--drawer[open] {
      animation-name: ui-sheet-in;
    }

    .dialog--drawer .dialog__handle {
      display: block;
      width: 2.5rem;
      height: 0.25rem;
      margin: var(--space-2) auto 0;
      border-radius: var(--radius-full);
      background-color: var(--color-border-strong);
    }
  }

  html:has(dialog[open]:modal) {
    overflow: hidden;
  }

  @keyframes ui-dialog-in {
    from {
      opacity: 0;
      transform: scale(var(--motion-scale-from));
    }
  }

  @keyframes ui-drawer-in {
    from {
      opacity: 0;
      transform: translateX(calc(var(--motion-distance-md) * 4));
    }
  }

  @keyframes ui-sheet-in {
    from {
      opacity: 0;
      transform: translateY(calc(var(--motion-distance-md) * 4));
    }
  }


  /* ======================================================================
     MENU (details/summary) and TOOLTIP
     ====================================================================== */
  .menu {
    position: relative;
    display: inline-block;
  }

  .menu > summary {
    list-style: none;
  }

  .menu > summary::-webkit-details-marker {
    display: none;
  }

  .menu__panel {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    z-index: var(--z-dropdown);
    display: grid;
    min-width: 13rem;
    max-width: min(22rem, calc(100vw - 2 * var(--space-4)));
    padding: var(--space-1);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-raised);
    box-shadow: var(--shadow-md);
  }

  .menu--start .menu__panel {
    right: auto;
    left: 0;
  }

  .menu--up .menu__panel {
    top: auto;
    bottom: calc(100% + var(--space-1));
  }

  .menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--control-height-sm);
    padding: var(--space-1-5) var(--space-3);
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-snug);
    text-align: left;
    text-decoration: none;
  }

  .menu__item:is(:hover, .is-hover) {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
  }

  .menu__item:focus-visible {
    outline-offset: calc(-1 * var(--focus-ring-width));
  }

  .menu__item .icon {
    color: var(--color-text-secondary);
  }

  .menu__item--danger,
  .menu__item--danger .icon {
    color: var(--color-danger-text);
  }

  .menu__item[aria-disabled="true"] {
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }

  .menu__item[aria-disabled="true"]:hover {
    background: none;
  }

  .menu__reason {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
  }

  .menu__label {
    padding: var(--space-2) var(--space-3) var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
  }

  .menu__separator {
    height: var(--border-width);
    margin: var(--space-1) 0;
    background-color: var(--color-border-subtle);
  }

  .menu form {
    display: contents;
  }

  .tooltip {
    position: fixed;
    z-index: var(--z-tooltip);
    max-width: 18rem;
    padding: var(--space-1-5) var(--space-2);
    border-radius: var(--radius-2);
    background-color: var(--color-surface-inverse);
    box-shadow: var(--shadow-md);
    color: var(--color-text-inverse);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-snug);
  }


  /* ======================================================================
     PAGINATION (§8.10)
     ====================================================================== */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .pagination__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: var(--control-height-sm);
    min-height: var(--control-height-sm);
    padding: 0 var(--space-2);
    border-radius: var(--radius-control);
    color: var(--color-text);
    font-variant-numeric: var(--font-numeric-tabular);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
  }

  a.pagination__link:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
    text-decoration: underline;
  }

  .pagination__link[aria-current="page"] {
    background-color: var(--color-primary-bg);
    color: var(--color-primary-text);
    font-weight: var(--font-weight-semibold);
  }

  .pagination__link[aria-disabled="true"] {
    color: var(--color-text-disabled);
  }

  .pagination__ellipsis {
    padding: 0 var(--space-1);
  }

  .pagination__compact {
    display: none;
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
  }

  .pagination__per-page {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .pagination__per-page select {
    width: auto;
    min-height: var(--control-height-sm);
    padding-block: 0;
  }

  @media (max-width: 39.99em) {
    .pagination__page {
      display: none;
    }

    .pagination__compact {
      display: inline;
    }
  }


  /* ======================================================================
     SKELETONS (§8.12)
     ====================================================================== */
  .skeleton {
    display: grid;
    gap: var(--space-3);
  }

  .skeleton__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
  }

  .skeleton__lines {
    display: grid;
    gap: var(--space-2);
  }

  .skeleton__line,
  .skeleton__block,
  .skeleton__avatar {
    background-color: var(--color-skeleton);
    background-image: linear-gradient(90deg, var(--color-skeleton) 0%, var(--color-skeleton-shine) 50%, var(--color-skeleton) 100%);
    background-size: 200% 100%;
    animation: ui-shimmer var(--motion-skeleton-duration) linear infinite;
  }

  .skeleton__line {
    width: 80%;
    height: 0.75rem;
    border-radius: var(--radius-2);
  }

  .skeleton__line.w-60 { width: 60%; }
  .skeleton__line.w-70 { width: 70%; }
  .skeleton__line.w-90 { width: 90%; }
  .skeleton__line.w-40 { width: 40%; }

  .skeleton__block {
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-media);
  }

  .skeleton__avatar {
    width: var(--avatar-size-md);
    height: var(--avatar-size-md);
    border-radius: var(--radius-full);
  }

  .skeleton-card {
    padding: var(--card-padding);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
  }

  .skeleton__timeout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-secondary);
  }

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


  /* ======================================================================
     STATE PATTERNS (§8.13): empty, error, success, denied, not configured
     ====================================================================== */
  .state {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    max-width: 34rem;
    margin-inline: auto;
    padding: var(--space-10) var(--space-5);
    text-align: center;
  }

  .state--compact {
    padding: var(--space-6) var(--space-4);
  }

  .state--start {
    justify-items: start;
    margin-inline: 0;
    text-align: left;
  }

  .state__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-secondary);
  }

  .state--done .state__icon {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
  }

  .state--success .state__icon {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
  }

  .state__title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
  }

  .state__message {
    max-width: var(--measure-narrow);
    color: var(--color-text-secondary);
  }

  .state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
  }

  .state--start .state__actions {
    justify-content: flex-start;
  }

  .state__reference {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  /* Filtered-empty: plain text + "Clear filters", no illustration. */
  .state-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-5) var(--space-4);
    color: var(--color-text-secondary);
  }

  /* Partial success (imports, bulk). */
  .result-counts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
    gap: var(--space-3);
    margin: 0;
  }

  .result-counts > div {
    padding: var(--space-3);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
  }

  .result-counts dt {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .result-counts dd {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: var(--font-numeric-tabular);
  }


  /* ======================================================================
     STEPPER and PROGRESS (§8.11, §9.7)
     ====================================================================== */
  .stepper__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .stepper__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  .stepper__item + .stepper__item::before {
    content: "";
    width: 1.25rem;
    height: var(--border-width);
    background-color: var(--color-border-strong);
  }

  .stepper__marker {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: var(--font-numeric-tabular);
  }

  .stepper__item--done .stepper__marker {
    border-color: var(--color-control-checked-bg);
    background-color: var(--color-control-checked-bg);
    color: var(--color-control-checked-mark);
  }

  .stepper__item--done a {
    color: var(--color-text);
  }

  .stepper__item[aria-current="step"] {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
  }

  .stepper__item[aria-current="step"] .stepper__marker {
    border-color: var(--color-primary-bg);
    background-color: var(--color-primary-bg);
    color: var(--color-primary-text);
  }

  .stepper__compact {
    display: none;
    gap: var(--space-2);
  }

  .stepper__compact-label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
  }

  @media (max-width: 47.99em) {
    .stepper__list {
      display: none;
    }

    .stepper__compact {
      display: grid;
    }
  }

  .progress {
    display: grid;
    gap: var(--space-1-5);
  }

  .progress__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
  }

  .progress__label {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
  }

  .progress__text {
    color: var(--color-text-secondary);
    font-variant-numeric: var(--font-numeric-tabular);
  }

  .progress__bar {
    display: block;
    width: 100%;
    height: 0.5rem;
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-pressed);
    color: var(--color-text-secondary);   /* only the fallback text; the bar is painted below */
    appearance: none;
    overflow: hidden;
  }

  .progress__bar::-webkit-progress-bar {
    border-radius: var(--radius-full);
    background-color: var(--color-surface-pressed);
  }

  .progress__bar::-webkit-progress-value {
    border-radius: var(--radius-full);
    background-color: var(--color-control-checked-bg);
    transition: width var(--motion-duration-base) var(--motion-ease-standard);
  }

  .progress__bar::-moz-progress-bar {
    border-radius: var(--radius-full);
    background-color: var(--color-control-checked-bg);
  }

  /* Indeterminate (waiting): a slow shimmer, flat under reduced motion. */
  .progress__bar:indeterminate {
    background-image: linear-gradient(90deg, var(--color-surface-pressed) 0%, var(--color-border-accent) 50%, var(--color-surface-pressed) 100%);
    background-size: 200% 100%;
    animation: ui-shimmer var(--motion-skeleton-duration) linear infinite;
  }

  .progress__bar:indeterminate::-webkit-progress-bar {
    background: transparent;
  }

  .progress__bar:indeterminate::-moz-progress-bar {
    background: transparent;
  }


  /* ======================================================================
     TIMELINE (human vs automated vs self-reported; SCREENS R-03)
     ====================================================================== */
  .timeline {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .timeline__day {
    padding: var(--space-4) 0 var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
  }

  .timeline__day-heading {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }

  .timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-2) 0 var(--space-3);
  }

  .timeline__item::before {
    content: "";
    position: absolute;
    top: 2.75rem;
    bottom: 0;
    left: calc(1rem - var(--border-width) / 2);
    width: var(--border-width);
    background-color: var(--color-border-subtle);
  }

  .timeline__item:last-child::before {
    display: none;
  }

  .timeline__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
  }

  /* Non-colour cues: automated = dashed ring, self-reported = sunken + dashed. */
  .timeline__item--automation .timeline__icon,
  .timeline__item--system .timeline__icon,
  .timeline__item--provider .timeline__icon {
    border-style: dashed;
    background-color: var(--color-surface-sunken);
  }

  .timeline__item--self-reported .timeline__icon {
    border-style: dashed;
    border-color: var(--color-border-strong);
  }

  .timeline__main {
    min-width: 0;
    padding-top: var(--space-1);
  }

  .timeline__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
  }

  .timeline__title {
    font-weight: var(--font-weight-semibold);
  }

  .timeline__time {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: var(--font-numeric-tabular);
  }

  .timeline__body {
    margin-top: var(--space-1);
    color: var(--color-text);
  }

  .timeline__quote {
    margin-top: var(--space-1-5);
    padding: var(--space-2) var(--space-3);
    border-left: var(--border-width-strong) solid var(--color-border);
    background-color: var(--color-surface-sunken);
    border-radius: 0 var(--radius-2) var(--radius-2) 0;
    color: var(--color-text);
  }

  .timeline__meta {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .timeline__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .timeline__more {
    padding: var(--space-3) 0 0 calc(2rem + var(--space-3));
  }

  .actor-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-1-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-badge);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  .actor-tag--automation,
  .actor-tag--system,
  .actor-tag--provider,
  .actor-tag--ai,
  .actor-tag--self-reported {
    border-style: dashed;
    border-color: var(--color-border-strong);
  }


  /* ======================================================================
     ATTENTION LIST (grouped; §9.6, SCREENS O-01)
     ====================================================================== */
  .attention {
    --attention-rule: var(--color-border-strong);

    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: inset var(--border-width-accent) 0 0 var(--attention-rule);
  }

  .attention--danger { --attention-rule: var(--color-danger-border); }
  .attention--warning { --attention-rule: var(--color-warning-border); }
  .attention--info { --attention-rule: var(--color-info-border); }
  .attention--clear { --attention-rule: var(--color-success-border); }

  .attention__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    border-bottom: var(--border-width) solid var(--color-border-subtle);
  }

  .attention__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
  }

  .attention__updated {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .attention__groups {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .attention__group + .attention__group {
    border-top: var(--border-width) solid var(--color-border-subtle);
  }

  .attention__group .disclosure {
    border-bottom: 0;
  }

  .attention__group .disclosure__button {
    padding-inline: var(--space-5) var(--space-4);
    font-size: var(--text-base);
  }

  .attention__group .disclosure__panel {
    padding: 0 var(--space-4) var(--space-3) var(--space-5);
  }

  .attention__severity--danger { color: var(--color-danger-text); }
  .attention__severity--warning { color: var(--color-warning-text); }
  .attention__severity--info { color: var(--color-info-text); }

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

  .attention__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    background-color: var(--color-bg);
  }

  .attention__item-title {
    font-weight: var(--font-weight-semibold);
  }

  .attention__item-context {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .attention__item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  @container (min-width: 44rem) {
    .attention__item {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }
  }

  .attention__body {
    container-type: inline-size;
  }

  .attention__see-all {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
  }

  .attention__empty {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    color: var(--color-text-secondary);
  }

  .attention__empty .icon {
    color: var(--color-success-text);
  }


  /* ======================================================================
     AVATAR, PAGE HEADER, DESCRIPTION LIST, EYEBROW, SECTIONS
     ====================================================================== */
  .avatar {
    --avatar-size: var(--avatar-size-md);

    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-full);
    background-color: var(--color-surface-pressed);
    color: var(--color-text);
    font-size: max(var(--text-xs), calc(var(--avatar-size) * 0.38));
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    overflow: hidden;
  }

  .avatar--sm { --avatar-size: var(--avatar-size-sm); }
  .avatar--lg { --avatar-size: var(--avatar-size-lg); }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .profile-photo-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .profile-photo-card__preview .avatar {
    --avatar-size: 5rem;
    border: 2px solid var(--color-border-accent);
    box-shadow: 0 0 0 4px var(--color-surface-selected);
  }

  .profile-photo-card__body { display: grid; gap: var(--space-3); min-width: 0; }
  .profile-photo-card__body > p { margin: 0; }
  .profile-photo-card__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .profile-photo-card__form input[type="file"] { max-width: 100%; color: var(--color-text-secondary); }
  .profile-photo-card__form input[type="file"]::file-selector-button {
    padding: var(--space-2) var(--space-3);
    margin-right: var(--space-3);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface-raised);
    color: var(--color-text);
    cursor: pointer;
  }

  @media (max-width: 35rem) {
    .profile-photo-card { flex-direction: column; }
    /* Stacked, the body takes the card's width, and the file input (whose own minimum width is
       wider than a 320 px screen) shrinks into it instead of widening the page. */
    .profile-photo-card__body { align-self: stretch; }
    .profile-photo-card__form input[type="file"] { width: 100%; min-width: 0; }
  }

  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
  }

  .page-header__text {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
  }

  .page-header__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    justify-self: start;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
  }

  .page-header__back:hover {
    color: var(--color-text);
    text-decoration: underline;
  }

  .page-header__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    font-size: var(--text-xl);
    line-height: 1.25;
  }

  .page-header__subtitle {
    color: var(--color-text-secondary);
  }

  .page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .dl {
    display: grid;
    gap: var(--space-2);
    margin: 0;
  }

  .dl__row {
    display: grid;
    grid-template-columns: minmax(6rem, 38%) minmax(0, 1fr);
    gap: var(--space-3);
  }

  .dl dt {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .dl dd {
    margin: 0;
    min-width: 0;
  }

  .eyebrow {
    color: var(--color-text-accent);
    font-size: max(var(--text-sm), 0.875rem);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-caps);
    line-height: var(--leading-snug);
    text-transform: uppercase;
  }

  .panel-title {
    color: var(--color-text-secondary);
    font-size: max(var(--text-sm), 0.875rem);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  /* The smaller eyebrow over a rail or a group of links ("Conversations", a settings group). */
  .panel-title--xs {
    font-size: var(--text-xs);
  }


  /* ======================================================================
     HOLD-EXPIRY NOTICE and COUNTDOWN (SCREENS P-13, W-03)
     ====================================================================== */
  .countdown {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-variant-numeric: var(--font-numeric-tabular);
    font-weight: var(--font-weight-semibold);
  }

  .countdown.is-urgent {
    color: var(--color-warning-text);
  }

  .countdown.is-expired {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
  }

  .hold {
    display: grid;
    gap: var(--space-2);
  }

  .hold__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }


  /* ======================================================================
     DATE / TIME FIELDS WITH PRESETS, COMBOBOX
     ====================================================================== */
  .date-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
  }

  .date-presets .btn[aria-pressed="true"] {
    border-color: var(--color-border-accent);
    background-color: var(--color-surface-selected);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-border-accent);
  }

  .combobox {
    position: relative;
  }

  .combobox__listbox {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    left: 0;
    z-index: var(--z-dropdown);
    max-height: 18rem;
    margin: 0;
    padding: var(--space-1);
    overflow-y: auto;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-raised);
    box-shadow: var(--shadow-md);
    list-style: none;
  }

  .combobox__option {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    cursor: pointer;
  }

  .combobox__option:hover {
    background-color: var(--color-surface-hover);
  }

  .combobox__option.is-active {
    background-color: var(--color-surface-hover);
    outline: var(--border-width-strong) solid var(--color-focus);
    outline-offset: calc(-1 * var(--border-width-strong));
  }

  .combobox__option[aria-selected="true"] {
    background-color: var(--color-surface-selected);
    font-weight: var(--font-weight-semibold);
  }

  .combobox__meta {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-regular);
  }

  .combobox__empty {
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary);
  }


  /* ======================================================================
     KEYBOARD SHORTCUT HELP
     ====================================================================== */
  .shortcuts {
    display: grid;
    gap: var(--space-2);
    margin: 0;
  }

  .shortcuts__row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-3);
  }

  .shortcuts dt {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .shortcuts dd {
    margin: 0;
  }


  /* ======================================================================
     PROPERTY and PROFILE CARDS (public, §8.5)
     ====================================================================== */
  .property-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .property-card:hover {
    box-shadow: var(--shadow-sm);
  }

  .property-card:has(.card__link:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .property-card__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 2;
    background-color: var(--color-surface-sunken);
    color: var(--color-text-muted);
  }

  .property-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .property-card__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
  }

  .property-card__body {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5) var(--space-5);
  }

  .property-card__price {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: var(--font-numeric-tabular);
    line-height: var(--leading-snug);
  }

  .property-card__address {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
  }

  .property-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    padding: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    list-style: none;
  }

  .property-card__facts li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .property-card__verified {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .profile-card {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: var(--card-padding);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
  }

  .profile-card__photo {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-media);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-muted);
  }

  .profile-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .profile-card__name {
    font-family: var(--font-family-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-display);
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-heading);
  }

  .profile-card__role {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
  }

  .profile-card__meta {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }

  .profile-card__credentials {
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border-subtle);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
  }


  /* ======================================================================
     BANNERS (G-03 app banners, G-01 review strip)
     Classes match templates/layouts/*.html: .banner.banner-<level>.
     ====================================================================== */
  .banner {
    --banner-bg: var(--color-info-bg);
    --banner-rule: var(--color-info-border);
    --banner-fg: var(--color-info-text);

    /* Grid, not flex: the layouts render bare text, which must stay beside
       the icon at any width. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) var(--page-gutter);
    border-bottom: var(--border-width) solid var(--banner-rule);
    background-color: var(--banner-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: var(--leading-ui);
  }

  .banner::before {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: 0.15em;
    background-color: var(--banner-fg);
    mask: url("../icons/lucide/info.58c1c5abf89a.svg") center / contain no-repeat;
  }

  .banner:has(> .icon)::before {
    display: none;
  }

  .banner > .icon {
    margin-top: 0.15em;
    color: var(--banner-fg);
  }

  @media (max-width: 47.99em) {
    .banner__actions {
      grid-column: 2 / -1;
    }
  }

  .banner-warning,
  .banner--warning {
    --banner-bg: var(--color-warning-bg);
    --banner-rule: var(--color-warning-border);
    --banner-fg: var(--color-warning-text);
  }

  .banner-warning::before,
  .banner--warning::before {
    mask-image: url("../icons/lucide/triangle-alert.a2b907c16c7a.svg");
  }

  .banner-danger,
  .banner--danger {
    --banner-bg: var(--color-danger-bg);
    --banner-rule: var(--color-danger-border);
    --banner-fg: var(--color-danger-text);
  }

  .banner-danger::before,
  .banner--danger::before {
    mask-image: url("../icons/lucide/circle-alert.51a4026e6ed1.svg");
  }

  .banner__text {
    min-width: 0;
  }

  .banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .banner-more > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--page-gutter);
    border-bottom: var(--border-width) solid var(--color-border-subtle);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    list-style: none;
  }

  .banner-more > summary::-webkit-details-marker {
    display: none;
  }

  .banner-more > summary:hover {
    color: var(--color-text);
    text-decoration: underline;
  }

  .banner-more[open] > summary .icon {
    transform: rotate(180deg);
  }

  /* Django messages rendered by the app layout (ul.messages > li.message-*). */
  .messages {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) var(--page-gutter) 0;
    padding: 0;
    list-style: none;
  }

  .message {
    --message-bg: var(--color-info-bg);
    --message-rule: var(--color-info-border);
    --message-fg: var(--color-info-text);

    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-card);
    background-color: var(--message-bg);
    box-shadow: inset var(--border-width-accent) 0 0 var(--message-rule);
  }

  .message::before {
    content: "";
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.05em;
    background-color: var(--message-fg);
    mask: url("../icons/lucide/info.58c1c5abf89a.svg") center / contain no-repeat;
  }

  .message-success {
    --message-bg: var(--color-success-bg);
    --message-rule: var(--color-success-border);
    --message-fg: var(--color-success-text);
  }

  .message-success::before { mask-image: url("../icons/lucide/circle-check.96e697f4eec2.svg"); }

  .message-warning {
    --message-bg: var(--color-warning-bg);
    --message-rule: var(--color-warning-border);
    --message-fg: var(--color-warning-text);
  }

  .message-warning::before { mask-image: url("../icons/lucide/triangle-alert.a2b907c16c7a.svg"); }

  .message-error {
    --message-bg: var(--color-danger-bg);
    --message-rule: var(--color-danger-border);
    --message-fg: var(--color-danger-text);
  }

  .message-error::before { mask-image: url("../icons/lucide/circle-alert.51a4026e6ed1.svg"); }

  /* ======================================================================
     STANDALONE LINKS. On the auth card (accounts/layouts/auth.html: every
     /team/ page) a link that is alone in its paragraph or list item ("Forgot
     password?", "Back to sign in", allauth's View / Download / Generate
     recovery-code actions) is a control, and so is each link of a card's list
     of links (Help's "Your account", the profile's "More settings"): at least
     the small control height (WCAG 2.5.8, CR-W13-18). As plain text, two
     stacked links of similar length ("Profile", "Security") are 19px targets
     too close together.
     :only-child ignores text, so a link inside a sentence (allauth's e-mail
     confirmation) matches too: it may break anywhere, or a long address would
     be one unbreakable box wider than a 320px screen (WCAG 1.4.10).
     ====================================================================== */
  .auth-card :is(p, li) > a:only-child:not(.btn),
  .card > ul > li > a:only-child:not(.btn) {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--control-height-sm);
    overflow-wrap: anywhere;
  }
}


/* --------------------------------------------------------------------------
   Reduced motion: looping animations stop (spinner → static icon with its
   "Saving…" label; skeleton shimmer → flat block). Tokens already remove
   movement distances and durations.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .btn[aria-busy="true"] .btn__spinner .icon,
    .skeleton__line,
    .skeleton__block,
    .skeleton__avatar,
    .progress__bar:indeterminate {
      animation: none;
    }

    .skeleton__line,
    .skeleton__block,
    .skeleton__avatar {
      background-image: none;
    }
  }
}

/* Forced colours: state must not rely on background colour. */
@media (forced-colors: active) {
  @layer components {
    .radio-card:has(input:checked),
    .tabs__tab[aria-selected="true"],
    .pagination__link[aria-current="page"],
    .table tbody tr.is-selected {
      outline: 2px solid CanvasText;
    }

    .check input:checked::before,
    .radio-card__mark::before {
      background-color: CanvasText;
    }
  }
}


/* Dashboard primitives live in the components layer like everything else above. */
@layer components {
  /* ======================================================================
     DASHBOARD PRIMITIVES (UI-DARK-1 — Brian's dashboard mockup)
     KPI tiles, stat rows, stage columns, chat bubbles, calendar cells,
     CSS bar chart, SVG donut, dashboard table and property grid. Markup in
     templates/components/dash/*. Chart values are set through data-pct
     attributes (mapped to --pct below) and SVG attributes — never style="".
     ====================================================================== */

  /* ---- data-pct → --pct (0–100), shared by bars, meters and rings ---- */
  [data-pct="0"] { --pct: 0; }
  [data-pct="1"] { --pct: 1; }
  [data-pct="2"] { --pct: 2; }
  [data-pct="3"] { --pct: 3; }
  [data-pct="4"] { --pct: 4; }
  [data-pct="5"] { --pct: 5; }
  [data-pct="6"] { --pct: 6; }
  [data-pct="7"] { --pct: 7; }
  [data-pct="8"] { --pct: 8; }
  [data-pct="9"] { --pct: 9; }
  [data-pct="10"] { --pct: 10; }
  [data-pct="11"] { --pct: 11; }
  [data-pct="12"] { --pct: 12; }
  [data-pct="13"] { --pct: 13; }
  [data-pct="14"] { --pct: 14; }
  [data-pct="15"] { --pct: 15; }
  [data-pct="16"] { --pct: 16; }
  [data-pct="17"] { --pct: 17; }
  [data-pct="18"] { --pct: 18; }
  [data-pct="19"] { --pct: 19; }
  [data-pct="20"] { --pct: 20; }
  [data-pct="21"] { --pct: 21; }
  [data-pct="22"] { --pct: 22; }
  [data-pct="23"] { --pct: 23; }
  [data-pct="24"] { --pct: 24; }
  [data-pct="25"] { --pct: 25; }
  [data-pct="26"] { --pct: 26; }
  [data-pct="27"] { --pct: 27; }
  [data-pct="28"] { --pct: 28; }
  [data-pct="29"] { --pct: 29; }
  [data-pct="30"] { --pct: 30; }
  [data-pct="31"] { --pct: 31; }
  [data-pct="32"] { --pct: 32; }
  [data-pct="33"] { --pct: 33; }
  [data-pct="34"] { --pct: 34; }
  [data-pct="35"] { --pct: 35; }
  [data-pct="36"] { --pct: 36; }
  [data-pct="37"] { --pct: 37; }
  [data-pct="38"] { --pct: 38; }
  [data-pct="39"] { --pct: 39; }
  [data-pct="40"] { --pct: 40; }
  [data-pct="41"] { --pct: 41; }
  [data-pct="42"] { --pct: 42; }
  [data-pct="43"] { --pct: 43; }
  [data-pct="44"] { --pct: 44; }
  [data-pct="45"] { --pct: 45; }
  [data-pct="46"] { --pct: 46; }
  [data-pct="47"] { --pct: 47; }
  [data-pct="48"] { --pct: 48; }
  [data-pct="49"] { --pct: 49; }
  [data-pct="50"] { --pct: 50; }
  [data-pct="51"] { --pct: 51; }
  [data-pct="52"] { --pct: 52; }
  [data-pct="53"] { --pct: 53; }
  [data-pct="54"] { --pct: 54; }
  [data-pct="55"] { --pct: 55; }
  [data-pct="56"] { --pct: 56; }
  [data-pct="57"] { --pct: 57; }
  [data-pct="58"] { --pct: 58; }
  [data-pct="59"] { --pct: 59; }
  [data-pct="60"] { --pct: 60; }
  [data-pct="61"] { --pct: 61; }
  [data-pct="62"] { --pct: 62; }
  [data-pct="63"] { --pct: 63; }
  [data-pct="64"] { --pct: 64; }
  [data-pct="65"] { --pct: 65; }
  [data-pct="66"] { --pct: 66; }
  [data-pct="67"] { --pct: 67; }
  [data-pct="68"] { --pct: 68; }
  [data-pct="69"] { --pct: 69; }
  [data-pct="70"] { --pct: 70; }
  [data-pct="71"] { --pct: 71; }
  [data-pct="72"] { --pct: 72; }
  [data-pct="73"] { --pct: 73; }
  [data-pct="74"] { --pct: 74; }
  [data-pct="75"] { --pct: 75; }
  [data-pct="76"] { --pct: 76; }
  [data-pct="77"] { --pct: 77; }
  [data-pct="78"] { --pct: 78; }
  [data-pct="79"] { --pct: 79; }
  [data-pct="80"] { --pct: 80; }
  [data-pct="81"] { --pct: 81; }
  [data-pct="82"] { --pct: 82; }
  [data-pct="83"] { --pct: 83; }
  [data-pct="84"] { --pct: 84; }
  [data-pct="85"] { --pct: 85; }
  [data-pct="86"] { --pct: 86; }
  [data-pct="87"] { --pct: 87; }
  [data-pct="88"] { --pct: 88; }
  [data-pct="89"] { --pct: 89; }
  [data-pct="90"] { --pct: 90; }
  [data-pct="91"] { --pct: 91; }
  [data-pct="92"] { --pct: 92; }
  [data-pct="93"] { --pct: 93; }
  [data-pct="94"] { --pct: 94; }
  [data-pct="95"] { --pct: 95; }
  [data-pct="96"] { --pct: 96; }
  [data-pct="97"] { --pct: 97; }
  [data-pct="98"] { --pct: 98; }
  [data-pct="99"] { --pct: 99; }
  [data-pct="100"] { --pct: 100; }

  /* ---- KPI tile ---- */
  .kpi {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    min-width: 0;
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
      box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
  }

  a.kpi:is(:hover, .is-hover) {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
  }

  a.kpi:is(:hover, .is-hover) .kpi__label {
    text-decoration: underline;
  }

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

  .kpi__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-control);
    background-color: var(--color-kpi-icon-bg);
    color: var(--color-kpi-icon-text);
  }

  .kpi__label {
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kpi__value {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: var(--font-numeric-tabular);
    letter-spacing: var(--tracking-heading);
    line-height: 1.1;
  }

  .kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    justify-self: start;
    min-height: 1.375rem;
    padding: 0 var(--space-2);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: var(--font-numeric-tabular);
    line-height: 1.2;
  }

  .kpi__delta--up { background-color: var(--color-delta-up-bg); color: var(--color-delta-up); }
  .kpi__delta--down { background-color: var(--color-delta-down-bg); color: var(--color-delta-down); }
  .kpi__delta--flat { background-color: var(--color-delta-flat-bg); color: var(--color-delta-flat); }

  .kpi__note {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-3);
  }

  /* ---- Stat rows ---- */
  .stat-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .stat-list > li + li .stat-row,
  .stat-list > .stat-row + .stat-row {
    border-top: var(--border-width) solid var(--color-border-subtle);
  }

  .stat-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    padding: var(--space-1-5) 0;
    color: var(--color-text);
    font-size: var(--text-sm);
    text-decoration: none;
  }

  a.stat-row:is(:hover, .is-hover) .stat-row__label {
    text-decoration: underline;
  }

  .stat-row__dot {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    background-color: var(--color-chart-7);
  }

  .stat-row__dot--1 { background-color: var(--color-chart-1); }
  .stat-row__dot--2 { background-color: var(--color-chart-2); }
  .stat-row__dot--3 { background-color: var(--color-chart-3); }
  .stat-row__dot--4 { background-color: var(--color-chart-4); }
  .stat-row__dot--5 { background-color: var(--color-chart-5); }
  .stat-row__dot--6 { background-color: var(--color-chart-6); }
  .stat-row__dot--7 { background-color: var(--color-chart-7); }
  .stat-row__dot--success { background-color: var(--color-success-border); }
  .stat-row__dot--warning { background-color: var(--color-warning-border); }
  .stat-row__dot--danger { background-color: var(--color-danger-border); }
  .stat-row__dot--info { background-color: var(--color-info-border); }

  .stat-row__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-kpi-icon-bg);
    color: var(--color-kpi-icon-text);
  }

  .stat-row__text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
  }

  .stat-row__label {
    overflow: hidden;
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stat-row__secondary,
  .stat-row__meta {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .stat-row__meta {
    flex: none;
  }

  .stat-row__value {
    flex: none;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: var(--font-numeric-tabular);
  }

  .stat-row__chip {
    flex: none;
  }

  /* ---- Stage columns (board) ---- */
  .stage-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 1fr);
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-3);
    scroll-snap-type: x proximity;
  }

  .stage-col {
    --stage-col-accent: var(--color-border-strong);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    min-height: 12rem;
    border: var(--border-width) solid var(--color-border);
    border-top: var(--border-width-accent) solid var(--stage-col-accent);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-sunken);
    scroll-snap-align: start;
  }

  .stage-col--new { --stage-col-accent: var(--stage-new-bg); }
  .stage-col--assigned { --stage-col-accent: var(--stage-assigned-bg); }
  .stage-col--attempting { --stage-col-accent: var(--stage-attempting-bg); }
  .stage-col--connected { --stage-col-accent: var(--stage-connected-bg); }
  .stage-col--qualified { --stage-col-accent: var(--stage-qualified-bg); }
  .stage-col--appointment { --stage-col-accent: var(--stage-appointment-bg); }
  .stage-col--negotiating { --stage-col-accent: var(--stage-negotiating-bg); }
  .stage-col--under-contract { --stage-col-accent: var(--stage-under-contract-bg); }
  .stage-col--closed { --stage-col-accent: var(--stage-closed-bg); }
  .stage-col--lost { --stage-col-accent: var(--stage-lost-bg); }
  .stage-col--nurture { --stage-col-accent: var(--stage-nurture-bg); }

  .stage-col__head {
    display: grid;
    gap: var(--space-0-5);
    padding: var(--space-3) var(--space-3) 0;
  }

  .stage-col__title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
  }

  .stage-col__count {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .stage-col__total {
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: var(--font-numeric-tabular);
  }

  .stage-col__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-3) var(--space-3);
  }

  .stage-col__body:empty::after {
    content: "";
    min-height: 3rem;
    border: var(--border-width) dashed var(--color-border);
    border-radius: var(--radius-control);
  }

  /* ---- Chat thread ---- */
  .thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bubble {
    display: grid;
    gap: var(--space-0-5);
    max-width: 78%;
    min-width: 0;
  }

  .bubble--in {
    align-self: flex-start;
    justify-items: start;
  }

  .bubble--out {
    align-self: flex-end;
    justify-items: end;
  }

  .bubble__text {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-5);
    font-size: var(--text-base);
    line-height: var(--leading-ui);
    overflow-wrap: anywhere;
  }

  .bubble--in .bubble__text {
    border-bottom-left-radius: var(--radius-1);
    background-color: var(--color-bubble-in-bg);
    color: var(--color-bubble-in-text);
  }

  .bubble--out .bubble__text {
    border-bottom-right-radius: var(--radius-1);
    background-color: var(--color-bubble-out-bg);
    color: var(--color-bubble-out-text);
  }

  .bubble__meta {
    padding: 0 var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  /* ---- Calendar grid ---- */
  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-px);
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-border-subtle);
  }

  .cal-grid__head {
    padding: var(--space-2);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-align: center;
    text-transform: uppercase;
  }

  .cal-cell {
    display: grid;
    gap: var(--space-1);
    align-content: start;
    min-width: 0;
    min-height: 5.5rem;
    padding: var(--space-1-5);
    background-color: var(--color-surface);
  }

  .cal-cell--muted {
    background-color: var(--color-surface-sunken);
  }

  .cal-cell--muted .cal-cell__day {
    color: var(--color-text-muted);
  }

  .cal-cell__day {
    display: inline-grid;
    place-items: center;
    justify-self: start;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: var(--font-numeric-tabular);
    text-decoration: none;
  }

  a.cal-cell__day:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
  }

  .cal-cell--today .cal-cell__day {
    background-color: var(--color-accent-bg);
    color: var(--color-accent-text);
  }

  .cal-cell__events {
    display: grid;
    gap: var(--space-0-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cal-pill {
    --cal-pill-accent: var(--color-chart-1);
    display: block;
    overflow: hidden;
    padding: var(--space-0-5) var(--space-1-5);
    border-left: var(--border-width-accent) solid var(--cal-pill-accent);
    border-radius: var(--radius-2);
    background-color: var(--color-surface-sunken);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  a.cal-pill:hover {
    background-color: var(--color-surface-hover);
    text-decoration: underline;
  }

  .cal-pill--1 { --cal-pill-accent: var(--color-chart-1); }
  .cal-pill--2 { --cal-pill-accent: var(--color-chart-2); }
  .cal-pill--3 { --cal-pill-accent: var(--color-chart-3); }
  .cal-pill--4 { --cal-pill-accent: var(--color-chart-4); }
  .cal-pill--5 { --cal-pill-accent: var(--color-chart-5); }
  .cal-pill--6 { --cal-pill-accent: var(--color-chart-6); }
  .cal-pill--7 { --cal-pill-accent: var(--color-chart-7); }
  .cal-pill--success { --cal-pill-accent: var(--color-success-border); }
  .cal-pill--warning { --cal-pill-accent: var(--color-warning-border); }
  .cal-pill--danger { --cal-pill-accent: var(--color-danger-border); }
  .cal-pill--info { --cal-pill-accent: var(--color-info-border); }

  .cal-cell__more {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  a.cal-cell__more {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 1.5rem;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  a.cal-cell__more:hover {
    color: var(--color-text);
  }

  @media (max-width: 47.99em) {
    .cal-cell {
      min-height: 3.5rem;
      padding: var(--space-1);
    }

    .cal-cell__events {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-0-5);
    }

    .cal-pill {
      position: relative;
      width: 0.5rem;
      height: 0.5rem;
      padding: 0;
      border: 0;
      border-radius: var(--radius-full);
      background-color: var(--cal-pill-accent);
    }

    /* The label stays in the accessibility tree (visually-hidden recipe on its own surface). */
    .cal-pill__text {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      background-color: var(--color-surface);
      color: var(--color-text);
      white-space: nowrap;
    }
  }

  /* ---- CSS bar chart ---- */
  .bar-chart {
    --bar-chart-height: 12rem;
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
  }

  .bar-chart--sm { --bar-chart-height: 8rem; }
  .bar-chart--lg { --bar-chart-height: 16rem; }

  .bar-chart__caption {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  .bar-chart__bars {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-2);
    align-items: end;
    height: calc(var(--bar-chart-height) + 1.5rem);
    margin: 0;
    padding: 0 0 1.5rem;
    border-bottom: var(--border-width) solid var(--color-chart-grid);
    list-style: none;
  }

  .bar-chart__item {
    position: relative;
    display: grid;
    align-items: end;
    justify-items: center;
    height: 100%;
    min-width: 0;
  }

  .bar-chart__bar {
    display: block;
    width: min(100%, 2.25rem);
    height: calc(var(--bar-chart-height) * var(--pct, 0) / 100);
    min-height: 2px;
    border-radius: var(--radius-2) var(--radius-2) 0 0;
    background-color: var(--color-chart-1);
    transition: height var(--motion-duration-base) var(--motion-ease-standard);
  }

  .bar-chart__bar--1 { background-color: var(--color-chart-1); }
  .bar-chart__bar--2 { background-color: var(--color-chart-2); }
  .bar-chart__bar--3 { background-color: var(--color-chart-3); }
  .bar-chart__bar--4 { background-color: var(--color-chart-4); }
  .bar-chart__bar--5 { background-color: var(--color-chart-5); }
  .bar-chart__bar--6 { background-color: var(--color-chart-6); }
  .bar-chart__bar--7 { background-color: var(--color-chart-7); }

  .bar-chart__label {
    position: absolute;
    top: 100%;
    max-width: 100%;
    overflow: hidden;
    padding-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- SVG donut ---- */
  .donut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin: 0;
  }

  .donut__ring {
    position: relative;
    flex: none;
    width: 10rem;
    height: 10rem;
  }

  .donut__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }

  .donut__track {
    stroke: var(--color-chart-track);
  }

  .donut__seg { stroke: var(--color-chart-1); stroke-linecap: butt; }
  .donut__seg--1 { stroke: var(--color-chart-1); }
  .donut__seg--2 { stroke: var(--color-chart-2); }
  .donut__seg--3 { stroke: var(--color-chart-3); }
  .donut__seg--4 { stroke: var(--color-chart-4); }
  .donut__seg--5 { stroke: var(--color-chart-5); }
  .donut__seg--6 { stroke: var(--color-chart-6); }
  .donut__seg--7 { stroke: var(--color-chart-7); }

  .donut__total {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
  }

  .donut__number {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: var(--font-numeric-tabular);
    line-height: 1.1;
  }

  .donut__word {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .donut__legend {
    flex: 1 1 10rem;
    min-width: 0;
  }

  /* ---- Dashboard table variant (dense, quiet header, row hover) ----
     Only the column headers take the quiet caps; a row header (a member, a
     stage, a source) is the row's name and reads like body text. */
  .table--dashboard thead th {
    border-bottom-color: var(--color-border-subtle);
    background-color: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .table--dashboard :is(tbody, tfoot) th {
    position: static;
    border-bottom-color: var(--color-border-subtle);
    background-color: transparent;
    color: var(--color-text);
    font-size: inherit;
    font-weight: var(--font-weight-medium);
  }

  .table--dashboard.table--sticky-first :is(tbody, tfoot) th:first-child {
    position: sticky;
    background-color: var(--color-surface);
  }

  .table--dashboard tbody tr:last-child th {
    border-bottom: 0;
  }

  .table--dashboard td {
    height: calc(var(--table-row-height, 3rem) - var(--space-1));
  }

  .table--dashboard tbody tr:is(:hover, .is-hover) {
    background-color: var(--color-surface-hover);
  }

  /* ---- Property grid (CRM listing cards, photo + price + facts) ---- */
  .property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-4);
  }

  .property-card--app .property-card__price {
    font-size: var(--text-lg);
  }

  .property-card--app .property-card__address {
    font-size: var(--text-base);
  }

  /* ---- Panel: a card whose header carries an eyebrow-style title and a link ---- */
  .panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
  }

  .panel-head .panel-title {
    margin: 0;
  }

  .panel-head__link {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  /* UI-DARK-3 shared primitives. Stage-2 screen-local copies are removed by UI-DARK-2-FIX. */
  .htmx-indicator { display: none; }
  .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
  @media (max-width: 39.99em) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } }
  .page-header__body { flex: 1 0 100%; }
  .cal-pill--neutral { --cal-pill-accent: var(--color-border-strong); }
  @media (max-width: 47.99em) {
    .cal-pill { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; background-color: transparent; }
    .cal-pill::before { content: ""; width: .5rem; height: .5rem; border-radius: var(--radius-full); background-color: var(--cal-pill-accent); }
    a.cal-pill:hover { background-color: var(--color-surface-hover); }
  }

  /* ------------------------------------------------ horizontal bar chart */
  .hbar {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
  }

  .hbar__caption {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

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

  .hbar__item {
    display: grid;
    grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    min-width: 0;
  }

  .hbar__label {
    min-width: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
  }

  .hbar__track {
    display: block;
    min-width: 0;
    height: 1.25rem;
    border-radius: var(--radius-2);
    background-color: var(--color-chart-track);
  }

  .hbar__bar {
    display: block;
    width: calc(var(--pct, 0) * 1%);
    min-width: 2px;
    height: 100%;
    border-radius: var(--radius-2);
    background-color: var(--color-chart-1);
    transition: width var(--motion-duration-base) var(--motion-ease-standard);
  }

  .hbar__bar--1 { background-color: var(--color-chart-1); }
  .hbar__bar--2 { background-color: var(--color-chart-2); }
  .hbar__bar--3 { background-color: var(--color-chart-3); }
  .hbar__bar--4 { background-color: var(--color-chart-4); }
  .hbar__bar--5 { background-color: var(--color-chart-5); }
  .hbar__bar--6 { background-color: var(--color-chart-6); }
  .hbar__bar--7 { background-color: var(--color-chart-7); }

  .hbar__value {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-variant-numeric: var(--font-numeric-tabular);
    font-weight: var(--font-weight-semibold);
  }

  /* -------------------------------------------------- conversion funnel */
  .funnel {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
  }

  .funnel__caption {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  .funnel__steps {
    display: grid;
    gap: var(--space-1-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .funnel__step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-3);
    align-items: center;
    min-width: 0;
  }

  .funnel__track {
    display: flex;
    justify-content: center;
    min-width: 0;
    height: 2.25rem;
    border-radius: var(--radius-2);
    background-color: var(--color-chart-track);
  }

  .funnel__shape {
    display: block;
    width: calc(var(--pct, 0) * 1%);
    min-width: 2px;
    height: 100%;
    border-radius: var(--radius-2);
    background-color: var(--color-chart-1);
    transition: width var(--motion-duration-base) var(--motion-ease-standard);
  }

  .funnel__shape--1 { background-color: var(--color-chart-1); }
  .funnel__shape--2 { background-color: var(--color-chart-3); }
  .funnel__shape--3 { background-color: var(--color-chart-5); }
  .funnel__shape--4 { background-color: var(--color-chart-4); }
  .funnel__shape--5 { background-color: var(--color-chart-2); }
  .funnel__shape--6 { background-color: var(--color-chart-6); }
  .funnel__shape--7 { background-color: var(--color-chart-7); }

  .funnel__text {
    min-width: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }

  .funnel__value {
    color: var(--color-text);
    font-variant-numeric: var(--font-numeric-tabular);
    font-weight: var(--font-weight-semibold);
  }

  .funnel__label { color: var(--color-text-secondary); }

  .funnel__share {
    color: var(--color-text-muted);
    font-variant-numeric: var(--font-numeric-tabular);
  }

  /* --------------------------------------------------- SVG line chart */
  .line-chart {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
  }

  .line-chart__caption {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  .line-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .line-chart__key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
  }

  .line-chart__swatch {
    display: block;
    width: 0.875rem;
    height: var(--space-0-5);
    border-radius: var(--radius-full);
    background-color: var(--color-chart-1);
  }

  .line-chart__swatch--1 { background-color: var(--color-chart-1); }
  .line-chart__swatch--2 { background-color: var(--color-chart-2); }
  .line-chart__swatch--3 { background-color: var(--color-chart-3); }
  .line-chart__swatch--4 { background-color: var(--color-chart-4); }
  .line-chart__swatch--5 { background-color: var(--color-chart-5); }
  .line-chart__swatch--6 { background-color: var(--color-chart-6); }
  .line-chart__swatch--7 { background-color: var(--color-chart-7); }

  .line-chart__plot {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
    align-items: stretch;
  }

  .line-chart__y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-variant-numeric: var(--font-numeric-tabular);
    list-style: none;
    text-align: end;
  }

  .line-chart__svg {
    width: 100%;
    height: 11rem;
    min-width: 0;
    overflow: visible;
  }

  .line-chart__grid { stroke: var(--color-chart-grid); stroke-width: 1; }
  .line-chart__line { stroke: var(--color-chart-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .line-chart__line--1 { stroke: var(--color-chart-1); }
  .line-chart__line--2 { stroke: var(--color-chart-2); }
  .line-chart__line--3 { stroke: var(--color-chart-3); }
  .line-chart__line--4 { stroke: var(--color-chart-4); }
  .line-chart__line--5 { stroke: var(--color-chart-5); }
  .line-chart__line--6 { stroke: var(--color-chart-6); }
  .line-chart__line--7 { stroke: var(--color-chart-7); }

  .line-chart__area { fill: var(--color-chart-1); fill-opacity: 0.14; stroke: none; }
  .line-chart__area--1 { fill: var(--color-chart-1); }
  .line-chart__area--2 { fill: var(--color-chart-2); }
  .line-chart__area--3 { fill: var(--color-chart-3); }
  .line-chart__area--4 { fill: var(--color-chart-4); }
  .line-chart__area--5 { fill: var(--color-chart-5); }
  .line-chart__area--6 { fill: var(--color-chart-6); }
  .line-chart__area--7 { fill: var(--color-chart-7); }

  .line-chart__dot { fill: var(--color-surface); stroke: var(--color-chart-1); stroke-width: 2; }
  .line-chart__dot--1 { stroke: var(--color-chart-1); }
  .line-chart__dot--2 { stroke: var(--color-chart-2); }
  .line-chart__dot--3 { stroke: var(--color-chart-3); }
  .line-chart__dot--4 { stroke: var(--color-chart-4); }
  .line-chart__dot--5 { stroke: var(--color-chart-5); }
  .line-chart__dot--6 { stroke: var(--color-chart-6); }
  .line-chart__dot--7 { stroke: var(--color-chart-7); }

  .line-chart__x {
    display: flex;
    justify-content: space-between;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    list-style: none;
  }

  .line-chart__x > li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .line-chart__empty {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }


  .lead-card {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    background-color: var(--color-surface-sunken);
  }

  .lead-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
  }

  .lead-card__title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
  }

  .lead-card__header > p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .lead-card > p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }

  .lead-card > ul:not(.lead-card__actions) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    padding: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    list-style: none;
  }

  .lead-card__actions { margin: 0; padding: 0; }

  /* UI-POLISH-WORK: the lead's Call mode picker sits beside the small buttons at their height. */
  select.control.record-actions__select {
    width: auto;
    min-height: var(--control-height-sm);
  }

  /* UI-POLISH-WORK: badges as badge pills, and each fact line led by its icon. */
  .lead-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lead-card__summary {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
  }

  .lead-card > .lead-card__meta {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .lead-card__meta > .icon {
    flex: none;
    margin-top: var(--space-0-5);
    color: var(--color-text-muted);
  }

  .lead-card__meta > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .lead-card__meta--warning > .icon {
    color: var(--color-warning-text);
  }

  /* "Can't contact right now": one line per reason, the channels it blocks beside it. */
  .lead-card__limits {
    display: grid;
    gap: var(--space-1);
  }

  .lead-card__limits-title {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
  }

  .lead-card__limits .restrictions__list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lead-card__limits li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    font-size: var(--text-sm);
  }


  .quick-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                background-color var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .quick-card:has(.quick-card__title a):is(:hover, .is-hover) {
    border-color: var(--color-border-strong);
    background-color: var(--color-surface-hover);
  }

  .quick-card:focus-within {
    border-color: var(--color-primary-bg);
  }

  .quick-card__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: var(--radius-3);
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
  }

  .quick-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    min-width: 0;
  }

  .quick-card__title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
  }

  .quick-card__title a {
    color: var(--color-text);
    text-decoration: none;
  }

  .quick-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .quick-card__title a:is(:hover, .is-hover) {
    text-decoration: underline;
  }

  .quick-card__title a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .quick-card__note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }


  .ai-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  .ai-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border-accent);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
  }

  .ai-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .ai-card__head .icon {
    flex: none;
    color: var(--color-text-accent);
  }

  .ai-card__title {
    margin: 0;
    color: var(--color-text-accent);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  /* The insight panel sits on the gold wash and carries the gold action. */
  .ai-card--insight {
    border-width: var(--border-width-strong);
    background-color: var(--color-accent-wash);
  }

  .ai-card__text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-sm);
  }


}

/* ==========================================================================
   Motion band and moving text (CRM-MOTION, 2026-10-01; tokens.css §8.8)
   A motion band is a contained, always-dark header panel with the sign-in
   "data network" behind its right side: faint grid, drifting nodes and gold
   pulses (static/js/core/network.js) and a gold top edge that draws across.
   Paused by the page's one edge control (CRM-BACKDROP, WCAG 2.2.2). Since
   CRM-BACKDROP no page uses it by default (the whole page has the moving
   background); page_header band=True opts a page in. Never behind tables,
   forms or body text.
   Owner decision (§8.8): it plays under Reduce Motion too; .is-still (pause
   button) and .motion-band__art--still (Header animation: Still) stop it.
   ========================================================================== */
@layer components {
  .motion-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-5) calc(var(--space-6) + 2rem) var(--space-5) var(--space-6);
    background-color: var(--color-surface);
    color: var(--color-text);
  }

  /* The gold top edge, drawn left to right once. */
  .motion-band::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset-inline: 0;
    inset-block-start: 0;
    height: 2px;
    background-color: var(--color-border-accent);
    transform-origin: left;
    animation: band-draw var(--motion-band-rule-in) var(--motion-ease-standard) both;
  }

  .motion-band__art {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    animation: band-fade var(--motion-band-in) var(--motion-ease-enter) both;
  }

  /* Blueprint grid, drifting slowly; it fades out towards the text on the left. */
  .motion-band__art::before {
    content: "";
    position: absolute;
    inset: -2rem;
    background-image: linear-gradient(var(--color-band-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-band-grid) 1px, transparent 1px);
    background-size: 2rem 2rem;
    mask-image: linear-gradient(90deg, transparent 15%, var(--color-network-node) 70%);
    animation: band-grid-drift var(--motion-band-grid-drift) linear infinite;
  }

  /* A soft glow on the right, where the network is. */
  .motion-band__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 140% at 88% 50%, var(--color-band-halo), transparent 70%);
  }

  /* The network canvas is masked off the left half, so the title never sits on moving lines. */
  .motion-band__network {
    position: absolute;
    inset: 0;
    mask-image: linear-gradient(90deg, transparent 30%, var(--color-network-node) 75%);
  }

  .motion-band__network canvas {
    display: block;
    width: 100%;
    height: 100%;
  }

  .motion-band__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0 0 var(--space-2);
    color: var(--color-text-accent);
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .motion-band__live {
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-success-solid);
    animation: band-beacon var(--motion-band-beacon) var(--motion-ease-standard) infinite;
  }

  .motion-band__sep { color: var(--color-text-muted); }


  .is-still .motion-band__art::before,
  .is-still .motion-band__live { animation-play-state: paused; }

  /* The live dot of the plain command greeting (CRM-BACKDROP) follows the page backdrop: still with
     "Background animation: Still", and without JS (nothing drawn, no pause control). */
  .app-shell:has(.app-backdrop--still) .motion-band__live,
  .app-shell:not(:has(.app-backdrop [data-network].is-drawn)) .motion-band__live { animation: none; }

  /* Header animation: Still (motion_band.html puts --still on the art layer). */
  .motion-band:has(.motion-band__art--still)::before,
  .motion-band:has(.motion-band__art--still) .motion-band__art,
  .motion-band:has(.motion-band__art--still) .motion-band__art::before,
  .motion-band:has(.motion-band__art--still) .motion-band__live { animation: none; }

  /* The loops run only once network.js has drawn the band, i.e. when the page's pause control is
     shown (WCAG 2.2.2); without JS the band is a still picture. */
  .motion-band:not(:has([data-network].is-drawn)) .motion-band__art::before,
  .motion-band:not(:has([data-network].is-drawn)) .motion-band__live { animation: none; }

  /* The slim settings version of the page header. */
  .page-header.motion-band {
    align-items: center;
    padding-block: var(--space-4);
  }

  /* The title and subtitle keep to the left; the network only starts where they end. */
  .page-header.motion-band .page-header__text { max-width: 40rem; }
  .page-header.motion-band .motion-band__network { mask-image: linear-gradient(90deg, transparent 62%, var(--color-network-node) 88%); }
  .page-header.motion-band .page-header__back { color: var(--color-text-secondary); }
  .page-header.motion-band .page-header__back:hover { color: var(--color-text); }

  @media (max-width: 39.99em) {
    .motion-band { padding: var(--space-4) calc(var(--space-4) + 2rem) var(--space-4) var(--space-4); }
    .motion-band__sep { display: none; }
    /* Text runs the full width on a phone: the network keeps to the right gutter the band's
       padding reserves, so no line is ever behind text. */
    .motion-band__network, .page-header.motion-band .motion-band__network { inset-inline-start: auto; width: calc(var(--space-4) + 2rem); mask-image: none; }
  }

  @media (prefers-contrast: more) { .motion-band { border-color: var(--color-border-strong); } }

  @media (forced-colors: active) {
    .motion-band { border: 2px solid CanvasText; }
    .motion-band__art { display: none; }
  }

  @media print {
    .motion-band { border-color: var(--color-border); }
    .motion-band__art { display: none; }
  }

  /* Moving text (decode.js): screen readers get the real words (visually hidden), an invisible
     copy keeps the line's size, and an aria-hidden copy laid over it decodes or types. */
  .motion-text { position: relative; }
  .motion-text__sizer { visibility: hidden; }
  .motion-text__shown { position: absolute; inset: 0; }
  .motion-text__waiting { visibility: hidden; }
  .motion-text__scrambled { color: var(--color-text-accent); }
  .motion-text__caret {
    display: inline-block;
    width: .55ch;
    height: 1.1em;
    margin-inline-start: 1px;
    vertical-align: text-bottom;
    background-color: var(--color-border-accent);
    animation: band-blink var(--motion-band-caret-blink) steps(1, end) infinite;
  }

  .motion-text__caret.is-done { animation: band-fade-out var(--motion-band-fields-in) var(--motion-ease-exit) both; }

  @keyframes band-draw { from { transform: scaleX(0); } }
  @keyframes band-fade { from { opacity: 0; } }
  @keyframes band-fade-out { to { opacity: 0; } }
  @keyframes band-blink { 50% { opacity: 0; } }
  @keyframes band-grid-drift { to { transform: translate(2rem, 2rem); } }
  @keyframes band-beacon { 0% { box-shadow: 0 0 0 0 var(--color-success-solid); } 70%, 100% { box-shadow: 0 0 0 .4rem transparent; } }
}

/* ==========================================================================
   Page backdrop and the edge pause control (CRM-BACKDROP, 2026-10-02; tokens.css §8.12)
   .app-backdrop (components/shell/backdrop.html) is ONE fixed canvas behind every CRM
   page: the sign-in "data network" with its blueprint grid and scan line, all drawn by
   static/js/core/network.js (backdrop mode). It never takes layout or pointer events,
   and the sidebar, top bar, cards, panels and tables cover it with opaque surfaces; text
   that sits on the page itself is cut out of the drawing by the script.
   .motion-edge (components/motion_control.html) is the page's one pause / play control:
   out of sight until the mouse reaches the right edge (network.js adds .is-revealed) or
   it has keyboard focus; a small tab at the right edge on touch screens.
   Owner decision (§8.12): the backdrop plays under Reduce Motion; the control's own
   slide is ordinary UI motion and stops there.
   ========================================================================== */
@layer components {
  .app-shell { isolation: isolate; }

  .app-backdrop {
    --color-network-node: var(--color-backdrop-node);
    --color-network-link: var(--color-backdrop-link);
    --color-network-pulse: var(--color-backdrop-pulse);
    --color-network-grid: var(--color-backdrop-grid);
    --color-network-scan: var(--color-backdrop-scan);
    --network-strength: var(--network-strength-backdrop);
    --network-density: var(--network-density-backdrop);
    position: fixed;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    background: radial-gradient(ellipse 60% 40% at 60% 0%, var(--color-backdrop-halo), transparent 70%);
  }

  .app-backdrop__network { position: absolute; inset: 0; }
  .app-backdrop__network canvas { display: block; width: 100%; height: 100%; }

  /* ---- the edge pause control ---- */
  .motion-edge {
    position: fixed;
    z-index: var(--z-header);
    inset-block-start: 50%;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding-block: 0;
    padding-inline: var(--space-3) var(--space-3);
    border: var(--border-width) solid var(--color-border-strong);
    border-inline-end: 0;
    border-start-start-radius: var(--radius-full);
    border-end-start-radius: var(--radius-full);
    background-color: var(--color-surface-raised);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-md);
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    translate: 0 -50%;
    scale: .9;
    transform-origin: right center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-duration-slow) var(--motion-ease-enter),
                scale var(--motion-duration-slow) var(--motion-ease-enter),
                color var(--motion-duration-fast) var(--motion-ease-standard);
  }

  .motion-edge[hidden] { display: none; }

  .motion-edge.is-revealed,
  .motion-edge:focus-visible {
    scale: 1;
    opacity: 1;
    pointer-events: auto;
  }

  .motion-edge:hover { color: var(--color-text); }
  .motion-edge:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-offset)); }
  .motion-edge[aria-pressed="true"] { color: var(--color-motion-edge-on); }

  .motion-edge__glyph { display: inline-grid; place-items: center; }
  .motion-edge[aria-pressed="true"] .motion-edge__icon--pause,
  .motion-edge:not([aria-pressed="true"]) .motion-edge__icon--play { display: none; }

  /* The words open out while the mouse is on it or it has focus; they stay in the name always. */
  .motion-edge__label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    transition: max-width var(--motion-duration-slow) var(--motion-ease-enter);
  }

  .motion-edge:is(:hover, :focus-visible) .motion-edge__label { max-width: 12rem; }

  /* Touch screens have no "mouse at the edge": a small tab stays at the right edge, above the
     phone's bottom bar. */
  @media (hover: none) {
    .motion-edge {
      inset-block-start: auto;
      inset-block-end: calc(var(--space-3) + var(--bottom-nav-height, 0px) + env(safe-area-inset-bottom, 0px));
      translate: none;
      min-width: 2.75rem;
      padding-inline: var(--space-3) var(--space-2);
      scale: 1;
      opacity: 1;
      pointer-events: auto;
    }

    .motion-edge__label { max-width: 0; }
  }

  @media (forced-colors: active) {
    .app-backdrop { display: none; }
    .motion-edge { border: 2px solid ButtonText; border-inline-end: 0; }
  }

  @media print {
    .app-backdrop, .motion-edge { display: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .motion-edge, .motion-edge__label { transition: none; }
  }
}