/* ─── Raw palette ─────────────────────────────────────────── */
:root {
  --_neutral-50: #f8fafc;
  --_neutral-100: #f1f5f9;
  --_neutral-200: #e2e8f0;
  --_neutral-300: #cbd5e1;
  --_neutral-400: #94a3b8;
  --_neutral-500: #64748b;
  --_neutral-600: #475569;
  --_neutral-700: #334155;
  --_neutral-800: #1e293b;
  --_neutral-900: #0f172a;
  --_primary-50: #eff6ff;
  --_primary-100: #dbeafe;
  --_primary-400: #60a5fa;
  --_primary-500: #3b82f6;
  --_primary-600: #2563eb;
  --_primary-700: #1d4ed8;
  --_success-50: #d1efe5;
  --_success-600: #00a670;
  --_success-700: #008a5d;
  --_warning-50: #fde9d1;
  --_warning-300: #fcd34d;
  --_warning-600: #f58300;
  --_warning-700: #d97000;
  --_danger-50: #ffded1;
  --_danger-600: #ff4700;
  --_danger-700: #d93c00;
  --_info-50: #d8e3fb;
  --_info-600: #2563eb;
  --_info-700: #1d4ed8;
}

/* ─── Semantic surface tokens ─────────────────────────────── */
:root {
  --color-bg: var(--_neutral-50);
  --color-surface: #fff;
  --color-surface-alt: var(--_neutral-100);
  --color-surface-raised: var(--_neutral-200);
  --color-border: var(--_neutral-200);
  --color-border-strong: var(--_neutral-300);
}

/* ─── Semantic text tokens ────────────────────────────────── */
:root {
  --color-text: var(--_neutral-800);
  --color-text-muted: var(--_neutral-500);
  --color-text-inverse: #fff;
  --color-link: var(--_primary-600);
  --color-link-hover: var(--_primary-700);
}

/* ─── Layout dimensions ──────────────────────────────────── */
:root {
  --height-header: 3.25rem;
  --width-sidebar: 16rem;
}

/* ─── Interactive tokens ─────────────────────────────────── */
:root {
  --color-focus-ring: var(--_primary-600);
}

/* ─── Domain colors ──────────────────────────────────────── */

/* Canonical brand colors for DMS business domains           */
:root {
  --color-domain-health: #00857a;
  --color-domain-business: #152087;
  --color-domain-international: #795548;
  --icon-domain-health: "heart";
  --icon-domain-business: "building-2";
  --icon-domain-international: "globe";
}

/* ─── App brand colors and icons ───────────────────────────────── */

/* Set --color-app-brand on :root in each app to color the   */

/* header brand area. -600/-700 shades for white-text contrast */
:root {
  --color-app-scrapers: #4f46e5; /* indigo-600  */
  --color-app-matchers: #059669; /* emerald-600 */
  --color-app-survey-report: #ea580c; /* orange-600  */
  --color-app-benchmark-report: #e11d48; /* rose-600    */
  --color-app-insightbot: #57534e; /* stone-600   */
  --color-app-apex: #374151; /* gray-700    */
  --color-app-factsbot: #b91c1c; /* red-700     */
  --color-app-radar: #8b5cf6; /* violet-500  */
  --color-app-bizdev: #c026d3; /* fuchsia-600 */
  --color-app-email: #0891b2; /* cyan-600    */
  --color-app-cockpit: #0d9488; /* teal-600    */
  --color-app-project-planner: #65a30d; /* lime-600    */

  /* Default Lucide icon name per app.                        */

  /* Set --icon-app-brand on :root in each app                */
  --icon-app-scrapers: "terminal";
  --icon-app-matchers: "link";
  --icon-app-survey-report: "chart-column";
  --icon-app-benchmark-report: "file-chart-column";
  --icon-app-email: "mail";
  --icon-app-insightbot: "brain-circuit";
  --icon-app-apex: "workflow";
  --icon-app-factsbot: "radio";
  --icon-app-radar: "sliders-horizontal";
  --icon-app-bizdev: "lightbulb";
  --icon-app-cockpit: "gauge";
}

/* ── Chart palette ──────────────────────────────────────── */
:root {
  /* 8-color qualitative palette for Chart.js / JS charts.    */

  /* Ordered for maximum adjacent contrast.                   */

  /* Use getComputedStyle(root).getPropertyValue('--chart-N') */
  --chart-1: #3b82f6; /* blue-500    (= --_primary-500)     */
  --chart-2: #d97706; /* amber-600                          */
  --chart-3: #059669; /* emerald-600 (= --_success-600)     */
  --chart-4: #b91c1c; /* red-700                            */
  --chart-5: #7c3aed; /* violet-600                         */
  --chart-6: #06b6d4; /* cyan-500                           */
  --chart-7: #57534e; /* stone-600                          */
  --chart-8: #ec4899; /* pink-500                           */
}

/* ─── Typography ─────────────────────────────────────────── */
:root {
  --font-sans:
    "BurdaNow", "Helvetica Neue", helvetica, roboto, system-ui, -apple-system, "Segoe UI", arial,
    sans-serif;
  --font-data: "IBM Plex Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  --font-mono:
    "IBM Plex Mono", ui-monospace, sfmono-regular, menlo, monaco, consolas, "Liberation Mono",
    "Courier New", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --leading-tight: 1.25;
  --leading-base: 1.5;
  --leading-relaxed: 1.75;
}

/* ─── Spacing ────────────────────────────────────────────── */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
}

/* ─── Radius ─────────────────────────────────────────────── */
:root {
  --radius-sm: 0.25rem;
  --radius-base: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;
}

