/* docs.css: GENERATED by TestDocsCSSIsTheConcatenation (DOCS_WRITE_CSS=1). Do not edit.
 * Sources, in order: Aldelo Cloud design system v1.6.2 tokens + components
 * (vendored at internal/platform/designsystem), the derived Match-system block,
 * and templates/docs/overlay.css. */
/* Generated from aldelo-cloud.tokens.json v1.6.2. Do not edit by hand. */
:root {
  color-scheme: light;
  --aldelo-font-family-body: "SF Pro Text", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --aldelo-font-family-display: "SF Pro Display", "SF Pro Text", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --aldelo-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --aldelo-font-weight-regular: 400;
  --aldelo-font-weight-medium: 500;
  --aldelo-font-weight-strong: 700;
  --aldelo-font-size-micro: 10px;
  --aldelo-font-size-caption: 11px;
  --aldelo-font-size-label: 12px;
  --aldelo-font-size-body: 13px;
  --aldelo-font-size-body-large: 14px;
  --aldelo-font-size-heading-small: 17px;
  --aldelo-font-size-chart-value: 18px;
  --aldelo-font-size-display-small: 22px;
  --aldelo-font-size-metric: 28px;
  --aldelo-font-size-display: 30px;
  --aldelo-font-size-input-touch: 16px;
  --aldelo-line-height-body: 1.45;
  --aldelo-line-height-heading: 1.3;
  --aldelo-line-height-display: 1.12;
  --aldelo-line-height-metric: 1.05;
  --aldelo-letter-spacing-body: -0.005em;
  --aldelo-letter-spacing-brand: -0.01em;
  --aldelo-letter-spacing-metric: -0.035em;
  --aldelo-letter-spacing-display: -0.04em;
  --aldelo-letter-spacing-overline: 0.14em;
  --aldelo-space-050: 2px;
  --aldelo-space-100: 4px;
  --aldelo-space-150: 6px;
  --aldelo-space-200: 8px;
  --aldelo-space-250: 10px;
  --aldelo-space-300: 12px;
  --aldelo-space-350: 14px;
  --aldelo-space-400: 16px;
  --aldelo-space-450: 18px;
  --aldelo-space-500: 20px;
  --aldelo-space-550: 22px;
  --aldelo-space-600: 24px;
  --aldelo-space-700: 28px;
  --aldelo-space-750: 30px;
  --aldelo-space-800: 32px;
  --aldelo-space-1000: 40px;
  --aldelo-space-1200: 48px;
  --aldelo-radius-chart-edge: 2px;
  --aldelo-radius-xs: 3px;
  --aldelo-radius-sm: 4px;
  --aldelo-radius-control: 6px;
  --aldelo-radius-md: 8px;
  --aldelo-radius-lg: 10px;
  --aldelo-radius-xl: 12px;
  --aldelo-radius-shell: 14px;
  --aldelo-radius-full: 999px;
  --aldelo-border-width: 1px;
  --aldelo-border-width-emphasis: 2px;
  --aldelo-focus-width: 3px;
  --aldelo-focus-offset: 2px;
  --aldelo-motion-hover: 150ms;
  --aldelo-motion-color: 160ms;
  --aldelo-motion-spatial: 180ms;
  --aldelo-motion-screen: 220ms;
  --aldelo-motion-chart-donut: 460ms;
  --aldelo-motion-chart-bar: 520ms;
  --aldelo-motion-overlay: 200ms;
  --aldelo-ease-standard: ease;
  --aldelo-ease-entrance: cubic-bezier(.2, .8, .2, 1);
  --aldelo-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --aldelo-breakpoint-narrow: 560px;
  --aldelo-breakpoint-navigation: 860px;
  --aldelo-breakpoint-wide: 1200px;
  --aldelo-size-control: 38px;
  --aldelo-size-touch-target: 44px;
  --aldelo-size-avatar: 34px;
  --aldelo-size-brand-mark: 34px;
  --aldelo-size-topbar: 68px;
  --aldelo-size-sidebar: 214px;
  --aldelo-size-control-small: 30px;
  --aldelo-size-control-large: 44px;
  --aldelo-size-icon: 16px;
  --aldelo-size-icon-large: 20px;
  --aldelo-size-sidebar-collapsed: 64px;
  --aldelo-size-dialog-small: 420px;
  --aldelo-size-dialog-medium: 560px;
  --aldelo-size-dialog-large: 760px;
  --aldelo-size-drawer: 480px;
  --aldelo-size-auth-panel: 400px;
  --aldelo-size-form-max: 640px;
  --aldelo-size-reading-max: 72ch;
  --aldelo-size-wordmark: 18px;
  --aldelo-size-wordmark-large: 32px;
  --aldelo-layout-content-max: 1440px;
  --aldelo-layout-content-inline: 24px;
  --aldelo-layout-content-block-end: 30px;
  --aldelo-opacity-disabled: 0.56;
  --aldelo-opacity-muted: 0.72;
  --aldelo-brand-blue: #0054a6;
  --aldelo-brand-bright-blue: #207afc;
  --aldelo-brand-black: #000000;
  --aldelo-brand-white: #ffffff;
  --aldelo-density-comfortable-content-inline: 24px;
  --aldelo-density-comfortable-panel-padding: 16px;
  --aldelo-density-comfortable-kpi-padding: 15px;
  --aldelo-density-comfortable-page-start: 26px;
  --aldelo-density-comfortable-page-end: 18px;
  --aldelo-density-compact-content-inline: 18px;
  --aldelo-density-compact-panel-padding: 12px;
  --aldelo-density-compact-kpi-padding: 12px;
  --aldelo-density-compact-page-start: 18px;
  --aldelo-density-compact-page-end: 14px;
  --aldelo-density-mobile-content-inline: 14px;
  --aldelo-component-app-shell-background: var(--aldelo-color-background);
  --aldelo-component-app-shell-border: var(--aldelo-color-border);
  --aldelo-component-app-shell-radius: var(--aldelo-radius-shell);
  --aldelo-component-app-shell-shadow: var(--aldelo-shadow-shell);
  --aldelo-component-panel-background: var(--aldelo-color-surface);
  --aldelo-component-panel-border: var(--aldelo-color-border);
  --aldelo-component-panel-radius: var(--aldelo-radius-md);
  --aldelo-component-panel-shadow: var(--aldelo-shadow-panel);
  --aldelo-component-panel-padding: var(--aldelo-density-comfortable-panel-padding);
  --aldelo-component-button-primary-background: var(--aldelo-color-action);
  --aldelo-component-button-primary-background-hover: var(--aldelo-color-action-hover);
  --aldelo-component-button-primary-background-pressed: var(--aldelo-color-action-pressed);
  --aldelo-component-button-primary-foreground: var(--aldelo-color-on-action);
  --aldelo-component-button-height: var(--aldelo-size-control);
  --aldelo-component-button-radius: var(--aldelo-radius-control);
  --aldelo-component-field-background: var(--aldelo-color-surface);
  --aldelo-component-field-foreground: var(--aldelo-color-text);
  --aldelo-component-field-border: var(--aldelo-color-control-border);
  --aldelo-component-field-height: var(--aldelo-size-control);
  --aldelo-component-field-radius: var(--aldelo-radius-md);
  --aldelo-component-field-border-hover: var(--aldelo-color-text-muted);
  --aldelo-component-field-border-invalid: var(--aldelo-color-danger);
  --aldelo-component-field-placeholder: var(--aldelo-color-text-muted);
  --aldelo-component-field-background-disabled: var(--aldelo-color-surface-muted);
  --aldelo-component-field-font-size-touch: var(--aldelo-font-size-input-touch);
  --aldelo-component-navigation-item-height: var(--aldelo-size-control);
  --aldelo-component-navigation-item-radius: var(--aldelo-radius-control);
  --aldelo-component-navigation-active-background: var(--aldelo-color-action-soft);
  --aldelo-component-navigation-active-foreground: var(--aldelo-color-text-strong);
  --aldelo-component-navigation-active-rail: var(--aldelo-color-action);
  --aldelo-component-navigation-group-foreground: var(--aldelo-color-nav-section);
  --aldelo-component-badge-radius: var(--aldelo-radius-full);
  --aldelo-component-badge-padding-inline: var(--aldelo-space-200);
  --aldelo-component-badge-padding-block: 3px;
  --aldelo-component-button-secondary-background: var(--aldelo-color-surface);
  --aldelo-component-button-secondary-background-hover: var(--aldelo-color-surface-hover);
  --aldelo-component-button-secondary-foreground: var(--aldelo-color-text);
  --aldelo-component-button-secondary-border: var(--aldelo-color-control-border);
  --aldelo-component-button-quiet-background-hover: var(--aldelo-color-surface-hover);
  --aldelo-component-button-quiet-foreground: var(--aldelo-color-text);
  --aldelo-component-button-danger-background: var(--aldelo-color-danger);
  --aldelo-component-button-danger-background-hover: var(--aldelo-color-danger-hover);
  --aldelo-component-button-danger-background-pressed: var(--aldelo-color-danger-pressed);
  --aldelo-component-button-danger-foreground: var(--aldelo-color-on-danger);
  --aldelo-component-link-foreground: var(--aldelo-color-link);
  --aldelo-component-link-foreground-hover: var(--aldelo-color-link-hover);
  --aldelo-component-table-header-foreground: var(--aldelo-color-text-muted);
  --aldelo-component-table-row-border: var(--aldelo-color-border);
  --aldelo-component-table-row-hover: var(--aldelo-color-surface-hover);
  --aldelo-component-table-row-selected: var(--aldelo-color-action-soft);
  --aldelo-component-overlay-background: var(--aldelo-color-surface-raised);
  --aldelo-component-overlay-border: var(--aldelo-color-border);
  --aldelo-component-overlay-shadow: var(--aldelo-shadow-overlay);
  --aldelo-component-overlay-radius: var(--aldelo-radius-xl);
  --aldelo-component-overlay-scrim: var(--aldelo-color-scrim);
  --aldelo-component-tooltip-background: var(--aldelo-color-surface-inverse);
  --aldelo-component-tooltip-foreground: var(--aldelo-color-text-inverse);
  --aldelo-component-skeleton-background: var(--aldelo-color-skeleton);
  --aldelo-component-ai-accent-start: var(--aldelo-color-brand);
  --aldelo-component-ai-accent-end: var(--aldelo-color-data-2);
  --aldelo-component-ai-surface: var(--aldelo-color-info-soft);
  --aldelo-component-ai-foreground: var(--aldelo-color-info);
  --aldelo-component-chat-user-bubble: var(--aldelo-color-action-soft);
  --aldelo-component-chat-user-foreground: var(--aldelo-color-text-strong);
  --aldelo-component-focus-ring-color: var(--aldelo-color-focus);
  --aldelo-component-focus-ring-width: var(--aldelo-focus-width);
  --aldelo-component-focus-ring-offset: var(--aldelo-focus-offset);
  --aldelo-z-base: 0;
  --aldelo-z-sticky: 100;
  --aldelo-z-navigation: 200;
  --aldelo-z-dropdown: 300;
  --aldelo-z-overlay: 400;
  --aldelo-z-dialog: 500;
  --aldelo-z-toast: 600;
  --aldelo-z-tooltip: 700;
  --aldelo-color-background: #f7f8fb;
  --aldelo-color-background-shade: #f0f3f8;
  --aldelo-color-surface: #ffffff;
  --aldelo-color-surface-muted: #f1f3f7;
  --aldelo-color-surface-raised: #ffffff;
  --aldelo-color-surface-hover: #f4f6fa;
  --aldelo-color-surface-inverse: #1c212b;
  --aldelo-color-text: #151923;
  --aldelo-color-text-muted: #5f6b7d;
  --aldelo-color-text-strong: #111827;
  --aldelo-color-text-disabled: #98a1b0;
  --aldelo-color-text-inverse: #f4f4f5;
  --aldelo-color-border: #e1e5ec;
  --aldelo-color-border-strong: #cdd3dd;
  --aldelo-color-control-border: #7c879a;
  --aldelo-color-focus: #1d4ed8;
  --aldelo-color-brand: #2f6bff;
  --aldelo-color-action: #2f6aff;
  --aldelo-color-action-hover: #285ee8;
  --aldelo-color-action-pressed: #234fc6;
  --aldelo-color-action-soft: #edf2ff;
  --aldelo-color-on-action: #ffffff;
  --aldelo-color-link: #2456e0;
  --aldelo-color-link-hover: #1d47bd;
  --aldelo-color-success: #167348;
  --aldelo-color-success-soft: #edf7f1;
  --aldelo-color-warning: #8a5600;
  --aldelo-color-warning-soft: #fff5df;
  --aldelo-color-danger: #b42318;
  --aldelo-color-danger-hover: #9a1d14;
  --aldelo-color-danger-pressed: #7f1810;
  --aldelo-color-on-danger: #ffffff;
  --aldelo-color-danger-soft: #fff0f1;
  --aldelo-color-info: #2b60e6;
  --aldelo-color-info-soft: #edf2ff;
  --aldelo-color-nav-section: #3553a4;
  --aldelo-color-data-1: #2f6bff;
  --aldelo-color-data-2: #7657d6;
  --aldelo-color-data-3: #c97918;
  --aldelo-color-data-4: #1886a5;
  --aldelo-color-data-5: #a64d83;
  --aldelo-color-data-track: #e2e6ed;
  --aldelo-color-skeleton: #eceff4;
  --aldelo-color-mark: #fff1b8;
  --aldelo-color-scrim: rgba(17, 24, 39, .42);
  --aldelo-color-brand-wordmark: var(--aldelo-brand-blue);
  --aldelo-shadow-shell: 0 10px 30px rgba(18, 26, 40, .08);
  --aldelo-shadow-panel: 0 1px 2px rgba(18, 26, 40, .045), 0 8px 24px rgba(18, 26, 40, .035);
  --aldelo-shadow-interactive: 0 10px 28px rgba(18, 26, 40, .10);
  --aldelo-shadow-control: 0 6px 16px rgba(18, 26, 40, .08);
  --aldelo-shadow-overlay: 0 24px 64px rgba(18, 26, 40, .18), 0 2px 6px rgba(18, 26, 40, .06);
}

[data-aldelo-theme="light"] {
  color-scheme: light;
  --aldelo-color-background: #f7f8fb;
  --aldelo-color-background-shade: #f0f3f8;
  --aldelo-color-surface: #ffffff;
  --aldelo-color-surface-muted: #f1f3f7;
  --aldelo-color-surface-raised: #ffffff;
  --aldelo-color-surface-hover: #f4f6fa;
  --aldelo-color-surface-inverse: #1c212b;
  --aldelo-color-text: #151923;
  --aldelo-color-text-muted: #5f6b7d;
  --aldelo-color-text-strong: #111827;
  --aldelo-color-text-disabled: #98a1b0;
  --aldelo-color-text-inverse: #f4f4f5;
  --aldelo-color-border: #e1e5ec;
  --aldelo-color-border-strong: #cdd3dd;
  --aldelo-color-control-border: #7c879a;
  --aldelo-color-focus: #1d4ed8;
  --aldelo-color-brand: #2f6bff;
  --aldelo-color-action: #2f6aff;
  --aldelo-color-action-hover: #285ee8;
  --aldelo-color-action-pressed: #234fc6;
  --aldelo-color-action-soft: #edf2ff;
  --aldelo-color-on-action: #ffffff;
  --aldelo-color-link: #2456e0;
  --aldelo-color-link-hover: #1d47bd;
  --aldelo-color-success: #167348;
  --aldelo-color-success-soft: #edf7f1;
  --aldelo-color-warning: #8a5600;
  --aldelo-color-warning-soft: #fff5df;
  --aldelo-color-danger: #b42318;
  --aldelo-color-danger-hover: #9a1d14;
  --aldelo-color-danger-pressed: #7f1810;
  --aldelo-color-on-danger: #ffffff;
  --aldelo-color-danger-soft: #fff0f1;
  --aldelo-color-info: #2b60e6;
  --aldelo-color-info-soft: #edf2ff;
  --aldelo-color-nav-section: #3553a4;
  --aldelo-color-data-1: #2f6bff;
  --aldelo-color-data-2: #7657d6;
  --aldelo-color-data-3: #c97918;
  --aldelo-color-data-4: #1886a5;
  --aldelo-color-data-5: #a64d83;
  --aldelo-color-data-track: #e2e6ed;
  --aldelo-color-skeleton: #eceff4;
  --aldelo-color-mark: #fff1b8;
  --aldelo-color-scrim: rgba(17, 24, 39, .42);
  --aldelo-color-brand-wordmark: var(--aldelo-brand-blue);
  --aldelo-shadow-shell: 0 10px 30px rgba(18, 26, 40, .08);
  --aldelo-shadow-panel: 0 1px 2px rgba(18, 26, 40, .045), 0 8px 24px rgba(18, 26, 40, .035);
  --aldelo-shadow-interactive: 0 10px 28px rgba(18, 26, 40, .10);
  --aldelo-shadow-control: 0 6px 16px rgba(18, 26, 40, .08);
  --aldelo-shadow-overlay: 0 24px 64px rgba(18, 26, 40, .18), 0 2px 6px rgba(18, 26, 40, .06);
}

[data-aldelo-theme="dark"] {
  color-scheme: dark;
  --aldelo-color-background: #09090b;
  --aldelo-color-background-shade: #0d0d10;
  --aldelo-color-surface: #121214;
  --aldelo-color-surface-muted: #1a1a1f;
  --aldelo-color-surface-raised: #1c1c20;
  --aldelo-color-surface-hover: #1c1c21;
  --aldelo-color-surface-inverse: #e4e4e7;
  --aldelo-color-text: #f4f4f5;
  --aldelo-color-text-muted: #a7a7b0;
  --aldelo-color-text-strong: #f4f4f5;
  --aldelo-color-text-disabled: #6b6b75;
  --aldelo-color-text-inverse: #151923;
  --aldelo-color-border: #34343a;
  --aldelo-color-border-strong: #45454d;
  --aldelo-color-control-border: #6a6a75;
  --aldelo-color-focus: #a5aeff;
  --aldelo-color-brand: #7c8cff;
  --aldelo-color-action: #7c8cff;
  --aldelo-color-action-hover: #92a0ff;
  --aldelo-color-action-pressed: #6978e8;
  --aldelo-color-action-soft: #24243b;
  --aldelo-color-on-action: #0b0b13;
  --aldelo-color-link: #a5b4ff;
  --aldelo-color-link-hover: #c0caff;
  --aldelo-color-success: #76e0a4;
  --aldelo-color-success-soft: #1d2420;
  --aldelo-color-warning: #f5c96a;
  --aldelo-color-warning-soft: #29251c;
  --aldelo-color-danger: #ff929f;
  --aldelo-color-danger-hover: #ffa8b2;
  --aldelo-color-danger-pressed: #f07a88;
  --aldelo-color-on-danger: #1a0b0e;
  --aldelo-color-danger-soft: #2b1f22;
  --aldelo-color-info: #8db8ff;
  --aldelo-color-info-soft: #1c2230;
  --aldelo-color-nav-section: #a5aeff;
  --aldelo-color-data-1: #7c8cff;
  --aldelo-color-data-2: #b19cff;
  --aldelo-color-data-3: #ffb968;
  --aldelo-color-data-4: #67c8ff;
  --aldelo-color-data-5: #ff8db7;
  --aldelo-color-data-track: #2a2a30;
  --aldelo-color-skeleton: #1f1f24;
  --aldelo-color-mark: #4a3f12;
  --aldelo-color-scrim: rgba(0, 0, 0, .58);
  --aldelo-color-brand-wordmark: var(--aldelo-brand-white);
  --aldelo-shadow-shell: 0 10px 30px rgba(0, 0, 0, .24);
  --aldelo-shadow-panel: 0 1px 0 rgba(255, 255, 255, .025);
  --aldelo-shadow-interactive: 0 16px 38px rgba(0, 0, 0, .24);
  --aldelo-shadow-control: 0 8px 20px rgba(0, 0, 0, .22);
  --aldelo-shadow-overlay: 0 24px 64px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}

@media (prefers-reduced-motion: reduce) {
  :root,
  [data-aldelo-theme="light"],
  [data-aldelo-theme="dark"] {
    --aldelo-motion-hover: 0.01ms;
    --aldelo-motion-color: 0.01ms;
    --aldelo-motion-spatial: 0.01ms;
    --aldelo-motion-screen: 0.01ms;
    --aldelo-motion-chart-donut: 0.01ms;
    --aldelo-motion-chart-bar: 0.01ms;
    --aldelo-motion-overlay: 0.01ms;
  }
}

/*
 * Aldelo Cloud component primitives — v1.6.2
 * Framework-neutral reference styles built only from --aldelo-* tokens.
 * Import after aldelo-cloud.tokens.css and before product styles.
 *
 * - Every rule lives in @layer aldelo so product CSS (unlayered) wins without !important.
 * - Selectors use :where() to keep specificity at zero.
 * - Logical properties keep layouts RTL-ready.
 * - Breakpoint literals mirror tokens: narrow 560px, navigation 860px, wide 1200px.
 *   (CSS variables cannot be media conditions; see aldelo-cloud.tokens.ts.)
 */

@layer aldelo.base, aldelo.layout, aldelo.components, aldelo.utilities;

