@charset "UTF-8";

/* =============================================================================
 * Salus, application stylesheet
 * Clinical-negligence case triage.
 *
 * Author: Conor Armstrong <conorarmstrong@gmail.com>
 *
 * Bootstrap 5.3 is loaded from a CDN BEFORE this file. This file is the theme
 * layer and the component layer on top of it. It does not restate Bootstrap. It
 * overrides Bootstrap's CSS custom properties and adds only the components
 * Bootstrap has no answer for.
 *
 * -----------------------------------------------------------------------------
 * How the theming works, because getting this wrong is expensive
 * -----------------------------------------------------------------------------
 * Themes switch on Bootstrap's own attribute: <html data-bs-theme="light|dark">.
 *
 * The Salus token set is declared once on :root. Only the tokens whose VALUE
 * changes are redeclared under [data-bs-theme="dark"]. The Bootstrap --bs-*
 * variables are then mapped onto Salus tokens so every Bootstrap component
 * inherits the theme without a per-component override.
 *
 * Selector specificity matters here. Bootstrap 5.3 declares its own light theme
 * on `:root, [data-bs-theme=light]` and its dark theme on `[data-bs-theme=dark]`,
 * both of which carry attribute specificity. A bare `:root` block in this file
 * would lose to Bootstrap's dark block. So the Bootstrap mapping below is
 * written on `:root, [data-bs-theme="light"]` and on `[data-bs-theme="dark"]`,
 * matching Bootstrap's specificity and winning on source order.
 *
 * -----------------------------------------------------------------------------
 * Structural contract expected by the templates
 * -----------------------------------------------------------------------------
 *   .salus-shell                  page wrapper, reserves the sidebar gutter
 *     .salus-sidebar              fixed rail, position: fixed, any DOM depth
 *     .salus-topbar               sticky, 56px, breadcrumb left, actions right
 *     .salus-content              centred, max 1280px, 24px gutters
 *
 * State classes, following the .salus-sidebar-link.is-active convention:
 *   .salus-shell.is-collapsed     sidebar reduced to the 64px icon rail
 *   .salus-sidebar.is-open        off-canvas drawer opened below 768px
 *   .salus-drawer.is-open         case chat panel visible
 *   .salus-drawer.is-expanded     case chat panel at full screen
 *   .salus-dropzone.is-dragover   file drag hovering the zone
 *   .salus-thumb.is-sampled       DICOM instance sampled by the vision pass
 *   .salus-processing-stage.is-done | .is-active | .is-pending
 *
 * -----------------------------------------------------------------------------
 * Accessibility, non-negotiable, WCAG 2.2 AA
 * -----------------------------------------------------------------------------
 * Every text pair in both themes clears 4.5:1. The focus ring uses --salus-ring
 * and is never removed, only restyled. No status is carried by colour alone:
 * the merit score pill states its band in words, badges carry their label, and
 * the processing list marks its stages with a glyph as well as a colour. Motion
 * is suppressed under prefers-reduced-motion. Wide blocks scroll inside their
 * own container so the page body never scrolls sideways.
 *
 * -----------------------------------------------------------------------------
 * Table of contents
 * -----------------------------------------------------------------------------
 *  01  Design tokens, light
 *  02  Design tokens, dark
 *  03  Bootstrap variable mapping
 *  04  Base elements and typography
 *  05  Focus, motion and overflow safety
 *  06  Bootstrap component corrections
 *  07  Shell, sidebar, topbar, content
 *  08  Cards and stat cards
 *  09  Progress, badges, pills, score pill
 *  10  Tables, pagination, empty state, skeleton
 *  11  Case facts strip and tabs
 *  12  Citations
 *  13  Timeline
 *  14  Pillar cards and gap items
 *  15  Documents, pages and thumbnails
 *  16  Lab values and sparklines
 *  17  Drawer and chat
 *  18  Dropzone
 *  19  Permission matrix
 *  20  Processing stages
 *  21  Toasts and problem documents
 *  22  The printed report
 *  23  Responsive behaviour
 *  24  Print
 * ========================================================================== */


/* =============================================================================
 * 01  DESIGN TOKENS, LIGHT
 * The palette was captured from the reference product's computed custom
 * properties and kept, because it is well judged: a sober navy and mint that
 * reads as legal rather than medical, with a gold accent from the brand mark.
 * Two values are deliberately changed. The reference destructive #fb2c36 gives
 * 3.9:1 on white and fails AA for body text, so Salus uses #c81e2a at 5.7:1.
 * The semantic status pairs were implicit in the reference and are declared
 * here in full, in both themes.
 * ========================================================================== */

:root {
  /* --- Surfaces and text ------------------------------------------------- */
  --salus-background: #fbfcfd;
  --salus-foreground: #09131a;
  --salus-surface: #ffffff;
  --salus-surface-muted: #f1f4f6;
  --salus-muted-foreground: #3e4952;
  /* The edge shadow that tells a scrollable strip it has more to show. */
  --salus-scroll-shadow: rgba(9, 19, 26, 0.14);

  --salus-primary: #0b3e61;
  --salus-primary-foreground: #ffffff;
  --salus-primary-hover: #082f4a;
  --salus-secondary: #d3efe8;
  --salus-secondary-foreground: #00322a;
  --salus-accent: #e6f0f8;
  --salus-accent-foreground: #152b3b;
  --salus-destructive: #c81e2a;
  --salus-destructive-foreground: #ffffff;

  --salus-border: #e4e7e9;
  --salus-input: #dee2e4;
  --salus-ring: #0b3e61;

  /* Component-local RGB triplets, for the tinted fills that need alpha. */
  --salus-primary-rgb: 11, 62, 97;
  --salus-foreground-rgb: 9, 19, 26;
  --salus-background-rgb: 251, 252, 253;
  --salus-surface-rgb: 255, 255, 255;

  /* --- Semantic status, fill and text, declared as pairs ----------------- */
  --salus-success-bg: #dcfce7;
  --salus-success-fg: #166534;
  --salus-success-border: #bbf7d0;
  --salus-success-solid: #157347;

  --salus-warning-bg: #fef3c7;
  --salus-warning-fg: #92400e;
  --salus-warning-border: #fde68a;
  --salus-warning-solid: #b45309;

  --salus-danger-bg: #fee2e2;
  --salus-danger-fg: #991b1b;
  --salus-danger-border: #fecaca;
  --salus-danger-solid: #c81e2a;

  --salus-info-bg: #dbeafe;
  --salus-info-fg: #1e40af;
  --salus-info-border: #bfdbfe;
  --salus-info-solid: #005993;

  --salus-neutral-bg: #f1f4f6;
  --salus-neutral-fg: #3e4952;
  --salus-neutral-border: #e4e7e9;

  /* --- Chart palette ------------------------------------------------------ */
  --salus-chart-1: #005993;
  --salus-chart-2: #009783;
  --salus-chart-3: #7167a8;
  --salus-chart-4: #4c9ea2;
  --salus-chart-5: #956991;

  /* --- The four pillars of negligence ------------------------------------ */
  /* `accent` paints rules and icons. `ink` paints text and must clear 4.5:1. */
  --salus-duty-accent: #005993;
  --salus-duty-ink: #005993;
  --salus-duty-bg: #e6f0f8;
  --salus-breach-accent: #c81e2a;
  --salus-breach-ink: #991b1b;
  --salus-breach-bg: #fee2e2;
  --salus-causation-accent: #f59e0b;
  --salus-causation-ink: #92400e;
  --salus-causation-bg: #fef3c7;
  --salus-damages-accent: #7167a8;
  --salus-damages-ink: #5b5192;
  --salus-damages-bg: #eeecf6;

  /* --- The sidebar rail --------------------------------------------------- */
  /* A dark navy rail against the page in BOTH themes. It carries its own
     palette, so it does not follow the page tokens. */
  --salus-sidebar-bg: #0f1a24;
  --salus-sidebar-fg: #a8afb4;
  --salus-sidebar-primary: #e3ae28;
  --salus-sidebar-primary-fg: #0a1723;
  --salus-sidebar-accent: #17232d;
  --salus-sidebar-accent-fg: #c8cfd4;
  --salus-sidebar-border: #212a32;
  --salus-sidebar-ring: #e3ae28;

  /* --- The printed report -------------------------------------------------- */
  --salus-report-bg: #ffffff;
  --salus-report-fg: #14181c;
  --salus-report-eyebrow: #8a6a12;
  --salus-report-rule: #c8971f;
  --salus-report-border: #e2e2e0;

  /* --- Typography ---------------------------------------------------------- */
  /* Plus Jakarta Sans and DM Sans are pulled from Google Fonts by the layout
     template. Every family carries a real fallback stack so a blocked or slow
     font request degrades to a system face rather than to Times. */
  --salus-font-display: "Plus Jakarta Sans", -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --salus-font-body: "DM Sans", -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --salus-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* The report deliberately reads as a legal document rather than as app
     chrome, so it uses a serif display face. No serif webfont is loaded, so the
     stack is entirely system faces and renders identically offline and on
     paper. */
  --salus-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", Times, serif;

  --salus-text-xs: 0.75rem;
  --salus-text-sm: 0.875rem;
  --salus-text-base: 1rem;
  --salus-text-lg: 1.125rem;
  --salus-text-xl: 1.25rem;
  --salus-text-2xl: 1.5rem;
  --salus-text-3xl: 1.875rem;
  --salus-text-4xl: 2.25rem;

  --salus-leading-xs: 1.3333;
  --salus-leading-sm: 1.4286;
  --salus-leading-base: 1.5;
  --salus-leading-lg: 1.5556;

  /* --- Geometry, on a 4px base unit ---------------------------------------- */
  --salus-space-1: 4px;
  --salus-space-2: 8px;
  --salus-space-3: 12px;
  --salus-space-4: 16px;
  --salus-space-5: 20px;
  --salus-space-6: 24px;
  --salus-space-8: 32px;
  --salus-space-10: 40px;
  --salus-space-12: 48px;

  --salus-radius-sm: 4px;   /* pills, badges */
  --salus-radius-md: 6px;   /* inputs, buttons, nav items */
  --salus-radius-lg: 8px;   /* cards */
  --salus-radius-xl: 12px;  /* dialogs, large cards */

  --salus-card-padding: 24px;
  --salus-section-gap: 24px;
  --salus-cell-padding-y: 12px;
  --salus-cell-padding-x: 16px;

  /* Cards carry a 1px border and no shadow. Only things that float get one. */
  --salus-shadow-overlay: 0 10px 30px -10px rgb(9 19 26 / 0.25);
  --salus-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.06);

  /* --- Layout -------------------------------------------------------------- */
  --salus-sidebar-width: 256px;
  --salus-sidebar-rail: 64px;
  --salus-topbar-height: 56px;
  --salus-content-max: 1280px;
  --salus-gutter: 24px;
  --salus-drawer-width: 400px;

  /* --- Stacking order ------------------------------------------------------ */
  /* Chosen to sit around Bootstrap's own scale: offcanvas 1045, modal 1055,
     tooltip 1080. The rail must clear the topbar, the drawer must clear both,
     and toasts must clear everything. */
  --salus-z-topbar: 1020;
  --salus-z-sidebar: 1035;
  --salus-z-backdrop: 1040;
  --salus-z-drawer: 1045;
  --salus-z-popover: 1070;
  --salus-z-toast: 1090;

  /* --- Motion -------------------------------------------------------------- */
  --salus-transition-fast: 120ms ease;
  --salus-transition: 180ms ease;

  color-scheme: light;
}


/* =============================================================================
 * 02  DESIGN TOKENS, DARK
 * Only the tokens whose value changes are redeclared. Everything geometric,
 * typographic and structural is inherited from :root.
 * ========================================================================== */

[data-bs-theme="dark"] {
  --salus-background: #0b1219;
  --salus-foreground: #e7edf2;
  --salus-surface: #111c26;
  --salus-surface-muted: #17232d;
  --salus-muted-foreground: #9aa7b2;
  --salus-scroll-shadow: rgba(0, 0, 0, 0.45);

  --salus-primary: #5aa9dc;
  --salus-primary-foreground: #07131d;
  --salus-primary-hover: #7cc0ec;
  --salus-secondary: #123c35;
  --salus-secondary-foreground: #a9e6d8;
  --salus-accent: #17232d;
  --salus-accent-foreground: #d7e3ec;
  --salus-destructive: #ff6b73;
  --salus-destructive-foreground: #2b0d0f;

  --salus-border: #22303c;
  --salus-input: #2a3946;
  --salus-ring: #5aa9dc;

  --salus-primary-rgb: 90, 169, 220;
  --salus-foreground-rgb: 231, 237, 242;
  --salus-background-rgb: 11, 18, 25;
  --salus-surface-rgb: 17, 28, 38;

  /* Tinted-dark equivalents of the status pairs. Each fill and text pair was
     measured: success 11.1:1, warning 9.6:1, danger 8.3:1, info 8.7:1,
     neutral 6.5:1. */
  --salus-success-bg: #123524;
  --salus-success-fg: #86efac;
  --salus-success-border: #1c4a33;
  --salus-success-solid: #4ade80;

  --salus-warning-bg: #3a2a10;
  --salus-warning-fg: #fcd34d;
  --salus-warning-border: #57401a;
  --salus-warning-solid: #f0b95c;

  --salus-danger-bg: #3d1618;
  --salus-danger-fg: #fca5a5;
  --salus-danger-border: #5a2326;
  --salus-danger-solid: #ff6b73;

  --salus-info-bg: #10243f;
  --salus-info-fg: #93c5fd;
  --salus-info-border: #1b3a63;
  --salus-info-solid: #7cc0ec;

  --salus-neutral-bg: #17232d;
  --salus-neutral-fg: #9aa7b2;
  --salus-neutral-border: #22303c;

  /* Chart hues lifted for legibility on a dark canvas. */
  --salus-chart-1: #4ea3dd;
  --salus-chart-2: #3fc4ae;
  --salus-chart-3: #a79bdf;
  --salus-chart-4: #6fc6ca;
  --salus-chart-5: #c396bd;

  --salus-duty-accent: #5aa9dc;
  --salus-duty-ink: #93c5fd;
  --salus-duty-bg: #10243f;
  --salus-breach-accent: #ff6b73;
  --salus-breach-ink: #fca5a5;
  --salus-breach-bg: #3d1618;
  --salus-causation-accent: #f0b95c;
  --salus-causation-ink: #fcd34d;
  --salus-causation-bg: #3a2a10;
  --salus-damages-accent: #a79bdf;
  --salus-damages-ink: #c3b8ee;
  --salus-damages-bg: #241f3a;

  /* The rail stays a dark navy in dark mode, nudged BELOW the page background
     so the edge between rail and canvas still reads. */
  --salus-sidebar-bg: #070e14;
  --salus-sidebar-border: #1c2731;

  --salus-report-bg: #111c26;
  --salus-report-fg: #e7edf2;
  --salus-report-eyebrow: #d8ac3f;
  --salus-report-rule: #c8971f;
  --salus-report-border: #22303c;

  --salus-shadow-overlay: 0 10px 30px -10px rgb(0 0 0 / 0.65);
  --salus-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.35);

  color-scheme: dark;
}


