/* ============================================================
   Focus Assured Design System - component layer
   Requires ds/tokens.css loaded first.
   Class prefix: .fa-*
   Fonts: load Outfit (400/500/600) in the host app, e.g. from
   Google Fonts. The DS does not bundle font files.

   Component structure ported from the design system built for the
   Grayce Benefit Protection Platform (reuse authorised by Jonny
   Tooze, 30 Jul 2026). Shape, spacing and behaviour are unchanged;
   only the token layer is re-themed to the FA brand.
   ============================================================ */

/* ---------- base ---------- */

.fa-root, .fa-root * , .fa-root *::before, .fa-root *::after { box-sizing: border-box; }

.fa-root {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
}

/* ---------- typography ---------- */

.fa-display,
.fa-h1, .fa-h2, .fa-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: hsl(var(--foreground));
  margin: 0;
}
.fa-display { font-size: 3rem; line-height: 1.1; }
.fa-h1 { font-size: 2rem; line-height: 1.2; }
.fa-h2 { font-size: 1.5rem; line-height: 1.3; }
.fa-h3 { font-size: 1.125rem; line-height: 1.4; }

.fa-body { font-size: 1rem; line-height: 1.5rem; margin: 0; }
.fa-body-sm { font-size: 0.875rem; line-height: 1.25rem; margin: 0; }
.fa-caption { font-size: 0.75rem; line-height: 1.125rem; color: hsl(var(--muted-foreground)); margin: 0; }
.fa-muted { color: hsl(var(--muted-foreground)); }

.fa-eyebrow {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground) / 0.85);
}

.fa-link {
  color: hsl(var(--primary));
  text-decoration: none;
}
.fa-link:hover { text-decoration: underline; }

.fa-kbd {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  border: 1px solid hsl(var(--border));
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: hsl(var(--card));
}

.fa-code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 0.125rem 0.375rem;
  background: hsl(var(--mist));
  border-radius: var(--radius-sm);
}

/* ---------- page header ---------- */

.fa-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.fa-page-header .fa-page-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.fa-page-header .fa-page-sub { margin: 0.25rem 0 0; font-size: 0.9375rem; color: hsl(var(--muted-foreground)); }
.fa-page-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ---------- buttons ---------- */

.fa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-button);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: hsl(var(--foreground));
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.fa-btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.fa-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.fa-btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.fa-btn-primary:hover:not(:disabled) { background: hsl(var(--primary) / 0.9); box-shadow: var(--shadow-sm); }

.fa-btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.fa-btn-secondary:hover:not(:disabled) { background: hsl(var(--primary) / 0.15); }