/* ---------------------------------------------------------------- base */
@layer aldelo.base {
  :where(*, *::before, *::after) { box-sizing: border-box; }

  :where(html) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
    scroll-padding-block-start: calc(var(--aldelo-size-topbar) + var(--aldelo-space-200));
  }

  :where(body) {
    margin: 0;
    background: var(--aldelo-color-background);
    color: var(--aldelo-color-text);
    font-family: var(--aldelo-font-family-body);
    font-size: var(--aldelo-font-size-body);
    line-height: var(--aldelo-line-height-body);
    letter-spacing: var(--aldelo-letter-spacing-body);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--aldelo-motion-color) var(--aldelo-ease-standard),
      color var(--aldelo-motion-color) var(--aldelo-ease-standard);
  }

  :where(h1, h2, h3, h4) {
    margin: 0;
    color: var(--aldelo-color-text-strong);
    font-weight: var(--aldelo-font-weight-medium);
    line-height: var(--aldelo-line-height-heading);
    text-wrap: balance;
  }
  :where(h1) {
    font-family: var(--aldelo-font-family-display);
    font-size: var(--aldelo-font-size-display);
    line-height: var(--aldelo-line-height-display);
    letter-spacing: var(--aldelo-letter-spacing-display);
  }
  :where(h2) { font-size: var(--aldelo-font-size-heading-small); }
  :where(h3) { font-size: var(--aldelo-font-size-body-large); }
  :where(p) { margin: 0; text-wrap: pretty; }

  :where(a) {
    color: var(--aldelo-component-link-foreground);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--aldelo-motion-hover) var(--aldelo-ease-standard);
  }
  :where(a:hover) { color: var(--aldelo-component-link-foreground-hover); }

  :where(code, kbd, samp, pre) { font-family: var(--aldelo-font-family-mono); font-size: 0.95em; }

  ::selection { background: var(--aldelo-color-action-soft); color: var(--aldelo-color-text-strong); }

  :where(:focus-visible) {
    outline: var(--aldelo-component-focus-ring-width) solid var(--aldelo-component-focus-ring-color);
    outline-offset: var(--aldelo-component-focus-ring-offset);
  }
  :where(:focus:not(:focus-visible)) { outline: none; }
  /* Programmatic focus targets (headings, regions) announce position without a ring. */
  :where(h1, h2, h3, main, [role="region"], [role="tabpanel"])[tabindex="-1"]:focus { outline: none; }

  :where(img, svg, video, canvas) { display: block; max-inline-size: 100%; }
  :where(button, input, select, textarea) { font: inherit; letter-spacing: inherit; color: inherit; }
  :where(table) { border-collapse: collapse; }
  :where([hidden]) { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) {
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
    }
  }
}

