/* ==========================================================================
   Accred Premium UI foundation — v4.1.0 Clarity (2026-11-06)
   v4.1.0: row headers (tbody th, scope="row") no longer take the sticky
   column-header style, so a wide table never pins its name cells to the
   top of the page (Aware). Ships with boot splash v5 and the suite nav
   fast switch (§4.9).
   v4.0.6: AI steps carry a status (data-status: queued, running, done,
   failed, approval) and a trailing slot (.acc-steps__meta for a time,
   .acc-steps__action for Undo), so a live step timeline needs no own CSS;
   an ol/ul .acc-chat drops its list markers.
   v4.0.5: one calm app switch. A page fades in (140 ms, no rise) and its
   header holds still, so the boot splash (v4) hands over to a title and
   subtitle already in place; only the content below fades in. Tables: a
   real header row (12.5 px / 500, padded, a hairline under it, sticky on
   wide pages), and on wide pages the first column takes a fair share
   instead of all the spare width, so no dead gap opens before the
   metadata. New .acc-gridlist for lists laid out as grid rows.
   v4.0.4: AI chat primitives (.acc-chat, .acc-steps, .acc-chips, .acc-composer),
   one look for every AI surface, with the Accred mark as the AI avatar.
   v4.0.2: a table in a group with a header scrolls sideways again on phones
   (it was clipped with overflow: clip since v2.5).
   v4.0.1: the fluid-first-column table rule applies only from a 1,600 px main
   area (tables no longer overflow their group below that); a table in a
   headerless group sits flat; .acc-preview lists have no indent.
   v4.0.0: design system 3.0 "Clarity" (owner approved 2026-11-06). Geist
   Variable UI font (self-hosted at /fonts/geist-latin-wght-normal.woff2),
   28 px page titles and 32 px figures, a one-line page subtitle, radii
   7 / 9 / 14 / 16, layered depth (hairline + soft shadow on groups, hover
   lift on tiles), a cool light ground with the sidebar on it, a surface top
   bar (navy kept as data-topbar="brand" on .acc-shell), layered dark
   neutrals, right-clustered table columns, delta chips, teaching empty
   states, and shared first-run and status primitives promoted from the
   apps: .acc-ring, .acc-setup, .acc-checklist--guided, .acc-gauge,
   .acc-preview, .acc-split, .acc-wizard, .acc-story, .acc-intent(s),
   .acc-done. The v4 layer is section 99 at the end of this file. Class API
   otherwise unchanged; revert = re-vendor v3.3.0.
   v3.3.0: fluid pages. .acc-page no longer caps at 1,280 px or centres; it
   fills the main area with a gutter that grows from 24 to 48 px (a container
   query on .acc-shell__main). .acc-page--narrow / --reading cap reading pages
   at 60rem and align left. The metric row uses auto-fit, so tiles fill the row.
   v3.2.0: no text below 12 px. Sidebar section labels, nav and tab count
   badges, the kbd hint, small avatars, checklist and stepper marks and the
   coachmark step now use --text-xs (12 px) instead of 10/11 px (DEV-008,
   polish-b PB-18/25/26).
   v3.1.0: .acc-progress-panel (stage, elapsed, may-I-leave note, inline
   result) for long actions, and a visible focus ring on custom select and
   combobox triggers. Pairs with accred-ux.js v1.0.0 (overlay focus and
   Escape, leave guard, elapsed clock). UX audit 2026-11-05 SYS-08/09/10.
   v3.0.3: a disabled or aria-disabled switch that is on turns grey instead
   of green, so a locked setting never looks clickable.
   v3.0.2: page header actions shrink and wrap inside the header, so two
   long action labels no longer push a phone page sideways.
   v3.0.1: sticky action bars ([data-sticky="true"], .acc-savebar) stick to
   the screen on any page, a table wrap contains its visually hidden labels
   (no sideways scroll at 400 px), a dialog with no body content has no
   empty padded body, and a stacked setting's value is left-aligned.
   v3.0.0: one quiet system. Desktop density (36 px controls, 14 px body,
   24 px page titles; 44 px controls and 15 px body on touch screens), one
   single-row page header (title left, actions right), tighter cards, tables,
   lists, metrics, tabs, dialogs, and empty states, smaller radii (6 / 8 / 10 /
   12), shorter motion (100 / 150 / 200 ms, route content fades without
   rising), and unused classes and tokens removed (column resizer, panel,
   button group, avatar stack, top route progress, prose, page bleed, top-bar
   group and divider). The class API that apps use is otherwise
   unchanged, and v2.7.1 (the Settings save bar and rail stick to the
   screen) is included. Rules: ACCRED_PRODUCT_DESIGN_SYSTEM.md v2.0. Earlier versions:
   HISTORY.md.
   Canonical copy: Accred Landing/docs/design-system/accred-premium.css
   Each app vendors this file unchanged (src/styles/accred-premium.css or
   equivalent) and layers app-specific CSS after it.

   Layers
     1. Tokens (light + dark)       :root / :root.dark, [data-theme="dark"]
     2. Base                         reset refinements, typography, focus
     3. Motion                       durations, easings, keyframes
     4. Shell (Atlas)                .acc-shell, .acc-topbar, .acc-apptabs, .acc-sidebar
                                     (.acc-launcher, the app launcher menu, sits with .acc-menu in 5)
     5. Components                   .acc-btn, .acc-input, .acc-card, …
     5b. Microsoft 365 connection    .acc-connection__* (v2.6.0)
     5c. Settings                    .acc-settings*, .acc-setting*, .acc-lock, .acc-savebar (v2.7.0)
     6. States                       .acc-empty, .acc-skeleton, .acc-banner
     7. Help & onboarding            .acc-checklist, .acc-coachmark, .acc-kbd
     8. Utilities                    .acc-tabular, .acc-sr-only, …

   Rules
     - Semantic tokens only. No raw palette values outside this file.
     - Every `.acc-*` class works without JavaScript except open/close state,
       which is driven by [data-state="open"|"closed"] or the `hidden` attr.
     - Tailwind apps map these tokens in tailwind.config and may compose the
       same visual spec with utilities; the measurements here are the contract.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Surfaces */
  --background: 240 6% 96%;              /* #f4f4f5  grouped grey ground */
  --foreground: 240 6% 8%;               /* #131315  */
  --card: 0 0% 100%;                     /* white group */
  --card-foreground: 240 6% 8%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 6% 8%;
  --muted: 240 5% 94%;                   /* #eeeef0  (Inset gallery: 92%; lifted so every product accent stays AA on it) */
  --muted-foreground: 240 4% 40%;        /* #626269  5.5:1 on ground, 5.3:1 on muted */
  --subtle: 240 5% 97%;                  /* row hover */
  --accent: 211 100% 95%;                /* blue tint for selection */
  --accent-foreground: 211 100% 36%;     /* blue text on tints, 5.6:1 on the 12% tint */

  /* Interaction */
  --primary: 211 100% 43%;               /* #006edb system blue, darkened to 5.1:1 with white */
  --primary-hover: 211 100% 38%;
  --primary-active: 211 100% 34%;
  --primary-foreground: 0 0% 100%;
  --primary-soft: 211 100% 94%;          /* tinted backgrounds for primary chips */
  --primary-fill: 211 100% 43%;          /* filled controls with white text (button, checkbox, chip) */
  --primary-fill-hover: 211 100% 38%;
  --secondary: 240 5% 94%;
  --secondary-foreground: 240 6% 8%;

  /* Inset fills */
  --fill: 240 4% 49% / 0.13;             /* segmented track, field fill, neutral chips, skeleton blocks */
  --skeleton-sheen: 0 0% 100% / 0.5;     /* the sweep across a skeleton block (v2.5.3) */
  --thumb: 0 0% 100%;                    /* segmented thumb */
  --tile-glyph: 0 0% 100%;               /* glyph on a coloured icon tile */
  --switch-on: 142 64% 32%;              /* green switch track, 4.4:1 on card */
  --destructive-tint-foreground: 358 75% 40%;  /* red text on the 12% red tint */

  /* Status */
  --success: 160 84% 27%;                /* #0b7f58  AA 4.7:1 on page ground and soft tint */
  --success-soft: 152 76% 95%;
  --warning: 32 95% 34%;                 /* #a95c04  AA 4.6:1 */
  --warning-soft: 40 100% 95%;
  --destructive: 350 78% 47%;            /* #d51a3a  AA 4.7:1 */
  --destructive-hover: 350 78% 41%;
  --destructive-foreground: 0 0% 100%;
  --destructive-soft: 350 100% 97%;
  --info: 200 90% 35%;                   /* #0974aa  AA 4.7:1 */
  --info-soft: 204 100% 96%;

  /* Lines and focus */
  --border: 240 5% 87%;                  /* separators */
  --border-strong: 240 4% 78%;           /* pressed outline, disabled field edge */
  --input: 240 5% 88%;
  --control-border: 240 3% 55%;          /* field edge, checkbox, switch off, chevrons: 3.5:1 on card, 3.2:1 on ground */
  --ring: 211 100% 50%;
  --ring-soft: 211 100% 50% / 0.25;

  /* Suite bar (navy in every theme) — Atlas top bar */
  --suitebar: 216 69% 9%;                /* #071426 */
  --suitebar-elevated: 216 58% 18%;      /* #13284a search well */
  --suitebar-foreground: 0 0% 100%;
  --suitebar-muted: 216 28% 74%;         /* #a9b8cf tabs, icons */
  --suitebar-subtle: 216 26% 66%;        /* #8ea3c2 placeholder */
  --suitebar-border: 216 49% 22%;        /* #1d3354 */
  --suitebar-hover: 0 0% 100% / 0.06;
  --suitebar-avatar: 216 49% 32%;        /* #2a4a7a */

  /* App sidebar (light) — Atlas */
  --sidebar: 0 0% 100%;
  --sidebar-elevated: 240 5% 97%;
  --sidebar-foreground: 240 4% 26%;      /* #424247 */
  --sidebar-muted: 240 4% 40%;           /* #626269 */
  --sidebar-accent: 211 100% 43%;        /* kept for app compatibility; no longer drawn as a stripe */
  --sidebar-active: 211 100% 95%;        /* blue tint, same as --accent */
  --sidebar-border: 240 5% 90%;
  --sidebar-hover: 240 5% 94%;

  /* Product identity */
  --suite-product-hub: #1556b3;
  --suite-product-consult: #067a60;     /* AA 4.7:1 on page ground and muted */
  --suite-product-migrate: #6545c6;
  --suite-product-connect: #0b7691;     /* AA 4.6:1 */
  --suite-product-assess: #af5109;      /* AA 4.6:1 */
  --suite-product-manage: #be185d;
  --suite-product-protect: #2f7414;     /* forest, AA 5.0:1 or more (hero tint lowest) */
  --suite-product-license: #6b6500;     /* olive, AA 5.3:1 */
  --suite-product-fleet: #4b5563;       /* graphite, AA 6.5:1 */
  --suite-product-devices: #86198f;     /* plum, AA 6.9:1 */
  --suite-product-hub-on-dark: #7fb3ff;
  --suite-product-consult-on-dark: #4fd9a8;
  --suite-product-migrate-on-dark: #b8a3ff;
  --suite-product-connect-on-dark: #4fd6f0;
  --suite-product-assess-on-dark: #ffb454;
  --suite-product-manage-on-dark: #f9a8d4;
  --suite-product-protect-on-dark: #9ee27a;
  --suite-product-license-on-dark: #e6d65a;
  --suite-product-fleet-on-dark: #cbd2db;
  --suite-product-devices-on-dark: #e879f9;

  /* Charts (categorical, max five) */
  --chart-1: 243 75% 59%;
  --chart-2: 199 89% 40%;
  --chart-3: 160 84% 29%;
  --chart-4: 32 95% 44%;
  --chart-5: 280 60% 55%;

  /* Geometry */
  --radius-xs: 0.375rem;                /* 6 */
  --radius-sm: 0.375rem;                /* 6  small buttons and fields */
  --radius-md: 0.5rem;                  /* 8  buttons, fields */
  --radius-lg: 0.625rem;                /* 10 groups, tiles, tables */
  --radius-xl: 0.75rem;                 /* 12 dialogs */
  --radius: var(--radius-md);

  /* Elevation — resting groups have none; only floating surfaces lift */
  --shadow-xs: 0 0 #0000;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 10px 30px rgb(0 0 0 / 0.12), 0 1px 3px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 20px 50px rgb(0 0 0 / 0.18), 0 2px 8px rgb(0 0 0 / 0.06);
  --shadow-ring: 0 0 0 1px hsl(var(--border));
  --shadow-thumb: 0 2px 6px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(0 0 0 / 0.06);  /* segmented thumb */

  /* Drawn icons (masks and backgrounds, never glyphs) */
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.5 1.5 7 7l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M1.5 6 5 2.5 8.5 6M1.5 10 5 13.5 8.5 10' fill='none' stroke='%23636369' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Shell measurements */
  --shell-sidebar: 14.5rem;             /* 232 */
  --shell-sidebar-collapsed: 4rem;
  --shell-topbar: 3.75rem;              /* 60 */
  --shell-contextbar: 2.75rem;
  --shell-inspector: 25rem;
  --shell-list: 20rem;
  --page-pad: 1.5rem;
  --page-pad-x: clamp(1.5rem, 2.5cqi, 3rem); /* v3.3.0: gutter grows with the main area, 24 to 48 px */
  --page-pad-compact: 1rem;
  --content-max: none;                  /* v3.3.0: pages are fluid; kept so app CSS that reads it still parses */
  --reading-max: 60rem;                 /* v3.3.0: reading-heavy pages (settings forms, articles), left-aligned */
  --prose-max: 68ch;

  /* Controls */
  --control-h: 2.25rem;                 /* 36 (44 on touch, below) */
  --control-h-sm: 2rem;                 /* 32 */
  --control-h-lg: 2.5rem;               /* 40 */
  --touch-min: 2.75rem;

  /* Typography — system stack (owner decision pending: Geist or system; see the v2.5 notes) */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-rounded: ui-rounded, var(--font-sans);  /* metric values */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.8125rem;  /* 13 */
  --text-base: 0.875rem; /* 14 (15 on touch) */
  --text-md: 1rem;       /* 16 */
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: 1.25rem;    /* 20 */
  --text-2xl: 1.5rem;    /* 24 */
  --text-title: 1.5rem;  /* page title, 24 */
  --tracking-tight: -0.012em;
  --tracking-tighter: -0.02em;
  --tracking-eyebrow: 0.06em;

  /* Motion */
  --dur-fast: 100ms;
  --dur-base: 150ms;
  --dur-slow: 200ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Z-index scale */
  --z-sticky: 20;
  --z-overlay: 40;
  --z-sheet: 50;
  --z-dialog: 60;
  --z-popover: 70;
  --z-toast: 80;
  --z-tooltip: 90;
}

/* Touch (v3.0): on coarse pointers controls grow to 44 px and body text to 15 px.
   The Atlas shell restates its own sizes on .acc-topbar and .acc-sidebar, so it keeps them. */
@media (pointer: coarse) {
  :root { --control-h: 2.75rem; --control-h-sm: 2.25rem; --control-h-lg: 3rem; --text-base: 0.9375rem; }
}

:root.dark,
.dark,
[data-theme="dark"] {
  color-scheme: dark;

  --background: 0 0% 0%;                 /* black grouped ground */
  --foreground: 240 10% 96%;
  --card: 240 3% 11%;                    /* #1c1c1e group */
  --card-foreground: 240 10% 96%;
  --popover: 240 3% 14%;
  --popover-foreground: 240 10% 96%;
  --muted: 240 3% 20%;
  --muted-foreground: 240 5% 64%;        /* 6.5:1 on group, 4.9:1 on muted */
  --subtle: 240 3% 15%;
  --accent: 211 60% 18%;
  --accent-foreground: 211 100% 72%;

  --primary: 211 100% 66%;               /* blue as text and focus on dark */
  --primary-hover: 211 100% 72%;
  --primary-active: 211 100% 60%;
  --primary-foreground: 240 10% 4%;
  --primary-soft: 211 60% 18%;
  --primary-fill: 211 100% 45%;          /* filled controls keep white text */
  --primary-fill-hover: 211 100% 50%;
  --secondary: 240 3% 20%;
  --secondary-foreground: 240 10% 96%;

  --fill: 240 4% 55% / 0.24;
  --skeleton-sheen: 0 0% 100% / 0.07;
  --thumb: 240 2% 39%;
  --tile-glyph: 240 3% 11%;
  --switch-on: 142 60% 45%;
  --destructive-tint-foreground: 358 100% 74%;
  --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M1.5 6 5 2.5 8.5 6M1.5 10 5 13.5 8.5 10' fill='none' stroke='%23a1a1aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --success: 158 64% 52%;
  --success-soft: 158 40% 14%;
  --warning: 38 92% 60%;
  --warning-soft: 38 50% 14%;
  --destructive: 350 85% 66%;
  --destructive-hover: 350 85% 72%;
  --destructive-foreground: 350 30% 8%;
  --destructive-soft: 350 40% 15%;
  --info: 200 90% 62%;
  --info-soft: 204 45% 15%;

  --border: 240 3% 22%;
  --border-strong: 240 3% 32%;
  --input: 240 3% 24%;
  --control-border: 240 3% 48%;          /* 3.9:1 on group */
  --ring: 211 100% 62%;
  --ring-soft: 211 100% 62% / 0.3;

  --suitebar: 222 40% 4%;
  --suitebar-elevated: 222 30% 11%;
  --suitebar-border: 222 22% 15%;
  --suitebar-avatar: 222 30% 22%;

  --sidebar: 240 3% 7%;
  --sidebar-elevated: 240 3% 11%;
  --sidebar-foreground: 240 6% 84%;
  --sidebar-muted: 240 5% 64%;
  --sidebar-accent: 211 100% 66%;
  --sidebar-active: 211 60% 18%;
  --sidebar-border: 240 3% 16%;
  --sidebar-hover: 240 3% 15%;

  /* Product accents switch to their on-dark tints, so accent text on dark surfaces stays AA. */
  --suite-product-hub: var(--suite-product-hub-on-dark);
  --suite-product-consult: var(--suite-product-consult-on-dark);
  --suite-product-migrate: var(--suite-product-migrate-on-dark);
  --suite-product-connect: var(--suite-product-connect-on-dark);
  --suite-product-assess: var(--suite-product-assess-on-dark);
  --suite-product-manage: var(--suite-product-manage-on-dark);
  --suite-product-protect: var(--suite-product-protect-on-dark);
  --suite-product-license: var(--suite-product-license-on-dark);
  --suite-product-fleet: var(--suite-product-fleet-on-dark);
  --suite-product-devices: var(--suite-product-devices-on-dark);

  --shadow-xs: 0 0 #0000;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-md: 0 10px 30px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.06);
  --shadow-lg: 0 20px 50px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.08);
}

/* Product word accents (lockup app name) */
.suite-product-word--hub { color: var(--suite-product-hub); }
.suite-product-word--consult { color: var(--suite-product-consult); }
.suite-product-word--connect { color: var(--suite-product-connect); }
.suite-product-word--migrate { color: var(--suite-product-migrate); }
.suite-product-word--assess { color: var(--suite-product-assess); }
.suite-product-word--manage { color: var(--suite-product-manage); }
.suite-product-word--protect { color: var(--suite-product-protect); }
.suite-product-word--license { color: var(--suite-product-license); }
.suite-product-word--fleet { color: var(--suite-product-fleet); }
.suite-product-word--devices { color: var(--suite-product-devices); }
.dark .suite-product-word--hub, .acc-on-dark .suite-product-word--hub, [data-theme="dark"] .suite-product-word--hub { color: var(--suite-product-hub-on-dark); }
.dark .suite-product-word--consult, .acc-on-dark .suite-product-word--consult, [data-theme="dark"] .suite-product-word--consult { color: var(--suite-product-consult-on-dark); }
.dark .suite-product-word--connect, .acc-on-dark .suite-product-word--connect, [data-theme="dark"] .suite-product-word--connect { color: var(--suite-product-connect-on-dark); }
.dark .suite-product-word--migrate, .acc-on-dark .suite-product-word--migrate, [data-theme="dark"] .suite-product-word--migrate { color: var(--suite-product-migrate-on-dark); }
.dark .suite-product-word--assess, .acc-on-dark .suite-product-word--assess, [data-theme="dark"] .suite-product-word--assess { color: var(--suite-product-assess-on-dark); }
.dark .suite-product-word--manage, .acc-on-dark .suite-product-word--manage, [data-theme="dark"] .suite-product-word--manage { color: var(--suite-product-manage-on-dark); }
.dark .suite-product-word--protect, .acc-on-dark .suite-product-word--protect, [data-theme="dark"] .suite-product-word--protect { color: var(--suite-product-protect-on-dark); }
.dark .suite-product-word--license, .acc-on-dark .suite-product-word--license, [data-theme="dark"] .suite-product-word--license { color: var(--suite-product-license-on-dark); }
.dark .suite-product-word--fleet, .acc-on-dark .suite-product-word--fleet, [data-theme="dark"] .suite-product-word--fleet { color: var(--suite-product-fleet-on-dark); }
.dark .suite-product-word--devices, .acc-on-dark .suite-product-word--devices, [data-theme="dark"] .suite-product-word--devices { color: var(--suite-product-devices-on-dark); }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
html, body, #root, #app { min-height: 100%; min-height: 100dvh; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.45;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: normal;
  letter-spacing: -0.003em;
}
::selection { background: hsl(var(--primary) / 0.18); color: hsl(var(--foreground)); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: var(--tracking-tight); text-wrap: balance; }
p { text-wrap: pretty; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.925em; }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.acc-on-dark :focus-visible { outline-color: #fff; outline-offset: -2px; }
[hidden] { display: none !important; }
[inert] { pointer-events: none; }

/* Scrollbars — quiet */
* { scrollbar-width: thin; scrollbar-color: hsl(var(--muted-foreground) / 0.28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.28); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background-color: hsl(var(--muted-foreground) / 0.45); }

/* Type roles */
.acc-page-title { font-size: var(--text-title); line-height: 1.2; font-weight: 650; letter-spacing: var(--tracking-tighter); color: hsl(var(--foreground)); }
.acc-section-title { font-size: var(--text-md); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.acc-card-title { font-size: var(--text-base); line-height: 1.35; font-weight: 600; letter-spacing: -0.005em; }
.acc-body { font-size: var(--text-base); line-height: 1.5; }
.acc-compact { font-size: var(--text-sm); line-height: 1.45; }
.acc-label { font-size: var(--text-xs); line-height: 1.35; font-weight: 500; color: hsl(var(--muted-foreground)); }
.acc-eyebrow { font-size: var(--text-xs); line-height: 1.3; font-weight: 500; letter-spacing: 0; text-transform: none; color: hsl(var(--muted-foreground)); }   /* v2.5: sentence case */
:is(.acc-card, .acc-sheet, .acc-dialog) .acc-eyebrow { font-size: var(--text-xs); }
.acc-muted { color: hsl(var(--muted-foreground)); }
.acc-tabular { font-variant-numeric: tabular-nums; }
.acc-mono { font-family: var(--font-mono); font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   3. Motion
   -------------------------------------------------------------------------- */
@keyframes acc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes acc-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes acc-rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes acc-scale-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes acc-scale-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.97); } }
@keyframes acc-pop-in { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes acc-slide-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes acc-slide-out-right { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(16px); } }
@keyframes acc-slide-in-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes acc-slide-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes acc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes acc-spin { to { transform: rotate(360deg); } }
@keyframes acc-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@keyframes acc-pulse-ring { 0% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.45); } 100% { box-shadow: 0 0 0 10px hsl(var(--primary) / 0); } }