/* =============================================================================
 * 03  BOOTSTRAP VARIABLE MAPPING
 * One mapping, applied to every Bootstrap component. Nothing below this point
 * needs to restyle a Bootstrap button, table or form control by hand.
 * The selector list matches Bootstrap's own specificity, see the note at the
 * top of the file.
 * ========================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: var(--salus-font-body);
  --bs-body-font-size: var(--salus-text-sm);
  --bs-body-font-weight: 400;
  --bs-body-line-height: var(--salus-leading-base);

  --bs-body-bg: var(--salus-background);
  --bs-body-bg-rgb: var(--salus-background-rgb);
  --bs-body-color: var(--salus-foreground);
  --bs-body-color-rgb: var(--salus-foreground-rgb);

  --bs-emphasis-color: var(--salus-foreground);
  --bs-heading-color: var(--salus-foreground);

  --bs-secondary-color: var(--salus-muted-foreground);
  --bs-secondary-bg: var(--salus-surface-muted);
  --bs-tertiary-color: var(--salus-muted-foreground);
  --bs-tertiary-bg: var(--salus-surface-muted);

  --bs-border-color: var(--salus-border);
  --bs-border-color-translucent: var(--salus-border);
  --bs-border-radius: var(--salus-radius-lg);
  --bs-border-radius-sm: var(--salus-radius-sm);
  --bs-border-radius-lg: var(--salus-radius-lg);
  --bs-border-radius-xl: var(--salus-radius-xl);

  --bs-link-color: var(--salus-primary);
  --bs-link-color-rgb: var(--salus-primary-rgb);
  --bs-link-hover-color: var(--salus-primary-hover);
  --bs-link-hover-color-rgb: var(--salus-primary-rgb);

  --bs-code-color: var(--salus-primary);
  --bs-highlight-bg: var(--salus-warning-bg);
  --bs-highlight-color: var(--salus-warning-fg);

  --bs-focus-ring-color: rgba(var(--salus-primary-rgb), 0.35);
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-opacity: 1;

  --bs-font-monospace: var(--salus-font-mono);

  /* Theme colour tokens. These drive .text-*, .bg-*, .border-* utilities and
     the subtle variants Bootstrap 5.3 added. */
  --bs-primary: var(--salus-primary);
  --bs-primary-rgb: var(--salus-primary-rgb);
  --bs-primary-text-emphasis: var(--salus-primary);
  --bs-primary-bg-subtle: var(--salus-accent);
  --bs-primary-border-subtle: var(--salus-border);

  --bs-secondary: var(--salus-secondary-foreground);
  --bs-secondary-text-emphasis: var(--salus-secondary-foreground);
  --bs-secondary-bg-subtle: var(--salus-secondary);
  --bs-secondary-border-subtle: var(--salus-secondary);

  --bs-success: var(--salus-success-solid);
  --bs-success-text-emphasis: var(--salus-success-fg);
  --bs-success-bg-subtle: var(--salus-success-bg);
  --bs-success-border-subtle: var(--salus-success-border);

  --bs-warning: var(--salus-warning-solid);
  --bs-warning-text-emphasis: var(--salus-warning-fg);
  --bs-warning-bg-subtle: var(--salus-warning-bg);
  --bs-warning-border-subtle: var(--salus-warning-border);

  --bs-danger: var(--salus-destructive);
  --bs-danger-text-emphasis: var(--salus-danger-fg);
  --bs-danger-bg-subtle: var(--salus-danger-bg);
  --bs-danger-border-subtle: var(--salus-danger-border);

  --bs-info: var(--salus-info-solid);
  --bs-info-text-emphasis: var(--salus-info-fg);
  --bs-info-bg-subtle: var(--salus-info-bg);
  --bs-info-border-subtle: var(--salus-info-border);

  --bs-light: var(--salus-surface-muted);
  --bs-light-text-emphasis: var(--salus-muted-foreground);
  --bs-light-bg-subtle: var(--salus-surface-muted);
  --bs-light-border-subtle: var(--salus-border);

  --bs-dark: var(--salus-foreground);
  --bs-dark-text-emphasis: var(--salus-foreground);
  --bs-dark-bg-subtle: var(--salus-surface-muted);
  --bs-dark-border-subtle: var(--salus-border);
}


/* =============================================================================
 * 04  BASE ELEMENTS AND TYPOGRAPHY
 * ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--salus-background);
  color: var(--salus-foreground);
  font-family: var(--salus-font-body);
  font-size: var(--salus-text-sm);
  line-height: var(--salus-leading-base);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--salus-font-display);
  font-weight: 700;
  color: var(--salus-foreground);
  letter-spacing: -0.01em;
}

h1, .h1 { font-size: var(--salus-text-3xl); line-height: 1.2; }
h2, .h2 { font-size: var(--salus-text-2xl); line-height: 1.25; }
h3, .h3 { font-size: var(--salus-text-xl);  line-height: 1.3; font-weight: 600; }
h4, .h4 { font-size: var(--salus-text-lg);  line-height: var(--salus-leading-lg); font-weight: 600; }
h5, .h5 { font-size: var(--salus-text-base); line-height: var(--salus-leading-base); font-weight: 600; }
h6, .h6 { font-size: var(--salus-text-sm);  line-height: var(--salus-leading-sm); font-weight: 600; }

code, kbd, samp, pre,
.salus-mono {
  font-family: var(--salus-font-mono);
  font-size: 0.9375em;
  font-variant-ligatures: none;
}

/* Case references, page numbers, lab values and money. Tabular figures keep
   columns of numbers aligned, which is the whole point of a triage table. */
.salus-mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* The micro-label used by the facts strip, the stat cards, the pillar card
   sections and every definition list in the app. */
.salus-micro-label {
  display: block;
  font-family: var(--salus-font-body);
  font-size: var(--salus-text-xs);
  line-height: var(--salus-leading-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--salus-muted-foreground);
}

.salus-muted {
  color: var(--salus-muted-foreground);
}

hr {
  border-color: var(--salus-border);
  opacity: 1;
}

::selection {
  background-color: var(--salus-accent);
  color: var(--salus-accent-foreground);
}

/* A screen-reader-only utility that becomes visible when focused, for the
   skip link at the top of the shell. */
.salus-visually-hidden,
.salus-skip-link:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.salus-skip-link:focus {
  position: fixed;
  inset-block-start: var(--salus-space-2);
  inset-inline-start: var(--salus-space-2);
  z-index: var(--salus-z-toast);
  padding: var(--salus-space-2) var(--salus-space-4);
  border-radius: var(--salus-radius-md);
  background-color: var(--salus-primary);
  color: var(--salus-primary-foreground);
  font-weight: 600;
  text-decoration: none;
}


/* =============================================================================
 * 05  FOCUS, MOTION AND OVERFLOW SAFETY
 * ========================================================================== */

/* The focus ring is restyled, never removed. :focus-visible keeps it off the
   pointer path and on the keyboard path, where it is needed. */
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--salus-ring);
  outline-offset: 2px;
  border-radius: var(--salus-radius-sm);
}

/* Bootstrap's .btn and .form-control replace the outline with a box-shadow
   ring. Give them the real outline as well so the indicator survives against a
   coloured fill. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--salus-ring);
  outline-offset: 2px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--salus-ring);
  box-shadow: 0 0 0 3px rgba(var(--salus-primary-rgb), 0.18);
}

/* Flex and grid children default to min-width: auto, which is the usual cause
   of a page that scrolls sideways. Reset it on the layout containers. */
.salus-shell,
.salus-content,
.salus-card,
.salus-card-body {
  min-width: 0;
}

/* A generic escape hatch for any block wider than its column. */
.salus-scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

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


/* =============================================================================
 * 06  BOOTSTRAP COMPONENT CORRECTIONS
 * Bootstrap compiles .btn-primary and friends from Sass values, so those fills
 * do not follow --bs-primary at runtime. The component-local custom properties
 * are the supported way to retheme them, so they are set here once.
 * ========================================================================== */

.btn {
  --bs-btn-font-family: var(--salus-font-body);
  --bs-btn-font-size: var(--salus-text-sm);
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--salus-radius-md);
  --bs-btn-padding-y: 0.4375rem;
  --bs-btn-padding-x: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--salus-space-2);
  white-space: nowrap;
}

.btn-sm {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.625rem;
  --bs-btn-font-size: var(--salus-text-xs);
  --bs-btn-border-radius: var(--salus-radius-sm);
}

.btn-lg {
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-font-size: var(--salus-text-base);
}

.btn-primary {
  --bs-btn-bg: var(--salus-primary);
  --bs-btn-border-color: var(--salus-primary);
  --bs-btn-color: var(--salus-primary-foreground);
  --bs-btn-hover-bg: var(--salus-primary-hover);
  --bs-btn-hover-border-color: var(--salus-primary-hover);
  --bs-btn-hover-color: var(--salus-primary-foreground);
  --bs-btn-active-bg: var(--salus-primary-hover);
  --bs-btn-active-border-color: var(--salus-primary-hover);
  --bs-btn-active-color: var(--salus-primary-foreground);
  --bs-btn-disabled-bg: var(--salus-primary);
  --bs-btn-disabled-border-color: var(--salus-primary);
  --bs-btn-disabled-color: var(--salus-primary-foreground);
}

.btn-secondary {
  --bs-btn-bg: var(--salus-surface);
  --bs-btn-border-color: var(--salus-input);
  --bs-btn-color: var(--salus-foreground);
  --bs-btn-hover-bg: var(--salus-accent);
  --bs-btn-hover-border-color: var(--salus-input);
  --bs-btn-hover-color: var(--salus-accent-foreground);
  --bs-btn-active-bg: var(--salus-accent);
  --bs-btn-active-border-color: var(--salus-input);
  --bs-btn-active-color: var(--salus-accent-foreground);
  --bs-btn-disabled-bg: var(--salus-surface);
  --bs-btn-disabled-border-color: var(--salus-border);
  --bs-btn-disabled-color: var(--salus-muted-foreground);
}

.btn-outline-primary {
  --bs-btn-color: var(--salus-primary);
  --bs-btn-border-color: var(--salus-primary);
  --bs-btn-hover-bg: var(--salus-primary);
  --bs-btn-hover-border-color: var(--salus-primary);
  --bs-btn-hover-color: var(--salus-primary-foreground);
  --bs-btn-active-bg: var(--salus-primary-hover);
  --bs-btn-active-border-color: var(--salus-primary-hover);
  --bs-btn-active-color: var(--salus-primary-foreground);
  --bs-btn-disabled-color: var(--salus-muted-foreground);
}

.btn-danger {
  --bs-btn-bg: var(--salus-destructive);
  --bs-btn-border-color: var(--salus-destructive);
  --bs-btn-color: var(--salus-destructive-foreground);
  --bs-btn-hover-bg: color-mix(in srgb, var(--salus-destructive) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--salus-destructive) 85%, black);
  --bs-btn-hover-color: var(--salus-destructive-foreground);
  --bs-btn-active-bg: color-mix(in srgb, var(--salus-destructive) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--salus-destructive) 80%, black);
  --bs-btn-active-color: var(--salus-destructive-foreground);
}

.btn-link {
  --bs-btn-color: var(--salus-primary);
  --bs-btn-hover-color: var(--salus-primary-hover);
  --bs-btn-font-weight: 500;
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

/* A ghost button, for row actions and toolbar controls. Bootstrap has no
   equivalent and the reference product used one everywhere. */
.btn-ghost {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--salus-muted-foreground);
  --bs-btn-hover-bg: var(--salus-surface-muted);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--salus-foreground);
  --bs-btn-active-bg: var(--salus-accent);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-color: var(--salus-accent-foreground);
}

/* A disabled action must say why. The reference product greyed Reprocess and
   Edit for the firm Owner with no explanation at all. A disabled control keeps
   pointer events so its title or tooltip can still be read. */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: auto;
}

.form-control,
.form-select {
  background-color: var(--salus-surface);
  border-color: var(--salus-input);
  color: var(--salus-foreground);
  border-radius: var(--salus-radius-md);
  font-size: var(--salus-text-sm);
}

.form-control {
  padding: 0.4375rem 0.75rem;
}

/* A select is padded on three sides only. Bootstrap reserves the trailing
   2.25rem for the caret it paints as a background image, and a padding
   shorthand here would collapse that gutter and draw the caret over the
   value. */
.form-select {
  padding-block: 0.4375rem;
  padding-inline-start: 0.75rem;
}

.form-control::placeholder {
  color: var(--salus-muted-foreground);
  opacity: 0.85;
}

.form-label {
  font-size: var(--salus-text-sm);
  font-weight: 500;
  color: var(--salus-foreground);
  margin-bottom: var(--salus-space-1);
}

.form-text {
  color: var(--salus-muted-foreground);
  font-size: var(--salus-text-xs);
}