/* -------------------------------------------------------------- layout */
@layer aldelo.layout {
  .ac-skip-link {
    position: absolute;
    inset-inline-start: var(--aldelo-space-300);
    inset-block-start: -100px;
    z-index: var(--aldelo-z-tooltip);
    padding: var(--aldelo-space-200) var(--aldelo-space-400);
    border-radius: var(--aldelo-radius-control);
    background: var(--aldelo-color-surface-raised);
    color: var(--aldelo-color-text-strong);
    box-shadow: var(--aldelo-shadow-overlay);
  }
  .ac-skip-link:focus { inset-block-start: var(--aldelo-space-300); }

  /* Application shell: top bar + sidebar + main. */
  .ac-app {
    display: grid;
    grid-template-columns: var(--aldelo-size-sidebar) minmax(0, 1fr);
    grid-template-rows: var(--aldelo-size-topbar) minmax(0, 1fr);
    grid-template-areas: "topbar topbar" "sidebar main";
    min-block-size: 100dvh;
  }
  .ac-app[data-sidebar="collapsed"] { grid-template-columns: var(--aldelo-size-sidebar-collapsed) minmax(0, 1fr); }
  .ac-app[data-navigation="top"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main"; }
  .ac-app[data-navigation="top"] .ac-main { border-inline-start: 0; }

  .ac-topbar {
    grid-area: topbar;
    position: sticky;
    inset-block-start: 0;
    z-index: var(--aldelo-z-navigation);
    display: flex;
    align-items: center;
    gap: var(--aldelo-space-400);
    padding-inline: var(--aldelo-space-500);
    background: var(--aldelo-color-surface);
    border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border);
  }
  @supports (backdrop-filter: blur(1px)) {
    .ac-topbar {
      background: color-mix(in srgb, var(--aldelo-color-surface) 86%, transparent);
      backdrop-filter: saturate(1.4) blur(12px);
    }
  }
  .ac-topbar__spacer { flex: 1; }

  .ac-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--aldelo-space-250);
    color: var(--aldelo-color-text-strong);
    font-weight: var(--aldelo-font-weight-medium);
    font-size: var(--aldelo-font-size-body-large);
    letter-spacing: var(--aldelo-letter-spacing-brand);
    text-decoration: none;
    white-space: nowrap;
  }
  .ac-brand__mark {
    display: grid;
    place-items: center;
    inline-size: var(--aldelo-size-brand-mark);
    block-size: var(--aldelo-size-brand-mark);
    border-radius: var(--aldelo-radius-md);
    background: linear-gradient(135deg, var(--aldelo-color-brand), var(--aldelo-color-data-2));
    color: #fff;
    font-size: var(--aldelo-font-size-label);
    font-weight: var(--aldelo-font-weight-strong);
    letter-spacing: 0;
  }

  .ac-sidebar {
    grid-area: sidebar;
    position: sticky;
    inset-block-start: var(--aldelo-size-topbar);
    block-size: calc(100dvh - var(--aldelo-size-topbar));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--aldelo-space-400) var(--aldelo-space-300);
    background: var(--aldelo-color-background);
  }

  .ac-main {
    grid-area: main;
    min-inline-size: 0;
    border-inline-start: var(--aldelo-border-width) solid var(--aldelo-color-border);
    container-type: inline-size;
    container-name: main;
  }

  .ac-page {
    max-inline-size: var(--aldelo-layout-content-max);
    margin-inline: auto;
    padding: var(--aldelo-density-comfortable-page-start) var(--aldelo-density-comfortable-content-inline) var(--aldelo-layout-content-block-end);
    display: grid;
    gap: var(--aldelo-space-600);
  }
  [data-density="compact"] .ac-page {
    padding: var(--aldelo-density-compact-page-start) var(--aldelo-density-compact-content-inline) var(--aldelo-density-compact-page-end);
    gap: var(--aldelo-space-400);
  }
  .ac-page--form { max-inline-size: calc(var(--aldelo-size-form-max) + 2 * var(--aldelo-density-comfortable-content-inline)); }

  .ac-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--aldelo-space-400);
  }
  .ac-page-header__text { display: grid; gap: var(--aldelo-space-150); min-inline-size: 0; }
  .ac-page-header__eyebrow { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  .ac-page-header__description { color: var(--aldelo-color-text-muted); max-inline-size: var(--aldelo-size-reading-max); }
  .ac-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--aldelo-space-200); }

  .ac-stack { display: grid; gap: var(--ac-gap, var(--aldelo-space-400)); align-content: start; }
  .ac-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-gap, var(--aldelo-space-200)); }
  .ac-grid {
    display: grid;
    gap: var(--ac-gap, var(--aldelo-space-400));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--ac-min, 220px), 100%), 1fr));
  }
  .ac-split { display: grid; gap: var(--aldelo-space-400); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  @container main (max-width: 900px) { .ac-split { grid-template-columns: minmax(0, 1fr); } }

  /* 860px: navigation moves into a disclosed drawer. */
  @media (max-width: 860px) {
    .ac-app, .ac-app[data-sidebar="collapsed"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main"; }
    .ac-sidebar {
      position: fixed;
      inset-block: var(--aldelo-size-topbar) 0;
      inset-inline-start: 0;
      z-index: var(--aldelo-z-overlay);
      inline-size: min(300px, 86vw);
      block-size: auto;
      background: var(--aldelo-color-surface-raised);
      box-shadow: var(--aldelo-shadow-overlay);
      translate: -105% 0;
      visibility: hidden;
      transition: translate var(--aldelo-motion-overlay) var(--aldelo-ease-entrance), visibility 0s linear var(--aldelo-motion-overlay);
    }
    [dir="rtl"] .ac-sidebar { translate: 105% 0; }
    .ac-app[data-nav-open="true"] .ac-sidebar { translate: 0 0; visibility: visible; transition-delay: 0s; }
    .ac-app[data-nav-open="true"]::after {
      content: "";
      position: fixed;
      inset: var(--aldelo-size-topbar) 0 0;
      z-index: calc(var(--aldelo-z-overlay) - 1);
      background: var(--aldelo-color-scrim);
      animation: ac-fade-in var(--aldelo-motion-overlay) var(--aldelo-ease-standard);
    }
    .ac-page { padding-inline: var(--aldelo-density-mobile-content-inline); }
    .ac-main { border-inline-start: 0; }
  }
}

/* ---------------------------------------------------------- components */
@layer aldelo.components {
  /* Navigation --------------------------------------------------------- */
  .ac-nav { display: grid; gap: var(--aldelo-space-500); }
  .ac-nav-group { display: grid; gap: var(--aldelo-space-050); }
  .ac-nav-group__label {
    display: flex;
    align-items: center;
    gap: var(--aldelo-space-200);
    margin: 0 0 var(--aldelo-space-150);
    padding-inline: var(--aldelo-space-100);
    color: var(--aldelo-component-navigation-group-foreground);
    font-size: var(--aldelo-font-size-micro);
    font-weight: var(--aldelo-font-weight-strong);
    letter-spacing: var(--aldelo-letter-spacing-overline);
    text-transform: uppercase;
  }
  .ac-nav-group__label::after {
    content: "";
    inline-size: 14px;
    block-size: var(--aldelo-border-width-emphasis);
    border-radius: var(--aldelo-radius-full);
    background: currentColor;
    opacity: 0.55;
  }
  .ac-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--aldelo-space-250);
    min-block-size: var(--aldelo-component-navigation-item-height);
    padding-inline: var(--aldelo-space-300) var(--aldelo-space-200);
    margin-inline-start: var(--aldelo-space-100);
    border-radius: var(--aldelo-component-navigation-item-radius);
    color: var(--aldelo-color-text);
    text-decoration: none;
    font-weight: var(--aldelo-font-weight-regular);
    transition: background-color var(--aldelo-motion-hover) var(--aldelo-ease-standard), color var(--aldelo-motion-hover) var(--aldelo-ease-standard);
  }
  .ac-nav-item:hover { background: var(--aldelo-color-surface-hover); color: var(--aldelo-color-text-strong); }
  .ac-nav-item[aria-current="page"] {
    background: var(--aldelo-component-navigation-active-background);
    color: var(--aldelo-component-navigation-active-foreground);
    font-weight: var(--aldelo-font-weight-medium);
  }
  .ac-nav-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 9px;
    inline-size: 3px;
    border-radius: var(--aldelo-radius-full);
    background: var(--aldelo-component-navigation-active-rail);
  }
  .ac-nav-item__icon { inline-size: var(--aldelo-size-icon); block-size: var(--aldelo-size-icon); flex: none; color: var(--aldelo-color-text-muted); }
  .ac-nav-item[aria-current="page"] .ac-nav-item__icon { color: var(--aldelo-color-action); }
  .ac-nav-item__count { margin-inline-start: auto; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); font-variant-numeric: tabular-nums; }
  .ac-app[data-sidebar="collapsed"] :is(.ac-nav-item__label, .ac-nav-item__count, .ac-nav-group__label) {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .ac-app[data-sidebar="collapsed"] .ac-nav-item { justify-content: center; padding-inline: 0; }

  .ac-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aldelo-space-150); margin: 0; padding: 0; list-style: none; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  .ac-breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--aldelo-space-150); color: var(--aldelo-color-border-strong); }
  .ac-breadcrumbs a { color: inherit; text-decoration: none; }
  .ac-breadcrumbs a:hover { color: var(--aldelo-color-text-strong); text-decoration: underline; }
  .ac-breadcrumbs [aria-current="page"] { color: var(--aldelo-color-text); }

  /* Buttons ------------------------------------------------------------ */
  .ac-button {
    --_bg: var(--aldelo-component-button-secondary-background);
    --_bg-hover: var(--aldelo-component-button-secondary-background-hover);
    --_bg-pressed: var(--aldelo-color-surface-muted);
    --_fg: var(--aldelo-component-button-secondary-foreground);
    --_border: var(--aldelo-component-button-secondary-border);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--aldelo-space-200);
    min-block-size: var(--aldelo-component-button-height);
    padding-inline: var(--aldelo-space-400);
    border: var(--aldelo-border-width) solid var(--_border);
    border-radius: var(--aldelo-component-button-radius);
    background: var(--_bg);
    color: var(--_fg);
    font-weight: var(--aldelo-font-weight-medium);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--aldelo-motion-hover) var(--aldelo-ease-standard),
      border-color var(--aldelo-motion-hover) var(--aldelo-ease-standard),
      color var(--aldelo-motion-hover) var(--aldelo-ease-standard),
      box-shadow var(--aldelo-motion-hover) var(--aldelo-ease-standard);
  }
  .ac-button:hover { background: var(--_bg-hover); }
  .ac-button:active { background: var(--_bg-pressed); }
  .ac-button--primary {
    --_bg: var(--aldelo-component-button-primary-background);
    --_bg-hover: var(--aldelo-component-button-primary-background-hover);
    --_bg-pressed: var(--aldelo-component-button-primary-background-pressed);
    --_fg: var(--aldelo-component-button-primary-foreground);
    --_border: transparent;
  }
  .ac-button--danger {
    --_bg: var(--aldelo-component-button-danger-background);
    --_bg-hover: var(--aldelo-component-button-danger-background-hover);
    --_bg-pressed: var(--aldelo-component-button-danger-background-pressed);
    --_fg: var(--aldelo-component-button-danger-foreground);
    --_border: transparent;
  }
  .ac-button--quiet {
    --_bg: transparent;
    --_bg-hover: var(--aldelo-component-button-quiet-background-hover);
    --_bg-pressed: var(--aldelo-color-surface-muted);
    --_fg: var(--aldelo-component-button-quiet-foreground);
    --_border: transparent;
  }
  .ac-button--link {
    --_bg: transparent; --_bg-hover: transparent; --_bg-pressed: transparent; --_border: transparent;
    --_fg: var(--aldelo-component-link-foreground);
    min-block-size: auto; padding: 0; font-weight: var(--aldelo-font-weight-medium);
  }
  .ac-button--link:hover { text-decoration: underline; color: var(--aldelo-component-link-foreground-hover); }
  .ac-button--small { min-block-size: var(--aldelo-size-control-small); padding-inline: var(--aldelo-space-300); font-size: var(--aldelo-font-size-label); }
  .ac-button--large { min-block-size: var(--aldelo-size-control-large); padding-inline: var(--aldelo-space-500); font-size: var(--aldelo-font-size-body-large); }
  .ac-button--block { inline-size: 100%; }
  .ac-button--icon { inline-size: var(--aldelo-component-button-height); padding: 0; }
  .ac-button--icon.ac-button--small { inline-size: var(--aldelo-size-control-small); }
  .ac-button svg { inline-size: var(--aldelo-size-icon); block-size: var(--aldelo-size-icon); flex: none; }
  .ac-button:is(:disabled, [aria-disabled="true"]) { opacity: var(--aldelo-opacity-disabled); cursor: not-allowed; pointer-events: none; }
  .ac-button[aria-busy="true"] { pointer-events: none; cursor: progress; }
  .ac-button[aria-busy="true"]::before {
    content: "";
    flex: none;
    inline-size: 14px;
    block-size: 14px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: ac-spin 700ms linear infinite;
  }

  /* Spinner & progress -------------------------------------------------- */
  .ac-spinner {
    display: inline-block;
    inline-size: 16px;
    block-size: 16px;
    border: 2px solid var(--aldelo-color-border-strong);
    border-block-start-color: var(--aldelo-color-action);
    border-radius: 50%;
    animation: ac-spin 700ms linear infinite;
  }
  @keyframes ac-spin { to { rotate: 1turn; } }
  @media (prefers-reduced-motion: reduce) {
    .ac-spinner, .ac-button[aria-busy="true"]::before { animation-duration: 1.6s; animation-iteration-count: infinite !important; }
  }
  .ac-progress { block-size: 6px; border-radius: var(--aldelo-radius-full); background: var(--aldelo-color-data-track); overflow: hidden; }
  .ac-progress__bar { block-size: 100%; inline-size: var(--ac-value, 0%); border-radius: inherit; background: var(--aldelo-color-action); transition: inline-size var(--aldelo-motion-screen) var(--aldelo-ease-entrance); }

  /* Fields ------------------------------------------------------------- */
  .ac-field { display: grid; gap: var(--aldelo-space-150); align-content: start; min-inline-size: 0; }
  .ac-label { color: var(--aldelo-color-text-strong); font-size: var(--aldelo-font-size-label); font-weight: var(--aldelo-font-weight-medium); }
  .ac-label__optional { color: var(--aldelo-color-text-muted); font-weight: var(--aldelo-font-weight-regular); }
  .ac-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--aldelo-space-200); }
  .ac-help { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  .ac-error { display: flex; gap: var(--aldelo-space-150); align-items: flex-start; color: var(--aldelo-color-danger); font-size: var(--aldelo-font-size-label); font-weight: var(--aldelo-font-weight-medium); }
  .ac-error::before { content: "!"; display: grid; place-items: center; flex: none; inline-size: 14px; block-size: 14px; margin-block-start: 1px; border-radius: 50%; background: var(--aldelo-color-danger); color: var(--aldelo-color-on-danger); font-size: var(--aldelo-font-size-caption); font-weight: var(--aldelo-font-weight-strong); }

  .ac-input, .ac-select, .ac-textarea {
    inline-size: 100%;
    min-block-size: var(--aldelo-component-field-height);
    padding: 0 var(--aldelo-space-300);
    border: var(--aldelo-border-width) solid var(--aldelo-component-field-border);
    border-radius: var(--aldelo-component-field-radius);
    background: var(--aldelo-component-field-background);
    color: var(--aldelo-component-field-foreground);
    font-size: var(--aldelo-font-size-body-large);
    transition: border-color var(--aldelo-motion-hover) var(--aldelo-ease-standard), box-shadow var(--aldelo-motion-hover) var(--aldelo-ease-standard);
  }
  .ac-textarea { padding-block: var(--aldelo-space-250); min-block-size: 96px; resize: vertical; field-sizing: content; }
  .ac-select {
    appearance: none;
    padding-inline-end: var(--aldelo-space-1000);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
  }
  [dir="rtl"] .ac-select { background-position: 12px 50%, 17px 50%; }
  :is(.ac-input, .ac-select, .ac-textarea)::placeholder { color: var(--aldelo-component-field-placeholder); opacity: 1; }
  :is(.ac-input, .ac-select, .ac-textarea):hover { border-color: var(--aldelo-component-field-border-hover); }
  :is(.ac-input, .ac-select, .ac-textarea):focus-visible { outline: none; border-color: var(--aldelo-color-focus); box-shadow: 0 0 0 var(--aldelo-border-width) var(--aldelo-color-focus), 0 0 0 4px var(--aldelo-color-action-soft); }
  :is(.ac-input, .ac-select, .ac-textarea)[aria-invalid="true"] { border-color: var(--aldelo-component-field-border-invalid); }
  :is(.ac-input, .ac-select, .ac-textarea)[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 var(--aldelo-border-width) var(--aldelo-color-danger), 0 0 0 4px var(--aldelo-color-danger-soft); }
  :is(.ac-input, .ac-select, .ac-textarea):disabled { background: var(--aldelo-component-field-background-disabled); color: var(--aldelo-color-text-disabled); cursor: not-allowed; }
  :is(.ac-input, .ac-textarea)[readonly] { background: var(--aldelo-color-surface-muted); border-style: dashed; }
  .ac-input--numeric { text-align: end; font-variant-numeric: tabular-nums; }
  .ac-input--code { font-family: var(--aldelo-font-family-mono); letter-spacing: 0.3em; text-align: center; font-size: var(--aldelo-font-size-heading-small); }

  /* Prevent iOS focus zoom and enlarge targets on touch devices. */
  @media (pointer: coarse) {
    .ac-input, .ac-select, .ac-textarea { font-size: var(--aldelo-component-field-font-size-touch); min-block-size: var(--aldelo-size-touch-target); }
    .ac-button { min-block-size: var(--aldelo-size-touch-target); }
    .ac-button--icon { inline-size: var(--aldelo-size-touch-target); }
    .ac-nav-item { min-block-size: var(--aldelo-size-touch-target); }
  }

  .ac-input-group { position: relative; display: flex; align-items: center; }
  .ac-input-group > .ac-input { flex: 1; }
  .ac-input-group__adornment { position: absolute; inset-inline-start: var(--aldelo-space-300); color: var(--aldelo-color-text-muted); pointer-events: none; }
  .ac-input-group__adornment + .ac-input { padding-inline-start: var(--aldelo-space-1000); }
  .ac-input-group__action { position: absolute; inset-inline-end: var(--aldelo-space-100); }
  .ac-input-group:has(.ac-input-group__action) > .ac-input { padding-inline-end: 64px; }
  .ac-input-group__suffix { position: absolute; inset-inline-end: var(--aldelo-space-300); color: var(--aldelo-color-text-muted); pointer-events: none; }
  .ac-input-group:has(.ac-input-group__suffix) > .ac-input { padding-inline-end: var(--aldelo-space-1000); }

  .ac-check { display: flex; align-items: flex-start; gap: var(--aldelo-space-250); cursor: pointer; }
  .ac-check input { flex: none; inline-size: 18px; block-size: 18px; margin: 1px 0 0; accent-color: var(--aldelo-color-action); cursor: pointer; }
  .ac-check__text { display: grid; gap: var(--aldelo-space-050); }

  .ac-switch { display: inline-flex; align-items: center; gap: var(--aldelo-space-250); cursor: pointer; }
  .ac-switch input {
    appearance: none;
    position: relative;
    flex: none;
    inline-size: 36px;
    block-size: 20px;
    margin: 0;
    border-radius: var(--aldelo-radius-full);
    background: var(--aldelo-color-control-border);
    cursor: pointer;
    transition: background-color var(--aldelo-motion-hover) var(--aldelo-ease-standard);
  }
  .ac-switch input::after {
    content: "";
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: translate var(--aldelo-motion-spatial) var(--aldelo-ease-entrance);
  }
  .ac-switch input:checked { background: var(--aldelo-color-action); }
  .ac-switch input:checked::after { translate: 16px 0; }
  [dir="rtl"] .ac-switch input:checked::after { translate: -16px 0; }

  .ac-fieldset { display: grid; gap: var(--aldelo-space-300); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  .ac-fieldset > legend { float: inline-start; inline-size: 100%; padding: 0; margin-block-end: var(--aldelo-space-300); color: var(--aldelo-color-text-strong); font-size: var(--aldelo-font-size-body-large); font-weight: var(--aldelo-font-weight-medium); }
  .ac-fieldset > legend + * { clear: both; }
  .ac-fieldset + .ac-fieldset { padding-block-start: var(--aldelo-space-600); border-block-start: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-form-grid { display: grid; gap: var(--aldelo-space-400) var(--aldelo-space-400); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-form-grid > .ac-span-all { grid-column: 1 / -1; }
  @container (max-width: 520px) { .ac-form-grid { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 560px) { .ac-form-grid { grid-template-columns: minmax(0, 1fr); } }

  .ac-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--aldelo-space-200);
    padding-block-start: var(--aldelo-space-400);
    border-block-start: var(--aldelo-border-width) solid var(--aldelo-color-border);
  }
  .ac-form-actions--sticky {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--aldelo-z-sticky);
    padding: var(--aldelo-space-300) var(--aldelo-space-400);
    margin-inline: calc(-1 * var(--aldelo-space-400));
    background: var(--aldelo-color-surface);
    box-shadow: 0 -1px 0 var(--aldelo-color-border);
    border: 0;
  }

  .ac-segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--aldelo-radius-md); background: var(--aldelo-color-surface-muted); border: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-segmented button { min-block-size: 30px; padding-inline: var(--aldelo-space-300); border: 0; border-radius: var(--aldelo-radius-control); background: transparent; color: var(--aldelo-color-text-muted); font-weight: var(--aldelo-font-weight-medium); font-size: var(--aldelo-font-size-label); cursor: pointer; transition: background-color var(--aldelo-motion-hover) var(--aldelo-ease-standard), color var(--aldelo-motion-hover) var(--aldelo-ease-standard); }
  .ac-segmented button:hover { color: var(--aldelo-color-text-strong); }
  .ac-segmented button[aria-pressed="true"], .ac-segmented button[aria-selected="true"] { background: var(--aldelo-color-surface); color: var(--aldelo-color-text-strong); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--aldelo-color-border); }

  .ac-divider-text { display: flex; align-items: center; gap: var(--aldelo-space-300); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  .ac-divider-text::before, .ac-divider-text::after { content: ""; flex: 1; border-block-start: var(--aldelo-border-width) solid var(--aldelo-color-border); }

  /* Panels & KPIs ------------------------------------------------------ */
  .ac-panel {
    display: grid;
    gap: var(--aldelo-space-300);
    align-content: start;
    min-inline-size: 0;
    padding: var(--aldelo-component-panel-padding);
    border: var(--aldelo-border-width) solid var(--aldelo-component-panel-border);
    border-radius: var(--aldelo-component-panel-radius);
    background: var(--aldelo-component-panel-background);
    box-shadow: var(--aldelo-component-panel-shadow);
  }
  [data-density="compact"] .ac-panel { padding: var(--aldelo-density-compact-panel-padding); }
  .ac-panel--flush { padding: 0; gap: 0; overflow: hidden; }
  .ac-panel__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--aldelo-space-200); }
  .ac-panel--flush > .ac-panel__header { padding: var(--aldelo-space-300) var(--aldelo-space-400); border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-panel__title { font-size: var(--aldelo-font-size-body-large); font-weight: var(--aldelo-font-weight-medium); color: var(--aldelo-color-text-strong); }
  .ac-panel__meta { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  a.ac-panel, button.ac-panel { color: inherit; text-decoration: none; text-align: start; font: inherit; cursor: pointer; transition: box-shadow var(--aldelo-motion-hover) var(--aldelo-ease-standard), border-color var(--aldelo-motion-hover) var(--aldelo-ease-standard); }
  a.ac-panel:hover, button.ac-panel:hover { border-color: var(--aldelo-color-border-strong); box-shadow: var(--aldelo-shadow-interactive); }

  .ac-kpi { display: grid; gap: var(--aldelo-space-150); padding: var(--aldelo-density-comfortable-kpi-padding); border: var(--aldelo-border-width) solid var(--aldelo-color-border); border-radius: var(--aldelo-radius-md); background: var(--aldelo-color-surface); box-shadow: var(--aldelo-shadow-panel); min-inline-size: 0; }
  [data-density="compact"] .ac-kpi { padding: var(--aldelo-density-compact-kpi-padding); }
  .ac-kpi__label { display: flex; align-items: center; justify-content: space-between; gap: var(--aldelo-space-200); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); font-weight: var(--aldelo-font-weight-medium); }
  .ac-kpi__value { color: var(--aldelo-color-text-strong); font-family: var(--aldelo-font-family-display); font-size: var(--aldelo-font-size-metric); line-height: var(--aldelo-line-height-metric); letter-spacing: var(--aldelo-letter-spacing-metric); font-weight: var(--aldelo-font-weight-medium); font-variant-numeric: tabular-nums; }
  .ac-kpi__context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aldelo-space-150); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--aldelo-font-weight-medium); font-variant-numeric: tabular-nums; }
  .ac-delta[data-sentiment="positive"] { color: var(--aldelo-color-success); }
  .ac-delta[data-sentiment="negative"] { color: var(--aldelo-color-danger); }
  .ac-delta[data-sentiment="neutral"] { color: var(--aldelo-color-text-muted); }

  /* Badges, chips, avatars --------------------------------------------- */
  .ac-badge {
    --_fg: var(--aldelo-color-text-muted);
    --_bg: var(--aldelo-color-surface-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--aldelo-space-100);
    padding: var(--aldelo-component-badge-padding-block) var(--aldelo-component-badge-padding-inline);
    border-radius: var(--aldelo-component-badge-radius);
    background: var(--_bg);
    color: var(--_fg);
    font-size: var(--aldelo-font-size-caption);
    font-weight: var(--aldelo-font-weight-medium);
    line-height: 1.3;
    white-space: nowrap;
  }
  .ac-badge--dot::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
  .ac-badge--success { --_fg: var(--aldelo-color-success); --_bg: var(--aldelo-color-success-soft); }
  .ac-badge--warning { --_fg: var(--aldelo-color-warning); --_bg: var(--aldelo-color-warning-soft); }
  .ac-badge--danger { --_fg: var(--aldelo-color-danger); --_bg: var(--aldelo-color-danger-soft); }
  .ac-badge--info { --_fg: var(--aldelo-color-info); --_bg: var(--aldelo-color-info-soft); }

  .ac-chip { display: inline-flex; align-items: center; gap: var(--aldelo-space-100); min-block-size: var(--aldelo-size-control-small); padding-inline: var(--aldelo-space-250) var(--aldelo-space-100); border: var(--aldelo-border-width) solid var(--aldelo-color-border-strong); border-radius: var(--aldelo-radius-control); background: var(--aldelo-color-surface); font-size: var(--aldelo-font-size-label); }
  .ac-chip__key { color: var(--aldelo-color-text-muted); }
  .ac-chip__remove { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border: 0; border-radius: var(--aldelo-radius-sm); background: transparent; color: var(--aldelo-color-text-muted); cursor: pointer; }
  .ac-chip__remove:hover { background: var(--aldelo-color-surface-hover); color: var(--aldelo-color-text-strong); }

  .ac-avatar { display: grid; place-items: center; flex: none; inline-size: var(--aldelo-size-avatar); block-size: var(--aldelo-size-avatar); border-radius: 50%; background: var(--aldelo-color-action-soft); color: var(--aldelo-color-text-strong); font-size: var(--aldelo-font-size-label); font-weight: var(--aldelo-font-weight-medium); overflow: hidden; }
  .ac-kbd { display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: 5px; border: var(--aldelo-border-width) solid var(--aldelo-color-border-strong); border-block-end-width: 2px; border-radius: var(--aldelo-radius-sm); background: var(--aldelo-color-surface); color: var(--aldelo-color-text-muted); font-family: var(--aldelo-font-family-mono); font-size: var(--aldelo-font-size-caption); }

  /* Alerts (status anatomy) -------------------------------------------- */
  .ac-alert {
    --_fg: var(--aldelo-color-info);
    --_bg: var(--aldelo-color-info-soft);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--aldelo-space-100) var(--aldelo-space-300);
    align-items: start;
    padding: var(--aldelo-space-300) var(--aldelo-space-400);
    border: var(--aldelo-border-width) solid color-mix(in srgb, var(--_fg) 28%, transparent);
    border-radius: var(--aldelo-radius-md);
    background: var(--_bg);
    color: var(--aldelo-color-text);
  }
  .ac-alert__icon { grid-row: span 2; inline-size: 18px; block-size: 18px; color: var(--_fg); margin-block-start: 1px; }
  .ac-alert__title { color: var(--_fg); font-weight: var(--aldelo-font-weight-medium); }
  .ac-alert__body { grid-column: 2; }
  .ac-alert__actions { grid-row: 1 / span 2; grid-column: 3; display: flex; gap: var(--aldelo-space-200); align-self: center; }
  .ac-alert--success { --_fg: var(--aldelo-color-success); --_bg: var(--aldelo-color-success-soft); }
  .ac-alert--warning { --_fg: var(--aldelo-color-warning); --_bg: var(--aldelo-color-warning-soft); }
  .ac-alert--danger { --_fg: var(--aldelo-color-danger); --_bg: var(--aldelo-color-danger-soft); }
  @media (max-width: 560px) { .ac-alert { grid-template-columns: auto minmax(0, 1fr); } .ac-alert__actions { grid-column: 2; grid-row: auto; } }

  /* Tabs --------------------------------------------------------------- */
  .ac-tabs { display: flex; gap: var(--aldelo-space-100); border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border); overflow-x: auto; scrollbar-width: none; }
  .ac-tab { position: relative; min-block-size: var(--aldelo-size-control); padding-inline: var(--aldelo-space-300); border: 0; background: none; color: var(--aldelo-color-text-muted); font-weight: var(--aldelo-font-weight-medium); white-space: nowrap; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: var(--aldelo-space-150); }
  .ac-tab:hover { color: var(--aldelo-color-text-strong); }
  .ac-tab[aria-selected="true"], .ac-tab[aria-current="page"] { color: var(--aldelo-color-text-strong); }
  .ac-tab[aria-selected="true"]::after, .ac-tab[aria-current="page"]::after { content: ""; position: absolute; inset-inline: var(--aldelo-space-200); inset-block-end: -1px; block-size: 2px; border-radius: 2px 2px 0 0; background: var(--aldelo-color-action); }

  /* Tables ------------------------------------------------------------- */
  .ac-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; container-type: inline-size; container-name: table; }
  .ac-table-wrap:focus-visible { outline-offset: -3px; }
  .ac-table { inline-size: 100%; font-variant-numeric: tabular-nums; }
  .ac-table caption { text-align: start; padding: var(--aldelo-space-300) var(--aldelo-space-400); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  .ac-table th, .ac-table td { padding: var(--aldelo-space-250) var(--aldelo-space-400); border-block-end: var(--aldelo-border-width) solid var(--aldelo-component-table-row-border); text-align: start; vertical-align: middle; }
  [data-density="compact"] .ac-table :is(th, td) { padding-block: var(--aldelo-space-150); }
  .ac-table thead th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--aldelo-color-surface); color: var(--aldelo-component-table-header-foreground); font-size: var(--aldelo-font-size-label); font-weight: var(--aldelo-font-weight-medium); white-space: nowrap; }
  .ac-table tbody tr { transition: background-color var(--aldelo-motion-hover) var(--aldelo-ease-standard); }
  .ac-table tbody tr:hover { background: var(--aldelo-component-table-row-hover); }
  .ac-table tbody tr[aria-selected="true"] { background: var(--aldelo-component-table-row-selected); }
  .ac-table tbody tr:last-child :is(td, th) { border-block-end: 0; }
  .ac-table tfoot td { font-weight: var(--aldelo-font-weight-medium); color: var(--aldelo-color-text-strong); border-block-start: var(--aldelo-border-width-emphasis) solid var(--aldelo-color-border-strong); border-block-end: 0; }
  .ac-table .ac-num { text-align: end; white-space: nowrap; }
  .ac-table .ac-select-cell { inline-size: 44px; padding-inline-end: 0; }
  .ac-table .ac-actions-cell { inline-size: 1%; white-space: nowrap; text-align: end; }
  /* Stacked reflow: rows become labeled cards when the table's container is narrow. Each cell needs data-label. */
  @container table (max-width: 600px) {
    .ac-table--stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .ac-table--stack caption { display: block; }
    .ac-table--stack tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--aldelo-space-100) var(--aldelo-space-300); padding: var(--aldelo-space-300) var(--aldelo-space-400); border-block-end: var(--aldelo-border-width) solid var(--aldelo-component-table-row-border); }
    .ac-table--stack :is(td, th) { display: flex; justify-content: space-between; gap: var(--aldelo-space-300); padding: 0; border: 0; text-align: end; }
    .ac-table--stack :is(td, th)[data-label]::before { content: attr(data-label); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); text-align: start; }
    .ac-table--stack :is(td, th)[data-label] { grid-column: 1 / -1; }
    .ac-table--stack .ac-select-cell { grid-row: span 1; inline-size: auto; }
    .ac-table--stack th[scope="row"] { display: block; text-align: start; }
    .ac-table--stack tfoot tr { border-block-start: var(--aldelo-border-width-emphasis) solid var(--aldelo-color-border-strong); }
    .ac-table--stack tfoot td { border: 0; }
    .ac-table--stack tbody tr { position: relative; }
    .ac-table--stack .ac-actions-cell { position: absolute; inset-block-start: var(--aldelo-space-250); inset-inline-end: var(--aldelo-space-300); inline-size: auto; }
    .ac-table--stack tbody th[scope="row"] { padding-inline-end: var(--aldelo-space-1000); }
    .ac-table--stack tfoot td:empty { display: none; }
  }
  .ac-sort { display: inline-flex; align-items: center; gap: var(--aldelo-space-100); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
  .ac-sort:hover { color: var(--aldelo-color-text-strong); }
  .ac-sort::after { content: "↕"; font-size: 10px; opacity: .5; }
  [aria-sort="ascending"] .ac-sort::after { content: "↑"; opacity: 1; }
  [aria-sort="descending"] .ac-sort::after { content: "↓"; opacity: 1; }
  .ac-table tbody th { font-weight: var(--aldelo-font-weight-regular); }
  .ac-cell-primary { color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }
  .ac-cell-secondary { display: block; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }

  .ac-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aldelo-space-200); padding: var(--aldelo-space-300) var(--aldelo-space-400); border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-toolbar__grow { flex: 1 1 220px; min-inline-size: 0; }
  .ac-toolbar .ac-chip { min-block-size: var(--aldelo-size-control); padding-inline-start: var(--aldelo-space-300); border-color: var(--aldelo-color-control-border); }
  @media (max-width: 560px) { .ac-toolbar > :not(.ac-badge) { flex: 1 1 100%; max-inline-size: none !important; } .ac-toolbar > .ac-button { justify-content: flex-start; } }
  .ac-bulk-bar { display: flex; align-items: center; gap: var(--aldelo-space-300); padding: var(--aldelo-space-200) var(--aldelo-space-400); background: var(--aldelo-color-action-soft); color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }

  .ac-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--aldelo-space-300); padding: var(--aldelo-space-300) var(--aldelo-space-400); border-block-start: var(--aldelo-border-width) solid var(--aldelo-color-border); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }

  /* Description list (detail pages) ------------------------------------ */
  .ac-dl { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--aldelo-space-250) var(--aldelo-space-600); margin: 0; }
  .ac-dl dt { color: var(--aldelo-color-text-muted); }
  .ac-dl dd { margin: 0; color: var(--aldelo-color-text-strong); overflow-wrap: anywhere; }
  @media (max-width: 560px) { .ac-dl { grid-template-columns: minmax(0, 1fr); gap: var(--aldelo-space-050); } .ac-dl dd { margin-block-end: var(--aldelo-space-250); } }

  /* Overlays: dialog, drawer, menu, tooltip ---------------------------- */
  .ac-dialog {
    inline-size: min(var(--aldelo-size-dialog-medium), calc(100vw - 32px));
    max-block-size: min(88dvh, 900px);
    padding: 0;
    border: var(--aldelo-border-width) solid var(--aldelo-component-overlay-border);
    border-radius: var(--aldelo-component-overlay-radius);
    background: var(--aldelo-component-overlay-background);
    color: var(--aldelo-color-text);
    box-shadow: var(--aldelo-component-overlay-shadow);
    overflow: hidden;
  }
  .ac-dialog--small { inline-size: min(var(--aldelo-size-dialog-small), calc(100vw - 32px)); }
  .ac-dialog--large { inline-size: min(var(--aldelo-size-dialog-large), calc(100vw - 32px)); }
  .ac-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: ac-overlay-in var(--aldelo-motion-overlay) var(--aldelo-ease-entrance); }
  .ac-dialog::backdrop { background: var(--aldelo-component-overlay-scrim); animation: ac-fade-in var(--aldelo-motion-overlay) var(--aldelo-ease-standard); }
  .ac-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--aldelo-space-300); padding: var(--aldelo-space-500) var(--aldelo-space-500) var(--aldelo-space-200); }
  .ac-dialog__title { font-size: var(--aldelo-font-size-heading-small); }
  .ac-dialog__body { padding: var(--aldelo-space-200) var(--aldelo-space-500) var(--aldelo-space-500); overflow-y: auto; display: grid; gap: var(--aldelo-space-300); align-content: start; }
  .ac-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--aldelo-space-200); padding: var(--aldelo-space-300) var(--aldelo-space-500); border-block-start: var(--aldelo-border-width) solid var(--aldelo-color-border); background: var(--aldelo-color-surface-muted); }

  .ac-drawer {
    margin: 0 0 0 auto;
    inline-size: min(var(--aldelo-size-drawer), 100vw);
    max-inline-size: 100vw;
    block-size: 100dvh;
    max-block-size: 100dvh;
    padding: 0;
    border: 0;
    border-inline-start: var(--aldelo-border-width) solid var(--aldelo-component-overlay-border);
    background: var(--aldelo-component-overlay-background);
    color: var(--aldelo-color-text);
    box-shadow: var(--aldelo-component-overlay-shadow);
  }
  [dir="rtl"] .ac-drawer { margin: 0 auto 0 0; }
  .ac-drawer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: ac-drawer-in var(--aldelo-motion-overlay) var(--aldelo-ease-entrance); }
  .ac-drawer::backdrop { background: var(--aldelo-component-overlay-scrim); }

  .ac-menu {
    min-inline-size: 200px;
    padding: var(--aldelo-space-100);
    border: var(--aldelo-border-width) solid var(--aldelo-component-overlay-border);
    border-radius: var(--aldelo-radius-md);
    background: var(--aldelo-component-overlay-background);
    box-shadow: var(--aldelo-component-overlay-shadow);
    z-index: var(--aldelo-z-dropdown);
  }
  /* Popovers render in the top layer; behaviors.js positions them against their trigger. */
  :is(.ac-menu, .ac-popover)[popover] { position: fixed; inset: auto; margin: 0; color: var(--aldelo-color-text); overflow: auto; max-block-size: min(70dvh, 560px); }
  :is(.ac-menu, .ac-popover)[popover]:popover-open { animation: ac-pop-in var(--aldelo-motion-hover) var(--aldelo-ease-entrance); }
  .ac-menu__item { display: flex; align-items: center; gap: var(--aldelo-space-250); inline-size: 100%; min-block-size: 34px; padding-inline: var(--aldelo-space-250); border: 0; border-radius: var(--aldelo-radius-control); background: none; color: var(--aldelo-color-text); text-align: start; text-decoration: none; cursor: pointer; }
  .ac-menu__item:is(:hover, :focus-visible) { background: var(--aldelo-color-surface-hover); outline: none; }
  .ac-menu__item--danger { color: var(--aldelo-color-danger); }
  .ac-menu__separator { block-size: 1px; margin: var(--aldelo-space-100) calc(-1 * var(--aldelo-space-100)); background: var(--aldelo-color-border); }
  .ac-menu__label { padding: var(--aldelo-space-150) var(--aldelo-space-250) var(--aldelo-space-100); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }

  .ac-tooltip { max-inline-size: 280px; padding: var(--aldelo-space-150) var(--aldelo-space-250); border-radius: var(--aldelo-radius-control); background: var(--aldelo-component-tooltip-background); color: var(--aldelo-component-tooltip-foreground); font-size: var(--aldelo-font-size-label); z-index: var(--aldelo-z-tooltip); box-shadow: var(--aldelo-shadow-control); }

  /* Command palette ---------------------------------------------------- */
  .ac-command { inline-size: min(640px, calc(100vw - 32px)); max-block-size: min(640px, calc(100dvh - 20vh)); margin-block-start: 10vh; }
  .ac-command[open] { display: flex; flex-direction: column; }
  .ac-command .ac-input { border: 0; border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border); border-radius: 0; min-block-size: 52px; font-size: var(--aldelo-font-size-body-large); box-shadow: none; }
  .ac-command__list { flex: 1 1 auto; min-block-size: 0; max-block-size: min(480px, 60dvh); overflow-y: auto; overscroll-behavior: contain; padding: var(--aldelo-space-100) var(--aldelo-space-100) var(--aldelo-space-200); scroll-padding-block: 32px 8px; }
  .ac-command__group + .ac-command__group { margin-block-start: var(--aldelo-space-150); }
  .ac-command__heading { position: sticky; inset-block-start: calc(-1 * var(--aldelo-space-100)); z-index: 1; padding: var(--aldelo-space-200) var(--aldelo-space-250) var(--aldelo-space-100); background: var(--aldelo-component-overlay-background); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); font-weight: var(--aldelo-font-weight-medium); letter-spacing: .02em; }
  .ac-command__item { min-block-size: 40px; cursor: pointer; }
  .ac-command .ac-input { padding-inline-end: 64px; }
  .ac-command .ac-input::-webkit-search-cancel-button { display: none; }
  .ac-command__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ac-command__meta { flex: none; margin-inline-start: auto; padding-inline-start: var(--aldelo-space-300); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-command__empty { padding: var(--aldelo-space-600) var(--aldelo-space-400); color: var(--aldelo-color-text-muted); text-align: center; }
  .ac-command__footer { display: flex; flex-wrap: wrap; gap: var(--aldelo-space-400); padding: var(--aldelo-space-200) var(--aldelo-space-400); border-block-start: var(--aldelo-border-width) solid var(--aldelo-color-border); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-command__footer .ac-kbd { margin-inline-end: 2px; }
  @media (max-width: 560px) { .ac-command { margin-block-start: 8px; max-block-size: calc(100dvh - 16px); } .ac-command__list { max-block-size: none; } .ac-command__footer { display: none; } }
  .ac-command__item[aria-selected="true"] { background: var(--aldelo-color-action-soft); }

  /* Toasts ------------------------------------------------------------- */
  .ac-toast-region { position: fixed; inset-block-end: var(--aldelo-space-500); inset-inline-end: var(--aldelo-space-500); z-index: var(--aldelo-z-toast); display: grid; gap: var(--aldelo-space-200); inline-size: min(380px, calc(100vw - 32px)); }
  .ac-toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--aldelo-space-300); align-items: start; padding: var(--aldelo-space-300) var(--aldelo-space-400); border: var(--aldelo-border-width) solid var(--aldelo-component-overlay-border); border-radius: var(--aldelo-radius-md); background: var(--aldelo-component-overlay-background); box-shadow: var(--aldelo-component-overlay-shadow); animation: ac-toast-in var(--aldelo-motion-overlay) var(--aldelo-ease-entrance); }
  .ac-toast__icon { inline-size: 18px; block-size: 18px; margin-block-start: 1px; color: var(--aldelo-color-info); }
  .ac-toast--success .ac-toast__icon { color: var(--aldelo-color-success); }
  .ac-toast--danger .ac-toast__icon { color: var(--aldelo-color-danger); }
  .ac-toast__title { font-weight: var(--aldelo-font-weight-medium); color: var(--aldelo-color-text-strong); }
  .ac-toast__body { color: var(--aldelo-color-text-muted); }
  .ac-toast__actions { display: flex; align-items: center; gap: var(--aldelo-space-100); }
  .ac-toast--warning .ac-toast__icon { color: var(--aldelo-color-warning); }
  .ac-toast.is-leaving { opacity: 0; transform: translateY(4px); transition: opacity 150ms var(--aldelo-ease-exit), transform 150ms var(--aldelo-ease-exit); }
  @media (max-width: 560px) { .ac-toast-region { inset-inline: var(--aldelo-space-400); inset-block-end: var(--aldelo-space-400); inline-size: auto; } }

  /* Loading, empty, error states --------------------------------------- */
  .ac-skeleton { display: block; flex: none; block-size: var(--ac-h, 12px); inline-size: var(--ac-w, 100%); border-radius: var(--aldelo-radius-sm); background: var(--aldelo-component-skeleton-background); animation: ac-pulse 1.4s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .ac-skeleton { animation: none; } }

  .ac-empty { display: grid; justify-items: center; gap: var(--aldelo-space-300); padding: var(--aldelo-space-1200) var(--aldelo-space-600); text-align: center; }
  .ac-empty__icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: var(--aldelo-radius-xl); background: var(--aldelo-color-surface-muted); color: var(--aldelo-color-text-muted); }
  .ac-empty__title { font-size: var(--aldelo-font-size-heading-small); color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }
  .ac-empty__body { max-inline-size: 46ch; color: var(--aldelo-color-text-muted); }

  .ac-status-page { display: grid; place-items: center; min-block-size: 70dvh; padding: var(--aldelo-space-800) var(--aldelo-space-400); text-align: center; }
  .ac-status-page__code { color: var(--aldelo-color-text-muted); font-family: var(--aldelo-font-family-mono); font-size: var(--aldelo-font-size-label); }

  .ac-freshness { display: inline-flex; align-items: center; gap: var(--aldelo-space-150); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-freshness::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--aldelo-color-success); }
  .ac-freshness[data-state="stale"]::before { background: var(--aldelo-color-warning); }
  .ac-freshness[data-state="unavailable"]::before { background: var(--aldelo-color-danger); }

  mark, .ac-mark { background: var(--aldelo-color-mark); color: var(--aldelo-color-text); border-radius: 2px; padding-inline: 1px; }

  /* Stepper ------------------------------------------------------------ */
  .ac-steps { display: flex; gap: var(--aldelo-space-200); margin: 0; padding: 0; list-style: none; counter-reset: step; }
  .ac-steps li { flex: 1; display: grid; gap: var(--aldelo-space-150); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); counter-increment: step; }
  .ac-steps li::before { content: ""; block-size: 3px; border-radius: var(--aldelo-radius-full); background: var(--aldelo-color-data-track); }
  .ac-steps li[data-state="complete"]::before, .ac-steps li[aria-current="step"]::before { background: var(--aldelo-color-action); }
  .ac-steps li[aria-current="step"] { color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }

  /* Authentication layout --------------------------------------------- */
  .ac-auth { display: grid; grid-template-columns: minmax(0, 1fr); min-block-size: 100dvh; background: var(--aldelo-color-background); }
  .ac-auth__main { display: grid; grid-template-rows: auto 1fr auto; gap: var(--aldelo-space-600); padding: var(--aldelo-space-600) var(--aldelo-space-400); }
  .ac-auth__panel { align-self: center; justify-self: center; inline-size: min(var(--aldelo-size-auth-panel), 100%); display: grid; gap: var(--aldelo-space-600); }
  .ac-auth__heading { display: grid; gap: var(--aldelo-space-200); }
  .ac-auth__heading h1 { font-size: var(--aldelo-font-size-metric); line-height: var(--aldelo-line-height-display); letter-spacing: var(--aldelo-letter-spacing-display); }
  .ac-auth__heading p { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-body-large); }
  .ac-auth__footer { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--aldelo-space-400); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  .ac-auth__footer a { color: inherit; }
  .ac-auth__aside { display: none; }
  @media (min-width: 1024px) {
    .ac-auth--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ac-auth--split .ac-auth__aside {
      order: -1;
      display: grid;
      align-content: end;
      gap: var(--aldelo-space-400);
      margin: var(--aldelo-space-300);
      padding: var(--aldelo-space-1200);
      border-radius: var(--aldelo-radius-shell);
      background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--aldelo-color-data-2) 30%, transparent), transparent 60%),
        linear-gradient(160deg, #10172b, #0b0f1c);
      color: #eef1ff;
    }
    .ac-auth--split .ac-auth__aside :is(h2, p) { color: inherit; }
  }

  /* Keyframes ---------------------------------------------------------- */
  @keyframes ac-fade-in { from { opacity: 0; } }
  @keyframes ac-overlay-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
  @keyframes ac-drawer-in { from { transform: translateX(24px); opacity: 0; } }
  @keyframes ac-toast-in { from { transform: translateY(8px); opacity: 0; } }
  @keyframes ac-pulse { 50% { opacity: .55; } }
  @keyframes ac-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

  /* Windows High Contrast / forced colors ------------------------------ */
  @media (forced-colors: active) {
    .ac-button, .ac-input, .ac-select, .ac-textarea, .ac-panel, .ac-kpi, .ac-badge, .ac-alert, .ac-dialog, .ac-menu, .ac-toast { border: 1px solid CanvasText; }
    .ac-nav-item[aria-current="page"] { outline: 2px solid Highlight; }
    .ac-nav-item[aria-current="page"]::before, .ac-tab[aria-selected="true"]::after { background: Highlight; }
    .ac-switch input { border: 1px solid CanvasText; }
    .ac-skeleton { background: GrayText; }
  }

  /* Print (reports) ---------------------------------------------------- */
  @media print {
    .ac-topbar, .ac-sidebar, .ac-toolbar, .ac-pagination, .ac-page-header__actions, .ac-toast-region, .ac-nav-toggle, .ac-no-print { display: none !important; }
    .ac-app { display: block; }
    .ac-panel, .ac-kpi { box-shadow: none; break-inside: avoid; }
    .ac-table thead { display: table-header-group; }
    .ac-table tr { break-inside: avoid; }
    body { background: #fff; color: #000; }
  }
}

