/* Core stylesheet: tokens, appearances, typography and the shared components.
   Pattern families live in ci-<family>.css; ci-styles.css imports everything. */
@layer theme, base, components, utilities;

@import "./ci-tokens.css";
@import "./ci-editions.css";
@import "./keak-brand.css";
@import "./ci-typography.css";
@import "./loading-screen.css";

@layer components {
  .ci-recovery-state { min-width:0; color:var(--ci-color-foreground); font-family:var(--ci-font-ui); }
  .ci-recovery-state[data-variant="page"] { min-height:100svh; display:flex; flex-direction:column; background:var(--ci-color-background); }
  .ci-recovery-state__header { display:flex; align-items:center; justify-content:space-between; gap:var(--ci-space-4); padding:var(--ci-space-6) var(--ci-space-8); border-bottom:var(--ci-border-hairline) solid var(--ci-color-border-subtle); }
  .ci-recovery-state__body { flex:1; min-width:0; display:grid; place-items:center; padding:var(--ci-space-10) var(--ci-space-6); }
  .ci-recovery-state__panel { width:100%; max-width:36rem; min-width:0; box-sizing:border-box; padding:var(--ci-space-8); border:var(--ci-border-hairline) solid var(--ci-color-border); border-radius:var(--ci-radius-surface); background:var(--ci-color-surface); }
  .ci-recovery-state__icon { display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; color:var(--ci-color-foreground); background:var(--ci-color-accent-surface-strong); margin-bottom:var(--ci-space-6); }
  .ci-recovery-state__icon svg { width:1.5rem; height:1.5rem; }
  .ci-recovery-state__eyebrow { margin:0 0 var(--ci-space-2); color:var(--ci-color-text-muted); font-size:var(--ci-font-size-xs); font-weight:var(--ci-font-weight-medium); }
  .ci-recovery-state__title { margin:0; font-size:var(--ci-font-size-3xl); font-weight:var(--ci-font-weight-medium); line-height:1.15; letter-spacing:-.025em; text-wrap:balance; }
  .ci-recovery-state__description { margin:var(--ci-space-3) 0 0; color:var(--ci-color-text-muted); font-size:var(--ci-font-size-sm); line-height:1.6; }
  .ci-recovery-state__actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--ci-space-3); margin-top:var(--ci-space-6); }
  .ci-recovery-state__footer { display:flex; flex-direction:column; gap:var(--ci-space-3); margin-top:var(--ci-space-8); padding-top:var(--ci-space-5); border-top:var(--ci-border-hairline) solid var(--ci-color-border-subtle); color:var(--ci-color-text-muted); font-size:var(--ci-font-size-xs); line-height:1.5; }
  .ci-recovery-state__footer a, .ci-recovery-state__header a { color:inherit; text-underline-offset:.2em; }
  .ci-recovery-state__footer a:hover { color:var(--ci-color-foreground); }
  .ci-recovery-state__reference { margin:0; overflow-wrap:anywhere; }
  .ci-recovery-state__reference code { font-family:var(--ci-font-code); font-size:inherit; }
  .ci-recovery-state[data-variant="section"] .ci-recovery-state__body { padding:var(--ci-space-6); }
  @media(max-width:480px) {
    .ci-recovery-state__header { padding:var(--ci-space-5); }
    .ci-recovery-state__body { padding:var(--ci-space-8) var(--ci-space-4); }
    .ci-recovery-state__panel { padding:var(--ci-space-6); }
    .ci-recovery-state__title { font-size:var(--ci-font-size-2xl); }
    .ci-recovery-state__actions { align-items:stretch; flex-direction:column; }
    .ci-recovery-state__actions > * { width:100%; }
    .ci-recovery-state[data-variant="section"] .ci-recovery-state__body { padding:var(--ci-space-4); }
  }
}

@layer base {
  .ci-theme {
    color: var(--ci-color-foreground);
    background: var(--ci-color-background);
    font-family: var(--ci-font-ui);
    font-size: var(--ci-font-size-md);
    line-height: var(--ci-type-body-leading);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-weight: var(--ci-font-weight-regular);
    letter-spacing: var(--ci-type-body-tracking);
  }

  .ci-theme *,
  .ci-theme *::before,
  .ci-theme *::after {
    box-sizing: border-box;
  }

  .ci-theme ::selection {
    color: var(--ci-color-selection-foreground);
    background: var(--ci-color-selection);
  }
}