.acc-anim-rise { animation: acc-rise-in var(--dur-base) var(--ease-out) both; }
.acc-page-enter { animation: acc-fade-in var(--dur-base) var(--ease-out) both; }   /* v3.0: fade only */
.acc-spin { animation: acc-spin 0.8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .acc-spin, .acc-progress--indeterminate::after { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
}

/* --------------------------------------------------------------------------
   4. Shell — Atlas (v2.0)
   +------------------------------------------------------------+
   | topbar (60, navy, full width): toggle · brand · app tabs … |
   +-----------+------------------------------------------------+
   | sidebar   | contextbar (44, optional)                      |
   | (light)   | page / workspace                               |
   +-----------+------------------------------------------------+
   DOM order inside .acc-shell: .acc-topbar, .acc-sidebar, .acc-shell__main
   -------------------------------------------------------------------------- */
.acc-shell {
  display: grid;
  grid-template-columns: var(--shell-sidebar) minmax(0, 1fr);
  grid-template-rows: var(--shell-topbar) minmax(0, 1fr);
  min-height: 100dvh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  transition: grid-template-columns var(--dur-slow) var(--ease-out);
}
.acc-shell[data-sidebar="collapsed"] { grid-template-columns: var(--shell-sidebar-collapsed) minmax(0, 1fr); }
.acc-shell > .acc-topbar { grid-column: 1 / -1; grid-row: 1; }
.acc-shell > .acc-sidebar { grid-column: 1; grid-row: 2; }
.acc-shell > .acc-shell__main { grid-column: 2; grid-row: 2; }
.acc-shell__main { display: flex; min-width: 0; min-height: calc(100dvh - var(--shell-topbar)); flex-direction: column; container: acc-main / inline-size; }
.acc-shell__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* Top bar (suite bar) ---------------------------------------------------- */
.acc-topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: stretch; gap: 0.25rem;
  height: var(--shell-topbar); padding: 0 1rem 0 0.75rem;
  background: hsl(var(--suitebar));
  color: hsl(var(--suitebar-muted));
  border-bottom: 1px solid hsl(var(--suitebar-border));
}
/* v2.5: the Atlas shell keeps its own density; Inset's 44px controls and 15px body are for content. */
.acc-topbar, .acc-sidebar {
  --control-h: 2.25rem; --control-h-sm: 2rem; --control-h-lg: 2.5rem;
  --text-base: 0.875rem; --text-md: 0.9375rem;
}
.acc-topbar > * { align-self: center; }

.acc-topbar__spacer { flex: 1 1 auto; }

/* Doubled .acc-btn: these must outrank the ghost-button rules in Components, which come later. */
.acc-topbar .acc-btn.acc-btn--ghost, .acc-topbar .acc-btn.acc-btn--ghost.acc-btn--muted { color: hsl(var(--suitebar-muted)); font-weight: 500; }
.acc-topbar .acc-btn.acc-btn--ghost:hover:not(:disabled), .acc-topbar .acc-btn.acc-btn--ghost.acc-btn--muted:hover:not(:disabled) { background: hsl(var(--suitebar-hover)); color: hsl(var(--suitebar-foreground)); }
.acc-topbar .acc-dot-status { color: hsl(var(--suitebar-muted)); }
.acc-topbar :focus-visible { outline-color: hsl(var(--suitebar-foreground)); outline-offset: -2px; }
/* Unread indicator on a top-bar icon button (notifications). Counts live in the panel and aria-label, never on the bell. */
.acc-notify-dot {
  position: absolute; top: 0.4375rem; right: 0.4375rem; width: 0.5rem; height: 0.5rem;
  border-radius: 50%; background: hsl(var(--destructive)); box-shadow: 0 0 0 2px hsl(var(--suitebar));
  pointer-events: none;
}

/* Suite brand: Accred mark + wordmark, links to Hub */
.acc-suite-brand {
  display: flex; align-items: center; gap: 0.625rem; align-self: stretch;
  padding: 0 1.125rem 0 0.375rem; margin-right: 0.375rem;
  border-right: 1px solid hsl(var(--suitebar-border));
  color: hsl(var(--suitebar-foreground)); font-size: var(--text-md); font-weight: 650; letter-spacing: var(--tracking-tight); white-space: nowrap;
}
.acc-suite-brand__mark { width: 1.875rem; height: 1.875rem; flex: 0 0 auto; }

/* App tabs: Hub plus the organization's apps (six at most), suite order, current app underlined
   in its accent. Every suite app is also in the app launcher (.acc-launcher) right after the tabs. */
.acc-apptabs { display: flex; align-items: stretch; gap: 0.125rem; align-self: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.acc-apptabs::-webkit-scrollbar { display: none; }
.acc-apptab {
  --acc-tab: var(--suite-product-hub-on-dark);
  position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0 0.875rem;
  border: 0; background: transparent; color: hsl(var(--suitebar-muted));
  font-size: var(--text-base); font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.acc-apptab:hover { color: hsl(var(--suitebar-foreground)); background: hsl(var(--suitebar-hover)); }
.acc-apptab__dot { width: 0.5rem; height: 0.5rem; flex: 0 0 auto; border-radius: 3px; background: var(--acc-tab); }
.acc-apptab[aria-current="page"] { color: hsl(var(--suitebar-foreground)); }
.acc-apptab[aria-current="page"]::after { content: ''; position: absolute; left: 0.625rem; right: 0.625rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--acc-tab); }
.acc-apptab[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.acc-apptab[aria-disabled="true"]:hover { background: transparent; color: hsl(var(--suitebar-muted)); }
.acc-apptab[data-app="hub"] { --acc-tab: var(--suite-product-hub-on-dark); }
.acc-apptab[data-app="consult"] { --acc-tab: var(--suite-product-consult-on-dark); }
.acc-apptab[data-app="migrate"] { --acc-tab: var(--suite-product-migrate-on-dark); }
.acc-apptab[data-app="connect"] { --acc-tab: var(--suite-product-connect-on-dark); }
.acc-apptab[data-app="assess"] { --acc-tab: var(--suite-product-assess-on-dark); }
.acc-apptab[data-app="manage"] { --acc-tab: var(--suite-product-manage-on-dark); }
.acc-apptab[data-app="protect"] { --acc-tab: var(--suite-product-protect-on-dark); }
.acc-apptab[data-app="license"] { --acc-tab: var(--suite-product-license-on-dark); }
.acc-apptab[data-app="fleet"] { --acc-tab: var(--suite-product-fleet-on-dark); }
.acc-apptab[data-app="devices"] { --acc-tab: var(--suite-product-devices-on-dark); }

/* App launcher trigger (v2.3): a ghost icon button right after the app tabs, visible at every width.
   The menu it opens is .acc-launcher in the Popover & menu components below. */
.acc-topbar [data-shell="app-launcher"][aria-expanded="true"] { background: hsl(var(--suitebar-hover)); color: hsl(var(--suitebar-foreground)); }

/* Command / search trigger (on the navy bar) */
.acc-search-trigger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: var(--control-h); width: 16rem; padding: 0 0.5rem 0 0.75rem;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: hsl(var(--suitebar-elevated)); color: hsl(var(--suitebar-subtle));
  font-size: var(--text-sm); text-align: left;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.acc-search-trigger:hover { border-color: hsl(var(--suitebar-border)); color: hsl(var(--suitebar-foreground)); }
.acc-search-trigger > svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.acc-search-trigger__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-search-trigger .acc-kbd { background: transparent; border-color: hsl(var(--suitebar-border)); color: hsl(var(--suitebar-subtle)); box-shadow: none; }
.acc-topbar > .acc-avatar, .acc-topbar .acc-avatar[aria-haspopup] { width: 2.125rem; height: 2.125rem; border: 0; padding: 0; cursor: pointer; background: hsl(var(--suitebar-avatar)); color: #fff; }

/* Sidebar (light) -------------------------------------------------------- */
.acc-sidebar {
  position: sticky; top: var(--shell-topbar);
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--shell-topbar)); min-width: 0;
  background: hsl(var(--sidebar));
  color: hsl(var(--sidebar-foreground));
  border-right: 1px solid hsl(var(--sidebar-border));
}
.acc-sidebar__header { padding: 1rem 0.75rem 0.25rem; }
.acc-sidebar__apps { display: none; }
.acc-sidebar__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.5rem 0.75rem 0.75rem; overscroll-behavior: contain; scrollbar-width: none; }
.acc-sidebar__nav::-webkit-scrollbar { display: none; }
.acc-sidebar__section { margin-bottom: 0.75rem; }
.acc-sidebar__section:last-child { margin-bottom: 0; }
.acc-sidebar__section-label {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 1.5rem; padding: 0.5rem 0.625rem 0.25rem;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; text-transform: none;
  color: hsl(var(--sidebar-muted));
}
.acc-sidebar__footer { padding: 0.75rem; border-top: 1px solid hsl(var(--sidebar-border)); }

/* Organization card: organization (switcher trigger when multi-org) + app lockup */
.acc-org-card {
  display: flex; align-items: center; gap: 0.625rem; width: 100%; min-width: 0;
  padding: 0.625rem; border: 1px solid hsl(var(--sidebar-border)); border-radius: 0.625rem;
  background: hsl(var(--sidebar)); color: inherit; text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out);
}
button.acc-org-card:hover, .acc-org-card[aria-expanded="true"] { border-color: hsl(var(--border-strong)); }
.acc-org-card__tile {
  --acc-tile: var(--acc-product, hsl(var(--primary)));
  display: grid; place-items: center; width: 1.875rem; height: 1.875rem; flex: 0 0 auto; border-radius: var(--radius-md);
  color: var(--acc-tile); background: color-mix(in srgb, var(--acc-tile) 12%, hsl(var(--sidebar)));
}
.acc-org-card__tile > svg { width: 1rem; height: 1rem; stroke-width: 1.75; }
.acc-org-card__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.acc-org-card__name { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; color: hsl(var(--foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-org-card__meta { font-size: var(--text-xs); line-height: 1.3; color: hsl(var(--sidebar-muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-org-card__chev { width: 1rem; height: 1rem; flex: 0 0 auto; color: hsl(var(--sidebar-muted)); }

.acc-nav-item {
  position: relative;
  display: flex; align-items: center; gap: 0.625rem;
  width: 100%; height: 2.125rem; padding: 0 0.625rem;
  border: 0; border-radius: var(--radius-md);
  background: transparent; color: hsl(var(--sidebar-foreground));
  font-size: var(--text-base); font-weight: 500; text-align: left; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.acc-nav-item > svg { width: 1rem; height: 1rem; flex: 0 0 auto; stroke-width: 1.75; }
.acc-nav-item__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.acc-nav-item:hover { background: hsl(var(--sidebar-hover)); color: hsl(var(--foreground)); }
.acc-nav-item[aria-current="page"], .acc-nav-item.is-active {
  background: hsl(var(--sidebar-active)); color: hsl(var(--foreground));
}
/* Secondary selection inside the sidebar (a chosen filter, not the current page). Exactly one item per sidebar is aria-current. */
.acc-nav-item[aria-pressed="true"] { background: hsl(var(--sidebar-hover)); color: hsl(var(--foreground)); box-shadow: inset 0 0 0 1px hsl(var(--border-strong)); }
.acc-nav-item__badge {
  margin-left: auto; min-width: 1.25rem; height: 1.125rem; padding: 0 0.4375rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
}
.acc-nav-item[aria-current="page"] .acc-nav-item__badge { background: hsl(var(--card)); color: hsl(var(--foreground)); }
.acc-shell[data-sidebar="collapsed"] .acc-nav-item { justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0 auto; padding: 0; }
.acc-shell[data-sidebar="collapsed"] .acc-nav-item__label,
.acc-shell[data-sidebar="collapsed"] .acc-nav-item__badge,
.acc-shell[data-sidebar="collapsed"] .acc-sidebar__section-label,
.acc-shell[data-sidebar="collapsed"] .acc-org-card__text,
.acc-shell[data-sidebar="collapsed"] .acc-org-card__chev { display: none; }
.acc-shell[data-sidebar="collapsed"] .acc-sidebar__header { padding: 1rem 0.75rem 0.25rem; }
.acc-shell[data-sidebar="collapsed"] .acc-org-card { justify-content: center; padding: 0.375rem; }

/* Context bar */
.acc-contextbar {
  display: flex; align-items: center; gap: 0.75rem; min-height: var(--shell-contextbar);
  padding: 0 var(--page-pad); border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card)); font-size: var(--text-sm);
}
.acc-breadcrumbs { display: flex; align-items: center; gap: 0.375rem; min-width: 0; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-breadcrumbs a { color: inherit; border-radius: var(--radius-xs); }
.acc-breadcrumbs a:hover { color: hsl(var(--foreground)); }
.acc-breadcrumbs [aria-current="page"] { color: hsl(var(--foreground)); font-weight: 500; }
.acc-breadcrumbs__sep { width: 0.875rem; height: 0.875rem; color: hsl(var(--border-strong)); }

/* Page ------------------------------------------------------------------- */
/* v3.3.0: fluid. A page fills the space beside the sidebar with a 24-48 px gutter; data pages (tables,
   lists, boards) use the full width. Only reading pages cap their width, and they align left. */
.acc-page { padding: var(--page-pad) var(--page-pad-x) 3.5rem; max-width: none; margin: 0; width: 100%; }
.acc-page--compact { padding: var(--page-pad-compact); max-width: none; }

.acc-page--narrow, .acc-page--reading { max-width: calc(var(--reading-max) + 2 * var(--page-pad-x)); margin-inline: 0 auto; }
/* Page header (v3.0): one row. The title on the left, at most two actions on the right, centred
   on the title. A back link or breadcrumb may sit above the title on a detail page. No eyebrow,
   description, or tagline (design system §5.1); the __desc, __eyebrow and hero classes still
   render, quietly, for screens that have not dropped them yet. */
.acc-page-header, .acc-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1rem; min-height: var(--control-h); margin-bottom: 1.5rem;
}
.acc-page-header__text, .acc-hero__text { display: block; order: 1; flex: 1 1 18rem; min-width: 0; }
:is(.acc-page-header__text, .acc-hero__text) > * { margin: 0; min-width: 0; }
.acc-page-header__text > :is(.acc-eyebrow, .acc-page-header__eyebrow, .acc-breadcrumbs, .acc-btn:first-child), .acc-hero__eyebrow { width: fit-content; margin: 0 0 0.375rem; }
.acc-page-header__actions, .acc-hero__actions {
  order: 2; display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.5rem;
  min-width: 0; max-width: 100%;
}
.acc-page-header .acc-eyebrow, .acc-page-header__eyebrow, .acc-hero__eyebrow {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: var(--text-sm); font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none;
  color: hsl(var(--muted-foreground));
}
.acc-page-header__desc, .acc-hero__desc { margin-top: 0.25rem; max-width: 72ch; color: hsl(var(--muted-foreground)); font-size: var(--text-sm); line-height: 1.45; }
.acc-section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.75rem 0 0.5rem; padding: 0 0.25rem; }
.acc-section-header__desc { margin-top: 0.125rem; color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
.acc-stack { display: flex; flex-direction: column; gap: 1rem; }
.acc-grid { display: grid; gap: 1rem; }
/* Groups breathe: a stack or grid of cards, metric rows, or sections gets the grouped-list gap. */
:is(.acc-stack, .acc-grid):has(> :is(.acc-card, .acc-metric-row, section)) { gap: 1.5rem 1rem; }
.acc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acc-grid--sidebar { grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr); }
.acc-workspace {
  display: grid; grid-template-columns: var(--shell-list) minmax(0, 1fr);
  height: calc(100dvh - var(--shell-topbar));
}
.acc-workspace--inspector { grid-template-columns: var(--shell-list) minmax(0, 1fr) var(--shell-inspector); }
.acc-workspace > * { min-height: 0; overflow: auto; }
.acc-workspace__list { border-right: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.acc-workspace__inspector { border-left: 1px solid hsl(var(--border)); background: hsl(var(--card)); }

/* Home hero (v3.0): retired as a pattern; home pages use a plain page header titled with the page
   name. The classes render exactly like a page header. */
.acc-hero__eyebrow > svg { width: 1rem; height: 1rem; }
.acc-hero__title { font-size: var(--text-title); line-height: 1.2; font-weight: 650; letter-spacing: var(--tracking-tighter); color: hsl(var(--foreground)); }
.acc-hero__text > .acc-compact { margin-top: 0.25rem; color: hsl(var(--muted-foreground)); }

/* Suite pulse: one white tile per app (product colour on the icon), one value + one status line.
   auto-fit with a floor of 1/--acc-pulse-cols of the row: at most 6 columns (3 below 1280 px,
   2 below 640 px), and fewer cards share the row instead of leaving empty columns. */
.acc-pulse {
  --acc-pulse-cols: 6;
  --acc-pulse-gap: 0.625rem;
  display: grid; gap: var(--acc-pulse-gap); margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(max(9rem, calc((100% - (var(--acc-pulse-cols) - 1) * var(--acc-pulse-gap)) / var(--acc-pulse-cols))), 1fr));
}
.acc-pulse-card {
  --acc-pulse: var(--suite-product-hub);
  position: relative; display: block; min-width: 0; overflow: hidden;
  padding: 0.75rem 0.875rem; border: 0; border-radius: var(--radius-lg);
  background: hsl(var(--card)); color: hsl(var(--foreground)); text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out);
}
a.acc-pulse-card:hover, button.acc-pulse-card:hover { background: hsl(var(--subtle)); }
.acc-pulse-card[aria-current="page"] { background: hsl(var(--accent)); }
.acc-pulse-card[aria-disabled="true"] { opacity: 0.6; }
.acc-pulse-card[data-app="hub"] { --acc-pulse: var(--suite-product-hub); }
.acc-pulse-card[data-app="consult"] { --acc-pulse: var(--suite-product-consult); }
.acc-pulse-card[data-app="migrate"] { --acc-pulse: var(--suite-product-migrate); }
.acc-pulse-card[data-app="connect"] { --acc-pulse: var(--suite-product-connect); }
.acc-pulse-card[data-app="assess"] { --acc-pulse: var(--suite-product-assess); }
.acc-pulse-card[data-app="manage"] { --acc-pulse: var(--suite-product-manage); }
.acc-pulse-card[data-app="protect"] { --acc-pulse: var(--suite-product-protect); }
.acc-pulse-card[data-app="license"] { --acc-pulse: var(--suite-product-license); }
.acc-pulse-card[data-app="fleet"] { --acc-pulse: var(--suite-product-fleet); }
.acc-pulse-card[data-app="devices"] { --acc-pulse: var(--suite-product-devices); }
.dark .acc-pulse-card[data-app], [data-theme="dark"] .acc-pulse-card[data-app] { --acc-pulse: var(--acc-pulse-dark, var(--suite-product-hub-on-dark)); }
.dark .acc-pulse-card[data-app="consult"], [data-theme="dark"] .acc-pulse-card[data-app="consult"] { --acc-pulse-dark: var(--suite-product-consult-on-dark); }
.dark .acc-pulse-card[data-app="migrate"], [data-theme="dark"] .acc-pulse-card[data-app="migrate"] { --acc-pulse-dark: var(--suite-product-migrate-on-dark); }
.dark .acc-pulse-card[data-app="connect"], [data-theme="dark"] .acc-pulse-card[data-app="connect"] { --acc-pulse-dark: var(--suite-product-connect-on-dark); }
.dark .acc-pulse-card[data-app="assess"], [data-theme="dark"] .acc-pulse-card[data-app="assess"] { --acc-pulse-dark: var(--suite-product-assess-on-dark); }
.dark .acc-pulse-card[data-app="manage"], [data-theme="dark"] .acc-pulse-card[data-app="manage"] { --acc-pulse-dark: var(--suite-product-manage-on-dark); }
.dark .acc-pulse-card[data-app="protect"], [data-theme="dark"] .acc-pulse-card[data-app="protect"] { --acc-pulse-dark: var(--suite-product-protect-on-dark); }
.dark .acc-pulse-card[data-app="license"], [data-theme="dark"] .acc-pulse-card[data-app="license"] { --acc-pulse-dark: var(--suite-product-license-on-dark); }
.dark .acc-pulse-card[data-app="fleet"], [data-theme="dark"] .acc-pulse-card[data-app="fleet"] { --acc-pulse-dark: var(--suite-product-fleet-on-dark); }
.dark .acc-pulse-card[data-app="devices"], [data-theme="dark"] .acc-pulse-card[data-app="devices"] { --acc-pulse-dark: var(--suite-product-devices-on-dark); }
.acc-pulse-card__name { display: flex; align-items: center; gap: 0.375rem; font-size: var(--text-xs); font-weight: 500; color: hsl(var(--muted-foreground)); }
.acc-pulse-card__name > svg { width: 1rem; height: 1rem; color: var(--acc-pulse); }
.acc-pulse-card__value { margin-top: 0.25rem; font-family: var(--font-rounded); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.acc-pulse-card__label { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-pulse-card__status { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.375rem; font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--muted-foreground)); }
.acc-pulse-card__status > svg { width: 0.875rem; height: 0.875rem; flex: 0 0 auto; }
.acc-pulse-card__status--ok { color: hsl(var(--success)); }
.acc-pulse-card__status--warn { color: hsl(var(--warning)); }
.acc-pulse-card__status--critical { color: hsl(var(--destructive)); }

@media (max-width: 1279px) {
  .acc-shell { grid-template-columns: var(--shell-sidebar-collapsed) minmax(0, 1fr); }
  .acc-shell[data-sidebar="expanded"] { grid-template-columns: var(--shell-sidebar) minmax(0, 1fr); }
  .acc-shell:not([data-sidebar="expanded"]) .acc-nav-item { justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0 auto; padding: 0; }
  .acc-shell:not([data-sidebar="expanded"]) .acc-nav-item__label,
  .acc-shell:not([data-sidebar="expanded"]) .acc-nav-item__badge,
  .acc-shell:not([data-sidebar="expanded"]) .acc-sidebar__section-label,
  .acc-shell:not([data-sidebar="expanded"]) .acc-org-card__text,
  .acc-shell:not([data-sidebar="expanded"]) .acc-org-card__chev { display: none; }
  .acc-shell:not([data-sidebar="expanded"]) .acc-org-card { justify-content: center; padding: 0.375rem; }
  .acc-search-trigger { width: var(--control-h); padding: 0; justify-content: center; }
  .acc-search-trigger__label, .acc-search-trigger .acc-kbd, .acc-search-trigger .acc-kbd-combo { display: none; }
  .acc-pulse { --acc-pulse-cols: 3; }
  /* Five tabs at most; the current app keeps its tab. The others stay one click away in the
     launcher, so the cap applies only when the launcher button directly follows the tabs:
     markup from before v2.3 (no launcher) keeps every tab. */
  .acc-topbar .acc-apptabs:has(+ [data-shell="app-launcher"]) > .acc-apptab:nth-child(n+6):not([aria-current="page"]),
  .acc-topbar .acc-apptabs:has(+ [data-shell="app-launcher"]):has(> .acc-apptab:nth-child(n+6)[aria-current="page"]) > .acc-apptab:nth-child(5) { display: none; }
  .acc-workspace--inspector { grid-template-columns: var(--shell-list) minmax(0, 1fr); }
  .acc-workspace__inspector { position: fixed; inset: var(--shell-topbar) 0 0 auto; width: min(var(--shell-inspector), 100vw); z-index: var(--z-sheet); box-shadow: var(--shadow-lg); }
}
@media (max-width: 1023px) {
  .acc-shell, .acc-shell[data-sidebar="collapsed"], .acc-shell[data-sidebar="expanded"] { grid-template-columns: minmax(0, 1fr); }
  .acc-shell > .acc-shell__main { grid-column: 1; }
  .acc-apptabs { display: none; }
  .acc-suite-brand { border-right: 0; padding-right: 0.5rem; }
  .acc-sidebar { position: fixed; inset: 0 auto 0 0; height: 100dvh; width: min(18rem, 86vw); z-index: var(--z-sheet); transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease-out); }
  .acc-shell[data-mobile-nav="open"] .acc-sidebar { transform: none; box-shadow: var(--shadow-lg); }
  .acc-shell[data-mobile-nav="open"] .acc-nav-item { justify-content: flex-start; width: 100%; height: 2.25rem; margin: 0; padding: 0 0.625rem; }
  .acc-shell[data-mobile-nav="open"] .acc-nav-item__label,
  .acc-shell[data-mobile-nav="open"] .acc-sidebar__section-label { display: block; }
  .acc-shell[data-mobile-nav="open"] .acc-nav-item__badge { display: inline-flex; }
  .acc-shell[data-mobile-nav="open"] .acc-org-card__text { display: flex; }
  .acc-shell[data-mobile-nav="open"] .acc-org-card__chev { display: block; }
  .acc-shell[data-mobile-nav="open"] .acc-org-card { justify-content: flex-start; padding: 0.625rem; }
  .acc-sidebar__apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; padding: 0 0 0.625rem; margin-bottom: 0.625rem; border-bottom: 1px solid hsl(var(--sidebar-border)); }
  .acc-sidebar__apps .acc-apptab { flex-direction: column; gap: 0.25rem; padding: 0.5rem 0.125rem; border-radius: var(--radius-md); color: hsl(var(--sidebar-foreground)); font-size: var(--text-xs); }
  .acc-sidebar__apps .acc-apptab:hover { background: hsl(var(--sidebar-hover)); color: hsl(var(--foreground)); }
  .acc-sidebar__apps .acc-apptab[aria-current="page"] { background: hsl(var(--sidebar-active)); color: hsl(var(--foreground)); }
  .acc-sidebar__apps .acc-apptab[aria-current="page"]::after { display: none; }
  .acc-sidebar__apps .acc-apptab[data-app="hub"] { --acc-tab: var(--suite-product-hub); }
  .acc-sidebar__apps .acc-apptab[data-app="consult"] { --acc-tab: var(--suite-product-consult); }
  .acc-sidebar__apps .acc-apptab[data-app="migrate"] { --acc-tab: var(--suite-product-migrate); }
  .acc-sidebar__apps .acc-apptab[data-app="connect"] { --acc-tab: var(--suite-product-connect); }
  .acc-sidebar__apps .acc-apptab[data-app="assess"] { --acc-tab: var(--suite-product-assess); }
  .acc-sidebar__apps .acc-apptab[data-app="manage"] { --acc-tab: var(--suite-product-manage); }
  .acc-sidebar__apps .acc-apptab[data-app="protect"] { --acc-tab: var(--suite-product-protect); }
  .acc-sidebar__apps .acc-apptab[data-app="license"] { --acc-tab: var(--suite-product-license); }
  .acc-sidebar__apps .acc-apptab[data-app="fleet"] { --acc-tab: var(--suite-product-fleet); }
  .acc-sidebar__apps .acc-apptab[data-app="devices"] { --acc-tab: var(--suite-product-devices); }
  .acc-grid--3, .acc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-grid--sidebar { grid-template-columns: minmax(0, 1fr); }
  .acc-workspace, .acc-workspace--inspector { grid-template-columns: minmax(0, 1fr); height: auto; }
  .acc-workspace__list { border-right: 0; border-bottom: 1px solid hsl(var(--border)); }
}
@media (max-width: 639px) {
  :root { --page-pad: 1.25rem; --page-pad-x: 1rem; }
  .acc-page { padding-bottom: 3rem; }
  .acc-suite-brand__name { display: none; }
  .acc-pulse { --acc-pulse-cols: 2; }
  .acc-grid--2, .acc-grid--3, .acc-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .acc-page-header, .acc-hero { margin-bottom: 1.25rem; }
  .acc-page-header__actions, .acc-hero__actions { justify-content: flex-start; }
  .acc-page-header__actions > .acc-btn--primary { order: -1; }
  .acc-section-header { align-items: flex-start; }
}

/* Scrim shared by sheets, dialogs, mobile nav */
.acc-scrim {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgb(0 0 0 / 0.4);          /* plain dim, no blur (v2.5) */
  animation: acc-fade-in var(--dur-base) var(--ease-out) both;
}
.acc-scrim[data-state="closed"] { animation: acc-fade-out var(--dur-fast) var(--ease-out) both; }

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* Buttons ---------------------------------------------------------------- */
.acc-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  height: var(--control-h); padding: 0 0.875rem;
  border: 0; border-radius: var(--radius-md); box-shadow: none;
  font-size: var(--text-base); font-weight: 500; line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
  color: hsl(var(--foreground)); background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  user-select: none;
}
.acc-btn > svg { width: 1rem; height: 1rem; flex: 0 0 auto; stroke-width: 2; }
.acc-btn:active:not(:disabled) { opacity: 0.8; }
.acc-btn:disabled, .acc-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.acc-btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
/* The control focus rules outrank the dark-surface focus rules, so restate them for buttons,
   and recolor the outer ring of checkboxes, radios, and switches (they are too small for an inset one). */