/* ----------------------------------------------------------- utilities */
@layer aldelo.utilities {
  .ac-sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .ac-muted { color: var(--aldelo-color-text-muted); }
  .ac-strong { color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }
  .ac-mono { font-family: var(--aldelo-font-family-mono); }
  .ac-tabular { font-variant-numeric: tabular-nums; }
  .ac-caption { font-size: var(--aldelo-font-size-caption); }
  .ac-label-text { font-size: var(--aldelo-font-size-label); }
  .ac-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (min-width: 861px) { .ac-nav-toggle { display: none; } }
  @media (max-width: 860px) { .ac-hide-narrow { display: none; } }
  .ac-show-mobile { display: none; }
  @media (max-width: 560px) {
    .ac-show-mobile { display: revert; }
    .ac-hide-mobile { display: none; }
    .ac-topbar { gap: var(--aldelo-space-100); padding-inline: var(--aldelo-space-300); }
  }
}

/* ======================================================================
 * v1.2.0 patterns: popover panels, submenus, navigation tree, notifications,
 * tabs variants, AI, chat, timeline, charts, accordion, calendar, dialogs.
 * ==================================================================== */
@layer aldelo.components {
  /* Auth split: hero on the start (left) side, brand moves into the hero. */
  .ac-auth__top { display: flex; align-items: center; justify-content: space-between; gap: var(--aldelo-space-400); min-block-size: 36px; }
  .ac-auth__top-link { margin-inline-start: auto; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  .ac-auth__main:has(.ac-auth__lockup) .ac-auth__top > .ac-brand { display: none; }
  @media (min-width: 1024px) {
    .ac-auth--split .ac-auth__aside { align-content: space-between; }
    .ac-auth--split .ac-auth__top > .ac-brand { display: none; }
    .ac-auth__aside .ac-brand { color: inherit; }
  }
  .ac-auth__back { display: inline-flex; align-items: center; gap: var(--aldelo-space-150); justify-self: start; color: var(--aldelo-color-text-muted); font-weight: var(--aldelo-font-weight-medium); text-decoration: none; }
  .ac-auth__back:hover { color: var(--aldelo-color-text-strong); }

  /* Generic popover panel (notifications, date picker, filters) ---------- */
  .ac-popover {
    inline-size: min(var(--ac-popover-width, 360px), calc(100vw - 16px));
    padding: 0;
    border: var(--aldelo-border-width) solid var(--aldelo-component-overlay-border);
    border-radius: var(--aldelo-radius-xl);
    background: var(--aldelo-component-overlay-background);
    box-shadow: var(--aldelo-component-overlay-shadow);
    z-index: var(--aldelo-z-dropdown);
  }
  .ac-popover__header { display: flex; align-items: center; justify-content: space-between; gap: var(--aldelo-space-200); padding: var(--aldelo-space-300) var(--aldelo-space-400); border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-popover__title { font-size: var(--aldelo-font-size-body-large); font-weight: var(--aldelo-font-weight-medium); color: var(--aldelo-color-text-strong); }
  .ac-popover__body { padding: var(--aldelo-space-300) var(--aldelo-space-400); display: grid; gap: var(--aldelo-space-300); }
  .ac-popover__footer { display: flex; justify-content: flex-end; gap: var(--aldelo-space-200); padding: var(--aldelo-space-250) var(--aldelo-space-400); border-block-start: var(--aldelo-border-width) solid var(--aldelo-color-border); background: var(--aldelo-color-surface-muted); }

  /* Menu details: submenus, checks, shortcuts, descriptions ------------- */
  .ac-menu__item[data-ac-submenu]::after { content: ""; margin-inline-start: auto; inline-size: 6px; block-size: 6px; border-block-start: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
  [dir="rtl"] .ac-menu__item[data-ac-submenu]::after { transform: rotate(-135deg); }
  .ac-menu__item[aria-expanded="true"] { background: var(--aldelo-color-surface-hover); }
  .ac-menu__item[role="menuitemradio"], .ac-menu__item[role="menuitemcheckbox"] { padding-inline-start: var(--aldelo-space-800); position: relative; }
  .ac-menu__item[aria-checked="true"]::before { content: ""; position: absolute; inset-inline-start: 12px; inline-size: 5px; block-size: 9px; border-block-end: 2px solid var(--aldelo-color-action); border-inline-end: 2px solid var(--aldelo-color-action); transform: rotate(45deg) translate(-1px, -1px); }
  .ac-menu__shortcut { margin-inline-start: auto; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); font-family: var(--aldelo-font-family-mono); }
  .ac-menu__item svg { inline-size: var(--aldelo-size-icon); block-size: var(--aldelo-size-icon); flex: none; color: var(--aldelo-color-text-muted); }
  .ac-menu__item--danger svg { color: currentColor; }
  .ac-menu__text { display: grid; gap: 1px; }
  .ac-menu__description { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-menu__item[aria-disabled="true"] { opacity: var(--aldelo-opacity-disabled); cursor: not-allowed; }

  /* Navigation tree (sidebar submenus) ---------------------------------- */
  button.ac-nav-item { inline-size: calc(100% - var(--aldelo-space-100)); border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
  .ac-nav-item[aria-expanded]::after { content: ""; margin-inline-start: auto; inline-size: 6px; block-size: 6px; border-block-end: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; transition: transform var(--aldelo-motion-spatial) var(--aldelo-ease-standard); }
  .ac-nav-item[aria-expanded="false"]::after { transform: rotate(-45deg); }
  [dir="rtl"] .ac-nav-item[aria-expanded="false"]::after { transform: rotate(135deg); }
  .ac-nav-item[data-contains-current="true"] { color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }
  .ac-nav-item[data-contains-current="true"] .ac-nav-item__icon { color: var(--aldelo-color-action); }
  .ac-nav-sub { display: grid; gap: var(--aldelo-space-050); margin-inline-start: 23px; padding-inline-start: var(--aldelo-space-200); border-inline-start: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-nav-sub .ac-nav-item { min-block-size: 32px; margin-inline-start: 0; padding-inline-start: var(--aldelo-space-250); font-size: var(--aldelo-font-size-body); }
  .ac-nav-sub .ac-nav-item[aria-current="page"]::before { inset-inline-start: calc(-1 * var(--aldelo-space-200) - 1px); inset-block: 7px; }
  .ac-app[data-sidebar="collapsed"] .ac-nav-sub { display: none; }

  /* Count bubble on icon buttons ---------------------------------------- */
  .ac-count { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; display: grid; place-items: center; min-inline-size: 16px; block-size: 16px; padding-inline: 4px; border-radius: var(--aldelo-radius-full); background: var(--aldelo-color-danger); color: var(--aldelo-color-on-danger); font-size: 10px; font-weight: var(--aldelo-font-weight-strong); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--aldelo-color-surface); }

  /* Notifications panel -------------------------------------------------- */
  .ac-notifications { --ac-popover-width: 400px; }
  .ac-notifications__list { list-style: none; margin: 0; padding: var(--aldelo-space-100); display: grid; max-block-size: 420px; overflow-y: auto; }
  .ac-notification { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--aldelo-space-300); padding: var(--aldelo-space-300); border-radius: var(--aldelo-radius-md); color: inherit; text-decoration: none; }
  .ac-notification:hover { background: var(--aldelo-color-surface-hover); }
  .ac-notification__icon { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--_bg, var(--aldelo-color-surface-muted)); color: var(--_fg, var(--aldelo-color-text-muted)); }
  .ac-notification__icon svg { inline-size: 16px; block-size: 16px; }
  .ac-notification[data-tone="warning"] { --_bg: var(--aldelo-color-warning-soft); --_fg: var(--aldelo-color-warning); }
  .ac-notification[data-tone="danger"] { --_bg: var(--aldelo-color-danger-soft); --_fg: var(--aldelo-color-danger); }
  .ac-notification[data-tone="success"] { --_bg: var(--aldelo-color-success-soft); --_fg: var(--aldelo-color-success); }
  .ac-notification[data-tone="info"] { --_bg: var(--aldelo-color-info-soft); --_fg: var(--aldelo-color-info); }
  .ac-notification__title { color: var(--aldelo-color-text-strong); }
  .ac-notification[data-unread="true"] .ac-notification__title { font-weight: var(--aldelo-font-weight-medium); }
  .ac-notification[data-unread="true"]::after { content: ""; position: absolute; inset-inline-end: 12px; inset-block-start: 18px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--aldelo-color-action); }
  .ac-notification__meta { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-notifications__group { padding: var(--aldelo-space-200) var(--aldelo-space-300) var(--aldelo-space-100); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); font-weight: var(--aldelo-font-weight-medium); }

  /* Tabs variants & panels ---------------------------------------------- */
  .ac-tabs--pill { gap: var(--aldelo-space-100); border: 0; }
  .ac-tabs--pill .ac-tab { min-block-size: 32px; border-radius: var(--aldelo-radius-control); }
  .ac-tabs--pill .ac-tab:hover { background: var(--aldelo-color-surface-hover); }
  .ac-tabs--pill .ac-tab[aria-selected="true"] { background: var(--aldelo-color-action-soft); color: var(--aldelo-color-text-strong); }
  .ac-tabs--pill .ac-tab[aria-selected="true"]::after { display: none; }
  .ac-tabs--vertical { flex-direction: column; border: 0; border-inline-start: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-tabs--vertical .ac-tab { justify-content: flex-start; }
  .ac-tabs--vertical .ac-tab[aria-selected="true"]::after { inset: 6px auto 6px -1px; inline-size: 2px; block-size: auto; border-radius: 2px; }
  .ac-tab__count { padding: 0 6px; border-radius: var(--aldelo-radius-full); background: var(--aldelo-color-surface-muted); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-tabpanel { padding-block-start: var(--aldelo-space-400); }
  .ac-tabpanel:focus-visible { outline-offset: 4px; }
  .ac-segmented--block { display: flex; inline-size: 100%; }
  .ac-segmented--block button { flex: 1; }
  .ac-segmented button svg { inline-size: 14px; block-size: 14px; }
  .ac-segmented button { display: inline-flex; align-items: center; justify-content: center; gap: var(--aldelo-space-150); }

  /* AI identity ---------------------------------------------------------- */
  /* The sparkle and AI surfaces are the only product surfaces allowed the brand gradient. */
  .ac-sparkle {
    display: inline-block;
    flex: none;
    inline-size: var(--ac-size, 16px);
    block-size: var(--ac-size, 16px);
    background: linear-gradient(135deg, var(--aldelo-component-ai-accent-start), var(--aldelo-component-ai-accent-end));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.5 4.8 2.7 8 7.5 9.3.6.2.6.9 0 1-4.8 1.4-7 4.6-7.5 9.4-.1.7-.9.7-1 0-.5-4.8-2.7-8-7.5-9.4-.6-.1-.6-.8 0-1C8.3 9.5 10.5 6.3 11 1.5c.1-.7.9-.7 1 0Z'/%3E%3Cpath d='M19.5 1c.2 1.6.9 2.5 2.3 2.9.3.1.3.4 0 .5-1.4.4-2.1 1.3-2.3 2.9 0 .3-.4.3-.5 0-.2-1.6-.9-2.5-2.3-2.9-.3-.1-.3-.4 0-.5 1.4-.4 2.1-1.3 2.3-2.9.1-.3.5-.3.5 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.5 4.8 2.7 8 7.5 9.3.6.2.6.9 0 1-4.8 1.4-7 4.6-7.5 9.4-.1.7-.9.7-1 0-.5-4.8-2.7-8-7.5-9.4-.6-.1-.6-.8 0-1C8.3 9.5 10.5 6.3 11 1.5c.1-.7.9-.7 1 0Z'/%3E%3Cpath d='M19.5 1c.2 1.6.9 2.5 2.3 2.9.3.1.3.4 0 .5-1.4.4-2.1 1.3-2.3 2.9 0 .3-.4.3-.5 0-.2-1.6-.9-2.5-2.3-2.9-.3-.1-.3-.4 0-.5 1.4-.4 2.1-1.3 2.3-2.9.1-.3.5-.3.5 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .ac-ai-badge { display: inline-flex; align-items: center; gap: var(--aldelo-space-100); padding: 2px var(--aldelo-space-200) 2px var(--aldelo-space-150); border-radius: var(--aldelo-radius-full); background: var(--aldelo-component-ai-surface); color: var(--aldelo-component-ai-foreground); font-size: var(--aldelo-font-size-caption); font-weight: var(--aldelo-font-weight-medium); }
  .ac-ai-badge .ac-sparkle { --ac-size: 12px; }
  .ac-button--ai .ac-sparkle { --ac-size: 16px; }
  .ac-button--ai:hover { border-color: color-mix(in srgb, var(--aldelo-component-ai-accent-end) 55%, var(--aldelo-color-control-border)); }

  .ac-ai-composer {
    display: grid;
    gap: var(--aldelo-space-200);
    padding: var(--aldelo-space-300);
    border: var(--aldelo-border-width) solid var(--aldelo-color-control-border);
    border-radius: var(--aldelo-radius-xl);
    background: var(--aldelo-color-surface);
    box-shadow: var(--aldelo-shadow-panel);
    transition: border-color var(--aldelo-motion-hover) var(--aldelo-ease-standard), box-shadow var(--aldelo-motion-hover) var(--aldelo-ease-standard);
  }
  .ac-ai-composer:focus-within {
    border-color: transparent;
    background:
      linear-gradient(var(--aldelo-color-surface), var(--aldelo-color-surface)) padding-box,
      linear-gradient(135deg, var(--aldelo-component-ai-accent-start), var(--aldelo-component-ai-accent-end)) border-box;
    box-shadow: 0 0 0 4px var(--aldelo-component-ai-surface), var(--aldelo-shadow-panel);
  }
  .ac-ai-composer__row { display: flex; align-items: flex-start; gap: var(--aldelo-space-250); }
  .ac-ai-composer__row > .ac-sparkle { --ac-size: 20px; margin-block-start: 8px; }
  .ac-ai-composer textarea {
    flex: 1;
    min-block-size: 40px;
    max-block-size: 200px;
    padding: var(--aldelo-space-200) 0;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--aldelo-color-text);
    font-size: var(--aldelo-font-size-body-large);
    line-height: var(--aldelo-line-height-body);
    field-sizing: content;
  }
  .ac-ai-composer textarea::placeholder { color: var(--aldelo-color-text-muted); }
  .ac-ai-composer__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aldelo-space-200); }
  .ac-ai-composer__hint { margin-inline-start: auto; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-send { inline-size: 34px; min-block-size: 34px; padding: 0; border-radius: var(--aldelo-radius-md); }
  @media (pointer: coarse) { .ac-ai-composer textarea { font-size: var(--aldelo-font-size-input-touch); } }

  .ac-suggestions { display: flex; flex-wrap: wrap; gap: var(--aldelo-space-200); }
  .ac-suggestion { display: inline-flex; align-items: center; gap: var(--aldelo-space-150); min-block-size: var(--aldelo-size-control-small); padding-inline: var(--aldelo-space-300); border: var(--aldelo-border-width) solid var(--aldelo-color-border-strong); border-radius: var(--aldelo-radius-full); background: var(--aldelo-color-surface); color: var(--aldelo-color-text); font-size: var(--aldelo-font-size-label); cursor: pointer; transition: border-color var(--aldelo-motion-hover) var(--aldelo-ease-standard), background-color var(--aldelo-motion-hover) var(--aldelo-ease-standard); }
  .ac-suggestion:hover { border-color: var(--aldelo-component-ai-accent-end); background: var(--aldelo-component-ai-surface); }

  .ac-ai-answer { display: grid; gap: var(--aldelo-space-300); padding: var(--aldelo-space-400); border: var(--aldelo-border-width) solid var(--aldelo-color-border); border-radius: var(--aldelo-radius-xl); background: var(--aldelo-color-surface); }
  .ac-ai-answer__header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aldelo-space-200); }
  .ac-ai-answer__body { display: grid; gap: var(--aldelo-space-200); font-size: var(--aldelo-font-size-body-large); line-height: 1.55; }
  .ac-ai-answer__body ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: var(--aldelo-space-100); }
  .ac-ai-answer__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aldelo-space-200); padding-block-start: var(--aldelo-space-200); border-block-start: var(--aldelo-border-width) solid var(--aldelo-color-border); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-source { display: inline-flex; align-items: center; gap: var(--aldelo-space-100); min-block-size: 24px; padding-inline: var(--aldelo-space-200); border-radius: var(--aldelo-radius-sm); background: var(--aldelo-color-surface-muted); color: var(--aldelo-color-text); font-size: var(--aldelo-font-size-caption); text-decoration: none; }
  .ac-source:hover { background: var(--aldelo-color-surface-hover); text-decoration: underline; }
  .ac-source__index { display: grid; place-items: center; inline-size: 16px; block-size: 16px; border-radius: 4px; background: var(--aldelo-component-ai-surface); color: var(--aldelo-component-ai-foreground); font-size: var(--aldelo-font-size-caption); font-weight: var(--aldelo-font-weight-strong); }
  .ac-ai-thinking { display: inline-flex; align-items: center; gap: var(--aldelo-space-200); color: var(--aldelo-color-text-muted); }
  .ac-ai-thinking .ac-sparkle { animation: ac-sparkle-spin 1.6s var(--aldelo-ease-standard) infinite; }
  @keyframes ac-sparkle-spin { 50% { transform: rotate(90deg) scale(.85); } }
  @media (prefers-reduced-motion: reduce) { .ac-ai-thinking .ac-sparkle { animation: none; } }

  /* Chat ------------------------------------------------------------------ */
  .ac-chat { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-block-size: calc(100dvh - var(--aldelo-size-topbar)); }
  .ac-chat__sidebar { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--aldelo-space-300); padding: var(--aldelo-space-400) var(--aldelo-space-300); border-inline-end: var(--aldelo-border-width) solid var(--aldelo-color-border); background: var(--aldelo-color-background); }
  .ac-chat__history { display: grid; gap: var(--aldelo-space-050); align-content: start; overflow-y: auto; }
  .ac-chat__history-label { padding: var(--aldelo-space-200) var(--aldelo-space-200) var(--aldelo-space-100); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); font-weight: var(--aldelo-font-weight-medium); }
  .ac-chat__history a { display: block; padding: var(--aldelo-space-200); border-radius: var(--aldelo-radius-control); color: var(--aldelo-color-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ac-chat__history a:hover { background: var(--aldelo-color-surface-hover); }
  .ac-chat__history a[aria-current="page"] { background: var(--aldelo-color-action-soft); color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }
  .ac-chat__thread { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-inline-size: 0; }
  .ac-chat__header { display: flex; align-items: center; gap: var(--aldelo-space-300); padding: var(--aldelo-space-300) var(--aldelo-space-600); border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-chat__messages { overflow-y: auto; padding: var(--aldelo-space-600); display: grid; align-content: start; gap: var(--aldelo-space-600); }
  .ac-chat__messages > * { inline-size: 100%; max-inline-size: 760px; margin-inline: auto; }
  .ac-chat__composer { padding: var(--aldelo-space-300) var(--aldelo-space-600) var(--aldelo-space-500); }
  .ac-chat__composer > * { max-inline-size: 760px; margin-inline: auto; }
  .ac-chat__disclaimer { margin-block-start: var(--aldelo-space-200); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); text-align: center; }
  .ac-message { display: grid; gap: var(--aldelo-space-200); }
  .ac-message--user { justify-items: end; }
  .ac-message--user .ac-message__bubble { max-inline-size: 80%; padding: var(--aldelo-space-250) var(--aldelo-space-400); border-radius: var(--aldelo-radius-xl) var(--aldelo-radius-xl) var(--aldelo-radius-sm) var(--aldelo-radius-xl); background: var(--aldelo-component-chat-user-bubble); color: var(--aldelo-component-chat-user-foreground); font-size: var(--aldelo-font-size-body-large); white-space: pre-wrap; }
  .ac-message--assistant { grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--aldelo-space-300); }
  .ac-message__avatar { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--aldelo-component-ai-surface); }
  .ac-message__avatar .ac-sparkle { --ac-size: 14px; }
  .ac-message__content { display: grid; gap: var(--aldelo-space-300); font-size: var(--aldelo-font-size-body-large); line-height: 1.6; min-inline-size: 0; }
  .ac-message__content p + p { margin-block-start: 0; }
  .ac-message__content .ac-table-wrap { border: var(--aldelo-border-width) solid var(--aldelo-color-border); border-radius: var(--aldelo-radius-md); font-size: var(--aldelo-font-size-body); }
  .ac-message__actions { display: flex; gap: var(--aldelo-space-050); color: var(--aldelo-color-text-muted); }
  .ac-message__meta { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-typing { display: inline-flex; gap: 4px; padding-block: var(--aldelo-space-200); }
  .ac-typing span { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--aldelo-color-text-muted); animation: ac-typing 1.2s infinite ease-in-out; }
  .ac-typing span:nth-child(2) { animation-delay: .15s; }
  .ac-typing span:nth-child(3) { animation-delay: .3s; }
  @keyframes ac-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
  @media (prefers-reduced-motion: reduce) { .ac-typing span { animation: none; opacity: .6; } }
  @media (max-width: 860px) {
    .ac-chat { grid-template-columns: minmax(0, 1fr); }
    .ac-chat__sidebar { display: none; }
    .ac-chat__messages, .ac-chat__header, .ac-chat__composer { padding-inline: var(--aldelo-density-mobile-content-inline); }
  }
  .ac-drawer .ac-chat__thread { block-size: 100%; }
  .ac-drawer .ac-chat__messages { padding: var(--aldelo-space-400); gap: var(--aldelo-space-500); }
  .ac-drawer .ac-chat__composer { padding: var(--aldelo-space-300) var(--aldelo-space-400) var(--aldelo-space-400); }
  .ac-drawer .ac-chat__header { padding: var(--aldelo-space-300) var(--aldelo-space-400); }

  /* Drawer anatomy ------------------------------------------------------- */
  .ac-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--aldelo-space-300); padding: var(--aldelo-space-400) var(--aldelo-space-500); border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-drawer__body { overflow-y: auto; padding: var(--aldelo-space-500); display: grid; gap: var(--aldelo-space-500); align-content: start; }
  .ac-drawer__footer { display: flex; justify-content: flex-end; gap: var(--aldelo-space-200); padding: var(--aldelo-space-300) var(--aldelo-space-500); border-block-start: var(--aldelo-border-width) solid var(--aldelo-color-border); background: var(--aldelo-color-surface-muted); }
  .ac-drawer--chat { inline-size: min(440px, 100vw); }

  /* Dialog accents -------------------------------------------------------- */
  .ac-dialog__icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--_bg, var(--aldelo-color-info-soft)); color: var(--_fg, var(--aldelo-color-info)); }
  .ac-dialog__icon svg { inline-size: 20px; block-size: 20px; }
  .ac-dialog__icon[data-tone="danger"] { --_bg: var(--aldelo-color-danger-soft); --_fg: var(--aldelo-color-danger); }
  .ac-dialog__icon[data-tone="success"] { --_bg: var(--aldelo-color-success-soft); --_fg: var(--aldelo-color-success); }
  .ac-dialog__icon[data-tone="warning"] { --_bg: var(--aldelo-color-warning-soft); --_fg: var(--aldelo-color-warning); }
  .ac-dialog--centered .ac-dialog__header { flex-direction: column; align-items: center; text-align: center; padding-block-start: var(--aldelo-space-800); }
  .ac-dialog--centered .ac-dialog__body { text-align: center; }
  .ac-dialog__description { color: var(--aldelo-color-text-muted); }

  /* Timeline -------------------------------------------------------------- */
  .ac-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
  .ac-timeline__item { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--aldelo-space-300); padding-block-end: var(--aldelo-space-500); }
  .ac-timeline__item::before { content: ""; position: absolute; inset-inline-start: 11px; inset-block: 22px 0; inline-size: 2px; background: var(--aldelo-color-border); }
  .ac-timeline__item:last-child { padding-block-end: 0; }
  .ac-timeline__item:last-child::before { display: none; }
  .ac-timeline__dot { display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--_bg, var(--aldelo-color-surface-muted)); color: var(--_fg, var(--aldelo-color-text-muted)); box-shadow: 0 0 0 3px var(--aldelo-color-surface); }
  .ac-timeline__dot svg { inline-size: 13px; block-size: 13px; }
  .ac-timeline__item[data-tone="success"] { --_bg: var(--aldelo-color-success-soft); --_fg: var(--aldelo-color-success); }
  .ac-timeline__item[data-tone="warning"] { --_bg: var(--aldelo-color-warning-soft); --_fg: var(--aldelo-color-warning); }
  .ac-timeline__item[data-tone="danger"] { --_bg: var(--aldelo-color-danger-soft); --_fg: var(--aldelo-color-danger); }
  .ac-timeline__item[data-tone="info"] { --_bg: var(--aldelo-color-info-soft); --_fg: var(--aldelo-color-info); }
  .ac-timeline__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--aldelo-space-100) var(--aldelo-space-300); }
  .ac-timeline__title { color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }
  .ac-timeline__time { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ac-timeline__body { grid-column: 2; color: var(--aldelo-color-text-muted); margin-block-start: 2px; }

  /* Charts --------------------------------------------------------------- */
  .ac-chart { display: block; inline-size: 100%; overflow: visible; }
  .ac-chart text { fill: var(--aldelo-color-text-muted); font-size: 11px; font-family: var(--aldelo-font-family-body); font-variant-numeric: tabular-nums; }
  .ac-chart .ac-chart__grid { stroke: var(--aldelo-color-border); stroke-width: 1; }
  .ac-chart .ac-chart__value { fill: var(--aldelo-color-text); font-weight: var(--aldelo-font-weight-medium); }
  .ac-chart .ac-chart__center-value { fill: var(--aldelo-color-text-strong); font-size: 22px; font-weight: var(--aldelo-font-weight-medium); letter-spacing: -.02em; }
  .ac-chart [data-series] { transition: opacity var(--aldelo-motion-hover) var(--aldelo-ease-standard); }
  .ac-chart:has([data-series]:hover) [data-series]:not(:hover) { opacity: .45; }
  .ac-legend { display: flex; flex-wrap: wrap; gap: var(--aldelo-space-200) var(--aldelo-space-400); margin: 0; padding: 0; list-style: none; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  .ac-legend li { display: inline-flex; align-items: center; gap: var(--aldelo-space-150); }
  .ac-legend__swatch { inline-size: 10px; block-size: 10px; border-radius: 3px; background: var(--c); }
  .ac-legend__line { inline-size: 14px; block-size: 3px; border-radius: 2px; background: var(--c); }
  .ac-legend__line--dashed { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
  .ac-legend--table { display: grid; gap: var(--aldelo-space-200); }
  .ac-legend--table li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--aldelo-space-250); min-block-size: 24px; color: var(--aldelo-color-text); }
  .ac-legend--table .ac-legend__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ac-legend--table .ac-legend__pct { color: var(--aldelo-color-text-muted); min-inline-size: 3.5ch; text-align: end; font-variant-numeric: tabular-nums; }
  .ac-legend--table .ac-legend__value { font-variant-numeric: tabular-nums; text-align: end; }
  /* The panel is the query container; a container can't restyle itself. */
  .ac-panel:has(> .ac-donut-layout) { container-type: inline-size; }
  .ac-donut-layout { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--aldelo-space-600); align-items: center; }
  .ac-donut-layout > figure { inline-size: 160px; }
  @container (max-width: 480px) {
    .ac-donut-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--aldelo-space-400); }
    .ac-donut-layout .ac-legend { inline-size: 100%; }
  }

  .ac-rank { display: grid; gap: var(--aldelo-space-250); margin: 0; padding: 0; list-style: none; }
  .ac-rank li { display: grid; grid-template-columns: minmax(80px, 140px) minmax(0, 1fr) auto; gap: var(--aldelo-space-250); align-items: center; }
  .ac-rank__track { block-size: 8px; border-radius: 3px; background: var(--aldelo-color-data-track); overflow: hidden; }
  .ac-rank__fill { display: block; block-size: 100%; inline-size: var(--w); border-radius: 0 3px 3px 0; background: var(--c, var(--aldelo-color-data-1)); }
  .ac-rank__value { font-variant-numeric: tabular-nums; text-align: end; min-inline-size: 6ch; }

  .ac-sparkline { display: block; inline-size: 100%; block-size: 32px; overflow: visible; }
  .ac-sparkline path { fill: none; stroke: var(--c, var(--aldelo-color-data-1)); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .ac-sparkline .ac-sparkline__area { fill: color-mix(in srgb, var(--c, var(--aldelo-color-data-1)) 12%, transparent); stroke: none; }

  .ac-meter { display: grid; gap: var(--aldelo-space-150); }
  .ac-meter__row { display: flex; justify-content: space-between; gap: var(--aldelo-space-200); font-size: var(--aldelo-font-size-label); }
  .ac-meter__track { position: relative; block-size: 8px; border-radius: var(--aldelo-radius-full); background: var(--aldelo-color-data-track); }
  .ac-meter__fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w); border-radius: inherit; background: var(--c, var(--aldelo-color-data-1)); }
  .ac-meter__target { position: absolute; inset-block: -3px; inset-inline-start: var(--t); inline-size: 2px; border-radius: 1px; background: var(--aldelo-color-text-strong); }

  .ac-heatmap { display: grid; grid-template-columns: auto repeat(var(--cols, 12), minmax(0, 1fr)); gap: 3px; font-size: var(--aldelo-font-size-caption); color: var(--aldelo-color-text-muted); }
  .ac-heatmap__cell { aspect-ratio: 1.6; min-block-size: 16px; border-radius: 3px; background: color-mix(in srgb, var(--aldelo-color-data-1) calc(var(--v, 0) * 100%), var(--aldelo-color-data-track)); }
  .ac-heatmap__label { display: flex; align-items: center; padding-inline-end: var(--aldelo-space-150); white-space: nowrap; }
  .ac-heatmap__axis { text-align: center; }
  .ac-heatmap__scale { display: flex; align-items: center; gap: var(--aldelo-space-150); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-heatmap__scale i { inline-size: 14px; block-size: 10px; border-radius: 2px; background: color-mix(in srgb, var(--aldelo-color-data-1) calc(var(--v) * 100%), var(--aldelo-color-data-track)); }

  .ac-stat-list { display: grid; margin: 0; padding: 0; list-style: none; }
  .ac-stat-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--aldelo-space-300); padding-block: var(--aldelo-space-250); border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-stat-list li:last-child { border-block-end: 0; }

  .ac-chart-tooltip { position: fixed; z-index: var(--aldelo-z-tooltip); pointer-events: none; min-inline-size: 140px; padding: var(--aldelo-space-200) var(--aldelo-space-300); border: var(--aldelo-border-width) solid var(--aldelo-component-overlay-border); border-radius: var(--aldelo-radius-md); background: var(--aldelo-component-overlay-background); box-shadow: var(--aldelo-shadow-control); font-size: var(--aldelo-font-size-label); }
  .ac-chart-tooltip__title { margin-block-end: var(--aldelo-space-100); color: var(--aldelo-color-text-muted); }
  .ac-chart-tooltip__row { display: flex; align-items: center; justify-content: space-between; gap: var(--aldelo-space-300); font-variant-numeric: tabular-nums; }

  /* Accordion ------------------------------------------------------------ */
  .ac-accordion { border: var(--aldelo-border-width) solid var(--aldelo-color-border); border-radius: var(--aldelo-radius-md); background: var(--aldelo-color-surface); overflow: hidden; }
  .ac-accordion details + details { border-block-start: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--aldelo-space-300); min-block-size: 48px; padding-inline: var(--aldelo-space-400); color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); cursor: pointer; list-style: none; }
  .ac-accordion summary::-webkit-details-marker { display: none; }
  .ac-accordion summary::after { content: ""; inline-size: 7px; block-size: 7px; border-block-end: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--aldelo-motion-spatial) var(--aldelo-ease-standard); opacity: .6; }
  .ac-accordion details[open] summary::after { transform: rotate(-135deg); }
  .ac-accordion summary:hover { background: var(--aldelo-color-surface-hover); }
  .ac-accordion__body { padding: 0 var(--aldelo-space-400) var(--aldelo-space-400); color: var(--aldelo-color-text-muted); }

  /* Avatar group ----------------------------------------------------------- */
  .ac-avatar-group { display: flex; }
  .ac-avatar-group .ac-avatar { inline-size: 28px; block-size: 28px; font-size: var(--aldelo-font-size-caption); box-shadow: 0 0 0 2px var(--aldelo-color-surface); }
  .ac-avatar-group .ac-avatar + .ac-avatar { margin-inline-start: -8px; }

  /* Calendar / date range picker ------------------------------------------ */
  .ac-date-range { --ac-popover-width: 560px; }
  .ac-date-range__layout { display: grid; grid-template-columns: 160px minmax(0, 1fr); }
  .ac-date-range__presets { display: grid; align-content: start; gap: 2px; padding: var(--aldelo-space-200); border-inline-end: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-date-range__presets button { min-block-size: 32px; padding-inline: var(--aldelo-space-250); border: 0; border-radius: var(--aldelo-radius-control); background: none; text-align: start; cursor: pointer; }
  .ac-date-range__presets button:hover { background: var(--aldelo-color-surface-hover); }
  .ac-date-range__presets button[aria-pressed="true"] { background: var(--aldelo-color-action-soft); color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }
  .ac-calendar { padding: var(--aldelo-space-300) var(--aldelo-space-400); }
  .ac-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--aldelo-space-200); font-weight: var(--aldelo-font-weight-medium); color: var(--aldelo-color-text-strong); }
  .ac-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; text-align: center; }
  .ac-calendar__dow { padding-block: var(--aldelo-space-100); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-calendar__day { block-size: 32px; border: 0; background: none; color: var(--aldelo-color-text); font-variant-numeric: tabular-nums; cursor: pointer; }
  .ac-calendar__day:hover { background: var(--aldelo-color-surface-hover); border-radius: var(--aldelo-radius-control); }
  .ac-calendar__day[data-in-range="true"] { background: var(--aldelo-color-action-soft); border-radius: 0; }
  .ac-calendar__day[data-edge="start"], .ac-calendar__day[data-edge="end"] { background: var(--aldelo-color-action); color: var(--aldelo-color-on-action); border-radius: var(--aldelo-radius-control); }
  .ac-calendar__day[data-outside="true"] { color: var(--aldelo-color-text-disabled); }
  .ac-calendar__day[aria-current="date"] { font-weight: var(--aldelo-font-weight-strong); text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 560px) { .ac-date-range__layout { grid-template-columns: minmax(0, 1fr); } .ac-date-range__presets { grid-template-columns: repeat(2, 1fr); border-inline-end: 0; border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border); } }

  /* Section heading inside pages ------------------------------------------ */
  .ac-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--aldelo-space-300); }
  .ac-section-title h2 { font-size: var(--aldelo-font-size-heading-small); }

  @media (forced-colors: active) {
    .ac-sparkle { background: CanvasText; }
    .ac-ai-composer:focus-within { border: 2px solid Highlight; }
    .ac-heatmap__cell { forced-color-adjust: none; }
  }
}