@layer components {
  .ci-display {
    margin: 0;
    color: var(--ci-color-heading);
    font-family: var(--ci-font-display);
    font-size: var(--ci-font-size-hero);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-heading-leading);
    letter-spacing: var(--ci-type-heading-tracking);
  }

  .ci-heading {
    margin: 0;
    color: var(--ci-color-heading);
    font-family: var(--ci-font-ui);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-heading-leading);
    letter-spacing: var(--ci-type-heading-tracking);
  }

  .ci-dashboard-display {
    margin: 0;
    color: var(--ci-color-heading);
    font-family: var(--ci-type-dashboard-display-family);
    font-size: var(--ci-type-dashboard-display-size);
    font-weight: var(--ci-type-dashboard-display-weight);
    line-height: var(--ci-type-dashboard-display-leading);
    letter-spacing: var(--ci-type-heading-tracking);
  }

  .ci-eyebrow {
    color: var(--ci-color-text-muted);
    font-family: var(--ci-font-ui);
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-regular);
    letter-spacing: var(--ci-type-caption-tracking);
    line-height: var(--ci-type-caption-leading);
    text-transform: uppercase;
  }

  .ci-button {
    display: inline-flex;
    min-height: var(--ci-control-height-lg);
    align-items: center;
    justify-content: center;
    gap: var(--ci-space-2);
    padding: 0 var(--ci-space-4);
    border: var(--ci-border-default) solid transparent;
    border-radius: var(--ci-radius-pill);
    color: var(--ci-button-primary-fg);
    background: var(--ci-button-primary-bg);
    font: var(--ci-font-weight-medium) var(--ci-font-size-sm) /
      var(--ci-line-height-ui) var(--ci-font-ui);
    letter-spacing: var(--ci-type-control-tracking);
    text-decoration: none;
    cursor: pointer;
    transition:
      color var(--ci-duration-base) var(--ci-ease-standard),
      background-color var(--ci-duration-base) var(--ci-ease-standard),
      border-color var(--ci-duration-base) var(--ci-ease-standard),
      transform var(--ci-duration-fast) var(--ci-ease-standard);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
  }

  .ci-button:hover {
    color: var(--ci-button-primary-fg);
    background: var(--ci-button-primary-hover);
  }

  .ci-button:active {
    transform: translateY(1px);
  }

  .ci-button:focus-visible,
  .ci-segmented__item:focus-visible {
    outline: none;
    box-shadow: var(--ci-ring-focus);
  }

  .ci-input:focus-visible {
    outline: none;
    border-color: var(--ci-color-focus);
    box-shadow: var(--ci-ring-field-focus);
  }

  .ci-button:disabled,
  .ci-button[aria-disabled="true"] {
    opacity: 0.48;
    pointer-events: none;
  }

  .ci-button[data-blocked="true"]:not(:disabled) {
    pointer-events: auto;
    cursor: help;
  }

  .ci-button--secondary {
    color: var(--ci-color-foreground);
    background: var(--ci-color-surface);
    border-color: var(--ci-color-border);
  }

  .ci-button--secondary:hover {
    background: var(--ci-color-surface-subtle);
  }

  .ci-button--ghost {
    color: var(--ci-color-foreground);
    background: transparent;
  }

  .ci-button--ghost:hover {
    background: var(--ci-color-surface-muted);
  }

  .ci-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: var(--ci-control-height-lg);
    padding: 0 var(--ci-space-3);
    border: var(--ci-border-default) solid var(--ci-field-border);
    border-radius: var(--ci-radius-control);
    color: var(--ci-field-fg);
    background: var(--ci-field-bg);
    font: var(--ci-font-weight-regular) var(--ci-font-size-sm) /
      var(--ci-line-height-ui) var(--ci-font-ui);
    transition:
      border-color var(--ci-duration-base) var(--ci-ease-standard),
      box-shadow var(--ci-duration-base) var(--ci-ease-standard);
    font-weight: var(--ci-font-weight-regular);
    line-height: var(--ci-type-data-leading);
    letter-spacing: var(--ci-type-data-tracking);
  }

  .ci-input::placeholder {
    color: var(--ci-field-placeholder);
  }

  .ci-input:hover {
    border-color: var(--ci-color-border-strong);
  }

  .ci-input[aria-invalid="true"] {
    border-color: var(--ci-color-danger);
  }

  .ci-search-field {
    display: flex;
    min-height: var(--ci-control-height-lg);
    align-items: center;
    gap: var(--ci-space-2);
    padding: 0 var(--ci-space-3);
    border: var(--ci-border-default) solid var(--ci-field-border);
    border-radius: var(--ci-radius-control);
    color: var(--ci-color-text-muted);
    background: var(--ci-field-bg);
  }

  .ci-search-field:hover {
    border-color: var(--ci-color-border-strong);
  }

  .ci-search-field:focus-within {
    border-color: var(--ci-color-focus);
    box-shadow: var(--ci-ring-field-focus);
  }

  .ci-search-field .ci-input {
    min-height: calc(var(--ci-control-height-lg) - 2px);
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
  }

  .ci-model-selector {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-pill);
    background: var(--ci-color-canvas);
  }

  .ci-model-selector__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--ci-radius-pill);
    color: var(--ci-color-foreground);
    background: transparent;
    font: var(--ci-font-weight-regular) var(--ci-font-size-base) /
      normal var(--ci-font-ui);
    cursor: pointer;
    transition:
      color var(--ci-duration-base) var(--ci-ease-standard),
      background var(--ci-duration-base) var(--ci-ease-standard);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }

  .ci-model-selector__item[aria-pressed="true"] {
    color: var(--ci-color-control-active-fg);
    background: var(--ci-color-control-active-bg);
  }

  .ci-model-selector__item:focus-visible {
    outline: none;
    box-shadow: var(--ci-ring-focus);
  }

  .ci-card {
    border: var(--ci-border-default) solid var(--ci-card-border);
    border-radius: var(--ci-radius-surface);
    color: var(--ci-color-foreground);
    background: var(--ci-card-bg);
    box-shadow: var(--ci-shadow-xs);
  }

  .ci-badge {
    display: inline-flex;
    min-height: var(--ci-badge-height);
    align-items: center;
    gap: var(--ci-space-1);
    padding: var(--ci-space-0-5) var(--ci-space-1-5);
    border-radius: var(--ci-radius-sm);
    color: var(--ci-color-accent-foreground);
    background: var(--ci-color-accent);
    font: var(--ci-font-weight-semibold) var(--ci-font-size-xs) /
      var(--ci-line-height-ui) var(--ci-font-ui);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }

  .ci-segmented {
    display: inline-flex;
    align-items: center;
    gap: var(--ci-space-1);
    padding: var(--ci-space-1);
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-pill);
    background: var(--ci-color-surface);
  }

  .ci-segmented__item {
    display: inline-flex;
    min-height: var(--ci-control-height-md);
    align-items: center;
    gap: var(--ci-space-1);
    padding: 0 var(--ci-space-3);
    border: 0;
    border-radius: var(--ci-radius-pill);
    color: var(--ci-color-text-muted);
    background: transparent;
    font: var(--ci-font-weight-medium) var(--ci-font-size-sm) /
      var(--ci-line-height-ui) var(--ci-font-ui);
    cursor: pointer;
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }

  .ci-segmented__item[aria-pressed="true"],
  .ci-segmented__item[data-active="true"] {
    color: var(--ci-color-control-active-fg);
    background: var(--ci-color-control-active-bg);
  }

  .ci-icon {
    width: var(--ci-icon-size-md);
    height: var(--ci-icon-size-md);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--ci-icon-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ci-icon--sm {
    width: var(--ci-icon-size-sm);
    height: var(--ci-icon-size-sm);
  }

  .ci-icon--lg {
    width: var(--ci-icon-size-lg);
    height: var(--ci-icon-size-lg);
  }

  .ci-button--outline {
    color: var(--ci-color-foreground);
    border-color: var(--ci-color-border);
    background: transparent;
  }

  .ci-button--outline:hover,
  .ci-button--secondary:hover,
  .ci-button--ghost:hover {
    color: var(--ci-color-heading);
    background: var(--ci-color-surface-muted);
  }

  .ci-button--destructive {
    color: var(--ci-color-danger-foreground);
    background: var(--ci-color-danger);
  }

  .ci-button--destructive:hover {
    color: var(--ci-color-danger);
    background: var(--ci-color-danger-bg);
  }

  /* Risky but reversible actions (force refresh, reset cooldowns, clear a cache).
     Hover fills with the warning ink, mirroring the destructive swap. */
  .ci-button--warning {
    color: var(--ci-color-warning);
    border-color: var(--ci-color-warning-border);
    background: var(--ci-color-warning-bg);
  }

  .ci-button--warning:hover {
    color: var(--ci-color-warning-bg);
    background: var(--ci-color-warning);
  }

  .ci-button--link {
    min-height: auto;
    padding: 0;
    border-radius: 0;
    color: var(--ci-color-foreground);
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .ci-button--link:hover {
    color: var(--ci-color-text-muted);
    background: transparent;
  }

  .ci-button--size-xs,
  .ci-button--size-icon-xs {
    min-height: var(--ci-control-height-sm);
    padding-inline: var(--ci-space-3);
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }

  .ci-button--size-sm,
  .ci-button--size-icon-sm,
  .ci-button--size-md {
    min-height: var(--ci-control-height-md);
    padding-inline: var(--ci-space-3);
  }

  .ci-button--size-lg {
    min-height: var(--ci-control-height-xl);
    padding-inline: var(--ci-space-5);
    font-size: var(--ci-font-size-md);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }

  .ci-button--size-icon,
  .ci-button--size-icon-xs,
  .ci-button--size-icon-sm,
  .ci-button--size-icon-lg {
    width: var(--ci-control-height-lg);
    padding-inline: 0;
  }

  .ci-button--size-icon-xs { width: var(--ci-control-height-sm); }
  .ci-button--size-icon-sm { width: var(--ci-control-height-md); }
  .ci-button--size-icon-lg { width: var(--ci-control-height-xl); }

  .ci-button > svg,
  .ci-button__spinner {
    width: var(--ci-icon-size-sm);
    height: var(--ci-icon-size-sm);
    flex: none;
  }

  .ci-button__spinner {
    animation: ci-spin 0.8s linear infinite;
  }

  .ci-spinner { position: relative; display: inline-flex; flex: none; width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); vertical-align: middle; }
  .ci-spinner[data-size="xs"] { width: var(--ci-icon-size-xs); height: var(--ci-icon-size-xs); }
  .ci-spinner[data-size="md"] { width: var(--ci-icon-size-md); height: var(--ci-icon-size-md); }
  .ci-spinner__graphic { display: block; width: 100%; height: 100%; animation: ci-spin 0.8s linear infinite; }

  .ci-badge--secondary {
    color: var(--ci-color-foreground);
    background: var(--ci-color-surface-muted);
  }

  .ci-badge--destructive {
    color: var(--ci-color-danger);
    background: var(--ci-color-danger-bg);
  }

  .ci-badge--outline {
    border: var(--ci-border-default) solid var(--ci-color-border);
    color: var(--ci-color-foreground);
    background: transparent;
  }

  .ci-badge--live {
    color: var(--ci-observed-body);
    background: var(--ci-color-live);
    font-size: var(--ci-font-size-sm);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }

  .ci-badge--pill {
    border-radius: var(--ci-radius-pill);
  }

  .ci-badge--live::before {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--ci-color-control-thumb-checked);
    content: "";
    animation: ci-live-blink 1.2s ease-in-out infinite;
  }

  .ci-badge--circle {
    width: var(--ci-badge-height);
    min-width: var(--ci-badge-height);
    height: var(--ci-badge-height);
    justify-content: center;
    padding: 0;
    border-radius: var(--ci-radius-pill);
  }

  .ci-badge > svg {
    width: var(--ci-icon-size-xs);
    height: var(--ci-icon-size-xs);
  }

  /* Status tones: AA ink on a subtle tint. They follow every variant rule, so a tone
     recolours any variant; border-color only shows on outline, which keeps its border. */
  .ci-badge--tone-neutral {
    border-color: var(--ci-color-border);
    color: var(--ci-color-foreground);
    background: var(--ci-color-surface-muted);
  }

  .ci-badge--tone-success {
    border-color: var(--ci-color-success);
    color: var(--ci-color-success);
    background: var(--ci-color-success-bg);
  }

  .ci-badge--tone-warning {
    border-color: var(--ci-color-warning);
    color: var(--ci-color-warning);
    background: var(--ci-color-warning-bg);
  }

  .ci-badge--tone-info {
    border-color: var(--ci-color-info);
    color: var(--ci-color-info);
    background: var(--ci-color-info-bg);
  }

  .ci-badge--tone-danger {
    border-color: var(--ci-color-danger);
    color: var(--ci-color-danger);
    background: var(--ci-color-danger-bg);
  }

  .ci-badge--tone-accent {
    border-color: var(--ci-badge-accent-ink);
    color: var(--ci-badge-accent-ink);
    background: var(--ci-color-accent-surface-strong);
  }

  .ci-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ci-space-1) var(--ci-space-4);
    padding: var(--ci-space-6) var(--ci-space-6) 0;
  }

  .ci-card__title {
    color: var(--ci-color-heading);
    font-size: var(--ci-font-size-lg);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-heading-leading);
    letter-spacing: var(--ci-type-heading-tracking);
  }

  .ci-card__description {
    grid-column: 1;
    color: var(--ci-color-text-muted);
    font-size: var(--ci-font-size-sm);
    font-weight: var(--ci-font-weight-regular);
    line-height: var(--ci-type-body-leading);
    letter-spacing: var(--ci-type-body-tracking);
  }

  .ci-card__action {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .ci-card__content {
    padding: var(--ci-space-6);
  }

  .ci-card__header + .ci-card__content {
    padding-top: var(--ci-space-4);
  }

  .ci-card__footer {
    display: flex;
    align-items: center;
    gap: var(--ci-space-3);
    padding: 0 var(--ci-space-6) var(--ci-space-6);
  }

  .ci-card__footer--between { justify-content: space-between; }
  .ci-card__footer--end { justify-content: flex-end; }

  .ci-input--sm {
    min-height: var(--ci-control-height-md);
  }

  .ci-input--error,
  .ci-input[aria-invalid="true"] {
    border-color: var(--ci-color-danger);
  }

  .ci-input-shell {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: var(--ci-control-height-lg);
    align-items: center;
    gap: var(--ci-space-2);
    padding-inline: var(--ci-space-3);
    border: var(--ci-border-default) solid var(--ci-field-border);
    border-radius: var(--ci-radius-control);
    color: var(--ci-color-text-muted);
    background: var(--ci-field-bg);
    transition:
      border-color var(--ci-duration-base) var(--ci-ease-standard),
      box-shadow var(--ci-duration-base) var(--ci-ease-standard);
  }

  .ci-input-shell:hover { border-color: var(--ci-color-border-strong); }
  .ci-input-shell:focus-within { border-color: var(--ci-color-focus); box-shadow: var(--ci-ring-field-focus); }
  .ci-input-shell--sm { min-height: var(--ci-control-height-md); }
  .ci-input-shell--error { border-color: var(--ci-color-danger); }
  .ci-input-shell .ci-input {
    min-height: calc(var(--ci-control-height-lg) - 2px);
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
  }

  .ci-input-shell--sm .ci-input { min-height: calc(var(--ci-control-height-md) - 2px); }
  .ci-input-shell__icon { display: inline-flex; flex: none; }
  .ci-input-shell__icon > svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); }

  /* Browser autofill paints its own background above the author background.
     An opaque inset surface preserves the normal field tokens without disabling
     suggestions, delaying transitions, or losing the keyboard focus indicator. */
  .ci-input:is(:autofill, :-webkit-autofill) {
    -webkit-text-fill-color: var(--ci-field-fg);
    caret-color: var(--ci-field-fg);
    box-shadow: inset 0 0 0 1000px var(--ci-field-bg);
  }

  .ci-input:is(:autofill, :-webkit-autofill):focus-visible {
    box-shadow: var(--ci-ring-field-focus), inset 0 0 0 1000px var(--ci-field-bg);
  }

  /* Icon inputs draw their focus ring on the shell, not the inner input. */
  .ci-input-shell .ci-input:is(:autofill, :-webkit-autofill):focus-visible {
    box-shadow: inset 0 0 0 1000px var(--ci-field-bg);
  }

  @media (forced-colors: active) {
    .ci-input:is(:autofill, :-webkit-autofill) {
      -webkit-text-fill-color: FieldText;
      caret-color: FieldText;
    }
  }

  .ci-label {
    display: inline-flex;
    align-items: center;
    gap: var(--ci-space-2);
    color: var(--ci-color-foreground);
    font: var(--ci-font-weight-medium) var(--ci-font-size-sm) /
      var(--ci-line-height-ui) var(--ci-font-ui);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }

  .ci-separator {
    flex: none;
    background: var(--ci-separator-color, var(--ci-color-border));
  }

  .ci-separator[data-orientation="horizontal"] {
    width: 100%;
    height: var(--ci-border-hairline);
  }

  .ci-separator[data-orientation="vertical"] {
    align-self: stretch;
    width: var(--ci-border-hairline);
  }

  .ci-separator-label {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--ci-space-3);
    color: var(--ci-color-text-muted);
    font-size: var(--ci-font-size-xs);
  }

  .ci-separator-label > span[aria-hidden="true"] {
    height: var(--ci-border-hairline);
    flex: 1;
    background: var(--ci-separator-color, var(--ci-color-border));
  }

  .ci-separator-label[data-align="start"] > span:first-child,
  .ci-separator-label[data-align="end"] > span:last-child {
    display: none;
  }

  .ci-skeleton {
    min-height: 1rem;
    border-radius: var(--ci-radius-control);
    background: var(--ci-color-surface-muted);
  }

  .ci-skeleton--circular { border-radius: 50%; }
  .ci-skeleton--text { height: 0.875rem; border-radius: var(--ci-radius-pill); }
  .ci-skeleton--pulse { animation: ci-pulse 1.6s ease-in-out infinite; }
  .ci-skeleton--wave {
    background: linear-gradient(90deg, var(--ci-color-surface-muted), var(--ci-color-surface), var(--ci-color-surface-muted));
    background-size: 200% 100%;
    animation: ci-wave 1.5s linear infinite;
  }

  .ci-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--ci-space-3);
    color: var(--ci-color-foreground);
    cursor: pointer;
  }

  .ci-switch[data-side="right"] { justify-content: space-between; }
  .ci-switch--card {
    width: 100%;
    padding: var(--ci-space-4);
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-surface);
    background: var(--ci-color-surface);
  }

  .ci-switch[data-disabled="true"] { opacity: 0.48; cursor: not-allowed; }
  .ci-switch[data-error="true"] { color: var(--ci-color-danger); }
  .ci-switch__control { position: relative; display: inline-flex; flex: none; cursor: pointer; }
  .ci-switch__control[data-disabled="true"] { cursor: not-allowed; }
  /* A standalone switch has no row to dim, so its control carries the disabled look. */
  .ci-switch__control[data-slot="switch"][data-disabled="true"] { opacity: 0.48; }
  /* The transparent native input covers the whole control: the visible track is the hit target with or without a <label>. */
  .ci-switch__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
  .ci-switch__track {
    position: relative;
    display: block;
    width: 2.75rem;
    height: 1.5rem;
    border: var(--ci-border-default) solid var(--ci-color-border);
    /* The switch retains its pill track when an appearance squares action corners. */
    border-radius: var(--ci-radius-full);
    background: var(--ci-color-surface-muted);
    transition: background var(--ci-duration-base) var(--ci-ease-standard);
  }

  .ci-switch__thumb {
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--ci-color-control-thumb);
    transition: transform var(--ci-duration-base) var(--ci-ease-emphasized);
  }

  .ci-switch__input:checked + .ci-switch__track { background: var(--ci-color-accent); }
  .ci-switch__input:checked + .ci-switch__track .ci-switch__thumb { background: var(--ci-color-control-thumb-checked); transform: translateX(1.25rem); }
  .ci-switch__input:focus-visible + .ci-switch__track { box-shadow: var(--ci-ring-focus); }
  .ci-switch__text { display: grid; gap: var(--ci-space-1); }
  .ci-switch__label { color: var(--ci-color-heading); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); transition: color var(--ci-duration-fast) var(--ci-ease-standard); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-switch:has(.ci-switch__input:not(:checked)) .ci-switch__label { color: var(--ci-color-text-muted); }
  .ci-switch__description { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-body-leading); letter-spacing: var(--ci-type-body-tracking); }

  .ci-textarea {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 6rem;
    resize: vertical;
    border: var(--ci-border-default) solid var(--ci-field-border);
    border-radius: var(--ci-radius-control);
    background: var(--ci-field-bg);
    color: var(--ci-field-fg);
    padding: var(--ci-space-3) var(--ci-space-4);
    font: var(--ci-font-weight-regular) var(--ci-font-size-sm) /
      var(--ci-line-height-ui) var(--ci-font-ui);
    line-height: var(--ci-type-data-leading);
    letter-spacing: var(--ci-type-data-tracking);
    outline: none;
    transition:
      border-color var(--ci-duration-fast) var(--ci-ease-standard),
      box-shadow var(--ci-duration-fast) var(--ci-ease-standard);
    font-weight: var(--ci-font-weight-regular);
  }

  .ci-textarea::placeholder { color: var(--ci-field-placeholder); }
  .ci-textarea:hover:not(:disabled) { border-color: var(--ci-color-border-strong); }
  .ci-textarea:focus-visible { border-color: var(--ci-color-focus); box-shadow: var(--ci-ring-field-focus); }
  .ci-textarea--error,
  .ci-textarea[aria-invalid="true"] { border-color: var(--ci-color-danger); }
  .ci-textarea:disabled { cursor: not-allowed; background: var(--ci-color-surface-muted); opacity: 0.56; }

  .ci-checkbox,
  .ci-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--ci-space-3);
    color: var(--ci-color-foreground);
    cursor: pointer;
  }

  .ci-checkbox[data-side="right"],
  .ci-radio[data-side="right"] { justify-content: space-between; }

  .ci-checkbox--card,
  .ci-radio--card {
    width: 100%;
    padding: var(--ci-space-4);
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-surface);
    background: var(--ci-color-surface);
    transition:
      background var(--ci-duration-fast) var(--ci-ease-standard),
      border-color var(--ci-duration-fast) var(--ci-ease-standard);
  }

  .ci-checkbox--card:hover:not([data-disabled="true"]),
  .ci-radio--card:hover:not([data-disabled="true"]) {
    background: linear-gradient(135deg, var(--ci-color-accent-surface-subtle), var(--ci-color-surface));
  }

  .ci-checkbox--card:has(.ci-checkbox__input:checked),
  .ci-radio--card:has(.ci-radio__input:checked) {
    background: linear-gradient(135deg, var(--ci-color-accent-surface-strong), var(--ci-color-accent-surface-subtle));
  }

  .ci-checkbox[data-disabled="true"],
  .ci-radio[data-disabled="true"] { cursor: not-allowed; opacity: 0.48; }
  .ci-checkbox[data-error="true"],
  .ci-radio[data-error="true"] { color: var(--ci-color-danger); border-color: var(--ci-color-danger); }

  .ci-checkbox__control,
  .ci-radio__control {
    position: relative;
    display: inline-flex;
    flex: none;
    margin-top: 0.0625rem;
  }

  .ci-checkbox__input,
  .ci-radio__input { position: absolute; width: 1px; height: 1px; opacity: 0; }

  .ci-checkbox__box,
  .ci-radio__box {
    display: grid;
    width: 1rem;
    height: 1rem;
    place-items: center;
    border: var(--ci-border-default) solid var(--ci-color-border);
    background: var(--ci-color-surface);
    color: var(--ci-color-control-active-fg);
    transition:
      background var(--ci-duration-fast) var(--ci-ease-standard),
      border-color var(--ci-duration-fast) var(--ci-ease-standard);
  }

  .ci-checkbox__box { border-radius: var(--ci-radius-sm); }
  .ci-radio__box { border-radius: 50%; }
  .ci-checkbox__check,
  .ci-checkbox__minus { display: none; width: 0.75rem; height: 0.75rem; }

  .ci-checkbox__input:checked + .ci-checkbox__box,
  .ci-checkbox__input:indeterminate + .ci-checkbox__box {
    border-color: var(--ci-color-control-active-bg);
    background: var(--ci-color-control-active-bg);
  }

  .ci-checkbox__input:checked + .ci-checkbox__box .ci-checkbox__check { display: block; }
  .ci-checkbox__input:indeterminate + .ci-checkbox__box .ci-checkbox__minus { display: block; }
  .ci-checkbox__input:focus-visible + .ci-checkbox__box,
  .ci-radio__input:focus-visible + .ci-radio__box { box-shadow: var(--ci-ring-focus); }

  .ci-checkbox__control[data-error="true"] .ci-checkbox__box,
  .ci-radio__control[data-error="true"] .ci-radio__box { border-color: var(--ci-color-danger); }

  .ci-radio__input:checked + .ci-radio__box {
    border: 0.25rem solid var(--ci-color-control-active-bg);
    background: var(--ci-color-surface);
  }

  .ci-checkbox__text,
  .ci-radio__text { display: grid; gap: var(--ci-space-1); }
  .ci-checkbox__label,
  .ci-radio__label { font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-checkbox__description,
  .ci-radio__description { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); line-height: var(--ci-type-body-leading); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-body-tracking); }

  .ci-checkbox-group,
  .ci-radio-group { display: grid; gap: var(--ci-space-3); }
  .ci-checkbox-group__head,
  .ci-radio-group__head { display: grid; gap: var(--ci-space-1); }
  .ci-checkbox-group__label,
  .ci-radio-group__label { font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-checkbox-group__description,
  .ci-radio-group__description { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-body-leading); letter-spacing: var(--ci-type-body-tracking); }
  .ci-checkbox-group__items,
  .ci-radio-group__items { display: grid; gap: var(--ci-space-3); }
  .ci-radio-group__items--horizontal { display: flex; flex-wrap: wrap; gap: var(--ci-space-5); }
  /* columns: up to N equal columns, each at least --ci-radio-group-min-item-width; fewer as the group narrows. */
  .ci-radio-group__items[data-layout="grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--ci-radio-group-min-item-width, 14rem), (100% - (var(--ci-radio-group-columns) - 1) * var(--ci-space-3)) / var(--ci-radio-group-columns))), 1fr));
    gap: var(--ci-space-3);
  }
  .ci-checkbox-group__error,
  .ci-radio-group__error { color: var(--ci-color-danger); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }

  .ci-select { position: relative; width: 100%; min-width: 0; max-width: 100%; }
  .ci-select[data-variant="capsule"] { width: fit-content; }
  .ci-select__trigger {
    display: flex;
    width: 100%;
    height: var(--ci-control-height-lg);
    align-items: center;
    justify-content: space-between;
    gap: var(--ci-space-3);
    border: var(--ci-border-default) solid var(--ci-field-border);
    border-radius: var(--ci-radius-control);
    background: var(--ci-field-bg);
    color: var(--ci-field-fg);
    padding: 0 var(--ci-space-4);
    font: var(--ci-font-weight-regular) var(--ci-font-size-sm) /
      var(--ci-line-height-ui) var(--ci-font-ui);
    letter-spacing: var(--ci-type-data-tracking);
    text-align: left;
    outline: none;
    cursor: pointer;
    transition:
      border-color var(--ci-duration-fast) var(--ci-ease-standard),
      box-shadow var(--ci-duration-fast) var(--ci-ease-standard);
    font-weight: var(--ci-font-weight-regular);
    line-height: var(--ci-type-data-leading);
  }

  .ci-select[data-size="sm"] .ci-select__trigger {
    height: var(--ci-control-height-md);
    padding-inline: var(--ci-space-3);
    font-size: var(--ci-font-size-sm);
    font-weight: var(--ci-font-weight-regular);
    line-height: var(--ci-type-data-leading);
    letter-spacing: var(--ci-type-data-tracking);
  }

  .ci-select[data-size="xs"] .ci-select__trigger {
    height: var(--ci-control-height-sm);
    gap: var(--ci-space-2);
    padding-inline: var(--ci-space-2);
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-regular);
    line-height: var(--ci-type-data-leading);
    letter-spacing: var(--ci-type-data-tracking);
  }

  .ci-select[data-size="xs"] .ci-select__icon {
    width: var(--ci-icon-size-xs);
    height: var(--ci-icon-size-xs);
  }

  .ci-select[data-variant="capsule"] .ci-select__trigger {
    width: auto;
    max-width: 100%;
    min-width: 0;
    border-radius: var(--ci-radius-pill);
    font-weight: var(--ci-font-weight-medium);
    white-space: nowrap;
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }

  .ci-select__trigger:hover:not(:disabled) { border-color: var(--ci-color-border-strong); }
  .ci-select__trigger:focus-visible,
  .ci-select__trigger[data-state="open"] { border-color: var(--ci-color-focus); box-shadow: var(--ci-ring-field-focus); }
  .ci-select__trigger--error,
  .ci-select__trigger[aria-invalid="true"] { border-color: var(--ci-color-danger); }
  .ci-select__trigger:disabled { cursor: not-allowed; background: var(--ci-color-surface-muted); opacity: 0.56; }
  .ci-select__value-group { display: inline-flex; min-width: 0; align-items: center; gap: var(--ci-space-2); }
  .ci-select__leading-icon { display: grid; width: var(--ci-icon-size-md); height: var(--ci-icon-size-md); flex: none; place-items: center; }
  .ci-select__leading-icon svg { width: 100%; height: 100%; }
  .ci-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ci-select__placeholder { color: var(--ci-field-placeholder); }
  .ci-select__icon { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); flex: none; fill: none; stroke: currentColor; stroke-width: var(--ci-icon-stroke-width); }

  /* NativeSelect: the platform <select> on the field tokens. Logical padding and inset keep the chevron at the inline end. */
  .ci-native-select {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font: var(--ci-font-weight-regular) var(--ci-font-size-sm) / var(--ci-type-data-leading) var(--ci-font-ui);
    letter-spacing: var(--ci-type-data-tracking);
  }
  .ci-native-select__control {
    appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: var(--ci-control-height-lg);
    margin: 0;
    padding-block: 0;
    padding-inline: var(--ci-space-4) calc(var(--ci-space-4) + var(--ci-icon-size-sm) + var(--ci-space-2));
    border: var(--ci-border-default) solid var(--ci-field-border);
    border-radius: var(--ci-radius-control);
    background: var(--ci-field-bg);
    color: var(--ci-field-fg);
    font: inherit;
    letter-spacing: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    transition:
      border-color var(--ci-duration-fast) var(--ci-ease-standard),
      box-shadow var(--ci-duration-fast) var(--ci-ease-standard);
  }
  .ci-native-select__control:hover:not(:disabled) { border-color: var(--ci-color-border-strong); }
  .ci-native-select__control:focus-visible { border-color: var(--ci-color-focus); box-shadow: var(--ci-ring-field-focus); }
  .ci-native-select[data-invalid] .ci-native-select__control { border-color: var(--ci-color-danger); box-shadow: var(--ci-ring-field-error); }
  .ci-native-select[data-invalid] .ci-native-select__control:focus-visible { box-shadow: var(--ci-ring-field-focus), var(--ci-ring-field-error); }
  .ci-native-select__control:disabled { cursor: not-allowed; background: var(--ci-color-surface-muted); opacity: 0.56; }
  .ci-native-select__control :is(option, optgroup) { background: var(--ci-field-bg); color: var(--ci-field-fg); }
  .ci-native-select__icon { position: absolute; top: 50%; inset-inline-end: var(--ci-space-4); width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); color: var(--ci-field-fg); transform: translateY(-50%); pointer-events: none; fill: none; stroke: currentColor; stroke-width: var(--ci-icon-stroke-width); }
  .ci-native-select[data-disabled] .ci-native-select__icon { opacity: 0.56; }
  .ci-native-select[data-size="sm"] .ci-native-select__control { height: var(--ci-control-height-md); padding-inline: var(--ci-space-3) calc(var(--ci-space-3) + var(--ci-icon-size-sm) + var(--ci-space-2)); }
  .ci-native-select[data-size="sm"] .ci-native-select__icon { inset-inline-end: var(--ci-space-3); }
  .ci-native-select[data-size="xs"] { font-size: var(--ci-font-size-xs); }
  .ci-native-select[data-size="xs"] .ci-native-select__control { height: var(--ci-control-height-sm); padding-inline: var(--ci-space-2) calc(var(--ci-space-2) + var(--ci-icon-size-xs) + var(--ci-space-1-5)); }
  .ci-native-select[data-size="xs"] .ci-native-select__icon { inset-inline-end: var(--ci-space-2); width: var(--ci-icon-size-xs); height: var(--ci-icon-size-xs); }

  .ci-select__content {
    z-index: var(--ci-z-dropdown);
    width: var(--radix-select-trigger-width);
    min-width: 12rem;
    max-height: var(--radix-select-content-available-height);
    overflow: hidden;
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-surface);
    background: var(--ci-color-surface);
    box-shadow: var(--ci-shadow-md);
    font-family: var(--ci-font-ui);
    animation: ci-menu-in var(--ci-duration-fast) var(--ci-ease-emphasized);
  }

  .ci-select__content[hidden] { display: none; }
  .ci-select__content[data-size="xs"] {
    min-width: var(--radix-select-trigger-width);
  }
  .ci-select__viewport { max-height: 18rem; overflow-y: auto; padding: var(--ci-space-2); }
  .ci-select__group + .ci-select__group { margin-top: var(--ci-space-2); }
  .ci-select__group-label {
    padding: var(--ci-space-2) var(--ci-space-3);
    color: var(--ci-color-text-muted);
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }

  .ci-select__item {
    position: relative;
    display: flex;
    min-height: var(--ci-control-height-md);
    align-items: center;
    padding: var(--ci-space-2) var(--ci-space-3);
    padding-right: var(--ci-space-8);
    border-radius: var(--ci-radius-md);
    font-size: var(--ci-font-size-sm);
    cursor: pointer;
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }

  .ci-select__content[data-size="xs"] .ci-select__viewport {
    padding: var(--ci-space-1);
  }

  .ci-select__content[data-size="xs"] .ci-select__item {
    min-height: var(--ci-control-height-sm);
    padding: var(--ci-space-1) var(--ci-space-2);
    padding-right: var(--ci-space-8);
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }

  .ci-select__content[data-density="compact"] .ci-select__item {
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }

  .ci-select__item:focus { outline: none; }
  .ci-select__item[data-highlighted] { background: var(--ci-color-surface-muted); }
  .ci-select__item[data-state="checked"] { color: var(--ci-color-heading); font-weight: var(--ci-font-weight-semibold); }
  .ci-select__item[data-disabled] { cursor: not-allowed; opacity: 0.42; }
  .ci-select__indicator { position: absolute; right: var(--ci-space-3); display: grid; width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); place-items: center; }
  .ci-select__indicator svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  .ci-select__separator { height: var(--ci-border-hairline); margin: var(--ci-space-2); background: var(--ci-color-border); }
  .ci-select__scroll { display: grid; height: 1.5rem; place-items: center; color: var(--ci-color-text-muted); }
  .ci-select__scroll svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); fill: none; stroke: currentColor; stroke-width: var(--ci-icon-stroke-width); }

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

  .ci-model-option__logo {
    display: inline-grid;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    place-items: center;
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-sm);
    background: var(--ci-color-surface);
    color: var(--ci-color-heading);
    font-size: 0.625rem;
    font-weight: var(--ci-font-weight-semibold);
  }

  .ci-number-ticker {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ci-field {
    display: grid;
    width: 100%;
    min-width: min(12rem, 100%);
    max-width: 100%;
    gap: var(--ci-space-2);
  }
  .ci-field--full { grid-column: 1 / -1; }
  .ci-field--width-compact { max-width: var(--ci-field-width-compact); }
  .ci-field--width-standard { max-width: var(--ci-field-width-standard); }
  .ci-field--width-wide { max-width: var(--ci-field-width-wide); }
  .ci-field--width-full { max-width: 100%; }
  /* The marker owns its spacing; avoid adding Label's flex gap a second time. */
  .ci-field > .ci-label:has(> .ci-field__required) { gap: 0; }
  .ci-field__required { margin-left: var(--ci-space-1); color: var(--ci-color-danger); }
  .ci-field__msg { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); line-height: var(--ci-type-caption-leading); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-field__msg--error { color: var(--ci-color-danger); }
  .ci-field__msg--success { color: var(--ci-color-success); }
  .ci-field-group { display: grid; width: 100%; min-width: 0; max-width: 100%; gap: var(--ci-space-5); }
  .ci-field-group--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ci-tabs {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--ci-space-4);
  }

  .ci-tabs--vertical { flex-direction: row; }
  .ci-tabs__list {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: var(--ci-space-0-5);
  }

  .ci-tabs--pill .ci-tabs__list {
    padding: var(--ci-space-1);
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-lg);
    background: var(--ci-color-surface-subtle);
  }

  .ci-tabs--capsule .ci-tabs__list {
    padding: var(--ci-space-0-5);
    border: var(--ci-border-default) solid var(--ci-field-border);
    border-radius: var(--ci-radius-pill);
    background: var(--ci-color-surface);
    box-shadow: var(--ci-shadow-xs);
  }

  .ci-tabs--underline .ci-tabs__list {
    border-bottom: var(--ci-border-default) solid var(--ci-color-border);
  }

  .ci-tabs--vertical .ci-tabs__list { flex-direction: column; align-items: stretch; }
  .ci-tabs__trigger {
    display: inline-flex;
    min-height: var(--ci-control-height-sm);
    align-items: center;
    justify-content: center;
    gap: var(--ci-space-2);
    padding: 0 var(--ci-space-3);
    border: var(--ci-border-default) solid transparent;
    border-radius: var(--ci-radius-md);
    background: transparent;
    color: var(--ci-color-text-muted);
    font: var(--ci-font-weight-medium) var(--ci-font-size-sm) / var(--ci-line-height-ui) var(--ci-font-ui);
    letter-spacing: var(--ci-type-control-tracking);
    white-space: nowrap;
    cursor: pointer;
    transition:
      background var(--ci-duration-fast) var(--ci-ease-standard),
      color var(--ci-duration-fast) var(--ci-ease-standard);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
  }

  .ci-tabs--capsule .ci-tabs__trigger {
    min-height: calc(
      var(--ci-control-height-md) - var(--ci-space-1) -
      var(--ci-border-default) - var(--ci-border-default)
    );
    border-radius: var(--ci-radius-pill);
  }

  .ci-tabs__trigger:hover:not(:disabled):not([data-state="active"]) { color: var(--ci-color-heading); }
  .ci-tabs--pill .ci-tabs__trigger[data-state="active"] {
    border-color: var(--ci-color-border);
    background: var(--ci-color-control-active-bg);
    color: var(--ci-color-control-active-fg);
  }

  .ci-tabs--capsule .ci-tabs__trigger[data-state="active"] {
    border-color: transparent;
    background: var(--ci-color-control-active-bg);
    color: var(--ci-color-control-active-fg);
  }

  .ci-tabs--underline .ci-tabs__trigger {
    margin-bottom: calc(0px - var(--ci-border-default));
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
  }

  .ci-tabs--underline .ci-tabs__trigger[data-state="active"] {
    border-bottom-color: var(--ci-color-heading);
    color: var(--ci-color-heading);
  }

  .ci-tabs__trigger:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-tabs__trigger:disabled { cursor: not-allowed; opacity: 0.45; }
  .ci-tabs__content { min-width: 0; outline: none; }
  .ci-tabs__content:focus-visible { box-shadow: var(--ci-ring-focus); }

  .ci-tabs--card .ci-tabs__list {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--ci-space-3);
  }
  .ci-tabs--card.ci-tabs--vertical .ci-tabs__list { grid-template-columns: minmax(0, 1fr); }
  .ci-tabs--card .ci-tabs__trigger {
    min-width: 0;
    min-height: 112px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--ci-space-2);
    padding: var(--ci-space-4);
    border-color: var(--ci-color-border);
    border-radius: var(--ci-radius-surface);
    background: var(--ci-color-surface);
    color: var(--ci-color-heading);
    text-align: left;
    white-space: normal;
  }
  .ci-tabs--card .ci-tabs__trigger:hover:not(:disabled):not([data-state="active"]) {
    border-color: var(--ci-color-text-muted);
    background: var(--ci-color-surface-subtle);
  }
  .ci-tabs--card .ci-tabs__trigger[data-state="active"] {
    border-color: var(--ci-color-accent-active);
    background: color-mix(in srgb, var(--ci-color-accent) 12%, var(--ci-color-surface));
    box-shadow: inset 0 0 0 var(--ci-border-default) var(--ci-color-accent-active);
  }
  .ci-tabs--card .ci-tabs__trigger:focus-visible {
    outline: var(--ci-border-strong) solid var(--ci-color-heading);
    outline-offset: 3px;
  }
  .ci-tabs__card-heading { display: flex; min-width: 0; align-items: center; gap: var(--ci-space-3); }
  .ci-tabs__card-icon {
    display: grid;
    width: var(--ci-space-8);
    height: var(--ci-space-8);
    flex: 0 0 var(--ci-space-8);
    place-items: center;
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-surface);
    background: var(--ci-color-surface);
    color: var(--ci-color-text-muted);
  }
  .ci-tabs__card-icon svg { width: var(--ci-space-5); height: var(--ci-space-5); }
  .ci-tabs__card-title { flex: 1; min-width: 0; font-size: var(--ci-font-size-base); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); overflow-wrap: anywhere; }
  .ci-tabs--card .ci-tabs__trigger[data-state="active"] .ci-tabs__card-title { font-weight: var(--ci-font-weight-semibold); }
  .ci-tabs__card-indicator {
    display: grid;
    width: var(--ci-space-5);
    height: var(--ci-space-5);
    flex: 0 0 var(--ci-space-5);
    place-items: center;
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-pill);
    background: var(--ci-color-surface);
  }
  .ci-tabs__card-indicator svg { width: var(--ci-space-3); height: var(--ci-space-3); opacity: 0; }
  .ci-tabs--card .ci-tabs__trigger[data-state="active"] .ci-tabs__card-indicator {
    border-color: var(--ci-color-accent-active);
    background: var(--ci-color-accent);
    color: var(--ci-color-accent-foreground);
  }
  .ci-tabs--card .ci-tabs__trigger[data-state="active"] .ci-tabs__card-indicator svg { opacity: 1; }
  .ci-tabs__card-description { color: var(--ci-color-text-muted); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-body-leading); letter-spacing: var(--ci-type-body-tracking); overflow-wrap: anywhere; }
  @media (max-width: 640px) {
    .ci-tabs--card .ci-tabs__list { grid-template-columns: minmax(0, 1fr); }
    .ci-tabs--card .ci-tabs__trigger { min-height: 104px; }
  }

  .ci-table-loading-region { position: relative; min-width: 0; width: 100%; }
  .ci-table-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-radius: inherit;
    background: var(--ci-color-surface-muted);
    backdrop-filter: blur(2px);
  }
  .ci-table-loading-overlay__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    height: min(240px, 35vh, 100%);
  }
  .ci-table-loading-state {
    min-height: 18rem;
    overflow: hidden;
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-surface);
    background: var(--ci-color-surface-muted);
  }
  .ci-table-loading-state__row {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--ci-space-6);
    padding: var(--ci-space-4);
    border-bottom: var(--ci-border-default) solid var(--ci-color-border);
  }
  .ci-table-loading-state__row span {
    height: var(--ci-space-3);
    border-radius: var(--ci-radius-sm);
    background: var(--ci-color-surface-muted);
  }

  .ci-table-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-surface);
    background: var(--ci-color-surface);
  }

  .ci-table-scroll-area { width: 100%; min-width: 0; }
  .ci-table-scroll-area > .ci-table-container,
  .ci-table-scroll-area > .ci-table-loading-region > [data-slot="table-loading-content"] > .ci-table-container { scrollbar-width: none; }
  .ci-table-scroll-area > .ci-table-container::-webkit-scrollbar,
  .ci-table-scroll-area > .ci-table-loading-region > [data-slot="table-loading-content"] > .ci-table-container::-webkit-scrollbar { display: none; }
  .ci-table-scrollbar {
    position: relative;
    display: block;
    width: 100%;
    height: var(--ci-space-3);
    outline: none;
  }
  .ci-table-scrollbar:focus-visible { box-shadow: var(--ci-ring-focus); }
  .ci-table-scrollbar__track {
    position: absolute;
    inset-inline: 12px;
    top: 50%;
    height: var(--ci-space-1);
    overflow: hidden;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
  }
  .ci-table-scrollbar__track[data-overflowing="false"] { visibility: hidden; }
  .ci-table-scrollbar__thumb {
    height: 100%;
    border-radius: var(--ci-radius-full);
    background: var(--ci-neutral-400);
    cursor: grab;
    touch-action: none;
  }
  .ci-table-scrollbar__thumb:active { cursor: grabbing; }

  .ci-table {
    width: 100%;
    min-width: var(--ci-table-min-width, 40rem);
    border-collapse: collapse;
    caption-side: bottom;
    color: var(--ci-color-foreground);
    font-size: var(--ci-font-size-sm);
    font-weight: var(--ci-font-weight-regular);
    line-height: var(--ci-type-body-leading);
    letter-spacing: var(--ci-type-body-tracking);
  }

  .ci-table__header { background: var(--ci-color-surface-subtle); }
  .ci-table__row { border-bottom: var(--ci-border-default) solid var(--ci-color-border-subtle); transition: background var(--ci-duration-fast) var(--ci-ease-standard); }
  .ci-table__body .ci-table__row:last-child { border-bottom: 0; }
  .ci-table__body .ci-table__row:hover { background: linear-gradient(90deg, var(--ci-color-accent-surface-subtle), var(--ci-color-surface)); }
  .ci-table__row[data-state="selected"] { background: var(--ci-color-accent-surface-strong); }
  .ci-table__head,
  .ci-table__cell { height: 2.75rem; padding: var(--ci-space-2) var(--ci-space-3); text-align: left; vertical-align: middle; white-space: nowrap; }
  .ci-table__head { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-table__cell--numeric,
  .ci-table__head--numeric { text-align: right; font-variant-numeric: tabular-nums; }
  .ci-table__cell--action,
  .ci-table__head--action { width: 3rem; padding-inline: var(--ci-space-2); text-align: center; }
  .ci-table__head--sticky-end,
  .ci-table__cell--sticky-end {
    position: sticky;
    right: 0;
    z-index: 2;
    box-shadow: -1px 0 0 var(--ci-color-border-subtle);
  }
  .ci-table__head--sticky-end {
    z-index: 3;
    background: var(--ci-color-surface-subtle);
  }
  .ci-table__cell--sticky-end { background: var(--ci-color-surface); }
  .ci-table__body .ci-table__row:hover > .ci-table__cell--sticky-end,
  .ci-table__row[data-state="selected"] > .ci-table__cell--sticky-end {
    background: var(--ci-color-surface-muted);
  }
  .ci-table__footer { border-top: var(--ci-border-default) solid var(--ci-color-border); background: var(--ci-color-surface-subtle); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-table__caption {
    padding: var(--ci-space-3);
    color: var(--ci-color-text-muted);
    font-size: var(--ci-font-size-xs);
    text-align: left;
    font-weight: var(--ci-font-weight-regular);
    line-height: var(--ci-type-caption-leading);
    letter-spacing: var(--ci-type-caption-tracking);
  }
  .ci-table-note {
    margin: var(--ci-space-2) 0 0;
    color: var(--ci-color-text-muted);
    font-size: var(--ci-font-size-xs);
    line-height: var(--ci-line-height-body);
    text-align: left;
  }
  .ci-table-action-link {
    display: inline-grid;
    width: var(--ci-control-height-sm);
    height: var(--ci-control-height-sm);
    place-items: center;
    border-radius: var(--ci-radius-control);
    color: var(--ci-color-text-muted);
    text-decoration: none;
    transition:
      background var(--ci-duration-fast) var(--ci-ease-standard),
      color var(--ci-duration-fast) var(--ci-ease-standard);
  }
  .ci-table-action-link svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  .ci-table-action-link:hover { background: linear-gradient(135deg, var(--ci-color-accent-surface-subtle), var(--ci-color-accent-surface-strong)); color: var(--ci-color-heading); }
  .ci-table-action-link:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .ci-model-identity { display: inline-flex; align-items: center; gap: var(--ci-space-2); min-width: 0; }
  .ci-model-identity__mark {
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    place-items: center;
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-sm);
    background: linear-gradient(145deg, var(--ci-color-surface), var(--ci-color-surface-muted));
    color: var(--ci-color-text-muted);
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-semibold);
  }
  .ci-model-identity__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .ci-stat-row {
    display: grid;
    width: 100%;
    overflow: hidden;
    grid-template-columns: repeat(var(--ci-stat-columns, 4), minmax(0, 1fr));
    gap: var(--ci-border-default);
    border: var(--ci-border-default) solid var(--ci-color-border-subtle);
    border-radius: var(--ci-radius-surface);
    background: var(--ci-color-border-subtle);
  }

  .ci-stat-row[data-columns="2"] { --ci-stat-columns: 2; }
  .ci-stat-row[data-columns="3"] { --ci-stat-columns: 3; }
  .ci-stat-row[data-columns="4"] { --ci-stat-columns: 4; }
  .ci-stat {
    min-width: 0;
    padding: var(--ci-space-5);
    background: var(--ci-color-surface);
  }

  .ci-stat__label {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--ci-space-2);
    color: var(--ci-color-heading);
    font-size: var(--ci-font-size-sm);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }
  .ci-stat__label-text { min-width: 0; }
  .ci-stat__icon {
    display: inline-flex;
    width: var(--ci-icon-size-md);
    height: var(--ci-icon-size-md);
    flex: none;
    align-items: center;
    justify-content: center;
    color: var(--ci-color-text-muted);
  }
  .ci-stat__icon > svg,
  .ci-stat__icon > img { width: 100%; height: 100%; }
  .ci-stat[data-label-variant="eyebrow"] .ci-stat__label {
    color: var(--ci-color-text-subtle);
    font-family: var(--ci-font-mono);
    font-size: var(--ci-type-stat-eyebrow-size);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
    text-transform: uppercase;
  }
  .ci-stat[data-label-variant="eyebrow"] .ci-stat__icon > svg {
    stroke-width: var(--ci-stat-eyebrow-icon-stroke-width);
  }
  .ci-stat[data-label-variant="eyebrow"] .ci-stat__value {
    margin-top: var(--ci-space-3);
    font-size: var(--ci-type-stat-eyebrow-value-size);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-metric-leading);
    letter-spacing: var(--ci-type-metric-tracking);
  }
  .ci-stat__value {
    margin-top: var(--ci-space-2);
    color: var(--ci-color-heading);
    font-family: var(--ci-font-display);
    font-size: clamp(2rem, 4vw, var(--ci-font-size-5xl));
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-metric-leading);
    letter-spacing: var(--ci-type-metric-tracking);
    white-space: nowrap;
  }

  /* Text headlines stay readable when model IDs or other names are long. */
  .ci-stat[data-value-format="text"] .ci-stat__value {
    font-family: var(--ci-font-ui);
    font-size: var(--ci-font-size-xl);
    line-height: var(--ci-type-body-leading);
    letter-spacing: var(--ci-type-body-tracking);
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    font-weight: var(--ci-font-weight-medium);
  }

  .ci-stat[data-value-format="text"][data-label-variant="eyebrow"] .ci-stat__value {
    min-height: calc(var(--ci-type-stat-eyebrow-value-size) * var(--ci-type-metric-leading));
  }

  .ci-stat--positive .ci-stat__value { color: var(--ci-color-success); }
  .ci-stat--critical .ci-stat__value { color: var(--ci-color-danger); }
  .ci-stat__hint { margin-top: var(--ci-space-2); color: var(--ci-color-text-subtle); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }

  .ci-progress { display: grid; gap: var(--ci-space-2); }
  .ci-progress__header { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-space-3); color: var(--ci-color-text-muted); font-size: var(--ci-font-size-sm); }
  .ci-progress__value { color: var(--ci-color-heading); font-weight: var(--ci-font-weight-semibold); font-variant-numeric: tabular-nums; }
  .ci-progress__track { width: 100%; height: 0.5rem; overflow: hidden; border-radius: var(--ci-radius-pill); background: var(--ci-color-surface-muted); }
  .ci-progress__indicator { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ci-color-accent-active), var(--ci-color-accent)); transition: width 900ms var(--ci-ease-emphasized); }
  .ci-progress__indicator[data-tone="success"] { background: var(--ci-color-success); }
  .ci-progress__indicator[data-tone="warning"] { background: var(--ci-color-warning); }
  .ci-progress__indicator[data-tone="danger"] { background: var(--ci-color-danger); }
  /* Stacked parts: square inner ends (the pill track clips the outer ones) and a 2px track-coloured seam.
     Every rendered part is non-zero and keeps at least 2px of its own colour; larger parts shrink to make room. */
  .ci-progress__track[data-segmented] { display: flex; }
  .ci-progress__segment { flex: 0 1 auto; min-width: 0.125rem; box-sizing: border-box; border-radius: 0; }
  .ci-progress__segment + .ci-progress__segment { min-width: 0.25rem; border-left: 0.125rem solid var(--ci-color-surface-muted); }
  .ci-progress[data-state="indeterminate"] .ci-progress__indicator { width: 40%; animation: ci-progress-indeterminate 1.4s var(--ci-ease-standard) infinite; }

  /* Data visualization */
  .ci-chart { --ci-chart-color: var(--ci-chart-1); position: relative; width: 100%; min-width: 0; margin: 0; color: var(--ci-color-text-muted); }
  .ci-chart--positive { --ci-chart-color: var(--ci-color-success); }
  .ci-chart--ink { --ci-chart-color: var(--ci-color-heading); }
  .ci-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
  .ci-chart__grid-line line { stroke: var(--ci-color-border-subtle); stroke-width: var(--ci-border-hairline); vector-effect: non-scaling-stroke; }
  .ci-chart__tooltip strong,
  .ci-chart__grid-line text,
  .ci-chart__x-label { fill: var(--ci-color-text-subtle); font-family: var(--ci-font-ui); font-size: 11px; letter-spacing: var(--ci-type-caption-tracking); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); }
  .ci-chart__grid-line text { text-anchor: end; }
  .ci-chart__x-label { text-anchor: middle; }
  .ci-chart__line { fill: none; stroke: var(--ci-chart-color); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; vector-effect: non-scaling-stroke; }
  .ci-chart__guide { stroke: var(--ci-color-border); stroke-dasharray: 3 4; stroke-width: var(--ci-border-hairline); vector-effect: non-scaling-stroke; }
  .ci-chart:not([data-visible]) .ci-chart__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .ci-chart[data-visible] .ci-chart__line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--ci-duration-slow) var(--ci-ease-emphasized); }
  .ci-chart__area { opacity: 0; transition: opacity var(--ci-duration-slow) var(--ci-ease-standard) var(--ci-duration-fast); }
  .ci-chart[data-visible] .ci-chart__area { opacity: 1; }
  .ci-chart__point circle { fill: var(--ci-color-surface); stroke: var(--ci-chart-color); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: fill var(--ci-duration-fast) var(--ci-ease-standard), transform var(--ci-duration-fast) var(--ci-ease-standard); vector-effect: non-scaling-stroke; }
  .ci-chart__point circle[data-highlight] { fill: var(--ci-chart-color); stroke: var(--ci-color-surface); }
  .ci-chart__point[data-active] circle { fill: var(--ci-chart-color); stroke: var(--ci-color-surface); transform: scale(1.45); }
  .ci-chart__bar rect { fill: var(--ci-chart-color); opacity: 0.72; transform-box: fill-box; transform-origin: center bottom; }
  .ci-chart__bar rect[data-sign="negative"] { transform-origin: center top; }
  .ci-chart__bar rect[data-highlight],
  .ci-chart__bar[data-active] rect { opacity: 1; }
  .ci-chart__interaction-zone { fill: transparent; cursor: crosshair; outline: none; }
  .ci-chart__interaction-zone:focus-visible { stroke: var(--ci-color-heading); stroke-dasharray: 3 4; stroke-width: var(--ci-border-default); vector-effect: non-scaling-stroke; }
  .ci-chart__tooltip {
    position: absolute;
    z-index: 2;
    display: grid;
    min-width: 9rem;
    gap: var(--ci-space-0-5);
    padding: var(--ci-space-3);
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-control);
    background: var(--ci-color-surface);
    box-shadow: var(--ci-shadow-md);
    color: var(--ci-color-heading);
    font-family: var(--ci-font-ui);
    pointer-events: none;
    transform: translate(-50%, calc(-100% - var(--ci-space-2)));
    font-weight: var(--ci-font-weight-regular);
    line-height: var(--ci-type-caption-leading);
    letter-spacing: var(--ci-type-caption-tracking);
  }
  .ci-chart__tooltip[data-align="start"] { transform: translate(0, calc(-100% - var(--ci-space-2))); }
  .ci-chart__tooltip[data-align="end"] { transform: translate(-100%, calc(-100% - var(--ci-space-2))); }
  .ci-chart__tooltip span { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-chart__tooltip strong { font-size: var(--ci-font-size-base); font-variant-numeric: tabular-nums; line-height: var(--ci-type-caption-leading); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-chart__tooltip small { color: var(--ci-color-text-subtle); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-chart:not([data-visible]) .ci-chart__bar rect { transform: scaleY(0); }
  .ci-chart[data-animate][data-visible] .ci-chart__bar rect { animation: ci-chart-bar-in var(--ci-duration-slow) var(--ci-ease-emphasized) both; }

  .ci-alert {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: var(--ci-space-3);
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-control);
    padding: var(--ci-space-4);
    background: var(--ci-color-surface);
    color: var(--ci-color-foreground);
  }
  .ci-alert__icon {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    place-items: center;
    border-radius: var(--ci-radius-full);
    background: var(--ci-color-surface-muted);
    color: var(--ci-color-heading);
  }
  .ci-alert__icon svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  .ci-alert__body { min-width: 0; flex: 1; }
  .ci-alert__title { color: var(--ci-color-heading); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-heading-leading); letter-spacing: var(--ci-type-heading-tracking); }
  .ci-alert__description { margin-top: var(--ci-space-1); color: var(--ci-color-text-muted); font-size: var(--ci-font-size-sm); line-height: var(--ci-type-body-leading); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-body-tracking); }
  .ci-alert__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ci-space-2);
    margin-top: var(--ci-space-3);
  }
  .ci-alert__dismiss {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: none;
    margin: -0.25rem -0.25rem 0 0;
    place-items: center;
    border: 0;
    border-radius: var(--ci-radius-full);
    background: transparent;
    color: var(--ci-color-text-muted);
    cursor: pointer;
    transition: background-color var(--ci-duration-fast) var(--ci-ease-standard), color var(--ci-duration-fast) var(--ci-ease-standard);
  }
  .ci-alert__dismiss:hover { background: linear-gradient(135deg, var(--ci-color-accent-surface-strong), var(--ci-color-accent-surface-subtle)); color: var(--ci-color-heading); }
  .ci-alert__dismiss:focus-visible { outline: var(--ci-focus-ring-width) solid var(--ci-color-focus-ring); outline-offset: var(--ci-focus-ring-offset); }
  .ci-alert__dismiss svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  .ci-alert--info { background: linear-gradient(120deg, var(--ci-color-info-bg), var(--ci-color-surface)); }
  .ci-alert--info .ci-alert__icon { background: var(--ci-color-info-bg); color: var(--ci-color-info); }
  .ci-alert--success { background: linear-gradient(120deg, var(--ci-color-success-bg), var(--ci-color-surface)); }
  .ci-alert--success .ci-alert__icon { background: var(--ci-color-success-bg); color: var(--ci-color-success); }
  .ci-alert--warning { background: linear-gradient(120deg, var(--ci-color-warning-bg), var(--ci-color-surface)); }
  .ci-alert--warning .ci-alert__icon { background: var(--ci-color-warning-bg); color: var(--ci-color-warning); }
  .ci-alert--critical { border-color: var(--ci-color-danger); background: linear-gradient(120deg, var(--ci-color-danger-bg), var(--ci-color-surface)); }
  .ci-alert--critical .ci-alert__icon { background: var(--ci-color-danger-bg); color: var(--ci-color-danger); }

  .ci-alert[data-layout="inline"] { align-items: center; padding: var(--ci-space-2) var(--ci-space-3); }
  .ci-alert[data-layout="inline"] .ci-alert__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-space-2) var(--ci-space-4); }
  .ci-alert[data-layout="inline"] .ci-alert__message { display: flex; flex: 1 1 20rem; flex-wrap: wrap; align-items: baseline; gap: var(--ci-space-1) var(--ci-space-2); }
  .ci-alert[data-layout="inline"] .ci-alert__description { margin-top: 0; }
  .ci-alert[data-layout="inline"] .ci-alert__actions { flex: none; margin-top: 0; margin-left: auto; }
  .ci-alert[data-layout="inline"] .ci-alert__icon { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); background: transparent; }
  .ci-alert[data-layout="inline"].ci-alert--warning { background: var(--ci-color-warning-bg); }

  .ci-tooltip { position: relative; display: inline-flex; }
  .ci-tooltip__content {
    z-index: var(--ci-z-dropdown);
    width: max-content;
    max-width: 16rem;
    border-radius: var(--ci-radius-sm);
    padding: var(--ci-space-2) var(--ci-space-3);
    background: var(--ci-color-surface-inverse);
    color: var(--ci-color-text-inverse);
    box-shadow: var(--ci-shadow-md);
    font: var(--ci-font-weight-medium) var(--ci-font-size-xs) / var(--ci-line-height-ui) var(--ci-font-ui);
    animation: ci-overlay-in var(--ci-duration-fast) var(--ci-ease-emphasized);
    font-weight: var(--ci-font-weight-regular);
    line-height: var(--ci-type-caption-leading);
    letter-spacing: var(--ci-type-caption-tracking);
  }
  .ci-dialog__overlay {
    position: fixed;
    z-index: var(--ci-z-modal);
    inset: 0;
    background: var(--ci-color-overlay);
    backdrop-filter: blur(4px);
    animation: ci-fade-in var(--ci-duration-base) var(--ci-ease-standard);
  }
  .ci-dialog {
    position: fixed;
    z-index: var(--ci-z-modal);
    top: 50%;
    left: 50%;
    width: calc(100vw - 3rem);
    max-width: 30rem;
    max-height: min(42rem, calc(100vh - 3rem));
    overflow-y: auto;
    border: var(--ci-border-default) solid var(--ci-color-border-strong);
    border-radius: var(--ci-radius-surface);
    padding: var(--ci-space-6);
    background: var(--ci-color-surface);
    color: var(--ci-color-foreground);
    box-shadow: var(--ci-shadow-lg);
    font-family: var(--ci-font-ui);
    outline: none;
    transform: translate(-50%, -50%);
    animation: ci-dialog-in var(--ci-duration-base) var(--ci-ease-emphasized);
  }
  .ci-dialog__header { display: grid; gap: var(--ci-space-2); padding-right: var(--ci-space-8); }
  .ci-dialog__title { margin: 0; color: var(--ci-color-heading); font-family: var(--ci-font-display); font-size: var(--ci-font-size-3xl); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-heading-leading); letter-spacing: var(--ci-type-heading-tracking); }
  .ci-dialog__description { margin: 0; color: var(--ci-color-text-muted); font-size: var(--ci-font-size-sm); line-height: var(--ci-type-body-leading); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-body-tracking); }
  .ci-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ci-space-2); margin-top: var(--ci-space-6); }
  .ci-dialog__close {
    position: absolute;
    top: var(--ci-space-4);
    right: var(--ci-space-4);
    display: grid;
    width: var(--ci-control-height-md);
    height: var(--ci-control-height-md);
    place-items: center;
    border: 0;
    border-radius: var(--ci-radius-full);
    background: transparent;
    color: var(--ci-color-text-muted);
    cursor: pointer;
  }
  .ci-dialog__close:hover { background: linear-gradient(135deg, var(--ci-color-accent-surface-subtle), var(--ci-color-accent-surface-strong)); color: var(--ci-color-heading); }
  .ci-dialog__close:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-dialog__close svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  /* No close button to clear, on either side. */
  .ci-dialog[role="alertdialog"] .ci-dialog__header { padding-right: 0; }

  .ci-popover {
    z-index: var(--ci-z-dropdown);
    width: min(22rem, calc(100vw - 1rem));
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-surface);
    padding: var(--ci-space-4);
    background: var(--ci-color-surface);
    color: var(--ci-color-foreground);
    box-shadow: var(--ci-shadow-md);
    font-family: var(--ci-font-ui);
    outline: none;
    animation: ci-popover-in var(--ci-duration-base) var(--ci-ease-emphasized);
  }
  .ci-popover__title { margin: 0; color: var(--ci-color-heading); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-heading-leading); letter-spacing: var(--ci-type-heading-tracking); }
  .ci-popover__description { margin: var(--ci-space-1) 0 0; color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); line-height: var(--ci-type-body-leading); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-body-tracking); }
  .ci-popover__footer { display: flex; justify-content: flex-end; gap: var(--ci-space-2); margin-top: var(--ci-space-4); }
  .ci-popover__arrow { fill: var(--ci-color-surface); stroke: var(--ci-color-border); stroke-width: 1; stroke-linejoin: round; }

  .ci-menu {
    z-index: var(--ci-z-dropdown);
    min-width: 13rem;
    max-width: min(20rem, calc(100vw - 1rem));
    overflow: hidden;
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-control);
    padding: var(--ci-space-1);
    background: var(--ci-color-surface);
    color: var(--ci-color-foreground);
    box-shadow: var(--ci-shadow-md);
    font-family: var(--ci-font-ui);
    outline: none;
    animation: ci-menu-in var(--ci-duration-fast) var(--ci-ease-emphasized);
  }
  .ci-menu__item {
    display: flex;
    min-height: var(--ci-control-height-md);
    align-items: center;
    gap: var(--ci-space-2);
    border-radius: var(--ci-radius-sm);
    padding: var(--ci-space-2) var(--ci-space-3);
    color: var(--ci-color-foreground);
    font-size: var(--ci-font-size-sm);
    line-height: var(--ci-type-control-leading);
    cursor: pointer;
    outline: none;
    font-weight: var(--ci-font-weight-medium);
    letter-spacing: var(--ci-type-control-tracking);
  }
  .ci-menu__item:hover,
  .ci-menu__item:focus,
  .ci-menu__item[data-highlighted] { background: var(--ci-color-surface-muted); color: var(--ci-color-heading); }
  .ci-menu__item[data-variant="destructive"] { color: var(--ci-color-danger); }
  .ci-menu__item[data-variant="destructive"]:hover,
  .ci-menu__item[data-variant="destructive"]:focus { background: var(--ci-color-danger-bg); }
  .ci-menu__item[data-disabled] { opacity: 0.45; pointer-events: none; }
  .ci-menu__label { min-width: 0; flex: 1; }
  .ci-menu__icon,
  .ci-menu__indicator { display: grid; width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); flex: none; place-items: center; }
  .ci-menu__icon svg,
  .ci-menu__indicator svg { width: 100%; height: 100%; stroke-width: var(--ci-icon-stroke-width); }
  .ci-menu__indicator svg { width: 0.875rem; height: 0.875rem; fill: none; stroke-width: 2.4; }
  .ci-menu__item[role="menuitemradio"] .ci-menu__indicator svg { width: 0.5rem; height: 0.5rem; fill: currentColor; stroke: none; }
  .ci-menu__shortcut { margin-left: var(--ci-space-4); color: var(--ci-color-text-subtle); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-menu__section-label { padding: var(--ci-space-2) var(--ci-space-3) var(--ci-space-1); color: var(--ci-color-text-subtle); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-medium); text-transform: uppercase; line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-menu__separator { height: 1px; margin: var(--ci-space-1) calc(var(--ci-space-1) * -1); background: var(--ci-color-border-subtle); }

  /* Guidance highlights belong to the existing control, separate from its Toast. */
  .ci-control-highlight { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; isolation: isolate; }
  .ci-control-highlight[data-active] { color: var(--ci-color-heading); }
  .ci-control-highlight[data-active]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc(-1 * var(--ci-space-2));
    border: 2px solid var(--ci-color-accent-active);
    border-radius: var(--ci-radius-full);
    background: var(--ci-color-accent-surface-range);
    box-shadow: 0 0 0 var(--ci-space-1) var(--ci-color-surface);
    pointer-events: none;
  }

  .ci-toaster {
    position: fixed;
    z-index: var(--ci-z-toast);
    display: flex;
    width: min(24rem, calc(100vw - 2rem));
    flex-direction: column;
    gap: var(--ci-space-2);
    pointer-events: none;
  }
  .ci-toaster--top-left { top: var(--ci-space-4); left: var(--ci-space-4); }
  .ci-toaster--top-center { top: var(--ci-space-4); left: 50%; transform: translateX(-50%); }
  .ci-toaster--top-right { top: var(--ci-space-4); right: var(--ci-space-4); }
  .ci-toaster--bottom-left { bottom: var(--ci-space-4); left: var(--ci-space-4); }
  .ci-toaster--bottom-center { bottom: var(--ci-space-4); left: 50%; transform: translateX(-50%); }
  .ci-toaster--bottom-right { right: var(--ci-space-4); bottom: var(--ci-space-4); }
  .ci-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--ci-space-3);
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-control);
    padding: var(--ci-space-3);
    background: var(--ci-color-surface);
    color: var(--ci-color-foreground);
    box-shadow: var(--ci-shadow-md);
    font-family: var(--ci-font-ui);
    pointer-events: auto;
    animation: ci-toast-in var(--ci-duration-base) var(--ci-ease-emphasized);
  }
  .ci-toast[data-variant="success"] { background: linear-gradient(110deg, var(--ci-color-success-bg), var(--ci-color-surface)); }
  .ci-toast[data-variant="warning"] { background: linear-gradient(110deg, var(--ci-color-warning-bg), var(--ci-color-surface)); }
  .ci-toast[data-variant="error"] { border-color: var(--ci-color-danger); background: linear-gradient(110deg, var(--ci-color-danger-bg), var(--ci-color-surface)); }
  .ci-toast[data-variant="info"] { background: linear-gradient(110deg, var(--ci-color-info-bg), var(--ci-color-surface)); }
  /* Keep the opaque surface beneath the translucent dark-mode accent. */
  .ci-toast[data-variant="accent"],
  .ci-toast[data-variant="loading"] { background-image: linear-gradient(110deg, var(--ci-color-accent-surface-subtle), var(--ci-color-surface)); }
  .ci-toast--leaving { opacity: 0; transform: translateX(0.5rem); transition: opacity var(--ci-duration-fast), transform var(--ci-duration-fast); }
  .ci-toast__icon { display: grid; width: 1.75rem; height: 1.75rem; flex: none; place-items: center; border-radius: var(--ci-radius-full); background: var(--ci-color-surface-muted); }
  .ci-toast[data-variant="success"] .ci-toast__icon { color: var(--ci-color-success); }
  .ci-toast[data-variant="loading"] .ci-toast__icon { color: var(--ci-color-heading); }
  .ci-toast__spinner { animation: ci-spin 0.9s linear infinite; }
  .ci-toast[data-variant="warning"] .ci-toast__icon { color: var(--ci-color-warning); }
  .ci-toast[data-variant="error"] .ci-toast__icon { color: var(--ci-color-danger); }
  .ci-toast[data-variant="info"] .ci-toast__icon { color: var(--ci-color-info); }
  .ci-toast__icon svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  .ci-toast__content { min-width: 0; flex: 1; }
  .ci-feature-notice { --ci-feature-notice-width: 384px; position: relative; display: inline-block; max-width: 100%; }
  .ci-feature-notice__content { position: absolute; z-index: var(--ci-z-toast); width: min(var(--ci-feature-notice-width, 384px), calc(100vw - 2rem)); }
  .ci-feature-notice[data-side="bottom"] > .ci-feature-notice__content { top: calc(100% + var(--ci-space-3)); }
  .ci-feature-notice[data-side="top"] > .ci-feature-notice__content { bottom: calc(100% + var(--ci-space-3)); }
  .ci-feature-notice[data-align="start"] > .ci-feature-notice__content { left: 0; right: auto; }
  .ci-feature-notice[data-align="end"] > .ci-feature-notice__content { right: 0; left: auto; }
  /* Brand tints: brandTintVars() supplies the brand and a per-scheme ink and border on the element.
     Headings and secondary text move to the ink because the neutrals are not guaranteed on an
     arbitrary tint; body text stays on the neutral foreground, which is. */
  .ci-brand-tint {
    --ci-brand-subtle: color-mix(in srgb, var(--ci-brand) 18%, var(--ci-color-surface));
    --ci-brand-ink: var(--ci-scheme-dark, var(--ci-brand-ink-light)) var(--ci-scheme-light, var(--ci-brand-ink-dark));
    --ci-brand-border: var(--ci-scheme-dark, var(--ci-brand-border-light)) var(--ci-scheme-light, var(--ci-brand-border-dark));
    --ci-color-heading: var(--ci-brand-ink);
    --ci-color-text-muted: var(--ci-brand-ink);
    --ci-color-text-subtle: var(--ci-brand-ink);
  }
  .ci-card.ci-brand-tint { --ci-card-bg: var(--ci-brand-subtle); --ci-card-border: var(--ci-brand-border); }
  .ci-feature-notice__content.ci-brand-tint .ci-toast { border-color: var(--ci-brand-border); background: var(--ci-brand-subtle); }
  .ci-feature-notice__title { display: flex; align-items: center; gap: var(--ci-space-2); }
  .ci-feature-notice__leading { display: inline-flex; flex-shrink: 0; }
  .ci-feature-notice__title-text { min-width: 0; overflow-wrap: anywhere; }
  @media (max-width: 639px) {
    .ci-feature-notice[data-mobile-align="start"] > .ci-feature-notice__content { left: 0; right: auto; }
    .ci-feature-notice[data-mobile-align="end"] > .ci-feature-notice__content { right: 0; left: auto; }
  }

  .ci-toast__title { color: var(--ci-color-heading); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-heading-leading); letter-spacing: var(--ci-type-heading-tracking); }
  .ci-toast__description { margin-top: var(--ci-space-1); color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); line-height: var(--ci-type-body-leading); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-body-tracking); }
  .ci-toast__close { display: grid; width: 1.75rem; height: 1.75rem; flex: none; place-items: center; border: 0; border-radius: var(--ci-radius-full); background: transparent; color: var(--ci-color-text-subtle); cursor: pointer; }
  .ci-toast__close:hover { background: var(--ci-color-surface-muted); color: var(--ci-color-heading); }
  .ci-toast__close:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-toast__close svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }

  .ci-avatar {
    --ci-avatar-size: 2.5rem;
    position: relative;
    display: inline-grid;
    width: var(--ci-avatar-size);
    height: var(--ci-avatar-size);
    flex: none;
    place-items: center;
    overflow: hidden;
    border: var(--ci-border-default) solid var(--ci-color-border);
    background: linear-gradient(145deg, var(--ci-color-accent-surface-strong), var(--ci-color-surface));
    color: var(--ci-color-heading);
    font-family: var(--ci-font-ui);
    font-size: calc(var(--ci-avatar-size) * 0.32);
    font-weight: var(--ci-font-weight-semibold);
  }
  .ci-avatar--xs { --ci-avatar-size: 1.5rem; }
  .ci-avatar--sm { --ci-avatar-size: 2rem; }
  .ci-avatar--md { --ci-avatar-size: 2.5rem; }
  .ci-avatar--lg { --ci-avatar-size: 3rem; }
  .ci-avatar--xl { --ci-avatar-size: 4rem; }
  .ci-avatar--circle { border-radius: var(--ci-radius-full); }
  .ci-avatar--square { border-radius: var(--ci-radius-control); }
  .ci-avatar__image,
  .ci-avatar__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
  .ci-avatar__image { z-index: 1; object-fit: cover; }
  .ci-avatar__fallback { display: grid; place-items: center; }
  .ci-avatar-group { display: flex; align-items: center; padding-left: var(--ci-space-2); }
  .ci-avatar-group__item { display: inline-flex; margin-left: calc(var(--ci-space-2) * -1); }
  .ci-avatar-group__item .ci-avatar { box-shadow: 0 0 0 2px var(--ci-color-background); }

  .ci-accordion { width: 100%; font-family: var(--ci-font-ui); }
  .ci-accordion--bordered { overflow: hidden; border: var(--ci-border-default) solid var(--ci-color-border); border-radius: var(--ci-radius-surface); background: var(--ci-color-surface); }
  .ci-accordion__item + .ci-accordion__item { border-top: var(--ci-border-hairline) solid var(--ci-color-border-subtle); }
  .ci-accordion--plain .ci-accordion__item { border-bottom: var(--ci-border-hairline) solid var(--ci-color-border-subtle); }
  .ci-accordion__header { margin: 0; }
  .ci-accordion__trigger {
    display: flex;
    width: 100%;
    min-height: 3.25rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--ci-space-4);
    border: 0;
    padding: var(--ci-space-3) var(--ci-space-4);
    background: transparent;
    color: var(--ci-color-heading);
    font-family: var(--ci-font-ui);
    font-size: var(--ci-font-size-sm);
    font-weight: var(--ci-font-weight-medium);
    text-align: left;
    cursor: pointer;
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }
  .ci-accordion__trigger:hover { background: linear-gradient(100deg, var(--ci-color-accent-surface-subtle), transparent); }
  .ci-accordion__trigger:focus-visible { position: relative; z-index: 1; outline: none; box-shadow: inset var(--ci-ring-focus); }
  .ci-accordion__trigger:disabled { color: var(--ci-color-text-subtle); cursor: not-allowed; }
  .ci-accordion__icon { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); flex: none; color: var(--ci-color-text-muted); stroke-width: var(--ci-icon-stroke-width); transition: transform var(--ci-duration-base) var(--ci-ease-emphasized); }
  .ci-accordion__trigger[data-state="open"] .ci-accordion__icon { transform: rotate(180deg); }
  .ci-accordion__content { display: grid; grid-template-rows: 0fr; color: var(--ci-color-text-muted); font-size: var(--ci-font-size-sm); line-height: var(--ci-type-reading-leading); transition: grid-template-rows var(--ci-duration-base) var(--ci-ease-emphasized); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-reading-tracking); }
  .ci-accordion__content[data-state="open"] { grid-template-rows: 1fr; }
  .ci-accordion__content-inner { overflow: hidden; }
  .ci-accordion__body { padding: 0 var(--ci-space-4) var(--ci-space-4); }

  .ci-loading {
    display: flex;
    align-items: center;
    gap: var(--ci-space-3);
    color: var(--ci-color-foreground);
    font-family: var(--ci-font-ui);
  }
  .ci-loading--panel { min-height: 12rem; justify-content: center; border: var(--ci-border-default) solid var(--ci-color-border); border-radius: var(--ci-radius-surface); padding: var(--ci-space-8); background: radial-gradient(circle at 50% 0%, var(--ci-color-neutral-tint), transparent 56%), var(--ci-color-surface); }
  .ci-loading__grid { display: grid; width: 1.75rem; height: 1.75rem; flex: none; grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .ci-loading__grid > span { border-radius: 999px; background: var(--ci-color-heading); animation: ci-loading-cell 900ms ease-in-out infinite; animation-delay: calc(var(--ci-loading-index) * 70ms); }
  .ci-loading__grid > span:nth-child(even) { background: var(--ci-color-loading-cell-muted); }
  .ci-loading__content { display: grid; gap: var(--ci-space-0-5); }
  .ci-loading__label { color: var(--ci-color-heading); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-loading__description { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-body-leading); letter-spacing: var(--ci-type-body-tracking); }
  .ci-loading__elapsed { margin-left: auto; color: var(--ci-color-text-subtle); font-size: var(--ci-font-size-xs); font-variant-numeric: tabular-nums; font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }

  .ci-empty-state {
    display: grid;
    min-height: 16rem;
    place-items: center;
    align-content: center;
    gap: var(--ci-space-4);
    border: var(--ci-border-default) solid var(--ci-color-border);
    border-radius: var(--ci-radius-surface);
    padding: var(--ci-space-8);
    background: radial-gradient(circle at 50% 0%, var(--ci-color-accent-surface-subtle), transparent 58%), var(--ci-color-surface);
    color: var(--ci-color-foreground);
    font-family: var(--ci-font-ui);
    text-align: center;
  }
  .ci-empty-state[data-compact="true"] { min-height: 10rem; padding: var(--ci-space-5); }
  .ci-empty-state__icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: var(--ci-border-default) solid var(--ci-color-border); border-radius: var(--ci-radius-control); background: var(--ci-color-surface); color: var(--ci-color-heading); }
  .ci-empty-state__icon svg { width: var(--ci-icon-size-md); height: var(--ci-icon-size-md); stroke-width: var(--ci-icon-stroke-width); }
  .ci-empty-state__content { display: grid; max-width: 28rem; gap: var(--ci-space-1); }
  .ci-empty-state__title { margin: 0; color: var(--ci-color-heading); font-family: var(--ci-font-display); font-size: var(--ci-font-size-2xl); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-heading-leading); letter-spacing: var(--ci-type-heading-tracking); }
  .ci-empty-state__description { margin: 0; color: var(--ci-color-text-muted); font-size: var(--ci-font-size-sm); line-height: var(--ci-type-body-leading); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-body-tracking); }
  .ci-empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ci-space-2); }

  .ci-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0; margin: -1px; clip: rect(0, 0, 0, 0); white-space: nowrap; }

  .ci-kbd { position: relative; display: inline-flex; box-sizing: border-box; min-width: var(--ci-space-5); height: var(--ci-space-5); align-items: center; justify-content: center; padding: 0 var(--ci-space-1); border: var(--ci-border-hairline) solid var(--ci-color-border); border-radius: var(--ci-radius-sm); background: var(--ci-color-surface-subtle); box-shadow: 0 var(--ci-border-hairline) 0 var(--ci-color-border-subtle); color: var(--ci-color-text-muted); font-family: var(--ci-font-ui); font-size: var(--ci-font-size-xs); font-style: normal; white-space: nowrap; text-transform: none; }
  .ci-kbd[data-size="md"],
  .ci-kbd-group[data-size="md"] .ci-kbd:not([data-size]) { min-width: var(--ci-space-6); height: var(--ci-space-6); padding-inline: var(--ci-space-1-5); font-size: var(--ci-font-size-sm); }
  .ci-kbd-group { display: inline-flex; align-items: center; gap: var(--ci-space-1); font-family: var(--ci-font-ui); font-size: var(--ci-font-size-xs); font-style: normal; white-space: nowrap; }
  .ci-kbd-group[data-size="md"] { font-size: var(--ci-font-size-sm); }

  .ci-command { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; background: var(--ci-color-surface); color: var(--ci-color-foreground); font-family: var(--ci-font-ui); }
  /* The palette fills its host: rows run edge to edge, and the host's rounded corners clip them. */
  :is(.ci-dialog, .ci-popover):has(> .ci-command) { overflow: hidden; padding: 0; }
  .ci-command__search { display: flex; flex: none; min-height: var(--ci-control-height-xl); align-items: center; gap: var(--ci-space-2); padding-inline: var(--ci-space-3); border-block-end: var(--ci-border-default) solid var(--ci-color-border-subtle); color: var(--ci-color-text-muted); }
  .ci-command__search:focus-within { border-block-end-color: var(--ci-color-focus); }
  .ci-command__search > svg { flex: none; width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  .ci-command__input { flex: 1; min-width: 0; height: var(--ci-control-height-md); padding: 0; border: 0; background: transparent; color: var(--ci-color-foreground); font: inherit; font-size: var(--ci-font-size-sm); line-height: var(--ci-type-data-leading); letter-spacing: var(--ci-type-data-tracking); outline: none; }
  .ci-command__input::placeholder { color: var(--ci-color-text-muted); opacity: 1; }
  .ci-command__search-trailing { display: inline-flex; flex: none; align-items: center; gap: var(--ci-space-1); }
  .ci-command__list { max-height: var(--ci-command-list-max-height, 20rem); padding: var(--ci-space-1); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--ci-space-8) var(--ci-space-1); }
  .ci-command__list[hidden],
  .ci-command__group[hidden] { display: none; }
  .ci-command__group-heading { position: sticky; z-index: 1; top: calc(-1 * var(--ci-space-1)); padding: var(--ci-space-2) var(--ci-space-3) var(--ci-space-1); background: var(--ci-color-surface); color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-command__group .ci-command__group > .ci-command__group-heading { position: static; font-weight: var(--ci-font-weight-regular); }
  .ci-command__group .ci-command__group .ci-command__item { padding-inline-start: var(--ci-space-6); }
  .ci-command__item { display: flex; min-height: var(--ci-control-height-lg); align-items: center; gap: var(--ci-space-3); padding: var(--ci-space-1-5) var(--ci-space-3); border-radius: var(--ci-radius-control); color: var(--ci-color-foreground); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); cursor: pointer; }
  .ci-command__item[data-active] { background: var(--ci-color-surface-muted); color: var(--ci-color-heading); }
  .ci-command__item[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; }
  .ci-command__icon { display: inline-flex; flex: none; color: var(--ci-color-text-muted); }
  .ci-command__icon svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  .ci-command__text { display: flex; min-width: 0; flex: 1; flex-direction: column; }
  .ci-command__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ci-command__description { overflow: hidden; color: var(--ci-color-text-muted); text-overflow: ellipsis; white-space: nowrap; font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-command__shortcut { display: inline-flex; flex: none; align-items: center; gap: var(--ci-space-1); margin-inline-start: auto; color: var(--ci-color-text-muted); }
  .ci-command__empty { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-sm); line-height: var(--ci-type-body-leading); text-align: center; }
  .ci-command__empty[data-empty] { padding: var(--ci-space-6) var(--ci-space-4); }
  @media (forced-colors: active) {
    .ci-command__item[data-active] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
    .ci-command__item[data-active] :is(.ci-command__icon, .ci-command__description, .ci-command__shortcut) { color: HighlightText; }
    .ci-command__item[aria-disabled="true"] { color: GrayText; opacity: 1; }
    .ci-command__search:focus-within { border-block-end-color: Highlight; }
  }

  .ci-breadcrumb { color: var(--ci-color-text-muted); font-family: var(--ci-font-ui); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-space-1-5); padding: 0; margin: 0; list-style: none; }
  .ci-breadcrumb__item { display: inline-flex; min-width: 0; align-items: center; gap: inherit; }
  .ci-breadcrumb__link { overflow: hidden; color: inherit; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; transition: color var(--ci-duration-fast) var(--ci-ease-standard); }
  .ci-breadcrumb__link:hover { color: var(--ci-color-heading); }
  .ci-breadcrumb__link:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--ci-ring-focus); }
  .ci-breadcrumb__page { overflow: hidden; color: var(--ci-color-heading); font-weight: var(--ci-font-weight-medium); text-overflow: ellipsis; white-space: nowrap; }
  .ci-breadcrumb__separator { display: inline-flex; color: var(--ci-color-text-subtle); }
  .ci-breadcrumb__separator svg,
  .ci-breadcrumb__ellipsis svg { width: var(--ci-icon-size-xs); height: var(--ci-icon-size-xs); stroke-width: var(--ci-icon-stroke-width); }
  .ci-breadcrumb__ellipsis { display: inline-grid; width: 1.5rem; height: 1.5rem; place-items: center; }

  .ci-page-header { display: grid; gap: var(--ci-space-4); font-family: var(--ci-font-ui); }
  .ci-page-header__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ci-space-6); }
  .ci-page-header__content { display: grid; min-width: 0; gap: var(--ci-space-2); }
  .ci-page-header__title { margin: 0; color: var(--ci-color-heading); font-family: var(--ci-font-display); font-size: var(--ci-page-title-size); font-weight: var(--ci-page-title-weight); line-height: var(--ci-page-title-leading); letter-spacing: var(--ci-type-heading-tracking); }
  .ci-page-header[data-compact="true"] .ci-page-header__title { font-size: var(--ci-page-title-compact-size); font-weight: var(--ci-page-title-weight); line-height: var(--ci-page-title-leading); letter-spacing: var(--ci-type-heading-tracking); }
  .ci-page-header__description { max-width: 42rem; margin: 0; color: var(--ci-color-text-muted); font-size: var(--ci-font-size-sm); line-height: var(--ci-type-body-leading); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-body-tracking); }
  .ci-page-header__actions,
  .ci-section-header__actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: var(--ci-space-2); }
  .ci-section-header { display: flex; align-items: end; justify-content: space-between; gap: var(--ci-space-4); padding-bottom: var(--ci-space-4); border-bottom: var(--ci-border-default) solid var(--ci-color-border); font-family: var(--ci-font-ui); }
  .ci-section-header--plain { padding-bottom: 0; border-bottom: 0; }
  .ci-section-header__title { margin: 0; color: var(--ci-color-heading); font-size: var(--ci-font-size-lg); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-heading-leading); letter-spacing: var(--ci-type-heading-tracking); }
  .ci-section-header__description { margin: var(--ci-space-1) 0 0; color: var(--ci-color-text-muted); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-body-leading); letter-spacing: var(--ci-type-body-tracking); }
  .ci-card > .ci-section-header { padding: var(--ci-space-5) var(--ci-space-6) var(--ci-space-4); }

  .ci-pagination { display: flex; width: 100%; justify-content: center; font-family: var(--ci-font-ui); }
  .ci-pagination__content { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ci-space-1); padding: 0; margin: 0; list-style: none; }
  .ci-pagination__link,
  .ci-pagination__ellipsis { display: inline-flex; min-width: var(--ci-control-height-md); height: var(--ci-control-height-md); align-items: center; justify-content: center; gap: var(--ci-space-1); padding: 0 var(--ci-space-2); border: var(--ci-border-default) solid transparent; border-radius: var(--ci-radius-control); color: var(--ci-color-foreground); background: transparent; font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); text-decoration: none; transition: background-color var(--ci-duration-fast) var(--ci-ease-standard), border-color var(--ci-duration-fast) var(--ci-ease-standard); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-pagination__link:hover { background: var(--ci-color-surface-muted); }
  .ci-pagination__link[data-active="true"] { border-color: var(--ci-color-border); background: var(--ci-color-surface); font-weight: var(--ci-font-weight-semibold); }
  .ci-pagination__link[data-active="true"]:hover { color: var(--ci-color-accent-foreground); background: var(--ci-color-accent); }
  .ci-pagination__link[data-disabled="true"] { color: var(--ci-color-text-subtle); pointer-events: none; }
  .ci-pagination__link:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-pagination__link svg,
  .ci-pagination__ellipsis svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  .ci-pagination__link--edge { padding-inline: var(--ci-space-3); }
  .ci-pagination__link:not(.ci-pagination__link--edge) { padding-inline: 0; border-radius: var(--ci-radius-full); letter-spacing: 0em; }
  .ci-pagination__ellipsis { color: var(--ci-color-text-muted); }

  .ci-sidebar-provider { display: flex; width: 100%; min-height: 32rem; align-items: stretch; border-top: var(--ci-border-default) solid var(--ci-color-border); background: var(--ci-color-background); }
  .ci-dashboard-shell { min-height: 100vh; border-top: 0; }
  .ci-sidebar { position: relative; z-index: 1; display: flex; width: var(--ci-layout-sidebar); min-width: var(--ci-layout-sidebar); flex-direction: column; overflow: hidden; border-right: var(--ci-border-default) solid var(--ci-color-border); background: var(--ci-color-background); color: var(--ci-color-foreground); font-family: var(--ci-font-ui); transition: width var(--ci-duration-base) var(--ci-ease-emphasized), min-width var(--ci-duration-base) var(--ci-ease-emphasized), opacity var(--ci-duration-fast) var(--ci-ease-standard), transform var(--ci-duration-base) var(--ci-ease-emphasized); }
  .ci-sidebar[data-side="right"] { order: 2; border-right: 0; border-left: var(--ci-border-default) solid var(--ci-color-border); }
  .ci-sidebar[data-variant="floating"] { margin: var(--ci-space-2); border: var(--ci-border-default) solid var(--ci-color-border); border-radius: var(--ci-radius-surface); box-shadow: var(--ci-shadow-sm); }
  .ci-sidebar[data-state="collapsed"][data-collapsible="icon"] { width: 4.25rem; min-width: 4.25rem; }
  .ci-sidebar[data-state="collapsed"][data-collapsible="offcanvas"] { width: 0; min-width: 0; border-right-width: 0; opacity: 0; transform: translateX(-0.75rem); }
  .ci-sidebar[data-state="collapsed"][data-collapsible="offcanvas"][data-side="right"] { border-left-width: 0; transform: translateX(0.75rem); }
  /* minmax(0, 1fr), not the implicit `auto` track: an `auto` track is floored by
     its items' minimum contribution, and a grid item that is itself a flex
     container (the account row) keeps `min-width: auto`, so an unbreakable
     string like an email address floors the track at the full rendered width.
     That overflowed the rail and, because .ci-sidebar clips, sheared every
     child in the track — including siblings that were sized correctly. */
  .ci-sidebar__header,
  .ci-sidebar__footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ci-space-2); padding: var(--ci-space-3); }
  .ci-sidebar__footer { margin-top: auto; border-top: var(--ci-border-default) solid var(--ci-color-border); }
  .ci-sidebar__content { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: var(--ci-space-2); overflow: auto; padding: var(--ci-space-2); }
  .ci-sidebar__separator { width: 100%; height: var(--ci-border-hairline); flex: none; border: 0; margin: 0; background: var(--ci-color-border); }
  .ci-sidebar__group { display: grid; gap: var(--ci-space-1); }
  .ci-sidebar__group-label { height: 2rem; display: flex; align-items: center; padding: 0 var(--ci-space-2); color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-medium); letter-spacing: var(--ci-type-control-tracking); text-transform: uppercase; white-space: nowrap; transition: opacity var(--ci-duration-fast) var(--ci-ease-standard); line-height: var(--ci-type-control-leading); }
  .ci-sidebar[data-state="collapsed"] .ci-sidebar__group-label { height: var(--ci-space-2); overflow: hidden; opacity: 0; }
  .ci-sidebar__menu { display: grid; gap: var(--ci-space-1); padding: 0; margin: 0; list-style: none; }
  .ci-sidebar__menu-item { position: relative; min-width: 0; }
  .ci-sidebar__menu-button { display: flex; width: 100%; min-width: 0; min-height: 2.625rem; align-items: center; gap: var(--ci-space-3); overflow: hidden; padding: 0 var(--ci-space-3); border: 0; border-radius: var(--ci-radius-control); color: var(--ci-color-text-muted); background: transparent; font-family: var(--ci-font-ui); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--ci-duration-fast) var(--ci-ease-standard), background-color var(--ci-duration-fast) var(--ci-ease-standard); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-sidebar__menu-button:hover { color: var(--ci-color-heading); background: linear-gradient(100deg, var(--ci-color-accent-surface-subtle), transparent); }
  .ci-sidebar__menu-button[data-active="true"] { color: var(--ci-color-accent-foreground); background: var(--ci-color-accent); font-weight: var(--ci-font-weight-semibold); }
  .ci-sidebar__menu-button:focus-visible,
  .ci-sidebar-trigger:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-sidebar__menu-button > svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); flex: none; stroke-width: var(--ci-icon-stroke-width); }
  .ci-sidebar[data-state="collapsed"] .ci-sidebar__menu-button { width: 2.625rem; justify-content: center; padding: 0; margin-inline: auto; }
  .ci-sidebar[data-state="collapsed"] .ci-sidebar__menu-button > :not(svg) { display: none; }
  .ci-sidebar__menu-badge { position: absolute; top: 50%; right: var(--ci-space-2); transform: translateY(-50%); color: var(--ci-color-heading); font-size: var(--ci-font-size-xs); font-variant-numeric: tabular-nums; }
  .ci-sidebar[data-state="collapsed"] .ci-sidebar__menu-badge { display: none; }
  .ci-sidebar__branch-heading { display: flex; align-items: center; gap: var(--ci-space-1); }
  .ci-sidebar__branch-heading > .ci-sidebar__menu-button { flex: 1; }
  .ci-sidebar__branch-heading[data-badged="true"] > .ci-sidebar__menu-button { gap: var(--ci-space-2); padding-inline-end: var(--ci-space-1); }
  .ci-sidebar__branch-badge { display: flex; flex: none; align-items: center; }
  .ci-sidebar__branch[data-active="true"] > .ci-sidebar__branch-heading { border-radius: var(--ci-radius-control); background: var(--ci-color-surface-muted); }
  .ci-sidebar__branch-toggle { display: grid; place-items: center; flex: none; width: 2.625rem; height: 2.625rem; border: 0; border-radius: var(--ci-radius-control); color: var(--ci-color-text-muted); background: transparent; cursor: pointer; }
  .ci-sidebar__branch-toggle:hover { color: var(--ci-color-heading); background: var(--ci-color-surface-muted); }
  .ci-sidebar__branch-toggle:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-sidebar__branch-toggle svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); transform: rotate(-90deg); }
  .ci-sidebar__branch-toggle[aria-expanded="true"] svg { transform: rotate(0); }
  .ci-sidebar__submenu { display: grid; gap: var(--ci-space-1); margin: var(--ci-space-1) 0 var(--ci-space-2) var(--ci-space-4); padding: 0 0 0 var(--ci-space-2); border-left: var(--ci-border-default) solid var(--ci-color-border-subtle); list-style: none; }
  .ci-sidebar__submenu[hidden] { display: none; }
  .ci-sidebar__branch .ci-sidebar__menu-button[data-active="true"] { color: var(--ci-sidebar-active-fg); background: var(--ci-sidebar-active-bg); }
  .ci-sidebar-inset { min-width: 0; flex: 1; overflow: auto; background: var(--ci-color-background); }
  .ci-sidebar-shell-header { display: flex; height: calc(4rem + var(--ci-border-default)); align-items: center; gap: var(--ci-space-3); padding: 0 var(--ci-space-6); border-bottom: var(--ci-border-default) solid var(--ci-color-border); }
  .ci-sidebar-trigger { display: inline-grid; width: var(--ci-control-height-md); height: var(--ci-control-height-md); place-items: center; border: var(--ci-border-default) solid var(--ci-color-border); border-radius: var(--ci-radius-control); color: var(--ci-color-heading); background: var(--ci-color-surface); cursor: pointer; }
  .ci-sidebar-trigger:hover { background: var(--ci-color-surface-muted); }
  .ci-sidebar-shell-header .ci-sidebar-trigger { width: auto; padding: 0 var(--ci-space-3) 0 0; border: 0; border-right: var(--ci-border-default) solid var(--ci-color-border-subtle); border-radius: 0; background: transparent; }
  .ci-sidebar-shell-header .ci-sidebar-trigger:hover { background: transparent; color: var(--ci-color-text-muted); }
  .ci-sidebar-trigger svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  .ci-sidebar__rail { position: absolute; z-index: 2; top: 0; right: -0.25rem; bottom: 0; width: 0.5rem; border: 0; background: transparent; cursor: col-resize; }
  .ci-sidebar__rail:hover::after { content: ""; position: absolute; top: 0; right: 0.2rem; bottom: 0; width: 1px; background: var(--ci-color-heading); }
  .ci-sidebar__brand { display: flex; min-width: 0; align-items: center; gap: var(--ci-space-3); overflow: hidden; }
  .ci-sidebar__brand-mark { display: grid; width: 2.5rem; height: 2.5rem; flex: none; place-items: center; border: var(--ci-border-default) solid var(--ci-color-border); border-radius: var(--ci-radius-control); background: var(--ci-color-background); color: var(--ci-color-heading); font-weight: var(--ci-font-weight-semibold); }
  .ci-sidebar__brand-copy { display: grid; min-width: 0; gap: 1px; }
  .ci-sidebar__brand-copy strong { overflow: hidden; color: var(--ci-color-heading); font-size: var(--ci-font-size-sm); text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ci-font-weight-semibold); }
  .ci-sidebar__brand-copy small { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); white-space: nowrap; }
  .ci-sidebar[data-state="collapsed"] .ci-sidebar__brand-copy { display: none; }

  .ci-data-table { width: 100%; font-family: var(--ci-font-ui); }
  .ci-data-table__frame { overflow: hidden; border: var(--ci-border-default) solid var(--ci-color-border-subtle); border-radius: var(--ci-radius-surface); background: var(--ci-color-surface); }
  .ci-data-table__toolbar { display: flex; min-height: 3.75rem; align-items: center; gap: var(--ci-space-3); padding: var(--ci-space-3) var(--ci-space-4); border-bottom: var(--ci-border-hairline) solid var(--ci-color-border-subtle); }
  .ci-data-table__search { position: relative; width: min(22rem, 100%); }
  .ci-data-table__search > svg { position: absolute; z-index: 1; top: 50%; left: var(--ci-space-3); width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); color: var(--ci-color-text-muted); transform: translateY(-50%); pointer-events: none; stroke-width: var(--ci-icon-stroke-width); }
  .ci-data-table__search .ci-input { padding-left: 2.5rem; padding-right: 2.25rem; }
  .ci-data-table__search > button { position: absolute; top: 50%; right: var(--ci-space-2); display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 0; border-radius: var(--ci-radius-full); background: transparent; color: var(--ci-color-text-muted); transform: translateY(-50%); cursor: pointer; }
  .ci-data-table__search > button:hover { background: var(--ci-color-surface-muted); color: var(--ci-color-heading); }
  .ci-data-table__search > button:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-data-table__search > button svg { width: var(--ci-icon-size-xs); height: var(--ci-icon-size-xs); stroke-width: var(--ci-icon-stroke-width); }
  .ci-data-table__count { margin-left: auto; color: var(--ci-color-text-subtle); font-size: var(--ci-font-size-xs); font-variant-numeric: tabular-nums; font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-data-table .ci-table-container { overflow: auto; border: 0; border-radius: 0; }
  .ci-data-table__sort { display: inline-flex; align-items: center; justify-content: inherit; gap: var(--ci-space-1); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
  .ci-data-table__sort:hover { color: var(--ci-color-heading); }
  .ci-data-table__sort:focus-visible { outline: none; border-radius: 2px; box-shadow: var(--ci-ring-focus); }
  .ci-data-table__sort svg { width: 0.75rem; height: 0.75rem; color: var(--ci-color-text-subtle); opacity: 0.45; stroke-width: var(--ci-icon-stroke-width); }
  .ci-data-table__sort:hover svg,
  .ci-data-table__sort[data-active] svg { opacity: 1; }
  .ci-data-table__empty { padding: var(--ci-space-8); color: var(--ci-color-text-muted); text-align: center; }
  .ci-data-table__note { margin: var(--ci-space-2) 0 0; padding: 0 var(--ci-space-1); color: var(--ci-color-text-subtle); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-data-table__pagination { padding: var(--ci-space-3) var(--ci-space-4); border-top: var(--ci-border-hairline) solid var(--ci-color-border-subtle); }
  .ci-table__head--center,
  .ci-table__cell--center { text-align: center; }

  .ci-data-table-shell__toolbar {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ci-space-3);
    padding: 0;
    margin: 0 0 var(--ci-space-3);
    border: 0;
    background: transparent;
  }
  .ci-data-table-shell__filters {
    display: flex;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ci-space-2);
  }
  .ci-data-table-shell__filters[data-alignment="start"] { align-items: flex-start; }
  .ci-data-table-shell__toolbar-end {
    display: inline-flex;
    min-width: 0;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ci-space-3);
    margin-left: auto;
  }
  .ci-data-table-shell__toolbar-actions {
    display: inline-flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ci-space-2);
  }
  .ci-data-table-shell__count {
    display: inline-flex;
    min-height: var(--ci-control-height-md);
    align-items: center;
    margin-left: auto;
    color: var(--ci-color-text-subtle);
    font-size: var(--ci-font-size-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: var(--ci-font-weight-regular);
    line-height: var(--ci-type-caption-leading);
    letter-spacing: var(--ci-type-caption-tracking);
  }
  .ci-data-table-shell__toolbar-end .ci-data-table-shell__count {
    margin-left: 0;
  }
  .ci-data-table-shell__frame .ci-table__body .ci-table__cell {
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-regular);
    line-height: var(--ci-type-data-leading);
    letter-spacing: var(--ci-type-data-tracking);
  }
  .ci-data-table-filter {
    display: grid;
    width: fit-content;
    min-width: 0;
    max-width: min(100%, var(--ci-field-width-compact));
    flex: 0 1 auto;
    gap: var(--ci-space-1-5);
  }
  .ci-data-table-filter[data-width="wide"] {
    max-width: min(100%, var(--ci-field-width-standard));
  }
  .ci-data-table-filter__label {
    color: var(--ci-color-text-muted);
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
    text-transform: uppercase;
  }
  .ci-data-table-filter > :not(.ci-data-table-filter__label) {
    width: fit-content;
    min-width: 0;
    max-width: 100%;
  }
  .ci-data-table-filter .ci-date-range-trigger {
    width: max-content;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-start;
    color: var(--ci-color-text-muted);
    font-size: var(--ci-font-size-sm);
    font-weight: var(--ci-font-weight-medium);
  }
  .ci-data-table-filter .ci-multi-select-filter__trigger.ci-button {
    color: var(--ci-color-text-muted);
    font-size: var(--ci-font-size-sm);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }
  .ci-data-table-filter[data-width="wide"] > .ci-input-shell {
    width: var(--ci-field-width-standard);
    max-width: 100%;
  }
  .ci-data-table-filter[data-fill] { width: 100%; max-width: 100%; }
  .ci-data-table-filter[data-fill] > :not(.ci-data-table-filter__label),
  .ci-data-table-filter[data-fill] > .ci-input-shell,
  .ci-data-table-filter[data-fill] .ci-date-range-trigger {
    width: 100%; min-width: 0; max-width: 100%;
  }
  .ci-data-table-shell__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--ci-space-3);
  }
  .ci-data-table-shell__pagination {
    grid-column: 2;
    display: flex;
    min-width: 0;
    justify-content: center;
  }
  .ci-data-table-shell__metadata {
    grid-column: 1;
    justify-self: start;
    color: var(--ci-color-text-subtle);
    font-size: var(--ci-font-size-xs);
    font-variant-numeric: tabular-nums;
    font-weight: var(--ci-font-weight-regular);
    line-height: var(--ci-type-caption-leading);
    letter-spacing: var(--ci-type-caption-tracking);
  }
  .ci-data-table-shell__page-size {
    grid-column: 3;
    justify-self: end;
  }
  .ci-data-table-page-size-control {
    display: inline-flex;
    align-items: center;
    gap: var(--ci-space-2);
    color: var(--ci-color-text-subtle);
  }
  .ci-data-table-page-size-control__label {
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
    text-transform: uppercase;
  }
  .ci-data-table-page-size-control__select.ci-select {
    width: fit-content;
    min-width: 3.5rem;
    max-width: 100%;
  }

  .ci-multi-select-filter__trigger.ci-button {
    width: max-content;
    min-width: 0;
    max-width: 100%;
    justify-content: space-between;
    gap: var(--ci-space-3);
    border-color: var(--ci-field-border);
    border-radius: var(--ci-radius-control);
    background: var(--ci-field-bg);
    color: var(--ci-color-text-muted);
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-medium);
    white-space: nowrap;
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }
  .ci-multi-select-filter__trigger.ci-button:hover,
  .ci-multi-select-filter__trigger.ci-button[data-state="open"] {
    border-color: var(--ci-color-border-strong);
    background: var(--ci-field-bg);
    color: var(--ci-color-heading);
  }
  .ci-multi-select-filter__trigger.ci-button[data-state="open"] {
    border-color: var(--ci-color-focus);
    box-shadow: var(--ci-ring-field-focus);
  }
  .ci-multi-select-filter__trigger > svg {
    flex: none;
  }
  .ci-multi-select-filter__value,
  .ci-multi-select-filter__option-label {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--ci-space-2);
  }
  .ci-multi-select-filter__value > span:last-child,
  .ci-multi-select-filter__option-label > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ci-multi-select-filter__icon {
    display: inline-flex;
    width: var(--ci-icon-size-sm);
    height: var(--ci-icon-size-sm);
    flex: none;
    align-items: center;
    justify-content: center;
  }
  .ci-multi-select-filter__icon > svg,
  .ci-multi-select-filter__icon > img {
    width: 100%;
    height: 100%;
  }
  .ci-multi-select-filter__popover.ci-popover {
    width: max(var(--radix-popover-trigger-width), var(--ci-field-width-compact));
    max-width: min(var(--ci-field-width-standard), calc(100vw - var(--ci-space-4)));
    overflow: hidden;
    padding: 0;
  }
  .ci-multi-select-filter__search {
    display: flex;
    align-items: center;
    gap: var(--ci-space-2);
    padding-inline: var(--ci-space-3);
    border-bottom: var(--ci-border-hairline) solid var(--ci-color-border);
  }
  .ci-multi-select-filter__search > svg {
    width: var(--ci-icon-size-sm);
    height: var(--ci-icon-size-sm);
    flex: none;
    color: var(--ci-color-text-subtle);
    stroke-width: var(--ci-icon-stroke-width);
  }
  .ci-multi-select-filter__search .ci-input {
    min-width: 0;
    flex: 1;
    border: 0;
    padding-inline: 0;
    background: transparent;
    color: var(--ci-color-text-muted);
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-regular);
    box-shadow: none;
    line-height: var(--ci-type-data-leading);
    letter-spacing: var(--ci-type-data-tracking);
  }
  .ci-multi-select-filter__search .ci-input::placeholder {
    color: var(--ci-color-text-muted);
  }
  .ci-multi-select-filter__search .ci-input:hover,
  .ci-multi-select-filter__search .ci-input:focus-visible {
    border: 0;
    box-shadow: none;
  }
  .ci-multi-select-filter__clear.ci-button {
    flex: none;
    border-radius: var(--ci-radius-control);
  }
  .ci-multi-select-filter__options {
    max-height: var(--ci-field-width-compact);
    overflow-y: auto;
    padding: var(--ci-space-2);
  }
  .ci-multi-select-filter__option {
    min-height: var(--ci-control-height-md);
    border-radius: var(--ci-radius-control);
    color: var(--ci-color-text-muted);
    transition:
      color var(--ci-duration-fast) var(--ci-ease-standard),
      background-color var(--ci-duration-fast) var(--ci-ease-standard);
  }
  .ci-multi-select-filter__option:hover,
  .ci-multi-select-filter__option:focus-within {
    background: var(--ci-color-surface-muted);
  }
  .ci-multi-select-filter__option[data-selected="true"] {
    color: var(--ci-color-heading);
  }
  .ci-multi-select-filter__option .ci-checkbox {
    width: 100%;
    min-height: var(--ci-control-height-md);
    align-items: center;
    gap: var(--ci-space-2);
    padding: var(--ci-space-2) var(--ci-space-3);
    color: inherit;
  }
  .ci-multi-select-filter__option .ci-checkbox__control {
    margin-top: 0;
  }
  .ci-multi-select-filter__option .ci-checkbox__text {
    min-width: 0;
    flex: 1;
  }
  .ci-multi-select-filter__option .ci-checkbox__label {
    min-width: 0;
    color: inherit;
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-control-leading);
    letter-spacing: var(--ci-type-control-tracking);
  }
  .ci-multi-select-filter__separator {
    height: var(--ci-border-hairline);
    margin-block: var(--ci-space-1);
    background: var(--ci-color-border);
  }
  .ci-multi-select-filter__empty {
    padding: var(--ci-space-5) var(--ci-space-3);
    margin: 0;
    color: var(--ci-color-text-muted);
    font-size: var(--ci-font-size-xs);
    line-height: var(--ci-type-caption-leading);
    text-align: center;
    font-weight: var(--ci-font-weight-regular);
    letter-spacing: var(--ci-type-caption-tracking);
  }

  .ci-data-table__sort--right {
    width: 100%;
    justify-content: flex-end;
  }
  .ci-data-table__sort:disabled {
    cursor: not-allowed;
    opacity: 0.48;
  }

  .ci-slider { display: grid; width: 100%; gap: var(--ci-space-2); font-family: var(--ci-font-ui); }
  .ci-slider__header { display: flex; min-height: 1.5rem; align-items: center; justify-content: space-between; gap: var(--ci-space-3); }
  .ci-slider__header label { color: var(--ci-color-heading); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-slider__header output { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); font-variant-numeric: tabular-nums; }
  .ci-slider input[type="range"] { width: 100%; height: 1rem; padding: 0; margin: 0; appearance: none; background: transparent; cursor: pointer; }
  .ci-slider input[type="range"]::-webkit-slider-runnable-track { height: 0.25rem; border-radius: var(--ci-radius-full); background: linear-gradient(to right, var(--ci-color-heading) 0 var(--ci-slider-value), var(--ci-color-track) var(--ci-slider-value) 100%); }
  .ci-slider input[type="range"]::-moz-range-track { height: 0.25rem; border-radius: var(--ci-radius-full); background: var(--ci-color-track); }
  .ci-slider input[type="range"]::-moz-range-progress { height: 0.25rem; border-radius: var(--ci-radius-full); background: var(--ci-color-heading); }
  .ci-slider input[type="range"]::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -0.375rem; appearance: none; border: var(--ci-border-default) solid var(--ci-color-heading); border-radius: var(--ci-radius-full); background: var(--ci-color-surface); box-shadow: var(--ci-shadow-sm); }
  .ci-slider input[type="range"]::-moz-range-thumb { width: 1rem; height: 1rem; border: var(--ci-border-default) solid var(--ci-color-heading); border-radius: var(--ci-radius-full); background: var(--ci-color-surface); box-shadow: var(--ci-shadow-sm); }
  .ci-slider input[type="range"]:focus-visible { outline: none; }
  .ci-slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--ci-ring-focus); }
  .ci-slider input[type="range"]:disabled { opacity: 0.45; cursor: not-allowed; }
  .ci-slider__presets { position: relative; height: var(--ci-control-height-sm); margin-top: var(--ci-space-1); }
  .ci-slider__preset { position: absolute; transform: translateX(-50%); }
  .ci-slider__preset[data-edge="start"] { transform: none; }
  .ci-slider__preset[data-edge="end"] { transform: translateX(-100%); }
  /* marks: a static scale. Each mark is a zero-width anchor at the thumb centre (thumb is 1rem). */
  .ci-slider__marks { position: relative; min-height: 1.75rem; margin-top: calc(var(--ci-space-2) * -1); }
  .ci-slider__mark { position: absolute; top: 0; left: calc(0.5rem + (100% - 1rem) * var(--ci-slider-mark-position)); width: 0; }
  .ci-slider__mark-tick { position: absolute; top: 0; left: -0.5px; width: 1px; height: 0.375rem; background: var(--ci-color-text-muted); }
  .ci-slider__mark-label { position: absolute; top: 0.5rem; left: 0; transform: translateX(-50%); color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); white-space: nowrap; }
  .ci-slider__mark[data-edge="start"] .ci-slider__mark-label { transform: translateX(-0.5rem); }
  .ci-slider__mark[data-edge="end"] .ci-slider__mark-label { transform: translateX(calc(-100% + 0.5rem)); }
  .ci-slider:has(input:disabled) .ci-slider__marks { opacity: 0.45; }

  .ci-slider-summary { display: inline-flex; align-items: baseline; gap: var(--ci-space-1); color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); white-space: nowrap; font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-slider-summary strong { color: var(--ci-color-heading); font-family: var(--ci-font-display); font-size: var(--ci-font-size-xl); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }

  .ci-advanced-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ci-space-4); }
  .ci-advanced-header > .ci-story-stack { margin-bottom: 0.45rem; }

  .ci-date-range-trigger {
    justify-content: flex-start;
    min-width: 15.5rem;
    background: var(--ci-field-bg);
  }
  .ci-date-range-trigger[data-trigger-variant="default"] { border-radius: var(--ci-radius-control); }
  .ci-date-range-trigger:focus-visible { border-color: var(--ci-color-focus); box-shadow: var(--ci-ring-field-focus); }
  .ci-date-range-trigger[data-trigger-variant="capsule"] {
    width: auto;
    min-width: 0;
    border-color: var(--ci-field-border);
    border-radius: var(--ci-radius-pill);
    font-weight: var(--ci-font-weight-medium);
  }
  .ci-date-range-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ci-date-range-popover { display: grid; width: min(54rem, calc(100vw - 1rem)); grid-template-columns: 10rem minmax(0, 1fr); padding: var(--ci-space-3); max-height: min(calc(100dvh - 1rem), var(--radix-popover-content-available-height, calc(100dvh - 1rem))); overflow: auto; }
  .ci-date-range-presets { display: grid; align-content: start; gap: var(--ci-space-1); padding-right: var(--ci-space-3); border-right: var(--ci-border-hairline) solid var(--ci-color-border-subtle); }
  .ci-date-range-presets button { min-height: 2.25rem; padding: 0 var(--ci-space-3); border: 0; border-radius: var(--ci-radius-control); color: var(--ci-color-text-muted); background: transparent; font: inherit; font-size: var(--ci-font-size-sm); text-align: left; cursor: pointer; font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-date-range-presets button:hover { color: var(--ci-color-heading); background: linear-gradient(100deg, var(--ci-color-accent-surface-subtle), transparent); }
  .ci-date-range-presets button[data-active] { color: var(--ci-color-accent-foreground); background: var(--ci-color-accent); font-weight: var(--ci-font-weight-semibold); }
  .ci-date-range-presets button:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-range-calendars { position: relative; min-width: 0; padding-left: var(--ci-space-3); }
  .ci-range-calendar-picker { position: relative; min-width: 0; }
  .ci-range-calendar__months { display: grid; grid-template-columns: repeat(2, minmax(15rem, 1fr)); gap: var(--ci-space-3); }
  .ci-range-calendar-picker:not([data-multiple-months]) .ci-range-calendar__months { grid-template-columns: minmax(15rem, 1fr); }
  .ci-range-calendar { min-width: 0; padding-top: var(--ci-space-9); }
  .ci-range-calendar__caption { display: flex; min-height: var(--ci-control-height-sm); align-items: center; justify-content: center; margin-bottom: var(--ci-space-3); }
  .ci-range-calendar__month { color: var(--ci-color-heading); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); text-align: center; line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-range-calendar__nav { position: absolute; z-index: 2; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
  .ci-range-calendar__nav button { display: grid; width: var(--ci-control-height-sm); height: var(--ci-control-height-sm); padding: 0; place-items: center; border: var(--ci-border-default) solid var(--ci-color-border-subtle); border-radius: var(--ci-radius-control); color: var(--ci-color-text-muted); background: var(--ci-color-surface); cursor: pointer; pointer-events: auto; }
  .ci-range-calendar__nav button:hover { color: var(--ci-color-heading); background: var(--ci-color-surface-muted); }
  .ci-range-calendar__nav button:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-range-calendar__nav button[aria-disabled="true"] { opacity: 0.3; cursor: not-allowed; }
  .ci-range-calendar__chevron { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); fill: none; stroke: currentColor; stroke-width: var(--ci-icon-stroke-width); }
  .ci-range-calendar__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .ci-range-calendar__weekday { height: 1.75rem; padding: var(--ci-space-1) 0; color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-medium); text-align: center; line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-range-calendar__day { position: relative; width: calc(100% / 7); height: 2.25rem; padding: 0; text-align: center; }
  .ci-range-calendar__day-button { position: relative; width: 100%; min-width: 0; height: 2.25rem; padding: 0; border: 0; border-radius: 0; color: var(--ci-color-heading); background: transparent; font: inherit; font-size: var(--ci-font-size-sm); cursor: pointer; }
  .ci-range-calendar__day-button:hover { z-index: 1; background: var(--ci-color-surface-muted); }
  .ci-range-calendar__day--outside .ci-range-calendar__day-button { color: var(--ci-color-text-muted); }
  .ci-range-calendar__day--range-middle .ci-range-calendar__day-button { background: var(--ci-color-accent-surface-range); }
  .ci-range-calendar__day--range-start .ci-range-calendar__day-button,
  .ci-range-calendar__day--range-end .ci-range-calendar__day-button,
  .ci-range-calendar__day--selected:not(.ci-range-calendar__day--range-middle) .ci-range-calendar__day-button { color: var(--ci-color-accent-foreground); background: var(--ci-color-accent); font-weight: var(--ci-font-weight-semibold); }
  .ci-range-calendar__day--range-start .ci-range-calendar__day-button { border-radius: var(--ci-radius-control) 0 0 var(--ci-radius-control); }
  .ci-range-calendar__day--range-end .ci-range-calendar__day-button { border-radius: 0 var(--ci-radius-control) var(--ci-radius-control) 0; }
  .ci-range-calendar__day--range-start.ci-range-calendar__day--range-end .ci-range-calendar__day-button,
  .ci-range-calendar__day--selected:not(.ci-range-calendar__day--range-start):not(.ci-range-calendar__day--range-middle):not(.ci-range-calendar__day--range-end) .ci-range-calendar__day-button { border-radius: var(--ci-radius-control); }
  .ci-range-calendar__day--disabled .ci-range-calendar__day-button { opacity: 0.25; cursor: not-allowed; }
  .ci-range-calendar__day-button:focus-visible { z-index: 2; outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-range-calendar__day--today:not(.ci-range-calendar__day--selected) .ci-range-calendar__day-button::after { position: absolute; right: calc(50% - 0.125rem); bottom: 0.2rem; width: 0.25rem; height: 0.25rem; border-radius: var(--ci-radius-full); background: var(--ci-color-accent); content: ""; }
  .ci-range-calendar__day--hidden,
  .ci-range-calendar-picker > [role="status"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .ci-date-range-popover__actions { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-end; gap: var(--ci-space-2); padding-top: var(--ci-space-3); margin-top: var(--ci-space-3); border-top: var(--ci-border-hairline) solid var(--ci-color-border-subtle); }
  .ci-date-range-popover__actions[data-has-helper] { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) max-content; gap: var(--ci-space-4); }
  .ci-date-range-popover__helper { min-width: 0; color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); line-height: var(--ci-type-caption-leading); overflow-wrap: anywhere; }
  .ci-date-range-popover__helper p { margin: 0; }
  @media (max-width: 600px) {
    .ci-date-range-popover__actions[data-has-helper] { grid-template-columns: minmax(0, 1fr) max-content; }
    .ci-date-range-popover__actions[data-has-helper] > .ci-date-range-popover__helper { grid-column: 1 / -1; grid-row: 1; }
  }
  .ci-date-range-popover.ci-date-range-popover--timestamp { width: min(680px, calc(100vw - 32px)); padding: var(--ci-space-4); grid-template-columns: 244px minmax(0, 1fr); column-gap: var(--ci-space-5); }
  .ci-date-range-popover--timestamp[data-calendar-months="2"] { width: min(960px, calc(100vw - 32px)); }
  @media (max-width: 850px) {
    .ci-date-range-popover--timestamp[data-calendar-months="2"] .ci-range-calendar__months { grid-template-columns: minmax(0, 1fr); }
  }
  .ci-date-range-popover--timestamp .ci-date-range-presets { display: flex; flex-direction: column; gap: var(--ci-space-1); padding-right: var(--ci-space-4); }
  .ci-date-range-popover--timestamp .ci-date-range-presets button { display: flex; min-height: 40px; align-items: center; justify-content: flex-start; gap: var(--ci-space-3); padding: var(--ci-space-2); }
  .ci-date-range-popover--timestamp .ci-date-range-presets button[data-active] { color: var(--ci-color-text); background: color-mix(in srgb, var(--ci-color-accent) 18%, var(--ci-color-surface)); }
  .ci-date-range-popover--timestamp .ci-date-range-presets button > svg:last-child { margin-left: auto; }
  .ci-date-range-preset__duration { min-width: 40px; justify-content: center; padding: 1px 5px; font-weight: var(--ci-font-weight-regular); }
  .ci-date-range-popover--timestamp .ci-range-calendars { padding-left: 0; }
  .ci-date-range-popover--timestamp .ci-range-calendar { padding-top: 0; }
  .ci-date-range-popover--timestamp .ci-range-calendar__caption { min-height: 40px; margin-bottom: var(--ci-space-4); }
  @media (max-width: 600px) {
    .ci-date-range-popover.ci-date-range-popover--timestamp { grid-template-columns: minmax(0, 1fr); }
    .ci-date-range-popover--timestamp .ci-date-range-presets { padding: 0 0 var(--ci-space-3); border-right: 0; border-bottom: var(--ci-border-hairline) solid var(--ci-color-border-subtle); }
  }
  .ci-date-range-popover__summary { min-width: 0; padding-top: var(--ci-space-5); color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); overflow-wrap: anywhere; }
  .ci-date-range-popover__summary p { margin: 0; }
  .ci-date-range-popover__summary > :not(:first-child) { margin-top: var(--ci-space-2); }
  .ci-date-range-popover--timestamp:not([data-presets]) { grid-template-columns: minmax(0, 1fr); }
  .ci-date-range-popover--timestamp:not([data-presets]) .ci-range-calendars { padding-left: 0; }
  .ci-date-range-presets button:disabled { opacity: 0.5; cursor: not-allowed; }
  .ci-date-range-popover__actions > button:not(.ci-button) { margin-right: auto; border: 0; background: transparent; color: var(--ci-color-text-muted); font: inherit; font-size: var(--ci-font-size-xs); cursor: pointer; font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }

  .ci-sheet__overlay { position: fixed; z-index: var(--ci-z-modal); inset: 0; border: 0; background: var(--ci-color-overlay); animation: ci-overlay-in var(--ci-duration-base) var(--ci-ease-standard); }
  .ci-sheet { position: fixed; z-index: var(--ci-z-modal); display: flex; flex-direction: column; border: 0 solid var(--ci-color-border); background: var(--ci-color-background); box-shadow: var(--ci-shadow-xl); font-family: var(--ci-font-ui); outline: none; }
  .ci-sidebar-sheet { width: min(18rem, 88vw) !important; padding: 0; }
  .ci-sidebar-sheet > .ci-sidebar { width: 100%; min-width: 0; height: 100%; border: 0; }
  .ci-sheet:where([data-side="right"]) { top: 0; right: 0; bottom: 0; width: min(26rem, 88vw); border-left-width: var(--ci-border-default); animation: ci-sheet-right-in var(--ci-duration-base) var(--ci-ease-emphasized); }
  .ci-sheet:where([data-side="left"]) { top: 0; bottom: 0; left: 0; width: min(26rem, 88vw); border-right-width: var(--ci-border-default); animation: ci-sheet-left-in var(--ci-duration-base) var(--ci-ease-emphasized); }
  .ci-sheet:where([data-side="top"]) { top: 0; right: 0; left: 0; max-height: 85vh; border-bottom-width: var(--ci-border-default); animation: ci-sheet-top-in var(--ci-duration-base) var(--ci-ease-emphasized); }
  .ci-sheet:where([data-side="bottom"]) { right: 0; bottom: 0; left: 0; max-height: 85vh; border-top-width: var(--ci-border-default); animation: ci-sheet-bottom-in var(--ci-duration-base) var(--ci-ease-emphasized); }
  .ci-sheet__close { position: absolute; top: var(--ci-space-4); right: var(--ci-space-4); display: grid; width: var(--ci-control-height-sm); height: var(--ci-control-height-sm); place-items: center; border: 0; border-radius: var(--ci-radius-full); background: transparent; color: var(--ci-color-text-muted); cursor: pointer; }
  .ci-sheet__close:hover { color: var(--ci-color-heading); background: var(--ci-color-surface-muted); }
  .ci-sheet__close:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-sheet__close svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  .ci-sheet__header { display: grid; gap: var(--ci-space-1); padding: var(--ci-space-6); padding-right: 4rem; border-bottom: var(--ci-border-hairline) solid var(--ci-color-border-subtle); }
  .ci-sheet__title { margin: 0; color: var(--ci-color-heading); font-family: var(--ci-font-display); font-size: var(--ci-font-size-3xl); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-heading-leading); letter-spacing: var(--ci-type-heading-tracking); }
  .ci-sheet__description { margin: 0; color: var(--ci-color-text-muted); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-body-leading); letter-spacing: var(--ci-type-body-tracking); }
  .ci-sheet__body { min-height: 0; flex: 1; overflow: auto; padding: var(--ci-space-6); }
  .ci-sheet__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--ci-space-2); padding: var(--ci-space-4) var(--ci-space-6); border-top: var(--ci-border-hairline) solid var(--ci-color-border-subtle); }

  /* Playground and request workbench */
  .ci-language-control { display: inline-flex; align-items: center; gap: var(--ci-space-1); padding: var(--ci-space-1); border: var(--ci-border-default) solid var(--ci-color-border); border-radius: var(--ci-radius-pill); background: var(--ci-color-surface); }
  .ci-language-control__item { display: inline-flex; min-height: var(--ci-control-height-sm); align-items: center; justify-content: center; gap: var(--ci-space-2); padding: 0 var(--ci-space-3); border: 0; border-radius: var(--ci-radius-pill); color: var(--ci-color-text-muted); background: transparent; font: inherit; font-size: var(--ci-font-size-sm); cursor: pointer; font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-language-control__item:hover { color: var(--ci-color-heading); background: var(--ci-color-surface-muted); }
  .ci-language-control__item[data-active] { color: var(--ci-color-control-active-fg); background: var(--ci-color-control-active-bg); }
  .ci-language-control__item:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-language-control__icon { display: grid; place-items: center; }
  .ci-language-control__icon svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }

  .ci-code-preview { --ci-code-token-light:inherit; --ci-code-token-dark:inherit; overflow: hidden; border: var(--ci-border-default) solid rgb(255 255 255 / 0.14); border-radius: var(--ci-radius-surface); color: var(--ci-color-text-inverse); background: var(--ci-color-surface-inverse); }
  .ci-code-preview__header { display: flex; min-height: 3.25rem; align-items: center; justify-content: space-between; gap: var(--ci-space-4); padding: 0 var(--ci-space-4); border-bottom: var(--ci-border-hairline) solid rgb(255 255 255 / 0.14); }
  .ci-code-preview__meta { display: inline-flex; min-width: 0; align-items: center; gap: var(--ci-space-3); font-size: var(--ci-font-size-xs); }
  .ci-code-preview__meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ci-code-preview__meta > span { color: rgb(241 247 247 / 0.58); }
  .ci-code-preview__endpoint { padding-left: var(--ci-space-3); border-left: var(--ci-border-hairline) solid rgb(255 255 255 / 0.14); font-family: var(--ci-font-mono); color: rgb(241 247 247 / 0.48) !important; }
  .ci-code-preview__copy { display: inline-flex; min-height: var(--ci-control-height-sm); align-items: center; gap: var(--ci-space-2); padding: 0 var(--ci-space-3); border: 0; border-radius: var(--ci-radius-control); color: rgb(241 247 247 / 0.72); background: transparent; font: inherit; font-size: var(--ci-font-size-xs); cursor: pointer; font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
  .ci-code-preview__copy:hover { color: var(--ci-color-text-inverse); background: rgb(255 255 255 / 0.1); }
  .ci-code-preview__copy:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ci-color-accent); }
  .ci-code-preview__copy svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); }
  .ci-code-preview__copy[data-copied] { color: var(--ci-color-accent); }
  .ci-code-preview__pre { max-height: 28rem; overflow: auto; padding: var(--ci-space-4) 0; margin: 0; font-family: var(--ci-font-code); font-size: var(--ci-font-size-xs); line-height: var(--ci-type-reading-leading); tab-size: 2; font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-reading-tracking); }
  .ci-code-preview__line { display: grid; grid-template-columns: 3.25rem minmax(max-content, 1fr); min-width: max-content; padding-right: var(--ci-space-5); }
  .ci-code-preview__line:hover { background: rgb(255 255 255 / 0.04); }
  .ci-code-preview__number { padding-right: var(--ci-space-3); color: rgb(241 247 247 / 0.3); text-align: right; user-select: none; }
  .ci-code-preview__source { padding-left: var(--ci-space-3); border-left: var(--ci-border-hairline) solid rgb(255 255 255 / 0.1); white-space: pre; }
  .ci-code-preview__source [data-tone="keyword"] { color: var(--ci-code-inverse-keyword); }
  .ci-code-preview__source [data-tone="string"] { color: var(--ci-code-inverse-string); }
  .ci-code-preview__source [data-tone="number"] { color: var(--ci-code-inverse-number); }
  .ci-code-preview__source [data-tone="function"] { color: var(--ci-code-inverse-function); }
  .ci-code-preview__source [data-tone="property"] { color: var(--ci-code-inverse-property); }
  .ci-code-preview__source [data-tone="comment"],
  .ci-code-preview__source [data-tone="dim"] { color: rgb(241 247 247 / 0.45); }
  .ci-code-preview__copy:disabled { opacity: 0.48; cursor: not-allowed; }
  .ci-code-preview__error { margin: 0; padding: var(--ci-space-3) var(--ci-space-4); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-code-preview__pre:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ci-color-focus); }
  .ci-code-preview[data-line-numbers="false"] .ci-code-preview__line { grid-template-columns: minmax(max-content, 1fr); padding-inline: var(--ci-space-5); }
  .ci-code-preview[data-line-numbers="false"] .ci-code-preview__source { padding-left: 0; border-left: 0; }
  .ci-code-preview[data-variant="surface"] { border-color: var(--ci-color-border); color: var(--ci-color-foreground); background: var(--ci-color-surface-subtle); }
  .ci-code-preview[data-variant="surface"] .ci-code-preview__header { min-height: 3.5rem; border-color: var(--ci-color-border-subtle); background: var(--ci-color-surface); }
  .ci-code-preview[data-variant="surface"] .ci-code-preview__meta strong { color: var(--ci-color-text-muted); font-weight: var(--ci-font-weight-semibold); }
  .ci-code-preview[data-variant="surface"] .ci-code-preview__meta > span { color: var(--ci-color-text-muted); }
  .ci-code-preview[data-variant="surface"] .ci-code-preview__endpoint { border-color: var(--ci-color-border-subtle); color: var(--ci-color-text-muted) !important; }
  .ci-code-preview[data-variant="surface"] .ci-code-preview__copy { flex-shrink: 0; border: var(--ci-border-default) solid var(--ci-color-border); border-radius: var(--ci-radius-full); color: var(--ci-color-foreground); background: var(--ci-color-surface); }
  .ci-code-preview[data-variant="surface"] .ci-code-preview__copy:hover:not(:disabled) { background: var(--ci-color-surface-muted); }
  .ci-code-preview[data-variant="surface"] .ci-code-preview__copy[data-copied] { color: var(--ci-color-success); }
  .ci-code-preview[data-variant="surface"] .ci-code-preview__line:hover { background: var(--ci-color-surface-muted); }
  .ci-code-preview[data-variant="surface"] .ci-code-preview__number { color: var(--ci-color-text-muted); }
  .ci-code-preview[data-variant="surface"] .ci-code-preview__source { border-color: var(--ci-color-border-subtle); }
  .ci-code-preview[data-variant="surface"] .ci-code-preview__source [data-tone] { color: inherit; }
  .ci-code-preview[data-variant="surface"] .ci-code-preview__source [data-tone="comment"],
  .ci-code-preview[data-variant="surface"] .ci-code-preview__source [data-tone="dim"] { color: var(--ci-color-text-muted); }

  /* JsonTree: rows paint no background, so the tone ratios hold on any surface and on hover. */
  .ci-json-tree { display: flex; flex-direction: column; gap: var(--ci-space-2); min-width: 0; min-height: 0; color: var(--ci-color-foreground); font-family: var(--ci-font-code); font-size: var(--ci-font-size-xs); line-height: var(--ci-type-reading-leading); }
  .ci-json-tree__controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ci-space-1); font-family: var(--ci-font-ui); }
  .ci-json-tree__tree { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .ci-json-tree__row { display: flex; align-items: flex-start; min-width: 0; min-height: 1.5rem; padding-inline-start: calc(var(--ci-json-tree-depth) * var(--ci-space-4)); border-radius: var(--ci-radius-control); outline: none; }
  .ci-json-tree__row:hover { box-shadow: inset 0 0 0 var(--ci-border-hairline) var(--ci-color-border); }
  /* An outline, not the usual ring: forced colours drop box-shadow but keep an outline. */
  .ci-json-tree__row:focus-visible { outline: 2px solid var(--ci-color-focus); outline-offset: -2px; }
  .ci-json-tree__toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; color: var(--ci-color-text-muted); }
  .ci-json-tree__toggle[data-action] { cursor: pointer; }
  .ci-json-tree__toggle svg { width: var(--ci-icon-size-xs); height: var(--ci-icon-size-xs); transition: transform var(--ci-duration-fast) var(--ci-ease-standard); }
  .ci-json-tree__row[aria-expanded="true"] .ci-json-tree__toggle svg { transform: rotate(90deg); }
  .ci-json-tree__row:not([aria-expanded="true"]) .ci-json-tree__toggle svg:dir(rtl) { transform: scaleX(-1); }
  .ci-json-tree__content { flex: 1 1 auto; min-width: 0; padding-block: calc(var(--ci-space-1) / 2); white-space: pre-wrap; overflow-wrap: anywhere; }
  .ci-json-tree__content[data-action] { cursor: pointer; }
  /* JSON literals keep their reading order in right-to-left rows, so -1.5 stays -1.5. */
  .ci-json-tree [data-tone] { direction: ltr; unicode-bidi: isolate; }
  .ci-json-tree [data-tone="key"] { color: var(--ci-code-property); }
  .ci-json-tree [data-tone="string"] { color: var(--ci-code-string); }
  /* --ci-code-number falls to 4.44:1 on the Editions light surface-muted, so numbers take the function tone. */
  .ci-json-tree [data-tone="number"] { color: var(--ci-code-function); }
  .ci-json-tree [data-tone="boolean"] { color: var(--ci-code-keyword); }
  .ci-json-tree [data-tone="null"] { color: var(--ci-code-keyword); }
  /* --ci-code-comment falls to 3.9:1 on the dark surface-muted, so secondary text stays on text-muted. */
  .ci-json-tree [data-tone="index"] { color: var(--ci-color-text-muted); }
  .ci-json-tree [data-tone="summary"] { color: var(--ci-color-text-muted); }
  .ci-json-tree [data-tone="punctuation"] { color: var(--ci-color-text-muted); }
  .ci-json-tree [data-tone="redacted"] { color: var(--ci-color-text-muted); }
  .ci-json-tree__actions { display: inline-flex; flex: none; opacity: 0; }
  .ci-json-tree__row:is(:hover, :focus-within) .ci-json-tree__actions { opacity: 1; }
  @media (hover: none) {
    .ci-json-tree__actions { opacity: 1; }
  }
  .ci-json-tree__action { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: var(--ci-radius-control); background: transparent; color: var(--ci-color-text-muted); cursor: pointer; outline: none; }
  .ci-json-tree__action:is(:hover, [data-copied]) { color: var(--ci-color-foreground); }
  .ci-json-tree__action:focus-visible { outline: 2px solid var(--ci-color-focus); outline-offset: -2px; }
  .ci-json-tree__action svg { width: var(--ci-icon-size-xs); height: var(--ci-icon-size-xs); }
  .ci-json-tree__more { align-items: center; padding-inline: var(--ci-space-2); color: var(--ci-color-foreground); font-family: var(--ci-font-ui); text-decoration: underline; cursor: pointer; }
  .ci-json-tree__error { margin: 0; font-family: var(--ci-font-ui); font-size: var(--ci-font-size-sm); line-height: var(--ci-type-caption-leading); }

  @media (max-width: 64rem) {
    .ci-stat-row[data-columns="3"],
    .ci-stat-row[data-columns="4"] { --ci-stat-columns: 2; }
  }

  @media (max-width: 42rem) {
    .ci-data-table-shell__toolbar,
    .ci-data-table-shell__filters { align-items: stretch; }
    .ci-data-table-shell__filters,
    .ci-data-table-filter,
    .ci-data-table-filter[data-width="wide"],
    .ci-data-table-filter > :not(.ci-data-table-filter__label),
    .ci-multi-select-filter__trigger.ci-button {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
    }
    .ci-data-table-filter[data-mobile-width="half"] {
      width: calc((100% - var(--ci-space-2)) / 2);
      min-width: 0;
      max-width: none;
      flex: 1 1 calc((100% - var(--ci-space-2)) / 2);
    }
    .ci-data-table-shell__count {
      min-height: 0;
      margin-left: 0;
    }
    .ci-data-table-shell__toolbar-end {
      width: 100%;
      align-items: center;
      justify-content: flex-end;
      margin-left: 0;
    }
    .ci-data-table-shell__footer { grid-template-columns: minmax(0, 1fr) auto; }
    .ci-data-table-shell__pagination {
      grid-column: 1 / -1;
      grid-row: 1;
      justify-self: center;
    }
    .ci-data-table-shell__metadata {
      grid-column: 1;
      grid-row: 2;
      justify-self: start;
    }
    .ci-data-table-shell__page-size {
      grid-column: 2;
      grid-row: 2;
      justify-self: end;
    }
    .ci-data-table-shell__footer[data-has-pagination="false"] .ci-data-table-shell__metadata,
    .ci-data-table-shell__footer[data-has-pagination="false"] .ci-data-table-shell__page-size {
      grid-row: 1;
    }
    .ci-date-range-popover { grid-template-columns: 1fr; }
    .ci-date-range-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 0 var(--ci-space-3); border-right: 0; border-bottom: var(--ci-border-hairline) solid var(--ci-color-border-subtle); }
    .ci-range-calendars { padding-left: 0; }
    .ci-range-calendar__months { grid-template-columns: minmax(0, 1fr); }
    .ci-range-calendars[data-months="responsive"] .ci-range-calendar[data-secondary] { display: none; }
    .ci-range-calendar { padding-top: var(--ci-space-9); }
    .ci-advanced-header { align-items: flex-start; flex-direction: column; }
    .ci-advanced-header > .ci-story-stack { margin-bottom: 0; }
    .ci-field-group--2 { grid-template-columns: minmax(0, 1fr); }
    .ci-field--full { grid-column: auto; }
    .ci-stat-row { --ci-stat-columns: 1 !important; }
    .ci-tabs--vertical { flex-direction: column; }
    .ci-page-header__row,
    .ci-section-header { align-items: flex-start; flex-direction: column; }
    .ci-page-header__title { font-size: 3rem; font-weight: var(--ci-page-title-weight); line-height: var(--ci-page-title-leading); letter-spacing: var(--ci-type-heading-tracking); }
    .ci-pagination__link--edge span { display: none; }
  }

  @keyframes ci-spin { to { transform: rotate(360deg); } }
  @keyframes ci-pulse { 50% { opacity: 0.48; } }
  @keyframes ci-wave { to { background-position: -200% 0; } }
  @keyframes ci-live-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(0.78); }
  }
  @keyframes ci-fade-in { from { opacity: 0; } }
  @keyframes ci-overlay-in { from { opacity: 0; } }
  @keyframes ci-dialog-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 0.5rem)) scale(0.98); } }
  @keyframes ci-popover-in { from { opacity: 0; transform: translateY(-0.25rem) scale(0.98); } }
  @keyframes ci-menu-in { from { opacity: 0; transform: translateY(-0.2rem) scale(0.98); } }
  @keyframes ci-toast-in { from { opacity: 0; transform: translateX(0.5rem); } }
  @keyframes ci-loading-cell { 0%, 100% { opacity: 0.2; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1); } }
  @keyframes ci-sheet-right-in { from { transform: translateX(100%); } }
  @keyframes ci-sheet-left-in { from { transform: translateX(-100%); } }
  @keyframes ci-sheet-top-in { from { transform: translateY(-100%); } }
  @keyframes ci-sheet-bottom-in { from { transform: translateY(100%); } }
  @keyframes ci-response-dot { 0%, 100% { opacity: 0.28; transform: scale(0.72); } 50% { opacity: 1; transform: scale(1); } }
  @keyframes ci-stream-cursor { 50% { opacity: 0; } }
  @keyframes ci-chart-bar-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes ci-progress-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

  @media (prefers-reduced-motion: reduce) {
    .ci-badge--live::before { animation: none; }
    .ci-loading__grid > span { animation: none; opacity: 0.7; }
    .ci-toast__spinner { animation: none; }
    .ci-spinner__graphic { animation: none; }
    .ci-chart[data-animate][data-visible] .ci-chart__bar rect { animation: none; }
    .ci-chart__line { transition: none !important; stroke-dashoffset: 0 !important; }
    .ci-chart__area { opacity: 1; transition: none; }
    .ci-progress[data-state="indeterminate"] .ci-progress__indicator { width: 100%; animation: none; opacity: 0.48; }
  }
}