/* ─── Shadows ────────────────────────────────────────────── */
:root {
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* ─── Z-index ────────────────────────────────────────────── */
:root {
  --z-below: -1;
  --z-base: 0;
  --z-above: 1;
  --z-overlay: 10;
  --z-modal: 20;
  --z-toast: 30;
}

/* ─── Intent variables — components read these ───────────── */

/* Default to primary intent so unstyled components are usable */
:root {
  --ui-accent: var(--_primary-500);
  --ui-accent-hover: var(--_primary-600);
  --ui-accent-subtle: var(--_primary-50);
  --ui-accent-text: var(--color-text-inverse);
  --color-success-subtle: var(--_success-50);
  --color-success: var(--_success-600);
  --color-success-strong: var(--_success-700);
  --color-warning-subtle: var(--_warning-50);
  --color-warning: var(--_warning-600);
  --color-warning-strong: var(--_warning-700);
  --color-danger-subtle: var(--_danger-50);
  --color-danger: var(--_danger-600);
  --color-danger-strong: var(--_danger-700);
  --color-info-subtle: var(--_info-50);
  --color-info: var(--_info-600);
  --color-info-strong: var(--_info-700);
}
/* ─── Custom font ────────────────────────────────────────── */
@font-face {
  font-family: BurdaNow;
  src: url("fonts/BurdaNow-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: BurdaNow;
  src: url("fonts/BurdaNow-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: BurdaNow;
  src: url("fonts/BurdaNow-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: BurdaNow;
  src: url("fonts/BurdaNow-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ─── Data font (IBM Plex Sans, OFL-licensed) ─────────────── */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Variable.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Variable.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Monospace font (IBM Plex Mono, OFL-licensed) ───────── */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Box model ──────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ─── Document ───────────────────────────────────────────── */
html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  margin: 0;
  min-height: 100vh;
}

/* ─── Typography ─────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-3);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-xl);
}

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

h4,
h5,
h6 {
  font-size: var(--text-base);
}

p {
  margin: 0 0 var(--space-4);
}

/* ─── Links ──────────────────────────────────────────────── */
a {
  color: var(--color-link);
  text-decoration: underline;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* ─── Lists ──────────────────────────────────────────────── */
ul,
ol {
  margin: 0 0 var(--space-4);
  padding-inline-start: var(--space-6);
}

/* ─── Code ───────────────────────────────────────────────── */
code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

pre {
  overflow: auto;
  background: var(--color-surface-alt);
  padding: var(--space-4);
  border-radius: var(--radius-base);
}

/* ─── Media ──────────────────────────────────────────────── */
img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* ─── Forms ──────────────────────────────────────────────── */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

/* ─── Tables ─────────────────────────────────────────────── */
table {
  border-collapse: collapse;
  width: 100%;
}

/* ─── Focus ──────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Dialog ─────────────────────────────────────────────── */
dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  max-width: 32rem;
  width: 100%;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
}

dialog::backdrop {
  background: rgb(0 0 0 / 0.4);
}

/* Close form inside dialog aligns actions to the right */
dialog form[method="dialog"] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  margin: 0;
}
/* ─── Shell layout ───────────────────────────────────────── */
.ui-shell {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content";
  grid-template-rows: auto 1fr;
  grid-template-columns: var(--width-sidebar) 1fr;
  min-height: 100vh;
}

.ui-header {
  grid-area: header;
}

.ui-sidebar {
  grid-area: sidebar;
}

.ui-content {
  grid-area: content;
}

/* Sidebar-less variant: single column below the header */
.ui-shell:not(:has(.ui-sidebar)) {
  grid-template-areas:
    "header"
    "content";
  grid-template-columns: 1fr;
}

/* ─── Container ──────────────────────────────────────────── */
.ui-container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ─── Stack — vertical flow with consistent gap ──────────── */
.ui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ui-stack[data-gap="sm"] {
  gap: var(--space-2);
}

.ui-stack[data-gap="lg"] {
  gap: var(--space-8);
}

/* ─── Cluster — horizontal wrapping group ────────────────── */
.ui-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.ui-cluster[data-gap="sm"] {
  gap: var(--space-2);
}

.ui-cluster[data-gap="lg"] {
  gap: var(--space-6);
}

.ui-cluster[data-justify="between"] {
  justify-content: space-between;
}

.ui-cluster[data-justify="end"] {
  justify-content: flex-end;
}

.ui-cluster[data-align="end"] {
  align-items: flex-end;
}

/* ─── Form grid — responsive form field layout ──────────── */
.ui-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.ui-form-grid > .ui-field,
.ui-form-grid > .ui-fieldset,
.ui-form-grid > .ui-hint,
.ui-form-grid > .ui-cluster,
.ui-form-grid > [data-span="full"] {
  grid-column: 1 / -1;
}

.ui-form-grid > .ui-field[data-span="half"] {
  grid-column: span 1;
}

@media (max-width: 48rem) {
  .ui-form-grid {
    grid-template-columns: 1fr;
  }

  .ui-form-grid > .ui-field[data-span="half"] {
    grid-column: 1 / -1;
  }
}

/* ─── Grid — responsive multi-column ────────────────────── */
.grid,
.ui-grid {
  display: grid;
  gap: var(--grid-gap, var(--space-6));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}

.grid[data-cols="2"],
.ui-grid[data-cols="2"] {
  grid-template-columns: repeat(2, 1fr);
}

.grid[data-cols="3"],
.ui-grid[data-cols="3"] {
  grid-template-columns: repeat(3, 1fr);
}

.grid[data-cols="4"],
.ui-grid[data-cols="4"] {
  grid-template-columns: repeat(4, 1fr);
}

.ui-grid[data-cols="4"] > [data-span="half"] {
  grid-column: span 2;
}

.ui-grid[data-cols="4"] > [data-span="full"] {
  grid-column: 1 / -1;
}

@media (max-width: 48rem) {
  .grid[data-cols="2"],
  .grid[data-cols="3"],
  .grid[data-cols="4"],
  .ui-grid[data-cols="2"],
  .ui-grid[data-cols="3"],
  .ui-grid[data-cols="4"] {
    grid-template-columns: 1fr;
  }

  .ui-grid[data-cols="4"] > [data-span="half"] {
    grid-column: 1 / -1;
  }
}

/* ─── Landing page — centred hero layout ─────────────────── */
.ui-landing {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}

/* Branded icon circle for landing-page hero sections */
.ui-landing-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-app-brand) 12%, transparent);
  margin-bottom: var(--space-4);
  color: var(--color-app-brand);
}

.ui-brand-logo {
  display: block;
  width: min(18rem, 80vw);
  height: auto;
  margin: 0 auto var(--space-6);
}

.ui-landing-status {
  max-width: 48rem;
  margin: var(--space-8) auto 0;
  text-align: left;
}

.ui-landing-links {
  margin-top: var(--space-6);
  text-align: left;
}

.ui-landing-hero > i,
.ui-landing-hero > svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* ─── Card grid — auto-fill responsive card layout ───────── */
.ui-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  max-width: 54rem;
}

.ui-card-grid > * {
  flex: 0 1 16rem;
}
/* ─── Variant intent — all components read --ui-accent ───── */
.primary {
  --ui-accent: var(--_primary-500);
  --ui-accent-hover: var(--_primary-600);
  --ui-accent-subtle: var(--_primary-50);
  --ui-accent-text: var(--color-text-inverse);
}

.secondary {
  --ui-accent: var(--_neutral-600);
  --ui-accent-hover: var(--_neutral-700);
  --ui-accent-subtle: var(--_neutral-100);
  --ui-accent-text: var(--color-text-inverse);
}

.danger {
  --ui-accent: var(--_danger-600);
  --ui-accent-hover: var(--_danger-700);
  --ui-accent-subtle: var(--_danger-50);
  --ui-accent-text: var(--color-text-inverse);
}

.success {
  --ui-accent: var(--_success-600);
  --ui-accent-hover: var(--_success-700);
  --ui-accent-subtle: var(--_success-50);
  --ui-accent-text: var(--color-text-inverse);
}

.warning {
  --ui-accent: var(--_warning-600);
  --ui-accent-hover: var(--_warning-700);
  --ui-accent-subtle: var(--_warning-50);
  --ui-accent-text: var(--color-text);
}