.acc-on-dark .acc-btn:focus-visible { outline-color: #fff; outline-offset: -2px; }
.acc-topbar .acc-btn:focus-visible { outline-color: hsl(var(--suitebar-foreground)); outline-offset: -2px; }
.acc-on-dark .acc-checkbox:focus-visible, .acc-on-dark .acc-radio:focus-visible, .acc-on-dark .acc-switch:focus-visible { outline-color: #fff; }
.acc-topbar .acc-checkbox:focus-visible, .acc-topbar .acc-radio:focus-visible, .acc-topbar .acc-switch:focus-visible { outline-color: hsl(var(--suitebar-foreground)); }

/* v2.5 variants: filled (primary), tinted (secondary, outline), plain (ghost), tinted red
   (destructive, destructive-outline). No borders, no shadows. */
.acc-btn--primary { background: hsl(var(--primary-fill)); color: #fff; }
.acc-btn--primary:hover:not(:disabled), .acc-btn--primary:active:not(:disabled) { background: hsl(var(--primary-fill-hover)); opacity: 1; }

.acc-btn--secondary, .acc-btn--outline { background: hsl(var(--primary) / 0.12); color: hsl(var(--accent-foreground)); }
.acc-btn--secondary:hover:not(:disabled), .acc-btn--outline:hover:not(:disabled) { background: hsl(var(--primary) / 0.2); }

.acc-btn--ghost { color: hsl(var(--accent-foreground)); font-weight: 500; }
.acc-btn--ghost:hover:not(:disabled) { background: hsl(var(--primary) / 0.1); }
.acc-btn--ghost.acc-btn--muted, .acc-btn--ghost.acc-btn--icon { color: hsl(var(--muted-foreground)); }
.acc-btn--ghost.acc-btn--muted:hover:not(:disabled), .acc-btn--ghost.acc-btn--icon:hover:not(:disabled) { background: hsl(var(--fill)); color: hsl(var(--foreground)); }

.acc-btn--destructive, .acc-btn--destructive-outline { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive-tint-foreground)); }
.acc-btn--destructive:hover:not(:disabled), .acc-btn--destructive-outline:hover:not(:disabled) { background: hsl(var(--destructive) / 0.2); }

.acc-btn--link { height: auto; padding: 0; color: hsl(var(--accent-foreground)); font-weight: 500; border-radius: var(--radius-xs); }
.acc-btn--link:hover:not(:disabled) { background: none; text-decoration: underline; text-underline-offset: 3px; }
:is(p, .acc-field__help, .acc-compact) > .acc-btn--link { height: auto; font-size: inherit; vertical-align: baseline; }   /* inline in text */

.acc-btn--sm { height: var(--control-h-sm); padding: 0 0.625rem; border-radius: var(--radius-sm); font-size: var(--text-sm); gap: 0.375rem; }
.acc-btn--sm > svg { width: 0.875rem; height: 0.875rem; }
.acc-btn--lg { height: var(--control-h-lg); padding: 0 1.125rem; border-radius: var(--radius-md); font-size: var(--text-base); }
.acc-btn--icon { width: var(--control-h); padding: 0; }
.acc-btn--icon.acc-btn--sm { width: var(--control-h-sm); }
.acc-btn--icon.acc-btn--lg { width: var(--control-h-lg); }
.acc-btn--block { width: 100%; }
.acc-btn[data-loading="true"] { color: transparent !important; pointer-events: none; }
.acc-btn[data-loading="true"]::after {
  content: ''; position: absolute; width: 1rem; height: 1rem;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  color: hsl(var(--accent-foreground)); animation: acc-spin 0.7s linear infinite;
}
.acc-btn--primary[data-loading="true"]::after { color: #fff; }
.acc-btn--destructive[data-loading="true"]::after, .acc-btn--destructive-outline[data-loading="true"]::after { color: hsl(var(--destructive-tint-foreground)); }

/* Inputs ----------------------------------------------------------------- */
/* v2.5: filled grey fields, no drawn border; a 1px inset --control-border hairline keeps the
   edge at 3:1 (WCAG 1.4.11). Focus turns the field white with a ring edge and soft halo. */
.acc-input, .acc-select, .acc-textarea {
  display: block; width: 100%; height: var(--control-h); padding: 0 0.75rem;
  border: 0; border-radius: var(--radius-md);
  background-color: hsl(var(--fill)); color: hsl(var(--foreground));
  font-size: var(--text-base); line-height: 1.4; box-shadow: inset 0 0 0 1px hsl(var(--control-border));
  transition: box-shadow var(--dur-fast), background-color var(--dur-fast);
}
.acc-input::placeholder, .acc-textarea::placeholder { color: hsl(var(--muted-foreground)); }
.acc-input:hover, .acc-select:hover, .acc-textarea:hover { box-shadow: inset 0 0 0 1px hsl(var(--muted-foreground)); }
/* v3.1.0 (SYS-09, MIG-007): custom select and combobox triggers (Radix, headless) get the same visible ring. */
:is([role="combobox"], [aria-haspopup="listbox"]):not(input):not(.acc-input):not(.acc-select):not(.acc-btn):focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.acc-input:focus-visible, .acc-select:focus-visible, .acc-textarea:focus-visible {
  outline: none; background-color: hsl(var(--card)); box-shadow: inset 0 0 0 1.5px hsl(var(--ring)), 0 0 0 3px hsl(var(--ring-soft));
}
.acc-input[aria-invalid="true"], .acc-select[aria-invalid="true"], .acc-textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px hsl(var(--destructive)); }
.acc-input[aria-invalid="true"]:focus-visible, .acc-select[aria-invalid="true"]:focus-visible, .acc-textarea[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 1.5px hsl(var(--destructive)), 0 0 0 3px hsl(var(--destructive) / 0.2); }
.acc-input:disabled, .acc-select:disabled, .acc-textarea:disabled { background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); cursor: not-allowed; box-shadow: inset 0 0 0 1px hsl(var(--border-strong)); }
.acc-input--sm, .acc-select--sm { height: var(--control-h-sm); border-radius: var(--radius-sm); font-size: var(--text-sm); padding: 0 0.75rem; }
.acc-textarea { height: auto; min-height: 5rem; padding: 0.5rem 0.75rem; resize: vertical; }
.acc-select {
  appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: var(--icon-select);
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 0.625rem 1rem;
}
.acc-select--sm { padding-right: 2rem; background-position: right 0.75rem center; }
button.acc-select:has(svg) { background-image: none; }
.acc-input-wrap { position: relative; }
.acc-input-wrap > svg { position: absolute; left: 0.75rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); color: hsl(var(--muted-foreground)); pointer-events: none; }
.acc-input-wrap > .acc-input { padding-left: 2.25rem; }
.acc-input-wrap--trailing > .acc-input { padding-right: 2.375rem; }
.acc-input-wrap__trailing { position: absolute; right: 0.375rem; top: 50%; transform: translateY(-50%); }