/* SearchableSelect — shared language, framework, and key picker. */
.ci-searchable-select__trigger { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; max-width: 100%; padding: 0.45rem 0.85rem; border: 1px solid var(--ci-color-border); border-radius: 999px; background: var(--ci-color-surface); color: var(--ci-color-text); font: inherit; font-size: 0.8125rem; cursor: pointer; font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
.ci-searchable-select__trigger:focus-visible { outline: 2px solid var(--ci-color-accent); outline-offset: 2px; }
.ci-searchable-select__trigger:disabled { opacity: 0.5; cursor: not-allowed; }
.ci-searchable-select__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-searchable-select__trigger--field { width: 100%; min-width: 0; min-height: var(--ci-control-height-lg); padding: 0 var(--ci-space-3); border: var(--ci-border-default) solid var(--ci-field-border); border-radius: var(--ci-radius-control); background: var(--ci-field-bg); color: var(--ci-field-fg); font-size: var(--ci-font-size-sm); text-align: left; font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-data-leading); letter-spacing: var(--ci-type-data-tracking); }
.ci-searchable-select__trigger--field:hover:not(:disabled) { border-color: var(--ci-color-border-strong); }
.ci-searchable-select__trigger--field .ci-searchable-select__label { flex: 1; }
.ci-searchable-select__trigger--field > svg { flex-shrink: 0; margin-left: auto; }
.ci-searchable-select__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.ci-searchable-select__icon > * { width: 100%; height: 100%; object-fit: contain; }
.ci-searchable-select__popover { width: max(19rem, var(--radix-popover-trigger-width)); max-width: calc(100vw - 1rem); padding: 0; overflow: hidden; }
.ci-searchable-select__popover--field { width: var(--radix-popover-trigger-width); }
.ci-searchable-select__search { padding: 0.625rem; border-bottom: 1px solid var(--ci-color-border-subtle); }
.ci-searchable-select__options { max-height: min(20rem, calc(var(--radix-popover-content-available-height) - 5rem)); overflow-y: auto; padding: 0.25rem; }
.ci-searchable-select__option { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: 0.375rem; color: var(--ci-color-text); font-size: 0.8125rem; cursor: pointer; font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); }
.ci-searchable-select__option[data-active] { background: var(--ci-color-surface-muted); }
.ci-searchable-select__option[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ci-searchable-select__text { display: flex; flex: 1; flex-direction: column; gap: 0.125rem; min-width: 0; }
.ci-searchable-select__text > span { overflow-wrap: anywhere; }
.ci-searchable-select__text small, .ci-searchable-select__empty { color: var(--ci-color-text-muted); font-size: 0.75rem; font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
.ci-searchable-select__empty { margin: 0; padding: 1rem; text-align: center; }

/* Shared overview compositions. These own their layout; consumers supply data/actions. */
@layer components {
  .ci-overview-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
  .ci-overview-card--accent { --ci-overview-tint: var(--ci-color-accent-surface-strong); --ci-overview-icon: var(--ci-color-heading); }
  .ci-overview-card--info { --ci-overview-tint: var(--ci-color-info-bg); --ci-overview-icon: var(--ci-color-info); }
  .ci-overview-card--success { --ci-overview-tint: var(--ci-color-success-bg); --ci-overview-icon: var(--ci-color-success); }
  .ci-overview-card__header {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 1.375rem var(--ci-space-5) var(--ci-space-1);
    background: linear-gradient(145deg, var(--ci-overview-tint), var(--ci-color-surface) 85%);
  }
  .ci-overview-card__title-row { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
  .ci-overview-card__icon { flex-shrink: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--ci-radius-control); background: var(--ci-color-surface); color: var(--ci-overview-icon); box-shadow: var(--ci-shadow-xs); }
  .ci-overview-card__icon svg { width: 1.1875rem; height: 1.1875rem; }
  .ci-overview-card__description { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-sm); line-height: var(--ci-type-body-leading); margin: 0.625rem 0 0; min-height: 3.2em; font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-body-tracking); }
  .ci-overview-card > .ci-overview-card__body { display: flex; flex: 1; flex-direction: column; padding: var(--ci-space-1) var(--ci-space-5) var(--ci-space-3); }
  .ci-overview-card__insights { display: flex; flex: 1; flex-direction: column; gap: var(--ci-space-4); padding-bottom: var(--ci-space-5); }
  .ci-overview-card__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ci-space-4); margin: 0; padding-block: var(--ci-space-4); border-block: 1px solid var(--ci-color-border-subtle); }
  .ci-overview-card__metrics dt { min-height: 3em; font-size: var(--ci-font-size-xs); line-height: var(--ci-type-caption-leading); color: var(--ci-color-text-muted); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-overview-card__metrics dd { font-size: var(--ci-font-size-base); color: var(--ci-color-heading); font-variant-numeric: tabular-nums; margin: var(--ci-space-1) 0 0; font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-data-leading); letter-spacing: var(--ci-type-data-tracking); }
  .ci-overview-card__actions { display: grid; gap: var(--ci-space-1-5); margin-top: auto; }

  .ci-metric-chart { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: var(--ci-space-4); min-width: 0; min-height: 18.75rem; margin: 0; padding: var(--ci-space-4); border: 1px solid var(--ci-color-border-subtle); border-radius: var(--ci-radius-control); background: var(--ci-color-surface); color: var(--ci-color-heading); font-size: var(--ci-font-size-sm); line-height: var(--ci-type-body-leading); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-body-tracking); }
  .ci-metric-chart__note { width: 100%; margin: 0; font-size: var(--ci-font-size-xs); line-height: var(--ci-type-caption-leading); text-align: left; color: var(--ci-color-text-muted); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-metric-funnel__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ci-space-3); padding-bottom: var(--ci-space-2); }
  .ci-metric-funnel__label strong { font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .ci-metric-funnel__track { display: flex; justify-content: center; height: var(--ci-space-6); background: var(--ci-color-surface-subtle); border-radius: var(--ci-radius-sm); }
  .ci-metric-funnel__track span { display: block; height: 100%; border-radius: var(--ci-radius-sm); background: linear-gradient(90deg, color-mix(in srgb, var(--ci-metric-bar-color) 65%, var(--ci-color-surface)), var(--ci-metric-bar-color)); }
  .ci-metric-chart[data-animate] .ci-metric-funnel__track span { animation: ci-metric-fill 900ms cubic-bezier(.22, 1, .36, 1) both; }
  .ci-metric-funnel__unavailable { height: var(--ci-space-6); border: 1px dashed var(--ci-color-border-strong); border-radius: var(--ci-radius-sm); }

  .ci-metric-donut, .ci-status-matrix { gap: var(--ci-space-5); }
  .ci-metric-donut__summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--ci-space-3); }
  .ci-metric-donut__chart { width: 100%; max-width: 8.75rem; justify-self: center; }
  .ci-metric-donut__chart svg { display: block; width: 100%; }
  .ci-metric-chart[data-animate] .ci-metric-donut__segment { animation: ci-metric-draw var(--ci-segment-duration, 900ms) linear var(--ci-segment-delay, 0ms) both; }
  .ci-metric-donut__total { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; }
  .ci-metric-donut__total strong { font-family: var(--ci-font-display); font-size: var(--ci-font-size-5xl); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-metric-leading); overflow-wrap: anywhere; letter-spacing: var(--ci-type-metric-tracking); }
  .ci-metric-donut__total span { font-size: var(--ci-font-size-sm); margin-top: var(--ci-space-1); color: var(--ci-color-text-muted); }
  .ci-metric-donut__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ci-space-2); padding-top: var(--ci-space-4); border-top: 1px solid var(--ci-color-border-subtle); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-metric-donut__legend > div { display: flex; align-items: center; gap: var(--ci-space-1); padding: var(--ci-space-2); border-radius: var(--ci-radius-sm); background: var(--ci-color-surface-subtle); min-width: 0; }
  .ci-metric-donut__legend i { width: 0.5rem; height: 0.5rem; border-radius: 2px; flex-shrink: 0; }
  .ci-metric-donut__legend span { overflow-wrap: anywhere; }
  .ci-metric-donut__legend strong { margin-left: auto; font-variant-numeric: tabular-nums; }

  .ci-status-matrix__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ci-space-3); width: 100%; list-style: none; padding: 0; margin: 0; }
  .ci-status-matrix__grid li { display: grid; place-items: center; }
  .ci-status-matrix__tooltip { display: block; width: 100%; }
  .ci-status-matrix__cell { position: relative; display: block; width: 100%; height: 2rem; padding: 0; cursor: help; border: 1px solid var(--ci-color-border-strong); border-radius: var(--ci-radius-sm); background: var(--ci-color-surface-subtle); overflow: hidden; }
  .ci-status-matrix__cell:focus-visible { outline: 2px solid var(--ci-color-focus); outline-offset: 3px; }
  .ci-status-matrix__cell[data-enabled] { border-color: var(--ci-color-success); }
  .ci-status-matrix__fill { position: absolute; inset: 0; background: var(--ci-color-success); }
  .ci-metric-chart[data-animate] .ci-status-matrix__fill { animation: ci-metric-fill 800ms cubic-bezier(.22, 1, .36, 1) both; }
  .ci-status-matrix__legend { display: flex; flex-wrap: wrap; gap: var(--ci-space-4); font-size: var(--ci-font-size-xs); color: var(--ci-color-text-muted); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-status-matrix__legend span { display: flex; gap: var(--ci-space-2); align-items: center; }
  .ci-status-matrix__legend i { width: 0.625rem; height: 0.5rem; border-radius: 2px; border: 1px solid var(--ci-color-border-strong); background: var(--ci-color-surface-subtle); }
  .ci-status-matrix__legend i[data-enabled] { border-color: var(--ci-color-success); background: var(--ci-color-success); }
  .ci-legend-marker { display: inline-flex; min-width: 0; align-items: center; gap: var(--ci-space-1-5); color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
  .ci-legend-marker__swatch { flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--ci-radius-full); background: var(--ci-legend-marker-color, var(--ci-chart-1)); forced-color-adjust: none; }
  .ci-legend-marker[data-size="md"] .ci-legend-marker__swatch { width: 0.625rem; height: 0.625rem; }
  .ci-legend-marker__swatch[data-shape="square"] { border-radius: 1px; }
  .ci-legend-marker__swatch[data-shape="diamond"] { border-radius: 1px; transform: rotate(45deg) scale(0.85); }
  .ci-legend-marker__label { min-width: 0; overflow-wrap: anywhere; }

  .ci-workflow-guide { container-type: inline-size; overflow: hidden; background: linear-gradient(120deg, var(--ci-guide-tint), var(--ci-color-surface) 78%); }
  .ci-workflow-guide--accent { --ci-guide-tint: var(--ci-color-accent-surface-strong); --ci-guide-ink: var(--ci-color-heading); }
  .ci-workflow-guide--info { --ci-guide-tint: var(--ci-color-info-bg); --ci-guide-ink: var(--ci-color-info); }
  .ci-workflow-guide--success { --ci-guide-tint: var(--ci-color-success-bg); --ci-guide-ink: var(--ci-color-success); }
  .ci-workflow-guide__content { padding-top: var(--ci-space-5); }
  .ci-workflow-guide__list { display: grid; gap: var(--ci-space-5); font-size: var(--ci-font-size-sm); margin: 0; padding: 0; list-style: none; font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-body-leading); letter-spacing: var(--ci-type-body-tracking); }
  .ci-workflow-guide__list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; column-gap: var(--ci-space-2); }
  .ci-workflow-guide__list strong { display: block; }
  .ci-workflow-guide__list strong:first-child { grid-column: 1 / -1; }
  .ci-workflow-guide__list p { grid-column: 1 / -1; margin: var(--ci-space-2) 0 0; color: var(--ci-color-text-muted); }
  .ci-workflow-guide__icon { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: var(--ci-radius-control); color: var(--ci-guide-ink); background: color-mix(in srgb, var(--ci-guide-tint) 60%, var(--ci-color-surface)); border: 1px solid color-mix(in srgb, var(--ci-guide-ink) 12%, transparent); }
  .ci-workflow-guide__icon svg { width: 1.125rem; height: 1.125rem; }
  [data-theme="dark"] .ci-workflow-guide--accent, .ci-workflow-guide--accent[data-theme="dark"] { --ci-guide-ink: var(--ci-color-accent); }
  [data-theme="light"] .ci-workflow-guide--accent, .ci-workflow-guide--accent[data-theme="light"] { --ci-guide-ink: var(--ci-color-heading); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ci-workflow-guide--accent:not([data-theme="light"]) { --ci-guide-ink: var(--ci-color-accent); }
    :root:not([data-theme="light"]) [data-theme="light"] .ci-workflow-guide--accent { --ci-guide-ink: var(--ci-color-heading); }
  }
  @container (min-width: 25rem) { .ci-workflow-guide__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @container (min-width: 53rem) { .ci-workflow-guide__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @keyframes ci-metric-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
  @keyframes ci-metric-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .ci-metric-chart[data-animate] .ci-metric-funnel__track span,
    .ci-metric-chart[data-animate] .ci-metric-donut__segment,
    .ci-metric-chart[data-animate] .ci-status-matrix__fill { animation: none; }
  }
}