.info {
  --ui-accent: var(--_info-600);
  --ui-accent-hover: var(--_info-700);
  --ui-accent-subtle: var(--_info-50);
  --ui-accent-text: var(--color-text-inverse);
}

/* ─── Navigation ─────────────────────────────────────────── */
.ui-header {
  position: sticky;
  top: 0;
  height: var(--height-header);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--color-text) 4%, transparent);
  padding-inline: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  z-index: var(--z-above);
}

/* Brand section — left-aligned, matches sidebar width, app color or dark fallback */
.ui-header-brand {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-5);
  width: var(--width-sidebar);
  margin-inline-start: calc(-1 * var(--space-6));
  background: var(
    --color-app-brand,
    linear-gradient(to right, var(--_neutral-800), var(--_neutral-700))
  );
  color: var(--color-text-inverse);
  font-weight: var(--font-bold);
  text-decoration: none;
}

.ui-header-brand:hover {
  color: var(--color-text-inverse);
}

.ui-header-brand-subtitle {
  font-size: 0.625rem;
  font-weight: var(--font-medium);
  letter-spacing: 0.03em;
  opacity: 0.65;
}

/* Right-aligned header group: language switch, user */
.ui-header-end {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

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

/* Segmented language control; buttons carry aria-pressed */
.ui-lang-switch {
  display: inline-flex;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ui-lang-switch button {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  background: transparent;
  color: var(--color-text-muted);
  border: 0;
  cursor: pointer;
}

.ui-lang-switch button:hover {
  background: var(--color-surface-alt);
}

.ui-lang-switch button[aria-pressed="true"] {
  background: var(--color-text);
  color: var(--color-text-inverse);
}

.ui-lang-switch button:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.ui-sidebar {
  position: sticky;
  top: var(--height-header);
  height: calc(100vh - var(--height-header));
  align-self: start;
  display: flex;
  flex-direction: column;
  background: var(--_neutral-800);
  border-right: 1px solid var(--_neutral-700);
  padding: var(--space-6) var(--space-4);
  overflow-y: auto;
}

.ui-sidebar-nav {
  flex: 1;
  min-height: 0;
}

.ui-sidebar-footer {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--_neutral-700);
  font-size: 0.6875rem;
  color: var(--_neutral-400);
}

.ui-content {
  min-height: 0;
  padding: var(--space-8) var(--space-6);
  overflow-y: auto;
  background: var(--_neutral-50);
}

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

.ui-nav-heading {
  padding: var(--space-4) var(--space-3) var(--space-1);
  font-size: 0.6875rem;
  font-weight: var(--font-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--_neutral-400);
}

.ui-nav-divider {
  height: 1px;
  margin: var(--space-2) var(--space-3);
  background: var(--_neutral-700);
}

.ui-nav-item {
  position: relative;
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-base);
  color: var(--_neutral-300);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.ui-nav-item:hover {
  background: color-mix(in srgb, var(--color-text-inverse) 6%, transparent);
  color: var(--_neutral-100);
  text-decoration: none;
}

.ui-nav-item[aria-current="page"] {
  /* Fixed white-tint fill (not brand-colored): brand colors vary from very
     dark (e.g. #152087) to bright, so a brand-tinted fill is invisible for
     some apps/domains and not for others. A fixed tint is visible and
     consistent regardless of brand darkness; brand identity is still
     carried by the left indicator bar below. */
  background: color-mix(in srgb, var(--color-text-inverse) 18%, transparent);
  color: var(--color-text-inverse);
}

/* Left indicator bar on active nav item */
.ui-nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.1875rem;
  height: 1.5rem;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  background: var(--color-app-brand, var(--_primary-500));
}

/* ─── Toolbar — search/filter row above a table ─────────── */
.ui-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.ui-toolbar .ui-input,
.ui-toolbar .ui-select {
  width: auto;
  max-width: none;
}

/* ─── Card ───────────────────────────────────────────────── */
.ui-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow:
    0 2px 8px 0 color-mix(in srgb, var(--color-text) 8%, transparent),
    0 1px 2px -1px color-mix(in srgb, var(--color-text) 6%, transparent);
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.ui-card.ui-card-overflow {
  overflow: visible;
}

a.ui-card,
.ui-card[data-accent] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--_card-accent, var(--color-border));
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

a.ui-card:hover {
  box-shadow:
    0 4px 12px 0 color-mix(in srgb, var(--color-text) 10%, transparent),
    0 2px 4px -1px color-mix(in srgb, var(--color-text) 8%, transparent);
  transform: translateY(-2px);
}

.ui-card[data-domain] {
  background: var(--_domain-card-bg);
  color: var(--_domain-card-text);
}

.ui-card[data-domain="health"] {
  --_domain-card-bg: color-mix(in srgb, var(--color-domain-health) 10%, var(--color-surface));
  --_domain-card-text: var(--color-domain-health);
  --_card-accent: var(--color-domain-health);
  --_card-icon-bg: color-mix(in srgb, var(--color-domain-health) 16%, var(--color-surface));
  --_card-icon-fg: var(--color-domain-health);
}

.ui-card[data-domain="business"] {
  --_domain-card-bg: color-mix(in srgb, var(--color-domain-business) 9%, var(--color-surface));
  --_domain-card-text: var(--color-domain-business);
  --_card-accent: var(--color-domain-business);
  --_card-icon-bg: color-mix(in srgb, var(--color-domain-business) 12%, var(--color-surface));
  --_card-icon-fg: var(--color-domain-business);
}

.ui-card[data-domain="international"] {
  --_domain-card-bg: color-mix(
    in srgb,
    var(--color-domain-international) 10%,
    var(--color-surface)
  );
  --_domain-card-text: var(--color-domain-international);
  --_card-accent: var(--color-domain-international);
  --_card-icon-bg: color-mix(in srgb, var(--color-domain-international) 14%, var(--color-surface));
  --_card-icon-fg: var(--color-domain-international);
}

.ui-card[data-domain] .ui-hint {
  color: color-mix(in srgb, var(--_domain-card-text) 70%, var(--color-text-muted));
}

.ui-card[data-accent="blue"] {
  --_card-accent: #3b82f6;
  --_card-icon-bg: #eff6ff;
  --_card-icon-fg: #2563eb;
}

.ui-card[data-accent="green"] {
  --_card-accent: #22c55e;
  --_card-icon-bg: #f0fdf4;
  --_card-icon-fg: #16a34a;
}

.ui-card[data-accent="amber"] {
  --_card-accent: #f59e0b;
  --_card-icon-bg: #fffbeb;
  --_card-icon-fg: #d97706;
}

.ui-card[data-accent="purple"] {
  --_card-accent: #a855f7;
  --_card-icon-bg: #faf5ff;
  --_card-icon-fg: #7c3aed;
}

.ui-card[data-accent="rose"] {
  --_card-accent: #f43f5e;
  --_card-icon-bg: #fff1f2;
  --_card-icon-fg: #e11d48;
}