.acc-field { display: flex; flex-direction: column; gap: 0.375rem; }
.acc-field__label { display: flex; align-items: center; gap: 0.375rem; font-size: var(--text-sm); font-weight: 500; color: hsl(var(--foreground)); }
.acc-field__optional { font-weight: 400; color: hsl(var(--muted-foreground)); }
.acc-field__help { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-field__error { display: flex; align-items: center; gap: 0.375rem; font-size: var(--text-xs); color: hsl(var(--destructive)); }
.acc-field__error > svg { width: 0.875rem; height: 0.875rem; }
.acc-sheet__footer > .acc-field__error { display: block; }
.acc-form { display: flex; flex-direction: column; gap: 1rem; }
.acc-form__row { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acc-form__actions { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.5rem; }
@media (max-width: 639px) { .acc-form__row { grid-template-columns: minmax(0, 1fr); } }
/* iOS zooms into fields under 16 px; touch screens get 16 px field text. */
@media (pointer: coarse) { .acc-input, .acc-select, .acc-textarea { font-size: 1rem; } }

/* Checkbox / radio / switch */
/* v2.5: round checkboxes and radios (20px), filled blue when on; iOS switch, green when on. */
.acc-checkbox, .acc-radio {
  appearance: none; width: 1.125rem; height: 1.125rem; margin: 0; flex: 0 0 auto;
  border: 1.5px solid hsl(var(--control-border)); border-radius: 50%;
  background: hsl(var(--card)); display: inline-grid; place-items: center; cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.acc-checkbox:hover, .acc-radio:hover { border-color: hsl(var(--primary)); }
.acc-checkbox:checked, .acc-radio:checked, .acc-checkbox:indeterminate { background: hsl(var(--primary-fill)); border-color: hsl(var(--primary-fill)); }
.acc-checkbox:checked::before { content: ''; width: 0.625rem; height: 0.625rem; background: #fff; clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 20%, 84% 6%, 40% 66%); }
.acc-checkbox:indeterminate::before { content: ''; width: 0.5rem; height: 2px; background: #fff; }
.acc-radio:checked::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fff; }
.acc-checkbox:focus-visible, .acc-radio:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.acc-choice { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; font-size: var(--text-base); }
.acc-choice > .acc-checkbox, .acc-choice > .acc-radio { margin-top: 0.0625rem; }
.acc-choice__desc { display: block; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }

.acc-switch {
  position: relative; width: 2.5rem; height: 1.5rem; padding: 0; flex: 0 0 auto;
  border: 0; border-radius: 999px; background: hsl(var(--control-border)); cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out);
}
.acc-switch::after {
  content: ''; position: absolute; top: 0.125rem; left: 0.125rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / 0.2), 0 0 0 0.5px rgb(0 0 0 / 0.04);
  transition: transform var(--dur-base) var(--ease-out);
}
.acc-switch[aria-checked="true"] { background: hsl(var(--switch-on)); }
.acc-switch[aria-checked="true"]::after { transform: translateX(1rem); }
.acc-switch:is(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; }
/* A locked switch that is on stays readable as on, but in grey, so it never looks clickable. */
.acc-switch:is(:disabled, [aria-disabled="true"])[aria-checked="true"] { background: hsl(var(--muted-foreground)); }
.acc-switch:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* Cards & panels --------------------------------------------------------- */
/* v2.5: a card is one white rounded group with no border or shadow. With a header, the card
   itself turns transparent: the title becomes a small muted group label on the ground, and
   everything after it is the white group (rounded top after the header, bottom on the last child). */
.acc-card {
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 0; border-radius: var(--radius-lg); box-shadow: none;
}
.acc-card--flat { box-shadow: none; }
.acc-card--interactive, button.acc-card, a.acc-card { cursor: pointer; transition: background-color var(--dur-fast); }
.acc-card--interactive:hover, button.acc-card:hover, a.acc-card:hover { background: hsl(var(--subtle)); }
.acc-card--interactive:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.acc-card--selected { background: hsl(var(--accent)); }
.acc-card:has(> .acc-card__header) { background: transparent; overflow: visible; }
.acc-card:has(> .acc-card__header) > :not(.acc-card__header) { background-color: hsl(var(--card)); border-radius: 0; }
.acc-card:has(> .acc-card__header) > .acc-card__header + * { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.acc-card:has(> .acc-card__header) > :not(.acc-card__header):last-child { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.acc-card:has(> .acc-card__header) > :is(.acc-list, ul, ol, nav, .acc-card__body--flush):not(:has(.acc-menu, .acc-popover)) { overflow: clip; }
/* v4.0.2: a table wrap keeps its own overflow-x: auto (it rounds its own corners), so wide tables in a headed group scroll on phones instead of being cut off. */
.acc-card:has(> .acc-card__header) > .acc-table-wrap { overflow-x: auto; }
.acc-card:has(> .acc-checklist) { overflow: clip; }
/* A banner or flat card inside a white group sits on the grey fill. */
:is(.acc-card__body, .acc-dialog__body, .acc-sheet__body .acc-card) :is(.acc-banner, .acc-card--flat) { background: hsl(var(--fill)); }
.acc-card__header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.25rem 0.75rem;
  padding: 0 0.25rem 0.5rem; border: 0; background: transparent;
}
.acc-card > .acc-card__header:last-child { padding-bottom: 0; }
.acc-card__header--plain { padding-bottom: 0.5rem; }   /* kept for the class API; every header is plain since v2.5 */
@media (min-width: 1024px) { .acc-grid > .acc-card > .acc-card__header { min-height: 1.75rem; } }   /* side-by-side groups line up */
.acc-card__title { font-size: var(--text-base); font-weight: 600; line-height: 1.35; text-transform: none; letter-spacing: -0.005em; color: hsl(var(--foreground)); }
.acc-card__title > svg { width: 0.875rem; height: 0.875rem; }
.acc-card__desc { margin-top: 0.125rem; font-size: var(--text-sm); line-height: 1.4; color: hsl(var(--muted-foreground)); }
.acc-card__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 0.25rem; }
.acc-card__body { padding: 1rem; }
.acc-card__body--dense { padding: 0.625rem 0.875rem; }
.acc-card__body--flush { padding: 0; }
.acc-card__footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.5rem 1rem; border-top: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.acc-card__section + .acc-card__section { border-top: 1px solid hsl(var(--border)); }

.acc-divider { border: 0; border-top: 1px solid hsl(var(--border)); margin: 0; }

/* Metric tile (v2.5): each metric is its own white rounded tile with a muted label and a big
   bold rounded number. A row of tiles sits on the ground with a 12px gap, not hairlines. */
.acc-metric {
  display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 1rem; min-width: 0;
  border: 0; border-radius: var(--radius-lg); background: hsl(var(--card)); box-shadow: none;
}
a.acc-metric, button.acc-metric { background: hsl(var(--card)); color: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-fast); }
a.acc-metric:hover, button.acc-metric:hover { background: hsl(var(--subtle)); }
/* Pressed or current tile (a filter, the current view): the v2.4 quiet selection, tint plus a neutral edge. */
.acc-metric:is([aria-pressed="true"], [aria-current="true"], [aria-current="page"], .is-active) { background: hsl(var(--accent)); box-shadow: inset 0 0 0 1px hsl(var(--border-strong)); }
.acc-metric__label { display: flex; align-items: center; gap: 0.375rem; font-size: var(--text-xs); font-weight: 500; color: hsl(var(--muted-foreground)); }
.acc-metric__value { font-family: var(--font-rounded); font-size: var(--text-xl); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.acc-metric__value small { font-size: var(--text-sm); font-weight: 600; color: hsl(var(--muted-foreground)); letter-spacing: 0; margin-left: 0.25rem; }
.acc-metric__meta { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.acc-metric__delta { display: inline-flex; align-items: center; gap: 0.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.acc-metric__delta--up { color: hsl(var(--success)); }
.acc-metric__delta--down { color: hsl(var(--destructive)); }
.acc-metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.625rem; background: transparent; border: 0; box-shadow: none; overflow: visible; }
/* A card that only wraps metric tiles steps back so the tiles sit on the ground. */
.acc-card:has(> .acc-metric) { background: transparent; gap: 0.75rem; overflow: visible; }
.acc-card:has(> .acc-metric-row:only-child) { background: transparent; overflow: visible; }

/* Badges ----------------------------------------------------------------- */
/* v2.5: slim tinted labels, 20px, 6px corners, no border. */
.acc-badge {
  display: inline-flex; align-items: center; gap: 0.3125rem; height: 1.25rem; padding: 0 0.4375rem;
  border: 0; border-radius: 0.375rem;
  font-size: var(--text-xs); font-weight: 500; line-height: 1; letter-spacing: 0; white-space: nowrap; vertical-align: middle;
  background: hsl(var(--muted)); color: hsl(var(--foreground));
}
.acc-badge > svg { width: 0.75rem; height: 0.75rem; }
.acc-badge__dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.acc-badge--neutral { background: hsl(var(--fill)); color: hsl(var(--foreground)); }
.acc-badge--info { background: hsl(var(--info-soft)); color: hsl(var(--info)); }
.acc-badge--primary { background: hsl(var(--primary-soft)); color: hsl(var(--accent-foreground)); }
.acc-badge--success { background: hsl(var(--success-soft)); color: hsl(var(--success)); }
.acc-badge--warning { background: hsl(var(--warning-soft)); color: hsl(var(--warning)); }
.acc-badge--critical { background: hsl(var(--destructive-soft)); color: hsl(var(--destructive)); }
.acc-badge--outline { background: hsl(var(--fill)); color: hsl(var(--foreground)); }
.acc-badge--count { min-width: 1.25rem; justify-content: center; padding: 0 0.375rem; font-variant-numeric: tabular-nums; }
.acc-badge--lg { height: 1.5rem; padding: 0 0.5rem; font-size: var(--text-sm); }
.acc-dot-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); }
.acc-dot-status::before { content: ''; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: hsl(var(--muted-foreground)); }
.acc-dot-status--success::before { background: hsl(var(--success)); }
.acc-dot-status--warning::before { background: hsl(var(--warning)); }
.acc-dot-status--critical::before { background: hsl(var(--destructive)); }
.acc-dot-status--info::before { background: hsl(var(--info)); }
.acc-dot-status--live::before { animation: acc-pulse-ring 1.8s var(--ease-out) infinite; }

/* Avatar */
.acc-avatar {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto;
  border-radius: 50%; background: hsl(var(--fill)); color: hsl(var(--foreground));
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; overflow: hidden; text-transform: uppercase;
}
.acc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acc-avatar--sm { width: 1.5rem; height: 1.5rem; font-size: var(--text-xs); }
.acc-avatar--lg { width: 2.5rem; height: 2.5rem; font-size: var(--text-sm); }
.acc-avatar--on-dark { background: hsl(var(--suitebar-avatar)); color: #fff; }

/* Tabs & segmented ------------------------------------------------------- */
/* v2.5: tabs and the segmented control are one pattern, a grey track with a raised white thumb.
   .acc-tabs--pills is kept for the class API and renders the same. */
.acc-tabs, .acc-segmented {
  display: flex; width: fit-content; max-width: 100%; gap: 0.125rem; padding: 0.125rem;
  border: 0; border-radius: 0.5rem; background: hsl(var(--fill));
}
.acc-tabs { overflow-x: auto; scrollbar-width: none; }
.acc-segmented { display: inline-flex; }
.acc-tabs::-webkit-scrollbar { display: none; }
.acc-tab, .acc-segmented__item {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; flex: 0 0 auto;
  height: 1.75rem; margin: 0; padding: 0 0.75rem;
  border: 0; border-radius: 0.375rem; background: transparent;
  color: hsl(var(--muted-foreground)); font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.acc-tab > svg, .acc-segmented__item > svg { width: 0.875rem; height: 0.875rem; }
.acc-tab:hover, .acc-segmented__item:hover { color: hsl(var(--foreground)); background: hsl(var(--thumb) / 0.45); }
.acc-tab[aria-selected="true"], .acc-tab[aria-pressed="true"], .acc-tab.is-active,
.acc-segmented__item[aria-pressed="true"], .acc-segmented__item[aria-checked="true"], .acc-segmented__item.is-active {
  background: hsl(var(--thumb)); color: hsl(var(--foreground)); font-weight: 600; box-shadow: var(--shadow-thumb);
}
.acc-tab:focus-visible, .acc-segmented__item:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 0; border-radius: 0.4375rem; }
.acc-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.125rem; padding: 0 0.375rem; border-radius: 999px; background: hsl(var(--fill)); color: hsl(var(--foreground)); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.acc-tab:is([aria-selected="true"], [aria-pressed="true"]) .acc-tab__count { background: hsl(var(--primary-soft)); color: hsl(var(--accent-foreground)); }
.acc-tabs--pills { gap: 0.125rem; }

/* Tables ----------------------------------------------------------------- */
/* v2.5: a table is a white rounded group with a quiet header and inset separators
   (drawn as a 1px background line so the first cell's can start 16px in). */
.acc-table-wrap { position: relative; overflow-x: auto; border: 0; border-radius: var(--radius-lg); background: hsl(var(--card)); }
.acc-card > .acc-table-wrap, .acc-card__body--flush > .acc-table-wrap { border: 0; border-radius: inherit; }
.acc-card > .acc-table-wrap:not(:last-child), .acc-card > .acc-card__body--flush:not(:last-child) > .acc-table-wrap { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.acc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-base); }
.acc-table th {
  position: sticky; top: 0; z-index: 1; height: 2.25rem; padding: 0 1rem; text-align: left; vertical-align: middle;
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: hsl(var(--muted-foreground));
  background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border)); white-space: nowrap;
}
.acc-table td {
  height: 2.75rem; padding: 0.375rem 1rem; vertical-align: middle; border-bottom: 0; color: hsl(var(--foreground));
  background-image: linear-gradient(hsl(var(--border)), hsl(var(--border)));
  background-size: 100% 1px; background-position: right bottom; background-repeat: no-repeat;
}
.acc-table td:first-child { background-size: calc(100% - 1rem) 1px; }
.acc-table tbody tr:last-child td { background-image: none; }
.acc-table tbody tr { transition: background-color var(--dur-fast); }
.acc-table tbody tr:hover td { background-color: hsl(var(--subtle)); }
.acc-table tbody tr[aria-selected="true"] td, .acc-table tbody tr.is-selected td { background-color: hsl(var(--accent)); }
.acc-table tbody tr[tabindex]:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
.acc-table .is-num, .acc-table td.is-num, .acc-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.acc-table .is-primary { font-weight: 500; color: hsl(var(--foreground)); }
.acc-table .is-muted { color: hsl(var(--muted-foreground)); }
.acc-table .is-actions { width: 1%; text-align: right; white-space: nowrap; }
.acc-table--dense th { height: 2rem; } .acc-table--dense td { height: 2.25rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.acc-table__cell-stack { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }   /* stretch, so .truncate works */
.acc-table__cell-stack > :is(.acc-badge, .acc-dot-status) { align-self: flex-start; }
.acc-table__cell-stack small { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-table__empty td { height: auto; padding: 2.5rem 1rem; text-align: center; }
.acc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid hsl(var(--border)); }
.acc-toolbar__spacer { flex: 1 1 auto; }
.acc-toolbar__summary { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
/* v2.5: 30px hairline chips on the card colour; solid foreground with ground-coloured text when on. */
.acc-filter-chip {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 1.875rem; padding: 0 0.75rem;
  border: 1px solid hsl(var(--border)); border-radius: 0.5rem; background: hsl(var(--card)); box-shadow: none;
  color: hsl(var(--foreground)); font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.acc-filter-chip:hover { background: hsl(var(--subtle)); border-color: hsl(var(--border-strong)); color: hsl(var(--foreground)); }
.acc-filter-chip[aria-pressed="true"], .acc-filter-chip.is-active { background: hsl(var(--foreground)); border-color: hsl(var(--foreground)); color: hsl(var(--background)); font-weight: 600; }
.acc-filter-chip[aria-pressed="true"]:hover, .acc-filter-chip.is-active:hover { background: hsl(var(--foreground) / 0.88); }
.acc-filter-chip[aria-pressed="true"] *, .acc-filter-chip.is-active * { color: inherit; }
.acc-filter-chip :is(.acc-badge, .acc-tabular, .tabular-nums) { height: auto; min-width: 0; padding: 0; background: none; color: inherit; font-weight: 500; opacity: 0.65; }   /* counts */
.acc-filter-chip > svg { width: 0.875rem; height: 0.875rem; }
.acc-pagination { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid hsl(var(--border)); font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }

/* Definition list / key-value rows */
dl.acc-kv { margin: 0; }
.acc-kv { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); gap: 0.5rem 1rem; font-size: var(--text-base); }
.acc-kv dt { color: hsl(var(--muted-foreground)); }
.acc-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Rows read like Settings > About: label left, value right-aligned and muted. */
.acc-kv--rows { display: block; }
.acc-kv--rows > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0.625rem 0; border-bottom: 1px solid hsl(var(--border)); }
.acc-kv--rows dt { flex: 0 0 auto; color: hsl(var(--foreground)); }
.acc-kv--rows dd { flex: 1 1 auto; min-width: 0; text-align: right; color: hsl(var(--muted-foreground)); }
.acc-kv--rows > div:last-child { border-bottom: 0; }

/* List rows (activity, queues) */
.acc-list { display: flex; flex-direction: column; }
/* v2.5: 44-52px rows with an inset separator (a 1px background line that starts 16px in, or
   after the icon column when the row leads with an icon tile, avatar, or check). Link rows
   without their own trailing icon get a drawn chevron. */
.acc-list__row {
  --acc-list-sep: 1rem;
  display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0;
  min-height: 2.75rem; padding: 0.5rem 1rem; min-width: 0; width: 100%;
  border: 0; text-align: left; color: inherit;
  background-color: transparent;
  background-image: linear-gradient(hsl(var(--border)), hsl(var(--border)));
  background-size: calc(100% - var(--acc-list-sep)) 1px; background-position: right bottom; background-repeat: no-repeat;
}
/* Button and link rows restate the separator so an app's button reset (background: transparent)
   can't stretch the 1px line over the whole row. */
button.acc-list__row, a.acc-list__row {
  cursor: pointer; transition: background-color var(--dur-fast);
  background-image: linear-gradient(hsl(var(--border)), hsl(var(--border)));
  background-size: calc(100% - var(--acc-list-sep)) 1px; background-position: right bottom; background-repeat: no-repeat;
}
.acc-list__row:last-child, li:last-child > .acc-list__row:only-child { background-image: none; }
/* Rows wrapped in <li>: the separator follows the list item. */
li:not(:last-child) > .acc-list__row:last-child, li:not(:last-child) > .acc-list__row:only-child {
  background-image: linear-gradient(hsl(var(--border)), hsl(var(--border)));
  background-size: calc(100% - var(--acc-list-sep)) 1px; background-position: right bottom; background-repeat: no-repeat;
}
.acc-list__row:has(> :is(.acc-list__icon, .acc-avatar, .acc-checkbox, .acc-radio):first-child) { --acc-list-sep: 3.5rem; }
button.acc-list__row:hover, a.acc-list__row:hover { background-color: hsl(var(--subtle)); }
button.acc-list__row:active, a.acc-list__row:active { background-color: hsl(var(--muted)); }
.acc-list__row[aria-current="true"], .acc-list__row[aria-current="page"], .acc-list__row.is-selected { background-color: hsl(var(--accent)); }
/* Settings-style icon tile: solid colour, glyph in --tile-glyph. A plain tile takes the product
   colour (--acc-product from [data-product], else primary); a tile the app colours keeps that colour. */
.acc-list__icon {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: 0.375rem;
  color: hsl(var(--muted-foreground)); background-color: currentColor; -webkit-text-fill-color: hsl(var(--tile-glyph));
  font-weight: 600;
}
.acc-list__icon[class="acc-list__icon"] { color: var(--acc-product, hsl(var(--primary))); }
.acc-list__icon > svg { width: 1rem; height: 1rem; stroke: hsl(var(--tile-glyph)); color: hsl(var(--tile-glyph)); }
.acc-list__body { flex: 1 1 auto; min-width: 0; }
.acc-list__title { font-size: var(--text-base); font-weight: 400; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-list__title :is(strong, b) { font-weight: 600; }
.acc-list__meta { margin-top: 0.0625rem; font-size: var(--text-sm); line-height: 1.35; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-list__trailing { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
/* Chevrons: restyle the ones in the markup (Lucide chevron-right), draw one on link rows without. */
:is(.acc-list__row, .acc-metric, .acc-card) svg.lucide-chevron-right { width: 0.875rem; height: 0.875rem; stroke-width: 2.75; color: hsl(var(--control-border)); }
:is(a, button).acc-list__row:not(:has(svg.lucide-chevron-right, svg.lucide-arrow-right, svg.lucide-external-link, svg.lucide-arrow-up-right, .acc-btn))::after {
  content: ''; flex: 0 0 auto; align-self: center; width: 0.4375rem; height: 0.75rem; margin-left: 0.125rem;
  background: hsl(var(--control-border));
  -webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat;
}

/* Progress */
.acc-progress { position: relative; width: 100%; height: 0.375rem; overflow: hidden; border-radius: 999px; background: hsl(var(--fill)); }
.acc-progress__bar { height: 100%; border-radius: inherit; background: hsl(var(--primary-fill)); transition: width var(--dur-slow) var(--ease-out); }
.acc-progress__bar--success { background: hsl(var(--success)); }
.acc-progress__bar--warning { background: hsl(var(--warning)); }
.acc-progress__bar--critical { background: hsl(var(--destructive)); }
.acc-progress--indeterminate::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: 999px; background: hsl(var(--primary)); animation: acc-indeterminate 1.4s var(--ease-in-out) infinite; }
.acc-progress--thin { height: 0.25rem; }
/* v3.1.0 (SYS-08): progress panel, shown where the long action was started (§7.5).
   Running: head (icon, stage, elapsed) + bar + one note on whether you may leave.
   Done: data-state="success"|"error", the result line, and the next action. */
.acc-progress-panel { display: grid; gap: 0.5rem; padding: 0.875rem 1rem; border-radius: var(--radius-lg); background: hsl(var(--fill)); }
.acc-progress-panel__head { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: var(--text-sm); font-weight: 500; }
.acc-progress-panel__head > svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: hsl(var(--muted-foreground)); }
.acc-progress-panel__stage { min-width: 0; overflow-wrap: anywhere; }
.acc-progress-panel__elapsed { margin-left: auto; flex: 0 0 auto; font-weight: 400; font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground)); }
.acc-progress-panel__note { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.acc-progress-panel__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.acc-progress-panel[data-state="success"] { background: hsl(var(--success) / 0.1); }
.acc-progress-panel[data-state="success"] .acc-progress-panel__head > svg { color: hsl(var(--success)); }
.acc-progress-panel[data-state="error"] { background: hsl(var(--destructive) / 0.08); }
.acc-progress-panel[data-state="error"] .acc-progress-panel__head > svg { color: hsl(var(--destructive)); }
.acc-progress-panel[data-state="live"] .acc-progress-panel__head > svg { color: hsl(var(--success)); }

.acc-spinner { width: 1rem; height: 1rem; border: 2px solid hsl(var(--muted-foreground) / 0.3); border-top-color: hsl(var(--primary)); border-radius: 50%; animation: acc-spin 0.7s linear infinite; }
.acc-spinner--lg { width: 1.5rem; height: 1.5rem; }

/* Overlays --------------------------------------------------------------- */
/* Dialog: 448 default, 560/640 forms. Title stays visible; body scrolls. */
.acc-dialog {
  position: fixed; inset: 0; z-index: var(--z-dialog);
  display: grid; place-items: center; padding: 1rem;
  pointer-events: none;
}
.acc-dialog__panel {
  position: relative; pointer-events: auto;
  display: flex; flex-direction: column; width: min(100%, 28rem); max-height: min(92dvh, 48rem);
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  animation: acc-pop-in var(--dur-slow) var(--ease-out) both;
}
.acc-dialog__panel--md { width: min(100%, 35rem); }
.acc-dialog__panel--lg { width: min(100%, 40rem); }
.acc-dialog[data-state="closed"] .acc-dialog__panel { animation: acc-scale-out var(--dur-fast) var(--ease-out) both; }
/* v2.5: alert-style card, 14px corners, solid icon tile, no grey footer band. */
.acc-dialog__header { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.25rem 1.25rem 0.5rem; }
.acc-dialog__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: 0.625rem; background-color: hsl(var(--primary-fill)); color: #fff; }
.acc-dialog__icon > svg { width: 1.375rem; height: 1.375rem; }
.acc-dialog__icon--destructive { background-color: hsl(var(--destructive)); color: hsl(var(--tile-glyph)); }
.acc-dialog__icon--warning { background-color: hsl(var(--warning)); color: hsl(var(--tile-glyph)); }
.acc-dialog__icon--success { background-color: hsl(var(--success)); color: hsl(var(--tile-glyph)); }
.acc-dialog__title { font-size: var(--text-md); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.acc-dialog__desc { margin-top: 0.25rem; font-size: var(--text-base); color: hsl(var(--muted-foreground)); }
.acc-dialog__close { margin-left: auto; flex: 0 0 auto; }
.acc-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.5rem 1.375rem 1.25rem; }
.acc-dialog__body:empty { display: none; }
.acc-dialog__footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.625rem; padding: 0.375rem 1.375rem 1.375rem; border-top: 0; background: transparent; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.acc-dialog__footer--split { justify-content: space-between; }
.acc-scope { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 0; border-radius: var(--radius-md); background: hsl(var(--fill)); font-size: var(--text-sm); }
.acc-scope > svg { width: 0.875rem; height: 0.875rem; color: hsl(var(--muted-foreground)); }
.acc-scope strong { font-weight: 600; }
@media (max-width: 639px) {
  .acc-dialog { place-items: end center; padding: 0; }
  .acc-dialog__panel, .acc-dialog__panel--md, .acc-dialog__panel--lg { width: 100%; max-height: 92dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation: acc-slide-in-up var(--dur-slow) var(--ease-out) both; }
  .acc-dialog__footer { border-radius: 0; flex-direction: column-reverse; align-items: stretch; padding-bottom: 1.25rem; }
}

/* Sheet / inspector: right 400 (metadata) or 560 (editing) */
.acc-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-sheet);
  display: flex; flex-direction: column; width: min(var(--shell-inspector), 100vw);
  background: hsl(var(--background)); color: hsl(var(--popover-foreground));   /* v2.5: grouped ground inside */
  border-left: 0; box-shadow: var(--shadow-lg);
  animation: acc-slide-in-right var(--dur-slow) var(--ease-out) both;
}
.acc-sheet--wide { width: min(35rem, 100vw); }
.acc-sheet--left { right: auto; left: 0; border-left: 0; border-right: 0; animation-name: acc-slide-in-left; }
.acc-sheet[data-state="closed"] { animation: acc-slide-out-right var(--dur-fast) var(--ease-out) both; }
.acc-sheet__header { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.125rem 1.25rem 0.75rem; border-bottom: 0; }
.acc-sheet__title { font-size: var(--text-lg); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.acc-sheet__desc { margin-top: 0.125rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.5rem 1.25rem 1.25rem; }
.acc-sheet__body dl.acc-kv--rows { padding: 0 1rem; border-radius: var(--radius-lg); background: hsl(var(--card)); }
.acc-sheet__body .acc-list:not(.border) { padding: 0; list-style: none; border-radius: var(--radius-lg); background: hsl(var(--card)); }
.acc-sheet__footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.875rem 1.25rem; border-top: 1px solid hsl(var(--border)); background: hsl(var(--background)); }