.fa-btn-outline { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.fa-btn-outline:hover:not(:disabled) { background: hsl(var(--primary) / 0.06); }

.fa-btn-ghost { color: hsl(var(--foreground)); }
.fa-btn-ghost:hover:not(:disabled) { background: hsl(var(--accent)); }

.fa-btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.fa-btn-destructive:hover:not(:disabled) { background: hsl(var(--destructive) / 0.9); }

/* Rust/amber review CTA seen on dashboard alert banner */
.fa-btn-review { background: hsl(12 52% 42%); color: #fff; }
.fa-btn-review:hover:not(:disabled) { background: hsl(12 52% 36%); }

/* Marketing pill (FA corporate layer) */
.fa-btn-pill { border-radius: var(--radius-full); }
.fa-btn-salmon { background: hsl(var(--brand-salmon)); color: hsl(var(--brand-salmon-foreground)); }
.fa-btn-salmon:hover:not(:disabled) { background: hsl(var(--brand-salmon) / 0.88); }
.fa-btn-brand-forest { background: hsl(var(--brand-forest)); color: #fff; }
.fa-btn-brand-forest:hover:not(:disabled) { background: hsl(var(--brand-forest) / 0.88); }

.fa-btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; }
.fa-btn-lg { height: 3rem; padding: 0 1.5rem; font-size: 0.9375rem; }
.fa-btn-icon { width: 2.5rem; padding: 0; }
.fa-btn-icon.fa-btn-sm { width: 2rem; }

.fa-btn .fa-spinner { width: 1em; height: 1em; border-width: 2px; }

/* button group */
.fa-btn-group { display: inline-flex; }
.fa-btn-group .fa-btn { border-radius: 0; border: 1px solid hsl(var(--border)); margin-left: -1px; }
.fa-btn-group .fa-btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.fa-btn-group .fa-btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* ---------- badges & status ---------- */

.fa-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  white-space: nowrap;
}
.fa-badge-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.fa-badge-outline { background: transparent; border: 1px solid hsl(var(--border)); }
.fa-badge-success { background: hsl(var(--success-tint)); color: hsl(var(--success)); }
.fa-badge-warning { background: hsl(var(--warning-tint)); color: hsl(var(--warning)); }
.fa-badge-info { background: hsl(var(--info-tint)); color: hsl(var(--info)); }
.fa-badge-destructive { background: hsl(var(--destructive-tint)); color: hsl(var(--destructive)); }
.fa-badge-critical { background: hsl(var(--brand-salmon-tint)); color: hsl(var(--brand-salmon)); }
.fa-badge-open { background: hsl(var(--brand-salmon) / 0.12); color: hsl(var(--brand-salmon)); }
.fa-badge-preview { background: hsl(var(--warning-tint)); color: hsl(35 80% 34%); font-weight: 500; }
.fa-badge-demo { background: hsl(var(--brand-amber) / 0.18); color: hsl(30 70% 35%); text-transform: uppercase; font-size: 0.625rem; letter-spacing: var(--tracking-eyebrow); }
.fa-badge-solid-salmon { background: hsl(var(--brand-salmon)); color: hsl(var(--brand-salmon-foreground)); }

/* count badge (sidebar interventions "18") */
.fa-badge-count {
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.375rem;
  justify-content: center;
  background: hsl(var(--brand-salmon));
  color: hsl(var(--brand-salmon-foreground));
  font-size: 0.6875rem;
}

/* risk pills used in tables */
.fa-pill-low { background: hsl(var(--success-tint)); color: hsl(var(--success)); }
.fa-pill-medium { background: hsl(var(--warning-tint)); color: hsl(var(--warning)); }
.fa-pill-high { background: hsl(var(--warning-tint)); color: hsl(25 80% 40%); }
.fa-pill-critical { background: hsl(var(--destructive-tint)); color: hsl(var(--destructive)); }

.fa-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  vertical-align: middle;
}
.fa-dot-success { background: hsl(var(--success)); }
.fa-dot-warning { background: hsl(var(--risk-medium)); }
.fa-dot-destructive { background: hsl(var(--risk-high)); }
.fa-dot-info { background: hsl(var(--influence-mid)); }
.fa-dot-neutral { background: hsl(var(--muted-foreground) / 0.5); }

/* ---------- avatar ---------- */

.fa-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  font-size: 0.875rem;
  overflow: hidden;
  flex-shrink: 0;
}
.fa-avatar-round { border-radius: var(--radius-full); }
.fa-avatar-sm { width: 1.75rem; height: 1.75rem; font-size: 0.75rem; }
.fa-avatar-lg { width: 3rem; height: 3rem; font-size: 1.125rem; }
.fa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fa-avatar-group { display: inline-flex; }
.fa-avatar-group .fa-avatar { border: 2px solid hsl(var(--background)); margin-left: -0.5rem; }
.fa-avatar-group .fa-avatar:first-child { margin-left: 0; }

/* ---------- cards ---------- */

.fa-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: hsl(var(--card-foreground));
}
.fa-card-header { padding: 1.25rem 1.25rem 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.fa-card-title { font-size: 0.9375rem; font-weight: 600; margin: 0; }
.fa-card-title-serif { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: var(--tracking-tight); }
.fa-card-description { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin: 0.25rem 0 0; }
.fa-card-content { padding: 1.25rem; }
.fa-card-header + .fa-card-content { padding-top: 0.75rem; }
.fa-card-footer { padding: 0 1.25rem 1.25rem; display: flex; align-items: center; gap: 0.5rem; }

/* stat / KPI card */
.fa-stat { position: relative; }
.fa-stat .fa-stat-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.fa-stat .fa-stat-label-plain { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); text-transform: none; letter-spacing: 0; }
.fa-stat .fa-stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin-top: 0.375rem; font-variant-numeric: tabular-nums; }
.fa-stat .fa-stat-value-serif { font-family: var(--font-display); font-weight: 600; }
.fa-stat .fa-stat-meta { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.375rem; }
.fa-stat .fa-stat-delta-up { color: hsl(var(--success)); font-weight: 600; }
.fa-stat .fa-stat-delta-down { color: hsl(var(--destructive)); font-weight: 600; }