.ui-card[data-accent="cyan"] {
  --_card-accent: #06b6d4;
  --_card-icon-bg: #ecfeff;
  --_card-icon-fg: #0891b2;
}

.ui-card[data-accent="orange"] {
  --_card-accent: #f97316;
  --_card-icon-bg: #fff7ed;
  --_card-icon-fg: #ea580c;
}

.ui-card[data-accent="slate"] {
  --_card-accent: #64748b;
  --_card-icon-bg: #f8fafc;
  --_card-icon-fg: #475569;
}

.ui-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-base);
  background: var(--_card-icon-bg, var(--_primary-50));
  color: var(--_card-icon-fg, var(--color-app-brand));
  flex-shrink: 0;
}

.ui-card-title {
  font-weight: var(--font-medium);
}

.ui-card-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  font-weight: var(--font-medium);
}

.ui-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

.ui-page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

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

.ui-auth-layout {
  display: flex;
  width: 100%;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
}

.ui-auth-layout > .ui-stack {
  width: min(100%, 32rem);
}

.ui-auth-card {
  width: 100%;
  padding: var(--space-8);
}

.ui-auth-card[data-align="center"] {
  text-align: center;
}

.ui-auth-logo {
  display: block;
  width: auto;
  height: 2rem;
  margin: 0 auto var(--space-6);
}

/* ─── Help layout — generated Markdown with table of contents (canonical) ── */
.ui-help-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  gap: var(--space-8);
  width: 100%;
  align-items: start;
}

.ui-help-content {
  min-width: 0;
  max-width: 100%;
}

.ui-help-toc {
  position: static;
  min-width: 0;
  align-self: start;
}

.ui-help-toc .ui-card-body {
  gap: var(--space-3);
}

.ui-help-toc h2 {
  font-size: var(--text-lg);
}

.ui-help-toc ul {
  margin: 0;
  padding-inline-start: var(--space-4);
  list-style: none;
}

.ui-help-toc li {
  margin-bottom: var(--space-2);
}

.ui-help-toc a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.ui-help-toc a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.ui-markdown h1 {
  margin-top: 0;
}

.ui-markdown h2 {
  margin-top: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

.ui-markdown h3 {
  margin-top: var(--space-6);
}

.ui-markdown h4 {
  margin-top: var(--space-5);
}

.ui-markdown {
  min-width: 0;
  overflow-x: auto;
}

.ui-markdown table {
  width: max-content;
  min-width: 100%;
  margin-bottom: var(--space-4);
  border-collapse: collapse;
}

.ui-markdown th,
.ui-markdown td {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
}

.ui-markdown th {
  background-color: var(--color-surface-alt);
}

.ui-markdown blockquote {
  margin: var(--space-4) 0;
  border-left: 4px solid var(--_primary-600);
  padding: var(--space-3) var(--space-4);
  background: var(--_primary-50);
}

.ui-markdown code {
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  padding: 0.15rem 0.4rem;
  font-size: 0.9em;
}

.ui-markdown pre {
  overflow-x: auto;
  border-radius: var(--radius-base);
  background: var(--color-surface-alt);
  padding: var(--space-4);
}

.ui-markdown pre code {
  padding: 0;
  background: none;
}

.ui-markdown hr {
  margin: var(--space-8) 0;
}

@media (max-width: 60rem) {
  .ui-help-layout {
    grid-template-columns: 1fr;
  }

  .ui-help-toc {
    order: -1;
  }
}

/* ─── Collapsible Card (native <details>) ────────────────── */
.ui-card-collapsible > .ui-card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ui-card-collapsible > .ui-card-summary::-webkit-details-marker {
  display: none;
}

.ui-card-collapsible > .ui-card-summary .ui-card-chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.ui-card-collapsible[open] > .ui-card-summary .ui-card-chevron {
  transform: rotate(180deg);
}

/* ─── Stat / KPI Card ────────────────────────────────────── */
.ui-stat-card.ui-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.ui-stat-card > .ui-cluster {
  flex-shrink: 0;
}

.ui-stat-card > :last-child:not(.ui-cluster) {
  text-align: right;
}

.ui-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--color-text) 6%, transparent);
}

.ui-stat-card .ui-card-icon {
  width: 2.25rem;
  height: 2.25rem;
}

.ui-stat-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ui-stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: 1.1;
  margin: 0;
}

.ui-stat-delta {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin: 0;
}

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

/* ─── Button ─────────────────────────────────────────────── */
.ui-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  text-decoration: none;
  cursor: pointer;
  background: var(--ui-accent);
  color: var(--ui-accent-text);
  width: fit-content;
  transition:
    background-color 0.15s ease,
    transform 0.1s ease;
}

.ui-button:hover:not([disabled]) {
  background: var(--ui-accent-hover);
  color: var(--ui-accent-text);
  text-decoration: none;
}

.ui-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-button.outline {
  background: transparent;
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

.ui-button.outline:hover:not([disabled]) {
  background: var(--ui-accent-subtle);
  color: var(--ui-accent);
}

.ui-button.ghost {
  background: transparent;
  color: var(--ui-accent);
}

.ui-button.ghost:hover:not([disabled]) {
  background: var(--ui-accent-subtle);
  color: var(--ui-accent);
}

.ui-button.is-loading {
  pointer-events: none;
  opacity: 0.75;
  color: transparent;
  position: relative;
}

.ui-button.is-loading::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border: 2px solid currentcolor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: ui-spin 0.6s linear infinite;
  color: var(--ui-accent-text);
}

.ui-button.outline.is-loading::after,
.ui-button.ghost.is-loading::after {
  color: var(--ui-accent);
}

/* ─── Form fields ────────────────────────────────────────── */
.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

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

.ui-label:has(+ [required])::after,
.ui-label.required::after {
  content: " *";
  color: var(--_danger-600);
}

.ui-input,
.ui-select,
.ui-textarea {
  max-width: 28rem;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-base);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-data);
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.ui-form input:not(.ui-input),
.ui-form select:not(.ui-select),
.ui-form textarea:not(.ui-textarea) {
  width: 100%;
  max-width: 28rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-base);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-data);
  font-size: var(--text-sm);
}

.ui-form-grid .ui-input,
.ui-form-grid .ui-select,
.ui-form-grid .ui-textarea {
  max-width: none;
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  outline: none;
  border-color: var(--_primary-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_primary-500) 15%, transparent);
}

.ui-input[aria-invalid="true"],
.ui-select[aria-invalid="true"],
.ui-textarea[aria-invalid="true"] {
  border-color: var(--_danger-600);
}

.ui-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ─── Alert ──────────────────────────────────────────────── */
.ui-alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-base);
  border-left: 4px solid var(--ui-accent);
  background: var(--ui-accent-subtle);
  font-size: var(--text-sm);
}

/* ─── Table ──────────────────────────────────────────────── */
.p-datatable .p-datatable-tbody > tr > td {
  font-size: var(--text-sm);
  font-family: var(--font-data);
}