/* ======================================================================
 * v1.2.1 Authentication showcase: brand logo lockup and animated hero.
 * The auth brand panel is the one sanctioned "wow" surface: it may use the
 * brand gradient and slow ambient motion. Motion stops under reduced motion,
 * and the panel carries no required information.
 * ==================================================================== */
@layer aldelo.components {
  /* Logo mark ------------------------------------------------------------ */
  .ac-logo {
    --_size: 36px;
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    inline-size: var(--_size);
    block-size: var(--_size);
    border-radius: calc(var(--_size) * .28);
    background:
      radial-gradient(120% 120% at 20% 0%, rgba(255, 255, 255, .35), transparent 45%),
      linear-gradient(140deg, var(--aldelo-brand-blue) 0%, var(--aldelo-brand-bright-blue) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 6px rgba(0, 38, 90, .35);
    color: #fff;
    isolation: isolate;
  }
  .ac-logo svg { inline-size: 62%; block-size: 62%; overflow: visible; }
  .ac-logo--lg { --_size: 56px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -3px 8px rgba(0, 38, 90, .35), 0 14px 34px -10px rgba(32, 122, 252, .75); }
  .ac-logo--lg::before {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: calc(var(--_size) * .36);
    background: conic-gradient(from var(--_angle, 0deg), var(--aldelo-brand-blue), var(--aldelo-brand-bright-blue), #7fb6ff, var(--aldelo-brand-bright-blue), var(--aldelo-brand-blue));
    filter: blur(10px);
    opacity: .55;
    animation: ac-logo-halo 8s linear infinite;
  }
  .ac-logo--lg::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 62%);
    background-size: 250% 100%;
    background-position: 120% 0;
    mix-blend-mode: soft-light;
    animation: ac-logo-shine 5s ease-in-out 600ms infinite;
  }
  @property --_angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
  @keyframes ac-logo-halo { to { --_angle: 360deg; } }
  @keyframes ac-logo-shine { 0%, 70% { background-position: 120% 0; } 100% { background-position: -40% 0; } }

  .ac-brand__mark:has(svg) { background: none; padding: 0; }

  /* Lockup above the auth form ------------------------------------------- */
  .ac-auth__lockup { display: flex; align-items: center; gap: var(--aldelo-space-400); }
  .ac-auth__lockup-text { display: grid; gap: 2px; }
  .ac-auth__lockup-name {
    font-family: var(--aldelo-font-family-display);
    font-size: 22px;
    font-weight: var(--aldelo-font-weight-medium);
    letter-spacing: -.02em;
    background: linear-gradient(100deg, var(--aldelo-color-text-strong) 0%, var(--aldelo-color-text-strong) 45%, var(--aldelo-component-ai-accent-end) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .ac-auth__lockup-tag { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  .ac-auth__announce {
    display: inline-flex;
    align-items: center;
    gap: var(--aldelo-space-200);
    justify-self: start;
    min-block-size: 30px;
    padding: 3px var(--aldelo-space-300) 3px 3px;
    border: var(--aldelo-border-width) solid transparent;
    border-radius: var(--aldelo-radius-full);
    background:
      linear-gradient(var(--aldelo-color-surface), var(--aldelo-color-surface)) padding-box,
      linear-gradient(120deg, var(--aldelo-component-ai-accent-start), var(--aldelo-component-ai-accent-end), #4fd1ff) border-box;
    color: var(--aldelo-color-text);
    font-size: var(--aldelo-font-size-label);
    text-decoration: none;
    box-shadow: 0 4px 16px -8px rgba(76, 92, 255, .5);
    transition: box-shadow var(--aldelo-motion-hover) var(--aldelo-ease-standard), transform var(--aldelo-motion-hover) var(--aldelo-ease-standard);
  }
  .ac-auth__announce:hover { box-shadow: 0 6px 22px -8px rgba(76, 92, 255, .75); transform: translateY(-1px); color: var(--aldelo-color-text-strong); }
  .ac-auth__announce-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--aldelo-radius-full); background: linear-gradient(120deg, var(--aldelo-component-ai-accent-start), var(--aldelo-component-ai-accent-end)); color: #fff; font-weight: var(--aldelo-font-weight-medium); font-size: var(--aldelo-font-size-caption); }
  .ac-auth__announce-tag .ac-sparkle { --ac-size: 11px; background: #fff; }
  .ac-auth__announce svg { inline-size: 14px; block-size: 14px; }

  /* Hero ------------------------------------------------------------------- */
  :is(.ac-auth-hero, .ac-auth--split .ac-auth__aside.ac-auth-hero) {
    --_ink: #eef1ff;
    --_muted: rgba(226, 231, 255, .72);
    --_glass: rgba(255, 255, 255, .06);
    --_glass-line: rgba(255, 255, 255, .14);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: var(--_ink);
    background:
      radial-gradient(60% 50% at 70% 38%, rgba(88, 110, 255, .38), transparent 70%),
      radial-gradient(45% 40% at 20% 20%, rgba(176, 103, 255, .28), transparent 70%),
      radial-gradient(40% 35% at 85% 85%, rgba(79, 209, 255, .22), transparent 70%),
      linear-gradient(180deg, #070a18 0%, #0a0f25 55%, #060814 100%);
  }
  .ac-auth-hero > * { position: relative; z-index: 2; }
  .ac-auth-hero__grid {
    position: absolute !important;
    z-index: 0 !important;
    /* A fixed-height plane keeps its near edge in front of the camera at any hero size;
       planes that cross the perspective origin render as torn wedges in Chromium. */
    inset: 48% -60% auto;
    block-size: 440px;
    background-image:
      linear-gradient(rgba(124, 140, 255, .28) 1px, transparent 1px),
      linear-gradient(90deg, rgba(124, 140, 255, .28) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: perspective(620px) rotateX(62deg);
    transform-origin: 50% 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 60%, transparent 100%);
    animation: ac-hero-grid 14s linear infinite;
  }
  .ac-auth-hero__art { position: absolute !important; z-index: 1 !important; inset: 6% 0 22% 0; display: grid; place-items: center; pointer-events: none; }
  /* overflow: hidden — an unclipped, filtered, animated SVG can tear the hero's rounded clip on very wide screens (Chromium). The viewBox already contains the art. */
  .ac-auth-hero__art svg { inline-size: min(92%, 620px); block-size: auto; overflow: hidden; }
  .ac-auth-hero__spin { transform-box: fill-box; transform-origin: center; animation: ac-hero-spin var(--_d, 80s) linear infinite; }
  .ac-auth-hero__spin--rev { animation-direction: reverse; }
  .ac-auth-hero__pulse { animation: ac-hero-pulse 3.2s ease-in-out infinite; animation-delay: var(--_delay, 0s); transform-box: fill-box; transform-origin: center; }
  .ac-auth-hero__flow { stroke-dasharray: 4 10; animation: ac-hero-flow 2.4s linear infinite; }
  .ac-auth-hero__float { animation: ac-hero-float 7s ease-in-out infinite alternate; animation-delay: var(--_delay, 0s); }

  .ac-auth-hero__chip {
    position: absolute !important;
    display: flex;
    align-items: center;
    gap: var(--aldelo-space-250);
    max-inline-size: 250px;
    padding: var(--aldelo-space-250) var(--aldelo-space-300);
    border: 1px solid var(--_glass-line);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    font-size: var(--aldelo-font-size-label);
    line-height: 1.35;
  }
  .ac-auth-hero__chip strong { display: block; color: var(--_ink); font-weight: var(--aldelo-font-weight-medium); font-size: 13px; }
  .ac-auth-hero__chip span { color: var(--_muted); }
  .ac-auth-hero__chip-icon { display: grid; place-items: center; flex: none; inline-size: 32px; block-size: 32px; border-radius: 10px; background: linear-gradient(140deg, rgba(79, 209, 255, .35), rgba(106, 92, 255, .35)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #fff; }
  .ac-auth-hero__chip-icon svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ac-auth-hero__chip-icon .ac-sparkle { background: #fff; --ac-size: 16px; }
  .ac-auth-hero__live { display: inline-block; inline-size: 7px; block-size: 7px; margin-inline-end: 4px; border-radius: 50%; background: #5ef0a6; box-shadow: 0 0 0 0 rgba(94, 240, 166, .6); animation: ac-hero-live 2s ease-out infinite; }
  .ac-auth-hero__mini { display: block; inline-size: 96px; block-size: 22px; margin-block-start: 6px; }
  .ac-auth-hero__mini path { fill: none; stroke: #7fdcff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .ac-auth-hero__copy { display: grid; gap: var(--aldelo-space-300); max-inline-size: 46ch; }
  .ac-auth-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #9fb2ff; font-size: var(--aldelo-font-size-caption); font-weight: var(--aldelo-font-weight-strong); letter-spacing: var(--aldelo-letter-spacing-overline); text-transform: uppercase; }
  .ac-auth-hero__title { color: var(--_ink) !important; font-family: var(--aldelo-font-family-display); font-size: clamp(28px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -.03em; font-weight: var(--aldelo-font-weight-medium); }
  .ac-auth-hero__title em { font-style: normal; background: linear-gradient(100deg, #7ea2ff 0%, #b69bff 45%, #6fe0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .ac-auth-hero__lede { color: var(--_muted) !important; font-size: var(--aldelo-font-size-body-large); line-height: 1.55; }
  .ac-auth-hero__trust { display: flex; flex-wrap: wrap; gap: var(--aldelo-space-200) var(--aldelo-space-500); color: var(--_muted); font-size: var(--aldelo-font-size-caption); }
  .ac-auth-hero__trust span { display: inline-flex; align-items: center; gap: 6px; }
  .ac-auth-hero__trust svg { inline-size: 13px; block-size: 13px; fill: none; stroke: #9fb2ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  @keyframes ac-hero-spin { to { transform: rotate(360deg); } }
  @keyframes ac-hero-pulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
  @keyframes ac-hero-flow { to { stroke-dashoffset: -28; } }
  @keyframes ac-hero-float { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
  @keyframes ac-hero-grid { to { background-position: 0 56px, 0 0; } }
  @keyframes ac-hero-live { 0% { box-shadow: 0 0 0 0 rgba(94, 240, 166, .55); } 100% { box-shadow: 0 0 0 8px rgba(94, 240, 166, 0); } }

  @media (prefers-reduced-motion: reduce) {
    .ac-logo--lg::before, .ac-logo--lg::after, .ac-auth-hero__grid, .ac-auth-hero__spin, .ac-auth-hero__pulse, .ac-auth-hero__flow, .ac-auth-hero__float, .ac-auth-hero__live { animation: none !important; }
  }
  @media (forced-colors: active) {
    .ac-auth-hero__art, .ac-auth-hero__grid { display: none; }
    .ac-auth-hero__title em { color: CanvasText; background: none; }
  }
}

/* ======================================================================
 * v1.3.0 core additions: advanced inputs, data grid, record page, wizard,
 * comments, upload, filter builder, pagination, banners, error pages,
 * coachmarks, tree, split button, code, key-value.
 * ==================================================================== */
@layer aldelo.components {
  /* Listbox (combobox, select menus, time picker) ------------------------ */
  .ac-listbox {
    min-inline-size: var(--ac-listbox-width, 220px);
    max-block-size: 300px;
    overflow-y: auto;
    padding: var(--aldelo-space-100);
    border: var(--aldelo-border-width) solid var(--aldelo-component-overlay-border);
    border-radius: var(--aldelo-radius-md);
    background: var(--aldelo-component-overlay-background);
    box-shadow: var(--aldelo-component-overlay-shadow);
    z-index: var(--aldelo-z-dropdown);
  }
  .ac-listbox[popover] { position: fixed; inset: auto; margin: 0; color: var(--aldelo-color-text); }
  .ac-option { position: relative; display: flex; align-items: center; gap: var(--aldelo-space-250); min-block-size: 34px; padding: var(--aldelo-space-150) var(--aldelo-space-250) var(--aldelo-space-150) var(--aldelo-space-800); border-radius: var(--aldelo-radius-control); cursor: pointer; }
  .ac-option[data-active="true"] { background: var(--aldelo-color-surface-hover); }
  .ac-option[aria-selected="true"]::before { content: ""; position: absolute; inset-inline-start: 12px; inline-size: 5px; block-size: 9px; border-block-end: 2px solid var(--aldelo-color-action); border-inline-end: 2px solid var(--aldelo-color-action); transform: rotate(45deg) translate(-1px, -1px); }
  .ac-option[aria-disabled="true"] { opacity: var(--aldelo-opacity-disabled); cursor: not-allowed; }
  .ac-option__meta { margin-inline-start: auto; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-option--create { color: var(--aldelo-color-link); font-weight: var(--aldelo-font-weight-medium); }
  .ac-listbox__group { padding: var(--aldelo-space-200) var(--aldelo-space-250) var(--aldelo-space-100); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); font-weight: var(--aldelo-font-weight-medium); }
  .ac-listbox__empty { padding: var(--aldelo-space-300); color: var(--aldelo-color-text-muted); text-align: center; }

  /* Combobox, multiselect, tag input ------------------------------------- */
  .ac-combobox { position: relative; }
  .ac-combobox > .ac-input { padding-inline-end: var(--aldelo-space-1000); }
  .ac-combobox__toggle { position: absolute; inset-block: 0; inset-inline-end: 2px; display: grid; place-items: center; inline-size: 34px; border: 0; background: none; color: var(--aldelo-color-text-muted); cursor: pointer; }
  .ac-combobox__toggle svg { inline-size: 16px; block-size: 16px; }
  .ac-multiselect {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aldelo-space-100);
    min-block-size: var(--aldelo-component-field-height);
    padding: 3px var(--aldelo-space-1000) 3px var(--aldelo-space-150);
    border: var(--aldelo-border-width) solid var(--aldelo-component-field-border);
    border-radius: var(--aldelo-component-field-radius);
    background: var(--aldelo-component-field-background);
    cursor: text;
    position: relative;
  }
  .ac-multiselect:hover { border-color: var(--aldelo-component-field-border-hover); }
  .ac-multiselect:focus-within { border-color: var(--aldelo-color-focus); box-shadow: 0 0 0 var(--aldelo-border-width) var(--aldelo-color-focus), 0 0 0 4px var(--aldelo-color-action-soft); }
  .ac-multiselect input { flex: 1 0 80px; min-inline-size: 80px; min-block-size: 28px; border: 0; outline: 0; background: transparent; color: var(--aldelo-color-text); font-size: var(--aldelo-font-size-body-large); }
  .ac-token { display: inline-flex; align-items: center; gap: 2px; min-block-size: 26px; padding-inline: var(--aldelo-space-200) 2px; border-radius: var(--aldelo-radius-sm); background: var(--aldelo-color-action-soft); color: var(--aldelo-color-text-strong); font-size: var(--aldelo-font-size-label); }
  .ac-token button { display: grid; place-items: center; inline-size: 20px; block-size: 20px; border: 0; border-radius: 3px; background: none; color: var(--aldelo-color-text-muted); cursor: pointer; }
  .ac-token button:hover { background: var(--aldelo-color-surface-hover); color: var(--aldelo-color-text-strong); }
  .ac-token svg { inline-size: 12px; block-size: 12px; }
  @media (pointer: coarse) { .ac-multiselect input { font-size: var(--aldelo-font-size-input-touch); } }

  /* Date and time fields --------------------------------------------------- */
  .ac-datefield { position: relative; }
  .ac-datefield > .ac-input { padding-inline-end: var(--aldelo-space-1000); font-variant-numeric: tabular-nums; }
  .ac-datefield__button { position: absolute; inset-block: 2px; inset-inline-end: 2px; display: grid; place-items: center; inline-size: 34px; border: 0; border-radius: var(--aldelo-radius-control); background: none; color: var(--aldelo-color-text-muted); cursor: pointer; }
  .ac-datefield__button:hover { background: var(--aldelo-color-surface-hover); color: var(--aldelo-color-text-strong); }
  .ac-datefield__button svg { inline-size: 16px; block-size: 16px; }
  .ac-datepicker { --ac-popover-width: 300px; }
  .ac-datepicker .ac-calendar__day { inline-size: 100%; border-radius: var(--aldelo-radius-control); }
  .ac-datepicker .ac-calendar__day[aria-selected="true"] { background: var(--aldelo-color-action); color: var(--aldelo-color-on-action); }
  .ac-datepicker .ac-calendar__day:focus-visible { outline-offset: -2px; }
  .ac-datepicker__footer { display: flex; justify-content: space-between; padding: 0 var(--aldelo-space-400) var(--aldelo-space-300); }

  /* Number stepper, slider, copy field ------------------------------------ */
  .ac-stepper { display: inline-flex; align-items: stretch; border: var(--aldelo-border-width) solid var(--aldelo-component-field-border); border-radius: var(--aldelo-component-field-radius); background: var(--aldelo-component-field-background); overflow: hidden; }
  .ac-stepper:focus-within { border-color: var(--aldelo-color-focus); box-shadow: 0 0 0 1px var(--aldelo-color-focus); }
  .ac-stepper input { inline-size: 64px; min-block-size: calc(var(--aldelo-component-field-height) - 2px); border: 0; outline: 0; background: transparent; color: var(--aldelo-color-text); font-size: var(--aldelo-font-size-body-large); text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
  .ac-stepper input::-webkit-inner-spin-button, .ac-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .ac-stepper button { inline-size: 36px; border: 0; background: var(--aldelo-color-surface-muted); color: var(--aldelo-color-text); font-size: 16px; cursor: pointer; }
  .ac-stepper button:hover { background: var(--aldelo-color-surface-hover); }
  .ac-stepper button:disabled { color: var(--aldelo-color-text-disabled); cursor: not-allowed; }

  .ac-slider { display: grid; gap: var(--aldelo-space-150); }
  .ac-slider__row { display: flex; align-items: center; gap: var(--aldelo-space-300); }
  .ac-slider input[type="range"] { flex: 1; accent-color: var(--aldelo-color-action); block-size: 24px; cursor: pointer; }
  .ac-slider output { min-inline-size: 5ch; padding: 2px var(--aldelo-space-200); border-radius: var(--aldelo-radius-sm); background: var(--aldelo-color-surface-muted); text-align: center; font-variant-numeric: tabular-nums; font-weight: var(--aldelo-font-weight-medium); }
  .ac-slider__scale { display: flex; justify-content: space-between; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }

  .ac-copy { display: flex; }
  .ac-copy .ac-input { border-start-end-radius: 0; border-end-end-radius: 0; font-family: var(--aldelo-font-family-mono); background: var(--aldelo-color-surface-muted); }
  .ac-copy .ac-button { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; }
  .ac-copy .ac-button[data-copied="true"] { color: var(--aldelo-color-success); }

  /* Inline edit ---------------------------------------------------------- */
  .ac-inline-edit { display: inline-flex; align-items: center; gap: var(--aldelo-space-100); max-inline-size: calc(100% + 2 * var(--aldelo-space-150)); margin-inline: calc(-1 * var(--aldelo-space-150)); }
  .ac-inline-edit__display { display: inline-flex; align-items: center; gap: var(--aldelo-space-150); max-inline-size: 100%; padding: 2px var(--aldelo-space-150); border: var(--aldelo-border-width) solid transparent; border-radius: var(--aldelo-radius-sm); background: none; color: inherit; font: inherit; text-align: start; cursor: text; }
  .ac-inline-edit__display::after { content: ""; inline-size: 12px; block-size: 12px; opacity: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .ac-inline-edit__display:hover, .ac-inline-edit__display:focus-visible { border-color: var(--aldelo-color-border-strong); background: var(--aldelo-color-surface); }
  .ac-inline-edit__display:hover::after, .ac-inline-edit__display:focus-visible::after { opacity: .6; }
  .ac-inline-edit .ac-input { min-block-size: 30px; }
  .ac-inline-edit[data-saving="true"] .ac-inline-edit__display { color: var(--aldelo-color-text-muted); }

  /* Rich text editor ------------------------------------------------------ */
  .ac-editor { border: var(--aldelo-border-width) solid var(--aldelo-component-field-border); border-radius: var(--aldelo-component-field-radius); background: var(--aldelo-component-field-background); }
  .ac-editor:focus-within { border-color: var(--aldelo-color-focus); box-shadow: 0 0 0 1px var(--aldelo-color-focus); }
  .ac-editor__toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: var(--aldelo-space-100); border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-editor__toolbar .ac-button { min-block-size: 28px; }
  .ac-editor__toolbar .ac-button[aria-pressed="true"] { background: var(--aldelo-color-action-soft); color: var(--aldelo-color-text-strong); }
  .ac-editor__sep { inline-size: 1px; margin: 4px; background: var(--aldelo-color-border); }
  .ac-editor__content { min-block-size: 120px; padding: var(--aldelo-space-300); outline: none; font-size: var(--aldelo-font-size-body-large); line-height: 1.6; }
  .ac-editor__content:empty::before { content: attr(data-placeholder); color: var(--aldelo-color-text-muted); }
  .ac-editor__content ul { margin: 0; padding-inline-start: 1.3em; }
  .ac-mention { padding: 0 3px; border-radius: 3px; background: var(--aldelo-color-action-soft); color: var(--aldelo-color-link); font-weight: var(--aldelo-font-weight-medium); white-space: nowrap; }

  /* Tree ------------------------------------------------------------------- */
  .ac-tree, .ac-tree ul { list-style: none; margin: 0; padding: 0; }
  .ac-tree ul { padding-inline-start: var(--aldelo-space-500); }
  .ac-tree [role="treeitem"] > .ac-tree__row { display: flex; align-items: center; gap: var(--aldelo-space-150); min-block-size: 32px; padding-inline: var(--aldelo-space-150); border-radius: var(--aldelo-radius-control); cursor: pointer; }
  .ac-tree [role="treeitem"]:focus-visible { outline: none; }
  .ac-tree [role="treeitem"]:focus-visible > .ac-tree__row { outline: var(--aldelo-focus-width) solid var(--aldelo-color-focus); outline-offset: -1px; }
  .ac-tree .ac-tree__row:hover { background: var(--aldelo-color-surface-hover); }
  .ac-tree [aria-selected="true"] > .ac-tree__row { background: var(--aldelo-color-action-soft); color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }
  .ac-tree__twisty { display: grid; place-items: center; inline-size: 16px; block-size: 16px; color: var(--aldelo-color-text-muted); transition: transform var(--aldelo-motion-spatial) var(--aldelo-ease-standard); }
  .ac-tree [aria-expanded="true"] > .ac-tree__row .ac-tree__twisty { transform: rotate(90deg); }
  .ac-tree [aria-expanded="false"] > ul { display: none; }
  .ac-tree__count { margin-inline-start: auto; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }

  /* Split button ------------------------------------------------------------ */
  .ac-split-button { display: inline-flex; }
  .ac-split-button > .ac-button:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
  .ac-split-button > .ac-button:last-child { inline-size: 34px; padding: 0; border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: 1px; }
  .ac-split-button > .ac-button:not(.ac-button--primary):last-child { margin-inline-start: -1px; }

  /* Code block & key-value --------------------------------------------------- */
  .ac-code { position: relative; margin: 0; padding: var(--aldelo-space-300) var(--aldelo-space-400); border: var(--aldelo-border-width) solid var(--aldelo-color-border); border-radius: var(--aldelo-radius-md); background: var(--aldelo-color-surface-muted); color: var(--aldelo-color-text); font-family: var(--aldelo-font-family-mono); font-size: var(--aldelo-font-size-label); line-height: 1.6; overflow-x: auto; white-space: pre; }
  .ac-code .k { color: var(--aldelo-color-data-2); }
  .ac-code .s { color: var(--aldelo-color-success); }
  .ac-code .n { color: var(--aldelo-color-warning); }
  .ac-kv { display: grid; gap: var(--aldelo-space-200); }
  .ac-kv__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--aldelo-space-200); align-items: center; }

  /* Advanced data grid -------------------------------------------------------- */
  .ac-views { display: flex; align-items: center; gap: var(--aldelo-space-100); padding: var(--aldelo-space-200) var(--aldelo-space-400) 0; border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border); overflow-x: auto; }
  .ac-views .ac-tab { min-block-size: 34px; }
  .ac-views__spacer { flex: 1; }
  .ac-table--grid { table-layout: fixed; }
  .ac-table--grid th, .ac-table--grid td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ac-table--grid thead th { position: sticky; }
  .ac-col-pinned { position: sticky !important; inset-inline-start: 0; z-index: 2 !important; background: var(--aldelo-color-surface); box-shadow: inset -1px 0 0 var(--aldelo-color-border); }
  .ac-table--grid tbody tr:hover .ac-col-pinned { background: var(--aldelo-component-table-row-hover); }
  .ac-table--grid tbody tr[aria-selected="true"] .ac-col-pinned { background: var(--aldelo-component-table-row-selected); }
  .ac-th { position: relative; display: flex; align-items: center; gap: var(--aldelo-space-100); }
  .ac-th__menu { margin-inline-start: auto; opacity: 0; }
  th:hover .ac-th__menu, th:focus-within .ac-th__menu { opacity: 1; }
  .ac-col-resize { position: absolute; inset-block: 0; inset-inline-end: -8px; inline-size: 12px; border: 0; background: none; cursor: col-resize; z-index: 3; }
  .ac-col-resize::after { content: ""; position: absolute; inset-block: 25%; inset-inline-start: 5px; inline-size: 2px; border-radius: 1px; background: var(--aldelo-color-border-strong); opacity: 0; transition: opacity var(--aldelo-motion-hover); }
  th:hover .ac-col-resize::after, .ac-col-resize:focus-visible::after, .ac-col-resize[data-active="true"]::after { opacity: 1; background: var(--aldelo-color-action); }
  .ac-row-toggle { display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border: 0; border-radius: var(--aldelo-radius-sm); background: none; color: var(--aldelo-color-text-muted); cursor: pointer; transition: transform var(--aldelo-motion-spatial) var(--aldelo-ease-standard); }
  .ac-row-toggle[aria-expanded="true"] { transform: rotate(90deg); }
  .ac-row-toggle:hover { background: var(--aldelo-color-surface-hover); }
  .ac-row-detail > td { padding: var(--aldelo-space-300) var(--aldelo-space-400) var(--aldelo-space-400) var(--aldelo-space-1200) !important; background: var(--aldelo-color-surface-muted); white-space: normal !important; }
  .ac-row-group > th, .ac-row-group > td { padding-block: var(--aldelo-space-150) !important; background: var(--aldelo-color-background-shade); color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }
  .ac-cell-edit { inline-size: 100%; min-block-size: 28px; padding-inline: var(--aldelo-space-150); border: var(--aldelo-border-width) solid var(--aldelo-color-focus); border-radius: var(--aldelo-radius-sm); background: var(--aldelo-color-surface); color: var(--aldelo-color-text); font: inherit; }
  .ac-column-chooser { --ac-popover-width: 260px; }
  .ac-column-chooser li { display: flex; align-items: center; gap: var(--aldelo-space-200); min-block-size: 32px; }

  /* Pagination (numbered) ---------------------------------------------------- */
  .ac-pages { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .ac-pages button, .ac-pages span { display: grid; place-items: center; min-inline-size: 32px; block-size: 32px; padding-inline: var(--aldelo-space-150); border: 0; border-radius: var(--aldelo-radius-control); background: none; color: var(--aldelo-color-text); font-variant-numeric: tabular-nums; cursor: pointer; }
  .ac-pages button:hover { background: var(--aldelo-color-surface-hover); }
  .ac-pages button[aria-current="page"] { background: var(--aldelo-color-action-soft); color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }
  .ac-pages span { color: var(--aldelo-color-text-muted); cursor: default; }
  .ac-page-size { display: inline-flex; align-items: center; gap: var(--aldelo-space-200); }
  .ac-page-size .ac-select { inline-size: auto; min-block-size: 30px; padding-inline-start: var(--aldelo-space-200); }

  /* Filter builder ---------------------------------------------------------- */
  .ac-filter-builder { display: grid; gap: var(--aldelo-space-200); }
  .ac-filter-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) auto; gap: var(--aldelo-space-200); align-items: center; }
  .ac-filter-row__join { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); text-align: end; }
  @container (max-width: 560px) { .ac-filter-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ac-filter-row__join { grid-column: 1 / -1; text-align: start; } }

  /* Record (detail) page ------------------------------------------------------ */
  .ac-record__header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--aldelo-space-400); }
  .ac-record__icon { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: var(--aldelo-radius-xl); background: var(--aldelo-color-action-soft); color: var(--aldelo-color-action); flex: none; }
  .ac-record__icon svg { inline-size: 26px; block-size: 26px; }
  .ac-record__title { display: grid; gap: var(--aldelo-space-150); flex: 1 1 320px; min-inline-size: 0; }
  .ac-record__title h1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aldelo-space-300); font-size: var(--aldelo-font-size-display-small); letter-spacing: -.02em; }
  .ac-record__meta { display: flex; flex-wrap: wrap; gap: var(--aldelo-space-100) var(--aldelo-space-500); margin: 0; padding: 0; list-style: none; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  .ac-record__meta li { display: inline-flex; align-items: center; gap: var(--aldelo-space-150); }
  .ac-record__meta svg { inline-size: 14px; block-size: 14px; }
  .ac-record__actions { display: flex; flex-wrap: wrap; gap: var(--aldelo-space-200); }
  .ac-record__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--aldelo-space-500); align-items: start; }
  .ac-record__aside { display: grid; gap: var(--aldelo-space-400); position: sticky; inset-block-start: calc(var(--aldelo-size-topbar) + var(--aldelo-space-400)); }
  @container main (max-width: 1000px) { .ac-record__layout { grid-template-columns: minmax(0, 1fr); } .ac-record__aside { position: static; } }
  .ac-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border: var(--aldelo-border-width) solid var(--aldelo-color-border); border-radius: var(--aldelo-radius-md); background: var(--aldelo-color-surface); overflow: hidden; }
  /* Dividers are drawn with shadows so wrapped rows stay tidy; the row clips the outer edges. */
  .ac-stat-row > div { display: grid; gap: 2px; padding: var(--aldelo-space-300) var(--aldelo-space-400); box-shadow: var(--aldelo-border-width) 0 0 var(--aldelo-color-border), 0 var(--aldelo-border-width) 0 var(--aldelo-color-border); }
  .ac-stat-row dt { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-stat-row dd { margin: 0; color: var(--aldelo-color-text-strong); font-size: var(--aldelo-font-size-heading-small); font-weight: var(--aldelo-font-weight-medium); font-variant-numeric: tabular-nums; }

  /* Wizard -------------------------------------------------------------------- */
  .ac-wizard { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--aldelo-space-600); align-items: start; }
  .ac-vsteps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: vstep; position: sticky; inset-block-start: calc(var(--aldelo-size-topbar) + var(--aldelo-space-400)); }
  .ac-vsteps li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--aldelo-space-300); padding-block-end: var(--aldelo-space-500); counter-increment: vstep; color: var(--aldelo-color-text-muted); }
  .ac-vsteps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 13px; inset-block: 30px 2px; inline-size: 2px; background: var(--aldelo-color-border); }
  .ac-vsteps li[data-state="complete"]::after { background: var(--aldelo-color-action); }
  .ac-vsteps__marker { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border: 2px solid var(--aldelo-color-border-strong); border-radius: 50%; background: var(--aldelo-color-surface); font-size: var(--aldelo-font-size-label); font-weight: var(--aldelo-font-weight-medium); }
  .ac-vsteps__marker::before { content: counter(vstep); }
  .ac-vsteps li[data-state="complete"] .ac-vsteps__marker { border-color: var(--aldelo-color-action); background: var(--aldelo-color-action); color: var(--aldelo-color-on-action); }
  .ac-vsteps li[data-state="complete"] .ac-vsteps__marker::before { content: "✓"; }
  .ac-vsteps li[aria-current="step"] { color: var(--aldelo-color-text-strong); }
  .ac-vsteps li[aria-current="step"] .ac-vsteps__marker { border-color: var(--aldelo-color-action); color: var(--aldelo-color-action); box-shadow: 0 0 0 4px var(--aldelo-color-action-soft); }
  .ac-vsteps__title { font-weight: var(--aldelo-font-weight-medium); padding-block-start: 4px; }
  .ac-vsteps__desc { font-size: var(--aldelo-font-size-caption); color: var(--aldelo-color-text-muted); }
  .ac-wizard__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aldelo-space-200); padding-block-start: var(--aldelo-space-400); border-block-start: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-wizard__footer .ac-spacer { flex: 1; }
  .ac-review { display: grid; gap: var(--aldelo-space-300); }
  .ac-review section { display: grid; gap: var(--aldelo-space-200); padding: var(--aldelo-space-400); border: var(--aldelo-border-width) solid var(--aldelo-color-border); border-radius: var(--aldelo-radius-md); }
  .ac-review header { display: flex; justify-content: space-between; align-items: center; }
  @container main (max-width: 820px) { .ac-wizard { grid-template-columns: minmax(0, 1fr); } .ac-vsteps { position: static; display: flex; gap: var(--aldelo-space-200); overflow-x: auto; } .ac-vsteps li { padding: 0; } .ac-vsteps li::after { display: none; } .ac-vsteps__desc { display: none; } }

  /* Comments & mentions ------------------------------------------------------- */
  .ac-comments { display: grid; gap: var(--aldelo-space-400); }
  .ac-comment { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--aldelo-space-300); }
  .ac-comment .ac-avatar { inline-size: 32px; block-size: 32px; }
  .ac-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--aldelo-space-200); }
  .ac-comment__author { color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }
  .ac-comment__time { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-comment__body { margin-block-start: 2px; line-height: 1.55; }
  .ac-comment__actions { display: flex; gap: var(--aldelo-space-100); margin-block-start: var(--aldelo-space-100); }
  .ac-comment[data-resolved="true"] { opacity: .7; }
  .ac-comment-composer { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--aldelo-space-300); }

  /* Upload ------------------------------------------------------------------- */
  .ac-dropzone { display: grid; justify-items: center; gap: var(--aldelo-space-200); padding: var(--aldelo-space-800) var(--aldelo-space-500); border: 2px dashed var(--aldelo-color-border-strong); border-radius: var(--aldelo-radius-xl); background: var(--aldelo-color-surface); text-align: center; transition: border-color var(--aldelo-motion-hover), background-color var(--aldelo-motion-hover); }
  .ac-dropzone[data-dragover="true"] { border-color: var(--aldelo-color-action); background: var(--aldelo-color-action-soft); }
  .ac-dropzone__icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--aldelo-color-action-soft); color: var(--aldelo-color-action); }
  .ac-dropzone__icon svg { inline-size: 22px; block-size: 22px; }
  .ac-dropzone__title { color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); font-size: var(--aldelo-font-size-body-large); }
  .ac-dropzone__hint { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  .ac-files { display: grid; gap: var(--aldelo-space-200); margin: 0; padding: 0; list-style: none; }
  .ac-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--aldelo-space-100) var(--aldelo-space-300); align-items: center; padding: var(--aldelo-space-300); border: var(--aldelo-border-width) solid var(--aldelo-color-border); border-radius: var(--aldelo-radius-md); background: var(--aldelo-color-surface); }
  .ac-file__icon { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: var(--aldelo-radius-md); background: var(--aldelo-color-surface-muted); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); letter-spacing: .02em; font-weight: var(--aldelo-font-weight-strong); }
  .ac-file__name { color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ac-file__meta { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-file .ac-progress { grid-column: 2; }
  .ac-file[data-state="error"] { border-color: color-mix(in srgb, var(--aldelo-color-danger) 40%, var(--aldelo-color-border)); }
  .ac-file[data-state="error"] .ac-file__meta { color: var(--aldelo-color-danger); }

  .ac-mapping th, .ac-mapping td { vertical-align: middle; }
  .ac-mapping .ac-select { min-block-size: 32px; }
  .ac-mapping__sample { color: var(--aldelo-color-text-muted); font-family: var(--aldelo-font-family-mono); font-size: var(--aldelo-font-size-caption); }

  /* Banners -------------------------------------------------------------------- */
  .ac-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--aldelo-space-200) var(--aldelo-space-400); min-block-size: 40px; padding: var(--aldelo-space-150) var(--aldelo-space-500); background: var(--_bg, var(--aldelo-color-info-soft)); color: var(--aldelo-color-text); font-size: var(--aldelo-font-size-label); text-align: center; border-block-end: var(--aldelo-border-width) solid color-mix(in srgb, var(--_fg, var(--aldelo-color-info)) 25%, transparent); }
  .ac-banner strong { color: var(--_fg, var(--aldelo-color-info)); }
  .ac-banner--warning { --_bg: var(--aldelo-color-warning-soft); --_fg: var(--aldelo-color-warning); }
  .ac-banner--danger { --_bg: var(--aldelo-color-danger-soft); --_fg: var(--aldelo-color-danger); }
  .ac-banner--elevated { --_bg: var(--aldelo-color-warning); --_fg: var(--aldelo-color-surface); color: var(--aldelo-color-surface); }
  [data-aldelo-theme="dark"] .ac-banner--elevated { color: var(--aldelo-color-background); }
  .ac-banner--elevated strong { color: inherit; }
  .ac-banner--elevated .ac-button { --_bg: transparent; --_fg: currentColor; --_border: currentColor; --_bg-hover: color-mix(in srgb, currentColor 12%, transparent); }
  .ac-banner__close { margin-inline-start: var(--aldelo-space-200); }

  /* Full-page error / status ---------------------------------------------------- */
  .ac-error-page { display: grid; place-items: center; min-block-size: 70dvh; padding: var(--aldelo-space-1200) var(--aldelo-space-500); text-align: center; }
  .ac-error-page__inner { display: grid; justify-items: center; gap: var(--aldelo-space-400); max-inline-size: 520px; }
  .ac-error-page__code { font-family: var(--aldelo-font-family-display); font-size: clamp(64px, 12vw, 112px); line-height: 1; font-weight: var(--aldelo-font-weight-medium); letter-spacing: -.05em; background: linear-gradient(135deg, var(--aldelo-component-ai-accent-start), var(--aldelo-component-ai-accent-end)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .ac-error-page__art { inline-size: 120px; block-size: 120px; color: var(--aldelo-color-action); }
  .ac-error-page h1 { font-size: var(--aldelo-font-size-display-small); letter-spacing: -.02em; }
  .ac-error-page p { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-body-large); }
  .ac-error-page__ref { color: var(--aldelo-color-text-muted); font-family: var(--aldelo-font-family-mono); font-size: var(--aldelo-font-size-caption); }
  .ac-error-preview { border: var(--aldelo-border-width) solid var(--aldelo-color-border); border-radius: var(--aldelo-radius-xl); background: var(--aldelo-color-background); overflow: hidden; }
  .ac-error-preview .ac-error-page { min-block-size: 360px; padding: var(--aldelo-space-800) var(--aldelo-space-400); }

  /* Coachmark / tour ----------------------------------------------------------- */
  /* Doubled class out-ranks the generic :is(.ac-menu, .ac-popover)[popover] color rule. */
  .ac-coachmark.ac-coachmark { --ac-popover-width: 300px; padding: var(--aldelo-space-400); border: 0; background: var(--aldelo-color-surface-inverse); color: var(--aldelo-color-text-inverse); }
  .ac-coachmark h3 { font-size: var(--aldelo-font-size-heading-small); }
  .ac-coachmark h3 { color: inherit; margin-block-end: var(--aldelo-space-150); }
  .ac-coachmark p { opacity: .85; }
  .ac-coachmark__footer { display: flex; align-items: center; justify-content: space-between; margin-block-start: var(--aldelo-space-400); }
  .ac-coachmark__step { font-size: var(--aldelo-font-size-caption); opacity: .75; }
  .ac-coachmark .ac-button--quiet { --_fg: var(--aldelo-color-text-inverse); }
  .ac-coachmark .ac-button--quiet:hover { --_bg-hover: color-mix(in srgb, var(--aldelo-color-text-inverse) 12%, transparent); }
  .ac-spotlight { position: relative; z-index: var(--aldelo-z-dropdown); border-radius: var(--aldelo-radius-md); box-shadow: 0 0 0 4px var(--aldelo-color-action), 0 0 0 9999px rgba(8, 10, 20, .45); }

  /* Progress ring ---------------------------------------------------------------- */
  .ac-ring { --_v: 0; --_size: 56px; position: relative; display: grid; place-items: center; inline-size: var(--_size); block-size: var(--_size); border-radius: 50%; background: conic-gradient(var(--c, var(--aldelo-color-action)) calc(var(--_v) * 1%), var(--aldelo-color-data-track) 0); }
  .ac-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--aldelo-color-surface); }
  .ac-ring > span { position: relative; font-weight: var(--aldelo-font-weight-medium); font-size: var(--aldelo-font-size-label); font-variant-numeric: tabular-nums; color: var(--aldelo-color-text-strong); }

  /* Presence ---------------------------------------------------------------------- */
  .ac-avatar[data-presence]::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--aldelo-color-text-disabled); box-shadow: 0 0 0 2px var(--aldelo-color-surface); }
  .ac-avatar[data-presence] { position: relative; overflow: visible; }
  .ac-avatar[data-presence="online"]::after { background: var(--aldelo-color-success); }
  .ac-avatar[data-presence="away"]::after { background: var(--aldelo-color-warning); }

  @media (forced-colors: active) {
    .ac-option[aria-selected="true"], .ac-tree [aria-selected="true"] > .ac-tree__row { outline: 2px solid Highlight; }
    .ac-error-page__code { color: CanvasText; background: none; }
    .ac-ring { forced-color-adjust: none; }
  }
}