.form-check-input {
  border-color: var(--salus-input);
  background-color: var(--salus-surface);
}

.form-check-input:checked {
  background-color: var(--salus-primary);
  border-color: var(--salus-primary);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--salus-surface);
  --bs-dropdown-border-color: var(--salus-border);
  --bs-dropdown-border-radius: var(--salus-radius-lg);
  --bs-dropdown-link-color: var(--salus-foreground);
  --bs-dropdown-link-hover-bg: var(--salus-accent);
  --bs-dropdown-link-hover-color: var(--salus-accent-foreground);
  --bs-dropdown-link-active-bg: var(--salus-accent);
  --bs-dropdown-link-active-color: var(--salus-accent-foreground);
  --bs-dropdown-font-size: var(--salus-text-sm);
  box-shadow: var(--salus-shadow-overlay);
}

.modal-content {
  background-color: var(--salus-surface);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-xl);
  box-shadow: var(--salus-shadow-overlay);
}

.modal-header,
.modal-footer {
  border-color: var(--salus-border);
}

.tooltip {
  --bs-tooltip-bg: var(--salus-foreground);
  --bs-tooltip-color: var(--salus-background);
  --bs-tooltip-font-size: var(--salus-text-xs);
  --bs-tooltip-border-radius: var(--salus-radius-md);
  --bs-tooltip-opacity: 1;
}

.popover {
  --bs-popover-bg: var(--salus-surface);
  --bs-popover-border-color: var(--salus-border);
  --bs-popover-border-radius: var(--salus-radius-lg);
  --bs-popover-header-bg: var(--salus-surface-muted);
  --bs-popover-body-color: var(--salus-foreground);
  --bs-popover-font-size: var(--salus-text-sm);
  box-shadow: var(--salus-shadow-overlay);
}


/* =============================================================================
 * 07  SHELL, SIDEBAR, TOPBAR, CONTENT
 * The sidebar is fixed, so the shell reserves its width as a start padding.
 * That keeps the layout correct whatever depth the topbar and content sit at,
 * which matters because the templates are assembled from fragments.
 * ========================================================================== */

.salus-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding-inline-start: var(--salus-sidebar-width);
  background-color: var(--salus-background);
  transition: padding-inline-start var(--salus-transition);
}

.salus-shell.is-collapsed {
  padding-inline-start: var(--salus-sidebar-rail);
}

/* --- The rail ------------------------------------------------------------- */

.salus-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--salus-z-sidebar);
  display: flex;
  flex-direction: column;
  width: var(--salus-sidebar-width);
  background-color: var(--salus-sidebar-bg);
  color: var(--salus-sidebar-fg);
  border-inline-end: 1px solid var(--salus-sidebar-border);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  transition: width var(--salus-transition), transform var(--salus-transition);
}

.salus-shell.is-collapsed .salus-sidebar {
  width: var(--salus-sidebar-rail);
}

/* The rail carries its own palette, so focus rings inside it use the gold
   accent rather than the page ring, which would disappear against the navy. */
.salus-sidebar :focus-visible {
  outline-color: var(--salus-sidebar-ring);
}

.salus-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--salus-space-3);
  min-height: var(--salus-topbar-height);
  padding: var(--salus-space-3) var(--salus-space-4);
  border-block-end: 1px solid var(--salus-sidebar-border);
  color: var(--salus-sidebar-accent-fg);
  font-family: var(--salus-font-display);
  font-weight: 600;
  font-size: var(--salus-text-sm);
  text-decoration: none;
}

.salus-sidebar-brand:hover {
  color: #ffffff;
}

.salus-sidebar-brand img,
.salus-sidebar-brand svg {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--salus-radius-md);
}

.salus-sidebar-brand-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salus-sidebar-group {
  padding: var(--salus-space-4) var(--salus-space-3) var(--salus-space-1);
}

.salus-sidebar-group > .salus-sidebar-group-label {
  display: block;
  padding-inline: var(--salus-space-2);
  margin-block-end: var(--salus-space-2);
  font-size: var(--salus-text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--salus-sidebar-fg);
  opacity: 0.75;
}

.salus-sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--salus-space-3);
  padding: var(--salus-space-2) var(--salus-space-3);
  margin-block-end: 2px;
  border-radius: var(--salus-radius-md);
  color: var(--salus-sidebar-fg);
  font-size: var(--salus-text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--salus-transition-fast), color var(--salus-transition-fast);
}

.salus-sidebar-link > svg,
.salus-sidebar-link > .salus-sidebar-link-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.salus-sidebar-link-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.salus-sidebar-link:hover {
  background-color: var(--salus-sidebar-accent);
  color: var(--salus-sidebar-accent-fg);
}

.salus-sidebar-link.is-active {
  background-color: var(--salus-sidebar-accent);
  color: #ffffff;
}

/* The active item is marked by a gold bar as well as by its fill, so the
   current page is not signalled by colour alone. */
.salus-sidebar-link.is-active::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 var(--salus-radius-sm) var(--salus-radius-sm) 0;
  background-color: var(--salus-sidebar-primary);
}

/* A count or badge pushed to the end of a nav row. */
.salus-sidebar-link > .salus-badge {
  margin-inline-start: auto;
}

.salus-sidebar-user {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  gap: var(--salus-space-3);
  padding: var(--salus-space-3);
  margin: var(--salus-space-3);
  border: 1px solid var(--salus-sidebar-border);
  border-radius: var(--salus-radius-lg);
  background-color: var(--salus-sidebar-accent);
  color: var(--salus-sidebar-accent-fg);
  font-size: var(--salus-text-sm);
  text-align: start;
  width: calc(100% - (var(--salus-space-3) * 2));
  text-decoration: none;
}

.salus-sidebar-user:hover {
  color: #ffffff;
  border-color: var(--salus-sidebar-primary);
}

.salus-sidebar-user-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--salus-radius-md);
  background-color: var(--salus-sidebar-bg);
  color: var(--salus-sidebar-primary);
  font-weight: 600;
  text-transform: uppercase;
}

.salus-sidebar-user-detail {
  min-width: 0;
  line-height: var(--salus-leading-sm);
}

.salus-sidebar-user-detail > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salus-sidebar-user-detail > span:last-child {
  font-size: var(--salus-text-xs);
  opacity: 0.8;
}

/* Collapsed rail. Text is removed from the flow, icons centre, and the
   accessible name survives on the control's own aria-label or title. */
.salus-shell.is-collapsed .salus-sidebar-link-text,
.salus-shell.is-collapsed .salus-sidebar-brand-text,
.salus-shell.is-collapsed .salus-sidebar-group-label,
.salus-shell.is-collapsed .salus-sidebar-user-detail {
  display: none;
}

.salus-shell.is-collapsed .salus-sidebar-link,
.salus-shell.is-collapsed .salus-sidebar-brand,
.salus-shell.is-collapsed .salus-sidebar-user {
  justify-content: center;
  padding-inline: var(--salus-space-2);
}

.salus-shell.is-collapsed .salus-sidebar-user {
  width: auto;
}

.salus-shell.is-collapsed .salus-sidebar-group {
  padding-inline: var(--salus-space-2);
}

/* The backdrop only exists below 768px, where the rail becomes a drawer. */
.salus-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--salus-z-backdrop);
  background-color: rgb(9 19 26 / 0.5);
}

/* --- The topbar ----------------------------------------------------------- */

.salus-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--salus-z-topbar);
  display: flex;
  align-items: center;
  gap: var(--salus-space-4);
  min-height: var(--salus-topbar-height);
  padding-inline: var(--salus-gutter);
  background-color: var(--salus-background);
  border-block-end: 1px solid var(--salus-border);
}

.salus-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--salus-space-2);
  margin-inline-start: auto;
}

.salus-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--salus-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--salus-text-sm);
  color: var(--salus-muted-foreground);
}

.salus-breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--salus-space-2);
  min-width: 0;
}

.salus-breadcrumb li + li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-block-start: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

.salus-breadcrumb a {
  color: var(--salus-muted-foreground);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salus-breadcrumb a:hover {
  color: var(--salus-foreground);
  text-decoration: underline;
}

.salus-breadcrumb [aria-current="page"] {
  color: var(--salus-foreground);
  font-weight: 500;
}

/* --- The content column --------------------------------------------------- */

.salus-content {
  max-width: var(--salus-content-max);
  margin-inline: auto;
  padding: var(--salus-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--salus-section-gap);
}

.salus-page-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--salus-space-4);
  min-height: var(--salus-topbar-height);
}

.salus-page-header-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-1);
}

.salus-page-header-title h1 {
  margin: 0;
  font-size: var(--salus-text-2xl);
}

.salus-page-header-title p {
  margin: 0;
  color: var(--salus-muted-foreground);
  font-size: var(--salus-text-sm);
}

.salus-page-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* The block is pushed right by the auto margin. Without this, a second row of
     controls aligns to the block's left edge instead of the page's right edge and
     the header reads as ragged. */
  justify-content: flex-end;
  gap: var(--salus-space-2);
  margin-inline-start: auto;
}

/* An htmx target that has not been filled yet still takes a gap from the flex
   column it sits in, which on the case shell opened 48px of dead space between the
   header and the content below it. */
#case-search-results:empty {
  display: none;
}

/* The standard content grid: two up at desktop, one up below 1280px. */
.salus-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--salus-section-gap);
}

.salus-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--salus-section-gap);
}

.salus-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--salus-section-gap);
}


/* =============================================================================
 * 08  CARDS AND STAT CARDS
 * A card is a 1px border and no shadow. Elevation is reserved for things that
 * actually float above the page.
 * ========================================================================== */

.salus-card {
  display: flex;
  flex-direction: column;
  background-color: var(--salus-surface);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-lg);
  color: var(--salus-foreground);
}

.salus-card--large {
  border-radius: var(--salus-radius-xl);
}

.salus-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--salus-space-4);
  padding: var(--salus-card-padding);
  padding-block-end: var(--salus-space-4);
}

.salus-card-header-actions {
  display: flex;
  align-items: center;
  gap: var(--salus-space-2);
  margin-inline-start: auto;
}

.salus-card-title {
  margin: 0;
  font-family: var(--salus-font-display);
  font-size: var(--salus-text-lg);
  font-weight: 600;
  line-height: var(--salus-leading-lg);
  color: var(--salus-foreground);
  display: flex;
  align-items: center;
  gap: var(--salus-space-2);
}

.salus-card-subtitle {
  margin: var(--salus-space-1) 0 0;
  font-size: var(--salus-text-sm);
  color: var(--salus-muted-foreground);
}

.salus-card-body {
  padding: var(--salus-card-padding);
  padding-block-start: 0;
}

.salus-card-header + .salus-card-body {
  padding-block-start: 0;
}

.salus-card > .salus-card-body:only-child {
  padding-block-start: var(--salus-card-padding);
}

.salus-card-footer {
  padding: var(--salus-space-4) var(--salus-card-padding);
  border-block-start: 1px solid var(--salus-border);
  display: flex;
  align-items: center;
  gap: var(--salus-space-3);
}

/* A table that fills a card runs edge to edge, so the body padding is dropped
   and the header keeps its own cell padding instead. */
.salus-card-body--flush {
  padding: 0;
}

/* --- Stat card ------------------------------------------------------------ */

.salus-stat-card {
  --salus-stat-accent: var(--salus-primary);
  --salus-stat-tint: var(--salus-accent);
  position: relative;
  display: flex;
  gap: var(--salus-space-4);
  padding: var(--salus-space-5) var(--salus-space-5) var(--salus-space-5) var(--salus-space-6);
  background-color: var(--salus-surface);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-lg);
  overflow: hidden;
}

/* The 4px accent bar down the leading edge. */
.salus-stat-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background-color: var(--salus-stat-accent);
}

.salus-stat-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-2);
}

.salus-stat-card-label {
  font-size: var(--salus-text-xs);
  line-height: var(--salus-leading-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--salus-muted-foreground);
}

.salus-stat-card-value {
  font-family: var(--salus-font-display);
  font-size: var(--salus-text-4xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--salus-stat-accent);
  font-variant-numeric: tabular-nums;
}

.salus-stat-card-caption {
  font-size: var(--salus-text-xs);
  line-height: var(--salus-leading-xs);
  color: var(--salus-muted-foreground);
}

/* The soft tinted rounded square holding the icon, pinned to the top corner. */
.salus-stat-card-icon {
  position: absolute;
  inset-block-start: var(--salus-space-5);
  inset-inline-end: var(--salus-space-5);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--salus-radius-lg);
  background-color: var(--salus-stat-tint);
  color: var(--salus-stat-accent);
}

.salus-stat-card-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.salus-stat-card--navy {
  --salus-stat-accent: var(--salus-primary);
  --salus-stat-tint: var(--salus-accent);
}

.salus-stat-card--green {
  --salus-stat-accent: var(--salus-success-solid);
  --salus-stat-tint: var(--salus-success-bg);
}

.salus-stat-card--amber {
  --salus-stat-accent: var(--salus-warning-solid);
  --salus-stat-tint: var(--salus-warning-bg);
}

.salus-stat-card--blue {
  --salus-stat-accent: var(--salus-info-solid);
  --salus-stat-tint: var(--salus-info-bg);
}


/* =============================================================================
 * 09  PROGRESS, BADGES, PILLS, SCORE PILL
 * ========================================================================== */

.salus-progress {
  display: block;
  height: 6px;
  border-radius: 999px;
  background-color: var(--salus-surface-muted);
  overflow: hidden;
}

.salus-progress > .salus-progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--salus-primary);
  transition: width var(--salus-transition);
}

.salus-progress--success > .salus-progress-bar { background-color: var(--salus-success-solid); }
.salus-progress--warning > .salus-progress-bar { background-color: var(--salus-warning-solid); }
.salus-progress--danger  > .salus-progress-bar { background-color: var(--salus-destructive); }

/* Label row above the bar: name on the left, used over total on the right,
   in mono so the numbers line up down a column of meters. */