.p-datatable .p-datatable-thead > tr > th {
  font-size: var(--text-sm);
}

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

.ui-table thead tr {
  border-bottom: 2px solid var(--color-border);
  background: color-mix(
    in srgb,
    var(--color-app-brand, var(--_primary-500)) 6%,
    var(--color-surface)
  );
}

.ui-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ui-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  font-family: var(--font-data);
}

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

.ui-table td {
  transition: background-color 0.15s ease;
}

.ui-table tbody tr:hover td {
  background: var(--color-surface-alt);
}

/* Row-level hover-reveal action buttons (used inside .ui-table) */
.ui-table tr {
  position: relative;
}

.ui-row-actions {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--space-2);
  transform: translateY(-50%);
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  box-shadow: var(--shadow-default);
  border-radius: var(--radius-base);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

tr:hover > .ui-row-actions {
  opacity: 1;
  pointer-events: auto;
}

/* Table: scroll wrapper */
.ui-table-wrap {
  overflow-x: auto;
  max-height: 24rem;
  overflow-y: auto;
  border-radius: var(--radius-md);
}

/* Table: sticky header */
.ui-table-sticky thead {
  position: sticky;
  top: 0;
  background: var(--color-surface-alt);
  z-index: 10;
}

/* Table: sortable column headers */
.ui-table-sortable th {
  cursor: pointer;
  user-select: none;
}

.ui-table-sortable th:hover {
  color: var(--color-text);
}

.ui-table-sortable .sort-icon {
  font-size: 10px;
  color: var(--color-text-muted);
}

.ui-table-sortable .sort-icon.active {
  color: var(--color-app-brand);
  font-weight: 700;
}

/* Table: compact inline search input */
.ui-table-search {
  width: 12rem;
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}

.ui-table-search:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-app-brand) 15%, transparent);
}

/* Table: highlighted row */
.ui-table .row-highlight {
  background: color-mix(in srgb, var(--_primary-500) 6%, transparent);
}

/* ─── Badge — pill label for status/category values ─────── */
.ui-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: var(--font-medium);
  line-height: 1.4;
  background: var(--ui-accent-subtle);
  color: var(--ui-accent);
  border: 1px solid color-mix(in srgb, var(--ui-accent) 18%, transparent);
  text-decoration: none;
}

/* Solid variant — swaps the soft tint for a solid accent fill with inverse
   text, e.g. for a badge that acts as a link (like a department badge).
   Visually distinguishes navigational badges from soft informational ones
   (.status-*, .impact-*). Combine with an inline --ui-accent, e.g.
   <a class="ui-badge solid" style="--ui-accent: #6366f1">Sales</a>. */
.ui-badge.solid {
  background: var(--ui-accent);
  color: var(--color-text-inverse);
  border-color: var(--ui-accent);
}

/* Square variant — for a single-character/icon badge (e.g. a department
   initial next to a heading). Swaps the pill shape and small type for a
   compact square at a heading-scaled font size. Combine with .solid for a
   filled square, e.g. <span class="ui-badge solid square">S</span>. */
.ui-badge.square {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
}

/* Status color modifiers — common 6-state lifecycle color mapping (idea →
   validating → progress → done, plus blocked/canceled). Sets --ui-accent /
   --ui-accent-subtle so any component reading them (badge, chip, ...) picks
   up matching per-status colors. Pairs with .ui-fill-status-* for matching
   chart colors. */
.status-idea {
  --ui-accent: var(--_neutral-400);
  --ui-accent-subtle: color-mix(in srgb, var(--_neutral-400) 14%, var(--color-surface));
}

.status-validating {
  --ui-accent: var(--_warning-600);
  --ui-accent-subtle: var(--_warning-50);
}

.status-progress {
  --ui-accent: var(--_info-600);
  --ui-accent-subtle: var(--_info-50);
}

.status-done {
  --ui-accent: var(--_success-600);
  --ui-accent-subtle: var(--_success-50);
}

.status-blocked {
  --ui-accent: var(--_danger-600);
  --ui-accent-subtle: var(--_danger-50);
}

.status-canceled {
  --ui-accent: var(--chart-5);
  --ui-accent-subtle: color-mix(in srgb, var(--chart-5) 14%, var(--color-surface));
}

/* Impact color modifiers — 1-5 score coloring (high/med/low/na), shared
   across apps that surface a use-case's impact rating. Use a nested
   .impact-of span for a muted "/5" suffix, e.g. <span class="ui-badge
   impact-high">4<span class="impact-of">/5</span></span>. */
.impact-high {
  --ui-accent: var(--_danger-700);
  --ui-accent-subtle: var(--_danger-50);
}

.impact-med {
  --ui-accent: var(--_warning-700);
  --ui-accent-subtle: var(--_warning-50);
}

.impact-low,
.impact-na {
  --ui-accent: var(--color-text-muted);
  --ui-accent-subtle: var(--color-surface-alt);
}

.ui-badge .impact-of {
  opacity: 0.7;
  font-size: 0.85em;
}

/* ─── Filter chips ──────────────────────────────────────────
   Toggleable filter button, e.g. <button class="ui-chip">Label</button> or
   <button class="ui-chip active">Label</button>. Optionally hosts a leading
   child (e.g. a colored .dot) via its inline-flex layout — the chip itself
   makes no assumption about icons or dots, it just lays out whatever is
   placed before the label text.
   By default the active state uses the shell's primary color — brand color
   (--color-app-brand) is reserved for the header/nav sidebar only. Combine
   with a .status-* / .impact-* modifier (see above) to color-match a chip
   to its corresponding badge, e.g. <button class="ui-chip status-done
   active">Done</button>. */
.ui-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  cursor: pointer;
  font-family: inherit;
}

.ui-chip.active {
  background: var(--ui-accent, var(--_primary-500));
  border-color: var(--ui-accent, var(--_primary-500));
  color: var(--color-text-inverse);
}

/* Small colored circle, e.g. a leading indicator inside a .ui-chip or a
   legend marker next to a count. Pair with .ui-fill-status-* for the same
   6-state status colors used by .status-* / .ui-badge.status-*. */
.dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
  flex-shrink: 0;
}

/* ─── Rating — star (default) or dot value picker/display ───
   Each item is a Lucide icon (<i data-lucide="star">, or "circle" for the
   .dots variant) inside a plain button/span — no custom SVG masks, just
   the icon's own fill/stroke recolored by CSS via .filled/.hovered/.unset.
   Read-only display: <div class="ui-rating" data-value="3"><button
   class="ui-rating-item filled" data-value="1"><i data-lucide="star"></i>
   </button>...3x...<button class="ui-rating-item" data-value="4">
   <i data-lucide="star"></i></button> (no [data-interactive], plain
   items, no JS needed — just make sure lucide.createIcons() runs after
   the markup is in the DOM, same as any other icon).
   Interactive form input: add [data-interactive] + role="radiogroup"; each
   item gets role="radio" aria-checked. rating.js auto-wires clicks/hover
   and dispatches a "ui-rating-change" CustomEvent with detail.value.
   Clicking the already-selected item steps it down by one (so item 1
   reaches 0), letting 0 stay a reachable, distinct value from "unset". Add
   an optional leading <button class="ui-rating-clear"> to jump straight to
   unset (""); pair with .unset for a hollow-outline empty state (the
   .ui-rating-clear button auto-hides once .unset, since there's nothing
   left to clear) — this reads clearly differently from an explicit 0
   (solid, full-opacity, just unfilled).
   Use .dots for a compact circle variant (e.g. impact ratings) instead of
   the default star shape — swap the icon name to "circle" in the markup
   and add .dots to size it down. Each item reads --ui-accent like
   .ui-badge / .ui-chip, so combine with a .status-* / .impact-* modifier
   to color-match. */