.ci-select__item-copy { display:flex; flex-direction:column; min-width:0; }
.ci-select__item-description { margin-top:.25rem; font-size:var(--ci-font-size-xs); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); color:var(--ci-color-text-muted); white-space:normal; letter-spacing: var(--ci-type-control-tracking); }
.ci-select__content:has([data-described="true"]) { width:min(21rem, var(--radix-select-content-available-width)); }
@layer components {
  .ci-card[data-surface="subtle"] { background:linear-gradient(110deg,var(--ci-color-surface-subtle),var(--ci-color-surface)); }
}
/* Theme-scoped strengths inherit through the same boundaries as the palette. */
:root[data-theme="dark"], .ci-theme[data-theme="dark"] { --ci-announcement-start:24%; --ci-announcement-end:8%; --ci-announcement-border:24%; --ci-announcement-icon:28%; --ci-announcement-icon-border:32%; --ci-announcement-ink:100%; }
.ci-theme[data-theme="light"] { --ci-announcement-start:8%; --ci-announcement-end:0%; --ci-announcement-border:0%; --ci-announcement-icon:10%; --ci-announcement-icon-border:0%; --ci-announcement-ink:0%; }
.ci-accordion__label { display:flex; align-items:center; flex:1; min-width:0; gap:var(--ci-space-3); }
.ci-accordion__leading { display:flex; flex:0 0 auto; color:var(--ci-color-text-muted); }
.ci-accordion__leading svg { width:1.125rem; height:1.125rem; }
.ci-accordion__meta { flex:0 0 auto; color:var(--ci-color-text-muted); font-size:var(--ci-font-size-xs); font-weight:var(--ci-font-weight-regular); }