.salus-progress-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--salus-space-4);
  margin-block-end: var(--salus-space-2);
  font-size: var(--salus-text-sm);
  color: var(--salus-foreground);
}

.salus-progress-label > :last-child {
  font-family: var(--salus-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--salus-muted-foreground);
  white-space: nowrap;
}

/* --- Badges and pills ------------------------------------------------------ */

.salus-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--salus-space-1);
  padding: 2px var(--salus-space-2);
  border: 1px solid var(--salus-neutral-border);
  border-radius: var(--salus-radius-sm);
  background-color: var(--salus-neutral-bg);
  color: var(--salus-neutral-fg);
  font-size: var(--salus-text-xs);
  line-height: var(--salus-leading-xs);
  font-weight: 500;
  white-space: nowrap;
}

.salus-badge svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}

/* An optional leading dot. It is decoration: the badge always carries its own
   text, so removing the dot loses nothing. */
.salus-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

.salus-badge--success {
  background-color: var(--salus-success-bg);
  color: var(--salus-success-fg);
  border-color: var(--salus-success-border);
}

.salus-badge--warning {
  background-color: var(--salus-warning-bg);
  color: var(--salus-warning-fg);
  border-color: var(--salus-warning-border);
}

.salus-badge--danger {
  background-color: var(--salus-danger-bg);
  color: var(--salus-danger-fg);
  border-color: var(--salus-danger-border);
}

.salus-badge--info {
  background-color: var(--salus-info-bg);
  color: var(--salus-info-fg);
  border-color: var(--salus-info-border);
}

.salus-badge--neutral {
  background-color: var(--salus-neutral-bg);
  color: var(--salus-neutral-fg);
  border-color: var(--salus-neutral-border);
}

.salus-badge--primary {
  background-color: var(--salus-accent);
  color: var(--salus-accent-foreground);
  border-color: var(--salus-border);
}

.salus-badge--outline {
  background-color: transparent;
  color: var(--salus-muted-foreground);
  border-color: var(--salus-input);
}

/* A pill is a badge with a fully rounded end, used for doc types, modalities
   and filter chips. */
.salus-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--salus-space-1);
  padding: 2px var(--salus-space-3);
  border: 1px solid var(--salus-border);
  border-radius: 999px;
  background-color: var(--salus-surface-muted);
  color: var(--salus-muted-foreground);
  font-size: var(--salus-text-xs);
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

a.salus-pill:hover,
button.salus-pill:hover {
  background-color: var(--salus-accent);
  color: var(--salus-accent-foreground);
  border-color: var(--salus-input);
}

.salus-pill.is-active {
  background-color: var(--salus-primary);
  border-color: var(--salus-primary);
  color: var(--salus-primary-foreground);
}

/* A removable filter chip carries its dismiss control inside the pill. */
.salus-pill > button.salus-pill-dismiss {
  border: 0;
  background: none;
  padding: 0;
  margin-inline-start: var(--salus-space-1);
  color: inherit;
  line-height: 1;
  cursor: pointer;
}

/* --- Merit score pill ------------------------------------------------------ */

/* The reference product communicated the merit score by colour alone, which
   fails WCAG 1.4.1. The Salus pill states the band in words next to the
   number, so the score survives greyscale, colour blindness and a fax. */
.salus-score-pill {
  --salus-score-bg: var(--salus-neutral-bg);
  --salus-score-fg: var(--salus-neutral-fg);
  --salus-score-border: var(--salus-neutral-border);
  display: inline-flex;
  align-items: baseline;
  gap: var(--salus-space-2);
  padding: 2px var(--salus-space-2) 2px var(--salus-space-1);
  border: 1px solid var(--salus-score-border);
  border-radius: var(--salus-radius-sm);
  background-color: var(--salus-score-bg);
  color: var(--salus-score-fg);
  white-space: nowrap;
}

.salus-score-pill-value {
  display: inline-block;
  min-width: 2.25em;
  padding-inline: var(--salus-space-1);
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.salus-score-pill-band {
  font-size: var(--salus-text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Bands as defined by the merit distribution: exceptional 80 to 90,
   high 70 to 79, moderate 51 to 69, low or de minimis 10 to 50. */
.salus-score-pill--exceptional,
.salus-score-pill--high {
  --salus-score-bg: var(--salus-success-bg);
  --salus-score-fg: var(--salus-success-fg);
  --salus-score-border: var(--salus-success-border);
}

.salus-score-pill--moderate {
  --salus-score-bg: var(--salus-warning-bg);
  --salus-score-fg: var(--salus-warning-fg);
  --salus-score-border: var(--salus-warning-border);
}

.salus-score-pill--low {
  --salus-score-bg: var(--salus-danger-bg);
  --salus-score-fg: var(--salus-danger-fg);
  --salus-score-border: var(--salus-danger-border);
}

/* A score that has not been produced yet is a state, not a zero. */
.salus-score-pill--pending {
  --salus-score-bg: var(--salus-neutral-bg);
  --salus-score-fg: var(--salus-neutral-fg);
  --salus-score-border: var(--salus-neutral-border);
  font-style: italic;
}


/* =============================================================================
 * 10  TABLES, PAGINATION, EMPTY STATE, SKELETON
 * ========================================================================== */

/* A table wider than its column scrolls inside this wrapper. The page body
   never scrolls sideways. */
.salus-table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Safety net: if a template drops a table straight into a card body without
   the wrapper, the card body takes on the scrolling instead. */
.salus-card-body:has(> .salus-table),
.salus-card-body--flush:has(> .salus-table) {
  overflow-x: auto;
}

.salus-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--salus-text-sm);
  color: var(--salus-foreground);
}

/* Zebra striping is deliberately absent. Hairline rows read better in a dense
   triage list and survive both themes without a second surface colour. */
.salus-table > thead > tr > th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  padding: var(--salus-cell-padding-y) var(--salus-cell-padding-x);
  background-color: var(--salus-surface-muted);
  border-block-end: 1px solid var(--salus-border);
  font-size: var(--salus-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--salus-muted-foreground);
  text-align: start;
  white-space: nowrap;
}

.salus-table > tbody > tr > td {
  padding: var(--salus-cell-padding-y) var(--salus-cell-padding-x);
  border-block-end: 1px solid var(--salus-border);
  vertical-align: middle;
}

.salus-table > tbody > tr:last-child > td {
  border-block-end: 0;
}

.salus-table > tbody > tr:hover {
  background-color: var(--salus-surface-muted);
}

.salus-table > tbody > tr.is-selected {
  background-color: var(--salus-accent);
}

.salus-table .salus-table-numeric {
  text-align: end;
  font-family: var(--salus-font-mono);
  font-variant-numeric: tabular-nums;
}

.salus-table .salus-table-actions {
  text-align: end;
  white-space: nowrap;
}

/* A two-line cell: the primary value with a muted qualifier beneath, as used
   for claimant name plus age and sex. */
.salus-table-stacked > :first-child {
  display: block;
  font-weight: 500;
}

.salus-table-stacked > :last-child {
  display: block;
  font-size: var(--salus-text-xs);
  color: var(--salus-muted-foreground);
}

/* Sortable header affordance. The button carries the accessible name and the
   caret is drawn from it, so sort direction is never colour alone: the caret
   points, and aria-sort names the state for assistive technology. */
.salus-table th.is-sortable {
  padding: 0;
}

.salus-table th.is-sortable > button {
  display: inline-flex;
  align-items: center;
  gap: var(--salus-space-2);
  width: 100%;
  padding: var(--salus-cell-padding-y) var(--salus-cell-padding-x);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.salus-table th.is-sortable > button:hover {
  color: var(--salus-foreground);
}

.salus-table th.is-sortable > button::after {
  content: "";
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
  border-block-end: 0;
  opacity: 0.35;
  transition: opacity var(--salus-transition-fast), transform var(--salus-transition-fast);
}

.salus-table th[aria-sort="ascending"] > button::after {
  opacity: 1;
  transform: rotate(180deg);
}

.salus-table th[aria-sort="descending"] > button::after {
  opacity: 1;
}

/* --- Pagination ------------------------------------------------------------ */

.salus-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--salus-space-4);
  padding: var(--salus-space-3) var(--salus-cell-padding-x);
  border-block-start: 1px solid var(--salus-border);
  font-size: var(--salus-text-sm);
  color: var(--salus-muted-foreground);
}

.salus-pagination-summary {
  min-width: 0;
}

.salus-pagination-summary strong {
  color: var(--salus-foreground);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.salus-pagination-perpage {
  display: flex;
  align-items: center;
  gap: var(--salus-space-2);
}

.salus-pagination-perpage .form-select {
  width: auto;
  padding-block: 2px;
  font-size: var(--salus-text-xs);
}

.salus-pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--salus-space-1);
  margin-inline-start: auto;
}

.salus-pagination-controls > a,
.salus-pagination-controls > button {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding-inline: var(--salus-space-2);
  border: 1px solid transparent;
  border-radius: var(--salus-radius-md);
  background: none;
  color: var(--salus-muted-foreground);
  font-size: var(--salus-text-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
}

.salus-pagination-controls > a:hover,
.salus-pagination-controls > button:hover:not(:disabled) {
  background-color: var(--salus-surface-muted);
  color: var(--salus-foreground);
}

.salus-pagination-controls > [aria-current="page"] {
  background-color: var(--salus-primary);
  border-color: var(--salus-primary);
  color: var(--salus-primary-foreground);
  font-weight: 600;
}

.salus-pagination-controls > button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Empty state ----------------------------------------------------------- */

/* Absence is information. An empty list says what is missing and offers the
   one action that fixes it. */
.salus-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--salus-space-3);
  padding: var(--salus-space-12) var(--salus-space-6);
  text-align: center;
}

.salus-empty-state-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--salus-radius-xl);
  background-color: var(--salus-surface-muted);
  color: var(--salus-muted-foreground);
}

.salus-empty-state-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

.salus-empty-state h3,
.salus-empty-state-title {
  margin: 0;
  font-family: var(--salus-font-display);
  font-size: var(--salus-text-base);
  font-weight: 600;
  color: var(--salus-foreground);
}

.salus-empty-state p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--salus-text-sm);
  color: var(--salus-muted-foreground);
}

/* --- Skeleton -------------------------------------------------------------- */

/* Skeletons match the final layout. Bare spinners tell the user nothing about
   what is arriving. */
.salus-skeleton {
  display: block;
  min-height: 1em;
  border-radius: var(--salus-radius-sm);
  background-color: var(--salus-surface-muted);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--salus-foreground-rgb), 0.06) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: salus-shimmer 1.4s linear infinite;
}

.salus-skeleton--text  { height: 0.875rem; margin-block: 0.25rem; }
.salus-skeleton--title { height: 1.25rem; width: 40%; }
.salus-skeleton--line  { height: 0.875rem; width: 100%; }
.salus-skeleton--short { height: 0.875rem; width: 60%; }
.salus-skeleton--pill  { height: 1.25rem; width: 4rem; border-radius: 999px; }
.salus-skeleton--block { height: 8rem; border-radius: var(--salus-radius-lg); }

@keyframes salus-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* The shimmer is decoration. Under a reduced-motion preference the skeleton
   stays a flat tint, which still reads as "loading". */
@media (prefers-reduced-motion: reduce) {
  .salus-skeleton {
    background-image: none;
    animation: none;
  }
}


/* =============================================================================
 * 11  CASE FACTS STRIP AND TABS
 * ========================================================================== */

/* The fixed min-height is the point of this component. In the reference
   product a three-line CASE TYPE value pushed the tab bar and the whole page
   down by 40px, so the tab a user was aiming at moved out from under the
   pointer. Reserving the height stops that. */
.salus-facts-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--salus-space-4) var(--salus-space-6);
  align-items: start;
  min-height: 96px;
  padding: var(--salus-space-4) var(--salus-card-padding);
  background-color: var(--salus-surface);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-lg);
}

.salus-facts-strip-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-1);
}

.salus-facts-strip-label {
  display: flex;
  align-items: center;
  gap: var(--salus-space-2);
  font-size: var(--salus-text-xs);
  line-height: var(--salus-leading-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--salus-muted-foreground);
}

.salus-facts-strip-label svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
}

.salus-facts-strip-value {
  font-size: var(--salus-text-sm);
  font-weight: 500;
  line-height: var(--salus-leading-sm);
  color: var(--salus-foreground);
  overflow-wrap: anywhere;
}

.salus-facts-strip-value.salus-mono {
  font-family: var(--salus-font-mono);
  letter-spacing: -0.01em;
}

/* --- Tabs ------------------------------------------------------------------ */

/* A segmented pill control on a muted track. The active item is the surface
   colour with a subtle shadow, which is the only place in the app where a
   non-floating element carries elevation. */
.salus-tabs {
  display: flex;
  align-items: center;
  gap: var(--salus-space-1);
  padding: var(--salus-space-1);
  background-color: var(--salus-surface-muted);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-lg);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;

  /* A shadow at whichever edge has more tabs beyond it. Eight tabs do not fit a
     laptop window, and a strip that simply clipped "Legal Assessment" would hide a
     whole screen of the product behind a gesture nothing asked for.

     The two `local` layers scroll with the content and sit on top, so each one
     covers its shadow exactly when that end is reached. No script, no resize
     observer, and it stays correct when the sidebar expands. */
  background-image:
    linear-gradient(to right, var(--salus-surface-muted), rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--salus-surface-muted), rgba(0, 0, 0, 0)),
    linear-gradient(to right, var(--salus-scroll-shadow), rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--salus-scroll-shadow), rgba(0, 0, 0, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.salus-tabs > a,
.salus-tabs > button {
  display: inline-flex;
  align-items: center;
  gap: var(--salus-space-2);
  flex: 0 0 auto;
  padding: var(--salus-space-2) var(--salus-space-3);
  border: 1px solid transparent;
  border-radius: var(--salus-radius-md);
  background: none;
  color: var(--salus-muted-foreground);
  font-size: var(--salus-text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--salus-transition-fast), color var(--salus-transition-fast);
}

.salus-tabs > a svg,
.salus-tabs > button svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}