/* ==========================================================================
 * v1.4.1: report and account patterns
 * ======================================================================== */
@layer aldelo.components {
  /* Insight callout: an explained finding at the top of a report (AI or rule-based) */
  .ac-insight { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--aldelo-space-300) var(--aldelo-space-400); align-items: start; padding: var(--aldelo-space-400); border: var(--aldelo-border-width) solid color-mix(in srgb, var(--aldelo-component-ai-accent-start) 30%, var(--aldelo-color-border)); border-radius: var(--aldelo-radius-md); background: var(--aldelo-component-ai-surface); }
  .ac-insight__icon { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--aldelo-color-surface); }
  .ac-insight__title { margin: 0 0 var(--aldelo-space-100); color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }
  .ac-insight__body { margin: 0; color: var(--aldelo-color-text); }
  .ac-insight__sources { display: flex; flex-wrap: wrap; gap: var(--aldelo-space-150); margin-block-start: var(--aldelo-space-200); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-insight__actions { display: flex; flex-wrap: wrap; gap: var(--aldelo-space-200); }
  @container main (max-width: 720px) { .ac-insight { grid-template-columns: auto minmax(0, 1fr); } .ac-insight__actions { grid-column: 2; } }

  /* KPI target line: "Target 29% · 2.8 pts over" */
  .ac-kpi__target { display: flex; align-items: center; gap: var(--aldelo-space-150); color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }
  .ac-kpi__target::before { content: ""; inline-size: 10px; border-block-start: 2px dashed currentColor; }

  /* Diverging variance bar (over/under a plan) */
  .ac-variance { display: grid; grid-template-columns: 1fr 1fr; align-items: center; inline-size: 100%; min-inline-size: 80px; block-size: 10px; }
  .ac-variance > span { block-size: 8px; }
  .ac-variance__under { justify-self: end; inline-size: var(--w, 0%); border-radius: 3px 0 0 3px; background: var(--aldelo-color-data-3); }
  .ac-variance__over { justify-self: start; inline-size: var(--w, 0%); border-radius: 0 3px 3px 0; background: var(--aldelo-color-danger); border-inline-start: 1px solid var(--aldelo-color-text-muted); }
  .ac-variance__under { border-inline-end: 1px solid var(--aldelo-color-text-muted); }
  .ac-table tfoot td, .ac-table tfoot th { border-block-start: 2px solid var(--aldelo-color-border-strong); color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }

  /* Password strength */
  .ac-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .ac-strength span { block-size: 4px; border-radius: 2px; background: var(--aldelo-color-data-track); }
  .ac-strength[data-level="1"] span:nth-child(-n+1) { background: var(--aldelo-color-danger); }
  .ac-strength[data-level="2"] span:nth-child(-n+2) { background: var(--aldelo-color-warning); }
  .ac-strength[data-level="3"] span:nth-child(-n+3) { background: var(--aldelo-color-success); }
  .ac-strength[data-level="4"] span { background: var(--aldelo-color-success); }
  .ac-reqs { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  .ac-reqs li::before { content: "○"; display: inline-block; inline-size: 1.4em; }
  .ac-reqs li[data-met="true"] { color: var(--aldelo-color-success); }
  .ac-reqs li[data-met="true"]::before { content: "✓"; }

  /* Weekday chips (recurrence) */
  .ac-day-chips { display: flex; flex-wrap: wrap; gap: var(--aldelo-space-150); margin: 0; padding: 0; border: 0; }
  .ac-day-chips label { position: relative; display: grid; place-items: center; min-inline-size: 44px; block-size: 36px; padding-inline: var(--aldelo-space-200); border: var(--aldelo-border-width) solid var(--aldelo-color-border); border-radius: var(--aldelo-radius-full); background: var(--aldelo-color-surface); font-size: var(--aldelo-font-size-label); cursor: pointer; }
  .ac-day-chips input { position: absolute; opacity: 0; pointer-events: none; }
  .ac-day-chips label:has(input:checked) { border-color: var(--aldelo-color-action); background: var(--aldelo-color-action); color: var(--aldelo-color-on-action); }
  .ac-day-chips label:has(input:focus-visible) { outline: 2px solid var(--aldelo-color-focus); outline-offset: 2px; }

  /* Device / session rows */
  .ac-device { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--aldelo-space-300); align-items: center; padding-block: var(--aldelo-space-300); border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  .ac-device:last-child { border-block-end: 0; }
  .ac-device__icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--aldelo-radius-md); background: var(--aldelo-color-surface-muted); color: var(--aldelo-color-text-muted); }
  .ac-device__name { color: var(--aldelo-color-text-strong); font-weight: var(--aldelo-font-weight-medium); }
  .ac-device__meta { color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); }
  /* Wrapper for rows rendered from data inside a longer list; rows keep their dividers */
  .ac-device-group { display: contents; }
  .ac-device-group > .ac-device:last-child { border-block-end: var(--aldelo-border-width) solid var(--aldelo-color-border); }
  @container main (max-width: 560px) { .ac-device { grid-template-columns: 40px minmax(0, 1fr); } .ac-device > :last-child { grid-column: 2; justify-self: start; } }

  /* Security health summary */
  .ac-health { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--aldelo-space-400); align-items: center; }
  .ac-health__ring { --v: .75; display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 50%; background: conic-gradient(var(--aldelo-color-success) calc(var(--v) * 360deg), var(--aldelo-color-data-track) 0); }
  .ac-health__ring span { display: grid; place-items: center; inline-size: 50px; block-size: 50px; border-radius: 50%; background: var(--aldelo-color-surface); color: var(--aldelo-color-text-strong); font-size: var(--aldelo-font-size-label); font-weight: var(--aldelo-font-weight-medium); }

  /* Callout: a quiet, non-alert info box inside forms and dialogs (previews, waiting states) */
  .ac-callout { display: block; padding: var(--aldelo-space-300) var(--aldelo-space-400); border-radius: var(--aldelo-radius-md); background: var(--aldelo-color-surface-muted); color: var(--aldelo-color-text); font-size: var(--aldelo-font-size-label); }
  .ac-callout .ac-stat-list li { padding-block: 4px; }

  /* Secondary line inside a choice card label */
  .ac-choice__hint { display: block; margin-block-start: 2px; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); }

  /* Recovery codes */
  .ac-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aldelo-space-200) var(--aldelo-space-500); margin: 0; padding: var(--aldelo-space-400); border-radius: var(--aldelo-radius-md); background: var(--aldelo-color-background-shade); font-family: var(--aldelo-font-family-mono); font-size: var(--aldelo-font-size-body-large); letter-spacing: .06em; list-style: none; }
  .ac-codes li[data-used="true"] { color: var(--aldelo-color-text-disabled); text-decoration: line-through; }
}