@layer components {
  .ci-brand-loader { position: relative; display: inline-block; max-width: 100%; color: var(--ci-color-brand-mark); vertical-align: middle; }
  .ci-brand-loader svg { display: block; width: 100%; height: auto; overflow: visible; }
  .ci-brand-loader__percentage { font-family: var(--ci-font-mono); font-size: 17px; font-variant-numeric: tabular-nums; }
  .ci-brand-loader__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* Grouped catalog variant; compact Playground rows in a rectangular form field. */
.ci-searchable-select__group-label { padding: 0.75rem 0.75rem 0.375rem; color: var(--ci-color-text-muted); font-size: 0.6875rem; line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); text-transform: uppercase; font-weight: var(--ci-font-weight-medium); }
.ci-searchable-select__identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; min-width: 0; }
.ci-searchable-select__name { overflow-wrap: anywhere; }
.ci-searchable-select__trailing { margin-left: auto; color: var(--ci-color-text-muted); font-size: 0.75rem; white-space: nowrap; font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); }
.ci-searchable-select__option > svg { flex-shrink: 0; }
.ci-searchable-select__trigger--model { gap: 0.5rem; }
.ci-searchable-select__trigger--model .ci-searchable-select__label { font-family: var(--ci-font-mono); font-size: var(--ci-font-size-xs); line-height: var(--ci-type-control-leading); font-weight: var(--ci-font-weight-medium); letter-spacing: var(--ci-type-control-tracking); }
.ci-searchable-select__trigger--model .ci-searchable-select__icon { width: 1rem; height: 1rem; }
.ci-searchable-select__trigger--model .ci-searchable-select__trailing { flex-shrink: 0; line-height: var(--ci-type-caption-leading); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-caption-tracking); }
.ci-searchable-select__trigger--model > svg { width: 0.875rem; height: 0.875rem; color: var(--ci-color-text-muted); }
.ci-searchable-select__popover--model { width: min(32rem, 90vw); min-width: var(--radix-popover-trigger-width); }
.ci-searchable-select__popover--model .ci-searchable-select__options { padding: 0.25rem 0; }
.ci-searchable-select__popover--model [role="group"] { padding-block: 0.25rem; }
.ci-searchable-select__popover--model .ci-searchable-select__group-label { padding: 0.25rem 0.75rem; font-family: var(--ci-font-mono); font-size: 0.625rem; line-height: var(--ci-type-control-leading); font-weight: var(--ci-font-weight-medium); letter-spacing: var(--ci-type-control-tracking); }
.ci-searchable-select__popover--model .ci-searchable-select__option { gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 0; font-size: var(--ci-font-size-xs); line-height: var(--ci-type-control-leading); font-weight: var(--ci-font-weight-medium); letter-spacing: var(--ci-type-control-tracking); }
.ci-searchable-select__popover--model .ci-searchable-select__option[aria-selected="true"] { background: var(--ci-color-surface-muted); }
.ci-searchable-select__popover--model .ci-searchable-select__identity { flex-wrap: nowrap; align-items: center; gap: 0.5rem; }
.ci-searchable-select__popover--model .ci-searchable-select__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ci-searchable-select__popover--model .ci-searchable-select__identity small { flex-shrink: 0; font-size: 0.6875rem; font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); white-space: nowrap; }
.ci-searchable-select__popover--model .ci-searchable-select__trailing { flex-shrink: 0; line-height: var(--ci-type-caption-leading); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-caption-tracking); }
.ci-searchable-select__popover--model .ci-searchable-select__icon { width: 1rem; height: 1rem; }
.ci-searchable-select__popover--model .ci-searchable-select__search { padding: 0; }
.ci-searchable-select__popover--model .ci-searchable-select__search:focus-within { border-bottom-color: var(--ci-color-border-subtle); }
.ci-searchable-select__popover--model .ci-input-shell { min-height: var(--ci-control-height-lg); padding-inline: 0.625rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ci-searchable-select__popover--model .ci-input-shell .ci-input { min-height: var(--ci-control-height-lg); font-size: var(--ci-font-size-sm); line-height: var(--ci-type-data-leading); font-weight: var(--ci-font-weight-regular); letter-spacing: var(--ci-type-data-tracking); }
.ci-searchable-select__popover--model .ci-input-shell__icon > svg { width: 0.875rem; height: 0.875rem; }
.ci-searchable-select__popover--model .ci-searchable-select__name { font-family: var(--ci-font-mono); }
.ci-searchable-select__action { position: sticky; bottom: -0.25rem; margin-top: 0.25rem; border-top: 1px solid var(--ci-color-border-subtle); border-radius: 0; background: var(--ci-color-surface); }
.ci-searchable-select__popover--model .ci-searchable-select__action .ci-searchable-select__name { font-family: inherit; }

@layer components {
  .ci-data-table-filter .ci-select[data-size] .ci-select__trigger { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-data-leading); letter-spacing: var(--ci-type-data-tracking); }
  .ci-data-table-filter .ci-input { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-data-leading); letter-spacing: var(--ci-type-data-tracking); }
  .ci-tabs__trigger[aria-selected="true"],
  .ci-segmented__item[aria-checked="true"],
  .ci-language-control__item[aria-pressed="true"],
  .ci-searchable-select__option[aria-selected="true"] { font-weight: var(--ci-font-weight-semibold); }
  .ci-table__cell { font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-data-leading); letter-spacing: var(--ci-type-data-tracking); }
  .ci-chart__tooltip strong,
  .ci-chart__grid-line text,
  .ci-chart__x-label[data-numeric],
  .ci-progress__value,
  .ci-sidebar__menu-badge,
  .ci-slider__header output,
  .ci-brand-loader__percentage,
  .ci-code-preview__number,
  .ci-range-calendar__day-button { letter-spacing: 0em; }
}