.salus-tabs > a:hover,
.salus-tabs > button:hover {
  color: var(--salus-foreground);
}

.salus-tabs > .is-active,
.salus-tabs > [aria-selected="true"],
.salus-tabs > [aria-current="page"] {
  background-color: var(--salus-surface);
  border-color: var(--salus-border);
  color: var(--salus-foreground);
  font-weight: 600;
  box-shadow: var(--salus-shadow-raised);
}

/* A tab may carry a count or a Beta marker. */
.salus-tabs .salus-badge {
  font-size: 10px;
  padding-block: 1px;
}


/* =============================================================================
 * 12  CITATIONS
 * Evidence is one click from every claim. This is the product's credibility,
 * so the chip is a first-class control rather than a styled span.
 * ========================================================================== */

.salus-citation-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--salus-space-1);
  max-width: 100%;
  padding: 1px var(--salus-space-2);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-sm);
  background-color: var(--salus-surface-muted);
  color: var(--salus-muted-foreground);
  font-size: var(--salus-text-xs);
  line-height: var(--salus-leading-xs);
  font-weight: 500;
  text-decoration: none;
  vertical-align: baseline;
  cursor: pointer;
}

.salus-citation-chip svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  stroke-width: 1.75;
}

.salus-citation-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salus-citation-chip-page {
  flex: 0 0 auto;
  font-family: var(--salus-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--salus-foreground);
}

.salus-citation-chip:hover,
.salus-citation-chip:focus-visible {
  background-color: var(--salus-accent);
  border-color: var(--salus-input);
  color: var(--salus-accent-foreground);
}

/* A citation that could not be resolved is marked in words as well as in
   colour, because a broken citation is a defect the reader must see. */
.salus-citation-chip.is-unresolved {
  background-color: var(--salus-danger-bg);
  border-color: var(--salus-danger-border);
  color: var(--salus-danger-fg);
}

.salus-citation-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--salus-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.salus-citation-popover {
  position: absolute;
  z-index: var(--salus-z-popover);
  display: none;
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  padding: var(--salus-space-4);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-lg);
  background-color: var(--salus-surface);
  color: var(--salus-foreground);
  box-shadow: var(--salus-shadow-overlay);
  font-size: var(--salus-text-sm);
  line-height: var(--salus-leading-sm);
}

.salus-citation-popover.is-open {
  display: block;
}

/* The same component driven by the native popover attribute. */
.salus-citation-popover:popover-open {
  display: block;
}

.salus-citation-popover-title {
  margin: 0 0 var(--salus-space-1);
  font-family: var(--salus-font-display);
  font-size: var(--salus-text-sm);
  font-weight: 600;
}

.salus-citation-popover-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--salus-space-2);
  margin-block-end: var(--salus-space-3);
  font-size: var(--salus-text-xs);
  color: var(--salus-muted-foreground);
}

/* The stored excerpt, quoted from the source page. */
.salus-citation-popover-excerpt {
  margin: 0;
  padding-inline-start: var(--salus-space-3);
  border-inline-start: 2px solid var(--salus-border);
  color: var(--salus-muted-foreground);
  font-style: italic;
}


/* =============================================================================
 * 13  TIMELINE
 * ========================================================================== */

.salus-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-5);
  margin: 0;
  padding: 0 0 0 var(--salus-space-8);
  list-style: none;
}

/* The rail is a separate element rather than a pseudo-element so it can be
   shortened at the last event without a magic offset. */
.salus-timeline-rail {
  position: absolute;
  inset-block: var(--salus-space-3);
  inset-inline-start: 7px;
  width: 2px;
  border-radius: 1px;
  background-color: var(--salus-border);
}

.salus-timeline > li {
  position: relative;
  min-width: 0;
}

.salus-timeline-dot {
  position: absolute;
  inset-inline-start: calc(var(--salus-space-8) * -1);
  inset-block-start: var(--salus-space-3);
  width: 16px;
  height: 16px;
  border: 3px solid var(--salus-surface);
  border-radius: 50%;
  background-color: var(--salus-muted-foreground);
  box-sizing: border-box;
}

/* A key event is derived from a pillar citation, and is marked by a filled
   accent dot plus its own badge in the card. Never the dot alone. */
.salus-timeline-dot.is-key {
  background-color: var(--salus-primary);
  outline: 2px solid var(--salus-primary);
  outline-offset: 1px;
}

.salus-timeline-card {
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-2);
  padding: var(--salus-space-4);
  background-color: var(--salus-surface);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-lg);
}

.salus-timeline-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--salus-space-2);
}

/* Dates render at the precision that was actually extracted. A year-only date
   shows as 1999, a month date as Oct 2015, with the raw source string in the
   title attribute. */
.salus-timeline-date {
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--salus-foreground);
}

.salus-timeline-date.is-imprecise {
  border-block-end: 1px dotted var(--salus-muted-foreground);
  cursor: help;
}

.salus-timeline-card p {
  margin: 0;
  font-size: var(--salus-text-sm);
  line-height: var(--salus-leading-base);
}

.salus-timeline-card-sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--salus-space-2);
  align-items: center;
}


/* =============================================================================
 * 14  PILLAR CARDS AND GAP ITEMS
 * Duty blue, Breach red, Causation amber, Damages violet. The accent paints a
 * 3px top rule and the pillar icon. Titles stay in the foreground colour so
 * the heading never depends on an accent hue for its contrast.
 * ========================================================================== */

.salus-pillar-card {
  --salus-pillar-accent: var(--salus-primary);
  --salus-pillar-ink: var(--salus-primary);
  --salus-pillar-bg: var(--salus-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-4);
  padding: var(--salus-card-padding);
  background-color: var(--salus-surface);
  border: 1px solid var(--salus-border);
  border-block-start: 3px solid var(--salus-pillar-accent);
  border-radius: var(--salus-radius-lg);
}

.salus-pillar-card--duty {
  --salus-pillar-accent: var(--salus-duty-accent);
  --salus-pillar-ink: var(--salus-duty-ink);
  --salus-pillar-bg: var(--salus-duty-bg);
}

.salus-pillar-card--breach {
  --salus-pillar-accent: var(--salus-breach-accent);
  --salus-pillar-ink: var(--salus-breach-ink);
  --salus-pillar-bg: var(--salus-breach-bg);
}

.salus-pillar-card--causation {
  --salus-pillar-accent: var(--salus-causation-accent);
  --salus-pillar-ink: var(--salus-causation-ink);
  --salus-pillar-bg: var(--salus-causation-bg);
}

.salus-pillar-card--damages {
  --salus-pillar-accent: var(--salus-damages-accent);
  --salus-pillar-ink: var(--salus-damages-ink);
  --salus-pillar-bg: var(--salus-damages-bg);
}

.salus-pillar-card-head {
  display: flex;
  align-items: center;
  gap: var(--salus-space-3);
}

.salus-pillar-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--salus-radius-md);
  background-color: var(--salus-pillar-bg);
  color: var(--salus-pillar-ink);
}

.salus-pillar-card-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
}

.salus-pillar-card-title {
  margin: 0;
  font-family: var(--salus-font-display);
  font-size: var(--salus-text-base);
  font-weight: 600;
  color: var(--salus-foreground);
}

/* The per-pillar score, absent from the reference product entirely, sits at
   the end of the header. The weakest pillar is the one the Merit Score is
   taken from, and it says so in words. */
.salus-pillar-card-score {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--salus-space-2);
}

.salus-pillar-card.is-weakest {
  box-shadow: inset 0 0 0 1px var(--salus-pillar-accent);
}

.salus-pillar-card-section > .salus-micro-label,
.salus-pillar-card-section > h4 {
  margin: 0 0 var(--salus-space-1);
  font-family: var(--salus-font-body);
  font-size: var(--salus-text-xs);
  line-height: var(--salus-leading-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--salus-muted-foreground);
}

.salus-pillar-card-section + .salus-pillar-card-section {
  margin-block-start: var(--salus-space-4);
}

.salus-pillar-card-section p {
  margin: 0;
  font-size: var(--salus-text-sm);
  line-height: var(--salus-leading-base);
}

.salus-pillar-card-footer {
  margin-block-start: auto;
  padding-block-start: var(--salus-space-3);
  border-block-start: 1px solid var(--salus-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--salus-space-2);
}

/* A single alleged breach inside the Breach pillar. */
.salus-breach-item {
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-2);
  padding: var(--salus-space-3);
  background-color: var(--salus-surface-muted);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-md);
}

.salus-breach-item-title {
  margin: 0;
  font-size: var(--salus-text-sm);
  font-weight: 600;
  line-height: var(--salus-leading-sm);
}

.salus-breach-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--salus-space-2);
}

/* --- Gap analysis ---------------------------------------------------------- */

/* Gap analysis is promoted out of the printable report into the interactive
   UI, because a missing record is an action a fee-earner takes today. */
.salus-gap-item {
  --salus-gap-accent: var(--salus-warning-solid);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--salus-space-2) var(--salus-space-3);
  padding: var(--salus-space-4);
  background-color: var(--salus-surface);
  border: 1px solid var(--salus-border);
  border-inline-start: 3px solid var(--salus-gap-accent);
  border-radius: var(--salus-radius-md);
}

.salus-gap-item + .salus-gap-item {
  margin-block-start: var(--salus-space-3);
}

.salus-gap-item--critical { --salus-gap-accent: var(--salus-destructive); }
.salus-gap-item--high     { --salus-gap-accent: var(--salus-warning-solid); }
.salus-gap-item--moderate { --salus-gap-accent: var(--salus-info-solid); }

.salus-gap-item-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--salus-radius-md);
  background-color: var(--salus-surface-muted);
  color: var(--salus-gap-accent);
}

.salus-gap-item-title {
  margin: 0;
  font-size: var(--salus-text-sm);
  font-weight: 600;
}

.salus-gap-item-body {
  margin: 0;
  font-size: var(--salus-text-sm);
  color: var(--salus-muted-foreground);
}

.salus-gap-item-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--salus-space-2);
}


/* =============================================================================
 * 15  DOCUMENTS, PAGES AND THUMBNAILS
 * ========================================================================== */

.salus-document-card {
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-3);
  padding: var(--salus-space-4);
  background-color: var(--salus-surface);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-lg);
}

.salus-document-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--salus-space-3);
}

.salus-document-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--salus-radius-md);
  background-color: var(--salus-surface-muted);
  color: var(--salus-muted-foreground);
}

.salus-document-card-name {
  margin: 0;
  min-width: 0;
  font-size: var(--salus-text-sm);
  font-weight: 600;
  line-height: var(--salus-leading-sm);
  overflow-wrap: anywhere;
}

.salus-document-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--salus-space-2);
  font-size: var(--salus-text-xs);
  color: var(--salus-muted-foreground);
}

.salus-document-card-types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--salus-space-1);
}

.salus-document-card-ocr {
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-1);
}

.salus-document-card-actions {
  display: flex;
  align-items: center;
  gap: var(--salus-space-2);
  margin-block-start: auto;
  padding-block-start: var(--salus-space-3);
  border-block-start: 1px solid var(--salus-border);
}

/* Archive members collapse under their parent instead of exploding into 130
   top-level cards, which is what the reference product did with a single ZIP
   of radiology images. */
.salus-document-card-children {
  margin-block-start: var(--salus-space-2);
  padding-inline-start: var(--salus-space-4);
  border-inline-start: 2px solid var(--salus-border);
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-2);
}

/* --- Page rows ------------------------------------------------------------- */

.salus-page-row {
  display: flex;
  align-items: center;
  gap: var(--salus-space-3);
  width: 100%;
  padding: var(--salus-space-2) var(--salus-space-3);
  border: 1px solid transparent;
  border-block-end-color: var(--salus-border);
  background: none;
  color: inherit;
  font-size: var(--salus-text-sm);
  text-align: start;
}

.salus-page-row:hover {
  background-color: var(--salus-surface-muted);
}

.salus-page-row-number {
  flex: 0 0 auto;
  min-width: 4.5rem;
  font-family: var(--salus-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--salus-muted-foreground);
}

.salus-page-row-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salus-page-row-metrics {
  display: flex;
  align-items: center;
  gap: var(--salus-space-3);
  margin-inline-start: auto;
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--salus-muted-foreground);
  white-space: nowrap;
}

/* Zero relevance is a finding, not a blank. It is stated and coloured. */
.salus-page-row-metrics .is-zero {
  color: var(--salus-danger-fg);
  font-weight: 600;
}

.salus-page-row-body {
  padding: var(--salus-space-4);
  background-color: var(--salus-surface-muted);
  border-block-end: 1px solid var(--salus-border);
  font-size: var(--salus-text-sm);
}

.salus-page-row-ocr {
  margin: var(--salus-space-3) 0 0;
  padding: var(--salus-space-3);
  max-height: 22rem;
  overflow: auto;
  background-color: var(--salus-surface);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-md);
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- Thumbnails ------------------------------------------------------------ */

.salus-thumbnail-strip {
  display: flex;
  gap: var(--salus-space-2);
  padding-block-end: var(--salus-space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.salus-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-md);
  background-color: var(--salus-surface-muted);
  overflow: hidden;
  cursor: pointer;
  /* A tile is a button, because clicking one opens the lightbox. A button does
     not inherit the page font on its own, and the "Sampled" label below is drawn
     from this element. */
  font: inherit;
  color: inherit;
}

.salus-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A tile the reader cannot open is disabled and says why, like every refused
   control. The `.btn:disabled` rule does not reach it, because a tile is not a
   button in the Bootstrap sense, and a disabled tile still carrying a pointer
   cursor is a control that looks pressable and is not. Pointer events stay so
   the reason can be hovered. */
.salus-thumb:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: auto;
}

.salus-thumb-caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 2px var(--salus-space-1);
  background-color: rgb(9 19 26 / 0.72);
  color: #ffffff;
  font-family: var(--salus-font-mono);
  font-size: 10px;
  text-align: center;
}