/* icon chip in stat cards */
.fa-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: hsl(var(--mist));
  color: hsl(var(--primary));
  flex-shrink: 0;
}
.fa-icon-chip-outline { background: hsl(var(--card)); border: 1px solid currentColor; }
.fa-icon-chip-salmon { color: hsl(var(--brand-salmon)); background: hsl(var(--brand-salmon-tint)); }
.fa-icon-chip-info { color: hsl(var(--info)); background: hsl(var(--info-tint)); }
.fa-icon-chip-warning { color: hsl(35 80% 40%); background: hsl(var(--warning-tint)); }
.fa-icon-chip-success { color: hsl(var(--success)); background: hsl(var(--success-tint)); }

/* preview card (amber dashed, seen on Benefits) */
.fa-card-preview {
  border: 1px dashed hsl(var(--brand-amber) / 0.6);
  background: hsl(45 100% 51% / 0.04);
  box-shadow: none;
}

/* doorway-style card with coloured top bar */
.fa-card-topbar { border-top: 4px solid hsl(var(--primary)); border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.fa-card-topbar-salmon { border-top-color: hsl(var(--brand-salmon)); }
.fa-card-topbar-forest { border-top-color: hsl(var(--brand-forest)); }
.fa-card-topbar-sage { border-top-color: hsl(var(--sage)); }

/* ---------- alerts ---------- */

.fa-alert {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background: hsl(var(--card));
  font-size: 0.875rem;
}
.fa-alert-title { font-weight: 600; margin: 0 0 0.125rem; }
.fa-alert-body { margin: 0; color: hsl(var(--muted-foreground)); }
.fa-alert-icon { flex-shrink: 0; margin-top: 0.125rem; }

.fa-alert-info { border-color: hsl(var(--info) / 0.35); background: hsl(var(--info-tint)); }
.fa-alert-info .fa-alert-title, .fa-alert-info .fa-alert-icon { color: hsl(var(--info)); }
.fa-alert-success { border-color: hsl(var(--success) / 0.35); background: hsl(var(--success-tint)); }
.fa-alert-success .fa-alert-title, .fa-alert-success .fa-alert-icon { color: hsl(var(--success)); }
.fa-alert-warning { border-color: hsl(var(--brand-amber) / 0.45); background: hsl(var(--warning-tint)); }
.fa-alert-warning .fa-alert-title, .fa-alert-warning .fa-alert-icon { color: hsl(35 80% 34%); }
.fa-alert-destructive { border-color: hsl(var(--destructive) / 0.35); background: hsl(var(--destructive-tint)); }
.fa-alert-destructive .fa-alert-title, .fa-alert-destructive .fa-alert-icon { color: hsl(var(--destructive)); }

/* AI-generated note (amber tinted commentary strip, RAID log) */
.fa-ai-note {
  padding: 0.625rem 0.875rem;
  border: 1px solid hsl(var(--brand-amber) / 0.35);
  border-radius: var(--radius-md);
  background: hsl(45 100% 51% / 0.08);
  color: hsl(30 60% 32%);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* readiness banner (dashboard hero alert) */
.fa-banner {
  border: 1px solid hsl(var(--brand-amber) / 0.5);
  border-radius: var(--radius-md);
  background: hsl(45 100% 51% / 0.06);
  padding: 1.25rem 1.5rem;
}
.fa-banner .fa-banner-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: hsl(25 60% 35%);
  margin: 0;
}
.fa-banner .fa-banner-meta { font-size: 0.8125rem; color: hsl(30 55% 40%); margin: 0.5rem 0 0.75rem; }

/* ---------- forms ---------- */

.fa-label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.375rem; }
.fa-help { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin: 0.375rem 0 0; }
.fa-error { font-size: 0.75rem; color: hsl(var(--destructive)); margin: 0.375rem 0 0; }
.fa-field { margin: 0; }