.ui-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.ui-rating-item {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  display: inline-flex;
}

.ui-rating[data-interactive] .ui-rating-item {
  cursor: pointer;
}

.ui-rating-item svg {
  width: 100%;
  height: 100%;
  fill: var(--color-border-strong);
  stroke: var(--color-border-strong);
}

.ui-rating-item.filled svg,
.ui-rating-item.hovered svg {
  fill: var(--ui-accent, var(--_primary-500));
  stroke: var(--ui-accent, var(--_primary-500));
}

/* Unset ("not rated yet") gets a hollow outline (fill removed, same muted
   stroke) instead of just a dimmer solid shape, so it reads clearly
   differently from an explicit value of 0 (which renders as a
   full-opacity, solid, unfilled item — see .ui-rating-item above). Scoped
   to :not(.hovered) so hovering still previews the accent fill (otherwise
   this rule's higher specificity would suppress the hover preview). */
.ui-rating.unset .ui-rating-item:not(.hovered) svg {
  fill: none;
}

.ui-rating.unset .ui-rating-clear {
  display: none;
}

.ui-rating.dots .ui-rating-item {
  width: 8px;
  height: 8px;
}

.ui-rating-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.ui-rating-clear:hover {
  color: var(--color-danger);
}

/* ─── State — empty / loading / error placeholder ────────── */
.ui-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-16);
  text-align: center;
  color: var(--color-text-muted);
}

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

/* Compact variant for cards, table cells and side panels. */
.ui-state.compact {
  gap: var(--space-2);
  padding: var(--space-6);
}

.ui-state-title {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.ui-state.compact .ui-state-title {
  font-size: var(--text-sm);
}

/* Round icon bubble above the title. */
.ui-state-icon {
  display: inline-flex;
  padding: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
}

.ui-state-icon svg {
  width: 2rem;
  height: 2rem;
}

/* ─── Skeleton — shimmering placeholder while content loads ─ */

/* Defaults to one line of text; set width/height inline. */
.ui-skeleton {
  display: block;
  height: 1em;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-surface-alt) 25%,
    var(--color-surface-raised) 50%,
    var(--color-surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: ui-skeleton-shimmer 1.4s ease-in-out infinite;
}

.ui-table-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.ui-table-skeleton .ui-skeleton {
  height: 1.25rem;
}

.ui-table-empty {
  padding: var(--space-6) 0;
}

.ui-table-error {
  padding: var(--space-6) 0;
  color: var(--color-danger-strong);
}

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

  to {
    background-position: -200% 0;
  }
}

/* ─── Infobox — callout panel for instructions/help ──────── */
.ui-infobox {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--_info-600);
  background: var(--_info-50);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.ui-infobox :is(p, ol, ul) {
  margin-bottom: var(--space-2);
}

.ui-infobox :is(p, ol, ul):last-child {
  margin-bottom: 0;
}

.ui-infobox ol {
  padding-inline-start: var(--space-5);
}

.ui-infobox li + li {
  margin-top: var(--space-1);
}

.ui-infobox strong {
  font-weight: var(--font-bold);
}

.ui-infobox-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
  color: var(--_info-700);
}

.ui-infobox-title [data-lucide],
.ui-infobox-title svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.ui-infobox code {
  background: color-mix(in srgb, var(--_primary-500) 10%, transparent);
  padding: 0.125rem var(--space-1);
  border-radius: var(--radius-sm);
  font-size: 0.8125em;
}

/* ─── Form layout — vertical stack for form controls ─────── */
.ui-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.ui-form.ui-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.ui-editable-content {
  font-family: var(--font-data);
}

@media (max-width: 48rem) {
  .ui-form.ui-form-grid {
    grid-template-columns: 1fr;
  }
}

.ui-form > .ui-card,
.ui-form > .ui-infobox,
.ui-form > .ui-fieldset {
  align-self: stretch;
}

/* Fieldset — group of related fields with visual separation */
.ui-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.ui-fieldset legend {
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  padding: 0 var(--space-2);
}

/* ─── Toast (transient notification, see ui-shell.js showToast()) ───
   Positioned top-right to match the Vue reference app's PrimeVue
   <Toast /> default position. */
.ui-toast {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  background: var(--_neutral-800);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.2s,
    transform 0.2s;
  pointer-events: none;
}

.ui-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Dialog (native <dialog>) ───────────────────────────── */
dialog.ui-dialog {
  max-width: 32rem;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 8px 24px 0 color-mix(in srgb, var(--color-text) 12%, transparent),
    0 2px 6px -1px color-mix(in srgb, var(--color-text) 8%, transparent);
}

dialog.ui-dialog::backdrop {
  background: color-mix(in srgb, var(--color-text) 35%, transparent);
}

dialog.ui-dialog.danger {
  border-color: var(--color-border);
}

.ui-dialog-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: var(--ui-accent-subtle);
  border-bottom: 1px solid color-mix(in srgb, var(--ui-accent) 18%, var(--color-border));
}

.ui-dialog-header h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.ui-dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--ui-accent) 14%, transparent);
  color: var(--ui-accent);
}

.ui-dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

.ui-dialog-body .ui-hint {
  margin: 0;
}

.ui-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
}

/* ─── Loader / Spinner ───────────────────────────────────── */
.ui-loader {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ─── Details / Summary — expand toggle ──────────────────── */
.ui-detail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}

.ui-detail-toggle:hover {
  color: var(--_primary-600);
}

/* ─── Form row — inline label + control ──────────────────── */
.ui-form-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.ui-form-row > span {
  flex: 0 0 12rem;
  font-weight: var(--font-medium);
}

.ui-form-row > input,
.ui-form-row > select,
.ui-form-row > textarea {
  flex: 1 1 auto;
}

/* ─── Step list — selectable, optionally nested ─────────── */

/* Selectable step list. Rows are buttons laid out with ui-cluster;
   nested lists (.nested) hang off a guide line. Mark the selected
   row with aria-current="true". */
.ui-steps {
  margin: 0;
  padding: var(--space-2);
  list-style: none;
}

.ui-steps.nested {
  margin-left: var(--space-5);
  padding: 0 0 0 var(--space-2);
  border-left: 1px solid var(--color-border);
}