/* An instance the vision pass actually looked at is marked with a word, not
   just a colour, because "Sampled" is a claim about the analysis. */
.salus-thumb.is-sampled {
  border-color: var(--salus-warning-solid);
  box-shadow: inset 0 0 0 1px var(--salus-warning-solid);
}

.salus-thumb.is-sampled::after {
  content: "Sampled";
  position: absolute;
  inset-block-start: var(--salus-space-1);
  inset-inline-start: var(--salus-space-1);
  padding: 1px var(--salus-space-1);
  border-radius: var(--salus-radius-sm);
  background-color: var(--salus-warning-bg);
  color: var(--salus-warning-fg);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* The overflow tile at the end of a strip, showing how many were not drawn. */
.salus-thumb--overflow {
  display: grid;
  place-items: center;
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-sm);
  font-weight: 600;
  color: var(--salus-muted-foreground);
}

/* The frame in the lightbox. Black in both themes, because a radiograph is read
   against black and the same grey on a light page reads a stop lighter than it
   is. `contain` and the height cap keep a portrait frame inside the dialog
   instead of pushing the footer, and the navigation with it, below the fold. */
.salus-viewer-frame {
  display: grid;
  place-items: center;
  padding: var(--salus-space-2);
  background-color: #000000;
  border-radius: var(--salus-radius-md);
}

.salus-viewer-frame img {
  max-width: 100%;
  max-height: 62vh;
  object-fit: contain;
}


/* =============================================================================
 * 16  LAB VALUES AND SPARKLINES
 * The reference product left four of five lab columns empty. Salus renders
 * value, unit, reference range, flag and source together or says the field is
 * absent, so a reader can tell a missing result from an unremarkable one.
 * ========================================================================== */

.salus-lab-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--salus-text-sm);
}

.salus-lab-table > thead > tr > th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  padding: var(--salus-space-2) var(--salus-cell-padding-x);
  background-color: var(--salus-surface-muted);
  border-block-end: 1px solid var(--salus-border);
  font-size: var(--salus-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--salus-muted-foreground);
  text-align: start;
  white-space: nowrap;
}

/* One row per canonical analyte group, so Alk Phos does not appear four times
   under four spellings. */
.salus-lab-table > tbody > tr.salus-lab-group > th {
  padding: var(--salus-space-3) var(--salus-cell-padding-x) var(--salus-space-2);
  background-color: var(--salus-surface);
  border-block-end: 1px solid var(--salus-border);
  font-family: var(--salus-font-display);
  font-size: var(--salus-text-sm);
  font-weight: 600;
  text-align: start;
}

.salus-lab-table > tbody > tr > td {
  padding: var(--salus-space-2) var(--salus-cell-padding-x);
  border-block-end: 1px solid var(--salus-border);
  vertical-align: middle;
}

.salus-lab-table .salus-lab-value,
.salus-lab-table .salus-lab-range,
.salus-lab-table .salus-lab-date {
  font-family: var(--salus-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.salus-lab-table .salus-lab-range {
  color: var(--salus-muted-foreground);
}

/* An abnormal flag carries its letter code as well as its colour: H, L, HH,
   LL, A. Colour alone would fail on a monochrome print of the report. */
.salus-lab-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0 var(--salus-space-1);
  border: 1px solid var(--salus-neutral-border);
  border-radius: var(--salus-radius-sm);
  background-color: var(--salus-neutral-bg);
  color: var(--salus-neutral-fg);
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-xs);
  font-weight: 700;
  line-height: 1.6;
}

.salus-lab-flag--high,
.salus-lab-flag--critical-high {
  background-color: var(--salus-danger-bg);
  color: var(--salus-danger-fg);
  border-color: var(--salus-danger-border);
}

.salus-lab-flag--low,
.salus-lab-flag--critical-low {
  background-color: var(--salus-info-bg);
  color: var(--salus-info-fg);
  border-color: var(--salus-info-border);
}

.salus-lab-flag--normal {
  background-color: var(--salus-success-bg);
  color: var(--salus-success-fg);
  border-color: var(--salus-success-border);
}

.salus-lab-table > tbody > tr.is-abnormal {
  background-color: color-mix(in srgb, var(--salus-danger-bg) 40%, transparent);
}

/* --- Sparkline ------------------------------------------------------------- */

/* A trend, drawn as an inline SVG. The line takes its colour from currentColor
   so it inherits the theme, and the SVG carries its own accessible summary.
   The sparkline supplements the tabular values, it never replaces them. */
.salus-sparkline {
  display: inline-block;
  width: 96px;
  height: 24px;
  vertical-align: middle;
  color: var(--salus-chart-1);
  overflow: visible;
}

.salus-sparkline path,
.salus-sparkline polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.salus-sparkline .salus-sparkline-area {
  fill: currentColor;
  fill-opacity: 0.12;
  stroke: none;
}

.salus-sparkline .salus-sparkline-point {
  fill: currentColor;
  stroke: var(--salus-surface);
  stroke-width: 1.5;
}

.salus-sparkline--rising  { color: var(--salus-danger-fg); }
.salus-sparkline--falling { color: var(--salus-info-fg); }
.salus-sparkline--flat    { color: var(--salus-muted-foreground); }


/* =============================================================================
 * 17  DRAWER AND CHAT
 * The case chat panel. It is a peer of the content rather than a modal, so a
 * user can read the report and ask about it at the same time.
 * ========================================================================== */

.salus-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--salus-z-drawer);
  display: flex;
  flex-direction: column;
  width: min(var(--salus-drawer-width), 100vw);
  background-color: var(--salus-surface);
  border-inline-start: 1px solid var(--salus-border);
  box-shadow: var(--salus-shadow-overlay);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 180ms ease, width 180ms ease, visibility 0s linear 180ms;
}

.salus-drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform 180ms ease, width 180ms ease, visibility 0s linear 0s;
}

/* Expand to full screen, for reading a long answer with its citations. */
.salus-drawer.is-expanded {
  width: 100vw;
  border-inline-start: 0;
}

.salus-drawer-header {
  display: flex;
  align-items: center;
  gap: var(--salus-space-3);
  min-height: var(--salus-topbar-height);
  padding: var(--salus-space-2) var(--salus-space-4);
  border-block-end: 1px solid var(--salus-border);
}

.salus-drawer-title {
  margin: 0;
  font-family: var(--salus-font-display);
  font-size: var(--salus-text-base);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salus-drawer-header-actions {
  display: flex;
  align-items: center;
  gap: var(--salus-space-1);
  margin-inline-start: auto;
}

/* The Case Knowledge banner, driven by the knowledge build status. It states
   plainly that answers may be incomplete while embeddings are still building. */
.salus-drawer-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--salus-space-2);
  padding: var(--salus-space-3) var(--salus-space-4);
  background-color: var(--salus-info-bg);
  color: var(--salus-info-fg);
  border-block-end: 1px solid var(--salus-info-border);
  font-size: var(--salus-text-xs);
  line-height: var(--salus-leading-sm);
}

.salus-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--salus-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-4);
}

.salus-drawer-footer {
  flex: 0 0 auto;
  padding: var(--salus-space-3) var(--salus-space-4);
  border-block-start: 1px solid var(--salus-border);
  background-color: var(--salus-surface);
}

.salus-drawer-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--salus-space-2);
}

/* When the drawer is expanded the message column stops running to the full
   width of a 27 inch display, which would be unreadable. */
.salus-drawer.is-expanded .salus-drawer-body,
.salus-drawer.is-expanded .salus-drawer-footer > form {
  max-width: 880px;
  margin-inline: auto;
  width: 100%;
}

/* --- Chat messages --------------------------------------------------------- */

.salus-chat-message {
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-2);
  max-width: 88%;
  padding: var(--salus-space-3) var(--salus-space-4);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-lg);
  font-size: var(--salus-text-sm);
  line-height: var(--salus-leading-base);
  overflow-wrap: anywhere;
}

.salus-chat-message p {
  margin: 0;
}

.salus-chat-message p + p {
  margin-block-start: var(--salus-space-3);
}

.salus-chat-message--user {
  align-self: flex-end;
  background-color: var(--salus-accent);
  border-color: var(--salus-border);
  color: var(--salus-accent-foreground);
  border-end-end-radius: var(--salus-radius-sm);
}

.salus-chat-message--assistant {
  align-self: flex-start;
  background-color: var(--salus-surface);
  color: var(--salus-foreground);
  border-end-start-radius: var(--salus-radius-sm);
}

.salus-chat-message-role {
  font-size: var(--salus-text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--salus-muted-foreground);
}

.salus-chat-message-citations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--salus-space-2);
  padding-block-start: var(--salus-space-2);
  border-block-start: 1px solid var(--salus-border);
}

/* The pending indicator while a reply streams. Three dots, and a text label
   for anyone who cannot see them. */
.salus-chat-typing {
  display: inline-flex;
  align-items: center;
  gap: var(--salus-space-1);
}

.salus-chat-typing > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--salus-muted-foreground);
  animation: salus-pulse 1.2s ease-in-out infinite;
}

.salus-chat-typing > span:nth-child(2) { animation-delay: 0.15s; }
.salus-chat-typing > span:nth-child(3) { animation-delay: 0.3s; }

@keyframes salus-pulse {
  0%, 80%, 100% { opacity: 0.25; }
  40%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .salus-chat-typing > span {
    animation: none;
    opacity: 0.6;
  }
}


/* =============================================================================
 * 18  DROPZONE
 * Attachments are the one required field on the create-case form, and the cost
 * of the job follows from what is dropped here, so the zone reports type,
 * size and per-file progress rather than a static hint.
 * ========================================================================== */

.salus-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--salus-space-2);
  min-height: 180px;
  padding: var(--salus-space-8) var(--salus-space-6);
  border: 2px dashed var(--salus-input);
  border-radius: var(--salus-radius-lg);
  background-color: var(--salus-surface);
  color: var(--salus-muted-foreground);
  text-align: center;
  transition: border-color var(--salus-transition-fast), background-color var(--salus-transition-fast);
}

.salus-dropzone-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--salus-radius-lg);
  background-color: var(--salus-surface-muted);
  color: var(--salus-muted-foreground);
}

.salus-dropzone-title {
  margin: 0;
  font-family: var(--salus-font-display);
  font-size: var(--salus-text-base);
  font-weight: 600;
  color: var(--salus-foreground);
}

.salus-dropzone-hint {
  margin: 0;
  max-width: 52ch;
  font-size: var(--salus-text-xs);
  line-height: var(--salus-leading-sm);
}

.salus-dropzone.is-dragover {
  border-color: var(--salus-primary);
  border-style: solid;
  background-color: var(--salus-accent);
  color: var(--salus-accent-foreground);
}

.salus-dropzone.is-invalid {
  border-color: var(--salus-destructive);
  background-color: var(--salus-danger-bg);
  color: var(--salus-danger-fg);
}

/* The visually hidden file input sits behind the label so the whole zone is
   clickable and the control stays keyboard reachable. */
.salus-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* --- Per-file rows --------------------------------------------------------- */

.salus-dropzone-files {
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-2);
  margin-block-start: var(--salus-space-4);
  list-style: none;
  padding: 0;
}

.salus-dropzone-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--salus-space-2) var(--salus-space-3);
  padding: var(--salus-space-2) var(--salus-space-3);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-md);
  background-color: var(--salus-surface);
  font-size: var(--salus-text-sm);
  text-align: start;
}

.salus-dropzone-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salus-dropzone-file-size,
.salus-dropzone-file-status {
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--salus-muted-foreground);
  white-space: nowrap;
}

.salus-dropzone-file > .salus-progress {
  grid-column: 1 / -1;
}

.salus-dropzone-file.is-complete .salus-dropzone-file-status { color: var(--salus-success-fg); }
.salus-dropzone-file.is-error    .salus-dropzone-file-status { color: var(--salus-danger-fg); }
.salus-dropzone-file.is-error {
  border-color: var(--salus-danger-border);
  background-color: var(--salus-danger-bg);
}

.salus-dropzone-file-error {
  grid-column: 2 / -1;
  font-size: var(--salus-text-xs);
  color: var(--salus-danger-fg);
}

/* The estimate shown before submit. A 2,670 page bundle is a real cost and the
   user should see it before committing, not on the invoice. */
.salus-dropzone-estimate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--salus-space-4);
  margin-block-start: var(--salus-space-3);
  padding: var(--salus-space-3) var(--salus-space-4);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-md);
  background-color: var(--salus-surface-muted);
  font-size: var(--salus-text-sm);
}

.salus-dropzone-estimate strong {
  font-family: var(--salus-font-mono);
  font-variant-numeric: tabular-nums;
}


/* =============================================================================
 * 19  PERMISSION MATRIX
 * Eighty permissions in nine groups. Two checkbox columns per group, so a role
 * editor can be read down a page rather than scrolled sideways.
 * ========================================================================== */

.salus-permission-matrix {
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-6);
}

.salus-permission-matrix-group {
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-lg);
  background-color: var(--salus-surface);
  overflow: hidden;
}

.salus-permission-matrix-group-head {
  display: flex;
  align-items: center;
  gap: var(--salus-space-3);
  padding: var(--salus-space-3) var(--salus-space-4);
  background-color: var(--salus-surface-muted);
  border-block-end: 1px solid var(--salus-border);
}

.salus-permission-matrix-group-title {
  margin: 0;
  font-family: var(--salus-font-display);
  font-size: var(--salus-text-sm);
  font-weight: 600;
}

.salus-permission-matrix-group-count {
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--salus-muted-foreground);
}

/* Select all for the group sits at the end of its header. */
.salus-permission-matrix-group-toggle {
  margin-inline-start: auto;
}

.salus-permission-matrix-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--salus-space-6);
}

.salus-permission-matrix-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--salus-space-1) var(--salus-space-3);
  align-items: start;
  padding: var(--salus-space-3) var(--salus-space-4);
  border-block-end: 1px solid var(--salus-border);
}

.salus-permission-matrix-item:hover {
  background-color: var(--salus-surface-muted);
}