/* ==========================================================================
 * v1.6.0: Aldelo wordmark and brand lockups
 * The ALDELO letterforms are trademark artwork (assets/brand). Always render the
 * supplied SVG; never retype "ALDELO" in a font, stretch, outline, or recolor it
 * outside the brand palette. See references/brand-and-logo.md.
 * ======================================================================== */
@layer aldelo.components {
  .ac-wordmark { --_h: var(--ac-wordmark-size, var(--aldelo-size-wordmark)); display: inline-block; flex: none; block-size: var(--_h); inline-size: calc(var(--_h) * var(--ac-wordmark-ratio, 6.307)); color: var(--aldelo-color-brand-wordmark); line-height: 0; vertical-align: baseline; }
  .ac-wordmark svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
  .ac-wordmark svg { fill: currentColor; } /* symbols used via <use> inherit fill */
  .ac-wordmark--lg { --ac-wordmark-size: var(--aldelo-size-wordmark-large); }
  /* Product lockup artwork (ALDELO + product name in the wordmark letterforms at 60%, one symbol). */
  .ac-wordmark--lockup { --ac-wordmark-ratio: 10.054; }
  .ac-wordmark--lockup-sso { --ac-wordmark-ratio: 8.505; } /* ALDELO SSO lockup; pair with --lockup */
  .ac-wordmark--reverse { color: var(--aldelo-brand-white); }
  .ac-wordmark--bright { color: var(--aldelo-brand-bright-blue); }
  .ac-wordmark--mono { color: inherit; }
  @media (forced-colors: active) { .ac-wordmark { color: CanvasText; } }

  /* Lockup: wordmark + product name ("Cloud", "Pay", "Online Ordering"). The product
     name is set in the UI font, regular weight, on the wordmark's baseline. */
  .ac-brand:has(.ac-wordmark) { align-items: baseline; gap: calc(var(--ac-wordmark-size, var(--aldelo-size-wordmark)) * .42); }
  .ac-brand__product { color: var(--aldelo-color-text-strong); font-size: calc(var(--ac-wordmark-size, var(--aldelo-size-wordmark)) * 1.06); font-weight: var(--aldelo-font-weight-regular, 400); letter-spacing: -.01em; line-height: 1; }
  .ac-brand--reverse .ac-wordmark { color: var(--aldelo-brand-white); }
  .ac-brand--reverse .ac-brand__product { color: rgba(255, 255, 255, .92); }
  .ac-brand--lg { --ac-wordmark-size: var(--aldelo-size-wordmark-large); }

  /* Compact brand for tight bars: the app icon replaces the lockup below 860px. */
  .ac-brand__compact { display: none; }
  @media (max-width: 860px) {
    .ac-brand--responsive .ac-brand__full { display: none; }
    .ac-brand--responsive .ac-brand__compact { display: inline-grid; }
    .ac-brand--responsive { align-items: center; }
  }
  .ac-brand__full { display: inline-flex; align-items: baseline; gap: inherit; }

  /* Centered brand header above auth forms: lockup, then one quiet tagline. */
  .ac-auth__lockup--center { display: grid; justify-items: center; gap: var(--aldelo-space-300); margin-block-end: var(--aldelo-space-300); text-align: center; }
  .ac-auth__lockup--center .ac-auth__lockup-name { display: block; --ac-wordmark-size: 28px; background: none; color: inherit; line-height: 0; }
  :is(.ac-auth__panel, .ac-auth__main):has(.ac-auth__lockup--center) .ac-auth__heading { justify-items: center; text-align: center; }
  .ac-auth__lockup--center .ac-auth__lockup-tag { margin: 0; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-label); letter-spacing: .01em; }

  /* "Powered by ALDELO" for merchant-branded surfaces (storefront, kiosk, receipts) */
  .ac-powered-by { display: inline-flex; align-items: baseline; gap: 6px; color: var(--aldelo-color-text-muted); font-size: var(--aldelo-font-size-caption); text-decoration: none; white-space: nowrap; }
  .ac-powered-by .ac-wordmark { --ac-wordmark-size: 11px; }
}