.ui-steps-row {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ui-steps-row:hover,
.ui-steps-row[aria-current="true"] {
  background: var(--color-surface-raised);
}

/* Nested rows get a dot on the guide line; filled when selected. */
.ui-steps.nested .ui-steps-row {
  position: relative;
}

.ui-steps.nested .ui-steps-row::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--space-2) - 4px);
  width: 7px;
  height: 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  transform: translateY(-50%);
}

.ui-steps.nested .ui-steps-row[aria-current="true"]::before {
  border-color: var(--color-app-brand, var(--_primary-500));
  background: var(--color-app-brand, var(--_primary-500));
}

/* ─── Progress bar ───────────────────────────────────────── */
.ui-progress {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 0.5rem;
  margin-bottom: var(--space-3);
  background: var(--color-surface-raised);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.ui-progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1;
  white-space: nowrap;
  background: var(--color-app-brand, var(--_primary-500));
  transition: width 0.3s ease;
}

.ui-progress-bar[data-state="pending"] {
  background-image: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.14) 25%,
    transparent 25%,
    transparent 50%,
    rgb(255 255 255 / 0.14) 50%,
    rgb(255 255 255 / 0.14) 75%,
    transparent 75%
  );
  background-size: 1rem 1rem;
  animation: ui-progress-stripes 1s linear infinite;
}

@keyframes ui-progress-stripes {
  to {
    background-position: 1rem 0;
  }
}

/* ─── Phase track ────────────────────────────────────────── */

/* Ordered list of phases with the current one highlighted.
   Steps before the current one get data-state="done", the current one
   data-state="current"; later steps stay unmarked. */
.ui-phase-track {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-phase-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.ui-phase-step::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}

.ui-phase-step[data-state="done"]::before {
  border-color: var(--color-app-brand, var(--_primary-500));
  background: color-mix(in srgb, var(--color-app-brand, var(--_primary-500)) 35%, transparent);
}

.ui-phase-step[data-state="current"] {
  color: var(--color-text);
  font-weight: var(--font-semibold);
}

.ui-phase-step[data-state="current"]::before {
  border-color: var(--color-app-brand, var(--_primary-500));
  background: var(--color-app-brand, var(--_primary-500));
}

/* ─── Horizontal bar chart ───────────────────────────────── */

/* Composable primitives for label → track → bar → percentage rows.
   Usage:
     <div class="ui-chart-rows">
       <div class="ui-chart-row">
         <span class="ui-chart-label">Category</span>
         <div class="ui-chart-track">
           <div class="ui-chart-bar" style="width:42%; background:var(--chart-1)">
             <span class="ui-chart-bar-text">42</span>
           </div>
         </div>
         <span class="ui-chart-pct">42 %</span>
       </div>
     </div>
*/

.ui-chart-rows {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ui-chart-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  position: relative;
}

/* CSS tooltip for chart rows */
.ui-chart-row[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  z-index: 50;
  pointer-events: none;
  background: var(--color-text);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.4;
  padding: 0.375rem 0.625rem;
  white-space: pre-line;
  max-width: 320px;
  opacity: 0;
  transition: opacity 0.15s;
}

.ui-chart-row[data-tip]:hover::after {
  opacity: 1;
}

.ui-chart-label {
  font-size: 13px;
  color: var(--color-text);
  text-align: right;
  flex-shrink: 0;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-chart-label[data-w="wide"] {
  width: 42%;
}

.ui-chart-label[data-w="narrow"] {
  width: 28%;
}

.ui-chart-track {
  flex: 1;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  height: 1.75rem;
  overflow: clip;
  position: relative;
  cursor: default;
}

.ui-chart-track[data-stacked] {
  display: flex;
}

.ui-chart-track:hover .ui-chart-bar {
  filter: brightness(1.12);
}

.ui-chart-bar {
  height: 1.75rem;
  transition:
    width 0.5s,
    filter 0.15s;
  position: relative;
}

.ui-chart-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-inline-start: 0.5rem;
  font-size: 10px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.9);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
  pointer-events: none;
}

.ui-chart-bar-text[data-align="start"] {
  justify-content: flex-start;
  padding-inline-start: 0.5rem;
}

.ui-chart-pct {
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: var(--color-text-muted);
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.ui-chart-pct[data-w="wide"] {
  width: 3.5rem;
}

.ui-chart-pct[data-w="narrow"] {
  width: 3rem;
}

.ui-chart-axis {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-block-start: 0.25rem;
}

.ui-chart-axis-labels {
  flex: 1;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--_neutral-300);
  font-family: ui-monospace, monospace;
}

/* ── Chart legend ── */
.ui-chart-legend {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-block-end: 0.75rem;
}

.ui-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ui-chart-legend-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* ── Chart respondents note ── */
.ui-chart-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: right;
  margin-block-start: 0.5rem;
}

/* ─── Tabs (horizontal, underline style) ─────────────────── */

.ui-chart-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  margin-block-end: 1rem;
}

.ui-chart-tab {
  padding: 0.5rem 0.75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  margin-bottom: -1px;
  background: none;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.ui-chart-tab:hover {
  color: var(--color-text);
}

.ui-chart-tab.is-active {
  border-bottom-color: var(--_primary-600);
  color: var(--_primary-600);
  font-weight: 500;
}

/* ─── Word cloud ─────────────────────────────────────────── */

.ui-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  min-height: 120px;
}

.ui-cloud-word {
  display: inline-block;
  font-weight: 500;
  padding: 0.125rem 0.375rem;
  line-height: 1.375;
}

/* ─── Search dropdown ────────────────────────────────────── */

.ui-search-wrap {
  position: relative;
}

.ui-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.ui-search-input:focus {
  border-color: var(--_primary-400);
  box-shadow: 0 0 0 2px var(--_primary-400);
}

.ui-search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
}

.ui-search-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-block-start: var(--space-1);
  max-height: 16rem;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
}

.ui-search-dropdown[data-width="content"] {
  right: auto;
  min-width: 100%;
  width: max-content;
  max-width: 24rem;
}

.ui-search-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s;
}

.ui-search-option:hover {
  background: var(--color-surface-alt);
}
/* ─── Display ────────────────────────────────────────────── */

/* Hide element */
.hidden {
  display: none;
}

/* Visually hidden but accessible to screen readers */
.ui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Inline display (forms in header bars, etc.) */
.ui-inline {
  display: inline;
}

/* Full-width element (non-PrimeVue elements; PrimeVue inputs use the native `fluid` prop) */
.ui-full-width {
  width: 100%;
}

/* ─── Text alignment ────────────────────────────────────── */

.ui-text-left {
  text-align: left;
}

.ui-text-right {
  text-align: right;
}

.ui-text-center {
  text-align: center;
}

/* ─── Text size ──────────────────────────────────────────── */

.ui-text-xs {
  font-size: var(--text-xs);
}

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

/* ─── Font weight ────────────────────────────────────────── */

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

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