.salus-permission-matrix-item > input[type="checkbox"] {
  margin-block-start: 2px;
}

.salus-permission-matrix-item-label {
  font-size: var(--salus-text-sm);
  font-weight: 500;
  color: var(--salus-foreground);
}

.salus-permission-matrix-item-key {
  grid-column: 2;
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-xs);
  color: var(--salus-muted-foreground);
}

/* The diff summary shown before save, so a role change is never a mystery. */
.salus-permission-matrix-diff {
  display: flex;
  flex-wrap: wrap;
  gap: var(--salus-space-2);
  padding: var(--salus-space-3) var(--salus-space-4);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-md);
  background-color: var(--salus-surface-muted);
  font-size: var(--salus-text-sm);
}


/* =============================================================================
 * 20  PROCESSING STAGES
 * The reference product showed an undifferentiated "Loading case" for ten to
 * twenty seconds. This list names the stage, its counts, and whether it is
 * done, running or waiting. Each state carries a glyph as well as a colour.
 * ========================================================================== */

.salus-processing {
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-4);
  padding: var(--salus-card-padding);
  background-color: var(--salus-surface);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-lg);
}

.salus-processing-head {
  display: flex;
  align-items: center;
  gap: var(--salus-space-4);
}

.salus-processing-title {
  margin: 0;
  font-family: var(--salus-font-display);
  font-size: var(--salus-text-base);
  font-weight: 600;
}

.salus-processing-percent {
  margin-inline-start: auto;
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.salus-processing-stages {
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.salus-processing-stage {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--salus-space-3);
  padding: var(--salus-space-2) 0;
  font-size: var(--salus-text-sm);
  color: var(--salus-muted-foreground);
}

.salus-processing-stage-marker {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.salus-processing-stage-detail {
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.salus-processing-stage.is-done {
  color: var(--salus-success-fg);
}

.salus-processing-stage.is-done .salus-processing-stage-marker {
  background-color: var(--salus-success-bg);
  border-color: var(--salus-success-fg);
}

/* The tick and the ring are drawn in CSS so the state survives with images
   disabled. */
.salus-processing-stage.is-done .salus-processing-stage-marker::before {
  content: "";
  width: 5px;
  height: 9px;
  margin-block-start: -2px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
}

.salus-processing-stage.is-active {
  color: var(--salus-foreground);
  font-weight: 500;
}

.salus-processing-stage.is-active .salus-processing-stage-marker {
  border-color: var(--salus-primary);
  border-block-start-color: transparent;
  color: var(--salus-primary);
  animation: salus-spin 900ms linear infinite;
}

.salus-processing-stage.is-pending {
  color: var(--salus-muted-foreground);
  opacity: 0.7;
}

.salus-processing-stage.is-pending .salus-processing-stage-marker {
  border-style: dashed;
}

.salus-processing-stage.is-failed {
  color: var(--salus-danger-fg);
}

.salus-processing-stage.is-failed .salus-processing-stage-marker {
  background-color: var(--salus-danger-bg);
  border-color: var(--salus-danger-fg);
}

.salus-processing-stage.is-failed .salus-processing-stage-marker::before {
  content: "!";
}

.salus-processing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--salus-space-4);
  padding-block-start: var(--salus-space-3);
  border-block-start: 1px solid var(--salus-border);
  font-size: var(--salus-text-xs);
  color: var(--salus-muted-foreground);
}

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

@media (prefers-reduced-motion: reduce) {
  .salus-processing-stage.is-active .salus-processing-stage-marker {
    animation: none;
    border-block-start-color: var(--salus-primary);
    background-color: var(--salus-accent);
  }
}


/* =============================================================================
 * 21  TOASTS AND PROBLEM DOCUMENTS
 * ========================================================================== */

.salus-toast-region {
  position: fixed;
  inset-block-end: var(--salus-space-6);
  inset-inline-end: var(--salus-space-6);
  z-index: var(--salus-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-2);
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.salus-toast {
  --salus-toast-accent: var(--salus-primary);
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--salus-space-1) var(--salus-space-3);
  padding: var(--salus-space-3) var(--salus-space-4);
  border: 1px solid var(--salus-border);
  border-inline-start: 3px solid var(--salus-toast-accent);
  border-radius: var(--salus-radius-md);
  background-color: var(--salus-surface);
  color: var(--salus-foreground);
  box-shadow: var(--salus-shadow-overlay);
  font-size: var(--salus-text-sm);
}

.salus-toast-icon {
  color: var(--salus-toast-accent);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.salus-toast-title {
  margin: 0;
  font-weight: 600;
}

.salus-toast-body {
  grid-column: 2;
  margin: 0;
  color: var(--salus-muted-foreground);
}

.salus-toast-dismiss {
  grid-row: 1;
  grid-column: 3;
  border: 0;
  background: none;
  padding: 0;
  color: var(--salus-muted-foreground);
  line-height: 1;
  cursor: pointer;
}

.salus-toast--success { --salus-toast-accent: var(--salus-success-solid); }
.salus-toast--warning { --salus-toast-accent: var(--salus-warning-solid); }
.salus-toast--danger  { --salus-toast-accent: var(--salus-destructive); }
.salus-toast--info    { --salus-toast-accent: var(--salus-info-solid); }

/* --- RFC 7807 problem document -------------------------------------------- */

/* Errors are typed problem documents, rendered here as HTML. The partial says
   what failed, why, and offers one action. Nothing fails silently. */
.salus-problem {
  display: flex;
  flex-direction: column;
  gap: var(--salus-space-3);
  padding: var(--salus-card-padding);
  border: 1px solid var(--salus-danger-border);
  border-inline-start: 3px solid var(--salus-destructive);
  border-radius: var(--salus-radius-lg);
  background-color: var(--salus-danger-bg);
  color: var(--salus-danger-fg);
}

.salus-problem-head {
  display: flex;
  align-items: center;
  gap: var(--salus-space-3);
}

.salus-problem-title {
  margin: 0;
  font-family: var(--salus-font-display);
  font-size: var(--salus-text-base);
  font-weight: 600;
  color: inherit;
}

/* The HTTP status, shown because a support ticket is easier to answer with it
   than without it. */
.salus-problem-status {
  margin-inline-start: auto;
  padding: 1px var(--salus-space-2);
  border: 1px solid currentColor;
  border-radius: var(--salus-radius-sm);
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-xs);
  font-weight: 700;
}

.salus-problem-detail {
  margin: 0;
  font-size: var(--salus-text-sm);
  line-height: var(--salus-leading-base);
  color: inherit;
}

/* Field-level violations, when the problem document carries them. */
.salus-problem-errors {
  margin: 0;
  padding-inline-start: var(--salus-space-5);
  font-size: var(--salus-text-sm);
}

.salus-problem-errors code {
  font-family: var(--salus-font-mono);
  color: inherit;
}

.salus-problem-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--salus-space-3);
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-xs);
  opacity: 0.85;
}

.salus-problem-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--salus-space-2);
}

/* A problem rendered inline in a small target, for an htmx swap into a card. */
.salus-problem--inline {
  padding: var(--salus-space-3) var(--salus-space-4);
  border-radius: var(--salus-radius-md);
  font-size: var(--salus-text-sm);
}


/* =============================================================================
 * 22  THE PRINTED REPORT
 * The Full Case Report is a legal document, not app chrome. It uses a serif
 * display face for the claimant name and the section headings, with a gold
 * rule beneath the masthead. That register separation was in the reference
 * product and is worth keeping: a partner reads the report, not the UI.
 * ========================================================================== */

.report {
  --salus-report-measure: 74ch;
  background-color: var(--salus-report-bg);
  color: var(--salus-report-fg);
  font-family: var(--salus-font-body);
  font-size: var(--salus-text-base);
  line-height: 1.65;
  padding: var(--salus-space-12) var(--salus-space-8);
  max-width: 900px;
  margin-inline: auto;
}

.report-masthead {
  margin-block-end: var(--salus-space-10);
}

.report-logo {
  max-width: 180px;
  height: auto;
  margin-block-end: var(--salus-space-10);
}

.report-eyebrow {
  display: block;
  margin: 0 0 var(--salus-space-2);
  font-family: var(--salus-font-serif);
  font-size: var(--salus-text-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--salus-report-eyebrow);
}

/* The gold rule under the masthead. */
.report-rule {
  width: 56px;
  height: 3px;
  margin: 0 0 var(--salus-space-6);
  border: 0;
  border-radius: 2px;
  background-color: var(--salus-report-rule);
  opacity: 1;
}

.report-title {
  margin: 0 0 var(--salus-space-2);
  font-family: var(--salus-font-serif);
  font-size: var(--salus-text-4xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--salus-report-fg);
}

.report-subtitle {
  margin: 0;
  font-size: var(--salus-text-sm);
  color: var(--salus-muted-foreground);
}

.report h2,
.report-section-title {
  margin: var(--salus-space-10) 0 var(--salus-space-4);
  padding-block-end: var(--salus-space-2);
  border-block-end: 1px solid var(--salus-report-border);
  font-family: var(--salus-font-serif);
  font-size: var(--salus-text-2xl);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--salus-report-fg);
}

.report h3 {
  margin: var(--salus-space-6) 0 var(--salus-space-2);
  font-family: var(--salus-font-serif);
  font-size: var(--salus-text-lg);
  font-weight: 700;
}

.report p,
.report li {
  max-width: var(--salus-report-measure);
}

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

/* The definition rows under the masthead: micro-label on the left, value on
   the right, hairline between. */
.report-facts {
  margin: 0 0 var(--salus-space-8);
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
}

.report-facts > dt {
  padding: var(--salus-space-3) 0;
  border-block-end: 1px solid var(--salus-report-border);
  font-size: var(--salus-text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--salus-muted-foreground);
}

.report-facts > dd {
  margin: 0;
  padding: var(--salus-space-3) 0;
  border-block-end: 1px solid var(--salus-report-border);
  font-size: var(--salus-text-sm);
}

/* Citation ordinals are assigned at render, from the citations table, never
   from numbers embedded in the generated prose. */
.report-citation {
  font-family: var(--salus-font-mono);
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  color: var(--salus-report-eyebrow);
  text-decoration: none;
}

.report-appendix {
  margin-block-start: var(--salus-space-10);
  font-size: var(--salus-text-sm);
}

.report-appendix ol {
  padding-inline-start: var(--salus-space-6);
}

.report-appendix li {
  margin-block-end: var(--salus-space-2);
}

/* The mandatory notice at the foot of every report. It is never omitted, and
   sign-off stamps it with the reviewer name and date. */
.report-notice {
  margin-block-start: var(--salus-space-10);
  padding: var(--salus-space-6);
  border: 1px solid var(--salus-report-border);
  border-radius: var(--salus-radius-md);
  background-color: var(--salus-surface-muted);
  font-size: var(--salus-text-sm);
  line-height: 1.6;
}

.report-signoff {
  margin-block-start: var(--salus-space-6);
  padding-block-start: var(--salus-space-4);
  border-block-start: 2px solid var(--salus-report-rule);
  font-size: var(--salus-text-sm);
}

/* A section that could not be produced states its absence. It is never left
   blank, because a silently missing section reads as a section with nothing
   to report. */
.report-absent {
  padding: var(--salus-space-4);
  border: 1px dashed var(--salus-report-border);
  border-radius: var(--salus-radius-md);
  color: var(--salus-muted-foreground);
  font-style: italic;
}

/* The sticky section navigator beside the report. The reference product had no
   way to jump to Gap Analysis in a document of several thousand words. */
.report-nav {
  position: sticky;
  inset-block-start: calc(var(--salus-topbar-height) + var(--salus-space-4));
  align-self: start;
  max-height: calc(100vh - var(--salus-topbar-height) - var(--salus-space-8));
  overflow-y: auto;
  padding: var(--salus-space-4);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-lg);
  background-color: var(--salus-surface);
  font-size: var(--salus-text-sm);
}

.report-nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.report-nav a {
  display: block;
  padding: var(--salus-space-2) var(--salus-space-3);
  border-radius: var(--salus-radius-md);
  color: var(--salus-muted-foreground);
  text-decoration: none;
}

.report-nav a:hover {
  background-color: var(--salus-surface-muted);
  color: var(--salus-foreground);
}

.report-nav a.is-active {
  background-color: var(--salus-accent);
  color: var(--salus-accent-foreground);
  font-weight: 600;
}

/* The report is served into an iframe from the API, so give the frame a
   sensible default and no border of its own. */
.salus-report-frame {
  display: block;
  width: 100%;
  min-height: 70vh;
  border: 0;
  border-radius: var(--salus-radius-lg);
  background-color: var(--salus-report-bg);
}


/* =============================================================================
 * 23  RESPONSIVE BEHAVIOUR
 * At 1280 and above the full layout. From 768 to 1279 the sidebar collapses to
 * the icon rail and two-up grids become one-up. Below 768 the rail becomes an
 * off-canvas drawer and the page is a single readable column.
 * ========================================================================== */