.fa-input, .fa-select, .fa-textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  height: 2.5rem;
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.fa-textarea { height: auto; min-height: 5rem; resize: vertical; padding-top: 0.625rem; }
.fa-input::placeholder, .fa-textarea::placeholder { color: hsl(var(--muted-foreground) / 0.7); }
.fa-input:focus, .fa-select:focus, .fa-textarea:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
}
.fa-input:disabled, .fa-select:disabled, .fa-textarea:disabled { opacity: 0.5; cursor: not-allowed; background: hsl(var(--muted) / 0.4); }
.fa-input[aria-invalid="true"], .fa-field-invalid .fa-input { border-color: hsl(var(--destructive)); }
.fa-field-invalid .fa-input:focus { box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.15); }

.fa-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23506059' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

/* input with leading icon (search) */
.fa-input-icon { position: relative; }
.fa-input-icon > svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(var(--muted-foreground) / 0.8);
  pointer-events: none;
}
.fa-input-icon .fa-input { padding-left: 2.25rem; }

/* checkbox & radio */
.fa-checkbox, .fa-radio {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid hsl(var(--input));
  background: hsl(var(--card));
  cursor: pointer;
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.fa-checkbox { border-radius: 0.25rem; }
.fa-radio { border-radius: var(--radius-full); }
.fa-checkbox:checked, .fa-radio:checked { background: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.fa-checkbox:checked::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fa-radio:checked::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: hsl(var(--primary-foreground)); }
.fa-checkbox:focus-visible, .fa-radio:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.fa-check-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }

/* switch */
.fa-switch {
  appearance: none;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  background: hsl(var(--muted));
  position: relative;
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out);
  flex-shrink: 0;
}
.fa-switch::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 1rem; height: 1rem;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-out);
}
.fa-switch:checked { background: hsl(var(--primary)); }
.fa-switch:checked::before { transform: translateX(1rem); }
.fa-switch:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* slider */
.fa-slider { appearance: none; width: 100%; height: 0.375rem; border-radius: var(--radius-full); background: hsl(var(--muted)); outline: none; }
.fa-slider::-webkit-slider-thumb {
  appearance: none;
  width: 1.125rem; height: 1.125rem;
  border-radius: var(--radius-full);
  background: hsl(var(--card));
  border: 2px solid hsl(var(--primary));
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.fa-slider::-moz-range-thumb {
  width: 1.125rem; height: 1.125rem;
  border-radius: var(--radius-full);
  background: hsl(var(--card));
  border: 2px solid hsl(var(--primary));
  cursor: pointer;
}

/* ---------- table ---------- */

.fa-table-wrap { overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--card)); }
.fa-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.fa-table th {
  text-align: left;
  font-weight: 500;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
  white-space: nowrap;
}
.fa-table td { padding: 0.875rem 1rem; border-bottom: 1px solid hsl(var(--border) / 0.6); vertical-align: middle; }
.fa-table tbody tr:last-child td { border-bottom: none; }
.fa-table tbody tr:hover { background: hsl(var(--accent) / 0.5); }
.fa-table .fa-td-strong { color: hsl(var(--primary)); font-weight: 500; }
.fa-table-right { text-align: right; }

/* sortable header: the whole header is the control */
.fa-th-sort {
  border: 0; background: none; cursor: pointer; padding: 0;
  font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 0.375rem;
}
.fa-th-sort:hover { color: hsl(var(--foreground)); }
.fa-th-sort:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: var(--radius-sm); }
.fa-sort-icon { font-size: 0.6875rem; color: hsl(var(--muted-foreground) / 0.7); }
th[aria-sort] .fa-th-sort { color: hsl(var(--foreground)); font-weight: 600; }
th[aria-sort] .fa-sort-icon { color: hsl(var(--primary)); }
.fa-table-right .fa-th-sort { flex-direction: row-reverse; }

/* pagination footer under tables that exceed one page */
.fa-table-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
  padding: 0.625rem 0.25rem 0;
  flex-wrap: wrap;
}
.fa-table-pagesize {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: hsl(var(--muted-foreground));
  margin-right: auto;
}
.fa-table-pagesize .fa-select { width: auto; height: 2rem; padding: 0.25rem 2rem 0.25rem 0.625rem; font-size: 0.8125rem; }