/* Integration setup: shared manual steps and agent handoff. */
.ci-menu--scrollable { max-height: min(32rem, var(--radix-dropdown-menu-content-available-height, calc(100dvh - 16px))); overflow-y: auto; overscroll-behavior: contain; }

/* Validation belongs to the whole control, including prefixes and suffixes. */
.ci-input--error, .ci-input[aria-invalid="true"], .ci-input-shell--error {
  border-color:var(--ci-color-danger);
  box-shadow:var(--ci-ring-field-error);
}
.ci-input:is(.ci-input--error,[aria-invalid="true"]):focus-visible, .ci-input-shell--error:focus-within {
  box-shadow:var(--ci-ring-field-focus),var(--ci-ring-field-error);
}
.ci-input:is(.ci-input--error,[aria-invalid="true"]):is(:autofill, :-webkit-autofill) {
  box-shadow:inset 0 0 0 1000px var(--ci-field-bg),var(--ci-ring-field-error);
}
.ci-input:is(.ci-input--error,[aria-invalid="true"]):is(:autofill, :-webkit-autofill):focus-visible {
  box-shadow:var(--ci-ring-field-focus),var(--ci-ring-field-error),inset 0 0 0 1000px var(--ci-field-bg);
}
.ci-input-shell .ci-input:is(:focus-visible,[aria-invalid="true"],[data-wizard-invalid="true"]) { outline:none; border:0; border-radius:0; box-shadow:none; }
.ci-input-shell .ci-input:is(:autofill, :-webkit-autofill),
.ci-input-shell .ci-input:is(:autofill, :-webkit-autofill):focus-visible { box-shadow:inset 0 0 0 1000px var(--ci-field-bg); }
/* Keep code typography stable inside the application typography scope. */
.ci-code-preview__pre { font-family:var(--ci-font-code); }
.ci-code-preview__pre code { font-family:inherit; font-size:inherit; line-height:inherit; letter-spacing:inherit; }
.ci-code-preview .ci-code-preview__source [data-syntax-color] { color:var(--ci-code-token-light); }
[data-theme="dark"] .ci-code-preview .ci-code-preview__source [data-syntax-color] { color:var(--ci-code-token-dark); }

/* Verified success between setup and the workspace. */
.ci-success-transition { display:grid; justify-items:center; align-content:center; gap:var(--ci-space-5); min-height:22rem; padding:var(--ci-space-10) var(--ci-space-6); border:var(--ci-border-default) solid var(--ci-color-border-subtle); border-radius:var(--ci-radius-surface); background:var(--ci-color-surface); text-align:center; }
.ci-success-transition__icon { display:grid; place-items:center; width:4rem; height:4rem; border-radius:var(--ci-radius-full); color:var(--ci-color-success); background:var(--ci-color-success-bg); animation:ci-success-arrive 420ms var(--ci-ease-emphasized) both; }
.ci-success-transition__icon svg { width:2.5rem; height:2.5rem; stroke-width:var(--ci-icon-stroke-width); }
.ci-success-transition__copy { display:grid; gap:var(--ci-space-2); max-width:32rem; animation:ci-success-arrive 280ms var(--ci-ease-standard) both; }
.ci-success-transition__copy h2 { margin:0; font-size:var(--ci-font-size-2xl); line-height:var(--ci-type-heading-leading); color:var(--ci-color-heading); font-weight:var(--ci-font-weight-medium); }
.ci-success-transition__copy p { margin:0; font-size:var(--ci-font-size-sm); line-height:var(--ci-type-body-leading); color:var(--ci-color-text-muted); }
@keyframes ci-success-arrive { from { opacity:0; transform:translateY(8px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(prefers-reduced-motion:reduce) { .ci-success-transition__icon, .ci-success-transition__copy { animation:none; } }

@layer components {
  .ci-secret-value { display:grid; min-width:0; gap:var(--ci-space-2); }
  .ci-secret-value__row { display:flex; align-items:center; flex-wrap:wrap; gap:var(--ci-space-3); min-width:0; }
  .ci-secret-value__value { flex:1 1 14rem; min-width:0; padding:var(--ci-space-2) var(--ci-space-3); border:var(--ci-border-default) solid var(--ci-color-border-subtle); border-radius:var(--ci-radius-control); background:var(--ci-color-surface-subtle); color:var(--ci-color-foreground); font-family:var(--ci-font-code); font-size:var(--ci-font-size-sm); line-height:var(--ci-type-body-leading); overflow-wrap:anywhere; }
  .ci-secret-value__value:focus-visible { outline:var(--ci-focus-ring-width) solid var(--ci-color-focus); outline-offset:var(--ci-focus-ring-offset); }
  .ci-secret-value__actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--ci-space-2); }
}
.ci-success-transition[data-presentation="stage"] { flex:1; width:100%; min-height:min(28rem,70svh); border:0; background:transparent; padding:2rem 1rem; }
.ci-success-transition[data-presentation="stage"] .ci-success-transition__icon { position:relative; width:5rem; height:5rem; isolation:isolate; }
.ci-success-transition__ring { display:none; }
.ci-success-transition[data-presentation="stage"] .ci-success-transition__ring { display:block; position:absolute; inset:0; border:1px solid var(--ci-color-success); border-radius:inherit; animation:ci-success-ring 900ms var(--ci-ease-emphasized) both; }
.ci-success-transition[data-presentation="stage"] .ci-success-transition__icon svg { animation:ci-success-check 550ms var(--ci-ease-emphasized) both; }
@keyframes ci-success-ring { from { transform:scale(.85); opacity:.5; } to { transform:scale(1.8); opacity:0; } }
@keyframes ci-success-check { 0%,25% { opacity:0; transform:scale(.7) rotate(-12deg); } 75% { opacity:1; transform:scale(1.1) rotate(0); } 100% { opacity:1; transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { .ci-success-transition[data-presentation="stage"] :is(.ci-success-transition__ring,.ci-success-transition__icon svg) { animation:none; } .ci-success-transition__ring { visibility:hidden; } }
@keyframes ci-choice-stack { 0%,100% { translate:0 0; } 50% { translate:0 -6px; } }
@keyframes ci-choice-compute { 0%,100% { transform:scale(1); opacity:.65; } 50% { transform:scale(1.08); opacity:1; } }
@keyframes ci-choice-optimize { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(.8); } }

/* Optional Select option icons stay decorative and do not enter the selected label. */
.ci-select__item-icon { display:grid;place-items:center;flex:none;width:18px;height:18px;margin-inline-end:10px;color:var(--ci-color-text-muted); }
.ci-select__item-icon svg { width:16px;height:16px; }

.ci-field__label-row { display:flex;align-items:center;gap:6px; }

.ci-dialog[data-size="wide"] { max-width:36rem; }

/* Opt-in usage workspace foundations. Existing controls retain their defaults. */
@layer components {
  .ci-button--assistant {
    --assistant-center-tint: color-mix(in srgb, var(--ci-color-accent) 65%, var(--ci-neutral-0) 35%);
    color: var(--ci-color-accent-foreground);
    border-color: transparent;
    border-radius: var(--ci-radius-full);
    background: var(--ci-color-accent);
    background-image: linear-gradient(120deg, var(--ci-color-accent) 0%, var(--assistant-center-tint) 50%, var(--ci-color-accent) 100%);
    background-origin: border-box;
    background-clip: border-box;
    background-repeat: no-repeat;
  }
  .ci-button--assistant:hover {
    --assistant-center-tint: color-mix(in srgb, var(--ci-color-accent) 70%, var(--ci-neutral-0) 30%);
    background-image: linear-gradient(120deg, var(--ci-color-accent) 0%, var(--assistant-center-tint) 50%, var(--ci-color-accent) 100%);
  }
  .ci-button--assistant:active {
    --assistant-center-tint: color-mix(in srgb, var(--ci-color-accent) 75%, var(--ci-neutral-0) 25%);
  }

  .ci-switch--size-sm { gap: var(--ci-space-2); }
  .ci-switch--size-sm.ci-switch__control,
  .ci-switch--size-sm .ci-switch__control { width: 33px; min-height: 28px; align-items: center; }
  .ci-switch--size-sm .ci-switch__track { width: 33px; height: 18px; }
  .ci-switch--size-sm .ci-switch__thumb { top: 2px; left: 2px; width: 12px; height: 12px; }
  .ci-switch--size-sm .ci-switch__input { inset: 0; width: 100%; height: 100%; cursor: inherit; }
  .ci-switch--size-sm .ci-switch__input:checked + .ci-switch__track .ci-switch__thumb { transform: translateX(15px); }
  .ci-switch--size-sm .ci-switch__label { font-size: var(--ci-font-size-xs); }
  .ci-switch--size-sm .ci-switch__input:disabled { cursor: not-allowed; }

  .ci-tabs--size-sm:not(.ci-tabs--card) .ci-tabs__trigger {
    min-height: 24px;
    padding-inline: var(--ci-space-2);
    font-size: var(--ci-font-size-xs);
  }
  .ci-tabs--size-sm.ci-tabs--capsule .ci-tabs__list { padding: 2px; }

  .ci-docked-layout {
    container: ci-docked-workspace / inline-size;
    display: flex;
    min-width: 0;
    min-height: 0;
    position: relative;
    isolation: isolate;
  }
  .ci-docked-layout__content { flex: 1 1 0; min-width: 0; min-height: 0; }
  .ci-docked-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 480px;
    flex: 0 0 480px;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    border-left: var(--ci-border-default) solid var(--ci-color-border);
    background: var(--ci-color-surface);
    color: var(--ci-color-foreground);
    box-shadow: -8px 0 24px #0001;
    z-index: 1;
    outline: none;
  }
  .ci-docked-rail:focus-visible { outline: 2px solid var(--ci-color-focus); outline-offset: -2px; }
  .ci-docked-rail__header { display: flex; flex: none; align-items: center; gap: var(--ci-space-3); padding: var(--ci-space-4); border-bottom: var(--ci-border-default) solid var(--ci-color-border); min-width: 0; }
  .ci-docked-rail__body { flex: 1 1 0; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--ci-space-4); }
  .ci-docked-rail__footer { flex: none; min-width: 0; padding: var(--ci-space-4); }
  @container ci-docked-workspace (max-width: 959px) {
    .ci-docked-layout > .ci-docked-rail { width: 400px; flex-basis: 400px; }
  }
  @container ci-docked-workspace (max-width: 719px) {
    .ci-docked-layout[data-panel-open] > .ci-docked-layout__content { display: none; }
    .ci-docked-layout > .ci-docked-rail { width: 100%; flex: 1 1 0; }
  }

  .ci-scope-chip.ci-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    gap: 6px;
    padding: 2px 8px;
    padding-inline-start: 12px;
    border-radius: var(--ci-radius-lg);
    font-size: var(--ci-font-size-xs);
    font-weight: var(--ci-font-weight-medium);
    line-height: var(--ci-type-body-leading);
    white-space: normal;
  }
  .ci-scope-chip__summary {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 32px;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    border: 0;
    border-radius: var(--ci-radius-md);
    background: transparent;
  }
  .ci-scope-chip:has(.ci-scope-chip__chevron) .ci-scope-chip__summary { font-weight: var(--ci-font-weight-regular); }
  .ci-scope-chip__summary.ci-button:hover { background: transparent; color: inherit; }
  .ci-scope-chip__summary.ci-button:active { transform: none; }
  .ci-scope-chip__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ci-scope-chip:not(:has(.ci-scope-chip__chevron)) .ci-scope-chip__text { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; white-space: normal; overflow-wrap: anywhere; }
  .ci-scope-chip:not(:has(.ci-scope-chip__chevron)) .ci-scope-chip__text > * { min-width: 0; max-width: 100%; }
  .ci-scope-chip__icon, .ci-scope-chip__count, .ci-scope-chip__chevron { flex: none; }
  .ci-scope-chip__icon { display: inline-flex; align-items: center; }
  .ci-scope-chip__icon svg, .ci-scope-chip__chevron { width: 14px; height: 14px; }
  .ci-scope-chip__remove.ci-button { flex: none; width: 32px; min-height: 32px; margin-right: -2px; color: inherit; }
  .ci-scope-chip__remove.ci-button > svg { width: 14px; height: 14px; }
  .ci-scope-chip[data-expanded] { align-items: flex-start; }
  .ci-scope-chip[data-expanded] .ci-scope-chip__summary { align-items: flex-start; padding-block: 5px; }
  .ci-scope-chip[data-expanded] .ci-scope-chip__text { max-height: 220px; overflow-y: auto; white-space: normal; overflow-wrap: anywhere; line-height: 1.7; text-align: left; }
  .ci-scope-chip[data-expanded] .ci-scope-chip__icon,
  .ci-scope-chip[data-expanded] .ci-scope-chip__chevron { margin-top: 2px; }
  .ci-scope-chip[data-expanded] .ci-scope-chip__chevron { transform: rotate(180deg); }
  .ci-scope-chip[data-variant="outline"] {
    gap: 4px; padding: 2px 8px 2px 14px; background: transparent; border-color: var(--ci-color-border-subtle);
  }
  .ci-scope-chip[data-variant="outline"] .ci-scope-chip__summary { min-height: 24px; }
  .ci-scope-chip[data-variant="outline"][data-expanded] .ci-scope-chip__summary { padding-block: 2px; }
  .ci-scope-chip[data-variant="outline"][data-expanded] .ci-scope-chip__text { line-height: 20px; }
  .ci-scope-chip[data-variant="outline"][data-expanded] .ci-scope-chip__icon,
  .ci-scope-chip[data-variant="outline"][data-expanded] .ci-scope-chip__chevron { margin-top: 3px; }
  .ci-scope-chip[data-variant="outline"] .ci-scope-chip__remove.ci-button {
    width: 24px; height: 24px; min-height: 24px; margin-right: 0;
  }
}