@media (max-width: 1279.98px) {
  .salus-shell {
    padding-inline-start: var(--salus-sidebar-rail);
  }

  .salus-sidebar {
    width: var(--salus-sidebar-rail);
  }

  /* The group label's base rule is `.salus-sidebar-group > .salus-sidebar-group-label`,
     two classes. A media query adds no specificity of its own, so hiding it needs a
     selector of at least equal weight or the base rule keeps winning and the labels
     overflow the rail. */
  .salus-sidebar-link-text,
  .salus-sidebar-brand-text,
  .salus-sidebar-group > .salus-sidebar-group-label,
  .salus-sidebar-user-detail,
  .salus-sidebar-user-detail > span {
    display: none;
  }

  .salus-sidebar-link,
  .salus-sidebar-brand,
  .salus-sidebar-user {
    justify-content: center;
    padding-inline: var(--salus-space-2);
  }

  .salus-sidebar-user {
    width: auto;
  }

  .salus-sidebar-group {
    padding-inline: var(--salus-space-2);
  }

  /* Expanding the rail at this width overlays the content rather than pushing
     it, so the reading column does not jump when the rail is opened. */
  .salus-shell.is-collapsed {
    padding-inline-start: var(--salus-sidebar-rail);
  }

  .salus-sidebar.is-open {
    width: var(--salus-sidebar-width);
    box-shadow: var(--salus-shadow-overlay);
  }

  .salus-sidebar.is-open .salus-sidebar-link-text,
  .salus-sidebar.is-open .salus-sidebar-brand-text,
  .salus-sidebar.is-open .salus-sidebar-group > .salus-sidebar-group-label,
  .salus-sidebar.is-open .salus-sidebar-user-detail {
    display: block;
  }

  .salus-sidebar.is-open .salus-sidebar-link,
  .salus-sidebar.is-open .salus-sidebar-brand,
  .salus-sidebar.is-open .salus-sidebar-user {
    justify-content: flex-start;
    padding-inline: var(--salus-space-3);
  }

  .salus-grid-2,
  .salus-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .salus-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .salus-shell {
    padding-inline-start: 0;
  }

  .salus-shell.is-collapsed {
    padding-inline-start: 0;
  }

  .salus-sidebar {
    width: var(--salus-sidebar-width);
    transform: translateX(-100%);
  }

  .salus-sidebar.is-open {
    transform: none;
  }

  /* The drawer is only rendered as a drawer here, so the backdrop only exists
     here too. */
  .salus-sidebar.is-open ~ .salus-sidebar-backdrop,
  .salus-sidebar-backdrop.is-open {
    display: block;
  }

  .salus-content {
    padding: var(--salus-space-4);
    gap: var(--salus-space-4);
  }

  .salus-topbar {
    padding-inline: var(--salus-space-4);
  }

  .salus-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .salus-facts-strip {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    padding: var(--salus-space-4);
  }

  .salus-card-header,
  .salus-card-body {
    padding-inline: var(--salus-space-4);
  }

  .salus-card-header {
    flex-wrap: wrap;
  }

  .salus-drawer {
    width: 100vw;
  }

  .salus-chat-message {
    max-width: 100%;
  }

  .salus-permission-matrix-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .salus-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .salus-pagination-controls {
    margin-inline-start: 0;
    justify-content: center;
  }

  .salus-toast-region {
    inset-inline: var(--salus-space-3);
    inset-block-end: var(--salus-space-3);
    width: auto;
  }

  .report {
    padding: var(--salus-space-6) var(--salus-space-4);
  }

  .report-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-facts > dt {
    padding-block-end: 0;
    border-block-end: 0;
  }
}

/* The very narrow case. Below 400px the stat card icon would collide with a
   four-digit value, so it is dropped and the accent bar carries the identity. */
@media (max-width: 399.98px) {
  .salus-stat-card-icon {
    display: none;
  }
}


/* =============================================================================
 * 24  PRINT
 * Black on white, no app chrome, serif headings kept. A report printed from a
 * browser is filed in a case folder, so it has to stand on its own.
 * ========================================================================== */

@media print {
  :root {
    --salus-background: #ffffff;
    --salus-foreground: #000000;
    --salus-surface: #ffffff;
    --salus-surface-muted: #ffffff;
    --salus-muted-foreground: #333333;
    --salus-border: #999999;
    --salus-report-bg: #ffffff;
    --salus-report-fg: #000000;
    --salus-report-border: #999999;
  }

  html,
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .salus-sidebar,
  .salus-sidebar-backdrop,
  .salus-topbar,
  .salus-drawer,
  .salus-toast-region,
  .salus-tabs,
  .salus-pagination,
  .salus-page-header-actions,
  .salus-card-header-actions,
  .report-nav,
  .salus-skip-link {
    display: none !important;
  }

  .salus-shell {
    padding-inline-start: 0 !important;
    min-height: 0;
  }

  .salus-content {
    max-width: none;
    padding: 0;
  }

  .salus-card,
  .salus-facts-strip,
  .salus-pillar-card,
  .salus-timeline-card,
  .salus-document-card,
  .salus-processing {
    border-color: #999999 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .report {
    max-width: none;
    padding: 0;
    font-size: 11pt;
  }

  /* The serif register is the whole point of the report, so it survives the
     print stylesheet. The gold rule prints as a black rule. */
  .report-title,
  .report h2,
  .report h3,
  .report-section-title,
  .report-eyebrow {
    font-family: var(--salus-font-serif);
    color: #000000 !important;
  }

  .report-rule,
  .report-signoff {
    background-color: #000000 !important;
    border-color: #000000 !important;
  }

  .report h2,
  .report h3,
  .report-section-title {
    break-after: avoid;
  }

  .report p,
  .report li,
  .report-notice,
  .report-facts {
    break-inside: avoid;
  }

  /* A citation is useless on paper unless the reader can find the source, so
     the appendix ordinal prints as plain text. */
  .report-citation {
    color: #000000 !important;
  }

  .salus-badge,
  .salus-pill,
  .salus-score-pill,
  .salus-lab-flag {
    background: transparent !important;
    color: #000000 !important;
    border-color: #000000 !important;
  }

  a[href]::after {
    content: "";
  }

  @page {
    margin: 18mm 16mm;
  }
}


/* An inline citation reference in a chat answer. */
.salus-chat-cite {
  font-size: 0.7em;
  line-height: 1;
  margin-inline-start: 1px;
}

.salus-chat-cite a {
  color: var(--salus-primary);
  text-decoration: none;
}

.salus-chat-cite a:hover,
.salus-chat-cite a:focus-visible {
  text-decoration: underline;
}

/* Two references to different pages next to each other read as one number without
   this: "1" and "3" and "2" became "132". */
.salus-chat-cite + .salus-chat-cite::before {
  content: ",";
  margin-inline-end: 1px;
}

/* The number on the chip, so an inline reference and the chip it points at are
   visibly the same reference. */
.salus-citation-chip-ordinal {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-inline-end: 0.35rem;
  opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   The notifications popover.

   The fragment was written with these class names and none of them existed, so
   the popover opened as a bulleted list of raw links with the dismiss controls
   as bare multiplication signs. It is the one place a person is told that a
   case they left to run has finished, which is the whole reason the product
   does not block on a long job.
   --------------------------------------------------------------------------- */

.salus-popover {
  width: min(24rem, calc(100vw - var(--salus-space-6)));
  padding: 0;
  overflow: hidden;
  background-color: var(--salus-surface);
  border: 1px solid var(--salus-border);
  border-radius: var(--salus-radius-lg);
  box-shadow: var(--salus-shadow-overlay);
}

.salus-popover-panel {
  display: flex;
  flex-direction: column;
  max-height: min(28rem, 70vh);
}

.salus-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--salus-space-3);
  padding: var(--salus-space-3) var(--salus-space-4);
  border-bottom: 1px solid var(--salus-border);
}

.salus-popover-title {
  margin: 0;
  font-family: var(--salus-font-display);
  font-size: var(--salus-text-base);
  font-weight: 600;
  color: var(--salus-foreground);
}

.salus-popover-empty {
  margin: 0;
  padding: var(--salus-space-5) var(--salus-space-4);
  font-size: var(--salus-text-sm);
  color: var(--salus-muted-foreground);
}

.salus-notification-list {
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.salus-notification {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--salus-space-2);
  padding: var(--salus-space-3) var(--salus-space-4);
  border-bottom: 1px solid var(--salus-border);
}

.salus-notification:last-child {
  border-bottom: 0;
}

/* Unread is a bar down the leading edge rather than a filled row, so a popover
   of eight unread notifications does not read as one solid block of colour. */
.salus-notification.is-unread {
  box-shadow: inset 3px 0 0 0 var(--salus-primary);
}

.salus-notification-link {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.salus-notification-link:hover .salus-notification-title,
.salus-notification-link:focus-visible .salus-notification-title {
  text-decoration: underline;
}

.salus-notification-title {
  margin: 0;
  font-size: var(--salus-text-sm);
  font-weight: 600;
  color: var(--salus-foreground);
}

.salus-notification-body {
  margin: var(--salus-space-1) 0 0;
  font-size: var(--salus-text-sm);
  color: var(--salus-muted-foreground);
  overflow-wrap: anywhere;
}

.salus-notification-when {
  margin: var(--salus-space-1) 0 0;
  font-family: var(--salus-font-mono);
  font-size: var(--salus-text-xs);
  color: var(--salus-muted-foreground);
}

.salus-notification-dismiss {
  flex: 0 0 auto;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--salus-text-base);
  line-height: 1;
  color: var(--salus-muted-foreground);
  background: transparent;
  border: 0;
  border-radius: var(--salus-radius-sm);
  cursor: pointer;
}

.salus-notification-dismiss:hover,
.salus-notification-dismiss:focus-visible {
  color: var(--salus-foreground);
  background-color: var(--salus-surface-muted);
}

/* =============================================================================
 * 25  THE PLATFORM CONSOLE
 * The operator's screens, which belong to no firm. Built on the same tokens as
 * everything else on purpose: a second visual language for one area would make a
 * reader wonder whether they had left the product, when the thing that has to be
 * obvious is standing above the firms rather than outside the application.
 *
 * The charts are HTML rather than SVG so a column inherits the theme's own colours
 * and the type scale, and so the keyboard reaches every one of them. A chart nobody
 * can tab through excludes the reader most likely to be on this screen at 6am.
 * ========================================================================== */

.salus-platform-lede {
  border-block-start: 3px solid var(--salus-primary);
  padding-block-start: 1.25rem;
  margin-block-end: 2rem;
  max-inline-size: 62ch;
}

/* The verdict carries the page: the only thing set larger than body copy, so it
 * reads from across a desk while the detail below rewards sitting down. */
.salus-platform-verdict {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.5rem;
}

.salus-platform-verdict-busy {
  color: var(--salus-primary);
}

.salus-platform-summary {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--salus-muted-foreground);
  margin: 0;
}

/* Exceptions are a list of sentences, not cards: they are things to do, and a
 * person reads a list of things to do from the top. Tone is a bar down the leading
 * edge, which distinguishes without turning four items into four colour fields. */
.salus-platform-attention {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.salus-platform-attention li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 0.625rem 0.875rem;
  border-inline-start: 3px solid var(--salus-border);
  background-color: var(--salus-surface-muted);
  border-radius: 0 0.375rem 0.375rem 0;
  line-height: 1.5;
}

.salus-platform-attention li > span { flex: 1 1 24ch; }
.salus-platform-attention-critical { border-inline-start-color: var(--salus-destructive); }
.salus-platform-attention-warning { border-inline-start-color: var(--salus-warning-fg, #92400e); }
.salus-platform-attention-notice { border-inline-start-color: var(--salus-primary); }
.salus-platform-attention a { font-weight: 600; white-space: nowrap; }

/* Panels sit on a grid that collapses at one breakpoint rather than several: the
 * content is either three abreast or stacked, and the sizes in between draw badly. */
.salus-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.25rem;
  margin-block-end: 1.25rem;
}

.salus-panel {
  background-color: var(--salus-surface);
  border: 1px solid var(--salus-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

.salus-panel-wide { margin-block-end: 1.25rem; }

.salus-panel-head { margin-block-end: 1rem; }

.salus-panel-head h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.salus-panel-head p {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  color: var(--salus-muted-foreground);
}

/* The chart. Columns share the space, the tallest reaches the top, and the value
 * is on hover and on focus rather than printed above every bar: a number on each
 * column turns a shape you read at a glance into a table you have to parse. */
.salus-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  block-size: 7.5rem;
  padding-block-start: 0.5rem;
}

.salus-chart-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  block-size: 100%;
  border-radius: 0.25rem;
  cursor: default;
}

.salus-chart-col:focus-visible {
  outline: 2px solid var(--salus-ring);
  outline-offset: 2px;
}

/* Rounded at the data end and square on the baseline, so the bar is anchored to
 * the axis rather than floating above it. */
.salus-chart-bar {
  background-color: var(--salus-primary);
  border-radius: 0.25rem 0.25rem 0 0;
  min-block-size: 2px;
  transition: opacity 0.12s ease;
}

.salus-chart-col:hover .salus-chart-bar,
.salus-chart-col:focus-visible .salus-chart-bar { opacity: 0.78; }

.salus-chart-spend .salus-chart-bar { background-color: #7a5195; }
.salus-chart-good .salus-chart-bar { background-color: var(--salus-success-solid, #157347); }

.salus-chart-tick {
  margin-block-start: 0.375rem;
  font-size: 0.6875rem;
  line-height: 1;
  text-align: center;
  color: var(--salus-muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* Share of the platform's work, behind the figure it belongs to, so firms are
 * compared without the reader doing the division. */
.salus-inline-bar {
  display: inline-block;
  inline-size: 3.5rem;
  block-size: 0.4rem;
  margin-inline-end: 0.5rem;
  border-radius: 0.2rem;
  background-color: var(--salus-surface-muted);
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}

.salus-inline-bar::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--share, 0%);
  background-color: var(--salus-primary);
  opacity: 0.55;
}

.salus-num { font-variant-numeric: tabular-nums; }

.salus-platform-table tfoot th,
.salus-platform-table tfoot td {
  border-block-start: 2px solid var(--salus-border);
  font-weight: 600;
}

.salus-platform-note {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--salus-muted-foreground);
  max-inline-size: 72ch;
}

/* A definition list rather than tiles: the label is the question and the figure is
 * the answer, so neither has to be guessed at from position. */
.salus-platform-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0;
  background-color: var(--salus-border);
  border: 1px solid var(--salus-border);
  border-radius: 0.375rem;
  overflow: hidden;
}

.salus-platform-facts > div {
  background-color: var(--salus-surface);
  padding: 0.75rem 0.875rem;
}

.salus-platform-facts dt {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--salus-muted-foreground);
  margin: 0 0 0.25rem;
  line-height: 1.35;
}

.salus-platform-facts dd {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.salus-platform-go {
  display: inline-block;
  margin-block-start: 1rem;
  margin-inline-end: 1.25rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .salus-chart-bar { transition: none; }
}