/* Match system (spec §6, D1): the vendored [data-aldelo-theme="dark"] declarations,
 * copied verbatim, for data-aldelo-theme="system" when the OS prefers dark. */
@media (prefers-color-scheme: dark) {
  [data-aldelo-theme="system"] {
  color-scheme: dark;
  --aldelo-color-background: #09090b;
  --aldelo-color-background-shade: #0d0d10;
  --aldelo-color-surface: #121214;
  --aldelo-color-surface-muted: #1a1a1f;
  --aldelo-color-surface-raised: #1c1c20;
  --aldelo-color-surface-hover: #1c1c21;
  --aldelo-color-surface-inverse: #e4e4e7;
  --aldelo-color-text: #f4f4f5;
  --aldelo-color-text-muted: #a7a7b0;
  --aldelo-color-text-strong: #f4f4f5;
  --aldelo-color-text-disabled: #6b6b75;
  --aldelo-color-text-inverse: #151923;
  --aldelo-color-border: #34343a;
  --aldelo-color-border-strong: #45454d;
  --aldelo-color-control-border: #6a6a75;
  --aldelo-color-focus: #a5aeff;
  --aldelo-color-brand: #7c8cff;
  --aldelo-color-action: #7c8cff;
  --aldelo-color-action-hover: #92a0ff;
  --aldelo-color-action-pressed: #6978e8;
  --aldelo-color-action-soft: #24243b;
  --aldelo-color-on-action: #0b0b13;
  --aldelo-color-link: #a5b4ff;
  --aldelo-color-link-hover: #c0caff;
  --aldelo-color-success: #76e0a4;
  --aldelo-color-success-soft: #1d2420;
  --aldelo-color-warning: #f5c96a;
  --aldelo-color-warning-soft: #29251c;
  --aldelo-color-danger: #ff929f;
  --aldelo-color-danger-hover: #ffa8b2;
  --aldelo-color-danger-pressed: #f07a88;
  --aldelo-color-on-danger: #1a0b0e;
  --aldelo-color-danger-soft: #2b1f22;
  --aldelo-color-info: #8db8ff;
  --aldelo-color-info-soft: #1c2230;
  --aldelo-color-nav-section: #a5aeff;
  --aldelo-color-data-1: #7c8cff;
  --aldelo-color-data-2: #b19cff;
  --aldelo-color-data-3: #ffb968;
  --aldelo-color-data-4: #67c8ff;
  --aldelo-color-data-5: #ff8db7;
  --aldelo-color-data-track: #2a2a30;
  --aldelo-color-skeleton: #1f1f24;
  --aldelo-color-mark: #4a3f12;
  --aldelo-color-scrim: rgba(0, 0, 0, .58);
  --aldelo-color-brand-wordmark: var(--aldelo-brand-white);
  --aldelo-shadow-shell: 0 10px 30px rgba(0, 0, 0, .24);
  --aldelo-shadow-panel: 0 1px 0 rgba(255, 255, 255, .025);
  --aldelo-shadow-interactive: 0 16px 38px rgba(0, 0, 0, .24);
  --aldelo-shadow-control: 0 8px 20px rgba(0, 0, 0, .22);
  --aldelo-shadow-overlay: 0 24px 64px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  }
}
/* === Aldelo Cloud developer docs: overlay (spec 2026-09-28 §4) ===========
 * Loaded after the vendored design system inside docs.css. Semantic
 * --aldelo-* tokens only; TestDocsOverlayUsesOnlyTokens enforces it. No id
 * selectors (a #rule would read as a hex colour to that test).
 * Recorded design-system deviations (spec §9):
 *   DOCS-1  code blocks have no copy button (no script under the IdP CSP);
 *           text selection works and every block is keyboard-scrollable.
 *   DOCS-2  no JS navigation drawer; below 860px a native <details> "Menu".
 * Match system mirrors only the dark TOKEN block (docs_css_test.go). The one
 * dark-scoped component rule, components.css `[data-aldelo-theme="dark"]
 * .ac-banner--elevated`, is not mirrored: the docs use no banner. DR-44 must
 * mirror it if it adopts "system" with banners (review minor 13).
 * ======================================================================== */

/* No motion (spec §4 accessibility gate). */
:root {
  --aldelo-motion-hover: 0ms;
  --aldelo-motion-color: 0ms;
  --aldelo-motion-spatial: 0ms;
  --aldelo-motion-screen: 0ms;
  --aldelo-motion-overlay: 0ms;
}

/* Top bar ---------------------------------------------------------------- */
/* Target size (spec §4): the brand link is >= 24px tall around an 18px
 * wordmark (>= 44px on coarse pointers: see the end of this file). */
.ac-brand {
  min-block-size: var(--aldelo-size-control-small);
}
/* Review I-1 (fix round 1): the label is a spec §4 top-bar element with no
 * breakpoint carve-out, so it stays visible at every width — the earlier
 * <=860px hide was wider than the defect (the overflow only happened at
 * 320px; 390px was always fine) and dropped the only visible product text
 * once the lockup is already an icon. Fixed instead by letting the bar wrap:
 * the vendored .ac-topbar is display:flex with no flex-wrap (initial value
 * nowrap), so the label and the theme form now compete for one row's width
 * with nothing to fall back on. Turning on wrap costs nothing at any width
 * that already fits everything on one line (1440/1024/390: unchanged,
 * ui_audit.py confirms) and only engages exactly where content demands it
 * (320px): brand + label keep row 1, the theme form (its own flex item)
 * drops to row 2 once it no longer fits after them. */
.ac-topbar {
  flex-wrap: wrap;
}
/* Review N-1 (Re-review 1): the vendored shell fixes the topbar's OWN grid
 * row at a flat --aldelo-size-topbar (68px) and keeps the bar
 * position:sticky at every width (aldelo-cloud.components.css:108-120).
 * Once flex-wrap above turns the bar into two rows at ~320-430px, the
 * wrapped content needs more than 68px: the grid row still stretches the
 * flex container to exactly 68px (CSS Grid's default align-self:stretch),
 * so the second row overflows that box with nothing behind it — no clear
 * space above the brand mark, the theme form's bottom edge hangs past the
 * bar's own border, and a coarse pointer's 44px targets push it far enough
 * to overlap the "Menu" disclosure below. Because the bar is STICKY, those
 * overhanging controls then float over the page's own text while
 * scrolling, and the html-level scroll-padding-block-start (keyed to the
 * flat 68px) under-clears the real, now-taller bar (WCAG 2.4.11, focus not
 * obscured). Fix, well above the ~400-430px wrap threshold: let the row
 * size to its real content and take the bar out of position:sticky — a
 * non-sticky element can never overlap what comes after it while
 * scrolling, so no scroll-padding arithmetic is needed at all here. */
@media (max-width: 560px) {
  .ac-app {
    grid-template-rows: auto minmax(0, 1fr);
  }
  .ac-topbar {
    position: static;
    padding-block: var(--aldelo-space-300);
  }
}
.docs-topbar__label {
  color: var(--aldelo-color-text-muted);
  font-size: var(--aldelo-font-size-label);
  white-space: nowrap;
}
.docs-theme {
  display: flex;
  align-items: center;
  gap: var(--aldelo-space-200);
}
.docs-theme__select {
  inline-size: auto;
}

/* Navigation: the sidebar from 861px, a native disclosure below. --------- */
.docs-nav-list {
  display: grid;
  gap: var(--aldelo-space-050);
  margin: 0;
  padding: 0;
  list-style: none;
}
.docs-menu {
  display: none;
}
@media (max-width: 860px) {
  .docs-sidebar {
    display: none;
  }
  .docs-menu {
    display: block;
    margin: var(--aldelo-space-400) var(--aldelo-density-mobile-content-inline) 0;
    border: var(--aldelo-border-width) solid var(--aldelo-color-border);
    border-radius: var(--aldelo-radius-md);
    background: var(--aldelo-color-surface);
  }
  .docs-menu__summary {
    display: flex;
    align-items: center;
    min-block-size: var(--aldelo-size-touch-target);
    padding-inline: var(--aldelo-space-400);
    cursor: pointer;
    font-weight: var(--aldelo-font-weight-medium);
  }
  .docs-menu__nav {
    padding: 0 var(--aldelo-space-300) var(--aldelo-space-400);
  }
  /* Explicit, in addition to the UA's native content-visibility hiding of a
   * closed <details>: collapses the layout box (not just paint) so any
   * geometry-based check sees zero size while closed, matching real
   * (keyboard and pointer) unreachability — links inside a closed <details>
   * are already out of the tab order and the accessibility tree, so this
   * changes nothing reachable (task-8-review.md I "Named-risk checks" #1).
   * One real, small loss (review Minor 6): Chromium's find-in-page
   * auto-expands a closed <details> whose content is content-visibility:
   * hidden, but cannot find text under display:none. The sidebar duplicates
   * every link below 860px anyway (docs-sidebar is display:none there, so
   * only one copy is ever in the DOM's visible/searchable state at a time),
   * so the practical loss is: find-in-page can no longer locate a mobile
   * nav item's label text before the menu is opened. Accepted knowingly. */
  .docs-menu:not([open]) .docs-menu__nav {
    display: none;
  }
}

/* Page ------------------------------------------------------------------- */
.docs-page {
  display: grid;
  /* Explicit single track (not the default `auto`, whose min sizing function
   * is treated as min-content for intrinsic sizing): without this, the
   * implicit column sizes to its widest row's min-content and every row
   * stretches to match, overflowing the viewport. Overridden at >=1200px
   * below. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--aldelo-space-800);
  padding: var(--aldelo-density-comfortable-page-start) var(--aldelo-density-comfortable-content-inline) var(--aldelo-space-800);
}
@media (max-width: 860px) {
  .docs-page {
    padding-inline: var(--aldelo-density-mobile-content-inline);
  }
}
.docs-article {
  display: grid;
  /* Same grid-blowout guard as .docs-page: the header, headings and
   * paragraphs are rows sharing one implicit column; without this the
   * column's intrinsic size is the widest row's min-content (e.g. the page
   * header's one-line text), and every row stretches to match, overflowing
   * the viewport at narrow widths. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--aldelo-space-500);
  align-content: start;
  min-inline-size: 0;
  max-inline-size: var(--aldelo-size-reading-max);
  font-size: var(--aldelo-font-size-body-large);
}
/* Inline code in prose must break like text (spec: prose reflows at 320px).
 * Scoped to .docs-article so it never touches a code BLOCK: the vendored
 * .ac-code is white-space: pre (aldelo-cloud.components.css:1530, inherited
 * by the code inside it), which already disables wrapping outright — an
 * overflow-wrap override there would be a no-op (review Minor 7), so this
 * rule is deliberately NOT duplicated for .docs-code. "JSON never wraps"
 * (spec §4) is enforced by the vendored white-space: pre, not by us.
 * Review N-2 (Re-review 1): `anywhere`, unlike `break-word`, counts soft-
 * wrap opportunities in MIN-CONTENT sizing, so an auto-layout table's code
 * column shrinks toward nothing and every acr/error-code value splits
 * mid-word even at widths with plenty of room (measured: the 1024px acr
 * cell went from 222px/1 line to 97px/3 lines). `break-word` still breaks
 * a line that actually overflows its box — 320px reflow (inline code in
 * prose) is unaffected — but leaves the min-content calculation alone, so
 * table columns size to their content again. */
.docs-article code {
  overflow-wrap: break-word;
}
.docs-article--wide {
  max-inline-size: none;
}
.docs-article h2 {
  margin-block-start: var(--aldelo-space-600);
}
.docs-article :is(ul, ol) {
  display: grid;
  /* Same grid-blowout guard as .docs-page/.docs-article (a list item is a
   * row sharing one implicit column). This one was latent, masked by
   * `overflow-wrap: anywhere` shrinking the max-content of any long inline
   * code inside a list item — switching to `break-word` (N-2, above) no
   * longer shrinks max-content, so the pre-existing gap here surfaced as a
   * fresh 320px overflow on /api/organizations (found while verifying N-2,
   * not part of the original review findings; fixed in the same commit). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--aldelo-space-150);
  margin: 0;
  padding-inline-start: var(--aldelo-space-600);
}
.docs-toc {
  display: none;
}
@media (min-width: 1200px) {
  .docs-page {
    grid-template-columns: minmax(0, var(--aldelo-size-reading-max)) minmax(0, 1fr);
    align-items: start;
  }
  .docs-page:has(.docs-article--wide) {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
  .docs-toc {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--aldelo-size-topbar) + var(--aldelo-space-600));
  }
}
.docs-toc__title {
  margin-block-end: var(--aldelo-space-200);
  color: var(--aldelo-color-text-muted);
  /* --aldelo-font-size-micro is 10px (ui_audit.py's small-text floor is
   * 11px); the vendored .ac-nav-group__label overline uses the same micro
   * size but is explicitly exempted by the audit script's own allowlist
   * (ui_audit.py CONTRAST_JS). This is the same overline-label pattern
   * under a docs-specific class name the exemption doesn't reach, so it
   * uses the next token up instead of widening any exemption. */
  font-size: var(--aldelo-font-size-caption);
  font-weight: var(--aldelo-font-weight-strong);
  letter-spacing: var(--aldelo-letter-spacing-overline);
  text-transform: uppercase;
}
.docs-toc__list {
  display: grid;
  gap: var(--aldelo-space-050);
  margin: 0;
  padding: 0;
  list-style: none;
}
.docs-toc__list a {
  display: block;
  min-block-size: 24px;
  padding-block: var(--aldelo-space-050);
  color: var(--aldelo-color-text-muted);
  font-size: var(--aldelo-font-size-label);
}

/* Code blocks (ac-code is the vendored block style) ----------------------- */
.docs-code {
  display: grid;
  gap: var(--aldelo-space-100);
  min-inline-size: 0;
  margin: 0;
}
.docs-code__label {
  color: var(--aldelo-color-text-muted);
  font-size: var(--aldelo-font-size-caption);
  font-weight: var(--aldelo-font-weight-medium);
  letter-spacing: var(--aldelo-letter-spacing-overline);
  text-transform: uppercase;
}

/* Endpoint cards (reference) --------------------------------------------- */
.docs-endpoint {
  display: grid;
  gap: var(--aldelo-space-400);
  min-inline-size: 0;
  padding: var(--aldelo-space-500);
  border: var(--aldelo-border-width) solid var(--aldelo-color-border);
  border-radius: var(--aldelo-radius-md);
  background: var(--aldelo-color-surface);
}
.docs-endpoint h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aldelo-space-200);
  margin: 0;
}
.docs-endpoint__path {
  overflow-wrap: anywhere;
}
.docs-method {
  font-family: var(--aldelo-font-family-mono);
}

/* Footer ------------------------------------------------------------------ */
.docs-footer {
  padding: var(--aldelo-space-600) var(--aldelo-density-comfortable-content-inline);
  border-block-start: var(--aldelo-border-width) solid var(--aldelo-color-border);
  color: var(--aldelo-color-text-muted);
  font-size: var(--aldelo-font-size-label);
}

/* Coarse pointers: 44px targets (spec §4). Last, so it wins over the
 * 24px rules above at equal specificity. */
@media (pointer: coarse) {
  .ac-brand,
  .docs-toc__list a {
    min-block-size: var(--aldelo-size-touch-target);
  }
}