@media (forced-colors: active) {
  .ci-button--assistant, .ci-button--assistant:hover, .ci-button--assistant:active { color: ButtonText; border-color: ButtonText; background: ButtonFace; }
  .ci-docked-rail { border-color: CanvasText; box-shadow: none; }
}

@layer components {
/* Promoted from the approved Reports/Requests preview: dimensions are unchanged. */
.ci-stacked-chart { width:100%; min-width:0; margin:0; color:var(--ci-color-text-muted); }
.ci-stacked-chart__plot { position:relative; min-width:0; width:100%; }
.ci-stacked-chart__zone { fill:transparent; outline:none; pointer-events:all; }
.ci-stacked-chart__zone[role="button"] { cursor:pointer; }
.ci-stacked-chart__zone:focus-visible { stroke:var(--ci-color-foreground); stroke-width:2; stroke-dasharray:3 3; }
.ci-stacked-chart__keyboard-tooltip { position:absolute; z-index:4; width:220px; max-width:100%; pointer-events:none; overflow-wrap:anywhere; }
.ci-stacked-chart__legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-top:16px; padding:10px 6px 2px; font:10px/1.5 var(--ci-font-ui); }
.ci-stacked-chart__legend > span { display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; color:var(--ci-color-foreground); }
.ci-stacked-chart__series { display:inline-flex; align-items:center; gap:4px; }
.ci-stacked-chart__series > span { display:inline-flex; flex-shrink:0; }
.ci-stacked-chart__legend svg, .ci-stacked-chart__legend img { width:18px; height:18px; }
.ci-stacked-chart__legend i { display:inline-block; flex:0 0 8px; width:8px; height:8px; border-radius:50%; }
.ci-line-chart { width:100%; min-width:0; margin:0; color:var(--ci-color-text-muted); }
.ci-line-chart__plot { position:relative; min-width:0; width:100%; }
/* Recharts always lays the plot out left to right, so anchors and overlay coordinates stay physical. */
.ci-line-chart__plot svg { direction:ltr; }
.ci-line-chart__zone { position:absolute; top:8px; bottom:30px; outline:none; }
.ci-line-chart__zone:focus-visible { outline:2px solid var(--ci-color-focus); outline-offset:-2px; }
.ci-line-chart__guide { position:absolute; top:8px; bottom:30px; border-inline-start:1px solid var(--ci-color-text-muted); pointer-events:none; }
.ci-line-chart__tooltip { --ci-line-chart-tooltip-width:min(220px, 100%); position:absolute; z-index:4; top:12px; display:grid; gap:var(--ci-space-1); box-sizing:border-box; width:var(--ci-line-chart-tooltip-width); padding:var(--ci-space-2) var(--ci-space-3); border:1px solid var(--ci-color-border); border-radius:8px; background:var(--ci-color-surface); color:var(--ci-color-foreground); font-size:12px; overflow-wrap:anywhere; pointer-events:none; }
.ci-line-chart__tooltip[data-side="end"] { left:clamp(0px, calc(var(--ci-line-chart-x) + 12px), calc(100% - var(--ci-line-chart-tooltip-width))); }
.ci-line-chart__tooltip[data-side="start"] { left:clamp(0px, calc(var(--ci-line-chart-x) - var(--ci-line-chart-tooltip-width) - 12px), calc(100% - var(--ci-line-chart-tooltip-width))); }
.ci-line-chart__tooltip-label, .ci-line-chart__tooltip small { color:var(--ci-color-text-muted); font-size:inherit; }
.ci-line-chart__tooltip ul { display:grid; gap:var(--ci-space-1); margin:0; padding:0; list-style:none; }
.ci-line-chart__tooltip li { display:flex; align-items:baseline; justify-content:space-between; gap:var(--ci-space-3); min-width:0; }
.ci-line-chart__tooltip strong { flex:none; font-weight:var(--ci-font-weight-medium); font-variant-numeric:tabular-nums; }
.ci-line-chart__legend { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ci-space-2) var(--ci-space-5); margin-top:var(--ci-space-4); padding-block:var(--ci-space-2) 2px; padding-inline:6px; }
.ci-calendar-heatmap { --ci-calendar-heatmap-cell:14px; position:relative; width:100%; min-width:0; margin:0; color:var(--ci-color-text-muted); font-size:var(--ci-font-size-xs); }
.ci-calendar-heatmap__scroll { overflow-x:auto; padding:var(--ci-space-0-5); }
.ci-calendar-heatmap__grid { border-collapse:separate; border-spacing:2px; font-size:10px; line-height:1; }
.ci-calendar-heatmap__grid th { padding:0; color:inherit; font-weight:var(--ci-font-weight-regular); white-space:nowrap; text-align:start; }
.ci-calendar-heatmap__grid tbody th { padding-inline-end:var(--ci-space-1); }
.ci-calendar-heatmap__grid td { padding:0; }
.ci-calendar-heatmap__day { box-sizing:border-box; width:var(--ci-calendar-heatmap-cell); height:var(--ci-calendar-heatmap-cell); border-radius:2px; text-align:center; vertical-align:middle; outline:none; }
.ci-calendar-heatmap__day:focus-visible { outline:2px solid var(--ci-color-focus); outline-offset:1px; }
.ci-calendar-heatmap__mark { --ci-calendar-heatmap-mark:0.45; box-sizing:border-box; display:inline-block; width:calc(var(--ci-calendar-heatmap-cell) * var(--ci-calendar-heatmap-mark)); height:calc(var(--ci-calendar-heatmap-cell) * var(--ci-calendar-heatmap-mark)); border-radius:2px; vertical-align:middle; }
.ci-calendar-heatmap__mark[data-level="0"] { border:1px solid var(--ci-color-text-muted); }
.ci-calendar-heatmap__mark[data-unavailable] { border:1px dashed var(--ci-color-text-muted); }
.ci-calendar-heatmap__mark[data-level="1"] { --ci-calendar-heatmap-mark:0.55; background:var(--ci-scale-seq-1); }
.ci-calendar-heatmap__mark[data-level="2"] { --ci-calendar-heatmap-mark:0.62; background:var(--ci-scale-seq-2); }
.ci-calendar-heatmap__mark[data-level="3"] { --ci-calendar-heatmap-mark:0.7; background:var(--ci-scale-seq-3); }
.ci-calendar-heatmap__mark[data-level="4"] { --ci-calendar-heatmap-mark:0.77; background:var(--ci-scale-seq-4); }
.ci-calendar-heatmap__mark[data-level="5"] { --ci-calendar-heatmap-mark:0.85; background:var(--ci-scale-seq-5); }
.ci-calendar-heatmap__mark[data-level="6"] { --ci-calendar-heatmap-mark:0.92; background:var(--ci-scale-seq-6); }
.ci-calendar-heatmap__mark[data-level="7"] { --ci-calendar-heatmap-mark:1; background:var(--ci-scale-seq-7); }
.ci-calendar-heatmap__legend { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ci-space-1) var(--ci-space-4); margin-top:var(--ci-space-3); }
.ci-calendar-heatmap__key { display:inline-flex; align-items:center; gap:var(--ci-space-1); }
.ci-calendar-heatmap__key-swatch { display:inline-flex; align-items:center; justify-content:center; width:var(--ci-calendar-heatmap-cell); height:var(--ci-calendar-heatmap-cell); }
.ci-calendar-heatmap__tooltip { --ci-calendar-heatmap-tooltip-width:min(180px, 100%); position:absolute; z-index:4; top:var(--ci-calendar-heatmap-y); left:clamp(0px, calc(var(--ci-calendar-heatmap-x) - var(--ci-calendar-heatmap-tooltip-width) / 2), calc(100% - var(--ci-calendar-heatmap-tooltip-width))); display:grid; gap:2px; box-sizing:border-box; width:var(--ci-calendar-heatmap-tooltip-width); padding:var(--ci-space-2) var(--ci-space-3); border:1px solid var(--ci-color-border); border-radius:8px; background:var(--ci-color-surface); color:var(--ci-color-foreground); font-size:12px; overflow-wrap:anywhere; pointer-events:none; transform:translateY(calc(-100% - 6px)); }
.ci-calendar-heatmap__tooltip span, .ci-calendar-heatmap__tooltip small { color:var(--ci-color-text-muted); font-size:inherit; }
.ci-calendar-heatmap__tooltip strong { font-weight:var(--ci-font-weight-medium); font-variant-numeric:tabular-nums; }
@media (forced-colors:active) { .ci-calendar-heatmap__mark { forced-color-adjust:none; } }
.ci-sparkline { display:block; width:100%; height:52px; min-width:0; }
.ci-metric-trend { display:flex; flex-direction:column; gap:6px; color:var(--ci-color-foreground); }
.ci-metric-trend__value { display:flex; align-items:center; gap:5px; font-size:15px; line-height:1.2; font-weight:var(--ci-font-weight-semibold); font-variant-numeric:tabular-nums; }
.ci-metric-trend[data-tone="positive"] .ci-metric-trend__value { color:var(--ci-color-success); }
.ci-metric-trend[data-tone="negative"] .ci-metric-trend__value { color:var(--ci-color-danger); }
.ci-metric-trend__comparison { color:var(--ci-color-text-muted); font-size:11px; }
.ci-metric-card { container:ci-metric-card / inline-size; position:relative; min-width:0; padding:20px 18px 14px; gap:0; font-family:var(--ci-font-ui); font-size:14px; }
.ci-metric-card__head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px; }
.ci-metric-card .ci-metric-card__stat { flex:1 1 170px; min-width:0; padding:0; border:0; background:transparent; --ci-font-size-5xl:32px; --ci-font-display:var(--ci-font-ui); }
.ci-metric-card__stat .ci-stat__value { white-space:normal; overflow-wrap:anywhere; }
.ci-metric-card__side { display:flex; flex-direction:column; align-items:flex-end; gap:14px; min-width:0; }
.ci-metric-card__side .ci-metric-trend { margin-left:auto; align-items:flex-end; text-align:right; }
.ci-metric-card__side .ci-metric-trend__value { justify-content:flex-end; }
.ci-metric-card__controls { position:relative; z-index:2; max-width:100%; }
.ci-metric-card__body { position:relative; margin-top:22px; min-width:0; }
.ci-metric-card__footer { margin-top:16px; padding-top:12px; border-top:1px solid var(--ci-color-border); font:12px/1.5 var(--ci-font-ui); color:var(--ci-color-text-muted); overflow-wrap:anywhere; }
.ci-metric-card__select { position:absolute; z-index:1; inset:0; width:100%; height:100%; padding:0; border:0; border-radius:inherit; background:transparent; cursor:pointer; }
.ci-metric-card:has(.ci-metric-card__select) .ci-metric-card__stat, .ci-metric-card:has(.ci-metric-card__select) .ci-metric-card__body, .ci-metric-card:has(.ci-metric-card__select) .ci-metric-card__footer { pointer-events:none; }
.ci-metric-card:has(.ci-metric-card__select) .ci-metric-card__body { z-index:2; }
.ci-metric-card__select:focus-visible { outline:2px solid var(--ci-color-foreground); outline-offset:3px; }
.ci-metric-card__select:disabled { cursor:default; }
.ci-metric-card[data-selected] { border-color:var(--ci-color-foreground); background:var(--ci-color-surface-muted); }
.ci-metric-card[data-disabled] { opacity:.45; }
.ci-metric-card__loading { display:grid; grid-template-columns:1.2fr 1fr 65px; align-items:center; gap:16px; min-height:108px; padding-top:0; }
.ci-metric-card__loading > div { display:grid; gap:10px; }
.ci-metric-card__error { padding:36px 0 20px; min-height:125px; color:var(--ci-color-text-muted); }
.ci-metric-card[data-presentation="secondary"] { padding:14px 16px; }
.ci-metric-card[data-presentation="secondary"] .ci-metric-card__head { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(100px,1fr) 56px; align-items:start; gap:10px; }
.ci-metric-card[data-presentation="secondary"] .ci-metric-card__stat { display:contents; }
.ci-metric-card[data-presentation="secondary"] .ci-stat__label { grid-column:1 / -1; min-height:24px; padding-right:100px; }
.ci-metric-card[data-presentation="secondary"] .ci-stat__value { grid-column:1; grid-row:2; margin:0; font-size:32px; }
.ci-metric-card[data-presentation="secondary"] .ci-stat__hint { grid-column:1; grid-row:3; margin:0; }
.ci-metric-card[data-presentation="secondary"] .ci-metric-card__side { display:block; grid-column:2; grid-row:2 / span 2; padding-top:3px; }
.ci-metric-card[data-presentation="secondary"] .ci-metric-card__sparkline { grid-column:3; grid-row:2 / span 2; }
.ci-metric-card[data-presentation="secondary"] .ci-metric-trend { border-left:1px solid var(--ci-color-border); padding-left:10px; gap:4px; align-items:flex-start; text-align:left; }
.ci-metric-card[data-presentation="secondary"] .ci-metric-trend__value { justify-content:flex-start; }
.ci-metric-card__sparkline { min-width:0; }
.ci-metric-card .ci-metric-card__view { position:absolute; z-index:2; top:10px; right:12px; margin:0; padding:0 8px; height:24px; min-height:24px; font-size:10px; }
@media (hover:hover) { .ci-metric-card:has(.ci-metric-card__select:not(:disabled)):hover { border-color:var(--ci-color-text-muted); box-shadow:var(--ci-shadow-sm); } }
@container ci-metric-card (max-width:360px) { .ci-metric-card[data-presentation="primary"] .ci-metric-card__side { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; width:100%; } }
@container ci-metric-card (max-width:360px) {
  .ci-metric-card[data-presentation="secondary"] .ci-metric-card__head { grid-template-columns:minmax(0,1fr) minmax(64px,.8fr); gap:10px; }
  .ci-metric-card[data-presentation="secondary"] .ci-stat__value,
  .ci-metric-card[data-presentation="secondary"] .ci-stat__hint { grid-column:1 / -1; }
  .ci-metric-card[data-presentation="secondary"] .ci-metric-card__side { grid-column:1; grid-row:4; padding-top:4px; align-self:center; }
  .ci-metric-card[data-presentation="secondary"] .ci-metric-trend { border-left:0; padding-left:0; }
  .ci-metric-card[data-presentation="secondary"] .ci-metric-card__sparkline { grid-column:2; grid-row:4; align-self:center; }
}
@media (max-width:320px) { .ci-metric-card__head { gap:12px; } .ci-metric-card__footer { font-size:11px; } }
@media (forced-colors:active) { .ci-stacked-chart__legend i { forced-color-adjust:none; } .ci-metric-card[data-selected] { border-color:Highlight; } }
}