/* ---------- tabs (pill style, RAID log) ---------- */

.fa-tabs {
  display: inline-flex;
  gap: 0.125rem;
  padding: 0.25rem;
  background: hsl(var(--muted) / 0.7);
  border-radius: var(--radius-md);
}
.fa-tab {
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.fa-tab:hover { color: hsl(var(--foreground)); }
.fa-tab[aria-selected="true"], .fa-tab.fa-active {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.fa-tab .fa-tab-count { color: hsl(var(--muted-foreground)); font-weight: 400; margin-left: 0.25rem; font-size: 0.75rem; }

/* underline tabs (secondary style) */
.fa-tabs-underline { display: flex; gap: 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
.fa-tab-underline {
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.875rem; font-weight: 500;
  color: hsl(var(--muted-foreground));
  padding: 0.625rem 0.125rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.fa-tab-underline[aria-selected="true"], .fa-tab-underline.fa-active {
  color: hsl(var(--primary));
  border-bottom-color: hsl(var(--primary));
  font-weight: 600;
}

/* sort chips (Priority / Status / Date) */
.fa-chip-row { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: hsl(var(--muted) / 0.7); border-radius: var(--radius-md); }
.fa-chip {
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.8125rem; font-weight: 500;
  color: hsl(var(--muted-foreground));
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
}
.fa-chip.fa-active { background: hsl(var(--card)); color: hsl(var(--foreground)); font-weight: 600; box-shadow: var(--shadow-sm); }

/* ---------- navigation ---------- */

.fa-breadcrumb { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); list-style: none; padding: 0; margin: 0; }
.fa-breadcrumb a { color: hsl(var(--muted-foreground)); text-decoration: none; }
.fa-breadcrumb a:hover { color: hsl(var(--foreground)); }
.fa-breadcrumb .fa-breadcrumb-sep { color: hsl(var(--muted-foreground) / 0.5); }
.fa-breadcrumb .fa-breadcrumb-current { color: hsl(var(--foreground)); font-weight: 500; }

.fa-pagination { display: flex; align-items: center; gap: 0.25rem; list-style: none; padding: 0; margin: 0; }
.fa-page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  color: hsl(var(--foreground));
  font-size: 0.875rem; font-weight: 500;
  text-decoration: none; cursor: pointer; background: none;
}
.fa-page-link:hover { background: hsl(var(--accent)); }
.fa-page-link.fa-active { border-color: hsl(var(--border)); background: hsl(var(--card)); font-weight: 600; }

/* ---------- app shell: sidebar + topbar ---------- */

.fa-shell { display: flex; min-height: 100vh; background: hsl(var(--background)); }

.fa-sidebar {
  width: 16rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: hsl(var(--sidebar-background));
  border-right: 1px solid hsl(var(--sidebar-border));
  color: hsl(var(--sidebar-foreground));
}
.fa-sidebar-header { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1rem; }
.fa-sidebar-brand-name { font-weight: 700; font-size: 0.9375rem; line-height: 1.2; }
.fa-sidebar-brand-sub { font-size: 0.75rem; color: hsl(var(--muted-foreground)); line-height: 1.2; }
.fa-sidebar-section { padding: 0.75rem 1rem 0.25rem; }
.fa-sidebar-nav { list-style: none; margin: 0; padding: 0.25rem 0.5rem; }
.fa-sidebar-nav li { margin: 0.125rem 0; }
.fa-nav-item {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  color: hsl(var(--sidebar-foreground));
  font-size: 0.875rem; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.fa-nav-item:hover { background: hsl(var(--sidebar-accent) / 0.6); }
.fa-nav-item.fa-active { background: hsl(var(--sidebar-accent)); color: hsl(var(--primary)); font-weight: 600; }
.fa-nav-item svg { flex-shrink: 0; color: hsl(var(--muted-foreground)); }
.fa-nav-item.fa-active svg { color: hsl(var(--primary)); }
.fa-nav-item .fa-badge-count { margin-left: auto; }
.fa-sidebar-footer { margin-top: auto; padding: 0.75rem 1rem 1rem; border-top: 1px solid hsl(var(--sidebar-border)); }

.fa-topbar {
  height: 3.5rem;
  display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background));
}

/* scrollable middle region of the sidebar (nav lists) */
.fa-sidebar-body { flex: 1; min-height: 0; overflow-y: auto; }

/* ---------- responsive shell ----------
   Modes are set by the app shell as data attributes:
   [data-mode="full"]   desktop, 16rem sidebar
   [data-mode="rail"]   tablet, sidebar collapses to a 4rem icon rail (data-collapsed on the sidebar)
   [data-mode="drawer"] mobile, sidebar becomes an off-canvas drawer opened from a hamburger */

/* app shells are viewport-bound: sidebar nav and main content scroll internally */
.fa-shell[data-mode] { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }

.fa-hamburger {
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  margin-right: auto;
  border: 0; border-radius: var(--radius-md);
  background: none; color: hsl(var(--foreground));
  cursor: pointer;
}
.fa-hamburger:hover { background: hsl(var(--accent)); }
.fa-hamburger:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* icon rail */
.fa-sidebar[data-collapsed="true"] { width: 4rem; }
.fa-sidebar[data-collapsed="true"] .fa-sidebar-header { justify-content: center; padding: 0.875rem 0; }
.fa-sidebar[data-collapsed="true"] .fa-sidebar-brand,
.fa-sidebar[data-collapsed="true"] .fa-demo-slot,
.fa-sidebar[data-collapsed="true"] .fa-sidebar-section,
.fa-sidebar[data-collapsed="true"] .fa-nav-label,
.fa-sidebar[data-collapsed="true"] .fa-badge-count,
.fa-sidebar[data-collapsed="true"] .fa-sidebar-footer > :not(.fa-rail-toggle) { display: none; }
.fa-sidebar[data-collapsed="true"] .fa-nav-item { justify-content: center; padding: 0.5rem; }
.fa-sidebar[data-collapsed="true"] .fa-sidebar-footer { padding: 0.5rem; border-top: 1px solid hsl(var(--sidebar-border)); }

.fa-rail-toggle {
  display: inline-grid; place-items: center;
  width: 100%; height: 2.25rem;
  border: 0; border-radius: var(--radius-md);
  background: none; color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.fa-rail-toggle:hover { background: hsl(var(--sidebar-accent)); color: hsl(var(--foreground)); }
.fa-rail-toggle:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }

/* off-canvas drawer */
.fa-shell[data-mode="drawer"] .fa-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: 18rem; max-width: 85vw;
  transform: translateX(-100%);
  transition: transform var(--duration-slow) var(--ease-default);
  z-index: calc(var(--z-modal) + 1);
  box-shadow: none;
}
.fa-shell[data-mode="drawer"][data-drawer-open="true"] .fa-sidebar {
  transform: translateX(0);
  box-shadow: var(--shadow-lg);
}
.fa-shell-overlay {
  position: fixed; inset: 0;
  background: hsl(var(--overlay) / 0.5);
  z-index: var(--z-modal);
}
.fa-drawer-close {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: var(--radius-md);
  background: none; color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.fa-drawer-close:hover { background: hsl(var(--sidebar-accent)); color: hsl(var(--foreground)); }

/* touch targets */
@media (pointer: coarse) {
  .fa-nav-item, .fa-btn, .fa-input, .fa-select { min-height: 44px; }
  .fa-tab, .fa-chip, .fa-page-link { min-height: 40px; }
}

.fa-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Full-width, left-aligned. The Grayce original capped this at 74rem and
   centred it; the FA admin is dense operational tables and reads better using
   the whole viewport. */
.fa-content { padding: 2rem 3rem; width: 100%; }

/* ---------- progress & meters ---------- */

.fa-progress { height: 0.5rem; border-radius: var(--radius-full); background: hsl(var(--chart-track)); overflow: hidden; }
.fa-progress > div { height: 100%; border-radius: var(--radius-full); background: hsl(var(--primary)); transition: width var(--duration-slow) var(--ease-default); }
.fa-progress-success > div { background: hsl(var(--success)); }
.fa-progress-warning > div { background: hsl(var(--brand-amber)); }
.fa-progress-destructive > div { background: hsl(var(--destructive)); }

.fa-spinner {
  display: inline-block;
  width: 1.25rem; height: 1.25rem;
  border: 2.5px solid hsl(var(--primary) / 0.25);
  border-top-color: hsl(var(--primary));
  border-radius: var(--radius-full);
  animation: fa-spin 0.7s linear infinite;
}
@keyframes fa-spin { to { transform: rotate(360deg); } }

.fa-skeleton {
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, hsl(var(--muted) / 0.6) 25%, hsl(var(--muted)) 50%, hsl(var(--muted) / 0.6) 75%);
  background-size: 200% 100%;
  animation: fa-shimmer 1.4s ease infinite;
}
@keyframes fa-shimmer { to { background-position: -200% 0; } }