/* Popover & menu (120–180ms, shadow-md) */
.acc-popover {
  z-index: var(--z-popover); min-width: 12rem; padding: 0.75rem;
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 0; border-radius: 0.8125rem; box-shadow: var(--shadow-md);
  transform-origin: var(--acc-origin, top left);
  animation: acc-scale-in var(--dur-fast) var(--ease-out) both;
}
.acc-popover[data-state="closed"] { animation: acc-scale-out var(--dur-fast) var(--ease-out) both; }
.acc-popover--lg { width: 22rem; }
/* v2.5: context-menu style, full-width 44px items with hairlines between, icon trailing. */
.acc-menu {
  z-index: var(--z-popover); min-width: 14rem; max-width: 20rem; padding: 0; overflow: hidden;
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 0; border-radius: 0.8125rem; box-shadow: var(--shadow-md);
  transform-origin: var(--acc-origin, top left);
  animation: acc-scale-in var(--dur-fast) var(--ease-out) both;
}
.acc-menu[data-state="closed"] { animation: acc-scale-out var(--dur-fast) var(--ease-out) both; }
.acc-menu__label { padding: 0.625rem 1rem 0.25rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; text-transform: none; color: hsl(var(--muted-foreground)); }
.acc-menu__item {
  display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 1rem;
  border: 0; border-radius: 0; background: transparent; color: inherit;
  font-size: var(--text-base); text-align: left; cursor: pointer;
  transition: background-color var(--dur-fast);
}
.acc-menu__item + .acc-menu__item { box-shadow: inset 0 1px 0 hsl(var(--border)); }
.acc-menu__item > svg { order: 2; margin-left: auto; width: 1rem; height: 1rem; flex: 0 0 auto; color: hsl(var(--foreground)); }
.acc-menu__item:hover, .acc-menu__item:focus-visible, .acc-menu__item[data-highlighted] { background: hsl(var(--muted)); outline: none; }
.acc-menu__item:focus-visible { box-shadow: inset 0 0 0 2px hsl(var(--ring)); }
.acc-menu__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.acc-menu__item--destructive { color: hsl(var(--destructive)); }
.acc-menu__item--destructive > svg { color: currentColor; }
.acc-menu__item--destructive:hover { background: hsl(var(--destructive-soft)); }
.acc-menu__item__body { flex: 1 1 auto; min-width: 0; }
.acc-menu__item__desc { display: block; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-menu__item__hint { margin-left: auto; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.acc-menu__sep { height: 0.5rem; margin: 0; background: hsl(var(--fill)); }
.acc-menu__check { width: 1rem; height: 1rem; color: hsl(var(--primary)); margin-left: auto; }

/* App launcher (v2.3): an .acc-menu listing every suite app, grouped (Hub; Operate; Deliver; Govern),
   opened by the top-bar [data-shell="app-launcher"] menu button. Portalled to body, side="bottom"
   align="start" sideOffset=8 from the trigger, collision padding 8. It never needs more than the
   viewport: full width less 8 px gutters on phones, and it scrolls inside itself when short. */
.acc-menu.acc-launcher {
  position: fixed; width: min(34rem, calc(100vw - 1rem)); max-width: none;
  max-height: min(40rem, calc(100dvh - var(--shell-topbar) - 1rem)); overflow-y: auto; overscroll-behavior: contain;
  padding: 0.5rem;
}
.acc-launcher__group + .acc-launcher__group { margin-top: 0.25rem; }
.acc-launcher__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.125rem; }
.acc-launcher__item { --acc-launch: var(--suite-product-hub); min-height: 3rem; }
/* Shell surface: the launcher keeps its Atlas tile grid, not the v2.5 context-menu rows. */
.acc-launcher .acc-menu__item { padding: 0.375rem 0.625rem; border-radius: var(--radius-sm); }
.acc-launcher .acc-menu__item + .acc-menu__item { box-shadow: none; }
.acc-launcher .acc-menu__item:focus-visible { box-shadow: inset 0 0 0 2px hsl(var(--ring)); }
.acc-launcher .acc-menu__label { padding: 0.375rem 0.625rem 0.25rem; }
.acc-launcher__tile {
  display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: var(--radius-md);
  color: var(--acc-launch); background: color-mix(in srgb, var(--acc-launch) 12%, hsl(var(--popover)));
}
.acc-launcher__item > .acc-launcher__tile > svg { width: 1rem; height: 1rem; stroke-width: 1.75; color: currentColor; }
.acc-launcher__name { display: block; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-launcher__item[aria-current="page"] { background: hsl(var(--accent)); }
.acc-launcher__item[aria-current="page"]::after {
  content: 'Current'; content: 'Current' / '';
  flex: 0 0 auto; margin-left: auto; font-size: var(--text-xs); color: hsl(var(--accent-foreground));
}
.acc-launcher__item[data-app="hub"] { --acc-launch: var(--suite-product-hub); }
.acc-launcher__item[data-app="consult"] { --acc-launch: var(--suite-product-consult); }
.acc-launcher__item[data-app="migrate"] { --acc-launch: var(--suite-product-migrate); }
.acc-launcher__item[data-app="connect"] { --acc-launch: var(--suite-product-connect); }
.acc-launcher__item[data-app="assess"] { --acc-launch: var(--suite-product-assess); }
.acc-launcher__item[data-app="manage"] { --acc-launch: var(--suite-product-manage); }
.acc-launcher__item[data-app="protect"] { --acc-launch: var(--suite-product-protect); }
.acc-launcher__item[data-app="license"] { --acc-launch: var(--suite-product-license); }
.acc-launcher__item[data-app="fleet"] { --acc-launch: var(--suite-product-fleet); }
.acc-launcher__item[data-app="devices"] { --acc-launch: var(--suite-product-devices); }
@media (max-width: 639px) { .acc-launcher__grid { grid-template-columns: minmax(0, 1fr); } }

/* Tooltip (dark, 12px, 150ms) */
.acc-tooltip {
  z-index: var(--z-tooltip); max-width: 18rem; padding: 0.375rem 0.625rem;
  background: hsl(222 44% 11%); color: hsl(216 25% 94%);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  font-size: var(--text-xs); font-weight: 500; line-height: 1.4;
  animation: acc-pop-in var(--dur-fast) var(--ease-out) both;
}
.dark .acc-tooltip, [data-theme="dark"] .acc-tooltip { background: hsl(216 25% 94%); color: hsl(222 44% 11%); }
.acc-tooltip .acc-kbd { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.18); color: inherit; }

/* Toasts: bottom-right, 360, icon + title + body + optional action */
.acc-toaster { position: fixed; right: 1rem; bottom: 1rem; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 0.5rem; width: min(22.5rem, calc(100vw - 2rem)); pointer-events: none; }
.acc-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem;
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 0; border-radius: 1.125rem; box-shadow: var(--shadow-lg);   /* v2.5: notification banner */
  animation: acc-slide-in-up var(--dur-slow) var(--ease-out) both;
}
.acc-toast[data-state="closed"] { animation: acc-fade-out var(--dur-fast) var(--ease-out) both; }
.acc-toast > svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; margin-top: 0.0625rem; color: hsl(var(--muted-foreground)); }
.acc-toast--success > svg { color: hsl(var(--success)); }
.acc-toast--warning > svg { color: hsl(var(--warning)); }
.acc-toast--error > svg { color: hsl(var(--destructive)); }
.acc-toast--info > svg { color: hsl(var(--info)); }
.acc-toast__body { flex: 1 1 auto; min-width: 0; }
.acc-toast__title { font-size: var(--text-base); font-weight: 600; }
.acc-toast__desc { margin-top: 0.125rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-toast__action { margin-top: 0.5rem; }
.acc-toast__close { flex: 0 0 auto; margin: -0.25rem -0.25rem 0 0; }

/* Command palette */
.acc-command { width: min(100%, 38rem); padding: 0; overflow: hidden; }
.acc-command__input { display: flex; align-items: center; gap: 0.625rem; height: 3.25rem; padding: 0 1rem; border-bottom: 1px solid hsl(var(--border)); }
.acc-command__input > svg { width: 1.125rem; height: 1.125rem; color: hsl(var(--muted-foreground)); }
.acc-command__input input { flex: 1 1 auto; height: 100%; border: 0; background: transparent; font-size: var(--text-md); outline: none; }
.acc-command__list { max-height: 24rem; overflow-y: auto; padding: 0.5rem; }
.acc-command__group { padding: 0.25rem 0; }
.acc-command__empty { padding: 2rem 1rem; text-align: center; color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
.acc-command__footer { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 1rem; border-top: 1px solid hsl(var(--border)); background: hsl(var(--subtle)); font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }

/* Microsoft 365 connection (v2.6.0) ---------------------------------------
   One connection experience for every app that connects to a customer's
   Microsoft 365 tenant (ACCRED_PRODUCT_DESIGN_SYSTEM.md §7, "Microsoft 365
   connection"). Compose it from a titled .acc-card: the card header is the
   group title, .acc-connection__body is the white group, and an
   .acc-card__footer.acc-connection__actions holds the actions. The state sits
   on the root as data-state: not-connected | checking | connected |
   attention | error. Every state shows its status in words (a badge and the
   summary line), never by colour alone. */
.acc-connection__body { display: flex; flex-direction: column; min-width: 0; }
.acc-connection__body > * + * { border-top: 1px solid hsl(var(--border)); }
.acc-connection__body > .acc-connection__summary,
.acc-connection__body > .acc-banner { border-top: 0; }
.acc-connection__body > .acc-banner { margin: 0 1rem 1rem; background: hsl(var(--fill)); }

/* Identity: tenant tile, name, domain and tenant ID, status badge */
.acc-connection__identity { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1rem 1rem 0.75rem; }
.acc-connection__tile {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: 0 0 auto;
  border-radius: 0.625rem; background: hsl(var(--fill)); color: hsl(var(--foreground));
}
.acc-connection__tile > svg { width: 1.375rem; height: 1.375rem; stroke-width: 1.75; }
.acc-connection__who { flex: 1 1 auto; min-width: 0; }
.acc-connection__name { margin: 0; font-size: var(--text-md); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.acc-connection__meta { margin-top: 0.125rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.acc-connection__meta :is(code, .acc-mono) { font-family: var(--font-mono); font-size: var(--text-xs); }
.acc-connection__identity > .acc-badge { flex: 0 0 auto; margin-top: 0.125rem; }
/* The summary line says what was verified and when (role="status"). */
.acc-connection__summary { margin: 0; padding: 0 1rem 1rem 4.375rem; font-size: var(--text-sm); line-height: 1.45; color: hsl(var(--muted-foreground)); }
.acc-connection__summary strong { font-weight: 600; color: hsl(var(--foreground)); }

/* Sections: a sentence-case label, then a list, key-value rows, steps, or a note */
.acc-connection__section { padding-bottom: 0.25rem; }
.acc-connection__label { margin: 0; padding: 0.875rem 1rem 0.25rem; font-size: var(--text-sm); font-weight: 600; line-height: 1.35; color: hsl(var(--muted-foreground)); }
.acc-connection__section > .acc-kv--rows { padding: 0 1rem; }
.acc-connection__section > .acc-kv--rows dd :is(code, .acc-mono) { font-family: var(--font-mono); font-size: var(--text-xs); }
.acc-connection__note { margin: 0; padding: 0.25rem 1rem 0.875rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }

/* Access rows: one per thing the app reads or changes, with its permission and a state glyph */
.acc-connection__access, .acc-connection__list { margin: 0; padding: 0; list-style: none; }
.acc-list__row.acc-connection__perm { --acc-list-sep: 3.25rem; align-items: flex-start; }
.acc-connection__perm :is(.acc-list__title, .acc-list__meta) { white-space: normal; overflow-wrap: anywhere; }
.acc-connection__perm .acc-list__meta code { font-family: var(--font-mono); font-size: var(--text-xs); }
.acc-connection__perm > .acc-list__trailing { align-self: center; font-weight: 500; }
.acc-connection__check {
  --acc-connection-glyph: none;
  display: grid; place-items: center; width: 1.375rem; height: 1.375rem; flex: 0 0 auto; margin-top: 0.0625rem;
  border-radius: 50%; background: hsl(var(--fill)); color: hsl(var(--muted-foreground));
}
.acc-connection__check::after {
  content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor;
}
.acc-connection__check:is([data-state="verified"], [data-state="granted"], [data-state="missing"], [data-state="failed"], [data-state="optional"])::after,
:is([data-state="verified"], [data-state="granted"], [data-state="missing"], [data-state="failed"], [data-state="optional"]) > .acc-connection__check::after {
  width: 0.75rem; height: 0.75rem; border-radius: 0;
  -webkit-mask: var(--acc-connection-glyph) center / contain no-repeat; mask: var(--acc-connection-glyph) center / contain no-repeat;
}
:is([data-state="verified"], [data-state="granted"]) > .acc-connection__check,
.acc-connection__check:is([data-state="verified"], [data-state="granted"]) {
  --acc-connection-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-state="verified"] > .acc-connection__check, .acc-connection__check[data-state="verified"] { background: hsl(var(--success)); color: hsl(var(--tile-glyph)); }
[data-state="missing"] > .acc-connection__check, .acc-connection__check[data-state="missing"] {
  background: hsl(var(--warning)); color: hsl(var(--tile-glyph));
  --acc-connection-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v9M12 19.5v.01' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-state="failed"] > .acc-connection__check, .acc-connection__check[data-state="failed"] {
  background: hsl(var(--destructive)); color: hsl(var(--tile-glyph));
  --acc-connection-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-state="optional"] > .acc-connection__check, .acc-connection__check[data-state="optional"] {
  --acc-connection-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
:is([data-state="checking"] > .acc-connection__check, .acc-connection__check[data-state="checking"])::after {
  width: 0.875rem; height: 0.875rem; border-radius: 50%; background: none;
  border: 2px solid hsl(var(--muted-foreground) / 0.3); border-top-color: hsl(var(--primary));
  animation: acc-spin 0.7s linear infinite;
}
[data-state="missing"] > .acc-list__trailing { color: hsl(var(--warning)); font-weight: 600; }
[data-state="failed"] > .acc-list__trailing { color: hsl(var(--destructive)); font-weight: 600; }
[data-state="verified"] > .acc-list__trailing { color: hsl(var(--success)); }

/* Pre-consent: what happens, in order */
.acc-connection__steps { display: flex; flex-direction: column; margin: 0; padding: 0.25rem 1rem 0.5rem; list-style: none; counter-reset: acc-connection-step; }
.acc-connection__steps > li { position: relative; display: flex; gap: 0.75rem; padding: 0.375rem 0 0.75rem; counter-increment: acc-connection-step; }
.acc-connection__steps > li::before {
  content: counter(acc-connection-step); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: 0 0 auto;
  border-radius: 50%; background: hsl(var(--primary) / 0.12); color: hsl(var(--accent-foreground));
  font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.acc-connection__steps > li:not(:last-child)::after { content: ''; position: absolute; left: 0.75rem; top: 2.125rem; bottom: 0.125rem; width: 1px; background: hsl(var(--border)); }
.acc-connection__steps > li > div { min-width: 0; padding-top: 0.125rem; }
.acc-connection__steps strong { display: block; font-weight: 600; line-height: 1.35; }
.acc-connection__steps p { margin: 0.125rem 0 0; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }

/* Actions: Disconnect on the left, Re-check and Renew (or Connect) on the right */
.acc-connection__actions { flex-wrap: wrap; }
.acc-connection__actions > .acc-connection__danger { margin-right: auto; }

@media (max-width: 639px) {
  .acc-connection__summary { padding-left: 1rem; }
  .acc-connection__actions { flex-direction: column-reverse; align-items: stretch; }
  .acc-connection__actions > .acc-btn { width: 100%; }
  .acc-connection__actions > .acc-connection__danger { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is([data-state="checking"] > .acc-connection__check, .acc-connection__check[data-state="checking"])::after { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
}
@media (forced-colors: active) {
  .acc-connection__check, .acc-connection__tile { forced-color-adjust: none; border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}

/* Settings (v2.7.0) --------------------------------------------------------
   One Settings page in every app (ACCRED_PRODUCT_DESIGN_SYSTEM.md §7,
   "Settings"). .acc-settings is the page body under the page header: a
   section rail (.acc-settings__nav, two groups, Organization and My
   settings) beside the open section (.acc-settings__section). Below 1024 px
   the rail hides and .acc-settings__picker, a labelled native select with
   the same groups, takes its place. A section is a head (title, one-line
   description, scope line) and titled .acc-card groups whose body is an
   .acc-settings__rows list of .acc-setting rows: label and help on the
   left, the control on the right (under the text on phones, except a lone
   switch). An organization setting the viewer cannot change shows .acc-lock
   ("Set by your admin") and a disabled control. Unsaved changes show
   .acc-savebar, sticky at the bottom of the section. */
.acc-settings { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.acc-settings__picker { display: none; }

/* Section rail */
.acc-settings__nav { position: sticky; top: calc(var(--shell-topbar) + 1rem); display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.acc-settings__group { display: flex; flex-direction: column; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.acc-settings__group-label {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin: 0; padding: 0 0.75rem 0.375rem; font-size: var(--text-xs); font-weight: 600; line-height: 1.3;
  color: hsl(var(--muted-foreground));
}
.acc-settings__link {
  display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 2.25rem; padding: 0.4375rem 0.75rem;
  border: 0; border-radius: var(--radius-md); background: transparent; color: hsl(var(--foreground));
  font: inherit; font-size: var(--text-base); font-weight: 500; line-height: 1.3; text-align: left; text-decoration: none;
  cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out);
}
.acc-settings__link > svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: hsl(var(--muted-foreground)); }
.acc-settings__link:hover { background: hsl(var(--fill)); }
.acc-settings__link:is([aria-current="page"], [aria-current="true"]) { background: hsl(var(--accent)); font-weight: 600; }
.acc-settings__link:is([aria-current="page"], [aria-current="true"]) > svg { color: hsl(var(--accent-foreground)); }
.acc-settings__link:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.acc-settings__link-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-settings__link-meta { display: inline-flex; flex: 0 0 auto; color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
.acc-settings__link > .acc-settings__link-meta > svg { width: 0.875rem; height: 0.875rem; }

/* The open section */
.acc-settings__section { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.acc-settings__head { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 0.25rem; }
.acc-settings__title { margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: hsl(var(--foreground)); }
.acc-settings__desc { margin: 0; max-width: 72ch; font-size: var(--text-base); line-height: 1.45; color: hsl(var(--muted-foreground)); }
.acc-settings__scope { display: flex; align-items: flex-start; gap: 0.375rem; margin: 0.25rem 0 0; font-size: var(--text-sm); line-height: 1.4; color: hsl(var(--muted-foreground)); }
.acc-settings__scope > svg { width: 0.875rem; height: 0.875rem; flex: 0 0 auto; margin-top: 0.1875rem; }
.acc-settings__scope strong { font-weight: 600; color: hsl(var(--foreground)); }
.acc-settings__section > :is(.acc-banner, .acc-card) { margin: 0; }
.acc-settings__changed { margin: -0.75rem 0 0; padding: 0 1rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }

/* Setting rows: label and help left, control right, inset separators */
.acc-settings__rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.acc-setting {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 1.5rem;
  min-height: 3.25rem; margin: 0; padding: 0.75rem 1rem;
  background-image: linear-gradient(hsl(var(--border)), hsl(var(--border)));
  background-size: calc(100% - 1rem) 1px; background-position: right bottom; background-repeat: no-repeat;
}
.acc-setting:last-child { background-image: none; }
.acc-setting__text { min-width: 0; }
.acc-setting__label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0; font-size: var(--text-base); font-weight: 500; line-height: 1.35; color: hsl(var(--foreground)); }
.acc-setting__desc { margin: 0.125rem 0 0; max-width: 62ch; font-size: var(--text-sm); line-height: 1.4; color: hsl(var(--muted-foreground)); }
.acc-setting__control { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; min-width: 0; }
.acc-setting__control > :is(.acc-input, .acc-select, .acc-input-wrap) { width: 16rem; max-width: 100%; }
.acc-setting__value { min-width: 0; color: hsl(var(--muted-foreground)); text-align: right; overflow-wrap: anywhere; }
.acc-setting__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-setting__foot > .acc-choice { font-size: var(--text-sm); }
.acc-setting__foot > .acc-btn--link { height: auto; font-size: inherit; vertical-align: baseline; }   /* inline in text */
.acc-setting--stacked { grid-template-columns: minmax(0, 1fr); }
.acc-setting--stacked > .acc-setting__control { justify-content: flex-start; }
.acc-setting--stacked .acc-setting__value { text-align: left; }
.acc-setting--stacked > .acc-setting__control > :is(.acc-input, .acc-select, .acc-textarea, .acc-input-wrap) { width: 100%; }

/* "Set by your admin": an organization setting the viewer cannot change */
.acc-lock {
  display: inline-flex; align-items: center; gap: 0.25rem; height: 1.25rem; padding: 0 0.4375rem;
  border-radius: 6px; background: hsl(var(--fill)); color: hsl(var(--foreground));
  font-size: var(--text-xs); font-weight: 500; line-height: 1; white-space: nowrap;
}
.acc-lock > svg { width: 0.75rem; height: 0.75rem; flex: 0 0 auto; color: hsl(var(--muted-foreground)); }

/* Save bar: shown only while the section has unsaved changes */
.acc-savebar {
  position: sticky; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: var(--z-sticky);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  padding: 0.625rem 0.625rem 0.625rem 1rem; border: 0; border-radius: 1rem;
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); box-shadow: var(--shadow-md);
  animation: acc-slide-in-up var(--dur-base) var(--ease-out) both;
}
.acc-savebar[hidden] { display: none; }
.acc-savebar__text { display: flex; flex: 1 1 12rem; align-items: center; gap: 0.5rem; min-width: 0; font-size: var(--text-sm); font-weight: 500; }
.acc-savebar__text > svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: hsl(var(--muted-foreground)); }
.acc-savebar[data-state="error"] .acc-savebar__text { color: hsl(var(--destructive-tint-foreground)); }
.acc-savebar[data-state="error"] .acc-savebar__text > svg { color: hsl(var(--destructive)); }
.acc-savebar__actions { display: flex; gap: 0.5rem; margin-left: auto; }
/* The shell scrolls the window; .acc-shell__scroll only grows. Its overflow: auto would make it the
   sticky container, so on a page with a sticky bar (Settings, .acc-savebar, or any [data-sticky="true"]
   action row) it clips sideways without scrolling and the bar and rail stick to the screen. */
.acc-shell__scroll:has(.acc-settings, .acc-savebar, [data-sticky="true"]) { overflow-x: clip; overflow-y: visible; }

@media (max-width: 1023px) {
  .acc-settings { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .acc-settings__nav { display: none; }
  .acc-settings__picker { display: flex; }
}
@media (max-width: 639px) {
  .acc-setting { grid-template-columns: minmax(0, 1fr); }
  .acc-setting > .acc-setting__control { justify-content: flex-start; }
  .acc-setting > .acc-setting__control > :is(.acc-input, .acc-select, .acc-textarea, .acc-input-wrap, .acc-segmented, .acc-tabs) { width: 100%; }
  .acc-setting:has(> .acc-setting__control > .acc-switch:only-child) { grid-template-columns: minmax(0, 1fr) auto; }
  .acc-setting:has(> .acc-setting__control > .acc-switch:only-child) > .acc-setting__control { justify-content: flex-end; }
  .acc-setting__value { text-align: left; }
  .acc-savebar { bottom: max(0.5rem, env(safe-area-inset-bottom)); }
  .acc-savebar__actions { width: 100%; }
  .acc-savebar__actions > .acc-btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .acc-savebar { animation: none; } }
@media (forced-colors: active) {
  .acc-savebar, .acc-lock { border: 1px solid CanvasText; }
  .acc-settings__link:is([aria-current="page"], [aria-current="true"]) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .acc-settings__link:is([aria-current="page"], [aria-current="true"]) > svg { color: HighlightText; }
}

/* --------------------------------------------------------------------------
   6. States: loading, empty, error, permission, banners
   -------------------------------------------------------------------------- */
.acc-skeleton {
  position: relative; overflow: hidden; border-radius: var(--radius-sm);
  background: hsl(var(--fill));
  /* v2.5.3: hidden for the first --skeleton-delay, then a quick fade, so a load that finishes sooner shows no skeleton at all. */
  animation: acc-fade-in var(--dur-base) var(--ease-out) var(--skeleton-delay, 300ms) both;
}
.acc-skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, hsl(var(--skeleton-sheen)) 50%, transparent 100%);
  background-size: 200% 100%; background-position: 200% 0;
  animation: acc-shimmer 1.6s var(--ease-in-out) var(--skeleton-delay, 300ms) infinite;
}
/* Where a skeleton takes over from a boot splash or another skeleton, show it at once (no blank gap). */
.acc-skeleton-immediate { --skeleton-delay: 0ms; }
.acc-skeleton--text { height: 0.875rem; width: 100%; }
.acc-skeleton--title { height: 1.25rem; width: 40%; }
.acc-skeleton--circle { border-radius: 50%; }
.acc-skeleton--row { height: 2.75rem; border-radius: 0; }
/* Inside real type (.acc-page-title, .acc-metric__value, a table cell) the line keeps its own height; set the width. */
.acc-skeleton--inline { display: inline-block; height: 0.8em; width: 8em; max-width: 100%; vertical-align: baseline; border-radius: var(--radius-xs); }
.acc-skeleton-stack { display: flex; flex-direction: column; gap: 0.625rem; }
/* Reduced motion: a still block, no sweep. (After the rules above so it wins at equal specificity.) */
@media (prefers-reduced-motion: reduce) { .acc-skeleton::after { content: none; } }

/* v2.5 empty state: a large plain symbol, bold headline, muted body (no tile). */
.acc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 2.5rem 1.5rem; text-align: center; }
.acc-empty--compact { padding: 2rem 1rem; }
.acc-empty__icon { display: grid; place-items: center; margin-bottom: 0.5rem; color: hsl(var(--muted-foreground)); }
.acc-empty__icon > svg { width: 2rem; height: 2rem; stroke-width: 1.5; }
.acc-empty--compact .acc-empty__icon > svg { width: 1.75rem; height: 1.75rem; }
.acc-empty__title { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }
.acc-empty__desc { max-width: 30rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
.acc-empty--error .acc-empty__icon { color: hsl(var(--destructive)); }
.acc-empty--permission .acc-empty__icon { color: hsl(var(--warning)); }

/* v2.5 banner: a white group with a coloured symbol tile; the tone lives in the tile only. */
.acc-banner {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
  border: 0; border-radius: var(--radius-lg);
  background: hsl(var(--card)); color: hsl(var(--foreground)); font-size: var(--text-base);
}
.acc-banner > svg {
  box-sizing: content-box; width: 1rem; height: 1rem; padding: 0.3125rem; margin: 0; flex: 0 0 auto; align-self: flex-start;
  border-radius: 0.4375rem; color: hsl(var(--muted-foreground)); background-color: currentColor; stroke: hsl(var(--tile-glyph));
}
.acc-banner__body { flex: 1 1 auto; min-width: 0; }
.acc-banner__title { font-weight: 600; }
.acc-banner__desc { margin-top: 0.125rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-banner__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 0.375rem; }
.acc-banner--info > svg { color: hsl(var(--info)); }
.acc-banner--success > svg { color: hsl(var(--success)); }
.acc-banner--warning > svg { color: hsl(var(--warning)); }
.acc-banner--critical > svg { color: hsl(var(--destructive)); }
.acc-banner--bar { border-radius: 0; box-shadow: 0 1px 0 hsl(var(--border)); }
.acc-details { border: 0; border-radius: var(--radius-md); background: hsl(var(--fill)); font-size: var(--text-sm); }
.acc-details > summary { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 0.875rem; cursor: pointer; list-style: none; font-weight: 500; color: hsl(var(--foreground)); }
.acc-details > summary::-webkit-details-marker { display: none; }
.acc-details > summary::before { content: ''; width: 0.375rem; height: 0.375rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-fast); margin-left: 0.125rem; }
.acc-details[open] > summary::before { transform: rotate(45deg); }
.acc-details__body { padding: 0 0.875rem 0.875rem; }
.acc-code { display: block; padding: 0.625rem 0.75rem; border-radius: var(--radius-sm); background: hsl(var(--fill)); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Boot / route loading: do not replace the shell; fade content */
.acc-boot { display: grid; place-items: center; min-height: 100dvh; padding: 2rem; background: hsl(var(--background)); }
.acc-boot__card { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.acc-boot__logo { width: 3rem; height: 3rem; }
.acc-boot__bar { width: 12rem; }
.acc-boot__text { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }

/* --------------------------------------------------------------------------
   7. Help & onboarding
   -------------------------------------------------------------------------- */
.acc-kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.375rem; height: 1.25rem; padding: 0 0.3125rem;
  border: 1px solid hsl(var(--border)); border-bottom-width: 2px; border-radius: var(--radius-xs);
  background: hsl(var(--card)); color: hsl(var(--muted-foreground));
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; line-height: 1;
}
.acc-kbd-combo { display: inline-flex; align-items: center; gap: 0.1875rem; }

/* Getting-started checklist (first-run panel) */
.acc-checklist { display: flex; flex-direction: column; }
.acc-checklist__head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
.acc-checklist__progress { flex: 1 1 auto; min-width: 0; }
.acc-checklist__progress-label { display: flex; justify-content: space-between; margin-bottom: 0.375rem; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.acc-checklist__item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
.acc-checklist__item:last-child { border-bottom: 0; }
.acc-checklist__mark { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; flex: 0 0 auto; margin-top: 0.0625rem; border-radius: 50%; border: 1.5px solid hsl(var(--border-strong)); color: transparent; font-size: var(--text-xs); font-weight: 600; }
.acc-checklist__item[data-done="true"] .acc-checklist__mark { border-color: hsl(var(--success)); background: hsl(var(--success)); color: #fff; }
.acc-checklist__item[data-done="true"] .acc-checklist__title { color: hsl(var(--muted-foreground)); text-decoration: line-through; text-decoration-color: hsl(var(--border-strong)); }
.acc-checklist__item[data-current="true"] { background: hsl(var(--subtle)); }
.acc-checklist__item[data-current="true"] .acc-checklist__mark { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.acc-checklist__body { flex: 1 1 auto; min-width: 0; }
.acc-checklist__title { font-size: var(--text-base); font-weight: 500; }
.acc-checklist__desc { margin-top: 0.125rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-checklist__action { flex: 0 0 auto; }

/* Coach mark (spotlight tour step). The host positions it; the spotlight is
   a box-shadow cutout on .acc-coachmark__spot. */
.acc-coachmark__spot { position: fixed; z-index: var(--z-overlay); border-radius: var(--radius-md); box-shadow: 0 0 0 9999px hsl(222 44% 11% / 0.55), 0 0 0 3px hsl(var(--primary) / 0.6); pointer-events: none; transition: all var(--dur-slow) var(--ease-out); }
.acc-coachmark {
  position: fixed; z-index: var(--z-popover); width: min(20rem, calc(100vw - 2rem)); padding: 1rem;
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: acc-pop-in var(--dur-slow) var(--ease-out) both;
}
.acc-coachmark__step { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: hsl(var(--primary)); }
.acc-coachmark__title { margin-top: 0.25rem; font-size: var(--text-md); font-weight: 600; }
.acc-coachmark__desc { margin-top: 0.25rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-coachmark__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.875rem; }
.acc-coachmark__dots { display: flex; gap: 0.25rem; }
.acc-coachmark__dots i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: hsl(var(--border-strong)); }
.acc-coachmark__dots i[data-active="true"] { background: hsl(var(--primary)); }

/* Help panel (right sheet) content blocks */
.acc-help-item { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid hsl(var(--border)); }
.acc-help-item:last-child { border-bottom: 0; }
.acc-help-item__icon { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: var(--radius-md); background: hsl(var(--primary-soft)); color: hsl(var(--accent-foreground)); }
.acc-help-item__icon > svg { width: 1rem; height: 1rem; }
.acc-help-item__title { font-size: var(--text-base); font-weight: 500; }
.acc-help-item__desc { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: var(--text-sm); border-bottom: 1px solid hsl(var(--border)); }
.acc-shortcut-row:last-child { border-bottom: 0; }

/* Stepper (focused task flow) */
.acc-stepper { display: flex; gap: 0.5rem; }
.acc-stepper__step { display: flex; flex: 1 1 0; align-items: center; gap: 0.5rem; min-width: 0; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-stepper__num { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid hsl(var(--border-strong)); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.acc-stepper__step[data-state="current"] { color: hsl(var(--foreground)); font-weight: 500; }
.acc-stepper__step[data-state="current"] .acc-stepper__num { border-color: hsl(var(--primary-fill)); background: hsl(var(--primary-fill)); color: #fff; }
.acc-stepper__step[data-state="done"] .acc-stepper__num { border-color: hsl(var(--success)); background: hsl(var(--success)); color: #fff; }
.acc-stepper__line { flex: 1 1 auto; height: 1px; background: hsl(var(--border)); }
.acc-stepper__step[data-state="done"] + .acc-stepper__line { background: hsl(var(--success)); }
@media (max-width: 639px) { .acc-stepper__label { display: none; } }

/* --------------------------------------------------------------------------
   8. Utilities
   -------------------------------------------------------------------------- */
.acc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.acc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-row { display: flex; align-items: center; gap: 0.5rem; }
.acc-row--between { justify-content: space-between; }
.acc-row--wrap { flex-wrap: wrap; }
.acc-grow { flex: 1 1 auto; min-width: 0; }
.acc-skip-link { position: absolute; left: 1rem; top: -3rem; z-index: var(--z-tooltip); padding: 0.5rem 0.75rem; border-radius: var(--radius-md); background: hsl(var(--primary-fill)); color: #fff; font-weight: 600; transition: top var(--dur-fast); }
.acc-skip-link:focus { top: 1rem; }
.acc-icon-16 { width: 1rem; height: 1rem; }

.acc-icon-20 { width: 1.25rem; height: 1.25rem; }
.acc-product-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--acc-product, hsl(var(--primary))); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc-product, hsl(var(--primary))) 15%, transparent); }
[data-product="hub"] { --acc-product: var(--suite-product-hub); }
[data-product="consult"] { --acc-product: var(--suite-product-consult); }
[data-product="migrate"] { --acc-product: var(--suite-product-migrate); }
[data-product="connect"] { --acc-product: var(--suite-product-connect); }
[data-product="assess"] { --acc-product: var(--suite-product-assess); }
[data-product="manage"] { --acc-product: var(--suite-product-manage); }
[data-product="protect"] { --acc-product: var(--suite-product-protect); }
[data-product="license"] { --acc-product: var(--suite-product-license); }
[data-product="fleet"] { --acc-product: var(--suite-product-fleet); }
[data-product="devices"] { --acc-product: var(--suite-product-devices); }
.dark [data-product="hub"], .dark[data-product="hub"], [data-theme="dark"] [data-product="hub"], [data-theme="dark"][data-product="hub"] { --acc-product: var(--suite-product-hub-on-dark); }
.dark [data-product="consult"], .dark[data-product="consult"], [data-theme="dark"] [data-product="consult"], [data-theme="dark"][data-product="consult"] { --acc-product: var(--suite-product-consult-on-dark); }
.dark [data-product="migrate"], .dark[data-product="migrate"], [data-theme="dark"] [data-product="migrate"], [data-theme="dark"][data-product="migrate"] { --acc-product: var(--suite-product-migrate-on-dark); }
.dark [data-product="connect"], .dark[data-product="connect"], [data-theme="dark"] [data-product="connect"], [data-theme="dark"][data-product="connect"] { --acc-product: var(--suite-product-connect-on-dark); }
.dark [data-product="assess"], .dark[data-product="assess"], [data-theme="dark"] [data-product="assess"], [data-theme="dark"][data-product="assess"] { --acc-product: var(--suite-product-assess-on-dark); }
.dark [data-product="manage"], .dark[data-product="manage"], [data-theme="dark"] [data-product="manage"], [data-theme="dark"][data-product="manage"] { --acc-product: var(--suite-product-manage-on-dark); }
.dark [data-product="protect"], .dark[data-product="protect"], [data-theme="dark"] [data-product="protect"], [data-theme="dark"][data-product="protect"] { --acc-product: var(--suite-product-protect-on-dark); }
.dark [data-product="license"], .dark[data-product="license"], [data-theme="dark"] [data-product="license"], [data-theme="dark"][data-product="license"] { --acc-product: var(--suite-product-license-on-dark); }
.dark [data-product="fleet"], .dark[data-product="fleet"], [data-theme="dark"] [data-product="fleet"], [data-theme="dark"][data-product="fleet"] { --acc-product: var(--suite-product-fleet-on-dark); }
.dark [data-product="devices"], .dark[data-product="devices"], [data-theme="dark"] [data-product="devices"], [data-theme="dark"][data-product="devices"] { --acc-product: var(--suite-product-devices-on-dark); }

@media (forced-colors: active) {
  .acc-btn, .acc-input, .acc-select, .acc-card, .acc-badge, .acc-nav-item { forced-color-adjust: none; border-color: ButtonText; }
  /* v2.5 draws edges with fills and inset shadows; give controls and groups a real border here. */
  .acc-btn:not(.acc-btn--ghost, .acc-btn--link), .acc-input, .acc-select, .acc-textarea, .acc-card, .acc-metric,
  .acc-table-wrap, .acc-tabs, .acc-segmented, .acc-filter-chip, .acc-menu, .acc-popover, .acc-dialog__panel, .acc-toast { border: 1px solid ButtonText; }
  .acc-nav-item[aria-current="page"], .acc-btn--primary { background: Highlight; color: HighlightText; }
  .acc-tab:is([aria-selected="true"], [aria-pressed="true"]), .acc-segmented__item:is([aria-pressed="true"], [aria-checked="true"]), .acc-filter-chip[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }

  /* Menu items (account menu, app launcher) show focus with a box-shadow ring, which forced colors drop. */
  .acc-menu__item:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
  .acc-skeleton { forced-color-adjust: none; background: GrayText; }
  .acc-skeleton::after { content: none; }
}
@media print {
  .acc-sidebar, .acc-topbar, .acc-toaster, .acc-scrim, .acc-sheet { display: none !important; }
  .acc-shell { grid-template-columns: 1fr; }
  .acc-card { box-shadow: none; }
}

/* ==========================================================================
   99. v4.0.0 "Clarity" layer (design system 3.0). Layered last so it wins over
   the v3 rules above with the same specificity. Each numbered block maps to
   ACCRED_PRODUCT_DESIGN_SYSTEM.md 3.0 §0.
   ========================================================================== */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2-variations'), url('/fonts/geist-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. Type: Geist Variable for UI (already loaded on the products site), tighter display sizes, tabular numbers */
:root {
  --font-sans: 'Geist Variable', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --font-rounded: var(--font-sans);
  --text-title: 1.75rem;          /* 28: page title (was 24) */
  --text-display: 2rem;           /* 32: metric values */
  --tracking-tighter: -0.028em;
}
.acc-page-title { font-weight: 600; letter-spacing: var(--tracking-tighter); }
/* A one-line page subtitle is allowed again (Quiet banned it): new users need to know what a page is for. */
.acc-page-header__desc { display: block; margin-top: 0.375rem; font-size: var(--text-base); color: hsl(var(--muted-foreground)); }
.acc-card__title, .acc-section-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.012em; }

/* 2. Geometry: one step softer */
:root {
  --radius-sm: 0.4375rem;   /* 7 */
  --radius-md: 0.5625rem;   /* 9 */
  --radius-lg: 0.875rem;    /* 14 groups */
  --radius-xl: 1rem;        /* 16 dialogs */
}

/* 3. Depth: resting groups get a hairline and a whisper of shadow; floating surfaces keep the lift */
:root {
  --hairline: 240 6% 10% / 0.08;
  --shadow-rest: 0 0 0 1px hsl(var(--hairline)), 0 1px 2px rgb(16 16 24 / 0.04), 0 2px 6px -2px rgb(16 16 24 / 0.04);
  --shadow-hover: 0 0 0 1px hsl(var(--hairline)), 0 4px 12px -2px rgb(16 16 24 / 0.08), 0 2px 4px rgb(16 16 24 / 0.04);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-base: 160ms; --dur-slow: 240ms;
}
.acc-card, .acc-metric, .acc-table-wrap { box-shadow: var(--shadow-rest); }
.acc-card:has(> .acc-card__header) { box-shadow: none; }
.acc-card:has(> .acc-card__header) > :not(.acc-card__header) { box-shadow: var(--shadow-rest); }
.acc-card:has(> .acc-metric-row:only-child), .acc-card:has(> .acc-metric) { box-shadow: none; }
a.acc-metric, button.acc-metric, .acc-card--interactive, a.acc-card, button.acc-card {
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background-color var(--dur-base);
}
a.acc-metric:hover, button.acc-metric:hover, .acc-card--interactive:hover, a.acc-card:hover, button.acc-card:hover {
  background: hsl(var(--card)); box-shadow: var(--shadow-hover); transform: translateY(-1px);
}

/* 4. Light theme: a cooler, cleaner ground so white groups read as layers */
:root {
  --background: 220 14% 96.5%;
  --sidebar: 220 14% 96.5%;            /* the sidebar sits on the ground, not a white slab */
  --sidebar-hover: 220 10% 92%;
  --sidebar-active: 0 0% 100%;         /* the current page is a raised white pill */
  --border: 220 10% 89%;
}
.acc-sidebar { border-right-color: transparent; }
.acc-sidebar__footer { border-top-color: transparent; }
.acc-nav-item { height: 2.25rem; }
.acc-nav-item[aria-current="page"] { box-shadow: var(--shadow-rest); font-weight: 600; }
.acc-nav-item[aria-current="page"] > svg { color: var(--acc-product, hsl(var(--primary))); }

/* 5. Top bar: navy becomes the same surface as the shell, with a hairline under it (Linear, Vercel).
      Navy stays available as data-topbar="brand" for anyone who prefers it. */
:root {
  --suitebar: 220 14% 96.5%;
  --suitebar-elevated: 0 0% 100%;
  --suitebar-foreground: 240 6% 10%;
  --suitebar-muted: 240 4% 38%;
  --suitebar-subtle: 240 4% 50%;
  --suitebar-border: 220 10% 89%;
  --suitebar-hover: 240 6% 10% / 0.05;
  --suitebar-avatar: 211 100% 43%;
}
.acc-topbar { backdrop-filter: saturate(1.4) blur(10px); background: hsl(var(--suitebar) / 0.85); }
.acc-topbar .acc-search-trigger { box-shadow: var(--shadow-rest); }
.acc-apptab[aria-current="page"] { color: hsl(var(--suitebar-foreground)); }

/* 6. Dark theme: layered neutrals instead of pure black, hairlines instead of slabs, softer contrast */
:root.dark, :root[data-theme="dark"] {
  --background: 240 6% 5%;        /* #0c0c0e ground */
  --card: 240 5% 9%;              /* #161619 group */
  --popover: 240 5% 12%;
  --muted: 240 4% 16%;
  --subtle: 240 4% 12%;
  --border: 240 4% 17%;
  --hairline: 0 0% 100% / 0.07;
  --sidebar: 240 6% 5%;
  --sidebar-hover: 0 0% 100% / 0.05;
  --sidebar-active: 240 5% 12%;
  --sidebar-foreground: 240 5% 72%;
  --suitebar: 240 6% 5%;
  --suitebar-elevated: 240 5% 11%;
  --suitebar-foreground: 240 10% 96%;
  --suitebar-muted: 240 5% 66%;
  --suitebar-border: 240 4% 14%;
  --suitebar-hover: 0 0% 100% / 0.06;
  --shadow-rest: 0 0 0 1px hsl(var(--hairline)), inset 0 1px 0 rgb(255 255 255 / 0.03);
  --shadow-hover: 0 0 0 1px rgb(255 255 255 / 0.12), 0 8px 24px -6px rgb(0 0 0 / 0.6);
}

/* 7. Tables. v4.0.5: a real header row, cells inset exactly like the rows, taller rows, row hover.
      On wide main areas (>= 1,600 px) the name column takes a fair share (36 %, at least 18rem) and the
      other columns share the rest by their content, so the metadata sits near its name instead of
      clustering at the far right edge behind a dead gap (Consult Clients at 2,000 px). The name column
      is the first one, or the column marked .is-grow on its th and tds when the table leads with a key
      (#, Date, When): then that column takes the share and wraps. The header sticks while a list scrolls. */
.acc-table th {
  height: auto; padding: 0.6875rem 1rem 0.625rem; vertical-align: bottom;
  font-size: 0.78125rem; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none;
  color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--border));
}
.acc-table td { height: 3.25rem; }
.acc-table th:first-child, .acc-table td:first-child { padding-left: 1.125rem; }
.acc-table th:last-child, .acc-table td:last-child { padding-right: 1.125rem; }
.acc-table td:first-child { background-size: calc(100% - 1.125rem) 1px; }
@container acc-main (min-width: 100rem) {
  .acc-table:not(:has(.is-grow)) :is(th, td):first-child, .acc-table :is(th, td).is-grow { width: 36%; min-width: 18rem; }
  .acc-table th:not(:first-child), .acc-table td:not(:first-child) { white-space: nowrap; padding-left: 1.5rem; }
  .acc-table :is(th, td).is-grow { white-space: normal; }
  /* Clip instead of scroll at this width (nothing overflows), so the sticky header follows the page scroll. */
  .acc-table-wrap, .acc-card:has(> .acc-card__header) > .acc-table-wrap { overflow-x: clip; }
}

/* v4.1.0: a row header (tbody th) is a cell, not a column header: static, body type, the row's hairline and hover. */
.acc-table tbody th {
  position: static; z-index: auto; height: 3.25rem; padding: 0.375rem 1rem; vertical-align: middle; text-align: left; white-space: normal;
  font-size: inherit; font-weight: 500; line-height: inherit; color: hsl(var(--foreground)); border-bottom: 0; background-color: transparent;
  background-image: linear-gradient(hsl(var(--border)), hsl(var(--border))); background-size: 100% 1px; background-position: right bottom; background-repeat: no-repeat;
}
.acc-table tbody th:first-child { padding-left: 1.125rem; background-size: calc(100% - 1.125rem) 1px; }
.acc-table tbody tr:last-child th { background-image: none; }
.acc-table tbody tr:hover th { background-color: hsl(var(--subtle)); }

/* v4.0.5: .acc-gridlist, a list laid out as grid rows (a card per row is not needed). Set --acc-gridlist-cols once
   on the list; the head and every row share it, so header cells sit over their content.
   <div class="acc-gridlist" style="--acc-gridlist-cols: minmax(16rem, 2fr) repeat(3, minmax(8rem, 1fr)) 7rem">
     <div class="acc-gridlist__head" aria-hidden="true"><span>Client</span>…<span class="is-end">Status</span></div>
     <div class="acc-gridlist__row">…</div> (or <a>, <button>, <article>)
   Below a 48rem main area the head hides and rows stack their cells (the app decides the stacked order). */
.acc-gridlist {
  --acc-gridlist-cols: minmax(0, 1fr);
  display: grid; overflow: clip; border-radius: var(--radius-lg); background: hsl(var(--card)); box-shadow: var(--shadow-rest);
}
.acc-gridlist__head, .acc-gridlist__row {
  display: grid; grid-template-columns: var(--acc-gridlist-cols); align-items: center; column-gap: 1.5rem;
  padding-inline: 1.125rem;
}
.acc-gridlist__head {
  position: sticky; top: 0; z-index: 1; padding-block: 0.6875rem 0.625rem; align-items: end;
  background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border));
  font-size: 0.78125rem; font-weight: 500; line-height: 1.3; color: hsl(var(--muted-foreground)); white-space: nowrap;
}
.acc-gridlist__row {
  min-height: 3.25rem; padding-block: 0.625rem; color: hsl(var(--foreground)); text-align: left; text-decoration: none;
  border: 0; background: transparent; font: inherit; width: 100%;
  box-shadow: inset 0 -1px 0 hsl(var(--border)); transition: background-color var(--dur-fast);
}
.acc-gridlist__row:last-child { box-shadow: none; }
:is(a, button).acc-gridlist__row, .acc-gridlist__row[tabindex], .acc-gridlist__row.is-interactive { cursor: pointer; }
:is(a, button).acc-gridlist__row:hover, .acc-gridlist__row[tabindex]:hover, .acc-gridlist__row.is-interactive:hover { background: hsl(var(--subtle)); }
.acc-gridlist__row:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
.acc-gridlist :is(.acc-gridlist__head, .acc-gridlist__row) > .is-end { justify-self: end; text-align: right; }
.acc-gridlist :is(.acc-gridlist__head, .acc-gridlist__row) > .is-num { justify-self: end; text-align: right; font-variant-numeric: tabular-nums; }
.acc-gridlist__row > * { min-width: 0; }
@container acc-main (max-width: 47.99rem) {
  .acc-gridlist__head { display: none; }
  .acc-gridlist__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.375rem; padding-block: 0.75rem; }
}
/* v4.0.1: a table inside a group with no header sits flat (the group already has the outline). */
.acc-card:not(:has(> .acc-card__header)) .acc-table-wrap { box-shadow: none; }

/* 8. Metrics: a real number, a label above it, the trend as a chip */
.acc-metric { padding: 1rem 1.125rem; gap: 0.375rem; }
.acc-metric__value { font-size: var(--text-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.acc-metric__delta { display: inline-flex; padding: 0.0625rem 0.375rem; border-radius: 999px; font-weight: 600; }
.acc-metric__delta--up { background: hsl(var(--success-soft)); }
.acc-metric__delta--down { background: hsl(var(--destructive-soft)); }

/* 9. Empty states: an accent-tinted icon well, a sentence on what will appear, one primary and one secondary action */
.acc-empty { padding: 3.5rem 1.5rem; gap: 0.5rem; }
.acc-empty__icon {
  width: 3.5rem; height: 3.5rem; margin-bottom: 0.75rem; border-radius: 1rem;
  color: var(--acc-product, hsl(var(--primary)));
  background: color-mix(in srgb, var(--acc-product, #006edb) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc-product, #006edb) 22%, transparent);
}
.acc-empty__icon > svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.75; }
.acc-empty__title { font-size: 1.125rem; letter-spacing: -0.015em; }
.acc-empty__desc { font-size: var(--text-base); line-height: 1.5; }

/* 10. First run: the getting-started checklist becomes a welcome card with a progress ring */
.acc-checklist__head { padding: 1.125rem 1.25rem 0.75rem; }
.acc-checklist__item { padding: 0.75rem 1.25rem; }
.acc-checklist__item[data-current="true"] { background: hsl(var(--accent) / 0.55); }
.acc-checklist__mark { width: 1.5rem; height: 1.5rem; }
.acc-checklist__item[data-done="true"] .acc-checklist__mark { background: hsl(var(--success)); border-color: transparent; color: #fff; }
.acc-checklist__item[data-done="true"] .acc-checklist__title { color: hsl(var(--muted-foreground)); text-decoration: line-through; text-decoration-color: hsl(var(--border-strong)); }
.acc-progress { height: 0.5rem; }

/* 11. Buttons: a little more presence on the one primary */
.acc-btn--primary { box-shadow: 0 1px 2px rgb(0 40 120 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.14); }
.acc-btn--secondary { background: hsl(var(--card)); box-shadow: var(--shadow-rest); }

/* 12. Motion: pages fade and rise 4 px; respects reduced motion */
@keyframes acc4-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.acc-page-enter { animation: none; }
/* v4.0.5: the header is where the splash painted it, so it never moves; the content fades in, at most 140 ms. */
.acc-page-enter > :not(.acc-page-header) { animation: acc-fade-in 140ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .acc-page-enter, .acc-page-enter > * { animation: none; } a.acc-metric:hover, .acc-card--interactive:hover { transform: none; } }

/* ==========================================================================
   13-15. Promoted from polish A's app redesigns into the foundation (2026-11-06):
   Hub #310 progress ring + setup guide, Connect #332 guided stepper,
   Manage #136 score gauge + "What you'll see" preview. Generic names, shared tokens only.
   ========================================================================== */

/* 13a. Progress ring: done/total in the middle. Markup: span.acc-ring[role=progressbar] > svg(viewBox 0 0 44 44) > circle.acc-ring__track + circle.acc-ring__bar (r=19, dasharray=119.4, dashoffset=119.4*(1-done/total)), span.acc-ring__label */
.acc-ring { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; }
.acc-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.acc-ring__track, .acc-ring__bar { fill: none; stroke-width: 4; }
.acc-ring__track { stroke: hsl(var(--fill)); }
.acc-ring__bar { stroke: hsl(var(--primary-fill)); stroke-linecap: round; transition: stroke-dashoffset 300ms var(--ease-out); }
.acc-ring__label { font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: hsl(var(--foreground)); }

/* 13b. Setup guide: ring + "Set up <org>" + steps left, one track segment per step, then the one step "Up next". */
.acc-setup { overflow: hidden; }
.acc-setup__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem 1rem; padding: 1.25rem 1.25rem 0; }
.acc-setup__title { margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.35; letter-spacing: var(--tracking-tight); }
.acc-setup__meta { margin: 0.125rem 0 0; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-setup__tools { display: inline-flex; align-items: center; gap: 0.25rem; align-self: start; }
.acc-setup__track { display: flex; gap: 0.25rem; margin: 1rem 1.25rem 0; padding: 0; list-style: none; }
.acc-setup__track > li { flex: 1 1 0; height: 0.25rem; border-radius: 999px; background: hsl(var(--fill)); transition: background-color var(--dur-slow) var(--ease-out); }
.acc-setup__track > li[data-state="done"] { background: hsl(var(--primary-fill)); }
.acc-setup__track > li[data-state="current"] { background: hsl(var(--primary-fill) / 0.4); }
.acc-setup__next { margin: 1rem 1.25rem 1.25rem; padding: 1rem 1.125rem; border-radius: var(--radius-lg); background: hsl(var(--subtle)); animation: acc4-rise 180ms var(--ease-out); }
.acc-setup__eyebrow { margin: 0; font-size: var(--text-xs); font-weight: 600; color: hsl(var(--accent-foreground)); }
.acc-setup__step-title { margin: 0.25rem 0 0; font-size: var(--text-md); font-weight: 600; line-height: 1.4; }
.acc-setup__step-desc { max-width: 65ch; margin: 0.25rem 0 0; font-size: var(--text-base); line-height: 1.5; color: hsl(var(--muted-foreground)); }
.acc-setup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.875rem; }

/* 14. Guided stepper: .acc-checklist--guided. A rail joins the marks, each open step has an icon and one
       line on what it gets you, done steps fold to one quiet line, the current step is tinted. */
.acc-checklist--guided .acc-checklist__head { align-items: center; gap: 0.875rem; padding: 1.125rem 1.25rem 1rem; border-bottom: 1px solid hsl(var(--border)); }
.acc-checklist--guided .acc-checklist__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: var(--radius-lg); color: var(--acc-product, hsl(var(--accent-foreground))); background: color-mix(in srgb, var(--acc-product, #006edb) 12%, transparent); }
.acc-checklist--guided .acc-checklist__icon > svg { width: 1.25rem; height: 1.25rem; }
.acc-checklist--guided .acc-checklist__lede { display: block; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-checklist--guided .acc-checklist__steps { position: relative; padding: 0.5rem 0; }
.acc-checklist--guided .acc-checklist__item { position: relative; align-items: center; gap: 0.875rem; margin: 0 0.5rem; padding: 0.75rem; border: 0; border-radius: var(--radius-md); }
.acc-checklist--guided .acc-checklist__item:has(+ .acc-checklist__item)::after,
.acc-checklist--guided .acc-checklist__item + .acc-checklist__item::before { content: ""; position: absolute; left: calc(0.75rem + 0.75rem - 0.75px); width: 1.5px; background: hsl(var(--border-strong)); }
.acc-checklist--guided .acc-checklist__item:has(+ .acc-checklist__item)::after { top: calc(50% + 0.75rem); bottom: 0; }
.acc-checklist--guided .acc-checklist__item + .acc-checklist__item::before { top: 0; bottom: calc(50% + 0.75rem); }
.acc-checklist--guided .acc-checklist__item[data-done="true"]:has(+ .acc-checklist__item)::after,
.acc-checklist--guided .acc-checklist__item[data-done="true"] + .acc-checklist__item::before { background: hsl(var(--success) / 0.6); }
.acc-checklist--guided .acc-checklist__item[data-current="true"] { background: hsl(var(--subtle)); box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.acc-checklist--guided .acc-checklist__mark { position: relative; z-index: 1; margin-top: 0; background: hsl(var(--card)); }
.acc-checklist--guided .acc-checklist__item[data-current="true"] .acc-checklist__mark { border-color: hsl(var(--primary)); background: hsl(var(--primary-fill)); color: hsl(var(--primary-foreground)); }
.acc-checklist--guided .acc-checklist__step-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: var(--radius-md); background: hsl(var(--fill)); color: hsl(var(--muted-foreground)); }
.acc-checklist--guided .acc-checklist__step-icon > svg { width: 1.125rem; height: 1.125rem; }
.acc-checklist--guided .acc-checklist__item[data-current="true"] .acc-checklist__step-icon { background: hsl(var(--primary-soft)); color: hsl(var(--accent-foreground)); }
.acc-checklist--guided .acc-checklist__item[data-done="true"] .acc-checklist__step-icon { display: none; }
.acc-checklist--guided .acc-checklist__item[data-done="true"] { padding-block: 0.5rem; }
.acc-checklist--guided .acc-checklist__item[data-done="true"] .acc-checklist__title { text-decoration: none; font-weight: 400; }

/* 15a. Score gauge: a 3/4 arc with the score and its verdict. svg viewBox 0 0 100 100, circles r=40,
        track dasharray "188.5 251.3", value dasharray "<score/100*188.5> 251.3". Tone by data-tone. */
.acc-gauge { position: relative; display: grid; width: 6.5rem; height: 6.5rem; flex: 0 0 auto; place-items: center; }
.acc-gauge > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(135deg); }
.acc-gauge circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.acc-gauge__track { stroke: hsl(var(--fill)); }
.acc-gauge__value { stroke: hsl(var(--muted-foreground)); transition: stroke-dasharray var(--dur-slow) var(--ease-out); }
.acc-gauge[data-tone="success"] .acc-gauge__value { stroke: hsl(var(--success)); }
.acc-gauge[data-tone="warning"] .acc-gauge__value { stroke: hsl(var(--warning)); }
.acc-gauge[data-tone="critical"] .acc-gauge__value { stroke: hsl(var(--destructive)); }
.acc-gauge__figure { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.acc-gauge__figure strong { font-size: 2rem; font-weight: 650; letter-spacing: var(--tracking-tighter); font-variant-numeric: tabular-nums; }
.acc-gauge__figure span { margin-top: 0.25rem; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.acc-gauge--sm { width: 5.5rem; height: 5.5rem; }
.acc-gauge--sm .acc-gauge__figure strong { font-size: 1.5rem; }

/* 15b. "What you'll see" preview: a labelled example of the filled screen beside a first-run step.
        Never has buttons (the first-run card keeps the one primary). */
.acc-preview { display: flex; flex-direction: column; gap: 0.5rem; }
.acc-preview__label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.acc-preview__card { overflow: hidden; }
.acc-preview__sample { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid hsl(var(--border)); }
.acc-preview__sample-copy { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; gap: 0.375rem; }
.acc-preview__bars { display: flex; width: 100%; flex-direction: column; gap: 0.375rem; }
.acc-preview__bars i { display: block; height: 0.375rem; border-radius: 999px; background: hsl(var(--fill)); }
.acc-preview__bars i[data-tone="success"] { background: hsl(var(--success) / 0.75); }
.acc-preview__bars i[data-tone="warning"] { background: hsl(var(--warning) / 0.75); }
.acc-preview .acc-list { margin: 0; padding: 0; list-style: none; } /* v4.0.1: no list indent */
.acc-preview .acc-list__row { align-items: flex-start; padding-block: 0.75rem; }
.acc-preview .acc-list__body { display: flex; min-width: 0; flex-direction: column; gap: 0.125rem; }
.acc-preview .acc-list__meta { white-space: normal; }

/* Two-up first-run layout used with the preview; stacks below about 1150 px of page width. */
.acc-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@container acc-main (min-width: 72rem) { .acc-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .acc-setup__next { animation: none; }
  .acc-ring__bar, .acc-setup__track > li, .acc-gauge__value { transition: none; }
}

/* ==========================================================================
   16-19. Promoted from Protect's redesign (#93-#95, 2026-11-06), renamed to generic primitives:
   .protect-setup -> .acc-wizard  (step rail + in-place panel with an aside of facts/people/policy)
   .protect-story -> .acc-story   (status ring + one-sentence verdict + 14-day stacked trend; tone wash)
   .protect-intent(s) -> .acc-intent(s) ("What do you need back?" task tiles)
   .protect-done  -> .acc-done    (finished card: check pop, what happened, next actions)
   Changes vs Protect: uppercase eyebrow dropped (sentence case, §3); viewport media queries became
   container queries on acc-main so they follow the fluid page; keyframes shared (acc4-rise, acc4-pop).
   The soft tone washes (gradient from the -soft tone to the card) are a deliberate §1 exception:
   they carry status, not decoration.
   ========================================================================== */


.acc-wizard { overflow: hidden; }
.acc-wizard__hero {
  position: relative; display: grid; gap: 1.25rem; padding: 1.5rem 1.5rem 1.25rem;
  background: radial-gradient(120% 140% at 0% 0%, hsl(var(--primary-soft)) 0%, transparent 60%);
  border-bottom: 1px solid hsl(var(--border));
}
.acc-wizard__eyebrow { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow); color: hsl(var(--primary)); }
.acc-wizard__eyebrow svg { width: 0.875rem; height: 0.875rem; }
.acc-wizard__title { margin: 0.375rem 0 0.25rem; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); line-height: 1.2; }
.acc-wizard__lede { margin: 0; max-width: 46rem; color: hsl(var(--muted-foreground)); font-size: var(--text-sm); line-height: 1.55; }
.acc-wizard__dismiss { position: absolute; top: 1rem; right: 1rem; }
.acc-wizard__rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; counter-reset: none; }
.acc-wizard__rail li { position: relative; }
.acc-wizard__rail-step {
  width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; text-align: left;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card)); color: inherit; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.acc-wizard__rail-step:hover { border-color: hsl(var(--border-strong)); }
.acc-wizard__rail-step:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.acc-wizard__rail-step[aria-expanded="true"] { border-color: hsl(var(--border-strong)); background: hsl(var(--primary-soft)); }
.acc-wizard__mark {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  background: hsl(var(--secondary)); color: hsl(var(--muted-foreground));
}
.acc-wizard__mark svg { width: 1rem; height: 1rem; }
.acc-wizard__rail li[data-current] .acc-wizard__mark { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.acc-wizard__rail li[data-done] .acc-wizard__mark { background: hsl(var(--success-soft)); color: hsl(var(--success)); }
.acc-wizard__rail-text { display: grid; min-width: 0; }
.acc-wizard__rail-num { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.acc-wizard__rail-title { font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-wizard__rail li[data-done] .acc-wizard__rail-title { color: hsl(var(--muted-foreground)); }
.acc-wizard__panel { padding: 1.5rem; animation: acc4-rise var(--dur-base) var(--ease-out); }
.acc-wizard__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.acc-wizard__body:not(:has(.acc-wizard__aside)) { grid-template-columns: minmax(0, 1fr); }
.acc-wizard__step-title { margin: 0 0 0.5rem; font-size: var(--text-lg); }
.acc-wizard__text { margin: 0 0 0.5rem; color: hsl(var(--muted-foreground)); font-size: var(--text-sm); line-height: 1.6; max-width: 40rem; }
.acc-wizard__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.acc-wizard__facts { list-style: none; margin: 0; padding: 1rem; display: grid; gap: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--subtle)); }
.acc-wizard__facts li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: var(--text-sm); line-height: 1.5; }
.acc-wizard__facts svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.15rem; color: hsl(var(--success)); }
.acc-wizard__people { display: grid; gap: 0.5rem; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--subtle)); }
.acc-wizard__people-count { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.acc-wizard__people-count strong { color: hsl(var(--foreground)); font-size: var(--text-lg); margin-right: 0.25rem; }
.acc-wizard__people ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.acc-wizard__people li { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.acc-wizard__people li > span:last-child { display: grid; min-width: 0; }
.acc-wizard__avatar { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: hsl(var(--primary-soft)); color: hsl(var(--primary)); font-size: var(--text-xs); font-weight: 600; }
.acc-wizard__person { font-size: var(--text-sm); font-weight: 500; }
.acc-wizard__upn { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-wizard__more { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); padding-left: 2.375rem; }
.acc-wizard__policy { margin: 0; display: grid; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--subtle)); }
.acc-wizard__policy > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; font-size: var(--text-sm); }
.acc-wizard__policy > div + div { border-top: 1px solid hsl(var(--border)); }
.acc-wizard__policy dt { color: hsl(var(--muted-foreground)); }
.acc-wizard__policy dd { margin: 0; font-weight: 600; text-align: right; }
.acc-wizard__toggle { display: flex; gap: 0.625rem; align-items: flex-start; margin-top: 0.75rem; padding: 0.75rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.5; cursor: pointer; max-width: 40rem; }
.acc-wizard__toggle input { margin-top: 0.15rem; }


.acc-story { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 18rem); align-items: center; gap: 1.5rem; padding: 1.25rem 1.5rem; }
.acc-story[data-tone="success"] { background: linear-gradient(100deg, hsl(var(--success-soft)) 0%, hsl(var(--card)) 45%); }
.acc-story[data-tone="warning"] { background: linear-gradient(100deg, hsl(var(--warning-soft)) 0%, hsl(var(--card)) 45%); }
.acc-story[data-tone="critical"] { background: linear-gradient(100deg, hsl(var(--destructive-soft)) 0%, hsl(var(--card)) 45%); }
.acc-story[data-tone="info"] { background: linear-gradient(100deg, hsl(var(--info-soft)) 0%, hsl(var(--card)) 45%); }
.acc-story__ring { position: relative; width: 7rem; height: 7rem; }
.acc-story__ring svg { width: 100%; height: 100%; }
.acc-story__ring circle { fill: none; stroke-width: 10; }
.acc-story__ring-track { stroke: hsl(var(--border)); }
.acc-story__ring-value { stroke-linecap: round; transition: stroke-dasharray var(--dur-slow) var(--ease-out); }
.acc-story__ring-value[data-tone="success"] { stroke: hsl(var(--success)); }
.acc-story__ring-value[data-tone="warning"] { stroke: hsl(var(--warning)); }
.acc-story__ring-value[data-tone="critical"] { stroke: hsl(var(--destructive)); }
.acc-story__ring-value[data-tone="info"] { stroke: hsl(var(--info)); }
.acc-story__ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.acc-story__ring-label strong { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.acc-story__ring-label span { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.acc-story__text { display: grid; gap: 0.375rem; justify-items: start; min-width: 0; }
.acc-story__title { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); line-height: 1.25; }
.acc-story__icon { flex: none; width: 1.25rem; height: 1.25rem; }
.acc-story[data-tone="success"] .acc-story__icon { color: hsl(var(--success)); }
.acc-story[data-tone="warning"] .acc-story__icon { color: hsl(var(--warning)); }
.acc-story[data-tone="critical"] .acc-story__icon { color: hsl(var(--destructive)); }
.acc-story[data-tone="info"] .acc-story__icon { color: hsl(var(--info)); }
.acc-story__sub { margin: 0; color: hsl(var(--muted-foreground)); font-size: var(--text-sm); line-height: 1.55; }
.acc-story__action { margin-left: -0.5rem; }
.acc-story__trend { margin: 0; display: grid; gap: 0.5rem; }
.acc-story__trend-cap { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.acc-story__bars { display: flex; align-items: flex-end; gap: 3px; height: 4.5rem; }
.acc-story__bar { flex: 1 1 0; display: flex; flex-direction: column; min-height: 2px; border-radius: 3px; overflow: hidden; }
.acc-story__bar span { display: block; min-height: 2px; }
.acc-story__bar [data-k="completed"] { background: hsl(var(--success)); }
.acc-story__bar [data-k="partial"] { background: hsl(var(--warning)); }
.acc-story__bar [data-k="failed"] { background: hsl(var(--destructive)); }
.acc-story__bar [data-k="other"] { background: hsl(var(--info)); }
.acc-story__bar [data-k="empty"] { background: hsl(var(--border)); }


.acc-intents { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.acc-intents__title { margin: 0; font-size: var(--text-md); }
.acc-intents__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.acc-intent {
  position: relative; display: grid; gap: 0.25rem; align-content: start; padding: 1rem 2.5rem 1rem 1rem; text-align: left; color: inherit; cursor: pointer;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card));
  transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.acc-intent:hover { border-color: hsl(var(--border-strong)); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.acc-intent:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.acc-intent__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: 0.5rem; border-radius: var(--radius-md); background: hsl(var(--primary-soft)); color: hsl(var(--primary)); }
.acc-intent__icon svg { width: 1.125rem; height: 1.125rem; }
.acc-intent[data-alert] .acc-intent__icon { background: hsl(var(--destructive-soft)); color: hsl(var(--destructive)); }
.acc-intent__name { font-weight: 600; font-size: var(--text-sm); }
.acc-intent__hint { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); line-height: 1.5; }
.acc-intent__go { position: absolute; top: 1rem; right: 1rem; width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); transition: transform var(--dur-fast) var(--ease-standard); }
.acc-intent:hover .acc-intent__go { transform: translateX(2px); color: hsl(var(--foreground)); }


.acc-done { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding: 1.25rem 1.5rem; background: linear-gradient(100deg, hsl(var(--success-soft)) 0%, hsl(var(--card)) 55%); animation: acc4-rise var(--dur-base) var(--ease-out); }
.acc-done__check { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: hsl(var(--success)); color: hsl(var(--background)); animation: acc4-pop 420ms var(--ease-out); }
.acc-done__check svg { width: 1.5rem; height: 1.5rem; stroke-width: 3; }
.acc-done__title { margin: 0 0 0.25rem; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.acc-done__sub { margin: 0; color: hsl(var(--muted-foreground)); font-size: var(--text-sm); line-height: 1.55; }
.acc-done__sub strong { color: hsl(var(--foreground)); font-weight: 600; }
.acc-done__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
@keyframes acc4-pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

@container acc-main (max-width: 56rem) {
  .acc-wizard__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-wizard__body { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .acc-story { grid-template-columns: auto minmax(0, 1fr); }
  .acc-story__trend { grid-column: 1 / -1; }
  .acc-intents__grid { grid-template-columns: minmax(0, 1fr); }
  .acc-done { grid-template-columns: auto minmax(0, 1fr); }
  .acc-done__actions { grid-column: 1 / -1; }
}
@container acc-main (max-width: 30rem) {
  .acc-wizard__hero, .acc-wizard__panel { padding: 1rem; }
  .acc-wizard__dismiss { position: static; justify-self: start; }
  .acc-wizard__rail-title { white-space: normal; overflow: visible; font-size: var(--text-xs); line-height: 1.3; }
  .acc-story { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 1rem; }
  .acc-story__ring { width: 5.5rem; height: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-wizard__panel, .acc-done, .acc-done__check { animation: none; }
  .acc-story__ring-value, .acc-intent, .acc-intent__go { transition: none; }
  .acc-intent:hover { transform: none; }
}

/* data-topbar="brand": keep the v3 navy top bar for anyone who prefers it. */
.acc-shell[data-topbar="brand"] .acc-topbar { backdrop-filter: none; background: hsl(216 69% 9%); border-bottom-color: hsl(216 49% 22%); }
.acc-shell[data-topbar="brand"] .acc-topbar { --suitebar: 216 69% 9%; --suitebar-elevated: 216 58% 18%; --suitebar-foreground: 0 0% 100%; --suitebar-muted: 216 28% 74%; --suitebar-subtle: 216 26% 66%; --suitebar-border: 216 49% 22%; --suitebar-hover: 0 0% 100% / 0.08; }

/* v4: the surface top bar is light in the light theme, so .acc-on-dark focus rings use the ring colour there (white stays for dark and for data-topbar="brand"). */
:root:not(.dark):not([data-theme="dark"]) .acc-shell:not([data-topbar="brand"]) .acc-topbar.acc-on-dark :focus-visible,
:root:not(.dark):not([data-theme="dark"]) .acc-shell:not([data-topbar="brand"]) .acc-topbar.acc-on-dark .acc-btn:focus-visible { outline-color: hsl(var(--ring)); }
:root:not(.dark):not([data-theme="dark"]) .acc-shell:not([data-topbar="brand"]) .acc-topbar .acc-apptabs .acc-apptab.asn-tab:focus-visible { outline-color: hsl(var(--ring)); }

/* ==========================================================================
   v4.0.4: AI chat (one look on every AI surface; design system §9).
   A conversation: the person's turn is a rounded bubble on the right; the
   assistant's turn has the Accred mark as its avatar, a muted "Worked in
   Accred · N steps" line, a bordered steps card (icon, highlighted verb, plain
   text), then the answer as plain prose. Suggestions are pill chips (the
   chosen one is filled); the composer is one rounded box with a filled send
   button. Tokens only, so light and dark follow the theme.

   <div class="acc-chat" role="log">
     <p class="acc-chat__user">Question</p>
     <div class="acc-chat__ai">
       <span class="acc-chat__avatar"><img src="/accred-mark-dark.svg" alt=""></span>
       <div class="acc-chat__body">
         <p class="acc-chat__meta">Worked in Accred · 3 steps</p>
         <ol class="acc-steps"><li><span class="acc-steps__icon">…</span>
           <span><b class="acc-steps__verb">Checked drift</b> across every tenant</span></li></ol>
         <div class="acc-chat__answer"><p>Answer…</p></div>
         <div class="acc-chat__actions">(Copy, Retry)</div>
       </div>
     </div>
   </div>
   <div class="acc-chips"><button class="acc-chip" aria-pressed="true">Tenant drift</button>…</div>
   <form class="acc-composer"><textarea class="acc-composer__input"></textarea>
     <button class="acc-composer__send" aria-label="Send">↑</button></form>
   ========================================================================== */
:root {
  --chat-verb: 192 82% 30%;            /* highlighted step verb, light theme (5:1 on card) */
  --chat-bubble: 240 6% 10% / 0.06;    /* the person's bubble */
  --chat-well: 240 6% 10% / 0.025;     /* steps card fill */
}
.dark, [data-theme="dark"] {
  --chat-verb: 187 92% 69%;            /* #67e8f9 */
  --chat-bubble: 0 0% 100% / 0.1;
  --chat-well: 0 0% 100% / 0.025;
}
.acc-chat { display: grid; align-content: start; gap: 1.375rem; min-width: 0; }
.acc-chat__user { justify-self: end; max-width: min(30rem, 85%); margin: 0; padding: 0.75rem 1rem; border-radius: 1.125rem 1.125rem 0.375rem 1.125rem; background: hsl(var(--chat-bubble)); color: hsl(var(--foreground)); font-size: 1rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.acc-chat__ai { display: grid; grid-template-columns: 1.875rem minmax(0, 1fr); gap: 0.875rem; min-width: 0; }
.acc-chat__avatar { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; overflow: hidden; border-radius: 0.5625rem; box-shadow: 0 0 0 1px hsl(var(--hairline)); }
.acc-chat__avatar > img, .acc-chat__avatar > svg { display: block; width: 100%; height: 100%; }
.acc-chat__body { display: grid; align-content: start; gap: 0.75rem; min-width: 0; }
.acc-chat__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-height: 1.875rem; margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.8125rem; font-weight: 500; line-height: 1.3; }
.acc-chat__answer { min-width: 0; color: hsl(var(--foreground)); font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; animation: acc-chat-in 420ms var(--ease-out) both; }
.acc-chat__answer > * { margin: 0; }
.acc-chat__answer > * + * { margin-top: 0.75rem; }
.acc-chat__answer :is(h3, h4) { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.acc-chat__answer > :is(h3, h4):not(:first-child) { margin-top: 1.125rem; }
.acc-chat__answer > :is(h3, h4) + * { margin-top: 0.375rem; }
.acc-chat__answer :is(ul, ol) { padding-left: 1.25rem; }
.acc-chat__answer ul { list-style: disc; }
.acc-chat__answer ol { list-style: decimal; }
.acc-chat__answer li + li { margin-top: 0.375rem; }
.acc-chat__answer li::marker { color: hsl(var(--muted-foreground)); }
.acc-chat__answer strong { font-weight: 600; }
.acc-chat__answer :not(pre) > code { padding: 0.0625rem 0.3125rem; border-radius: 0.3125rem; background: hsl(var(--chat-bubble)); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; }
.acc-chat__answer pre { overflow-x: auto; padding: 0.75rem 0.875rem; border: 1px solid hsl(var(--border)); border-radius: 0.75rem; background: hsl(var(--chat-well)); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.55; white-space: pre; overflow-wrap: normal; }
.acc-chat__answer blockquote { padding-left: 0.875rem; border-left: 2px solid hsl(var(--border-strong)); color: hsl(var(--muted-foreground)); }
.acc-chat__answer .acc-chat__table { overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: 0.75rem; }
.acc-chat__answer table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.acc-chat__answer :is(th, td) { padding: 0.4375rem 0.75rem; text-align: left; vertical-align: top; overflow-wrap: normal; }
.acc-chat__answer th { background: hsl(var(--chat-well)); color: hsl(var(--muted-foreground)); font-weight: 500; white-space: nowrap; }
.acc-chat__answer tbody td { border-top: 1px solid hsl(var(--border)); }
.acc-chat__caret { display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.25rem; vertical-align: middle; border-radius: 999px; background: hsl(var(--foreground) / 0.7); animation: acc-chat-pulse 1.1s var(--ease-out) infinite; }
.acc-chat__typing { display: inline-flex; align-items: center; gap: 0.3125rem; min-height: 1.5rem; color: hsl(var(--muted-foreground)); font-size: 0.875rem; }
.acc-chat__typing > i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; animation: acc-chat-dot 1s ease-in-out infinite; }
.acc-chat__typing > i:nth-of-type(2) { animation-delay: 150ms; }
.acc-chat__typing > i:nth-of-type(3) { animation-delay: 300ms; margin-right: 0.375rem; }
.acc-chat__actions { display: flex; gap: 0.125rem; margin: -0.25rem 0 0 -0.375rem; color: hsl(var(--muted-foreground)); }
.acc-chat__followups { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Steps the assistant took. A step that hasn't happened yet carries [hidden] (or data-on="false"). */
.acc-steps { display: grid; gap: 0.125rem; margin: 0; padding: 0.375rem; list-style: none; border: 1px solid hsl(var(--border)); border-radius: 0.875rem; background: hsl(var(--chat-well)); }
.acc-steps > li { display: flex; align-items: center; gap: 0.625rem; min-width: 0; padding: 0.4375rem 0.5rem; border-radius: 0.5625rem; color: hsl(var(--foreground)); font-size: 0.875rem; line-height: 1.4; animation: acc-chat-in 360ms var(--ease-out) both; }
.acc-steps > li[data-on="false"] { display: none; }
.acc-steps__icon { display: inline-grid; flex: 0 0 auto; place-items: center; width: 1.25rem; height: 1.25rem; overflow: hidden; border-radius: 0.3125rem; background: hsl(var(--chat-bubble)); color: hsl(var(--muted-foreground)); }
.acc-steps__icon > :is(svg, img) { width: 0.75rem; height: 0.75rem; }
.acc-steps__icon > img:only-child { width: 100%; height: 100%; }
.acc-steps__verb { color: hsl(var(--chat-verb)); font-weight: 600; }

/* Suggestion chips. */
.acc-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.acc-chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.875rem; border: 1px solid hsl(var(--border-strong)); border-radius: 999px; background: transparent; color: hsl(var(--muted-foreground)); font: inherit; font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.acc-chip:hover { color: hsl(var(--foreground)); border-color: hsl(var(--muted-foreground) / 0.6); }
.acc-chip:is([aria-pressed="true"], [aria-selected="true"], .is-selected) { border-color: transparent; background: hsl(var(--foreground)); color: hsl(var(--background)); }
.acc-chip > svg { width: 0.875rem; height: 0.875rem; margin-left: 0.25rem; }
.acc-chip:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* Composer. */
.acc-composer { display: flex; align-items: flex-end; gap: 0.75rem; min-height: 3.25rem; padding: 0.5rem 0.5rem 0.5rem 1.125rem; border: 1px solid hsl(var(--border-strong)); border-radius: 1rem; background: hsl(var(--chat-well)); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.acc-composer:focus-within { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18); }
.acc-composer__input { flex: 1; min-width: 0; min-height: 2.25rem; max-height: 12.5rem; margin: 0; padding: 0.4375rem 0; border: 0; background: transparent; color: hsl(var(--foreground)); font: inherit; font-size: 0.9375rem; line-height: 1.5; resize: none; outline: none; overflow-y: auto; }
.acc-composer__input::placeholder, .acc-composer__placeholder { color: hsl(var(--muted-foreground)); }
.acc-composer__placeholder { align-self: center; flex: 1; font-size: 0.9375rem; }
.acc-composer__send { display: inline-grid; flex: 0 0 auto; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 0.6875rem; background: hsl(var(--foreground)); color: hsl(var(--background)); cursor: pointer; transition: opacity var(--dur-base) var(--ease-out); }
.acc-composer__send > svg { width: 1rem; height: 1rem; }
.acc-composer__send:disabled { opacity: 0.3; cursor: default; }
.acc-composer__send:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.acc-composer__note { margin: 0.375rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.75rem; text-align: center; }

@keyframes acc-chat-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes acc-chat-dot { 50% { opacity: 0.25; } }
@keyframes acc-chat-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }
@media (max-width: 639px) {
  .acc-chat__ai { grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.625rem; }
  .acc-chat__avatar { width: 1.5rem; height: 1.5rem; border-radius: 0.4375rem; }
  .acc-chat__meta { min-height: 1.5rem; }
  .acc-chat__user { max-width: 90%; }
  .acc-composer { padding-left: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-chat__answer, .acc-steps > li, .acc-chat__typing > i, .acc-chat__caret { animation: none; }
  .acc-chip, .acc-composer, .acc-composer__send { transition: none; }
}

/* ==========================================================================
   v4.0.6: AI step status and trailing slot (design system §9.3).
   A step in .acc-steps can say where it stands with data-status, and end in
   a muted time (.acc-steps__meta) or one small action (.acc-steps__action,
   for Undo). The icon carries the state; the text still says it (status is
   never color alone: put "Failed", "Waiting for approval" in the text or an
   .acc-sr-only span).

   <li data-status="running">
     <span class="acc-steps__icon">…</span>
     <span class="acc-steps__text"><b class="acc-steps__verb">Restarting</b> the print spooler</span>
     <span class="acc-steps__meta">0:12</span>
   </li>
   <li data-status="done">… <span class="acc-steps__action"><button type="button">Undo</button></span></li>
   ========================================================================== */
:is(ol, ul).acc-chat { margin: 0; padding: 0; list-style: none; }
.acc-steps__text { flex: 1 1 0; min-width: 0; }
.acc-steps__meta { flex: 0 0 auto; margin-left: auto; color: hsl(var(--muted-foreground)); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.acc-steps__action { display: inline-flex; flex: 0 0 auto; gap: 0.25rem; margin-left: auto; }
.acc-steps__meta + .acc-steps__action { margin-left: 0.5rem; }
.acc-steps__action > :is(button, a) { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 1.625rem; padding: 0 0.5625rem; border: 1px solid hsl(var(--border)); border-radius: 0.5rem; background: transparent; color: hsl(var(--foreground)); font: inherit; font-size: 0.75rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast, 120ms) var(--ease-out); }
.acc-steps__action > :is(button, a):hover { background: hsl(var(--chat-bubble)); }
.acc-steps__action > :is(button, a):focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.acc-steps__action > :is(button, a):disabled { opacity: 0.45; cursor: default; }
.acc-steps__action :is(svg) { width: 0.75rem; height: 0.75rem; }

.acc-steps > li[data-status="queued"] { color: hsl(var(--muted-foreground)); }
.acc-steps > li[data-status="queued"] .acc-steps__verb { color: inherit; font-weight: 500; }
.acc-steps > li[data-status="running"] .acc-steps__icon { color: hsl(var(--chat-verb)); box-shadow: 0 0 0 1.5px hsl(var(--chat-verb) / 0.45); animation: acc-steps-ring 1.6s ease-in-out infinite; }
.acc-steps > li[data-status="done"] .acc-steps__icon { background: hsl(var(--success-soft)); color: hsl(var(--success)); }
.acc-steps > li[data-status="failed"] .acc-steps__icon { background: hsl(var(--destructive-soft)); color: hsl(var(--destructive)); }
.acc-steps > li[data-status="failed"] .acc-steps__verb { color: hsl(var(--destructive)); }
.acc-steps > li[data-status="approval"] { background: hsl(var(--warning) / 0.08); }
.acc-steps > li[data-status="approval"] .acc-steps__icon { background: hsl(var(--warning-soft)); color: hsl(var(--warning)); }
.acc-steps > li[data-status="approval"] .acc-steps__verb { color: hsl(var(--warning)); }

@keyframes acc-steps-ring { 50% { box-shadow: 0 0 0 3px hsl(var(--chat-verb) / 0.12); } }
@media (prefers-reduced-motion: reduce) {
  .acc-steps > li[data-status="running"] .acc-steps__icon { animation: none; }
  .acc-steps__action > :is(button, a) { transition: none; }
}