@layer components {
/* Controlled assistant compositions. Layout/transport and account state belong to callers. */
.ci-chat-header { display:flex; align-items:center; gap:6px; padding:10px 12px; min-width:0; border-bottom:1px solid var(--ci-color-border); }
.ci-chat-header__identity { display:flex; align-items:center; gap:7px; min-width:0; flex:1; }
.ci-chat-header__logo { display:inline-flex; align-items:center; justify-content:center; flex:none; width:24px; height:24px; line-height:0; color:var(--ci-color-text); }
.ci-chat-header__logo > * { display:block; width:100%; height:100%; object-fit:contain; }
.ci-chat-header__title { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; line-height:20px; font-weight:500; }
.ci-chat-header[data-history] { border-bottom-color:transparent; }
.ci-chat-header[data-history] .ci-chat-header__title { font-size:16px; color:light-dark(#1f1f1f,#e3e3e3); }
.ci-chat-header__actions { display:flex; align-items:center; gap:2px; flex:none; }
.ci-chat-welcome { min-width:0; width:100%; text-align:center; }
.ci-chat-welcome[data-align="start"] { text-align:start; }
.ci-chat-welcome__mark { display:block; margin:0 auto 12px; width:64px; height:64px; color:light-dark(#000,#fff); flex:none; }
.ci-chat-welcome__mark > * { width:100%; height:100%; }
.ci-chat-welcome__title { margin:0 0 24px; max-width:100%; overflow-wrap:anywhere; font-size:22px; font-weight:var(--ci-font-weight-medium); line-height:var(--ci-type-heading-leading); letter-spacing:-.02em; }
.ci-chat-welcome[data-align="start"] .ci-chat-welcome__mark { margin-inline:0; }
.ci-chat-prompts { display:flex; justify-content:inherit; align-items:center; flex-wrap:wrap; gap:8px; max-width:100%; }
.ci-chat-welcome .ci-chat-prompts { justify-content:center; }
.ci-chat-welcome[data-align="start"] .ci-chat-prompts { justify-content:flex-start; }
.ci-chat-prompts > .ci-button { max-width:100%; min-width:0; height:auto; min-height:32px; white-space:normal; }
.ci-chat-prompts__icon { display:inline-flex; align-items:center; justify-content:center; flex:none; width:16px; height:16px; }
.ci-chat-prompts__icon > svg, .ci-chat-prompts__icon > img { width:100%; height:100%; }
.ci-chat-prompts__label { min-width:0; overflow-wrap:anywhere; }
.ci-chat-composer { min-width:0; max-width:100%; border:1px solid var(--ci-color-border); border-radius:20px; padding:10px; background:var(--ci-color-surface); }
.ci-chat-composer .ci-chat-composer__input { display:block; box-sizing:border-box; width:100%; min-width:0; min-height:56px; max-height:240px; border:0; border-radius:8px; box-shadow:none; resize:none; background:transparent; font-size:14px; line-height:1.5; padding:6px; }
.ci-chat-composer__footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px; padding-top:2px; }
.ci-chat-composer__tools { display:flex; align-items:center; gap:4px; }
.ci-chat-composer__hint { flex:1; min-width:0; font-size:10px; text-align:center; overflow-wrap:anywhere; color:var(--ci-color-text-muted); }
.ci-chat-composer__attachments { list-style:none; padding:0; margin:0 0 8px; display:flex; flex-wrap:wrap; gap:6px; }
.ci-chat-composer__attachments > li { min-width:0; max-width:100%; }
.ci-chat-composer__attachment { max-width:100%; gap:4px; padding:2px 8px 2px 14px; border-radius:var(--ci-radius-lg); border-color:var(--ci-color-border-subtle); background:transparent; }
.ci-chat-composer__attachment > .ci-button { flex:none; width:24px; height:24px; min-height:24px; padding:0; }
.ci-chat-composer__attachment > .ci-button > svg { width:14px; height:14px; }
.ci-chat-composer__filename { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ci-chat-composer__error { padding:6px 10px; color:var(--ci-color-danger); font-size:12px; overflow-wrap:anywhere; }
.ci-chat-composer .ci-chat-composer__stop { width:32px; height:32px; min-height:32px; padding:0; border-radius:50%; color:var(--ci-color-surface); background:var(--ci-color-foreground); }
.ci-chat-composer .ci-chat-composer__stop:hover { color:var(--ci-color-surface); background:var(--ci-color-foreground); opacity:.85; }
.ci-chat-composer .ci-chat-composer__stop > svg { width:12px; height:12px; }
.ci-chat-thread { display:flex; flex-direction:column; gap:24px; min-width:0; }
.ci-chat-message { display:flex; flex-direction:column; gap:12px; min-width:0; max-width:100%; }
.ci-chat-message__author { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ci-chat-message__content { min-width:0; overflow-wrap:anywhere; font-size:14px; line-height:1.6; }
.ci-chat-message__content > :first-child { margin-top:0; }
.ci-chat-message__content > :last-child { margin-bottom:0; }
.ci-chat-message[data-kind="user"] { align-self:flex-end; width:fit-content; max-width:85%; margin-left:auto; }
.ci-chat-message[data-kind="user"] .ci-chat-message__content { padding:10px 14px; border:1px solid var(--ci-color-border); border-radius:16px; background:transparent; line-height:1.5; }
.ci-chat-message__evidence { min-width:0; overflow-x:auto; }
.ci-chat-message-actions { display:flex; align-items:center; flex-wrap:wrap; gap:2px; color:var(--ci-color-text-muted); }
.ci-chat-message-actions__feedback { font-size:12px; color:var(--ci-color-text-muted); }
.ci-chat-activity { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-width:0; color:var(--ci-color-text-muted); font-size:14px; line-height:1.5; }
.ci-chat-activity__header { display:inline-flex; align-items:center; gap:5px; max-width:100%; min-width:0; padding:0; border:0; border-radius:4px; background:transparent; color:var(--ci-color-text-muted); font:inherit; font-weight:400; text-align:start; }
.ci-chat-activity__header:focus-visible { outline:none; box-shadow:var(--ci-ring-focus); }
.ci-chat-activity__elapsed { margin-inline-start:3px; font-variant-numeric:tabular-nums; }
.ci-chat-activity[data-has-summary] { flex-direction:column; align-items:stretch; gap:8px; }
.ci-chat-activity__details { min-width:0; }
.ci-chat-activity__details > summary { width:fit-content; cursor:pointer; list-style:none; }
.ci-chat-activity__details > summary::-webkit-details-marker { display:none; }
.ci-chat-activity__details > summary::marker { content:""; }
.ci-chat-activity .ci-chat-activity__chevron { flex:none; width:18px; height:18px; opacity:.65; }
.ci-chat-activity__details[open] .ci-chat-activity__chevron { transform:rotate(180deg); }
.ci-chat-activity__thinking { color:var(--ci-color-text-muted); }
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .ci-chat-activity__thinking { background-image:linear-gradient(105deg,var(--ci-color-text-muted) 0%,var(--ci-color-text-muted) 37%,color-mix(in srgb,var(--ci-color-text-muted) 40%,var(--ci-color-foreground) 60%) 50%,var(--ci-color-text-muted) 63%,var(--ci-color-text-muted) 100%); background-size:240% 100%; background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:ci-chat-thinking-shimmer 2.8s linear infinite; }
}
@keyframes ci-chat-thinking-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
.ci-chat-activity__summary { min-width:0; max-width:100%; padding-top:10px; overflow-wrap:anywhere; color:var(--ci-color-text-muted); font-size:13px; line-height:1.6; }
.ci-chat-activity__summary p { margin:0; }
.ci-chat-activity__summary ol { padding-inline-start:20px; margin:8px 0; font-size:13px; }
.ci-chat-activity__note { display:block; color:var(--ci-color-text-muted); font-size:11px; }
.ci-chat-activity[data-has-summary] .ci-chat-activity__action { align-self:flex-start; }
.ci-chat-activity .ci-chat-activity__retry { gap:5px; min-height:28px; padding:2px 0; border:0; border-radius:4px; background:transparent; color:var(--ci-color-text-muted); }
.ci-chat-activity .ci-chat-activity__retry:hover { color:var(--ci-color-foreground); background:transparent; }
.ci-chat-activity .ci-chat-activity__retry > svg { flex:none; width:14px; height:14px; }
@media (prefers-reduced-motion:reduce) {
  .ci-chat-activity__thinking { animation:none; background:none; color:var(--ci-color-text-muted); -webkit-text-fill-color:currentColor; }
}
@media (forced-colors:active) {
  .ci-chat-activity__thinking { animation:none; background:none; color:CanvasText; -webkit-text-fill-color:currentColor; }
  .ci-chat-activity__header { color:CanvasText; }
  .ci-chat-composer .ci-chat-composer__stop { color:ButtonFace; background:ButtonText; forced-color-adjust:none; }
}
.ci-chat-activity[data-state="error"] { color:var(--ci-color-danger); }
.ci-chat-activity[data-state="error"] .ci-chat-activity__header { color:var(--ci-color-danger); }
.ci-chat-history { --chat-history-ink:light-dark(#1f1f1f,#e3e3e3); --chat-history-muted:light-dark(#70757a,#aeb3b8); --chat-history-selected:light-dark(#e7e8e9,#303134); margin-inline:-8px; display:flex; flex-direction:column; gap:24px; min-width:0; }
.ci-chat-history__feedback { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; }
.ci-chat-history__group > h3 { margin:0 8px 8px; font-size:12px; line-height:1.4; font-weight:400; color:var(--chat-history-muted); }
.ci-chat-history__group > ul { display:flex; flex-direction:column; gap:4px; list-style:none; padding:0; margin:0; }
.ci-chat-history__item { display:flex; align-items:center; gap:2px; padding-right:4px; border-radius:999px; min-width:0; }
.ci-chat-history__item[data-active], .ci-chat-history__item:hover, .ci-chat-history__item:focus-within { background:var(--chat-history-selected); }
.ci-chat-history .ci-chat-history__row { flex:1; display:flex; align-items:center; justify-content:flex-start; gap:12px; min-width:0; padding:8px 12px; height:auto; min-height:52px; border-radius:999px; background:transparent; color:var(--chat-history-ink); font-weight:400; text-align:start; }
.ci-chat-history__icon { display:inline-flex; flex:none; color:var(--chat-history-muted); }
.ci-chat-history__text { display:flex; flex-direction:column; align-items:flex-start; gap:0; min-width:0; flex:1; }
.ci-chat-history__title { display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:1.4; font-weight:400; }
.ci-chat-history__text > time { color:var(--chat-history-muted); font-size:12px; line-height:1.35; }
.ci-chat-history__more { flex:none; color:var(--chat-history-muted); }
.ci-chat-history__menu { min-width:148px; max-width:calc(100vw - 24px); border-radius:10px; background:light-dark(#fff,#202124); color:light-dark(#1f1f1f,#e3e3e3); }
.ci-chat-history__empty { display:flex; flex-direction:column; align-items:center; text-align:center; margin:auto 0; gap:10px; padding:48px 12px; color:var(--ci-color-text-muted); }
.ci-chat-history__empty h3 { margin:0; font-size:15px; font-weight:500; color:var(--ci-color-text); }
.ci-chat-history__empty p { max-width:260px; margin:0 0 8px; font-size:13px; }
@media (hover:hover) and (pointer:fine) {
  .ci-chat-history__more { opacity:0; }
  .ci-chat-history__item:hover .ci-chat-history__more, .ci-chat-history__item:focus-within .ci-chat-history__more, .ci-chat-history__more[data-state="open"] { opacity:1; }
}
@media (forced-colors:active) {
  .ci-chat-history__item[data-active] { outline:1px solid Highlight; }
  .ci-chat-composer { border-color:CanvasText; }
}

}

@layer components {
  /* Approved Reports/Requests detail presentation. All amounts and actions are caller-owned. */
  .ci-usage-drilldown-header { flex: none; min-width: 0; padding: 16px 20px 20px; border-bottom: 1px solid var(--ci-color-border); }
  .ci-usage-drilldown-header__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
  .ci-usage-drilldown-header__eyebrow { margin: 0; color: var(--ci-color-text-muted); font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .ci-usage-drilldown-header__title-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
  .ci-usage-drilldown-header__title-line h2 { min-width: 0; margin: 0; color: var(--ci-color-heading); font-family: var(--ci-font-display); font-size: 28px; font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-heading-leading); letter-spacing: var(--ci-type-heading-tracking); overflow-wrap: anywhere; }
  .ci-usage-drilldown-header__title-line h2:focus { outline: none; }
  .ci-usage-drilldown-header__title-line .ci-model-identity { font: inherit; }
  .ci-usage-drilldown-header .ci-model-identity__mark, .ci-usage-models .ci-model-identity__mark { width: 18px; height: 18px; border: 0; background: transparent; }
  .ci-usage-drilldown-header .ci-model-identity__mark > img, .ci-usage-models .ci-model-identity__mark > img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .ci-usage-drilldown-header__title-line .ci-model-identity__name { font: inherit; white-space: normal; overflow: visible; }
  .ci-usage-drilldown-header__description { margin-top: 8px; color: var(--ci-color-text-muted); font-size: 14px; line-height: 1.6; }
  .ci-usage-drilldown-header__endpoint { display: block; margin-top: 4px; font-family: var(--ci-font-mono); font-size: 12px; overflow-wrap: anywhere; }
  .ci-usage-request-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 4px; font-size: 12px; color: var(--ci-color-text-muted); }
  .ci-usage-request-identity > svg { flex: none; }
  .ci-usage-request-identity__label { display: inline-flex; align-items: center; gap: 6px; }
  .ci-usage-request-identity code { min-width: 0; font-family: var(--ci-font-mono); font-size: inherit; overflow-wrap: anywhere; user-select: text; }
  .ci-usage-request-identity .ci-button > svg { width: 14px; height: 14px; }
  .ci-usage-request-identity__timestamp { width: 100%; }
  .ci-usage-request-identity__feedback:empty { display: none; }
  .ci-usage-request-identity__feedback { flex-basis: 100%; }
  .ci-usage-info { display: inline-flex; width: 16px; height: 16px; padding: 0; flex: none; align-items: center; justify-content: center; color: var(--ci-color-text-muted); opacity: .7; border: 0; border-radius: 50%; background: transparent; cursor: help; }
  .ci-usage-info > svg { width: 14px; height: 14px; }
  .ci-usage-info:hover { opacity: 1; color: var(--ci-color-foreground); }
  .ci-usage-info:focus-visible { outline: none; opacity: 1; box-shadow: var(--ci-ring-focus); }
  .ci-usage-info__content { max-width: 256px; font-size: 12px; line-height: 1.6; text-wrap: balance; }
  .ci-usage-drilldown-body { display: flex; flex-direction: column; min-width: 0; gap: 16px; }
  .ci-usage-section { min-width: 0; }
  .ci-usage-section__title { display: flex; align-items: center; gap: 8px; margin: 0; font: inherit; }
  .ci-usage-section__title > svg { flex: none; width: 16px; height: 16px; color: var(--ci-color-text-muted); }
  .ci-usage-receipt { padding: 16px; background: var(--ci-color-surface-subtle); border-color: var(--ci-color-border-subtle); font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum" 1, "zero" 1; }
  .ci-usage-receipt__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
  .ci-usage-receipt__heading h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; }
  .ci-usage-receipt__heading h3 > svg { flex: none; width: 16px; height: 16px; color: var(--ci-color-text-muted); }
  .ci-usage-receipt__lines, .ci-usage-receipt__totals, .ci-usage-token-rows, .ci-usage-detail-rows { margin: 0; }
  .ci-usage-receipt__row { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto; align-items: baseline; column-gap: 8px; padding: 4px 0; font-size: 14px; line-height: var(--ci-type-body-leading); }
  .ci-usage-receipt__row dt { display: inline-flex; min-width: 0; align-items: center; gap: 6px; color: var(--ci-color-text-muted); }
  .ci-usage-receipt__row--indent dt { padding-left: 12px; }
  .ci-usage-receipt__row dd { margin: 0; white-space: nowrap; color: var(--ci-color-foreground); }
  .ci-usage-receipt__row--strong dt, .ci-usage-receipt__row--strong dd { color: var(--ci-color-foreground); font-weight: 500; }
  .ci-usage-receipt__row dd[data-tone="positive"] { color: var(--ci-color-success); }
  .ci-usage-receipt__row dd[data-tone="muted"] { color: var(--ci-color-text-muted); }
  .ci-usage-receipt__leader { border-bottom: 1px dotted var(--ci-color-border); transform: translateY(-.25em); }
  .ci-usage-receipt__group-label { margin: 12px 0 4px; color: var(--ci-color-text-muted); font: 500 10px var(--ci-font-mono); text-transform: uppercase; letter-spacing: .1em; }
  .ci-usage-receipt__totals { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ci-color-border); }
  .ci-usage-receipt__note { margin: 12px 0 0; color: var(--ci-color-text-muted); font-size: 12px; line-height: 1.6; }
  .ci-usage-receipt__retention { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--ci-color-text-muted); font-size: 12px; }
  .ci-usage-receipt__retention > svg { flex: none; width: 14px; height: 14px; }
  .ci-usage-token-rows { display: grid; gap: 12px; }
  .ci-usage-token-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; }
  .ci-usage-token-row dt { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .ci-usage-token-row dd { margin: 0; flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ci-color-foreground); }
  .ci-usage-token-row--cached { padding-left: 12px; border-left: 2px solid var(--ci-color-border); font-size: 12px; color: var(--ci-color-text-muted); }
  .ci-usage-detail-rows > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; line-height: var(--ci-type-body-leading); }
  .ci-usage-detail-rows dt { display: inline-flex; align-items: center; min-width: 0; flex: 1; gap: 6px; color: var(--ci-color-text-muted); }
  .ci-usage-detail-rows dt > svg { width: 14px; height: 14px; flex: none; }
  .ci-usage-detail-rows dd { min-width: 0; max-width: 55%; flex: none; margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .ci-usage-detail-rows__secondary { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ci-color-border); }
  .ci-usage-models-container { border: 0; border-radius: 0; background: transparent; }
  .ci-usage-models-scroll .ci-table-scrollbar:has([data-overflowing="false"]) { display: none; }
  .ci-usage-models { width: 100%; min-width: 320px; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
  .ci-usage-models th, .ci-usage-models td { padding: 10px 0; border-bottom: 1px solid var(--ci-color-border); text-align: right; font-weight: 400; }
  .ci-usage-models th:first-child { width: auto; padding-right: 8px; text-align: left; }
  .ci-usage-models th:nth-child(2) { width: 68px; }
  .ci-usage-models th:nth-child(3) { width: 80px; }
  .ci-usage-models thead th { padding-top: 0; color: var(--ci-color-text-muted); font-size: 12px; }
  .ci-usage-models tfoot th, .ci-usage-models tfoot td { border-bottom: 0; font-weight: 600; }
  .ci-usage-models .ci-button { justify-content: flex-start; width: 100%; height: auto; padding: 0; white-space: normal; text-align: left; }
  .ci-usage-models .ci-model-identity { display: inline-flex; min-width: 0; max-width: 100%; }
  .ci-usage-models .ci-model-identity__name { white-space: normal; overflow-wrap: anywhere; font-weight: 400; }
  .ci-usage-drilldown-actions { display: flex; flex-direction: column; gap: 12px; }
  .ci-usage-drilldown-actions > .ci-button { width: 100%; }
  .ci-usage-request-failure { margin: 0; border: 1px solid color-mix(in srgb, var(--ci-color-danger) 40%, transparent); border-radius: var(--ci-radius-lg); background: color-mix(in srgb, var(--ci-color-danger) 10%, transparent); padding: 12px; color: var(--ci-color-danger); font-size: 12px; line-height: 1.6; }
  .ci-usage-drilldown-loading { display: grid; gap: 16px; }
  .ci-usage-drilldown-loading__card { display: grid; gap: 16px; padding: 24px; }
  .ci-usage-drilldown-loading__card > .ci-skeleton { min-height: 0; border-radius: var(--ci-radius-sm); background: var(--ci-color-surface-subtle); }
  @media (prefers-reduced-motion: reduce) {
    .ci-usage-drilldown-loading .ci-skeleton { animation: none; }
  }
  .ci-usage-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

@media (max-width: 360px) {
  .ci-usage-receipt__row { grid-template-columns: minmax(0, 1fr) auto; }
  .ci-usage-receipt__leader { display: none; }
  .ci-usage-receipt__row dd { white-space: normal; overflow-wrap: anywhere; text-align: right; }
  .ci-usage-section > .ci-card__header { padding: 16px 16px 0; }
  .ci-usage-section > .ci-card__content { padding: 16px; }
}
@media (max-width: 600px) {
  .ci-usage-models th:nth-child(2) { width: 56px; }
  .ci-usage-models th:nth-child(3) { width: 64px; }
  .ci-usage-models th:first-child { padding-right: 6px; }
}

@layer components {
  .ci-info-tooltip { vertical-align: middle; }
  .ci-info-tooltip__trigger { display: inline-grid; width: 1.5rem; height: 1.5rem; flex: none; margin: -0.25rem; place-items: center; padding: 0; border: 0; border-radius: var(--ci-radius-pill); color: var(--ci-color-text-muted); background: transparent; cursor: help; }
  .ci-info-tooltip__trigger:hover { color: var(--ci-color-heading); }
  .ci-info-tooltip__trigger:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-info-tooltip__trigger > svg { width: 1rem; height: 1rem; stroke-width: var(--ci-icon-stroke-width); }
  .ci-stat__label .ci-info-tooltip { flex: none; }
}

@layer components {
  .ci-file-input { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--ci-space-3); }
  .ci-file-input__control { position: relative; display: inline-flex; flex: none; cursor: pointer; }
  .ci-file-input__native,
  .ci-file-drop-zone__native { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; margin: -1px; border: 0; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
  .ci-file-input__button { display: inline-flex; min-height: var(--ci-control-height-sm); align-items: center; gap: var(--ci-space-2); padding: 0 var(--ci-space-3); border: var(--ci-border-default) solid var(--ci-color-border); border-radius: var(--ci-radius-control); color: var(--ci-color-heading); background: var(--ci-color-surface); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); transition: background-color var(--ci-duration-fast) var(--ci-ease-standard); }
  .ci-file-input__button > svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  .ci-file-input:not([data-disabled]) .ci-file-input__control:hover .ci-file-input__button { background: var(--ci-color-surface-muted); }
  .ci-file-input__control:has(.ci-file-input__native:focus-visible) .ci-file-input__button { box-shadow: var(--ci-ring-focus); }
  .ci-file-input__status { min-width: 0; color: var(--ci-color-text-muted); font-size: var(--ci-font-size-sm); line-height: var(--ci-type-body-leading); overflow-wrap: anywhere; }
  .ci-file-input[data-invalid] .ci-file-input__button { border-color: var(--ci-color-danger); }
  .ci-file-input[data-disabled] { opacity: 0.56; }
  .ci-file-input[data-disabled] .ci-file-input__control { cursor: not-allowed; }

  .ci-file-drop-zone { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: var(--ci-space-2); padding: var(--ci-space-8) var(--ci-space-6); border: var(--ci-border-strong) dashed var(--ci-color-border-strong); border-radius: var(--ci-radius-surface); color: var(--ci-color-heading); background: var(--ci-color-surface); text-align: center; cursor: pointer; transition: border-color var(--ci-duration-fast) var(--ci-ease-standard), background-color var(--ci-duration-fast) var(--ci-ease-standard); }
  .ci-file-drop-zone:not([data-disabled]):hover { border-color: var(--ci-color-text-muted); background: var(--ci-color-surface-subtle); }
  .ci-file-drop-zone[data-dragging] { border-color: var(--ci-color-accent-active); background: var(--ci-color-accent-surface-subtle); }
  .ci-file-drop-zone:has(.ci-file-drop-zone__native:focus-visible) { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-file-drop-zone[data-invalid] { border-color: var(--ci-color-danger); }
  .ci-file-drop-zone[data-disabled] { cursor: not-allowed; opacity: 0.56; }
  .ci-file-drop-zone__icon { display: grid; width: var(--ci-space-10); height: var(--ci-space-10); place-items: center; border-radius: var(--ci-radius-pill); color: var(--ci-color-text-muted); background: var(--ci-color-surface-muted); }
  .ci-file-drop-zone[data-dragging] .ci-file-drop-zone__icon { color: var(--ci-color-heading); background: var(--ci-color-accent-surface-strong); }
  .ci-file-drop-zone__icon > svg { width: var(--ci-icon-size-md); height: var(--ci-icon-size-md); stroke-width: var(--ci-icon-stroke-width); }
  .ci-file-drop-zone__title { font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); overflow-wrap: anywhere; }
  .ci-file-drop-zone__description { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-caption-leading); letter-spacing: var(--ci-type-caption-tracking); overflow-wrap: anywhere; }
}

/* Tile (multi-line action/toggle surface) and Disclosure (standalone show/hide section). */
@layer components {
  .ci-tile { display: flex; width: 100%; min-width: 0; align-items: flex-start; gap: var(--ci-space-3); padding: var(--ci-space-4); border: var(--ci-border-default) solid var(--ci-color-border); border-radius: var(--ci-radius-surface); color: var(--ci-color-foreground); background: var(--ci-color-surface); font: inherit; text-align: start; text-decoration: none; cursor: pointer; transition: border-color var(--ci-duration-fast) var(--ci-ease-standard), background-color var(--ci-duration-fast) var(--ci-ease-standard); }
  .ci-tile[data-layout="stacked"] { flex-direction: column; }
  .ci-tile:hover:not(:disabled, [aria-disabled="true"], [aria-pressed="true"]) { border-color: var(--ci-color-text-muted); background: var(--ci-color-surface-subtle); }
  .ci-tile:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-tile[aria-pressed="true"] { border-color: var(--ci-color-accent-active); background: color-mix(in srgb, var(--ci-color-accent) 12%, var(--ci-color-surface)); box-shadow: inset 0 0 0 var(--ci-border-default) var(--ci-color-accent-active); }
  .ci-tile[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 var(--ci-border-default) var(--ci-color-accent-active), var(--ci-ring-focus); }
  .ci-tile:is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; opacity: 0.48; }
  .ci-tile__icon { display: grid; width: var(--ci-space-8); height: var(--ci-space-8); flex: 0 0 var(--ci-space-8); place-items: center; border: var(--ci-border-default) solid var(--ci-color-border-subtle); border-radius: var(--ci-radius-surface); color: var(--ci-color-text-muted); background: var(--ci-color-surface-subtle); }
  .ci-tile__icon svg { width: var(--ci-space-5); height: var(--ci-space-5); }
  .ci-tile__copy { display: grid; min-width: 0; flex: 1; gap: var(--ci-space-1); }
  .ci-tile[data-layout="stacked"] .ci-tile__copy { width: 100%; }
  .ci-tile__heading { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: var(--ci-space-2); }
  .ci-tile__title { min-width: 0; flex: 1; color: var(--ci-color-heading); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); overflow-wrap: anywhere; }
  .ci-tile[aria-pressed="true"] .ci-tile__title { font-weight: var(--ci-font-weight-semibold); }
  .ci-tile__meta { display: inline-flex; flex: none; align-items: center; gap: var(--ci-space-1); }
  .ci-tile__indicator { display: grid; width: var(--ci-space-5); height: var(--ci-space-5); flex: 0 0 var(--ci-space-5); place-items: center; border: var(--ci-border-default) solid var(--ci-color-border); border-radius: var(--ci-radius-pill); background: var(--ci-color-surface); }
  .ci-tile__indicator svg { width: var(--ci-space-3); height: var(--ci-space-3); opacity: 0; }
  .ci-tile[aria-pressed="true"] .ci-tile__indicator { border-color: var(--ci-color-accent-active); background: var(--ci-color-accent); color: var(--ci-color-accent-foreground); }
  .ci-tile[aria-pressed="true"] .ci-tile__indicator svg { opacity: 1; }
  .ci-tile__description { color: var(--ci-color-text-muted); font-size: var(--ci-font-size-xs); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-body-leading); letter-spacing: var(--ci-type-body-tracking); overflow-wrap: anywhere; }
  .ci-tile__body { min-width: 0; color: var(--ci-color-heading); font-weight: var(--ci-font-weight-regular); }

  .ci-disclosure { min-width: 0; }
  .ci-disclosure__trigger { display: flex; width: 100%; min-height: var(--ci-control-height-md); align-items: center; gap: var(--ci-space-2); padding: var(--ci-space-2) var(--ci-space-3); border: 0; border-radius: var(--ci-radius-control); color: var(--ci-color-heading); background: transparent; font: inherit; font-size: var(--ci-font-size-sm); text-align: start; cursor: pointer; }
  .ci-disclosure__trigger:hover:not(:disabled) { background: var(--ci-color-surface-muted); }
  .ci-disclosure__trigger:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-disclosure__trigger:disabled { color: var(--ci-color-text-subtle); cursor: not-allowed; }
  .ci-disclosure__label { min-width: 0; flex: 1; overflow-wrap: anywhere; }
  .ci-disclosure__meta { display: inline-flex; flex: none; align-items: center; gap: var(--ci-space-1); color: var(--ci-color-text-muted); }
  .ci-disclosure__icon { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); flex: none; color: var(--ci-color-text-muted); stroke-width: var(--ci-icon-stroke-width); transform: rotate(-90deg); transition: transform var(--ci-duration-base) var(--ci-ease-emphasized); }
  .ci-disclosure__trigger[aria-expanded="true"] .ci-disclosure__icon { transform: rotate(0deg); }
  .ci-disclosure__content[hidden] { display: none; }
}

@layer components {
  .ci-hover-card { width: min(20rem, calc(100vw - 1rem)); }
}

@layer components {
  .ci-toggle-chip { display: inline-flex; max-width: 100%; min-height: var(--ci-control-height-sm); align-items: center; gap: var(--ci-space-1-5); padding: 0 var(--ci-space-3); border: var(--ci-border-default) solid var(--ci-color-border); border-radius: var(--ci-radius-pill); color: var(--ci-color-text-muted); background: var(--ci-color-surface); font: inherit; font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-medium); line-height: var(--ci-type-control-leading); letter-spacing: var(--ci-type-control-tracking); white-space: nowrap; cursor: pointer; transition: color var(--ci-duration-fast) var(--ci-ease-standard), background-color var(--ci-duration-fast) var(--ci-ease-standard), border-color var(--ci-duration-fast) var(--ci-ease-standard); }
  .ci-toggle-chip[data-size="sm"] { min-height: var(--ci-badge-height); gap: var(--ci-space-1); padding: 0 var(--ci-space-2); font-size: var(--ci-font-size-xs); }
  .ci-toggle-chip:not([aria-pressed="true"], :disabled):hover { color: var(--ci-color-heading); background: var(--ci-color-surface-muted); }
  .ci-toggle-chip:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  /* The copper fill is under 3:1 on the Editions light surface, so the pressed border
     takes the active ink: the fill or that border clears 3:1 against the surface in
     every theme (light, dark, Editions light and dark). */
  .ci-toggle-chip[aria-pressed="true"] { border-color: var(--ci-color-control-active-fg); color: var(--ci-color-control-active-fg); background: var(--ci-color-control-active-bg); }
  .ci-toggle-chip:disabled { cursor: not-allowed; opacity: 0.48; }
  .ci-toggle-chip__icon { display: inline-flex; flex: none; }
  .ci-toggle-chip__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ci-toggle-chip__icon > svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  .ci-toggle-chip[data-size="sm"] .ci-toggle-chip__icon > svg { width: var(--ci-icon-size-xs); height: var(--ci-icon-size-xs); }
  .ci-toggle-chip__count { flex: none; min-width: 1.25rem; padding: 0 var(--ci-space-1-5); border-radius: var(--ci-radius-pill); color: var(--ci-color-heading); background: var(--ci-color-surface-muted); font-size: var(--ci-font-size-xs); font-variant-numeric: tabular-nums; letter-spacing: 0em; text-align: center; }
  .ci-toggle-chip[aria-pressed="true"] .ci-toggle-chip__count { color: inherit; background: color-mix(in srgb, currentColor 18%, transparent); }
}

/* Sidebar item/group actions and rendered Markdown/HTML prose. */
@layer components {
  .ci-sidebar__group { position: relative; }
  .ci-sidebar__menu-action,
  .ci-sidebar__group-action { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; padding: 0; border: 0; border-radius: var(--ci-radius-control); color: var(--ci-color-text-muted); background: transparent; cursor: pointer; transition: opacity var(--ci-duration-fast) var(--ci-ease-standard), color var(--ci-duration-fast) var(--ci-ease-standard); }
  .ci-sidebar__menu-action { position: absolute; top: 50%; right: var(--ci-space-1); transform: translateY(-50%); }
  .ci-sidebar__group-action { position: absolute; top: 0.125rem; right: var(--ci-space-1); }
  .ci-sidebar__menu-action:hover,
  .ci-sidebar__group-action:hover { color: var(--ci-color-heading); background: var(--ci-color-surface-muted); }
  .ci-sidebar__menu-action:focus-visible,
  .ci-sidebar__group-action:focus-visible { outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-sidebar__menu-action > svg,
  .ci-sidebar__group-action > svg { width: var(--ci-icon-size-sm); height: var(--ci-icon-size-sm); stroke-width: var(--ci-icon-stroke-width); }
  .ci-sidebar__menu-item:has(> .ci-sidebar__menu-action) > .ci-sidebar__menu-button { padding-inline-end: 2.25rem; }
  .ci-sidebar__group:has(> .ci-sidebar__group-action) > .ci-sidebar__group-label { padding-inline-end: 2.25rem; }
  /* Rows and groups with an action ellipsize their label before the action. The
     group label becomes a block (same 2rem row) so the ellipsis applies, and its
     zero minimum keeps a long label from widening the group track. */
  .ci-sidebar__menu-item:has(> .ci-sidebar__menu-action) > .ci-sidebar__menu-button > :not(svg),
  .ci-sidebar__group:has(> .ci-sidebar__group-action) > .ci-sidebar__group-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ci-sidebar__group:has(> .ci-sidebar__group-action) > .ci-sidebar__group-label { display: block; line-height: 2rem; }
  .ci-sidebar__group:has(> .ci-sidebar__group-action) > .ci-sidebar__group-label > svg { vertical-align: middle; }
  /* On the active row the action sits on the active fill, so it takes that row's
     foreground for its icon, hover tint and focus ring (the focus color is too
     close to the dark-theme accent). Editions recolors the active row. */
  .ci-sidebar__menu-button[data-active="true"] ~ .ci-sidebar__menu-action { color: var(--ci-color-accent-foreground); }
  :is(html:root:has([data-ci-appearance="editions"]), html:root[data-ci-appearance="editions"]) .ci-sidebar__menu-button[data-active="true"] ~ .ci-sidebar__menu-action { color: var(--ci-sidebar-active-fg); }
  .ci-sidebar__menu-button[data-active="true"] ~ .ci-sidebar__menu-action:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
  .ci-sidebar__menu-button[data-active="true"] ~ .ci-sidebar__menu-action:focus-visible { box-shadow: 0 0 0 var(--ci-focus-ring-width) currentColor; }
  :is(.ci-sidebar__menu-action, .ci-sidebar__group-action)[data-show-on-hover="true"] { opacity: 0; }
  .ci-sidebar__menu-item:is(:hover, :focus-within) > .ci-sidebar__menu-action[data-show-on-hover="true"],
  .ci-sidebar__group:is(:hover, :focus-within) > .ci-sidebar__group-action[data-show-on-hover="true"],
  :is(.ci-sidebar__menu-action, .ci-sidebar__group-action)[data-show-on-hover="true"]:is([aria-pressed="true"], [aria-expanded="true"], [data-state="open"]) { opacity: 1; }
  @media (hover: none), (any-pointer: coarse) {
    :is(.ci-sidebar__menu-action, .ci-sidebar__group-action)[data-show-on-hover="true"] { opacity: 1; }
  }
  .ci-sidebar[data-state="collapsed"] :is(.ci-sidebar__menu-action, .ci-sidebar__group-action) { display: none; }

  .ci-prose { max-width: 72ch; color: var(--ci-color-text); font-size: var(--ci-font-size-sm); font-weight: var(--ci-font-weight-regular); line-height: var(--ci-type-reading-leading); letter-spacing: var(--ci-type-reading-tracking); overflow-wrap: anywhere; }
  .ci-prose > :first-child { margin-top: 0; }
  .ci-prose > :last-child { margin-bottom: 0; }
  .ci-prose :where(p, ul, ol, pre, blockquote, table, figure, dl) { margin: 0 0 var(--ci-space-4); }
  .ci-prose :where(h1, h2, h3, h4, h5, h6) { margin: var(--ci-space-6) 0 var(--ci-space-3); color: var(--ci-color-heading); }
  .ci-prose :where(h1) { font-size: var(--ci-font-size-2xl); }
  .ci-prose :where(h2) { font-size: var(--ci-font-size-xl); }
  .ci-prose :where(h3) { font-size: var(--ci-font-size-lg); }
  .ci-prose :where(h4, h5, h6) { font-size: var(--ci-font-size-md); }
  .ci-prose :where(a) { color: var(--ci-color-heading); text-decoration: underline; text-underline-offset: 0.2em; }
  .ci-prose :where(a):hover { color: var(--ci-color-text-muted); }
  .ci-prose :where(a):focus-visible { border-radius: var(--ci-radius-sm); outline: none; box-shadow: var(--ci-ring-focus); }
  .ci-prose :where(ul, ol) { padding-inline-start: 1.25em; }
  .ci-prose :where(li + li) { margin-top: var(--ci-space-1); }
  .ci-prose :where(li > ul, li > ol) { margin: var(--ci-space-1) 0 0; }
  .ci-prose :where(code):not(:where(pre code)) { padding: 0.125em 0.375em; border: var(--ci-border-default) solid var(--ci-color-border-subtle); border-radius: var(--ci-radius-sm); color: var(--ci-color-heading); background: var(--ci-color-surface-subtle); font-size: 0.875em; }
  .ci-prose :where(pre) { overflow: auto; padding: var(--ci-space-4); border: var(--ci-border-default) solid var(--ci-color-border-subtle); border-radius: var(--ci-radius-surface); color: var(--ci-color-heading); background: var(--ci-color-surface-subtle); font-size: var(--ci-font-size-xs); tab-size: 2; }
  .ci-prose :where(blockquote) { padding-inline-start: var(--ci-space-4); border-inline-start: var(--ci-border-strong) solid var(--ci-color-border-strong); color: var(--ci-color-text-muted); }
  .ci-prose :where(hr) { margin: var(--ci-space-6) 0; border: 0; border-top: var(--ci-border-hairline) solid var(--ci-color-border-subtle); }
  .ci-prose :where(table) { width: 100%; border-collapse: collapse; }
  .ci-prose :where(th, td) { padding: var(--ci-space-2) var(--ci-space-3); border-bottom: var(--ci-border-hairline) solid var(--ci-color-border-subtle); text-align: start; vertical-align: top; }
  .ci-prose :where(th) { color: var(--ci-color-heading); }
  .ci-prose :where(img, video) { max-width: 100%; height: auto; border-radius: var(--ci-radius-surface); }
}

/* StatusMatrix tones: each filled tone keeps >= 3:1 against the card surface, and its icon uses the
   surface color on the fill. Neutral uses a dashed text-muted border so it clears 3:1 in Editions too. */
@layer components {
  .ci-status-matrix__cell[data-selectable] { cursor: pointer; }
  .ci-status-matrix__cell[data-tone="success"] { border-color: var(--ci-color-success); }
  .ci-status-matrix__cell[data-tone="warning"] { border-color: var(--ci-color-warning); }
  .ci-status-matrix__cell[data-tone="danger"] { border-color: var(--ci-color-danger); }
  .ci-status-matrix__cell[data-tone="info"] { border-color: var(--ci-color-info); }
  .ci-status-matrix__cell[data-tone="neutral"] { border-style: dashed; border-color: var(--ci-color-text-muted); }
  .ci-status-matrix__cell[data-tone="warning"] .ci-status-matrix__fill { background: var(--ci-color-warning); }
  .ci-status-matrix__cell[data-tone="danger"] .ci-status-matrix__fill { background: var(--ci-color-danger); }
  .ci-status-matrix__cell[data-tone="info"] .ci-status-matrix__fill { background: var(--ci-color-info); }
  .ci-status-matrix__glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ci-color-surface); }
  .ci-status-matrix__cell[data-tone="neutral"] .ci-status-matrix__glyph { color: var(--ci-color-text-muted); }
  .ci-status-matrix__glyph > svg { width: 0.875rem; height: 0.875rem; stroke-width: 2.5; }
  .ci-status-matrix__legend i[data-tone="success"] { border-color: var(--ci-color-success); background: var(--ci-color-success); }
  .ci-status-matrix__legend i[data-tone="warning"] { border-color: var(--ci-color-warning); background: var(--ci-color-warning); }
  .ci-status-matrix__legend i[data-tone="danger"] { border-color: var(--ci-color-danger); background: var(--ci-color-danger); }
  .ci-status-matrix__legend i[data-tone="info"] { border-color: var(--ci-color-info); background: var(--ci-color-info); }
  .ci-status-matrix__legend i[data-tone="neutral"] { border-style: dashed; border-color: var(--ci-color-text-muted); }
}