/* ---------- overlays ---------- */

.fa-overlay {
  position: fixed; inset: 0;
  background: hsl(var(--overlay) / 0.5);
  z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: 1.5rem;
}
.fa-dialog {
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 28rem;
  padding: 1.5rem;
}
.fa-dialog-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: var(--tracking-tight); margin: 0 0 0.375rem; }
.fa-dialog-body { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin: 0 0 1.25rem; }
.fa-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

.fa-popover {
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 1rem;
  max-width: 18rem;
  font-size: 0.875rem;
}

.fa-menu {
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.25rem;
  min-width: 11rem;
  list-style: none; margin: 0;
}
.fa-menu-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  cursor: pointer;
  color: hsl(var(--popover-foreground));
}
.fa-menu-item:hover { background: hsl(var(--accent)); }
.fa-menu-item.fa-destructive { color: hsl(var(--destructive)); }
.fa-menu-sep { height: 1px; background: hsl(var(--border)); margin: 0.25rem 0; }
.fa-menu-label { padding: 0.375rem 0.625rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: hsl(var(--muted-foreground)); }

.fa-tooltip {
  display: inline-block;
  background: hsl(var(--ink-strong));
  color: hsl(var(--background));
  font-size: 0.75rem;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.dark .fa-tooltip { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }

.fa-toast {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.875rem 1rem;
  max-width: 22rem;
  font-size: 0.875rem;
}

/* ---------- misc ---------- */

.fa-separator { border: 0; height: 1px; background: hsl(var(--border)); margin: 0; }
.fa-separator-vertical { width: 1px; height: auto; align-self: stretch; }

.fa-accordion { border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--card)); }
.fa-accordion details { border-bottom: 1px solid hsl(var(--border)); }
.fa-accordion details:last-child { border-bottom: 0; }
.fa-accordion summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1.25rem;
  font-weight: 500; font-size: 0.875rem;
}
.fa-accordion summary::-webkit-details-marker { display: none; }
.fa-accordion summary::after { content: "▾"; color: hsl(var(--muted-foreground)); transition: transform var(--duration-normal); }
.fa-accordion details[open] summary::after { transform: rotate(180deg); }
.fa-accordion .fa-accordion-body { padding: 0 1.25rem 1rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }

.fa-empty {
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius-md);
  padding: 3rem 1.5rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
}
.fa-empty .fa-empty-title { font-weight: 600; color: hsl(var(--foreground)); margin: 0 0 0.25rem; font-size: 0.9375rem; }

/* chart legend swatches */
.fa-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.fa-legend-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.fa-swatch { width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; display: inline-block; }
.fa-swatch-1 { background: hsl(var(--chart-1)); }
.fa-swatch-2 { background: hsl(var(--chart-2)); }
.fa-swatch-3 { background: hsl(var(--chart-3)); }
.fa-swatch-4 { background: hsl(var(--chart-4)); }
.fa-swatch-5 { background: hsl(var(--chart-5)); }

/* layout utilities used by examples */
.fa-grid { display: grid; gap: 1rem; }
.fa-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fa-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fa-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fa-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fa-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.fa-stack { display: flex; flex-direction: column; gap: 0.75rem; }

@media (max-width: 900px) {
  .fa-grid-3, .fa-grid-4, .fa-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa-content { padding: 1.5rem; }
}
@media (max-width: 600px) {
  .fa-grid-2, .fa-grid-3, .fa-grid-4, .fa-grid-5 { grid-template-columns: 1fr; }
  .fa-content { padding: 1rem; }
  .fa-page-header { flex-direction: column; }
}