.ui-bold {
  font-weight: var(--font-bold);
}

/* ─── Font family ────────────────────────────────────────── */

/* Monospace text */
.ui-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Bound data values outside form controls/tables (detail views, record displays) */
.ui-data-value {
  font-family: var(--font-data);
}

/* ─── Numeric formatting ─────────────────────────────────── */

/* Right-aligned tabular numbers */
.ui-num-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Text styling ───────────────────────────────────────── */

/* Single-line text truncation — requires a width constraint */
.ui-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Muted text */
.ui-muted {
  color: var(--color-text-muted);
}

/* Danger-colored text (e.g. labelClass props passed into child components, where scoped styles can't reach) */
.ui-danger-text {
  color: var(--color-danger);
}

/* Success-colored text (confirmations, verified/new values) */
.ui-success-text {
  color: var(--color-success-strong);
}

/* Warning-colored text (provisional/unknown values) */
.ui-warning-text {
  color: var(--color-warning-strong);
}

/* Plain text styled as a link (mailto/tel/external href, etc.) */
.ui-link {
  color: var(--color-link);
  text-decoration: none;
}

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

/* App brand color for headings / accent text */
.ui-brand-text {
  color: var(--color-app-brand);
}

/* Strikethrough + dimmed for inactive items */
.ui-inactive {
  text-decoration: line-through;
  opacity: 0.5;
}

/* Prevent wrapping (action cells, etc.) */
.ui-nowrap {
  white-space: nowrap;
  flex-wrap: nowrap;
}

/* ─── Flex helpers ───────────────────────────────────────── */

/* Push element to the end of a flex container */
.ui-push-end {
  margin-inline-start: auto;
}

/* ─── Max-width constraints ──────────────────────────────── */

/* Narrow content — 34 rem (forms, upload cards) */
.ui-max-sm {
  max-width: 34rem;
}

/* Medium content — 44 rem (edit pages, wider forms) */
.ui-max-md {
  max-width: 44rem;
}

/* Wide content — 54 rem (dashboard card grids) */
.ui-max-lg {
  max-width: 54rem;
}

/* Deprecated aliases — prefer .ui-max-sm / .ui-max-md */
.ui-narrow {
  max-width: 34rem;
}

.ui-wide {
  max-width: 54rem;
}

/* Flexible field with max-width cap — 20 rem (inline form fields) */
.ui-field-narrow {
  flex: 1;
  max-width: 20rem;
}

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

/* Inline icon — sizes to current font (1 em). Default for icons in text. */
.ui-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Small standalone icon — 1 rem (table actions, badges) */
.ui-icon-sm {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Medium icon — 1.25 rem (header logo) */
.ui-icon-md {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Large icon — 1.5 rem (dashboard cards) */
.ui-icon-lg {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Extra-large icon — 2 rem (empty states) */
.ui-icon-xl {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  flex-shrink: 0;
}

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

/* Circular user avatar <img>, e.g. <img class="ui-avatar" src="{avatar_url}">.
   The backend SVG already renders its own background color + initials, so
   this class only controls box sizing/shape — default matches header/nav
   usage (2rem). Pair with .ui-avatar-sm / .ui-avatar-lg for other contexts. */
.ui-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  display: inline-block;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Small avatar — 1.5 rem (tables, compact lists) */
.ui-avatar-sm {
  width: 1.5rem;
  height: 1.5rem;
}

/* Large avatar — 3 rem (profile pages, cards) */
.ui-avatar-lg {
  width: 3rem;
  height: 3rem;
}

/* ─── Overlay ────────────────────────────────────────────── */

/* Full-screen overlay (loading, modals) */
.ui-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  backdrop-filter: blur(4px);
}

.ui-overlay[data-visible] {
  display: flex;
}

/* ─── Animations ─────────────────────────────────────────── */

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

.animate-spin {
  animation: ui-spin 1s linear infinite;
}

@keyframes ui-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.animate-fade-in {
  animation: ui-fade-in 0.2s ease-out;
}

/* ─── Detail toggle transforms ───────────────────────────── */

details[open] .rotate-on-open {
  transform: rotate(180deg);
}

details[open] .rotate-90-on-open {
  transform: rotate(90deg);
}

/* ─── Fill colours — chart palette ───────────────────────── */

.ui-fill-chart-1 {
  background: var(--chart-1);
}

.ui-fill-chart-2 {
  background: var(--chart-2);
}

.ui-fill-chart-3 {
  background: var(--chart-3);
}

.ui-fill-chart-4 {
  background: var(--chart-4);
}

.ui-fill-chart-5 {
  background: var(--chart-5);
}

.ui-fill-chart-6 {
  background: var(--chart-6);
}

.ui-fill-chart-7 {
  background: var(--chart-7);
}

.ui-fill-chart-8 {
  background: var(--chart-8);
}

.ui-fill-primary {
  background: var(--_primary-500);
}

/* ─── Fill colours — Likert 5-point scale ────────────────── */

.ui-fill-likert-1 {
  background: color-mix(in srgb, var(--_danger-700) 80%, transparent);
}

.ui-fill-likert-2 {
  background: color-mix(in srgb, var(--_warning-300) 80%, transparent);
}

.ui-fill-likert-3 {
  background: color-mix(in srgb, var(--_neutral-300) 80%, transparent);
}

.ui-fill-likert-4 {
  background: color-mix(in srgb, var(--chart-5) 70%, transparent);
}

.ui-fill-likert-5 {
  background: color-mix(in srgb, var(--_primary-400) 80%, transparent);
}

/* ─── Fill colours — Rank (1 = strongest → 10 = weakest) ── */

.ui-fill-rank-1 {
  background: var(--_primary-600);
}

.ui-fill-rank-2 {
  background: var(--_primary-400);
}

.ui-fill-rank-3 {
  background: color-mix(in srgb, var(--chart-5) 80%, transparent);
}

.ui-fill-rank-4 {
  background: color-mix(in srgb, var(--chart-4) 80%, transparent);
}

.ui-fill-rank-5 {
  background: color-mix(in srgb, var(--chart-6) 70%, transparent);
}

.ui-fill-rank-6 {
  background: color-mix(in srgb, var(--chart-7) 70%, transparent);
}

.ui-fill-rank-7 {
  background: var(--_neutral-300);
}

.ui-fill-rank-8 {
  background: var(--_neutral-200);
}

.ui-fill-rank-9 {
  background: var(--_neutral-200);
}

.ui-fill-rank-10 {
  background: var(--_neutral-200);
}

/* ─── Fill colours — status breakdown (segmented bars) ──── */

.ui-fill-status-idea {
  background: var(--_neutral-400);
}

.ui-fill-status-validating {
  background: var(--_warning-600);
}

.ui-fill-status-progress {
  background: var(--_info-600);
}

.ui-fill-status-done {
  background: var(--_success-600);
}

.ui-fill-status-blocked {
  background: var(--_danger-600);
}

.ui-fill-status-canceled {
  background: var(--chart-5);
}