/* GENERATED FILE — DO NOT EDIT.
 * Built from 01-tokens → 06-workflows by scripts/build-css.mjs (npm run css:build).
 * Edit the numbered layer files; hand edits here are overwritten.
 */
/* ===== 01-tokens.css ===== */
/* ---------------------------------------------------------------------------
 * Self-hosted webfonts (PERF-ASSET-01)
 *
 * Previously two render-blocking stylesheets from fonts.googleapis.com, which
 * also handed Google the client IP and the Referer — and PSM URL paths carry
 * patient/batch identifiers. Serving the woff2 from our own origin removes both
 * the third-party round trips and the disclosure.
 *
 * Inter is a single variable file per subset (Google serves the same woff2 for
 * 400/500/600/700), so one @font-face per subset covers every weight we use.
 * Material Symbols is a static instance subset to the 20 ligatures the app
 * actually renders — regenerate it (see sources below) when adding a new icon.
 *
 *   Inter v20             fonts.gstatic.com/s/inter/v20 (latin, latin-ext)
 *   Material Symbols v362 fonts.googleapis.com/css2?...&icon_names=<comma list>
 *
 * The woff2 live under css/fonts/ rather than a top-level /fonts/ because
 * SecurityConfig permits /css/** anonymously and the login screen needs both
 * Inter and the visibility icons before a session exists. It also puts them
 * inside the content-hashed resource chain (/css/**) for free.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/css/fonts/inter-v20-latin-260c81a4759baf163c025001c4f27872.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/css/fonts/inter-v20-latin-ext-1ad231aac0a8a891b8374aa5526a5813.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* font-display: block — icons are glyphs, not text. A swap period would paint
 * the raw ligature name ("account_circle") in the fallback font first. The file
 * is ~4 KB and preloaded, so the block period is not a real stall. */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/css/fonts/material-symbols-outlined-v362-subset-558b45284bd5fe3647ab10e4fa0948f3.woff2") format("woff2");
}

/*
 * STAB-BUG-73 / PERF-ASSET-01 follow-up: Google’s Material Symbols stylesheet
 * used to ship both @font-face and this utility class. Self-hosting kept only
 * @font-face, so spans with class material-symbols-outlined (login visibility,
 * settings nav, profile menu) fell back to Inter and painted ligature names.
 * .nav-list__icon already sets font-family — sidenav kept working.
 *
 * Subset icon_names (regenerate woff2 when adding an icon):
 * account_circle,dashboard,description,domain,fact_check,forward_to_inbox,group,
 * history,keyboard_return,logout,mail,medical_services,monitoring,pending_actions,
 * receipt_long,send,settings,shield_person,visibility,visibility_off
 */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
  user-select: none;
}

:root {
  /* -------------------------------------------------------------------------
   * L1 — v3 primitives (DESIGN-SYSTEM-V3-01 / ADR-018)
   * Authoritative values from design-system-v3-preview.html renderVals().
   * Neutral + CTA values RE-BASELINED to the org-admin Figma palette per
   * ADR-020 (DESIGN-REBASELINE Phase 0, D1/D2). Prior v3 values kept in the
   * trailing comments for provenance.
   * ------------------------------------------------------------------------- */
  --neutral-bg-page: #fafafa;
  --neutral-bg-0: var(--neutral-bg-page);
  --neutral-bg-1: #ffffff;
  --neutral-bg-2: #f3f3f3;            /* ADR-020 D1 (was #f4f5f5) — muted fill */
  --neutral-bg-hover: #efeff1;
  --neutral-bg-subtle: var(--neutral-bg-hover); /* underline fields, setup progress track */
  --neutral-bg-selected: #ecf5f9;
  --neutral-bg-input: #ffffff;
  --neutral-fg-1: #141414;            /* ADR-020 D1 (was #131416) — absorbs #242424/#000 text */
  --neutral-fg-2: #707070;            /* ADR-020 D1 (was #565a61) — hints/placeholder/muted */
  --neutral-fg-3: #838791;
  --neutral-border-1: #e4e4e4;        /* ADR-020 D1 (was #e4e5e7) — absorbs #e1e1e1/#e0e0e0 */
  --neutral-border-2: #d8d8d8;        /* ADR-020 D1 (was #ced0d4) — step/checkbox/rail borders */
  --neutral-fg-disabled: #acacac;     /* ADR-020 D1 (new) — disabled text/icons */
  --neutral-bg-disabled: #c8c8c8;     /* ADR-020 D1 (new) — disabled primary fill */

  /* RemitMAIL Brand Guidelines — logo palette (primary + secondary). */
  --brand-remit-blue: #0e72a0;
  --brand-midnight-navy: #0a1628;
  --brand-bright-azure: #3f82ff;
  --brand-arctic-cyan: #77fff9;
  --brand-cloud-mist: #e2e9f2;
  --brand-soft-white: var(--neutral-bg-page);
  --brand-graphite: #2d2d2d;
  /* Logo crest / hero gradient — Midnight Navy → Remit Blue. */
  --brand-logo-gradient-start: var(--brand-midnight-navy);
  --brand-logo-gradient-end: var(--brand-remit-blue);

  --brand-fg-1: var(--brand-remit-blue);
  --brand-bg-subtle: #ecf5f9;
  --brand-bg-1: var(--brand-bg-subtle);
  --brand-fg-on: #ffffff;
  --brand-border-focus: var(--brand-remit-blue);

  /* ADR-020 D3 — control accent: interactive/selected state blue (focus ring,
   * checked checkbox/radio, current stepper). Distinct from --brand-fg-1
   * (CTAs/links/identity). Reverses DESIGN-REBASELINE-01 "Figma slip" verdict. */
  --control-accent: #2175b5;
  --control-accent-ring: rgba(33, 117, 181, 0.25);

  --cta-bg: var(--brand-remit-blue);                  /* ADR-020 D2 — brand-blue CTA app-wide */
  --cta-fg: #ffffff;
  --cta-bg-hover: #0c6590;            /* ADR-020 D2 (was #18191b) — darkened brand blue */
  --cta-bg-disabled: #a9c8d8;          /* USER-ONBOARD-SETUP-01 — disabled setup CTA */

  /* Org/setup crests — logo palette only (not theme swatches). */
  --auth-setup-crest-blue-start: var(--brand-logo-gradient-start);
  --auth-setup-crest-blue-end: var(--brand-logo-gradient-end);

  --theme-picker-swatch-shadow: 0 1px 3px color-mix(in srgb, var(--neutral-fg-1) 22%, transparent);
  --theme-picker-menu-shadow:
    0 0 0 1px color-mix(in srgb, var(--neutral-fg-1) 5%, transparent),
    0 2px 6px color-mix(in srgb, var(--neutral-fg-1) 5%, transparent),
    0 12px 24px -8px color-mix(in srgb, var(--neutral-fg-1) 14%, transparent),
    0 28px 52px -18px color-mix(in srgb, var(--neutral-fg-1) 28%, transparent);

  --secondary-bg: #efeff1;
  --secondary-fg: #18191b;
  --secondary-border: #d9dbdd;
  --secondary-bg-hover: #e4e5e7;

  --theme-swatch-blue: var(--brand-remit-blue);
  --theme-swatch-green: #2f855a;

  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-2: 0 6px 16px -2px rgba(0, 0, 0, 0.08);
  --focus-ring: 0 0 0 3px rgba(14, 114, 160, 0.3);

  /* Text field focus — Figma 769:1118 (Remit Mail) */
  --input-focus-border: var(--control-accent);   /* ADR-020 D3 — was #2175b5 literal */
  --input-focus-shadow: 0 0 0 4px rgba(14, 114, 160, 0.1);
  --input-focus-radius: 8px;
  --input-focus-bg: #ffffff;
  --input-padding: 12px;
  --input-focus-transition: border-color 0.15s ease, box-shadow 0.15s ease, border-radius 0.15s ease;
  --input-focus-error-border: #b52124;
  --input-focus-error-shadow: 0 0 0 4px rgba(181, 33, 36, 0.12);
  /* STAB-UAT-206: one app-wide placeholder tint — softer than filled (--neutral-fg-1).
   * Derived from --neutral-fg-2 so themes stay relative; alpha via color-mix so
   * ::placeholder and select/menu label fakes share the same token (no per-rule opacity). */
  --input-placeholder: color-mix(in srgb, var(--neutral-fg-2) 62%, transparent);
  /* STAB-UAT-207: Practice filter/upload menu closed-trigger width (ellipsis + title). */
  --practice-menu-width: 14rem;

  --status-success-bg: #e8f5e8;
  --status-success-fg: #0e700e;
  --status-success-border: #9cd69c;
  --status-warning-bg: #fff4df;
  --status-warning-fg: #bc4b09;
  --status-warning-border: #f0c878;
  --status-info-bg: #ecf5f9;
  --status-info-fg: var(--brand-remit-blue);
  --status-info-border: #8dcbe7;
  --status-error-bg: #ffe9e9;
  --status-error-fg: #b52124;          /* ADR-020 D4 (was #c62828) — unified house error red */
  --status-error-fg-strong: #9c0000;   /* ADR-020 D4 (new) — hover/pressed error */
  --status-error-border: #e57373;
  --status-success-on-dark: #1f2937;   /* Figma dark success pill */
  --status-on-dark-bg: var(--status-success-on-dark); /* Audit Logs outcome success pill */

  /* -------------------------------------------------------------------------
   * L2 — PSM legacy aliases (consumers unchanged through W3)
   * ------------------------------------------------------------------------- */
  --color-bg: var(--neutral-bg-page);
  --color-surface: var(--neutral-bg-1);
  --color-on-brand: var(--brand-fg-on);
  --color-surface-muted: var(--neutral-bg-2);
  --color-border: var(--neutral-border-1);
  --color-border-subtle: var(--neutral-border-1); /* DI-NOTIFY-01 — alias fixing an undefined reference in 05-components.css */
  --color-border-strong: var(--neutral-border-2);
  --color-text: var(--neutral-fg-1);
  --color-text-muted: var(--neutral-fg-2);
  --color-text-subtle: var(--neutral-fg-3);
  --color-transparent: transparent;
  --color-brand: var(--brand-fg-1);
  --color-brand-bg: var(--brand-bg-subtle);

  /* -------------------------------------------------------------------------
   * L3 — PSM domain-only (names retained; not renamed to v3)
   * ------------------------------------------------------------------------- */
  --color-upstream: var(--brand-remit-blue);
  --color-upstream-bg: #ecf5f9;
  --color-posting: #0f766e;
  --color-posting-bg: #e6f7f5;
  --color-system: #5b3cc4;
  --color-system-bg: #f1edff;
  --color-operator: #b45309;
  --color-operator-bg: #fff2e8;
  --color-error: #b52124;   /* ADR-020 D4 — aligned to --status-error-fg (was #c62828) */
  --color-error-bg: #ffe9e9;
  --color-warning: #b7791f;
  --color-warning-bg: #fff4df;
  --color-success: #2f855a;
  --color-success-bg: #e8f8ef;

  --stat-accent-success: var(--color-success);
  --stat-accent-info: var(--color-upstream);
  --stat-accent-warning: var(--color-warning);
  --stat-accent-neutral: var(--color-text-muted);

  --phase-ingestion: #ecf5f9;
  --phase-generation: #e6f7f5;
  --phase-reconciliation: #fff4df;
  --phase-approval: #f1edff;
  --phase-fulfillment: #fff2e8;
  --phase-tracking: #f4f5f5;

  --onboard-swatch-blue: #1e40af;
  --onboard-swatch-green: #15803d;
  --onboard-swatch-teal: #0f766e;
  --onboard-swatch-slate: #334155;
  --onboard-swatch-maroon: #7f1d1d;

  /* Base metrics */
  --font-size-root: 16px;
  --text-size-adjust: 100%;
  --line-height-base: 1.5;
  --size-px: 1px;
  --size-2px: 2px;
  --size-4px: 4px;
  --layout-fr: 1fr;
  --full-width: 100%;
  --full-height-viewport: 100vh;

  /* Typography */
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.75rem;   /* ADR-020 D5 (was 0.6875rem/11px) — 12px to match Figma hints */
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.0625rem;
  --text-2xl: 1.25rem;
  --text-page-title: 1.5rem;
  /* Dashboard welcome-banner greeting — the largest type in the app (A1 mock). */
  --text-greeting: 1.75rem;
  --text-stat-value: 1.875rem;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-1-neg: -1px;
  --space-badge-y: 0.125rem;
  --space-badge-x: 0.5rem;

  /* Radius & shadow (v3 preview scale) */
  --radius-sm: 6px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-input: 12px;   /* ADR-020 D5 (new) — softer Figma input/summary-card corner */
  --radius-logo-mark: 7px;
  --shadow-subtle: var(--shadow-1);
  --shadow-card: var(--shadow-2);
  --shadow-modal: var(--shadow-2);

  /* Overlay — ADR-020 D5 (new). Drawer/modal backdrop; value from shipped
   * practice-drawer scrim. Supersedes the ad-hoc rgba(57,57,57,0.2). */
  --scrim: rgba(20, 20, 20, 0.45);

  /* Layout */
  --sidebar-width: 240px;
  --header-height: 52px;
  --content-padding: 1.5rem;
  --topbar-padding-x: 1.5rem;
  /* Fulfillment queue KPI strip — scoped to .fulfillment-cards only (not app-main).
   * STAB-LP-08/10: keep mock card-row padding 9px 299px 2px (no new color tokens). */
  --fulfillment-cards-padding-top: 9px;
  --fulfillment-cards-padding-x: 299px;
  --fulfillment-cards-padding-bottom: 2px;
  --fulfillment-cards-gap: var(--space-4);
  /* STAB-LP-15 screenshot lift — hover + selected only.
   * Ink is L1 (#143324 ≡ rgb(20,51,36)); composite uses color-mix — no raw rgba in consumers. */
  --fq-card-shadow-ink: #143324;
  --fq-card-lift: -10px;
  --fq-card-shadow: 0 18px 30px -16px color-mix(in srgb, var(--fq-card-shadow-ink) 32%, transparent);
  --content-max-width: none;
  --auth-card-max-width: 25rem;
  --batch-summary-min-width: 8.75rem;

  /* Breakpoints (reference) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Effects & interaction */
  --opacity-hidden: 0;
  --opacity-visible: 1;
  --opacity-disabled: 0.5;
  --transition-fast: 0.2s;
  --outline-width: 2px;
  --outline-offset: 2px;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.04em;
  --letter-spacing-nav-label: 0.09em;
  --letter-spacing-tight: -0.02em;
}

/* Theme preset: Corporate Blue (default — preview golden master) */
/* Neutral values RE-BASELINED to org-admin Figma palette per ADR-020 D1;
   must mirror :root exactly (this is the default theme and overrides :root). */
:root[data-theme="corporate-blue"] {
  --neutral-bg-page: #fafafa;
  --neutral-bg-1: #ffffff;
  --neutral-bg-2: #f3f3f3;            /* ADR-020 D1 (was #f4f5f5) */
  --neutral-bg-hover: #efeff1;
  --neutral-bg-selected: #ecf5f9;
  --neutral-fg-1: #141414;            /* ADR-020 D1 (was #131416) */
  --neutral-fg-2: #707070;            /* ADR-020 D1 (was #565a61) */
  --neutral-fg-3: #838791;
  --neutral-border-1: #e4e4e4;        /* ADR-020 D1 (was #e4e5e7) */
  --neutral-border-2: #d8d8d8;        /* ADR-020 D1 (was #ced0d4) */
  --brand-fg-1: var(--brand-remit-blue);
  --brand-bg-subtle: #ecf5f9;
  --theme-swatch-blue: var(--brand-remit-blue);
  /* CTA + control-accent + L3 workflow tokens: :root only (AC-07) */
}

/* Theme preset: Corporate Green */
/* ADR-020 note: green neutrals are an intentional green-tinted system, NOT the
   grey Figma palette re-baselined in D1 — no green Figma reference exists yet,
   so they are left as-is pending a green source (tracked as ADR-020 follow-up). */
:root[data-theme="corporate-green"] {
  --neutral-bg-page: #f2faf5;
  --neutral-bg-1: #ffffff;
  --neutral-bg-2: #ebf7ef;
  --neutral-bg-hover: #e3f2e8;
  --neutral-bg-selected: #e6f7ee;
  --neutral-fg-1: #143324;
  --neutral-fg-2: #5b7a69;
  --neutral-fg-3: #355746;
  --neutral-border-1: #cfe5d6;
  --neutral-border-2: #afceb8;
  --brand-fg-1: #2f855a;
  --brand-bg-subtle: #e6f7ee;
  --theme-swatch-green: #2f855a;
  /* D2 makes the :root CTA brand-blue; without this override a green-themed
     shell would render a blue primary. Architect default (CTA follows brand
     per theme) — confirm against D2's "app-wide blue" intent if green ships. */
  --cta-bg: #2f855a;
  --cta-bg-hover: #276b48;
  --control-accent: #2f855a;   /* selected-state accent tracks green brand */
  --control-accent-ring: rgba(47, 133, 90, 0.25);
  /* L3 workflow tokens: :root only (AC-07) */
}

/*
 * Adding a third theme preset:
 * 1. Copy a :root[data-theme="corporate-blue"] block and rename the attribute value.
 * 2. Override L1 neutral + brand tokens as needed.
 * 3. Keep workflow semantic tokens (--color-error, --color-success, actor colors) stable across themes.
 * 4. Register the value in theme-switcher.js ALLOWED_THEMES and add UI option/swatch in auth + profile menu.
 */

/* ===== 02-base.css ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-root);
  -webkit-text-size-adjust: var(--text-size-adjust);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4, p {
  margin: 0;
}

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

a:hover {
  text-decoration: underline;
}

button, input, select, textarea {
  font: inherit;
}

img {
  max-width: var(--full-width);
}

:focus-visible {
  outline: var(--outline-width) solid var(--color-brand);
  outline-offset: var(--outline-offset);
}

.text-error {
  color: var(--color-error);
}

/* ===== 03-layout.css ===== */
.app-shell {
  min-height: var(--full-height-viewport);
}

.app-shell--with-sidebar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: var(--full-height-viewport);
  background: var(--color-bg);
}

.app-column {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: var(--full-height-viewport);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 12px 24px;
  background: var(--neutral-bg-1);
  border-bottom: 1px solid var(--neutral-border-1);
  box-shadow: none;
  height: auto;
}

.app-body {
  display: flex;
  min-height: calc(var(--full-height-viewport) - var(--header-height));
}

.app-sidebar {
  display: none;
  width: var(--sidebar-width);
  flex-shrink: 0;
  min-height: var(--full-height-viewport);
  /* A1 mock: sidebar + header are white; only the content area is page-grey. */
  background: var(--neutral-bg-1);
  border-right: 1px solid var(--neutral-border-1);
  /* A1 mock: 12px side gutter, 24px bottom, no top (brand sets its own height). */
  padding: 0 var(--space-3) var(--space-6);
  flex-direction: column;
  /* Vertical rhythm comes from .sidenav__brand's margin + group-label padding,
     not a container gap — matches the mock's flat 2px item rhythm. */
  gap: 0;
  box-sizing: border-box;
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;
  /* A1 mock: content gutter matches the vertical rhythm (24px), not 48px. */
  padding: var(--space-6);
  width: var(--full-width);
  background: var(--color-bg);
}

.page-header {
  margin-bottom: var(--space-6);
}

.page-header h1 {
  font-size: var(--text-page-title);
  font-weight: var(--font-semibold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.2;
}

.page-header p {
  margin-top: var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--text-base);
}

.page-header__markers {
  margin-top: var(--space-2);
  margin-bottom: 0;
  font-size: var(--text-sm);
}

.page-header--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.page-header--split .page-header__main {
  flex: 1 1 16rem;
  min-width: 0;
}

.page-header--split .btn--secondary.btn--sm {
  flex-shrink: 0;
}

.auth-layout {
  min-height: var(--full-height-viewport);
  display: grid;
  place-items: center;
  padding: var(--space-6);
}

.auth-layout--split {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  place-items: stretch;
  padding: 0;
  background: var(--color-bg);
}

/* DI-AUTH-02 (sponsor marketing-hero reference, 2026-07-22): full marketing
   panel — brand lockup at top, then badge / title / subtitle / feature list /
   analytics mock / trust footer, flowing top-to-bottom and vertically centred.
   Midnight Navy -> Remit Blue diagonal (RemitMAIL brand guidelines), keyed to
   --brand-midnight-navy + --brand-remit-blue tokens.
   Accessibility: all decorative accents are color-mix of brand/white; body/label
   text is >=4.5:1 on the navy ground. */
.auth-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Brand pinned top; marketing content centred in the space below it via the
     content's own auto block-margins (see .auth-hero__content). */
  gap: 0;
  justify-content: flex-start;
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  overflow-y: auto;
  color: var(--color-on-brand);
  background:
    radial-gradient(ellipse 70% 55% at 18% 8%, color-mix(in srgb, var(--color-brand) 42%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--brand-midnight-navy) 0%, color-mix(in srgb, var(--color-brand) 88%, var(--brand-midnight-navy)) 100%);
}

.auth-hero__brand {
  position: relative;
  z-index: 1;
  flex: none;
  align-self: flex-start;
}

.auth-hero__logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: min(240px, 100%);
  object-fit: contain;
  object-position: left center;
  /* Primary horizontal lockup — white on navy/brand gradient (remitmail-logo-horizontal.png). */
  filter: brightness(0) invert(1);
}

.auth-hero__content {
  position: relative;
  z-index: 1;
  max-width: 33rem;
  display: flex;
  flex-direction: column;
  /* auto top+bottom margins centre this block between the pinned brand and the
     hero's bottom edge; collapse to 0 when there's no free space. */
  margin-block: auto;
}

/* Enterprise Security pill */
.auth-hero__badge {
  align-self: flex-start;
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-brand) 30%, transparent);
  color: color-mix(in srgb, var(--color-brand) 45%, white);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.auth-hero__title {
  margin: var(--space-5) 0 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--font-bold);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-tight);
}

.auth-hero__features {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-hero__feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.auth-hero__feature strong {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.auth-hero__feature-icon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-brand) 60%, white);
  color: var(--brand-midnight-navy);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Analytics mock card */
.auth-hero__mockup {
  margin-top: var(--space-6);
  border: var(--size-px) solid color-mix(in srgb, var(--color-on-brand) 12%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--brand-midnight-navy) 55%, transparent);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

.auth-hero__mockup-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: var(--size-px) solid color-mix(in srgb, var(--color-on-brand) 10%, transparent);
}

.auth-hero__mockup-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-on-brand) 30%, transparent);
}

.auth-hero__mockup-label {
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--color-on-brand) 60%, transparent);
}

.auth-hero__mockup-body {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-brand) 45%, white);
}

/* Trust footer */
.auth-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--size-px) solid color-mix(in srgb, var(--color-on-brand) 12%, transparent);
}

.auth-hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: color-mix(in srgb, var(--color-on-brand) 60%, transparent);
}

.auth-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface);
}

.auth-panel__toolbar {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.auth-panel__body {
  width: var(--full-width);
  max-width: var(--auth-card-max-width);
  margin-inline: auto;
}

.auth-card {
  width: var(--full-width);
  max-width: var(--auth-card-max-width);
  background: var(--color-surface);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
}

.auth-layout--split .auth-card {
  border: none;
  box-shadow: none;
  padding: 0;
  width: var(--full-width);
  max-width: var(--auth-card-max-width);
  margin-inline: auto;
}

.auth-card__header h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--letter-spacing-tight);
}

.auth-card__header p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.auth-card__footer-note {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .auth-layout--split {
    grid-template-columns: 1fr;
  }

  .auth-hero {
    gap: var(--space-6);
    padding: var(--space-6);
  }

  /* Short top band on mobile — flow normally, don't centre in cramped space. */
  .auth-hero__content {
    margin-block: 0;
  }

  .auth-hero__title {
    font-size: var(--text-2xl);
  }

  /* On a single column the trust footer adds length without adding value
     above the form — collapse it so the login stays reachable. */
  .auth-hero__trust {
    display: none;
  }

  .auth-panel {
    position: relative;
    padding: var(--space-8) var(--space-6) var(--space-6);
  }
}

.sidenav__brand {
  display: flex;
  align-items: center;
  margin: 0;
  /* Sponsor: 18px top inset — matches sidenav group-label rhythm (1.125rem). */
  padding: 1.125rem 0 0 0;
  width: 100%;
  min-height: var(--header-height);
  border-radius: 4px;
  border-bottom: none;
  text-decoration: none;
  color: var(--neutral-fg-1);
  flex-shrink: 0;
  box-sizing: border-box;
}

.sidenav__brand:hover {
  text-decoration: none;
  color: var(--neutral-fg-1);
}

.sidenav__logo-mark {
  display: block;
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}

.sidenav__wordmark {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  /* A1 mock: brand wordmark is the largest text in the sidebar. */
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--neutral-fg-1);
}

/* DASH-01-W6 — brand block at top (A1 mock .5rem inset); org card pinned to bottom. */
.sidenav__brand-block {
  margin: 0 0 0.875rem;
  padding: 0 var(--space-2);
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
}

.sidenav__org-card {
  display: flex;
  align-items: center;
  /* Match .nav-list row rhythm (icon gap + padding). */
  gap: 0.75rem;
  margin-top: auto;
  padding: 0.625rem 0.6875rem;
  width: 100%;
  max-width: 100%;
  border: var(--size-px) solid var(--neutral-border-1);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-sizing: border-box;
  min-width: 0;
  flex-shrink: 0;
}

.sidenav__org-crest {
  display: grid;
  place-items: center;
  width: calc(var(--space-6) + var(--space-3));
  height: calc(var(--space-6) + var(--space-3));
  flex: none;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    var(--brand-logo-gradient-start) 0%,
    var(--brand-logo-gradient-end) 100%
  );
  color: var(--color-on-brand);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: 1;
}

.sidenav__org-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidenav__org-name {
  margin: 0;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: 1.4;
  color: var(--neutral-fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidenav__org-role {
  margin: 0;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: 1.3;
  color: var(--color-text-muted);
}

.sidenav__nav {
  display: flex;
  flex-direction: column;
  /* Group separation is carried by .sidenav__group-label's padding-top (A1 mock). */
  gap: 0;
  flex: 1;
  overflow: auto;
  padding: 0;
  min-height: 0;
}

.sidenav__group {
  display: flex;
  flex-direction: column;
  /* Label-to-items gap is the label's own padding-bottom. */
  gap: 0;
  width: 100%;
}

.sidenav__group + .sidenav__group {
  margin-top: 0;
}

/* A1 mock spec: 18px above / 7px below is what separates one group from the next. */
.sidenav__group-label {
  margin: 0;
  padding: 1.125rem var(--space-2) 0.4375rem;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-fg-3);
}

/* The first label sits directly under the brand block — extra top spacing after logo. */
.sidenav__group:first-child .sidenav__group-label {
  padding-top: var(--space-5);
}

.sidenav__group-label:empty {
  display: none;
}

.topnav__brand {
  font-weight: var(--font-medium);
  font-size: inherit;
  color: var(--neutral-fg-3);
  text-decoration: none;
}

.topnav__brand:hover {
  text-decoration: none;
  color: var(--neutral-fg-3);
}

.topnav__title {
  display: block;
  margin: 0;
  padding: 6px 0;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topnav__sep {
  color: var(--neutral-fg-3);
}

.topnav__crumb {
  font-size: inherit;
  font-weight: var(--font-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topnav__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 0;
}

.topnav__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--neutral-fg-2);
}

.topnav__breadcrumb-link {
  color: var(--neutral-fg-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.topnav__breadcrumb-link:hover {
  color: var(--neutral-fg-2);
  text-decoration: underline;
}

.topnav__breadcrumb-sep {
  color: var(--neutral-fg-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  flex-shrink: 0;
}

.topnav__breadcrumb-current {
  /* A1 mock: the current page is the anchor — darker + medium weight.
     Ancestor links + separator stay muted (--neutral-fg-2). */
  color: var(--neutral-fg-1);
  font-size: 14px;
  font-weight: var(--font-medium);
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topnav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  /* backlog #11 regression fix: .topnav__inner uses justify-content: space-between
     across its direct children, which only pins this to the right when a sibling
     (the breadcrumb nav) is also present. Since the plain-title case was removed
     (backlog #10), most pages have no such sibling, so this became the sole flex
     child and space-between placed it at flex-start instead. margin-left: auto
     pins it right regardless of how many siblings exist. */
  margin-left: auto;
}

.topnav__tools {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topnav__tools > .topnav-menu,
.topnav__tools > .topnav__icon-btn,
.topnav__tools > .entity-switcher,
.topnav__tools > .entity-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

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

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Matches the 1.25rem rhythm used between dashboard sections. */
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.stat-card {
  background: var(--color-surface);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  padding: var(--space-4) 1.125rem;
}

.stat-card__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  /* ADR-020 / A1 mock: sentence case, not uppercase tracking. */
  letter-spacing: 0;
  color: var(--color-text-muted);
}

.stat-card__value {
  margin-top: var(--space-2);
  font-size: var(--text-stat-value);
  font-weight: var(--font-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1;
  color: var(--color-text);
}

.stat-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The shared .stat-card (05-components) is display:flex row for the medallion
   icon+text cards. Link cards in a panel-grid stack their content instead, so
   re-assert column flow at higher specificity (2 classes beat 1). gap:0 because
   these cards space children via the elements' own margins, not a flex gap. */
.panel-grid .stat-card--link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* Value + hint share one baseline-aligned row (hint adjacent to the number,
   not stacked below it). */
.panel-grid .stat-card__figure {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.panel-grid .stat-card__figure .stat-card__value,
.panel-grid .stat-card__figure .stat-card__hint {
  margin-top: 0;
}

.stat-card--link:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-subtle);
  /* the card is an <a>; suppress the global a:hover underline on its text */
  text-decoration: none;
}

.stat-card__hint {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.stat-card--accent-success {
  border-top: var(--size-2px) solid var(--stat-accent-success);
}

.stat-card--accent-info {
  border-top: var(--size-2px) solid var(--stat-accent-info);
}

.stat-card--accent-warning {
  border-top: var(--size-2px) solid var(--stat-accent-warning);
}

.stat-card--accent-neutral {
  border-top: var(--size-2px) solid var(--stat-accent-neutral);
}

.period-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  border: var(--size-px) solid var(--color-border);
  background: var(--color-surface-muted);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.stat-card__action {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.panel-grid {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.card-panel {
  overflow: hidden;
  background: var(--color-surface);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
}

.card-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--size-px) solid var(--color-border);
}

.card-panel__header h2 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.list-divider {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-divider > li + li {
  border-top: var(--size-px) solid var(--color-border);
}

.list-divider li {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}

.empty-state {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.table-wrap {
  overflow: hidden;
  background: var(--color-surface);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .app-shell--with-sidebar .app-sidebar {
    display: flex;
  }

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

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

/* ===== 04-utilities.css ===== */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--sm { gap: var(--space-2); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.scroll-x { overflow-x: auto; }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.gap-4 { gap: var(--space-4); }

.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: var(--size-px);
  height: var(--size-px);
  padding: 0;
  margin: var(--space-1-neg);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.font-semibold { font-weight: var(--font-semibold); }

.htmx-indicator { opacity: var(--opacity-hidden); transition: opacity var(--transition-fast); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: var(--opacity-visible); }

/* ===== 05-components.css ===== */
.brand {
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  color: var(--color-text);
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* A1 mock: 2px between items — the row padding does the spacing work. */
  gap: 0.125rem;
  width: 100%;
}

.nav-list a {
  position: relative;
  display: flex;
  align-items: center;
  /* A1 mock: 12px icon-to-label gap, 10px/11px row padding. */
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.6875rem;
  margin-bottom: 0;
  border-radius: var(--radius-lg);
  /* Semibold carries the emphasis; ink stays at fg-2 (4.95:1 on white).
     fg-3 was trialled and reverted — 3.60:1 fails WCAG AA, and 16px/600 sits
     below the 18.66px threshold that would qualify it as large text.
     Do not lighten this without raising the font size. */
  color: var(--neutral-fg-2);
  text-decoration: none;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: 1.4;
  letter-spacing: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-list a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.nav-list__icon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  flex-shrink: 0;
  overflow: hidden;
  font-family: "Material Symbols Outlined", sans-serif;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  color: var(--neutral-fg-2);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.nav-list__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--Typography-Font-Family-Base, Inter);
  font-size: var(--base-fontSize, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: inherit;
  color: inherit;
}

.nav-badge {
  margin-left: auto;
  flex-shrink: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--brand-fg-1);
  color: var(--brand-fg-on);
  font-size: 0.6875rem;
  font-weight: var(--font-semibold);
  line-height: 1;
  text-align: center;
}

.nav-list a:hover {
  background: var(--neutral-bg-selected);
  color: var(--neutral-fg-1);
  text-decoration: none;
}

.nav-list a.is-active {
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-weight: 500;
  text-decoration: none;
}

.nav-list a.is-active::before {
  content: none;
}

.nav-list a.is-active .nav-list__icon {
  color: var(--cta-fg);
}

.nav-list a.is-active .nav-badge {
  background: var(--neutral-bg-1);
  color: var(--brand-fg-1);
}

.nav-list__link--frozen {
  border: none;
  pointer-events: none;
  cursor: default;
}

.nav-list a.is-active.nav-list__link--frozen {
  border: none;
}

/* Figma 424:1078 — Coming Soon badge (frozen items) */
.nav-list__frozen-badge {
  margin-left: auto;
  flex-shrink: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  border: 0.5px dashed #98cce4;
  background: #ecf3f6;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--brand-fg-1);
  white-space: nowrap;
}

.nav-list a.is-active .nav-list__frozen-badge {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--brand-fg-on);
}

.user-admin-tabs {
  margin-bottom: var(--space-4);
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.user-admin-tabs__current {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.workflow-access-form__intro {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.workflow-toggle-list {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.workflow-toggle {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.workflow-toggle input {
  margin-top: var(--space-1);
}

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

.workflow-toggle__title {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.workflow-toggle__hint,
.workflow-toggle__note {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.workflow-toggle__note {
  font-style: italic;
}

.statement-pdf-local__content {
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.statement-pdf-local__link {
  font-size: var(--text-sm);
  white-space: nowrap;
}

.link {
  color: var(--color-brand);
  text-decoration: none;
}

.link:focus-visible,
.topnav-menu__trigger:focus-visible,
.profile-menu__trigger:focus-visible,
.theme-swatch:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

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

.card {
  background: var(--color-surface);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
  padding: var(--space-6);
}

.empty-state--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

/* STAB-UAT-179: vertical breathing room for PS batches empty card (not table/filters). */
.patient-batch-list-empty.empty-state--cta {
  margin-top: var(--space-5);
  padding-block: var(--space-8);
  padding-inline: var(--space-6);
}

.empty-state--cta__message {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.quick-actions__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.quick-actions__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

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

.list-divider__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.list-divider__meta,
.list-divider__id {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.list-divider__text {
  color: var(--color-text-subtle);
}

.card--locked {
  border-color: var(--color-system);
  background: var(--color-system-bg);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--size-px) solid transparent;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn:hover {
  text-decoration: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--brand-fg-1);
}

.btn:not(.btn--primary):not(.btn--secondary):not(.btn--system):not(.btn--danger):not(.btn--outlined):not(.btn--text):hover {
  background: var(--neutral-bg-hover);
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--secondary {
  background: var(--secondary-bg);
  color: var(--secondary-fg);
  border-color: var(--secondary-border);
}

.btn--secondary:hover {
  background: var(--secondary-bg-hover);
  color: var(--secondary-fg);
  border-color: var(--secondary-border);
}

.btn--outlined {
  background: var(--color-transparent);
  border-color: var(--neutral-border-2);
  color: var(--color-text);
}

.btn--outlined:hover {
  background: var(--neutral-bg-hover);
  color: var(--color-text);
  border-color: var(--neutral-border-2);
}

.btn--primary {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-fg);
}

.btn--primary:hover {
  background: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
  color: var(--cta-fg);
}

.btn--system {
  background: var(--color-system);
  border-color: var(--color-system);
  color: var(--color-on-brand);
}

.btn--danger {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-on-brand);
}

/* Outlined danger: white fill, red border + red text (softer than the solid --danger). */
.btn--danger-outline {
  background: var(--color-surface);
  border-color: var(--color-error);
  color: var(--color-error);
}

.btn--danger-outline:hover {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
}

.btn--text {
  background: transparent;
  border: none;
  padding: 0;
  min-height: auto;
  font-weight: var(--font-medium);
  text-decoration: underline;
}

.btn--text:hover {
  background: transparent;
}

.btn--text-danger {
  color: var(--color-error);
}

.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: 0.8125rem;
}

.btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.badge {
  display: inline-block;
  padding: var(--space-badge-y) var(--space-badge-x);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  line-height: 1.25;
}

.badge--neutral {
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
}

.badge--info {
  background: var(--color-upstream-bg);
  color: var(--color-upstream);
}

.badge--info.badge--pulse {
  animation: badge-pulse 1.5s ease-in-out infinite;
}

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

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

.badge--danger {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.badge--fulfillment {
  background: var(--color-operator-bg);
  color: var(--color-operator);
}

.badge--governance {
  background: var(--color-system-bg);
  color: var(--color-system);
}

.badge--workflow {
  background: var(--color-posting-bg);
  color: var(--color-posting);
}

.badge--security {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge--draft {
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
}

.activity-log-filters .form-field label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.activity-log-row__link {
  color: var(--color-brand);
  text-decoration: none;
  font-weight: var(--font-medium);
  cursor: pointer;
}

.activity-log-row__link:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.activity-log-role-badge {
  margin-left: var(--space-2);
  text-transform: none;
  letter-spacing: normal;
}

.activity-log-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.activity-log-pagination__actions {
  display: flex;
  gap: var(--space-2);
}

.activity-log-detail__back {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

.activity-log-detail__section-title {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.activity-log-detail__card {
  margin-top: var(--space-4);
}

.activity-log-detail__payload-list {
  margin-top: var(--space-2);
}

.activity-log-detail__actions {
  margin-top: var(--space-6);
}

.fulfillment-print-action {
  margin-top: var(--space-4);
}

.activity-log-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer, 40);
  display: flex;
  justify-content: flex-end;
}

.activity-log-drawer[hidden] {
  display: none !important;
}

.activity-log-drawer__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: color-mix(in srgb, var(--color-text) 35%, transparent);
  cursor: default;
  pointer-events: none;
}

.activity-log-drawer__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(28rem, 100vw);
  max-width: 100%;
  height: 100%;
  background: var(--color-surface);
  border-left: var(--size-px) solid var(--color-border);
  box-shadow: var(--shadow-overlay, -4px 0 24px rgba(0, 0, 0, 0.12));
}

.activity-log-drawer__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--size-px) solid var(--color-border);
}

.activity-log-drawer__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-subtle);
}

.activity-log-drawer__close {
  font-size: var(--text-xl);
  line-height: 1;
  min-width: 2rem;
  min-height: 2rem;
}

.activity-log-drawer__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--space-4);
}

.activity-log-drawer__body .activity-log-detail__back {
  display: none;
}

.activity-log-drawer__body .activity-log-detail__header {
  margin-bottom: var(--space-2);
}

.activity-log-drawer__body .activity-log-detail__card {
  margin-top: 0;
}

.activity-log-drawer-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .activity-log-col--practice {
    display: none;
  }

  .activity-log-drawer__panel {
    width: 100vw;
  }
}

.entity-needs-badge {
  margin-left: var(--space-2);
  vertical-align: middle;
}

.entity-list-table__hint {
  margin-top: var(--space-3);
}

.entity-assignment-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--space-1) var(--space-3);
  align-items: start;
  padding: var(--space-2) 0;
  border-bottom: var(--size-px) solid var(--color-border-subtle);
}

.entity-assignment-list__row:last-child {
  border-bottom: none;
}

.entity-assignment-list__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  grid-column: 1;
  grid-row: 1;
}

.entity-assignment-list__toggle {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.entity-assignment-list__panel {
  grid-column: 1 / -1;
  grid-row: 2;
  padding-left: calc(var(--space-6) + var(--space-2));
}

.entity-assignment-list__practices {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-4);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.entity-assignment-list__empty-practices {
  margin: var(--space-1) 0 0;
}

.entity-form__footer {
  margin-top: var(--space-4);
}

.practice-form-status {
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.practice-list-filter .form-field label {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.user-bulk-row__entity-na {
  display: block;
  padding: var(--space-2) 0;
}

.user-bulk-row__entity-label-wrap {
  display: none;
}

.user-bulk-row__entity-cell select[data-psm-entity-field] {
  width: 100%;
}

.user-bulk-row__practice-hint--entity {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}

@keyframes badge-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.65;
  }
}

.badge--uploaded,
.badge--generated {
  background: var(--color-upstream-bg);
  color: var(--color-upstream);
}

.badge--generation_in_progress {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge--generation_completed,
.badge--active {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge--under_reconciliation,
.badge--in_review_queue {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge--ready_for_approval {
  background: var(--color-system-bg);
  color: var(--color-system);
}

/* Classify mockup / screenshot: info blue pending (not amber). */
/* Classify doc head: amber pending (screenshot) — keep two-row filename · badge layout. */
.badge--mail_configuration_pending {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
  text-transform: uppercase;
  letter-spacing: 0.055em;
  font-size: 11px;
  font-weight: var(--font-bold, 700);
  border-radius: 4px;
  padding: 5px 10px;
}

.badge--approved_to_print,
.badge--ready_to_print {
  background: var(--color-system-bg);
  color: var(--color-system);
}

.badge--printing {
  background: var(--color-operator-bg);
  color: var(--color-operator);
}

.badge--mailed,
.badge--delivered,
.badge--printed {
  background: var(--color-posting-bg);
  color: var(--color-posting);
}

.badge--suppressed {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.alert--success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: var(--size-px) solid var(--color-success);
}

.alert--error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: var(--size-px) solid var(--color-error);
}

.alert--info {
  background: var(--color-upstream-bg);
  color: var(--color-upstream);
  border: var(--size-px) solid var(--color-upstream);
}

.alert--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: var(--size-px) solid var(--color-warning);
}

.filter-bar {
  background: var(--color-surface);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.filter-bar__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: end;
}

.filter-bar__submit {
  width: var(--full-width);
}

@media (min-width: 768px) {
  .filter-bar__form {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  }

  .filter-bar__submit {
    width: auto;
    white-space: nowrap;
  }
}

.list-filter-chrome {
  margin-block-end: var(--space-4);
}

.list-filter-chrome__form {
  margin-block-start: var(--space-3);
}

.filter-bar__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
}

.filter-bar__actions .filter-bar__submit,
.filter-bar__actions .filter-bar__clear {
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.filter-bar__actions-field {
  margin-bottom: 0;
}

.filter-bar__actions-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  visibility: hidden;
  margin-bottom: var(--space-1);
  line-height: var(--leading-tight);
}

@media (min-width: 768px) {
  .list-filter-chrome__form.filter-bar__form {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    align-items: end;
  }

  .list-filter-chrome__form .filter-bar__actions-field {
    min-width: 14rem;
    width: max-content;
    justify-self: start;
  }

  .user-bulk-filter-chrome__form.filter-bar__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    grid-template-columns: unset;
  }
}

.filter-bar__clear {
  white-space: nowrap;
}

.validation-progress__track {
  height: var(--space-2);
  width: var(--full-width);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
}

.validation-progress__bar {
  height: var(--full-height);
  border-radius: var(--radius-full);
  background: var(--color-brand);
  transition: width 0.2s ease;
}

.queue-table {
  width: var(--full-width);
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.queue-table th,
.queue-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--size-px) solid var(--color-border);
}

.queue-table th {
  font-weight: var(--font-semibold);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  background: var(--color-surface-muted);
}

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

/* STAB-D-PSM-38: batches list pager + ensure table wrap stays visible */
.patient-batches-table-wrap {
  display: block;
  width: 100%;
  overflow: auto;
  margin-bottom: var(--space-4);
}

/* STAB-D-PSM-39: Practices-like fixed columns on batches list (no entities-card wrap) */
.patient-batches-table {
  table-layout: fixed;
  width: 100%;
}

.patient-batches-table__col-batch { width: 18%; }
.patient-batches-table__col-practice { width: 22%; }
.patient-batches-table__col-statements { width: 12%; }
.patient-batches-table__col-lifecycle { width: 18%; }
.patient-batches-table__col-updated { width: 14%; }
.patient-batches-table__col-actions { width: 16%; }

/* STAB-D-PSM-45: batches page lays sections out flat (no audit-logs-page flex
   wrapper), so the card carries the 20px gap the activity-log page gets from its
   parent's gap — restores breathing room between the filter bar and the table. */
.patient-batches-card {
  margin-top: var(--space-5);
}

/* STAB-D-PSM-43: Practices-style flex filter row — no overlap Search/Status */
.patient-batch-filter-bar {
  margin-bottom: var(--space-4);
}

.patient-batch-filters {
  align-items: flex-end;
}

.patient-batch-filters__control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 10rem;
  max-width: 100%;
}

.patient-batch-filters__control label {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
  margin: 0;
}

.patient-batch-filters__control .form-field__control,
.patient-batch-filters__control select,
.patient-batch-filters__control input[type="date"] {
  box-sizing: border-box;
  min-height: 40px;
  height: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  background: var(--neutral-bg-input);
  font-size: var(--text-base);
  line-height: 20px;
  width: 100%;
}

.patient-batch-filters__clear {
  align-self: flex-end;
  margin-bottom: 0;
  flex-shrink: 0;
}

.batch-list-pager {
  margin-top: var(--space-4);
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}

.batch-list-pager__size,
.batch-list-pager__nav {
  gap: var(--space-2);
}

.batch-list-pager__page {
  font-size: var(--text-sm);
  align-self: center;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-4);
  min-width: 0;
  max-width: 100%;
}

.form-field label {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--neutral-fg-1);
}

.form-field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

/*
 * Shared text input states — Figma 769:1084 (chrome) / 769:1118 (focus)
 * default | focus | filled (same chrome as default) | error | disabled
 * Autofill must NOT restyle filled chrome (Chrome’s light-blue inset).
 */
.form-field input,
.form-field select,
.form-field textarea {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--input-padding);
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  background: var(--neutral-bg-input);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  transition: var(--input-focus-transition);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

.form-field input:focus,
.form-field input:focus-visible,
.form-field select:focus,
.form-field select:focus-visible,
.form-field textarea:focus,
.form-field textarea:focus-visible {
  outline: none;
  border: 1px solid var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-shadow);
  padding: var(--input-padding);
}

.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled {
  background: var(--neutral-bg-page);
  border-color: var(--neutral-border-1);
  color: var(--neutral-fg-2);
  cursor: not-allowed;
  box-shadow: none;
}

.form-field--error input,
.form-field--error select,
.form-field--error textarea {
  border-color: var(--status-error-border);
  background: var(--neutral-bg-input);
}

.form-field--error input:focus,
.form-field--error input:focus-visible,
.form-field--error select:focus,
.form-field--error select:focus-visible,
.form-field--error textarea:focus,
.form-field--error textarea:focus-visible {
  outline: none;
  border: 1px solid var(--input-focus-error-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-error-shadow);
  padding: var(--input-padding);
}

/* STAB-BUG-37: inline field error (login + shared form-field pattern) */
.form-field__error {
  margin: var(--space-1) 0 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--color-error);
}

.form-field__error[hidden] {
  display: none;
}

/* Kill browser autofill chrome (light blue fill / missing border after dropdown pick). */
.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover,
.form-field input:-webkit-autofill:focus,
.form-field input:-webkit-autofill:active,
.form-field textarea:-webkit-autofill,
.form-field textarea:-webkit-autofill:hover,
.form-field textarea:-webkit-autofill:focus,
.form-field textarea:-webkit-autofill:active {
  -webkit-text-fill-color: var(--neutral-fg-1);
  caret-color: var(--neutral-fg-1);
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  box-shadow: 0 0 0 1000px var(--neutral-bg-input) inset;
  transition: background-color 99999s ease-out 0s;
}

.form-field input:-webkit-autofill:focus,
.form-field input:-webkit-autofill:focus-visible,
.form-field textarea:-webkit-autofill:focus,
.form-field textarea:-webkit-autofill:focus-visible {
  border-color: var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  box-shadow:
    var(--input-focus-shadow),
    0 0 0 1000px var(--input-focus-bg) inset;
}

.form-field--error input:-webkit-autofill,
.form-field--error input:-webkit-autofill:hover,
.form-field--error input:-webkit-autofill:focus,
.form-field--error input:-webkit-autofill:active {
  border-color: var(--status-error-border);
}

.form-field--error input:-webkit-autofill:focus,
.form-field--error input:-webkit-autofill:focus-visible {
  border-color: var(--input-focus-error-border);
  border-radius: var(--input-focus-radius);
  box-shadow:
    var(--input-focus-error-shadow),
    0 0 0 1000px var(--input-focus-bg) inset;
}

/*
 * Global text-field focus (Figma 769:1118) for inputs outside .form-field.
 * Exclude compound search shells — focus chrome is on .psm-figma-search:focus-within.
 */
input[type="text"]:not(.psm-figma-search__input):focus,
input[type="text"]:not(.psm-figma-search__input):focus-visible,
input[type="email"]:focus,
input[type="email"]:focus-visible,
input[type="search"]:not(.psm-figma-search__input):focus,
input[type="search"]:not(.psm-figma-search__input):focus-visible,
input[type="password"]:focus,
input[type="password"]:focus-visible,
input[type="number"]:focus,
input[type="number"]:focus-visible,
input[type="tel"]:focus,
input[type="tel"]:focus-visible,
input[type="url"]:focus,
input[type="url"]:focus-visible,
input:not([type]):focus,
input:not([type]):focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: none;
  border: 1px solid var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  background-color: var(--input-focus-bg);
  box-shadow: var(--input-focus-shadow);
}

/* STAB-BUG-40: re-assert error focus after global type selectors (equal specificity; last wins) */
.form-field--error input:focus,
.form-field--error input:focus-visible,
.form-field--error select:focus,
.form-field--error select:focus-visible,
.form-field--error textarea:focus,
.form-field--error textarea:focus-visible {
  outline: none;
  border: var(--size-px) solid var(--input-focus-error-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-error-shadow);
  padding: var(--input-padding);
}

.auth-form {
  margin-top: var(--space-6);
  min-width: 0;
  max-width: 100%;
}

.auth-form__submit {
  width: var(--full-width);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

/* STAB-UAT-36 — show/hide password on invite / reset setup */
/* STAB-UAT-174 — constrain width so long values cannot expand the layout or cover the toggle */
.password-field {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.password-field input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Keep room for the eye toggle — must beat .form-field input:focus padding reset (STAB-UAT-174). */
  padding-right: calc(var(--space-8) + var(--space-2));
  overflow-x: hidden;
  text-overflow: clip;
}

.form-field .password-field input:focus,
.form-field .password-field input:focus-visible {
  padding-right: calc(var(--space-8) + var(--space-2));
}

.password-field__toggle {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  z-index: 1;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--neutral-bg-input);
  color: var(--color-text-muted);
  cursor: pointer;
}

.password-field__toggle:hover,
.password-field__toggle:focus-visible {
  color: var(--color-text);
  outline: none;
  background: var(--neutral-bg-subtle);
}

.password-field__icon {
  font-size: 1.25rem;
  line-height: 1;
}

.auth-prototype {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--size-px) solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth-prototype summary {
  cursor: pointer;
  font-weight: var(--font-medium);
  color: var(--color-text-subtle);
}

.auth-prototype__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth-prototype__list {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.auth-card__footer {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

/* USER-ONBOARD-SETUP-01 S6 — invitee setup chrome (verify-email → set-password). */
.auth-card--onboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-card--onboard .auth-card__header {
  margin-top: 0;
}

.auth-card__header-note {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth-setup-steps {
  margin: 0;
}

.auth-setup-steps__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-setup-steps__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.auth-setup-steps__marker {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-full, 999px);
  border: var(--size-px) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1;
}

.auth-setup-steps__icon {
  display: none;
}

.auth-setup-steps__item.is-current .auth-setup-steps__marker,
.auth-setup-steps__item.is-complete .auth-setup-steps__marker {
  background: var(--control-accent);
  border-color: var(--control-accent);
  color: var(--color-on-brand);
}

.auth-setup-steps__item.is-complete .auth-setup-steps__num {
  display: none;
}

.auth-setup-steps__item.is-complete .auth-setup-steps__icon {
  display: block;
}

.auth-setup-steps__item.is-current .auth-setup-steps__num {
  display: inline;
}

.auth-setup-steps__item.is-current .auth-setup-steps__icon {
  display: none;
}

.auth-setup-steps__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.auth-setup-steps__item.is-current .auth-setup-steps__label,
.auth-setup-steps__item.is-complete .auth-setup-steps__label {
  color: var(--color-text);
  font-weight: var(--font-semibold);
}

.auth-setup-steps__rail {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: var(--size-px);
  margin: 0;
  border: 0;
  background: var(--color-border);
}

.auth-setup-steps__item.is-complete + .auth-setup-steps__rail {
  background: var(--control-accent);
}

/* USER-ONBOARD-SETUP-01 — Final-Design.html mock (set-password wizard) */
.auth-panel:has(.auth-setup-shell) {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}

.auth-panel:has(.auth-setup-shell) .auth-panel__toolbar {
  position: absolute;
  top: var(--space-5);
  right: 2.125rem;
  z-index: 2;
  overflow: visible;
}

.auth-panel:has(.auth-setup-shell) .theme-select,
.auth-layout--split .theme-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.theme-picker {
  display: none;
  position: relative;
}

.auth-layout--split .theme-picker {
  display: block;
}

.theme-picker__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 108px;
  padding: 6px 10px 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  box-shadow: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.theme-picker__btn:hover {
  background: var(--neutral-bg-2);
  color: var(--color-text);
  border-color: transparent;
  box-shadow: none;
}

.theme-picker__btn[aria-expanded="true"] {
  background: var(--neutral-bg-2);
  border-color: var(--neutral-border-1);
  color: var(--color-text);
  box-shadow: none;
}

.theme-picker__btn:focus {
  outline: none;
}

.theme-picker__btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  box-shadow: none;
}

.theme-picker__btn[aria-expanded="true"]:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  box-shadow: none;
}

.theme-picker__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-align: left;
}

.theme-picker__chev {
  flex: none;
  color: var(--neutral-fg-3);
  line-height: 0;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-picker__chev svg {
  display: block;
  width: 14px;
  height: 14px;
}

.theme-picker__btn[aria-expanded="true"] .theme-picker__chev {
  transform: rotate(180deg);
}

.theme-picker__swatch {
  width: 11px;
  height: 11px;
  border-radius: var(--radius-full, 999px);
  flex: none;
  transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-picker__swatch--blue {
  background: var(--theme-swatch-blue);
}

.theme-picker__swatch--green {
  background: var(--theme-swatch-green);
}

.theme-picker__btn .theme-picker__swatch {
  box-shadow: var(--theme-picker-swatch-shadow);
}

.theme-picker__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  z-index: 50;
  width: 190px;
  min-width: 190px;
  padding: 5px;
  background: var(--color-surface);
  border-radius: 10px;
  box-shadow: var(--theme-picker-menu-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.18s;
}

.theme-picker.is-open .theme-picker__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.theme-picker__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--line-height-base);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease;
}

.theme-picker__item:hover {
  background: var(--neutral-bg-2);
}

.theme-picker__item.is-on {
  background: var(--neutral-bg-2);
}

.theme-picker__item .theme-picker__swatch {
  box-shadow: none;
}

.theme-picker__name {
  flex: 1 1 auto;
  min-width: 0;
}

.theme-picker__tick {
  flex: none;
  width: 15px;
  height: 15px;
  opacity: 0;
  color: var(--color-brand);
  line-height: 0;
}

.theme-picker__tick svg {
  display: block;
  width: 15px;
  height: 15px;
}

.theme-picker__item.is-on .theme-picker__tick {
  opacity: 1;
}

.theme-picker__item:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

.auth-layout:has(.auth-setup-shell) .auth-hero {
  overflow: hidden;
}

.auth-layout:has(.auth-setup-shell) .auth-hero::before,
.auth-layout:has(.auth-setup-shell) .auth-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.auth-layout:has(.auth-setup-shell) .auth-hero::before {
  width: 520px;
  height: 520px;
  right: -190px;
  top: -160px;
  background: color-mix(in srgb, var(--color-on-brand) 14%, transparent);
  opacity: 0.35;
}

.auth-layout:has(.auth-setup-shell) .auth-hero::after {
  width: 380px;
  height: 380px;
  left: -140px;
  bottom: -130px;
  background: color-mix(in srgb, var(--color-on-brand) 14%, transparent);
  opacity: 0.25;
}

.auth-panel:has(.auth-setup-shell) .auth-panel__body {
  display: flex;
  flex: 1 1 auto;
  width: var(--full-width);
  max-width: none;
  margin: 0;
  padding: 0;
}

.auth-layout--split .auth-setup-shell {
  width: var(--full-width);
  max-width: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.auth-setup-progress {
  height: 4px;
  background: var(--neutral-bg-subtle);
  flex: none;
}

.auth-setup-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-brand);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth-setup-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) 2.875rem;
  min-width: 0;
}

.auth-setup-inner {
  width: var(--full-width);
  max-width: 32.5rem;
}

.setup__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: var(--space-2) 0.875rem;
  margin-bottom: var(--space-5);
  background: var(--color-surface);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-lg);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.2s ease;
}

.setup__back:hover:not(:disabled) {
  background: var(--neutral-bg-subtle);
  border-color: var(--secondary-border);
  color: var(--color-text);
}

.setup__back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.setup__q[hidden] {
  display: none !important;
}

.setup__q.is-active {
  animation: auth-setup-slide 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes auth-setup-slide {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.setup__step-count {
  margin: 0 0 9px;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.auth-setup-shell .auth-card__header h1 {
  margin: 0 0 7px;
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--letter-spacing-tight);
}

.auth-setup-shell .auth-card__header .sub {
  margin: 0 0 26px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth-setup-shell .auth-card__header p.sub {
  margin-bottom: 26px;
}

.locked {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: var(--size-px) solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-muted);
}

.locked__crest {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 11px;
  /* RemitMAIL logo palette — Midnight Navy → Remit Blue (not theme swatches). */
  background: linear-gradient(135deg, var(--brand-logo-gradient-start) 0%, var(--brand-logo-gradient-end) 100%);
  color: var(--color-on-brand);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.locked__crest--triple {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.locked__text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.locked__text strong,
.locked__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-text);
}

.locked__text small,
.locked__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.locked__state {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--radius-full, 999px);
  border: var(--size-px) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-subtle);
}

.locked__state svg {
  display: block;
  width: 15px;
  height: 15px;
}

.note {
  margin: 14px 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Final-Design underline-only fields — override global .form-field boxed inputs */
.auth-setup-shell .form-field {
  margin-bottom: 0;
}

.auth-setup-shell .form-field input.ghost,
.auth-setup-shell input.ghost {
  box-sizing: border-box;
  width: var(--full-width);
  margin: 0;
  padding: 0 0 11px;
  border: 0;
  border-bottom: 2px solid var(--neutral-bg-subtle);
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--color-text);
  transition: border-color 0.2s ease;
}

.auth-setup-shell .form-field input.ghost::placeholder,
.auth-setup-shell input.ghost::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

.auth-setup-shell input.ghost[aria-invalid="true"],
.auth-setup-shell .form-field input.ghost[aria-invalid="true"] {
  border-bottom-color: var(--input-focus-error-border);
}

.auth-setup-shell .form-field input.ghost:focus,
.auth-setup-shell .form-field input.ghost:focus-visible,
.auth-setup-shell input.ghost:focus,
.auth-setup-shell input.ghost:focus-visible {
  outline: none;
  border: 0;
  border-bottom: 2px solid var(--color-brand);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0 11px;
}

.auth-setup-shell input.ghost[aria-invalid="true"]:focus,
.auth-setup-shell input.ghost[aria-invalid="true"]:focus-visible,
.auth-setup-shell .form-field input.ghost[aria-invalid="true"]:focus,
.auth-setup-shell .form-field input.ghost[aria-invalid="true"]:focus-visible {
  border-bottom-color: var(--input-focus-error-border);
}

.auth-setup-shell .form-field input.ghost:-webkit-autofill,
.auth-setup-shell .form-field input.ghost:-webkit-autofill:hover,
.auth-setup-shell .form-field input.ghost:-webkit-autofill:focus,
.auth-setup-shell .form-field input.ghost:-webkit-autofill:active,
.auth-setup-shell input.ghost:-webkit-autofill,
.auth-setup-shell input.ghost:-webkit-autofill:hover,
.auth-setup-shell input.ghost:-webkit-autofill:focus,
.auth-setup-shell input.ghost:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-text);
  border: 0;
  border-bottom: 2px solid var(--neutral-bg-subtle);
  border-radius: 0;
  box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 99999s ease-out 0s;
}

.auth-setup-shell .form-field input.ghost:-webkit-autofill:focus,
.auth-setup-shell .form-field input.ghost:-webkit-autofill:focus-visible,
.auth-setup-shell input.ghost:-webkit-autofill:focus,
.auth-setup-shell input.ghost:-webkit-autofill:focus-visible {
  border-bottom-color: var(--color-brand);
  box-shadow: 0 0 0 1000px transparent inset;
}

.pw-field {
  margin-bottom: 0;
}

.pw-field + .meter {
  margin-top: 4px;
}

.pw-field + .meter + .pw-tip {
  margin-bottom: 0;
}

.pw-field--spaced {
  margin-top: var(--space-6);
}

.setup__q[data-wizard-panel="4"] .pw-field label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--neutral-fg-1);
}

.pw-line {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  border-bottom: 2px solid var(--neutral-bg-subtle);
  transition: border-color 0.2s ease;
}

.pw-line:focus-within {
  border-bottom-color: var(--color-brand);
}

.pw-line.is-bad {
  border-bottom-color: var(--color-error);
}

.pw-line.is-good {
  border-bottom-color: var(--color-success);
}

.auth-setup-shell .pw-line input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--color-text);
  padding: 0 var(--space-1) 10px 0;
  transition: none;
}

.auth-setup-shell .pw-line input:focus,
.auth-setup-shell .pw-line input:focus-visible {
  outline: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0 10px;
}

.auth-setup-shell .pw-line input::placeholder {
  color: var(--input-placeholder);
  letter-spacing: normal;
  opacity: 1;
}

.auth-setup-shell .pw-line input:-webkit-autofill,
.auth-setup-shell .pw-line input:-webkit-autofill:hover,
.auth-setup-shell .pw-line input:-webkit-autofill:focus,
.auth-setup-shell .pw-line input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-text);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 99999s ease-out 0s;
}

.pw-line__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.pw-line__toggle:hover,
.pw-line__toggle:focus-visible {
  color: var(--color-text);
  outline: none;
  background: var(--neutral-bg-subtle);
}

.pw-line__icon {
  font-size: 1.375rem;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.meter {
  display: flex;
  gap: 5px;
  margin: 4px 0 12px;
}

.meter i {
  flex: 1 1 0;
  height: 4px;
  border-radius: 3px;
  background: var(--neutral-border-2);
  font-style: normal;
  transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.meter.s1 i:nth-child(1) {
  background: var(--color-error);
}

.meter.s2 i:nth-child(-n+2) {
  background: var(--color-warning);
}

.meter.s3 i:nth-child(-n+3) {
  background: var(--color-success);
}

.meter.s4 i {
  background: var(--color-success);
}

.pw-tip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 20px;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 20px;
  color: var(--color-text-muted);
}

.pw-tip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full, 999px);
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

.pw-tip:empty::before {
  display: none;
}

.pw-tip.is-ok {
  color: var(--color-success);
}

.pw-msg {
  margin: 14px 0 0;
  min-height: 18px;
  font-size: 0.8125rem;
  color: var(--color-error);
}

.pw-msg.ok {
  color: var(--color-success);
}

.setup__actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
}

.setup__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem var(--space-4);
  border: var(--size-px) solid var(--color-brand);
  border-radius: var(--radius-lg);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.setup__cta:hover:not(:disabled):not([aria-disabled="true"]) {
  background: color-mix(in srgb, var(--color-brand) 88%, var(--neutral-fg-1));
  border-color: color-mix(in srgb, var(--color-brand) 88%, var(--neutral-fg-1));
}

.setup__cta:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(0.97);
}

.setup__cta:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

.setup__cta:disabled,
.setup__cta[aria-disabled="true"],
.setup__cta.is-disabled {
  background: var(--cta-bg-disabled);
  border-color: var(--cta-bg-disabled);
  cursor: not-allowed;
}

.setup__q--done .setup__tick {
  display: grid;
  place-items: center;
  width: 3.125rem;
  height: 3.125rem;
  margin-bottom: 18px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: 1.4375rem;
}

.auth-hero__trust {
  margin: 0;
  padding-top: var(--space-5);
  border-top: var(--size-px) solid color-mix(in srgb, var(--color-on-brand) 12%, transparent);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-on-brand) 55%, transparent);
}

@media (max-width: 1000px) {
  .auth-setup-stage {
    padding: 28px var(--space-6);
  }

  .auth-panel:has(.auth-setup-shell) .auth-panel__toolbar {
    right: var(--space-6);
  }
}

@media (max-width: 560px) {
  .auth-setup-shell .pw-line__toggle {
    margin-bottom: 2px;
  }

  .auth-setup-shell .pw-line__icon {
    font-size: var(--text-lg);
  }

  .locked {
    flex-wrap: wrap;
  }
}

/* STAB-UAT-189: 404 dual CTAs — matched width, vertical stack. */
.error-page-actions {
  align-items: stretch;
  max-width: 16rem;
}

.error-page-actions form {
  display: flex;
  width: 100%;
  margin: 0;
}

.error-page-actions .btn {
  width: 100%;
  box-sizing: border-box;
}

.password-requirements {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.password-requirements__title {
  font-weight: var(--font-medium);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-1);
}

.password-requirements__list {
  margin: 0;
  padding-left: var(--space-5);
}

.password-requirements__list li+li {
  margin-top: var(--space-1);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.user-lifecycle-actions__form {
  display: inline;
  margin: 0;
}

.lifecycle-archive-form {
  display: inline;
  margin: 0;
}

/* Governance screens (INIT-UI-POLISH B3) */
.card--narrow {
  max-width: 28rem;
}

.card--spaced {
  margin-bottom: var(--space-4);
}

.card--muted {
  background: var(--color-surface-muted);
}

.section-heading {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
}

.section-heading--tight {
  margin-bottom: var(--space-2);
}

.section-subtitle {
  font-size: var(--text-sm);
  margin: calc(-1 * var(--space-1)) 0 var(--space-3);
  color: var(--color-text-muted);
}

.page-header__lead {
  max-width: 48rem;
}

.page-header__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--letter-spacing-tight);
}

.page-header__crumb-link {
  color: var(--color-brand);
  text-decoration: none;
  font-weight: var(--font-medium);
}

.page-header__crumb-link:hover {
  text-decoration: underline;
}

.page-header__crumb-sep {
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

.page-header__crumb-current {
  font-weight: var(--font-semibold);
}

.page-toolbar .page-header {
  margin-bottom: 0;
}

.definition-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
  font-size: var(--text-sm);
  margin: 0;
}

.definition-list--tight {
  gap: var(--space-3);
}

.definition-list--stacked {
  grid-template-columns: 1fr;
}

.request-detail-section-divider {
  margin: var(--space-5) 0;
  border-top: var(--size-px) solid var(--color-border);
}

.definition-list__term {
  color: var(--color-text-muted);
}

.definition-list__detail {
  margin: var(--space-1) 0 0;
}

.definition-list__detail--emphasis {
  font-weight: var(--font-medium);
}

.definition-list__detail--mono {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.definition-list__detail--subtle {
  color: var(--color-text-subtle);
}

.lifecycle-callout {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.lifecycle-steps {
  list-style: decimal;
  padding-left: var(--space-5);
  margin: 0;
}

.lifecycle-steps li+li {
  margin-top: var(--space-1);
}

.lifecycle-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.page-back-link {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

.form-field__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.form-field__static {
  font-size: var(--text-sm);
  margin: 0;
  padding: var(--space-3);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.form-field__locked-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--input-padding);
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  background: var(--neutral-bg-page);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  line-height: 20px;
}

.form-field__locked-value__text {
  flex: 1;
  min-width: 0;
}

.form-field__locked-value__icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--neutral-fg-2);
}

.form-field__locked-value__icon svg {
  width: 1rem;
  height: 1rem;
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: none;
  padding: 0;
  margin: 0;
}

.checkbox-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.checkbox-list__readonly {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.checkbox-list__item--readonly {
  cursor: default;
}

.checkbox-list__item input[type="checkbox"] {
  flex-shrink: 0;
}

.checkbox-list__empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.checkbox-list+.cluster {
  margin-top: var(--space-4);
}

.payload-panel {
  background: var(--color-surface-muted);
}

.table-cell-muted {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.rbac-matrix-section {
  margin-bottom: var(--space-6);
}

.rbac-matrix-section__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
}

.rbac-matrix__cap-col {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 12rem;
}

.rbac-matrix__role-col {
  text-align: center;
  white-space: nowrap;
}

.rbac-matrix__cap-row {
  position: sticky;
  left: 0;
  z-index: 1;
  font-weight: var(--font-medium);
  background: var(--color-surface);
}

.rbac-matrix__cap-id {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
}

.rbac-matrix__cell {
  text-align: center;
  white-space: nowrap;
}

.rbac-matrix__granted {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.rbac-matrix__check {
  color: var(--color-success);
  font-weight: var(--font-semibold);
}

.rbac-matrix__scope {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-muted);
}

.rbac-matrix__denied {
  color: var(--color-text-muted);
}

.dropzone {
  border: var(--size-2px) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
}

.upload-form__dropzone {
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.upload-form__dropzone:hover,
.upload-form__dropzone:focus-visible {
  border-color: var(--color-system);
  background: var(--color-surface);
  outline: none;
}

.upload-form__dropzone--dragover {
  border-color: var(--color-system);
  background: var(--color-surface);
}

.upload-form__dropzone--has-file {
  border-style: solid;
}

.upload-form__dropzone-prompt {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.upload-form__dropzone-filename {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  word-break: break-all;
}

.upload-form__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-form__practice-name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.structural-error-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: var(--size-px) solid var(--color-error);
  border-radius: var(--radius-md);
  background: var(--color-error-bg);
}

.structural-error-panel__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-error);
  margin: 0 0 var(--space-1);
}

.structural-error-panel__lead {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  margin: 0 0 var(--space-3);
}

.structural-error-panel__list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.structural-error-panel__list li+li {
  margin-top: var(--space-1);
}

.upload-form__file-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.upload-form__dropzone-hint {
  margin: 0;
}

.user-menu {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.user-menu form {
  display: inline;
}

.user-menu button {
  background: none;
  border: none;
  color: var(--color-system);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: 0;
}

.theme-select {
  padding: var(--space-1) var(--space-2);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.org-badge {
  display: inline-flex;
  align-items: center;
  max-width: 12rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  border: var(--size-px) solid var(--neutral-border-1);
  background: var(--color-bg);
  font-size: 0.75rem;
  font-weight: var(--font-medium);
  line-height: 1rem;
  color: var(--neutral-fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topnav__context-chip {
  max-height: 2rem;
}

.topnav__actions .entity-badge,
.topnav__actions .entity-switcher__trigger {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 0.75rem;
  font-weight: var(--font-medium);
  color: var(--neutral-fg-2);
  background: var(--color-bg);
  border: var(--size-px) solid var(--neutral-border-1);
  border-radius: 0.5rem;
  min-height: 2rem;
  max-height: 2rem;
  height: 2rem;
  padding: 0.375rem 0.625rem;
  line-height: 1rem;
}

.topnav__actions .entity-switcher__trigger:hover,
.topnav__actions .entity-switcher[open] .entity-switcher__trigger {
  background: var(--neutral-bg-selected);
  border-color: var(--neutral-border-1);
  color: #0a0a0a;
}

.topnav__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--neutral-border-1);
  /* Rounded to match the (now-fixed) circular profile avatar next to it. */
  border-radius: 9999px;
  background: transparent;
  color: var(--neutral-fg-1);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  line-height: 0;
  flex-shrink: 0;
  overflow: visible;
  box-shadow: none;
}

.topnav__icon-btn__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  pointer-events: none;
}

.topnav__icon-btn-svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.topnav__icon-btn:hover {
  background: transparent;
  border-color: var(--neutral-border-1);
  color: var(--neutral-fg-1);
  text-decoration: none;
  box-shadow: none;
}

.topnav__icon-btn:focus-visible {
  outline: 2px solid;
  outline-offset: 2px;
  box-shadow: none;
}

.topnav__tools .topnav-menu--notifications {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  flex-shrink: 0;
  overflow: visible;
}

.topnav__tools .topnav-menu--notifications>summary.topnav__icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}

/* EP-04: topnav uses .entity-badge / .entity-switcher only — do not reintroduce .practice-badge in topnav. */
/* @deprecated Topnav practice context removed (ENTITY-PRACTICE-V2-01). Kept until legacy references are deleted. */
.practice-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 14rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  border: var(--size-px) solid var(--color-border);
  background: var(--color-surface-muted);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
}

.practice-badge__name {
  font-weight: var(--font-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.practice-badge__more {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

.entity-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 14rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  border: var(--size-px) solid var(--color-border);
  background: var(--color-surface-muted);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
}

.entity-badge__name {
  font-weight: var(--font-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-switcher {
  flex-shrink: 0;
  min-width: 0;
}

.entity-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 14rem;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  border: var(--size-px) solid var(--color-border);
  background: var(--color-surface-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
}

.entity-switcher__trigger:hover {
  border-color: var(--color-brand);
  background: var(--color-brand-bg);
  color: var(--color-brand);
}

.entity-switcher[open] .entity-switcher__trigger {
  border-color: var(--color-brand);
  background: var(--color-brand-bg);
  color: var(--color-brand);
}

.entity-switcher__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-switcher__chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.entity-switcher__panel {
  width: min(20rem, calc(100vw - 2rem));
}

.entity-switcher__options {
  padding: var(--space-1);
}

.entity-switcher__form {
  margin: 0;
}

.entity-switcher__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: var(--full-width);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
}

.entity-switcher__option:hover {
  background: var(--color-brand-bg);
  color: var(--color-brand);
}

.entity-switcher__option--active {
  cursor: default;
  font-weight: var(--font-medium);
  color: var(--color-brand);
  background: var(--color-brand-bg);
}

.entity-switcher__option--active:hover {
  background: var(--color-brand-bg);
  color: var(--color-brand);
}

.entity-switcher__option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-switcher__check {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.entity-switcher__note {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: var(--size-px) solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

.context-entity-hint {
  margin-top: var(--space-1);
  margin-bottom: 0;
}

.topnav-menu__trigger--icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  min-width: 2.125rem;
  min-height: 2.125rem;
  padding: var(--space-1) var(--space-3);
}

.topnav-menu__trigger--icon:hover {
  color: var(--color-text);
}

.topnav-menu__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.topnav-menu__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--status-error-fg);
  color: var(--brand-fg-on);
  font-size: 10px;
  font-weight: var(--font-semibold);
  line-height: 1;
  pointer-events: none;
}

.topnav-menu__panel--wide {
  width: 20rem;
}

.topnav-menu__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--size-px) solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

/* NOTIFY-MARK-ALL-01 — bell header Mark all as read + unread meta */
.topnav-menu__panel-header-end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.notif-mark-all-form--bell {
  margin: 0;
}

.notif-mark-all-form__link {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.notif-mark-all-form__link[aria-busy="true"],
.notif-mark-all-form button[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.topnav-menu__panel-meta {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
}

.topnav-menu__scroll {
  max-height: 20rem;
  overflow-y: auto;
}

/* STAB-BUG-42: bell dropdown — 4 full notification rows; scroll only when more */
.topnav-menu__scroll--notif-bell {
  --notif-bell-row-height: calc(
    (var(--space-2) * 2)
    + (var(--text-sm) * var(--line-height-base))
    + var(--space-1)
    + (var(--text-xs) * var(--line-height-base) * 2)
    + var(--space-1)
    + (var(--text-xs) * var(--line-height-base))
    + var(--size-px)
  );
  max-height: calc(var(--notif-bell-row-height) * 4);
  overflow-x: hidden;
  overflow-y: auto;
}

.topnav-notif-item {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: var(--size-px) solid var(--color-surface-muted);
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.topnav-notif-item__btn {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.topnav-notif-item:hover,
.topnav-notif-item:hover .topnav-notif-item__btn {
  background: var(--color-surface-muted);
  text-decoration: none;
}

.topnav-notif-item__dot {
  margin-top: 0.375rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
}

.topnav-notif-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.topnav-notif-item__subject {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topnav-notif-item__text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topnav-notif-item__time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

/* STAB-BUG-39: Request ID emphasis in notification body */
.notif-request-id {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

/* Unread highlight must follow base item rules (same-specificity override). */
.topnav-notif-item.notif-unread-row,
.notif-center-item.notif-unread-row {
  background: var(--color-brand-bg);
  border-left: 3px solid var(--color-brand);
}

.topnav-notif-item.notif-unread-row .topnav-notif-item__btn,
.notif-center-item.notif-unread-row .notif-center-item__btn {
  background: var(--color-brand-bg);
}

.topnav-notif-item.notif-unread-row:hover,
.topnav-notif-item.notif-unread-row:hover .topnav-notif-item__btn,
.notif-center-item.notif-unread-row .notif-center-item__btn:hover {
  background: color-mix(in srgb, var(--color-brand-bg) 70%, var(--color-surface-muted));
}

.topnav-notif-item.notif-unread-row .topnav-notif-item__subject,
.notif-center-item.notif-unread-row .notif-center-item__subject {
  font-weight: var(--font-semibold);
}

.notif-unread-dot {
  background: var(--color-brand);
}

.topnav-menu__badge.is-hidden,
.topnav-menu__panel-meta.is-hidden {
  display: none !important;
}

.topnav-menu__panel-footer {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-top: var(--size-px) solid var(--color-border);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.topnav-menu__panel-footer:hover {
  background: var(--color-surface-muted);
}

.notif-center-panel {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: var(--size-px) solid var(--color-border);
  background: var(--color-surface);
}

.notif-center-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notif-center-item {
  border-bottom: var(--size-px) solid var(--color-border-subtle);
}

.notif-center-item:last-child {
  border-bottom: none;
}

.notif-center-item__btn {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.notif-center-item__btn:hover {
  background: var(--color-surface-muted);
}

.notif-center-item__dot {
  margin-top: 0.4rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
}

.notif-center-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.notif-center-item__subject {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.notif-center-item__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.notif-center-item__time {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.notif-center-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.topnav-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.topnav__tools .profile-menu {
  display: inline-flex;
  align-items: center;
}

.topnav__tools .profile-menu__trigger--avatar-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  line-height: 0;
  box-shadow: none;
}

.topnav-menu__trigger {
  cursor: pointer;
  list-style: none;
}

.topnav-menu__trigger::-webkit-details-marker {
  display: none;
}

.topnav-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 40;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: var(--size-px) solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 9999px;
  background: var(--brand-bg-subtle);
  color: var(--brand-fg-1);
  font-size: 0.8125rem;
  font-weight: var(--font-semibold);
  flex-shrink: 0;
}

.profile-avatar--figma {
  /* Fixed square footprint — was width/height: auto + uniform padding, which
     sized the box off the rendered glyph width. A single narrow character
     (e.g. "I") produced a box narrower than tall, so border-radius: 9999px
     rendered a pill/oval instead of a circle. */
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border-radius: 9999px;
  background: #e0d509;
  color: var(--neutral-fg-1);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  box-shadow: none;
}

.profile-avatar--panel {
  width: 2.5rem;
  height: 2.5rem;
}

.profile-avatar--lg {
  width: 4.5rem;
  height: 4.5rem;
  font-size: var(--text-2xl);
}

.theme-picker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.theme-swatch {
  width: 1.75rem;
  height: 1.75rem;
  /* backlog #11 — circular, consistent with the avatar and every other round
     accent element in the app instead of a rounded square unique to this. */
  border-radius: 9999px;
  border: var(--size-2px) solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.theme-swatch:hover {
  transform: scale(1.05);
}

.theme-swatch.is-active {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-text);
}

.theme-swatch--blue {
  background: var(--theme-swatch-blue);
}

.theme-swatch--green {
  background: var(--theme-swatch-green);
}

.profile-menu__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  width: var(--full-width);
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
}

.profile-menu__action:hover {
  /* backlog #11 — match the entity-switcher panel's brand-highlight hover, the
     other real topnav dropdown, instead of the plain neutral-gray hover this
     had before. */
  background: var(--color-brand-bg);
  color: var(--color-brand);
}

.profile-menu__action:hover .profile-menu__action-icon {
  color: var(--color-brand);
}

.profile-menu__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.profile-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: var(--space-1);
  border: var(--size-px) solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  transition: background var(--transition-fast);
}

.profile-menu__trigger--avatar-only {
  padding: 0;
  border: none;
  border-radius: 9999px;
}

.profile-menu__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--size-px) solid var(--color-border);
}

.profile-menu__trigger svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.profile-menu__trigger:hover {
  background: var(--neutral-bg-hover);
}

.profile-menu[open] .profile-menu__trigger {
  background: var(--neutral-bg-selected);
  border-color: transparent;
}

.profile-menu__trigger--avatar-only:hover,
.profile-menu[open] .profile-menu__trigger--avatar-only {
  background: transparent;
  border-color: transparent;
  opacity: 1;
  box-shadow: none;
}

.profile-menu__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.profile-menu__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
  max-width: 14rem;
  line-height: 1.25;
  text-align: left;
}

.profile-menu__name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.profile-menu__meta-line {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.profile-menu__chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.profile-menu__theme {
  padding: var(--space-4);
  border-bottom: var(--size-px) solid var(--color-border);
}

.profile-menu__theme-heading {
  /* backlog #11 — matches .topnav-menu__panel-header's plain sentence-case
     label style (the entity-switcher panel's "Active entity" heading) instead
     of an uppercase eyebrow style unique to this one section. */
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.profile-menu__theme-legend {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.profile-menu__panel {
  width: 16rem;
  box-shadow: var(--shadow-card);
}

.profile-menu__action-icon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  flex-shrink: 0;
  overflow: hidden;
  font-family: "Material Symbols Outlined", sans-serif;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  color: var(--neutral-fg-1);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.profile-menu__action--link {
  text-decoration: none;
}

.account-settings__alert {
  margin-bottom: var(--space-4);
}

.account-settings__submit {
  margin-top: var(--space-4);
}

.account-password-form__forgot {
  margin: var(--space-3) 0 var(--space-2);
}

@media (max-width: 768px) {
  .account-settings .btn--primary {
    width: var(--full-width);
  }
}

/* --- Settings shell secondary nav (DI-SETTINGS-02) ---
   Real component authored fresh for production — visually informed by the
   approved A6 mock (design-reference/UIuX/Org-Admin/settings-archetype.html)
   but not copy-pasted: the mock's own header comment flags .settings-nav*
   as proposal-only, and its per-panel client-side JS switcher is explicitly
   NOT reproduced here (each item below is a real <a> to a real route). */
.settings-shell {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.settings-nav {
  width: 220px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.settings-nav__group-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  font-weight: 600;
  padding: var(--space-4) var(--space-3) var(--space-1);
}

.settings-nav__group-label:first-child {
  padding-top: var(--space-1);
}

.settings-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
}

.settings-nav__item .material-symbols-outlined {
  font-size: 18px;
  line-height: 18px;
}

.settings-nav__item:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
  text-decoration: none;
}

.settings-nav__item.is-current {
  background: var(--color-surface-muted);
  color: var(--color-text);
  border-left-color: var(--color-brand);
  font-weight: 600;
}

.settings-nav__item--frozen {
  pointer-events: none;
  cursor: default;
}

.settings-nav__item--frozen:hover {
  background: transparent;
  color: var(--color-text-muted);
}

.settings-content {
  flex: 1;
  min-width: 0;
}

@media (max-width: 800px) {
  .settings-shell {
    flex-direction: column;
    gap: var(--space-4);
  }
  .settings-nav {
    width: var(--full-width);
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* --- Modal (v2 Sprint 1 design system) --- */
body.psm-modal-open {
  overflow: hidden;
}

.psm-modal-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.psm-modal-root[hidden] {
  display: none;
}

.psm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--neutral-fg-1) 45%, transparent);
}

.psm-modal {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  background: var(--color-surface);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  padding: var(--space-5);
}

/* Document PDF view-only viewer (STAB-D-PSM-14d) — large centered overlay, backdrop around edges */
.psm-modal-root.psm-modal-root--pdf-preview {
  padding: var(--space-4);
  align-items: center;
  justify-content: center;
}

.psm-modal-root.psm-modal-root--pdf-preview .psm-modal-backdrop {
  background: color-mix(in srgb, #0d0f12 72%, transparent);
}

.psm-modal.psm-modal--wide.payer-preview-modal,
.psm-modal.payer-preview-modal {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 91vw;
  height: 95vh;
  max-width: 91vw;
  max-height: 95vh;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  background: #12151a;
  color: #e8eaed;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.payer-preview-modal__chrome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: #1a1e24;
}

.payer-preview-modal__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}

.payer-preview-modal__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: #f3f4f6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.payer-preview-modal__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 204, 21, 0.45);
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  font-size: 0.7rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

.payer-preview-modal__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.payer-preview-modal__tool {
  min-width: 2rem;
  color: #e8eaed;
  background: #2a3038;
  border-color: rgba(255, 255, 255, 0.14);
}

.payer-preview-modal__tool:hover {
  background: #353c46;
}

.payer-preview-modal__page-label,
.payer-preview-modal__zoom-label {
  min-width: 3.5rem;
  text-align: center;
  font-size: var(--text-sm);
  color: rgba(232, 234, 237, 0.85);
  font-variant-numeric: tabular-nums;
}

.payer-preview-modal__sep {
  width: 1px;
  height: 1.25rem;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 var(--space-1);
}

.payer-preview-modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.payer-preview-modal .payer-preview-modal__body {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: #0d0f12;
}

.payer-preview-modal__thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  overflow: auto;
  padding: var(--space-3) var(--space-2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: #15181d;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 234, 237, 0.35) transparent;
}

.payer-preview-modal__thumb {
  display: block;
  width: 5.5rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.payer-preview-modal__thumb.is-active {
  border-color: #60a5fa;
}

.payer-preview-modal__thumb-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: var(--neutral-bg-1);
  border-radius: 2px;
  pointer-events: none;
}

.payer-preview-modal__thumb-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.65rem;
  color: rgba(232, 234, 237, 0.7);
  text-align: center;
}

.payer-preview-modal__viewer {
  position: relative;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* STAB-D-PSM-17: thin thumb only — no visible track */
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 234, 237, 0.4) transparent;
}

.payer-preview-modal__viewer::-webkit-scrollbar,
.payer-preview-modal__thumbs::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.payer-preview-modal__viewer::-webkit-scrollbar-track,
.payer-preview-modal__thumbs::-webkit-scrollbar-track {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.payer-preview-modal__viewer::-webkit-scrollbar-thumb,
.payer-preview-modal__thumbs::-webkit-scrollbar-thumb {
  background-color: rgba(232, 234, 237, 0.4);
  border-radius: 999px;
  border: 0;
  background-clip: padding-box;
}

.payer-preview-modal__viewer::-webkit-scrollbar-thumb:hover,
.payer-preview-modal__thumbs::-webkit-scrollbar-thumb:hover {
  background-color: rgba(232, 234, 237, 0.55);
}

.payer-preview-modal__viewer::-webkit-scrollbar-corner,
.payer-preview-modal__thumbs::-webkit-scrollbar-corner {
  background: transparent;
}

.payer-preview-modal__status {
  margin: var(--space-8) var(--space-4);
  text-align: center;
  color: rgba(232, 234, 237, 0.8);
  font-size: var(--text-sm);
}

.payer-preview-modal__status[hidden] {
  display: none;
}

.payer-preview-modal__status--error {
  color: #fecaca;
}

.payer-preview-modal__pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4) var(--space-8);
}

.payer-preview-modal__page-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  background: var(--neutral-bg-1);
  overflow: hidden;
}

.payer-preview-modal__page {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: top;
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 48rem) {
  .payer-preview-modal__chrome {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .payer-preview-modal__controls {
    grid-column: 1 / -1;
    order: 3;
    justify-content: flex-start;
  }

  .payer-preview-modal .payer-preview-modal__body {
    grid-template-columns: 1fr;
  }

  .payer-preview-modal__thumbs {
    display: none;
  }
}

/* Confirm dialog — Figma 633-1821 (Create this entity?) */
.psm-modal[data-psm-confirm-dialog] {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  width: min(100%, 26rem);
  padding: 24px;
  border: none;
  border-radius: 12px;
  background: var(--neutral-bg-1);
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.12);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.psm-modal[data-psm-confirm-dialog] .psm-modal__header {
  margin: 0;
}

.psm-modal[data-psm-confirm-dialog] .psm-modal__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.2px;
  color: var(--neutral-fg-1);
}

.psm-modal[data-psm-confirm-dialog] .psm-modal__body {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.psm-modal[data-psm-confirm-dialog] .psm-modal__body p {
  margin: 0;
  color: var(--neutral-fg-1);
}

.psm-modal[data-psm-confirm-dialog] .psm-modal__footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: var(--radius-sm);
}

.psm-modal[data-psm-confirm-dialog] [data-psm-confirm-cancel] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 8px;
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-1);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 24px;
}

.psm-modal[data-psm-confirm-dialog] [data-psm-confirm-action] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid var(--cta-bg);
  border-radius: 12px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
}

.psm-modal[data-psm-confirm-dialog] [data-psm-confirm-action]:hover {
  opacity: 0.92;
}

.psm-modal[hidden] {
  display: none;
}

.psm-modal__header {
  margin-bottom: var(--space-3);
}

.psm-modal__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.psm-modal__body {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-4);
}

.psm-modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.psm-modal__form .psm-modal__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--size-px) solid var(--color-border);
}

/* --- Toast snackbar (Figma 633:2163 — Entities create success) --- */
.psm-toast-region {
  position: fixed;
  right: 48px;
  bottom: 48px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 12px;
  width: 400px;
  max-width: calc(100vw - 96px);
  pointer-events: none;
}

.psm-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  background: #2e2e2e;
  color: var(--brand-fg-on);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
  animation: psm-toast-in 0.22s ease-out;
}

.psm-toast--leaving {
  animation: psm-toast-out 0.2s ease-in forwards;
}

.psm-toast--success,
.psm-toast--error,
.psm-toast--info,
.psm-toast--warning {
  background: #2e2e2e;
  color: var(--brand-fg-on);
}

.psm-toast__icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-top: 0;
}

.psm-toast__icon-svg {
  display: block;
  width: 20px;
  height: 20px;
}

.psm-toast__message {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--brand-fg-on);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.psm-toast__dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--brand-fg-on);
  opacity: 0.7;
  cursor: pointer;
  line-height: 1;
}

.psm-toast__dismiss:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.psm-toast__dismiss:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

@keyframes psm-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes psm-toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (max-width: 640px) {
  .psm-toast-region {
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    max-width: none;
  }
}

/* --- Loading --- */
.psm-spinner {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
}

.psm-spinner__svg {
  width: 100%;
  height: 100%;
  animation: psm-spin 0.75s linear infinite;
}

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

.btn .btn__spinner {
  display: none;
}

.btn.btn--loading .btn__spinner {
  display: inline-flex;
}

.btn.btn--loading .btn__label {
  opacity: 0.85;
}

.psm-section--loading {
  position: relative;
  min-height: 4rem;
}

.psm-section--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: inherit;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {

  .badge--pulse,
  .badge--info.badge--pulse {
    animation: none;
  }

  .psm-toast,
  .psm-toast--leaving {
    animation: none;
  }

  .psm-spinner__svg {
    animation: none;
  }
}

/* Practice onboarding (PRACTICE-ONBOARD-01 PR-2) */
.page-header:has(+ .practice-onboard-form) {
  margin-bottom: var(--space-4);
}

.practice-onboard-layout {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 64rem) {
  .practice-onboard-layout {
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
    align-items: start;
  }

  .practice-completeness-rail {
    position: sticky;
    top: var(--space-4);
  }
}

.practice-onboard-fields {
  min-width: 0;
}

.practice-onboard-footer {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--size-px) solid var(--color-border);
}

/* PRACTICE-ONBOARD-01 — compact practice onboarding form */
.practice-onboard-form .practice-onboard-layout {
  gap: var(--space-3);
}

.practice-onboard-form .practice-onboard-fields.stack {
  gap: var(--space-3);
}

.practice-onboard-form .practice-form-card.card,
.practice-onboard-form .practice-completeness-rail.card {
  padding: var(--space-4);
}

.practice-onboard-form .card--spaced {
  margin-bottom: var(--space-2);
}

.practice-onboard-form .section-heading {
  margin-bottom: var(--space-2);
}

.practice-onboard-form .form-field {
  margin-bottom: var(--space-2);
}

.practice-onboard-form .form-field-grid .form-field,
.practice-onboard-form .form-field-grid fieldset.form-field {
  margin-bottom: 0;
}

.practice-onboard-form .form-field-grid {
  gap: var(--space-3);
}

.practice-onboard-form .form-field input,
.practice-onboard-form .form-field select,
.practice-onboard-form .form-field textarea {
  padding: var(--space-2) var(--space-3);
}

.practice-onboard-form .form-field__hint {
  font-size: var(--text-xs);
}

.practice-onboard-form .address-blocks {
  gap: var(--space-3);
}

.practice-onboard-form .address-block__title {
  margin: 0 0 var(--space-2);
}

.practice-onboard-form .payment-options-panel {
  gap: var(--space-3);
  padding-left: 0;
}

.practice-onboard-form .practice-payment-cards-row {
  align-items: start;
}

.practice-onboard-form .practice-payment-cards-row .form-field__label,
.practice-onboard-form .practice-payment-box-fieldset legend.form-field__label {
  display: block;
  margin-bottom: var(--space-2);
  padding: 0;
}

.practice-onboard-form .practice-payment-box-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.practice-onboard-form .practice-credit-card-options,
.practice-onboard-form .practice-credit-card-box-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-height: 1.625rem;
}

.practice-onboard-form .practice-completeness-rail__legend {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}

.practice-onboard-form .practice-completeness-rail__preview {
  margin: var(--space-2) 0 var(--space-1);
}

.practice-onboard-form .practice-completeness-rail__progress {
  margin-bottom: var(--space-2);
}

.practice-onboard-form .practice-completeness-rail__missing-list {
  margin: 0 0 var(--space-3);
}

.practice-onboard-form .practice-completeness-rail__preview {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
}

.practice-onboard-form .practice-onboard-footer {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
}

.practice-onboard-form .practice-form-markers {
  margin-bottom: var(--space-1);
}

.practice-onboard-form .practice-logo-preview {
  padding: var(--space-2);
  max-width: 12rem;
}

.practice-onboard-form .practice-logo-preview__img {
  max-height: 4.5rem;
}

/* PRACTICE-ONBOARD-01 — branding row, color swatches, compact addresses */
.practice-onboard-form .practice-branding-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 48rem) {
  .practice-onboard-form .practice-branding-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.practice-onboard-form .practice-logo-type-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.practice-onboard-form .practice-logo-type-option {
  margin: 0;
}

.practice-onboard-form .practice-branding-fieldset {
  margin-bottom: 0;
  border: none;
  padding: 0;
}

.practice-onboard-form .practice-branding-image-slot {
  margin-top: var(--space-2);
}

.practice-onboard-form .practice-logo-choose {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.practice-onboard-form .practice-logo-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.practice-onboard-form .practice-credit-card-options {
  margin-top: var(--space-1);
}

.practice-onboard-form .form-field__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-subtle);
}

.practice-onboard-form .color-scheme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.practice-onboard-form .color-scheme-picker__option {
  position: relative;
  cursor: pointer;
  margin: 0;
}

.practice-onboard-form .color-scheme-picker__option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.practice-onboard-form .color-scheme-picker__swatch {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  box-shadow: inset 0 0 0 2px var(--color-surface);
}

.practice-onboard-form .color-scheme-picker__option input:focus-visible+.color-scheme-picker__swatch {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.practice-onboard-form .color-scheme-picker__option input:checked+.color-scheme-picker__swatch {
  border-color: var(--color-brand);
  box-shadow: inset 0 0 0 2px var(--color-surface), 0 0 0 2px var(--color-brand);
}

.practice-onboard-form .color-scheme-picker__swatch--blue {
  background: var(--onboard-swatch-blue);
}

.practice-onboard-form .color-scheme-picker__swatch--green {
  background: var(--onboard-swatch-green);
}

.practice-onboard-form .color-scheme-picker__swatch--teal {
  background: var(--onboard-swatch-teal);
}

.practice-onboard-form .color-scheme-picker__swatch--slate {
  background: var(--onboard-swatch-slate);
}

.practice-onboard-form .color-scheme-picker__swatch--maroon {
  background: var(--onboard-swatch-maroon);
}

.practice-onboard-form .address-blocks--compact {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  overflow-x: hidden;
}

@media (min-width: 56rem) {
  .practice-onboard-form .address-blocks--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

.practice-onboard-form .address-block {
  padding: var(--space-2);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  min-width: 0;
}

.practice-onboard-form .form-field-grid--address {
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
}

.practice-onboard-form .address-block input {
  max-width: 100%;
  box-sizing: border-box;
}

.practice-form-markers {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.field-marker {
  color: var(--color-danger);
  font-weight: var(--font-semibold);
}

.field-marker--active {
  color: var(--color-warning);
}

.form-field-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .form-field-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-field-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.form-field--full {
  grid-column: 1 / -1;
}

.radio-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.radio-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.address-block__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-3);
}

.practice-form-errors__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2);
}

.practice-form-errors__list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
}

.practice-completeness-rail__status {
  font-size: var(--text-sm);
  margin: var(--space-3) 0 var(--space-2);
}

.practice-completeness-rail__progress {
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.practice-completeness-rail__progress-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: var(--radius-full);
  transition: width 0.2s ease;
}

.practice-completeness-rail__missing-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin: 0 0 var(--space-1);
}

.practice-completeness-rail__checklist {
  list-style: none;
  margin: var(--space-3) 0 var(--space-4);
  padding: 0;
  font-size: var(--text-sm);
}

.practice-completeness-rail__checklist-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.practice-completeness-rail__checklist-item.rail-checklist-done {
  color: var(--color-text-muted);
}

.practice-completeness-rail__checklist-item.rail-checklist-done .practice-completeness-rail__checklist-link {
  color: inherit;
  text-decoration: none;
}

.practice-completeness-rail__check {
  color: var(--color-success);
  font-weight: var(--font-bold);
  flex-shrink: 0;
  width: 1em;
  text-align: center;
}

.practice-completeness-rail__missing-list {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  font-size: var(--text-sm);
}

.practice-completeness-rail__preview {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--size-px) solid var(--color-border);
}

.practice-accepts-payment {
  font-weight: var(--font-medium);
}

.practice-logo-upload {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.practice-logo-preview {
  display: none;
  margin-top: var(--space-1);
  padding: var(--space-3);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  max-width: 14rem;
}

.practice-logo-preview--has-existing {
  display: block;
}

.practice-logo-preview__img {
  display: block;
  max-width: 100%;
  max-height: 6rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.practice-completeness-indicator {
  display: grid;
  gap: var(--space-1);
  min-width: 6.5rem;
}

.practice-completeness-indicator__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.practice-completeness-indicator--complete .practice-completeness-indicator__label {
  color: var(--color-success);
}

.practice-completeness-indicator__track {
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  overflow: hidden;
}

.practice-completeness-indicator__fill {
  height: 100%;
  background: var(--color-success);
  border-radius: var(--radius-full);
  transition: width 0.2s ease;
}

.practice-completeness-indicator:not(.practice-completeness-indicator--complete) .practice-completeness-indicator__fill {
  background: var(--color-warning);
}

/* USER-ONBOARD-UI-01 — bulk user create table (UO-S01) */
.user-bulk-table {
  table-layout: fixed;
  width: 100%;
  min-width: 58rem;
}

.user-bulk-table input.user-bulk-row__input,
.user-bulk-table select.user-bulk-row__select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--space-2) 2rem var(--space-2) var(--space-2);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.user-bulk-table select.user-bulk-row__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.user-bulk-row__entity-cell {
  vertical-align: middle;
}

.user-bulk-row__entity-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-2) 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-bulk-row__workflow-cell {
  text-align: center;
  vertical-align: middle;
}

.user-bulk-row__workflow-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-height: 3.25rem;
  justify-content: center;
}

.user-bulk-row__workflow-cell--inactive .user-bulk-row__workflow-group {
  visibility: hidden;
}

.user-bulk-row__workflow-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  margin: 0;
  white-space: nowrap;
}

.user-bulk-row__actions {
  white-space: nowrap;
  vertical-align: middle;
}

.user-bulk-create__ack--error,
.checkbox-list__item--error {
  border: var(--size-px) solid var(--color-error);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

.user-bulk-create__ack-error {
  margin: var(--space-2) 0 0;
}

.practice-form-errors__link {
  color: inherit;
  font-weight: var(--font-semibold);
  text-decoration: underline;
}

.workflow-toggle-list--compact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: none;
  padding: 0;
  margin: 0;
}

.workflow-toggle--compact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.workflow-toggle--compact .workflow-toggle__content {
  display: inline;
}

.user-bulk-create__actions {
  margin: var(--space-4) 0;
}

.user-bulk-create__ack {
  margin: var(--space-4) 0 var(--space-5);
}

.user-bulk-filter-chrome {
  margin-bottom: var(--space-4);
}

.user-bulk-filter-chrome .form-field {
  margin-bottom: 0;
}

.user-bulk-filter-chrome .form-field>label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.user-bulk-filter-chrome__form {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: var(--space-3);
  overflow-x: auto;
}

@media (min-width: 768px) {
  .user-bulk-filter-chrome .filter-bar__form {
    display: flex;
    grid-template-columns: unset;
  }
}

.user-bulk-filter-chrome__field {
  flex: 0 0 auto;
  min-width: 9rem;
  margin-bottom: 0;
}

.user-bulk-filter-chrome__select {
  min-width: 9rem;
  padding-right: 2rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.user-bulk-filter-chrome__apply,
.user-bulk-filter-chrome__reset {
  flex: 0 0 auto;
  white-space: nowrap;
}

.user-bulk-filter-chrome__export {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

.user-bulk-filter-chrome__hint {
  margin: var(--space-2) 0 0;
}

.user-bulk-create__intro {
  margin: 0 0 var(--space-4);
}

.user-bulk-create__footer,
.user-onboard-form__footer {
  justify-content: flex-end;
  margin-top: var(--space-4);
}

.user-bulk-create__legend {
  margin: var(--space-3) 0 0;
}

.user-bulk-row__cell--error {
  background: none;
}

.user-bulk-row__practice-hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
}

/* STAB-UO-01/02 — org-admin users list + inline manage panel */
.user-list-table .user-list-manage-toggle {
  white-space: nowrap;
}

.user-manage-row>td {
  padding: 0;
  background: var(--color-surface-muted);
  border-top: none;
}

.user-manage-panel {
  padding: var(--space-4);
}

.user-manage-form__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.user-manage-form__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.user-manage-form__footer {
  justify-content: flex-end;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--size-px) solid var(--color-border);
}

.user-manage-form__account {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--size-px) solid var(--color-border);
}

.user-manage-form__account-actions {
  flex-wrap: wrap;
  gap: var(--space-2);
}

.user-manage-form__inactive-note,
.user-manage-form__readonly {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.user-manage-form__admin-link {
  display: inline-flex;
  font-weight: var(--font-medium);
}

.practice-access-form__intro {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.practice-access-form__footer {
  margin-top: var(--space-4);
}

.practice-access-form__empty {
  margin-top: var(--space-2);
}

.practice-access-entity {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--size-px) solid var(--color-border);
}

.practice-access-entity:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.practice-access-entity__header {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.practice-access-entity__empty {
  margin: 0;
}

.practice-access-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.practice-access-row {
  padding: var(--space-3);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.practice-access-row--denied {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
}

.practice-access-row__label {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  cursor: pointer;
}

.practice-access-row__deny {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.practice-access-row__name {
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.practice-access-row__status {
  justify-self: end;
}

.practice-access-row__audit {
  margin: var(--space-2) 0 0;
  padding-left: calc(1rem + var(--space-3));
}

.practice-access-restore-form {
  margin: 0;
}

.practice-access-save-form {
  margin-top: var(--space-4);
}

.user-manage-form__workflow[hidden] {
  display: none;
}

/* Org-admin approval requests (STAB-PO-01 / Figma PW-UI 256-1256 / 337-1639) */
.approval-requests-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: var(--space-4);
}

.approval-requests-header {
  margin: 0;
  margin-top: -16px;
}

.approval-requests-title {
  margin: 0;
  color: var(--color-text);
  font-size: 1.875rem;
  /* Figma 3xl / 30px — not page-title token */
  font-weight: var(--font-semibold);
  line-height: 2.25rem;
  letter-spacing: 0;
}

.approval-requests-chrome {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 0;
}

.approval-requests-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  border-bottom: var(--size-px) solid var(--neutral-border-1);
}

.approval-requests-tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3) var(--space-3);
  margin-bottom: -1px;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--neutral-fg-2);
  font-size: 0.875rem;
  /* Figma md = 16px */
  font-weight: var(--font-normal);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

.approval-requests-tabs__tab:hover {
  color: var(--color-text);
  text-decoration: none;
}

.approval-requests-tabs__tab.is-active {
  color: var(--color-brand);
  font-weight: var(--font-medium);
  border-bottom-color: var(--color-brand);
}

.approval-requests-tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.approval-requests-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}

.approval-requests-search {
  /* backlog #4 — was flex:1 1 16rem (grew to fill available space, taller default
     44px search field), unlike the fixed 360px/40px compact search box every other
     screen uses. Matches .entities-filters__search / .audit-logs-filters__search. */
  flex: 0 0 360px;
  width: 360px;
  max-width: 100%;
}

@media (max-width: 640px) {
  .approval-requests-search {
    flex: 1 1 100%;
    width: 100%;
  }
}

.approval-requests-filters .psm-figma-search {
  min-height: 40px;
  height: 40px;
  gap: 8px;
  padding-right: 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  overflow: visible;
}

.approval-requests-filters .psm-figma-search:focus-within {
  border: 1px solid var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-shadow);
}

/* Figma 325-1071 — Search Field; focus shell = Figma 769:1118 */
.psm-figma-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  /* Do not use overflow:hidden — it clips the focus ring */
  padding-left: 12px;
  background: var(--neutral-bg-input);
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  transition: var(--input-focus-transition);
}

.psm-figma-search:focus-within {
  outline: none;
  border: 1px solid var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-shadow);
}

.psm-figma-search__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.psm-figma-search__input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 10px 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.psm-figma-search.has-value .psm-figma-search__input {
  font-size: var(--text-lg);
  line-height: 24px;
}

.psm-figma-search__input::-webkit-search-decoration,
.psm-figma-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.psm-figma-search__input::placeholder {
  color: var(--input-placeholder);
}

.psm-figma-search__input:focus,
.psm-figma-search__input:focus-visible {
  outline: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.psm-figma-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.psm-figma-search__clear[hidden] {
  display: none !important;
}

/* STAB-LP-16 refine: Sent page — never show in-search clear X (funnel reset only). */
.psm-figma-search--no-clear .psm-figma-search__clear,
.fulfillment-sent-filters .psm-figma-search__clear {
  display: none !important;
}

.psm-figma-search__submit {
  flex-shrink: 0;
  margin: 0;
  min-width: 85px;
  padding: 10px 16px;
  border: none;
  border-radius: 0 12px 12px 0;
  background: var(--neutral-bg-2);
  color: var(--neutral-fg-1);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 24px;
  cursor: pointer;
}

.psm-figma-search__submit:hover {
  background: var(--neutral-bg-hover);
}

.approval-requests-filters__divider {
  display: none;
  width: 1px;
  height: 24px;
  background: var(--neutral-border-1);
  flex-shrink: 0;
}

.approval-requests-filters,
.approval-requests-filters__controls,
.approval-requests-date-group,
.psm-figma-menu--date {
  overflow: visible;
}

.approval-requests-filters__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.approval-requests-date-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.approval-requests-date-group__label {
  color: var(--neutral-fg-2);
  font-size: var(--text-base);
  line-height: 20px;
  white-space: nowrap;
}

/* Figma 325-1071 — Dropdown trigger 132×44, panel 240×pad4 */
.psm-figma-menu {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
  vertical-align: top;
  z-index: 1;
}

.psm-figma-menu.is-open {
  z-index: 50;
}

/* STAB-FIGMA-MENU-01 / FU-3: base is unused fallback (every live menu must set
   --compact or --comfortable on root + panel). Do not rely on ancestor scoping. */
.psm-figma-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  background: var(--neutral-bg-input);
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  /* STAB-UAT-208: <button> UA default is center — match inputs / other fields (start). */
  text-align: start;
  cursor: pointer;
  transition: var(--input-focus-transition);
}

.psm-figma-menu__trigger:hover {
  background: var(--neutral-bg-page);
}

.psm-figma-menu__trigger:focus,
.psm-figma-menu__trigger:focus-visible {
  outline: none;
  border: 1px solid var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-shadow);
}

.psm-figma-menu.is-open .psm-figma-menu__trigger {
  border-color: var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  box-shadow: var(--input-focus-shadow);
}

.psm-figma-menu__label {
  flex: 0 1 auto;
}

/* STAB-UAT-207: Practice menus — fixed width; long names ellipsis + title tooltip. */
.psm-figma-menu--practice {
  width: var(--practice-menu-width);
  max-width: 100%;
  box-sizing: border-box;
}

.psm-figma-menu--practice .psm-figma-menu__trigger {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  overflow: hidden;
  text-align: start;
}

.psm-figma-menu--practice .psm-figma-menu__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}

.psm-figma-menu__panel.psm-figma-menu--practice [data-psm-figma-option] {
  white-space: nowrap;
}

.psm-figma-menu__panel.psm-figma-menu--practice [data-psm-figma-option] > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* STAB-UAT-109 / STAB-UAT-206: closed-trigger placeholder tint matches inputs */
.psm-figma-menu__label.is-placeholder {
  color: var(--input-placeholder);
  font-weight: 400;
}

.psm-figma-menu__chevron {
  display: inline-flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Figma 435-7855 — date trigger: placeholder DD/MM/YYYY + calendar icon only */
.psm-figma-menu--date .psm-figma-menu__trigger {
  gap: 10px;
  min-width: 9.5rem;
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.psm-figma-menu--date .psm-figma-menu__label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.psm-figma-menu--date .psm-figma-menu__label.is-placeholder {
  color: var(--input-placeholder);
  font-weight: 400;
}

.psm-figma-menu--date .psm-figma-menu__calendar-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: auto;
}

.psm-figma-menu--date .psm-figma-menu__calendar-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.psm-figma-menu__panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: 240px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--neutral-bg-1);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(51, 51, 51, 0.1);
  /* Y-scroll only — long labels wrap inside the panel (no horizontal bar). */
  overflow-x: hidden;
  overflow-y: auto;
}

/* Portaled to body while open — fixed + clamped so it never expands page scroll */
.psm-figma-menu__panel.is-anchored {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.psm-figma-menu.is-open .psm-figma-menu__panel:not(.is-anchored) {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Date panel visibility is controlled separately (.is-visible) when portaled to body */

.psm-figma-menu__panel [data-psm-figma-option] {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border-radius: 4px;
  color: var(--neutral-fg-1);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 24px;
  cursor: pointer;
  white-space: normal;
}

.psm-figma-menu__panel [data-psm-figma-option]>span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.psm-figma-menu__panel [data-psm-figma-option]:hover {
  background: var(--neutral-bg-selected);
}

.psm-figma-menu__panel [data-psm-figma-option].is-selected {
  background: #d4e9f2;
}

.psm-figma-menu__check {
  display: none;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.psm-figma-menu__panel [data-psm-figma-option].is-selected .psm-figma-menu__check {
  display: inline-flex;
}

/* FU-3 / FM-20: --comfortable — Entities / Practices / Users / Requests (40px / 14px).
   Apply on root AND panel (portal moves panel to body). */
.psm-figma-menu--comfortable .psm-figma-menu__trigger {
  min-height: 40px;
  gap: 10px;
  padding: 10px 16px;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
}

.psm-figma-menu--comfortable .psm-figma-menu__chevron {
  width: 20px;
  height: 20px;
}

.psm-figma-menu--comfortable .psm-figma-menu__panel,
.psm-figma-menu__panel.psm-figma-menu--comfortable {
  width: 280px;
}

.psm-figma-menu--comfortable .psm-figma-menu__panel [data-psm-figma-option],
.psm-figma-menu__panel.psm-figma-menu--comfortable [data-psm-figma-option] {
  padding: 12px;
  font-size: var(--text-base);
  line-height: 20px;
}

.psm-figma-menu--comfortable .psm-figma-menu__check,
.psm-figma-menu__panel.psm-figma-menu--comfortable .psm-figma-menu__check {
  width: 20px;
  height: 20px;
}

/* FU-2 / FU-3 --compact — Queue / Sent / classify / patient-statement / Activity Log / pagesize.
   Apply on root AND panel (portal). */
.psm-figma-menu--compact .psm-figma-menu__trigger {
  min-height: 32px;
  gap: 6px;
  padding: 6px 10px;
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: 18px;
}

.psm-figma-menu--compact .psm-figma-menu__chevron {
  width: 16px;
  height: 16px;
}

.psm-figma-menu--compact .psm-figma-menu__panel,
.psm-figma-menu__panel.psm-figma-menu--compact {
  width: 160px;
}

.psm-figma-menu--compact .psm-figma-menu__panel [data-psm-figma-option],
.psm-figma-menu__panel.psm-figma-menu--compact [data-psm-figma-option] {
  padding: 6px 10px;
  font-size: var(--text-xs);
  line-height: 16px;
}

.psm-figma-menu--compact .psm-figma-menu__check,
.psm-figma-menu__panel.psm-figma-menu--compact .psm-figma-menu__check {
  width: 18px;
  height: 18px;
}

.psm-figma-menu--compact.psm-figma-menu--date .psm-figma-menu__calendar-icon {
  width: 16px;
  height: 16px;
}

.psm-figma-menu--compact.psm-figma-menu--date .psm-figma-menu__calendar-icon svg {
  width: 16px;
  height: 16px;
}

/* STAB-FIGMA-MENU-01 / FM-10…12 — payer upload + classify layout */
.payer-upload-page,
.payer-classify-page {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.app-main:has(.payer-upload-page),
.app-main:has(.payer-classify-page) {
  overflow-x: hidden;
  max-width: 100%;
}

.form-field--short {
  max-width: 20rem;
}

.form-field--short .form-field__input,
.form-field--short .psm-figma-menu,
.form-field--short .psm-figma-menu__trigger {
  max-width: 20rem;
  width: 100%;
}

/* STAB-UAT-207: upload Practice keeps form short width but does not grow with name. */
.form-field--short .psm-figma-menu--practice,
.upload-form .psm-figma-menu--practice {
  width: min(100%, 20rem);
  max-width: 20rem;
}

/* STAB-UAT-81 / STAB-UAT-85: trigger is a button — use error token (not raw hex). */
.form-field--error .psm-figma-menu__trigger {
  border-color: var(--color-error);
}

.payer-mail-config-form__mail-class .form-field__error {
  margin: var(--space-1) 0 0;
  color: var(--color-error);
}

/* Payer upload Practice — full-width comfortable trigger (STAB-BUG-26). */
.payer-upload-page .upload-form .psm-figma-menu {
  display: block;
}

.payer-upload-page .upload-form .psm-figma-menu__trigger {
  width: 100%;
  justify-content: space-between;
  text-align: start;
}

/* --- Configure Payer Mailings (classify) — mockup layout 2026-08-03 --- */
.payer-classify-page__head {
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.payer-classify-form {
  overflow: hidden;
  border-radius: var(--radius-lg, 10px);
  padding: 0;
}

.payer-classify-form.card--spaced,
.payer-classify-form.card {
  padding: 0;
}

.payer-classify-docs {
  margin: 0;
  border-bottom: 1px solid var(--neutral-border-1);
  background: color-mix(in srgb, var(--neutral-bg-1) 92%, var(--neutral-bg-2));
}

.payer-classify-docs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.payer-classify-doc {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.payer-classify-doc + .payer-classify-doc {
  border-top: 1px solid var(--neutral-border-1);
}

/* Row 1: DOC id chip + View PDF (right). Badge stays on row 2. */
.payer-classify-doc__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 16px 28px 8px;
}

.payer-classify-doc__ident {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.payer-classify-doc__id {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13.5px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.01em;
  color: var(--neutral-fg-1);
  background: var(--neutral-bg-2);
  border: 1px solid var(--neutral-border-1);
  border-radius: 7px;
  padding: 6px 11px;
  white-space: nowrap;
}

.payer-classify-doc__row .btn {
  flex: none;
  margin-left: auto;
}

/* Row 2: filename · pending badge */
.payer-classify-doc__status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 28px 15px;
  min-width: 0;
}

.payer-classify-doc__name {
  font-size: 13px;
  color: var(--neutral-fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.payer-classify-doc__sep {
  flex: none;
  color: var(--neutral-fg-3);
  font-size: 13px;
  line-height: 1;
  user-select: none;
}

.payer-classify-form__body {
  padding: 26px 28px 0;
}

.payer-classify-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}

.payer-mail-config-form__mail-class,
.payer-mail-config-form__assignment {
  margin-top: 0;
  min-width: 0;
}

.payer-mail-config-form__assignment .form-field__input {
  max-width: none;
  width: 100%;
}

/* Classify mail-class only: full-width left column; chevron flush right. */
.payer-mail-config-form__mail-class .psm-figma-menu.payer-classify-mail-menu {
  display: block;
  max-width: none;
  width: 100%;
}

.payer-mail-config-form__mail-class .psm-figma-menu.payer-classify-mail-menu .psm-figma-menu__trigger {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: none;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.payer-mail-config-form__mail-class .psm-figma-menu.payer-classify-mail-menu .psm-figma-menu__label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payer-mail-config-form__mail-class .psm-figma-menu.payer-classify-mail-menu .psm-figma-menu__chevron {
  flex: none;
  margin-left: auto;
}

/* Classify mail-class menu only (screenshot match). Panel portals to body — style via
   .psm-figma-menu__panel.payer-classify-mail-menu. Do not touch global .psm-figma-menu. */
.psm-figma-menu.payer-classify-mail-menu .psm-figma-menu__trigger:focus,
.psm-figma-menu.payer-classify-mail-menu .psm-figma-menu__trigger:focus-visible,
.psm-figma-menu.payer-classify-mail-menu.is-open .psm-figma-menu__trigger {
  border-color: var(--brand-fg-1);
  box-shadow: none;
  background: var(--neutral-bg-input);
}

.psm-figma-menu__panel.payer-classify-mail-menu {
  box-sizing: border-box;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-border-1);
  box-shadow: none;
  /* Width set to trigger in org-approval-controls.js for this modifier. */
  width: auto;
}

.psm-figma-menu__panel.payer-classify-mail-menu [data-psm-figma-option] {
  color: var(--neutral-fg-2);
}

.psm-figma-menu__panel.payer-classify-mail-menu [data-psm-figma-option]:hover,
.psm-figma-menu__panel.payer-classify-mail-menu [data-psm-figma-option].is-selected,
.psm-figma-menu__panel.payer-classify-mail-menu [data-psm-figma-option].is-selected:hover {
  background: var(--brand-fg-1);
  color: var(--brand-fg-on);
}

.psm-figma-menu__panel.payer-classify-mail-menu .psm-figma-menu__check,
.psm-figma-menu__panel.payer-classify-mail-menu [data-psm-figma-option].is-selected .psm-figma-menu__check {
  display: none;
}

.payer-coversheet-stub {
  margin: 24px 0;
  padding: 16px 20px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 9px;
  background: var(--neutral-bg-2);
  min-width: 0;
}

.payer-coversheet-stub__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.payer-coversheet-stub__title {
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--neutral-fg-1);
}

.payer-coversheet-stub__tag {
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-border-1);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-fg-3);
}

.payer-coversheet-stub__hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--neutral-fg-2);
}

.payer-classify-form__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 -28px 0;
  padding: 18px 28px;
  border-top: 1px solid var(--neutral-border-1);
  background: color-mix(in srgb, var(--neutral-bg-1) 92%, var(--neutral-bg-2));
}

@media (max-width: 980px) {
  .payer-classify-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .payer-classify-doc__row {
    flex-wrap: wrap;
    padding: 14px 16px 11px;
  }

  .payer-classify-doc__status {
    padding: 0 16px 14px;
  }

  .payer-classify-form__body {
    padding: 20px 16px 0;
  }

  .payer-classify-form__footer {
    margin: 0 -16px 0;
    padding: 16px;
  }
}

/* Figma 325-1071 — Date picker popup 378×341; fixed-anchored to stay in viewport */
.psm-figma-datepicker__panel {
  display: none;
  box-sizing: border-box;
  width: 378px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  padding: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--neutral-bg-1);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(51, 51, 51, 0.1);
  /* Default in-flow placement before JS ports to body */
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
}

.psm-figma-datepicker__panel.is-anchored.is-visible {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: fixed;
  z-index: 1200;
  margin: 0;
}

.psm-figma-datepicker__panel>.psm-figma-datepicker__header,
.psm-figma-datepicker__panel>.psm-figma-datepicker__dow,
.psm-figma-datepicker__panel>.psm-figma-datepicker__grid {
  flex-shrink: 0;
}

.psm-figma-datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
}

.psm-figma-datepicker__month {
  color: var(--neutral-fg-1);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 24px;
}

.psm-figma-datepicker__arrows {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.psm-figma-datepicker__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.psm-figma-datepicker__dow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 20px;
  padding: 0 16px;
  color: var(--neutral-fg-2);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-align: center;
}

.psm-figma-datepicker__dow span {
  width: 38px;
  line-height: 16px;
}

.psm-figma-datepicker__grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  padding: 3px 16px 8px;
}

.psm-figma-datepicker__week {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
}

.psm-figma-datepicker__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--neutral-fg-1);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.45px;
  cursor: pointer;
}

.psm-figma-datepicker__day.is-empty {
  visibility: hidden;
  pointer-events: none;
}

.psm-figma-datepicker__day.is-today {
  background: var(--neutral-bg-selected);
  color: var(--brand-fg-1);
}

.psm-figma-datepicker__day.is-selected {
  background: var(--cta-bg);
  color: var(--cta-fg);
}

.psm-figma-datepicker__day:hover:not(.is-selected):not(.is-empty):not(.is-disabled) {
  background: var(--neutral-bg-selected);
}

/* #16: future dates are not selectable when the picker opts in (data-psm-figma-max-today). */
.psm-figma-datepicker__day.is-disabled {
  color: var(--neutral-fg-3, #b0b0b0);
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Shared filter-bar reset control (screen-polish backlog #4) — fragments/filter-reset-button.html.
   Sized to match the compact 40px filter-row controls (search box, menu triggers)
   used across Entities/Practices/Users/Requests/Activity-Log. */
.filter-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  background: var(--neutral-bg-input);
  color: var(--neutral-fg-2);
}

.filter-reset-btn.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

.filter-reset-btn.is-active {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-fg);
  cursor: pointer;
}

.filter-reset-btn.is-active:hover {
  background: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
  color: var(--cta-fg);
}

.filter-reset-btn.is-active:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.approval-requests-table__col-id {
  width: 12%;
}

.approval-requests-table__col-type {
  width: 16%;
}

.approval-requests-table__col-requester {
  width: 22%;
}

.approval-requests-table__col-status {
  width: 14%;
}

.approval-requests-table__col-submitted {
  width: 24%;
}

.approval-requests-table__col-actions {
  width: 12%;
}

.approval-requests-table__id,
.approval-requests-table__type {
  color: var(--neutral-fg-2);
}

.approval-requests-table__requester {
  padding-top: 6px;
  padding-bottom: 6px;
}

.approval-requests-requester {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
}

.approval-requests-requester__name {
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  letter-spacing: 0;
}

.approval-requests-requester__email {
  color: var(--neutral-fg-2);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.3px;
}

.approval-requests-table__submitted {
  color: #5a5a5a;
}

.approval-requests-table__status {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}


.approval-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.approval-status-pill--pending,
.practices-table .approval-status-pill[aria-label="Status: Pending approval"] {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.approval-status-pill--approval-pending {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.approval-status-pill--approved {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}

.approval-status-pill--rejected,
.practices-table .approval-status-pill[aria-label="Status: Rejected"] {
  background: var(--status-error-bg);
  color: var(--status-error-fg-strong);
}

.approval-status-pill--inactive {
  background: var(--neutral-bg-2);
  color: var(--neutral-fg-2);
}

.approval-status-pill--hero {
  border-radius: 40px;
  padding: 4px 12px;
}

.approval-requests-review-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-brand);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.approval-requests-review-link:hover {
  color: var(--color-brand);
  text-decoration: none;
}

.approval-requests-review-link__chevron {
  flex-shrink: 0;
}

.approval-requests-review-link--view {
  color: var(--neutral-fg-2);
}

.approval-requests-review-link--view:hover {
  color: var(--neutral-fg-2);
  text-decoration: none;
}

@media (min-width: 960px) {
  .approval-requests-filters__divider {
    display: block;
  }

  .approval-requests-filters {
    flex-wrap: nowrap;
  }

  .approval-requests-filters__controls {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
}

/* =============================================================================
 * ADR-020 Phase 3 — canonical component library
 * -----------------------------------------------------------------------------
 * Single source of truth for the drawer / stepper / field / checkbox / radio /
 * button / review-summary parts that today are triplicated across
 * entity-create-, practice-drawer- / practice-figma-, and
 * users-add- / users-manage- / users-modal- families. ADDITIVE ONLY: the existing
 * NOTE: never write a class glob as "name-*" immediately followed by "/" — that
 * "*" + "/" pair closes this comment early and silently kills the next rule.
 * rules are untouched and no markup references these `psm-` classes yet — this
 * block is the spec a future, human-reviewed migration will follow. See
 * docs/sdlc/design-system/ADR-020-phase3-component-migration.md for the
 * per-component drift this was reconciled from.
 * All values are var(--token); no new tokens were added to 01-tokens.css.
 * ============================================================================= */

/* ---- Drawer / slide-over (base: entity-create-drawer__* / practice-drawer-page__*) ---- */

.psm-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  justify-content: flex-end;
  font-family: var(--font-sans);
}

.psm-drawer.is-open {
  display: flex;
}

.psm-drawer__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: var(--scrim);
  cursor: default;
}

.psm-drawer__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(800px, 100vw);
  height: 100%;
  background: var(--neutral-bg-1);
  box-shadow: none;
}

.psm-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-shrink: 0;
  padding: var(--space-4) var(--space-6);
  background: var(--neutral-bg-1);
  border-bottom: 1px solid var(--neutral-border-1);
}

.psm-drawer__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: 24px;
  letter-spacing: 0.2px;
  color: var(--neutral-fg-1);
}

/* Close affordance follows users-modal__close (32px hit target + hover chrome)
 * rather than the bare 24px icon links in the drawer families — see migration doc. */
.psm-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--neutral-fg-1);
  text-decoration: none;
  cursor: pointer;
}

.psm-drawer__close:hover {
  background: var(--neutral-bg-2);
}

/* Optional wrapper when a single <form> spans body + footer (base:
 * practice-drawer-form). Makes the form the panel's flex column so __body
 * scrolls and __footer stays pinned. Omit for drawers whose header/body/footer
 * are direct panel children. */
.psm-drawer__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.psm-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-4) var(--space-6);
  background: var(--neutral-bg-page);
}

.psm-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  flex-shrink: 0;
  margin: 0;
  padding: var(--space-4);
  border-top: 1px solid var(--neutral-border-1);
  background: var(--neutral-bg-1);
}

/* Multi-step wizard footers (Back on the left) can override to space-between;
 * see entity-create-drawer__footer in the migration doc. */
.psm-drawer__footer--split {
  justify-content: space-between;
}

/* ---- Vertical stepper (base: entity-create-steps__* / practice-drawer-steps__*) ---- */

.psm-stepper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: auto;
  padding: var(--space-4) 48px var(--space-4) var(--space-6);
  background: var(--neutral-bg-1);
  border-right: 1px solid var(--neutral-border-1);
}

.psm-stepper__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.psm-stepper__circle {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 40px;
  border: 1px solid var(--neutral-border-2);
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-2);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: 24px;
}

/* Current + complete both render the filled control-accent circle (Figma
 * 923-1610): control-accent is the ADR-020 D3 "interactive/selected" token —
 * not --cta-bg. See migration doc for the two families that drifted to cta-bg. */
.psm-stepper__item.is-current .psm-stepper__circle,
.psm-stepper__item.is-complete .psm-stepper__circle {
  background: var(--control-accent);
  border-color: var(--control-accent);
  color: var(--brand-fg-on);
}

.psm-stepper__rail {
  box-sizing: border-box;
  width: 32px;
  height: 60px;
  margin: 0;
  border: none;
  background: transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--neutral-border-2) 0,
    var(--neutral-border-2) 4px,
    transparent 4px,
    transparent 8px
  );
  background-position: center;
  background-size: 2px 100%;
  background-repeat: no-repeat;
}

.psm-stepper__label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 20px;
  color: var(--neutral-fg-1);
  max-width: 160px;
}

/* ---- Form field (base: entity-create-field / practice-drawer-field) ---- */

.psm-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin-bottom: 0;
}

.psm-field__label {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.psm-field__required {
  color: var(--status-error-fg);
  font-weight: var(--font-medium);
}

.psm-field__input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--input-padding);
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  background: var(--neutral-bg-input);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 20px;
  transition: var(--input-focus-transition);
}

.psm-field__input::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

/* Focus shell always re-tightens the radius (Figma 769:1118) — one drifted
 * family skipped this; see migration doc. */
.psm-field__input:focus,
.psm-field__input:focus-visible {
  outline: none;
  border: 1px solid var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-shadow);
  padding: var(--input-padding);
}

.psm-field__input:disabled {
  background: var(--neutral-bg-page);
  border-color: var(--neutral-border-1);
  color: var(--neutral-fg-2);
  cursor: not-allowed;
  box-shadow: none;
}

.psm-field--error .psm-field__input {
  border-color: var(--input-focus-error-border);
}

.psm-field--error .psm-field__input:focus,
.psm-field--error .psm-field__input:focus-visible {
  outline: none;
  border: 1px solid var(--input-focus-error-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-error-shadow);
  padding: var(--input-padding);
}

.psm-field__hint {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--neutral-fg-2);
}

.psm-field__error {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--status-error-fg);
}

/* ---- Checkbox (base: entity-create-checkbox — sized/tokened per the
 * majority + the token's own documented intent; see migration doc) ---- */

.psm-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--neutral-fg-1);
}

.psm-checkbox input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.psm-checkbox__box {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--neutral-border-2);
  background: var(--neutral-bg-input);
}

.psm-checkbox__box svg {
  display: none;
}

/* control-accent, not cta-bg — the ADR-020 D3 selected/checked token. */
.psm-checkbox input:checked + .psm-checkbox__box {
  background: var(--control-accent);
  border-color: var(--control-accent);
}

.psm-checkbox input:checked + .psm-checkbox__box svg {
  display: block;
  color: var(--brand-fg-on);
}

.psm-checkbox input:focus-visible + .psm-checkbox__box {
  outline: none;
  box-shadow: 0 0 0 3px var(--control-accent-ring);
}

/* ---- Radio (base: practice-figma-radio — the one clean, correctly
 * tokened implementation; see migration doc) ---- */

.psm-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--neutral-fg-1);
}

.psm-radio input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.psm-radio__ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--neutral-border-1);
  border-radius: 50%;
  background: var(--neutral-bg-input);
}

.psm-radio__dot {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--control-accent);
}

.psm-radio input:checked + .psm-radio__ring {
  border-color: var(--control-accent);
}

.psm-radio input:checked + .psm-radio__ring .psm-radio__dot {
  display: block;
}

.psm-radio input:focus-visible + .psm-radio__ring {
  outline: none;
  box-shadow: 0 0 0 3px var(--control-accent-ring);
}

/* ---- Buttons (base: entity-create-btn / practice-drawer-btn — the
 * drawer-footer size; see migration doc for the larger confirm-dialog
 * pattern this intentionally does not fold in) ---- */

.psm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: 24px;
  text-decoration: none;
  cursor: pointer;
}

.psm-btn--secondary {
  background: var(--neutral-bg-1);
  border-color: var(--neutral-border-1);
  color: var(--neutral-fg-1);
}

.psm-btn--secondary:hover {
  background: var(--neutral-bg-hover);
}

.psm-btn--primary {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-fg);
}

.psm-btn--primary:hover {
  background: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
}

.psm-btn--primary:disabled,
.psm-btn--primary[aria-disabled="true"] {
  background: var(--neutral-bg-disabled);
  border-color: var(--neutral-bg-disabled);
  color: var(--brand-fg-on);
  cursor: not-allowed;
}

/* ---- Review-summary card (base: entity-create-summary — the only existing
 * implementation of this pattern; practice-drawer/users-* have no equivalent
 * today, see migration doc) ---- */

.psm-summary {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  padding: 0;
  background: var(--neutral-bg-1);
  width: 100%;
}

.psm-summary__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--neutral-bg-2);
}

.psm-summary__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.psm-summary__edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--brand-fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  cursor: pointer;
}

.psm-summary__dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: center;
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

.psm-summary__dl > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.psm-summary__dl dt {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.psm-summary__dl dd {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 20px;
  color: var(--neutral-fg-2);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}

/* =====================================================================
 * Dashboard richness (DI-SHELL-02 / DI-CORE-01 / DI-PSPM-01 / DI-FULFILL-01)
 * — welcome banner, medallion stat-card icons, entity/role performance
 * section, and the two-chart grid. Shared across all four role dashboards
 * (org-admin, manager, operations, fulfillment); first authored here for
 * Manager, reused verbatim by the others as their own DI-* items land.
 * Visually informed by the approved A1 org-admin dashboard mock
 * (design-reference/UIuX/Org-Admin/Organization dashboard_files/
 * saved_resource.html) but authored fresh with real --color- / --neutral-
 * tokens, not copy-pasted from the mock's own local token block.
 * NOTE: never write "--color-*" followed by a slash here — the "*" + "/"
 * sequence closes this comment early and silently kills the .welcome rule.
 * ===================================================================== */

.welcome {
  position: relative;
  overflow: hidden;
  /* Uniform 1.25rem rhythm between dashboard sections (A1 mock). */
  margin-bottom: var(--space-5);
  padding: var(--space-6) var(--space-8);
  min-height: 8rem;
  display: flex;
  align-items: center;
  background: linear-gradient(
    110deg,
    var(--neutral-bg-1) 0%,
    var(--neutral-bg-1) 55%,
    var(--brand-bg-subtle) 100%
  );
}

/* Decorative banner art, pinned right. Hidden on narrow viewports so it never
   collides with the greeting. Colors come from tokens (no raw hex — CI ratchet). */
.welcome__art {
  position: absolute;
  right: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  max-width: 40%;
  height: auto;
}

@media (max-width: 900px) {
  .welcome__art {
    display: none;
  }
}

.welcome__greeting {
  margin: 0;
  font-size: var(--text-greeting);
  font-weight: var(--font-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.welcome__subrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
}

.welcome__sub {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.welcome__dot {
  color: var(--neutral-border-2);
}

.welcome__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.welcome__meta svg {
  color: var(--color-brand);
  flex: none;
}

/* ---------------------------------------------------- medallion stat icon */
.medallion {
  width: 52px;
  height: 52px;
  border-radius: 99px;
  flex: none;
  background: var(--brand-bg-subtle);
  color: var(--color-brand);
  display: grid;
  place-items: center;
}

.medallion--sq {
  border-radius: var(--radius-lg);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Label above; medallion vertically centered with name/value + hint (STAB-UAT-193). */
.stat-card--person {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.stat-card__person-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.stat-card__person-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.stat-card--person .stat-card__value {
  margin: 0;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reset <p> default bottom margin — otherwise flex centers against extra space and
   the avatar sits lower than the visible name/email (STAB-UAT-193 reopen). */
.stat-card--person .stat-card__hint {
  margin: 0;
  line-height: 1.25;
}

/* ------------------------------------------------------ performance section */
.perf-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.section-head__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
}

/* DASH-01-W11 — the entity filter menu is now inside a GET form so selecting an option
   submits. The form element is purely structural and must not introduce a layout box of
   its own, or the menu would no longer sit flush right in the flex row. */
.section-head__filter {
  display: contents;
}

/* Pre-review: obscure metric values that are not yet backed by real data.
   Only the number is faded; the label, foot and "Not yet tracked" badge stay legible. */
.metric-blur .metric__value,
.metric-blur .stat-card__value {
  opacity: 0.1;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}


.perf__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1.375rem var(--space-6);
}

.perf__cell {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
}

.perf__cell + .perf__cell {
  border-left: var(--size-px) solid var(--color-border);
}

.perf__cell:first-child {
  padding-left: 0;
}

.metric__label {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
}

/* Base metric-value type — the big stat figure. This rule was dropped during the
   metric-value fragment migration, leaving values at default size on every role
   dashboard; restored here (token-only, no raw hex). */
.metric__value {
  font-size: var(--text-stat-value);
  font-weight: var(--font-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.metric__value--unavailable,
.stat-card__value--unavailable {
  color: var(--color-text-muted);
  font-weight: var(--font-semibold);
}

.stat-card__hint--unavailable {
  font-style: italic;
}

.metric__foot {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.1875rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.metric__action {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-brand);
  margin-top: 6px;
  display: inline-block;
}

.delta {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
}

.delta--good {
  color: var(--color-success);
}

.delta--bad {
  color: var(--color-error);
}

@media (max-width: 900px) {
  .perf__row {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .perf__cell {
    padding: 0;
  }

  .perf__cell + .perf__cell {
    border-left: none;
    border-top: var(--size-px) solid var(--color-border);
    padding-top: var(--space-4);
  }
}

/* ------------------------------------------------------------------ charts */
.chart-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1200px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
}

/* Chart cards manage their own internal padding via __head / __legend / __body.
   Without this reset they inherit .card's padding on top, double-insetting the
   plot and shrinking it against the mock. */
.chart-grid > .card {
  padding: 0;
}

/* DASH-01-W5 — empty state shown in place of a trend chart while the series
   layer is unavailable. Sized to roughly match a rendered chart so the grid
   does not collapse to two short cards. */
.chart-placeholder__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 16rem;
}

.chart-placeholder__body .medallion {
  color: var(--neutral-fg-3);
}

.empty-state__title {
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.empty-state__hint {
  max-width: 32ch;
  color: var(--color-text-muted);
}

.chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-2);
}

.chart__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.chart__filters {
  display: flex;
  gap: var(--space-2);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  /* Left edge must line up with .chart__head above it. */
  padding: 0 var(--space-4) var(--space-1);
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

.chart__body {
  padding: 0.25rem var(--space-2) var(--space-3);
  position: relative;
}

.chart__body svg {
  width: 100%;
  height: auto;
}

.grid-line {
  stroke: var(--neutral-border-1);
  stroke-width: 1;
}

.axis-text {
  font-size: 11px;
  fill: var(--neutral-fg-3);
  font-variant-numeric: tabular-nums;
}

.axis-title {
  font-size: 11px;
  fill: var(--color-text-muted);
  font-weight: var(--font-medium);
}

.series-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.dot {
  stroke: var(--color-surface);
  stroke-width: 2;
}

.crosshair {
  stroke: var(--neutral-border-2);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0;
}

.hit {
  fill: transparent;
  cursor: pointer;
}

.bar-seg {
  transition: opacity 0.12s;
}

.bar-col.is-dim .bar-seg {
  opacity: 0.45;
}

.chart-tip {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: var(--color-surface);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2, 0 6px 16px -2px rgba(0, 0, 0, 0.15));
  padding: var(--space-3) var(--space-4);
  min-width: 11rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: opacity 0.1s;
}

.chart-tip__title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.chart-tip__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.chart-tip__row + .chart-tip__row {
  margin-top: 0.3125rem;
}

.chart-tip__sw {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}

.chart-tip__k {
  color: var(--color-text-muted);
}

.chart-tip__v {
  margin-left: auto;
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
}

.chart-tip__total {
  display: flex;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--size-px) solid var(--color-border);
  font-weight: var(--font-semibold);
}

.chart-tip__total span:last-child {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.table-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.5625rem var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.table-toggle:hover {
  background: var(--neutral-bg-hover);
}

.table-toggle[aria-pressed="true"] {
  background: var(--brand-bg-subtle);
  color: var(--color-brand);
  border-color: var(--color-brand);
}

.table-wrap {
  overflow-x: auto;
  /* OWF-STAB-14: no outer padding — app-main gutter owns spacing */
  padding: 0;
}

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

.table-wrap th,
.table-wrap td {
  text-align: right;
  padding: var(--space-2) 0.625rem;
  border-bottom: var(--size-px) solid var(--color-border);
  font-variant-numeric: tabular-nums;
}

.table-wrap th:first-child,
.table-wrap td:first-child {
  text-align: left;
  font-variant-numeric: normal;
}

.table-wrap thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neutral-fg-3);
  font-weight: var(--font-semibold);
  border-bottom-color: var(--neutral-border-2);
}

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

/* ===================================================================
 * DI-CORE-03 — Reports catalog + flagship detail (A10 archetype).
 * First build of /org-admin/reports; no prior shipped CSS to reuse.
 * =================================================================== */

.report-back-link {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.report-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Breathing room before the next group's title — groups previously butted
     straight up against each other with only the internal title-to-grid gap. */
  margin-bottom: var(--space-6);
}

.report-group:last-child {
  margin-bottom: 0;
}

.report-group__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0;
}

.report-grid {
  display: grid;
  /* auto-fit (not auto-fill) so the real cards stretch to fill leftover row
     space instead of staying pinned at the minmax minimum with empty,
     invisible track space beside them — that reserved-but-empty space was
     what read as "too narrow". Minimum width also raised a bit. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
}

.report-card {
  padding: var(--space-5);
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  text-decoration: none;
  color: inherit;
}

a.report-card:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-2);
}

.report-card--flagship {
  border-color: var(--color-brand);
  border-width: 1.5px;
}

.report-card__flag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand);
  background: var(--brand-bg-subtle);
  padding: 2px 8px;
  border-radius: 40px;
}

.report-card__name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: 0;
  color: var(--neutral-fg-1);
}

.report-card__question {
  font-size: var(--text-sm);
  color: var(--neutral-fg-2);
  margin: 0;
}

.report-card__meta {
  font-size: var(--text-xs);
  color: var(--neutral-fg-3);
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: var(--size-px) solid var(--neutral-border-1);
}

.param-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.report-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--neutral-bg-1);
  border: var(--size-px) solid var(--neutral-border-1);
  border-radius: var(--radius-lg);
  padding: 8px 12px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-fg-1);
  font-family: inherit;
  cursor: not-allowed;
}

.param-bar__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--neutral-fg-1);
  margin-left: auto;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .summary-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

.summary-stat {
  padding: var(--space-4);
}

.summary-stat__label {
  font-size: var(--text-sm);
  color: var(--neutral-fg-2);
  font-weight: var(--font-medium);
}

.summary-stat__value {
  font-size: var(--text-stat-value);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* DASH-01-W7 — report summary tiles carry a MetricValue, so they need the same
   unavailable treatment the dashboard tiles use, plus an explicit period label. */
.summary-stat__value--unavailable {
  color: var(--neutral-fg-3);
}

.summary-stat__period {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.chart-card {
  padding: var(--space-4) var(--space-3) var(--space-4);
}

.chart-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-3);
  padding: 0 var(--space-1);
}

.report-grid-line {
  stroke: var(--neutral-border-1);
  stroke-width: 1;
}

.report-axis-text {
  font-size: 11px;
  fill: var(--neutral-fg-3);
}

.report-table__practice {
  color: var(--color-brand);
  font-weight: var(--font-medium);
}

.report-export-bar {
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.report-export-bar__note {
  font-size: var(--text-sm);
  color: var(--neutral-fg-2);
  margin: 0;
}

/* ORG-ADMIN-USER-FLOWS-01 — Add Users table: full card width; symmetric 16px edge gutters. */
.users-add-panel .users-add-panel__table,
.users-add-panel .users-add-panel__table.user-bulk-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

/* Leading cols share space after fixed Module + Action (trailing cols adjacent, no mid-gap). */
.users-add-panel .users-add-panel__table .users-add-panel__col--email {
  width: calc((100% - 11.5rem - 6.5rem) * 0.40);
}

.users-add-panel .users-add-panel__table .users-add-panel__col--role,
.users-add-panel .users-add-panel__table .users-add-panel__col--entity {
  width: calc((100% - 11.5rem - 6.5rem) * 0.30);
}

.users-add-panel .users-add-panel__table .users-add-panel__col--module {
  width: 11.5rem;
  max-width: 11.5rem;
}

.users-add-panel .users-add-panel__table .users-add-panel__col--action {
  width: 6.5rem;
}

.users-add-panel .users-add-panel__table thead th,
.users-add-panel .users-add-panel__table tbody td {
  vertical-align: middle;
  text-align: left;
}

/* Match sponsor mock: 16px inset at both table edges (Email start + Action end). */
.users-add-panel .users-add-panel__table thead th:first-child,
.users-add-panel .users-add-panel__table tbody td:first-child {
  padding-left: 16px;
}

.users-add-panel .users-add-panel__table thead th:last-child,
.users-add-panel .users-add-panel__table tbody td.user-bulk-row__actions {
  padding-right: 16px;
}

.users-add-panel .users-add-panel__table thead th:nth-child(5),
.users-add-panel .users-add-panel__table tbody td.user-bulk-row__actions {
  text-align: right;
}

.users-add-panel .users-add-panel__table thead th:nth-child(4),
.users-add-panel .users-add-panel__table thead th:nth-child(5),
.users-add-panel .users-add-panel__table .user-bulk-row__actions {
  white-space: nowrap;
}

.users-add-panel .users-add-panel__table .user-bulk-row__workflow-cell {
  max-width: 11.5rem;
}

/* Module Access SSR/JS errors sit as direct siblings of the chip group. */
.users-add-panel .users-add-panel__table .user-bulk-row__workflow-cell > .form-field__error,
.users-add-panel .users-add-panel__table td.user-bulk-row__cell--error > .form-field__error {
  display: block !important;
}

.users-list-stack .psm-table.users-table .users-table__col-name {
  width: 18%;
}

.users-list-stack .psm-table.users-table .users-table__col-email {
  width: 24%;
}

.users-list-stack .psm-table.users-table .users-table__col-role {
  width: 14%;
}

.users-list-stack .psm-table.users-table .users-table__col-entity {
  width: 16%;
}

.users-list-stack .psm-table.users-table .users-table__col-status {
  width: 14%;
}

.users-list-stack .psm-table.users-table .users-table__col-actions {
  width: 14%;
}

.users-table__name--empty {
  color: var(--color-text-muted);
}

/* Bottom users list — truncated cell tooltip (match Activity Logs `.audit-logs-ip__copied`). */
.users-list-stack .users-card {
  overflow: visible;
}

.users-list-stack .users-table td:has(.users-table__truncate-tip[data-tooltip]) {
  overflow: visible;
}

.users-list-stack .users-table__truncate-tip[data-tooltip] {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  outline: none;
}

.users-list-stack .users-table__truncate-tip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 30;
  left: 0;
  bottom: calc(100% + 8px);
  box-sizing: border-box;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--neutral-fg-1);
  color: var(--neutral-bg-1);
  font-size: 11px;
  line-height: 16px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: min(360px, 85vw);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease-in-out;
}

.users-list-stack .users-table__truncate-tip[data-tooltip]::before {
  content: "";
  position: absolute;
  z-index: 30;
  left: 12px;
  bottom: calc(100% + 3px);
  border: 5px solid transparent;
  border-top-color: var(--neutral-fg-1);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease-in-out;
}

.users-list-stack .users-table__truncate-tip[data-tooltip]:hover::after,
.users-list-stack .users-table__truncate-tip[data-tooltip]:hover::before,
.users-list-stack .users-table__truncate-tip[data-tooltip]:focus-visible::after,
.users-list-stack .users-table__truncate-tip[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

/* ORG-ADMIN-USER-FLOWS-01 — Add Users module chips + single-row footer (sponsor mock). */
.users-add-panel .users-add-panel__table .users-add-panel__th--module,
.users-add-panel .users-add-panel__table .users-add-panel__td--module {
  text-align: left;
  vertical-align: middle;
}

.users-add-panel .users-add-panel__table .users-add-panel__td--module,
.users-add-panel .users-add-panel__table .user-bulk-row__workflow-cell {
  overflow: visible;
}

.users-add-panel .users-add-panel__table-wrap {
  overflow-y: visible;
}

.users-add-panel .users-add-panel__table .user-bulk-row__workflow-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 40px;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Supersede legacy checkbox chip rules from 06-workflows when present. */
.users-add-panel .users-add-panel__table .user-bulk-row__workflow-check {
  display: none;
}

.users-add-panel .users-add-panel__table .user-bulk-row__module-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  min-width: 40px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--neutral-border-1);
  border-radius: 6px;
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-2);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.users-add-panel .users-add-panel__table .user-bulk-row__module-chip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 30;
  left: 0;
  bottom: calc(100% + 8px);
  box-sizing: border-box;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--neutral-fg-1);
  color: var(--neutral-bg-1);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease-in-out;
}

.users-add-panel .users-add-panel__table .user-bulk-row__module-chip[data-tooltip]::before {
  content: "";
  position: absolute;
  z-index: 30;
  left: 12px;
  bottom: calc(100% + 3px);
  border: 5px solid transparent;
  border-top-color: var(--neutral-fg-1);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease-in-out;
}

.users-add-panel .users-add-panel__table .user-bulk-row__module-chip[data-tooltip]:hover::after,
.users-add-panel .users-add-panel__table .user-bulk-row__module-chip[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

.users-add-panel .users-add-panel__table .user-bulk-row__module-chip-text {
  pointer-events: none;
}

.users-add-panel .users-add-panel__table .user-bulk-row__module-chip:has(input:checked:not(:disabled)) {
  border-color: var(--brand-fg-1);
  background: var(--status-info-bg);
  color: var(--brand-fg-1);
  font-weight: var(--font-semibold);
}

.users-add-panel .users-add-panel__table .user-bulk-row__module-chip:has(input:disabled:not(:checked)) {
  cursor: not-allowed;
  border-color: var(--neutral-border-1);
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-3);
  opacity: 1;
}

.users-add-panel .users-add-panel__table .user-bulk-row__module-chip:has(input:disabled:checked) {
  cursor: not-allowed;
  border-color: var(--brand-fg-1);
  background: var(--status-info-bg);
  color: var(--brand-fg-1);
  font-weight: var(--font-semibold);
  opacity: 0.65;
}

.users-add-panel .users-add-panel__table .user-bulk-row__workflow-cell--inactive .user-bulk-row__workflow-group {
  opacity: 0.55;
}

.users-add-panel .users-add-panel__table .user-bulk-row__module-chip:focus-within,
.users-add-panel .users-add-panel__table .user-bulk-row__module-chip input:focus,
.users-add-panel .users-add-panel__table .user-bulk-row__module-chip input:focus-visible {
  outline: none;
}

.users-add-panel .user-bulk-row__cell--error .user-bulk-row__module-chip:not(:has(input:checked)) {
  border-color: var(--color-error);
}

.users-add-panel .users-add-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
}

.users-add-panel .users-add-panel__footer .users-add-panel__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--neutral-fg-2);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.users-add-panel .users-add-panel__footer .users-add-panel__legend-sep {
  color: var(--neutral-fg-3);
}

.users-add-panel .users-add-panel__footer .users-add-panel__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  margin: 0;
  padding: 0;
  flex: none;
}

/* REPORTS-01 — manager assignment-narrow hint under page header */
.page-header .report-scope-hint {
  margin-top: var(--space-2);
}
/* ===== 06-workflows.css ===== */
.phase-band {
  border-left: var(--size-4px) solid var(--color-border-strong);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--space-4);
}

.phase-band--ingestion { background: var(--phase-ingestion); border-color: var(--color-upstream); }
.phase-band--generation { background: var(--phase-generation); border-color: var(--color-posting); }
.phase-band--reconciliation { background: var(--phase-reconciliation); border-color: var(--color-warning); }
.phase-band--approval { background: var(--phase-approval); border-color: var(--color-system); }
.phase-band--fulfillment { background: var(--phase-fulfillment); border-color: var(--color-operator); }
.phase-band--tracking { background: var(--phase-tracking); border-color: var(--color-text-subtle); }

.workflow-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: var(--size-px) solid var(--color-border);
  margin-bottom: var(--space-6);
}

.workflow-tabs button,
.workflow-tabs a {
  padding: var(--space-3) var(--space-4);
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  border-bottom: var(--size-2px) solid var(--color-transparent);
  margin-bottom: var(--space-1-neg);
}

.workflow-tabs a.is-active,
.workflow-tabs a:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-operator);
  text-decoration: none;
}

/* STAB-D-PSM-58: batch summary stat trio + meta line (tracker #29 supersession) ?
   replaces the flat .batch-summary definition-list grid (unused after the rebuild,
   see fragments/batch-summary-panel.html). */
.stat-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.stat-trio__item {
  padding: var(--space-3);
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
}

.stat-trio__value {
  display: block;
  font-size: 1.375rem;
  font-weight: var(--font-bold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.stat-trio__value--muted { color: var(--color-text-subtle); }

.stat-trio__label {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--size-px) solid var(--color-border);
}

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

.meta-row__item dt {
  display: inline;
  margin: 0;
  color: var(--color-text-muted);
}

.meta-row__item dd {
  display: inline;
  margin: 0 0 0 var(--space-1);
  font-weight: var(--font-medium);
}

.meta-row__truncate {
  display: inline-block;
  max-width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.queue-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
}

.activity-feed {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.activity-feed li {
  padding: var(--space-2) 0;
  border-bottom: var(--size-px) solid var(--color-border);
  list-style: none;
}

.activity-feed time {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.prototype-banner {
  background: var(--color-warning-bg);
  border: var(--size-px) solid var(--color-warning);
  color: var(--color-warning);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  text-align: center;
}

.job-status-panel__hint {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

/* STAB-D-PSM-58: card matches its grid sibling's stretched height (batch-detail-grid
   align-items:stretch) but the stepper is short. The stepper centres in its own
   flexed space; the completion line is a plain trailing sibling, so it lands at the
   card's bottom edge instead of hugging the stepper. */
.job-status-panel {
  display: flex;
  flex-direction: column;
}

.job-status-panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#job-status-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.job-status-panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.job-status-panel__header .card__title {
  margin-bottom: 0;
}

.job-status-panel__toolbar {
  gap: var(--space-2);
}

.batch-failure-banner {
  margin-bottom: var(--space-4);
}

.batch-failure-banner__message {
  margin: 0;
  font-weight: var(--font-medium);
}

.batch-failure-banner__action {
  margin: var(--space-2) 0 0;
}

.artifact-download-card__hint {
  margin-top: calc(var(--space-1) * -1);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

/* STAB-D-PSM-58: file icon + name/hint stack replaces the plain label (tracker #29
   supersession) ? see fragments/batch-artifact-download-list.html. */
/* STAB-D-PSM-58: the CSV glyph is full-colour artwork now, not a plain outline, so it
   no longer needs the neutral swatch backdrop ? that would just double up the chrome. */
.artifact-list__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.artifact-list__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.artifact-list__name {
  font-weight: var(--font-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artifact-list__hint {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.artifact-list__action {
  flex-shrink: 0;
}

/* STAB-D-PSM-58: pipeline jobs as a horizontal stepper (tracker #29 supersession) ?
   six rows each carrying its own repeated "Complete" badge read as noise once every
   stage finished. Kept every class name and DOM position the polling animator in
   psm-ui.js (createJobStatusAnimator/renderJobStatusRow) queries ? this is a CSS-only
   reskin, no template or JS changes, so live pipeline polling keeps working as-is. */
.job-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.job-status-list__item {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  text-align: center;
}

/* Connector drawn by the item it leaves, coloured once that item completes. */
.job-status-list__item::before {
  content: "";
  position: absolute;
  top: calc(var(--space-5) / 2);
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--color-border-strong);
  z-index: 0;
}

.job-status-list__item:last-child::before { display: none; }
.job-status-list__item--completed::before { background: var(--color-success); }

.job-status-list__icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  color: var(--color-text-subtle);
}

.job-status-list__icon--success { background: var(--color-success); border-color: var(--color-success); color: var(--neutral-bg-1); }
.job-status-list__icon--danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--neutral-bg-1); }
.job-status-list__icon--info { border-color: var(--color-brand); color: var(--color-brand); box-shadow: 0 0 0 4px var(--control-accent-ring); }
.job-status-list__icon--neutral { color: var(--color-text-subtle); }

.job-status-list__label {
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  line-height: 1.3;
}

.job-status-list__item--completed .job-status-list__label,
.job-status-list__item--running .job-status-list__label,
.job-status-list__item--failed .job-status-list__label {
  color: var(--color-text);
  font-weight: var(--font-semibold);
}

.job-status-list__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
  /* Reserve one caption line on every step so the running caption appearing/disappearing
     during a stage transition never changes the stepper height (no vertical jitter). */
  min-height: 1.25rem;
}

/* STAB-D-PSM-58: per-artifact ? Complete/Pending steps get no caption at all (the
   glyph alone reads as done/upcoming); Running/Failed keep a caption but strip the
   global .badge pill chrome (bg/padding/uppercase) down to plain coloured text, since
   a bold pill repeated per step read as heavier than the mock's light caption. Scoped
   to .job-status-list__badge only ? the shared .badge component is untouched. */
.job-status-list__badge.badge--success,
.job-status-list__badge.badge--neutral {
  display: none;
}

.job-status-list__badge {
  background: none;
  padding: 0;
  border-radius: 0;
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--font-medium);
}

.job-status-list__badge.badge--info { color: var(--color-brand); }
.job-status-list__badge.badge--danger { color: var(--color-danger); }

.job-status-list__retry-form {
  margin: 0;
  display: inline-flex;
}

.job-status-list__retry {
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--color-danger);
  border-color: transparent;
  background: transparent;
}

.job-status-list__retry:hover,
.job-status-list__retry:focus-visible {
  color: var(--color-brand);
  background: var(--color-surface-muted);
}

.job-status-list__item--completed .job-status-list__icon-glyph {
  animation: job-status-check-pop 0.35s ease-out;
}

.job-status-list__spinner {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--control-accent-ring);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: job-status-spin 0.75s linear infinite;
}

.job-status-list__item--running .job-status-list__icon-glyph {
  display: none;
}

.job-status-running-dots {
  display: inline-flex;
  gap: 1px;
  font-weight: var(--font-bold);
  color: var(--color-brand);
  letter-spacing: 0;
  min-width: 1.25rem;
}

.job-status-running-dots span {
  animation: job-status-dot 1.2s ease-in-out infinite;
}

.job-status-running-dots span:nth-child(2) { animation-delay: 0.15s; }
.job-status-running-dots span:nth-child(3) { animation-delay: 0.3s; }

/* STAB-D-PSM-58: matches the approved artifact's muted caption treatment ? .job-status-
   panel__hint's font-size without inheriting the card's default (dark, bold-reading)
   text color. */
.job-status-panel__complete {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

.job-status-panel__complete[hidden] {
  display: none;
}

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

@keyframes job-status-dot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

@keyframes job-status-check-pop {
  0% { transform: scale(0.6); opacity: 0.5; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .job-status-list__item--completed .job-status-list__icon-glyph,
  .job-status-list__spinner,
  .job-status-running-dots span,
  .badge--info.badge--pulse {
    animation: none;
  }
}

.artifact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.artifact-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--size-px) solid var(--color-border);
  font-size: var(--text-sm);
}

.artifact-list__item:last-child {
  border-bottom: none;
}

/* STAB-D-PSM-58: dot + count replaces three badge pills (tracker #29 supersession). */
.summary-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.summary-counts__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.summary-counts__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.summary-counts__dot--success { background: var(--color-success); }
.summary-counts__dot--danger { background: var(--color-danger); }
.summary-counts__dot--warning { background: var(--color-warning); }

.summary-counts__n {
  font-weight: var(--font-semibold);
  font-variant-numeric: tabular-nums;
}

/* STAB-D-PSM-58: whole-card gradient tint replaces phase-band's left-accent-bar
   treatment (tracker #29 supersession) — same pale-blue family the app already uses
   for this phase (--phase-ingestion/--color-upstream-bg), just applied as a soft
   full-card wash instead of a 4px rail.
   STAB-AEP-17 reverted 2026-08-08 — sponsor requires gradient. */
.melissa-summary-panel {
  background: linear-gradient(180deg, var(--phase-ingestion) 0%, var(--color-surface) 40%);
  border-color: var(--color-upstream-bg);
}

.melissa-summary-panel__footnote {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ADDR-ENRICH-PANEL-01: flagged table layout, fixed-height viewport (D5), rail stats. */
.melissa-summary-panel .card__head.enrich-card__head,
.enrich-card__head {
  margin-bottom: var(--space-4);
}

.melissa-summary-panel .card__titlewrap,
.enrich-card__head .card__titlewrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2);
  row-gap: var(--space-2);
  width: 100%;
}

.melissa-summary-panel .card__titlewrap .card__title,
.enrich-card__head .card__titlewrap .card__title {
  margin: 0;
  padding: 0;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

.enrich-export {
  margin-left: auto;
}

.enrich-outcome {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  padding: 2px var(--space-3);
  border-radius: 999px;
  color: var(--color-text-muted);
}

.enrich-outcome__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.enrich-outcome--success {
  color: var(--color-success);
  background: var(--color-success-bg);
}

.enrich-outcome--progress {
  color: var(--color-brand);
  background: var(--color-brand-bg);
}

.enrich-outcome--review {
  color: var(--color-warning);
  background: var(--color-warning-bg);
}

.enrich-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 208px;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 900px) {
  .enrich-body {
    grid-template-columns: 1fr;
  }

  .enrich-rail {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .enrich-rail__counts {
    flex: 1 1 160px;
  }
}

.enrich-main {
  min-width: 0;
}

.enrich-table-shell {
  --enrich-row-h: 60px;
  --enrich-head-h: 36px;
  --enrich-rows-visible: 3;
  height: calc(var(--enrich-head-h) + (var(--enrich-rows-visible) * var(--enrich-row-h)));
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.enrich-table-shell thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-muted);
}

.enrich-empty {
  height: calc(var(--enrich-rows-visible) * var(--enrich-row-h));
  vertical-align: middle;
  text-align: center;
  border: none;
}

.enrich-empty__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: calc(var(--enrich-rows-visible) * var(--enrich-row-h));
  padding: var(--space-3);
}

.enrich-empty__mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  background: var(--color-success-bg);
  color: var(--color-success);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.enrich-empty__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.enrich-empty__hint {
  margin: 0;
  font-size: var(--text-xs);
  max-width: none;
  white-space: nowrap;
}

.enrich-warn {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.enrich-warn__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
}

.enrich-warn__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.enrich-warn__chip--error { color: var(--color-error); }
.enrich-warn__chip--error .enrich-warn__dot { background: var(--color-error); }
.enrich-warn__chip--warning { color: var(--color-warning); }
.enrich-warn__chip--warning .enrich-warn__dot { background: var(--color-warning); }

.enrich-warn__codes {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.enrich-addr {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: var(--text-sm);
}

.enrich-addr__row {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

.enrich-addr__tag {
  flex-shrink: 0;
  width: 2rem;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-transform: lowercase;
}

.enrich-addr__row--was .enrich-addr__text {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.enrich-addr__fallback {
  color: var(--color-text-muted);
  font-style: italic;
}

.enrich-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.enrich-rail__counts.summary-counts,
.enrich-rail .summary-counts {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
}

.enrich-rail .summary-counts__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.enrich-rail .summary-counts__item:last-child {
  border-bottom: none;
}

.enrich-rail .summary-counts__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
}

.enrich-rail .summary-counts__n {
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.enrich-rail .summary-counts__n--success {
  color: var(--color-success);
}

.enrich-rail .melissa-insights__item {
  padding: var(--space-3) 0 var(--space-1);
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.enrich-rail .melissa-insights__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: 3px;
}

.enrich-rail .melissa-insights__value {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.4;
}

.enrich-rail .melissa-insights__value strong {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.2;
}

/* Enrich pager: no grey bar (mock) — override shared .psm-table-pagination fill */
.enrich-pagination.psm-table-pagination {
  height: auto;
  min-height: 30px;
  margin-top: var(--space-3);
  padding: 0;
  background: transparent;
  border-top: 0;
  color: var(--color-text-muted);
}

.enrich-pagination .psm-table-pagination__summary {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.enrich-pagination.is-hidden,
.enrich-pagination .is-hidden {
  visibility: hidden;
}

.payer-row-menu__trigger--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.payer-row-menu__trigger--disabled:hover {
  background: transparent;
}

.melissa-row--failed {
  background: var(--color-danger-bg);
}

.batch-locked-banner {
  margin-bottom: var(--space-4);
}

.batch-locked-banner__content {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.batch-locked-banner__icon {
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
  margin-top: var(--space-1);
}

.batch-locked-banner__title {
  margin: 0;
}

.batch-locked-banner__meta,
.batch-locked-banner__hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.batch-detail-grid {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  align-items: stretch;
  width: 100%;
}

.batch-detail-grid--2col {
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .batch-detail-grid--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.batch-detail-grid > *,
.batch-detail-grid__cell,
.batch-enrichment-placeholder {
  margin-bottom: 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  height: 100%;
}

.batch-summary-card .card__title {
  margin-bottom: var(--space-3);
}

/* STAB-D-PSM-58: badge sits with the title (approved artifact); action button(s)
   stay at the header's trailing edge (page-toolbar is flex/space-between). */
.page-header__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.batch-detail-actions-panel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* STAB-D-PSM-59: batch detail Statements panel uses .psm-table--compact (was
   entities-card/entities-table/entities-pagination ? 36px header / 40px rows),
   not the wider/taller .psm-table--comfortable, so hundreds of statement rows
   per batch stay compact and match Entities/Practices/Users/Batches. */
.batch-statements-card {
  margin-bottom: var(--space-6);
}

.patient-statement-filter-bar {
  margin-bottom: var(--space-4);
}

.batch-statements-card__title {
  margin: 0;
  padding: 12px 16px;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--neutral-fg-1);
  border-bottom: 1px solid var(--neutral-border-1);
}

.batch-statements-table__col-id { width: 11%; }
.batch-statements-table__col-date { width: 11%; }
.batch-statements-table__col-patient { width: 20%; }
.batch-statements-table__col-amount { width: 8%; }
.batch-statements-table__col-status { width: 10%; }
.batch-statements-table__col-tracking { width: 17%; }
.batch-statements-table__col-delivery { width: 11%; }
.batch-statements-table__col-actions { width: 12%; }

/* STAB-D-PSM-57: PDF preview + retry + more-actions merged into one Actions column
   (payer-mailings/queue look ? small icon buttons via .payer-queue-action-btn,
   reused here so both list screens share one action-button component). A row can
   need retry AND the reconcile toggle at once (independent validationStatus/
   rowStatus flags) ? let this cell grow past the shared 40px row height instead of
   silently clipping a wrapped third icon. */
.batch-statements-table td.batch-statements-table__col-actions {
  height: auto;
  min-height: 40px;
  overflow: visible;
  white-space: normal;
}

.batch-statements-panel__flash {
  margin-bottom: var(--space-3);
}

.batch-statements-table__expand-col {
  width: 2.25rem;
  padding-inline: var(--space-2);
}

.statement-reconcile-panel-row[hidden] {
  display: none;
}

.statement-reconcile-panel {
  padding: var(--space-4);
  background: var(--color-surface-muted);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-md);
}

.statement-reconcile-panel__fields {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 40rem) {
  .statement-reconcile-panel__fields {
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    align-items: start;
  }
}

.statement-reconcile-panel__footer {
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.batch-statements-table__row--reconciled {
  background: color-mix(in srgb, var(--color-surface-muted) 65%, transparent);
}

.batch-statements-panel__mark-ready-form {
  margin: 0;
}

.batch-enrichment-placeholder {
  display: flex;
  flex-direction: column;
}

.melissa-insights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.melissa-insights__item {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.melissa-insights__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-muted);
}

.melissa-insights__value {
  color: var(--color-text);
}

.melissa-insights__item--alert .melissa-insights__value {
  color: var(--color-warning);
}

.batch-statements-panel__page-size {
  width: auto;
  min-width: 4.5rem;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

.queue-table__row--muted {
  opacity: 0.85;
}

.approve-batch-modal .psm-modal__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.reconciliation-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 64rem) {
  .reconciliation-layout {
    grid-template-columns: minmax(0, 2fr) minmax(var(--size-280px), 1fr);
  }
}

.reconciliation-layout__queue {
  min-width: 0;
}

.reconciliation-row-actions {
  flex-wrap: wrap;
  gap: var(--space-2);
}

.reconciliation-filter-bar {
  margin-bottom: var(--space-4);
}

.reconciliation-activity-feed {
  position: sticky;
  top: var(--space-4);
}

.activity-feed__header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: baseline;
}

.activity-feed__actor {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
}

.activity-feed__reason,
.activity-feed__note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.activity-feed__expand {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}

.reconciliation-action-modal .psm-modal__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.reconciliation-batch-toolbar {
  margin-bottom: var(--space-4);
}

.reconciliation-approval-blocked,
.reconciliation-ready-banner {
  margin-bottom: var(--space-4);
}

.reconciliation-row--blocked {
  background: var(--color-warning-bg);
}

.reconciliation-row-hint {
  display: block;
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

.card__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-3);
}

/* Sprint 6 payer mailing (PAY-01..05 ? S4 ?8.2) ? STAB-D-PSM-44: stack tabs + filters */
.payer-queue-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.payer-queue-filters {
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
}

.payer-queue-filters__control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 10rem;
  max-width: 100%;
}

.payer-queue-filters__control label {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
  margin: 0;
}

.payer-queue-filters__control .form-field__control,
.payer-queue-filters__control select {
  box-sizing: border-box;
  min-height: 40px;
  height: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  background: var(--neutral-bg-input);
  font-size: var(--text-base);
  line-height: 20px;
  min-width: 9rem;
  width: 100%;
}

.payer-queue-filters__clear {
  align-self: flex-end;
  margin-bottom: 0;
  flex-shrink: 0;
}

.payer-queue-table-wrap {
  margin-bottom: var(--space-4);
}

.payer-queue-table-wrap.table-wrap {
  overflow: visible;
}

.payer-queue-table-wrap .queue-table {
  overflow: visible;
}

/* STAB-D-PSM-39: Practices-like fixed columns on payer queue */
.payer-queue-table {
  table-layout: fixed;
  width: 100%;
}

/* #23: fixed-layout columns clip overflowing text (e.g. long document names) with an ellipsis
   instead of spilling into the adjacent column. Free-text cells carry a title= for the full value.
   Status/actions columns are excluded so badges and buttons still lay out normally. */
.payer-queue-table__col-doc-id,
.payer-queue-table__col-doc-name,
.payer-queue-table__col-practice,
.payer-queue-table__col-payer,
.payer-queue-table__col-mail,
.payer-queue-table__col-tracking,
.payer-queue-table__col-uploaded {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payer-queue-table__col-select { width: 3%; }
.payer-queue-table__col-doc-id { width: 11%; }
.payer-queue-table__col-doc-name { width: 13%; }
.payer-queue-table__col-practice { width: 11%; }
.payer-queue-table__col-payer { width: 9%; }
.payer-queue-table__col-mail { width: 11%; }
.payer-queue-table__col-status { width: 10%; }
.payer-queue-table__col-tracking { width: 11%; }
.payer-queue-table__col-uploaded { width: 11%; }
.payer-queue-table__col-actions { width: 10%; }

.payer-row-menu__panel--portal {
  position: fixed;
  z-index: 3000;
  min-width: 11rem;
  padding: var(--space-1);
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.payer-row-menu__panel--portal[hidden] {
  display: none !important;
}

.payer-row-menu__panel--source {
  display: none !important;
}

.payer-queue-row__select {
  width: var(--size-40px);
}

.payer-queue-row__display-id {
  font-weight: var(--font-medium);
}

.payer-queue-row__actions {
  min-width: var(--size-12rem);
}

.payer-queue-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: none;
}

.payer-queue-action-btn:hover,
.payer-queue-action-btn:focus-visible {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.payer-queue-action-btn--success {
  color: var(--color-success);
}

.payer-queue-action-btn--danger {
  color: var(--color-error);
}

.payer-queue-action-btn--primary {
  color: var(--color-brand);
}

.payer-queue-action-btn__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.payer-row-menu {
  position: relative;
  display: inline-flex;
}

.payer-row-menu__trigger {
  list-style: none;
}

.payer-row-menu__form {
  margin: 0;
}

.payer-row-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.payer-row-menu__item:hover,
.payer-row-menu__item:focus-visible {
  background: var(--color-surface-muted);
}

.payer-row-menu__item--danger {
  color: var(--color-error);
}

.payer-row-menu__item--primary {
  color: var(--color-brand);
  font-weight: var(--font-medium);
}

.payer-row-menu__item svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.payer-queue-row__reason {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payer-bulk-footer {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky, 10);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-raised);
}

.payer-bulk-footer__count {
  margin: 0;
  font-weight: var(--font-medium);
}

.payer-mail-config-table {
  margin-bottom: var(--space-4);
}

.payer-upload-validation__table {
  margin-top: var(--space-3);
}

.badge--upload_rejected {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.badge--on_hold {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* PR-2b ? org-admin practice review (Figma 424-2778 / REQ-2041) */
/* Keep review header fixed; only details body scrolls (scoped to this page) */
.app-column:has(.practice-review-page) {
  height: var(--full-height-viewport);
  max-height: var(--full-height-viewport);
  overflow: hidden;
}

.app-main:has(.practice-review-page) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.practice-review-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  min-height: 0;
  margin: 0 auto;
  padding-top: 4px;
  overflow: hidden;
}

.practice-review-page__header-block {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 12px;
  width: 100%;
  background: var(--color-bg);
}

.practice-review-page__header-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.practice-review-page__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Prevent section cards from collapsing under flex height constraints */
.practice-review-page__body > * {
  flex-shrink: 0;
}

.practice-review-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  color: var(--brand-fg-1);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.practice-review-back:hover {
  color: var(--brand-fg-1);
  text-decoration: none;
}

.practice-review-back__icon {
  flex-shrink: 0;
}

.practice-review-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.practice-review-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.practice-review-hero__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.practice-review-hero__title {
  margin: 0;
  font-size: 1.875rem;
  font-weight: var(--font-semibold);
  line-height: 2.25rem;
  letter-spacing: 0;
  color: var(--color-text);
}

.practice-review-hero__subtitle {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--font-normal);
  line-height: 1.5rem;
  color: var(--neutral-fg-2);
}

.practice-review-hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

/* Hide Reject/Approve while the reject panel is open (Figma 382:5925) */
.practice-review-page__header-main:has(.approval-reject-panel.is-open) .practice-review-hero__actions,
.request-detail-page__header-main:has(.approval-reject-panel.is-open) .request-detail-hero__actions {
  display: none;
}

.practice-review-hero__approve-form {
  margin: 0;
}

.practice-review-hero__divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--neutral-border-1);
  width: 100%;
}

.practice-review-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: var(--font-medium);
  line-height: 1.5rem;
  cursor: pointer;
  white-space: nowrap;
}

.practice-review-btn--reject {
  background: var(--neutral-bg-1);
  border-color: #ff939a;
  color: var(--status-error-fg);
}

.practice-review-btn--reject:hover {
  background: var(--status-error-bg);
  border-color: #ff939a;
  color: var(--status-error-fg);
}

.practice-review-btn--approve {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-fg);
}

.practice-review-btn--approve:hover {
  background: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
  color: var(--cta-fg);
}

.practice-review-section-label {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.practice-review-card,
.practice-review-section {
  width: 100%;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  overflow: hidden;
}

.practice-review-request-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.practice-review-section__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 0;
  background: var(--neutral-bg-2);
}

.practice-review-section__header--accent,
.practice-review-section--accent .practice-review-section__header {
  background: #f0f7fa;
}

.practice-review-section__heading {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
}

.practice-review-section__title {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.practice-review-section__header--accent .practice-review-section__title,
.practice-review-section--accent .practice-review-section__title {
  color: var(--brand-fg-1);
}

.practice-review-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.practice-review-field-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.practice-review-fields--addresses .practice-review-field-row {
  justify-content: space-between;
}

.practice-review-field {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.practice-review-field--spacer {
  visibility: hidden;
}

.practice-review-field__label {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.practice-review-field__value {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 20px;
  color: var(--neutral-fg-2);
  word-break: break-word;
}

.practice-review-logo {
  display: block;
  max-width: 120px;
  max-height: 48px;
  object-fit: contain;
}

.practice-review-closed-banner {
  width: 100%;
  background: var(--neutral-bg-2);
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
}

.practice-review-closed-banner__text {
  margin: 0;
  padding: 20px 24px;
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.practice-review-closed-banner__status {
  font-weight: var(--font-medium);
  color: var(--neutral-fg-1);
}

/* Closed-state Requested Data card (Figma 535:970 / 560:2001) */
.practice-requested-data {
  width: 100%;
}

.practice-requested-data__card {
  width: 100%;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  overflow: hidden;
}

.practice-requested-data__header {
  padding: 8px 0;
  background: #f0f7fa;
}

.practice-requested-data__header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 24px;
}

.practice-requested-data__header-title {
  color: var(--brand-fg-1);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  letter-spacing: 0;
}

.practice-requested-data__header-icon {
  flex-shrink: 0;
  color: var(--brand-fg-1);
}

.practice-requested-data__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 24px 0;
}

.practice-requested-data__fields {
  width: 100%;
}

.practice-requested-data__field-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.practice-requested-data__field-grid--addresses .practice-review-field-row {
  justify-content: space-between;
}

.practice-requested-data .practice-review-field-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  width: 100%;
}

.practice-requested-data .practice-review-field {
  flex: 1 1 0;
  gap: 8px;
  min-width: 0;
}

.practice-requested-data .practice-review-field__label {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  letter-spacing: 0;
  color: var(--neutral-fg-1);
}

.practice-requested-data .practice-review-field__value {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 20px;
  letter-spacing: 0;
  color: var(--neutral-fg-2);
  word-break: break-word;
}

.practice-requested-data__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  /* Match collapsed View Details bottom inset when Hide Details is ordered last */
  padding-bottom: 24px;
}

.practice-requested-data__expanded {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.practice-requested-data__divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--neutral-border-1);
  width: 100%;
}

.practice-requested-data__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.practice-requested-data__group-label {
  margin: 0;
  color: var(--neutral-fg-2);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 20px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.practice-requested-data__toggle {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-fg-1);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  letter-spacing: 0;
  cursor: pointer;
  list-style: none;
}

.practice-requested-data__toggle::-webkit-details-marker {
  display: none;
}

.practice-requested-data__toggle::marker {
  content: "";
}

.practice-requested-data__toggle-icon {
  flex-shrink: 0;
  color: var(--brand-fg-1);
  transition: transform 0.15s ease;
}

.practice-requested-data__toggle-label--open {
  display: none;
}

.practice-requested-data__details[open] .practice-requested-data__toggle-label--closed {
  display: none;
}

.practice-requested-data__details[open] .practice-requested-data__toggle-label--open {
  display: inline;
}

.practice-requested-data__details[open] .practice-requested-data__toggle-icon {
  transform: rotate(180deg);
}

.practice-review-field__value--decision {
  display: flex;
  align-items: center;
}

/* Inline reject reason panel (Figma 382:5925 / 229:3734) */
.approval-reject-panel {
  display: none;
  width: 100%;
  margin: 0;
  padding: 16px 24px;
  border: 1px solid var(--status-error-border);
  border-radius: 12px;
  background: var(--status-error-bg);
  box-sizing: border-box;
}

.approval-reject-panel.is-open {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.approval-reject-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.approval-reject-panel__intro {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.approval-reject-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--font-semibold);
  line-height: 1.5rem;
  letter-spacing: 0.2px;
  color: var(--status-error-fg-strong);
}

.approval-reject-panel__helper {
  margin: 0;
  max-width: 392px;
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 20px;
  color: #464646;
}

.approval-reject-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #464646;
  cursor: pointer;
}

.approval-reject-panel__close:hover {
  background: rgb(0 0 0 / 6%);
}

.approval-reject-panel__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0;
}

.approval-reject-panel__field {
  width: 100%;
}

.approval-reject-panel__textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: var(--input-padding);
  border: 1px solid var(--neutral-fg-disabled);
  border-radius: 8px;
  background: var(--neutral-bg-input);
  color: var(--neutral-fg-1);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 20px;
  resize: vertical;
  box-sizing: border-box;
  transition: var(--input-focus-transition);
}

.approval-reject-panel__textarea::placeholder {
  color: var(--input-placeholder);
}

.approval-reject-panel__textarea:focus,
.approval-reject-panel__textarea:focus-visible {
  outline: none;
  border: 1px solid var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-shadow);
  padding: var(--input-padding);
}

.approval-reject-panel__field--error .approval-reject-panel__textarea {
  border-color: var(--input-focus-error-border);
  box-shadow: var(--input-focus-error-shadow);
}

.approval-reject-panel__error {
  margin: 8px 0 0;
  font-size: var(--text-base);
  line-height: 20px;
  color: var(--status-error-fg);
}

.approval-reject-panel__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.approval-reject-panel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: var(--font-medium);
  line-height: 1.5rem;
  cursor: pointer;
  white-space: nowrap;
}

.approval-reject-panel__btn--cancel {
  background: var(--neutral-bg-1);
  border-color: var(--neutral-fg-disabled);
  color: #060606;
}

.approval-reject-panel__btn--cancel:hover {
  background: var(--neutral-bg-page);
}

.approval-reject-panel__btn--submit {
  background: var(--status-error-fg);
  border-color: var(--status-error-fg);
  color: var(--brand-fg-on);
}

.approval-reject-panel__btn--submit:hover {
  background: var(--status-error-fg-strong);
  border-color: var(--status-error-fg-strong);
}

.approval-reject-panel[hidden] {
  display: none !important;
}

/* Legacy class aliases removed ? fragment uses .approval-reject-panel */

/* Breadcrumb link/sep styles live in 03-layout.css (Figma 633:1078). */
.practice-review-header__title {
  margin-bottom: var(--space-2);
}

.practice-review-header__meta {
  gap: var(--space-3);
  flex-wrap: wrap;
}

.practice-review-header__actions {
  flex-shrink: 0;
}

.practice-review__reject-toggle {
  /* Figma reject styles applied via .practice-review-btn--reject */
}

.practice-review-summary__hint {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
}

.decision-panel {
  border: var(--size-px) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-4);
}

.decision-panel--reject {
  background: color-mix(in srgb, var(--color-error-bg) 55%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-error) 35%, var(--color-border));
}

.decision-panel__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.decision-panel__helper {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.decision-panel__actions {
  margin-top: var(--space-4);
  justify-content: flex-end;
}

.decision-panel.is-open {
  display: block;
}

.practice-review-reject-panel[hidden] {
  display: none !important;
}

.approval-reject-toggle:disabled,
.approval-reject-panel__btn:disabled,
.practice-review-reject-panel__btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Org-admin request detail (Figma 382:5327 ? Approval Queue New User).
   Was viewport-clamped with overflow: hidden on the whole column/main/page
   chain, built around a __header-block/__body split the current markup
   (single .card welcome hero + stacked .card sections) never adopted ? with
   no scrollable region left inside, anything past the fold was simply
   clipped and unreachable. Page now flows and scrolls normally like every
   other detail screen (Entities detail, Organization settings, etc.). */
.request-detail-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* was align-items: center ? shrink-wrapped every card to its content width
     and centered it, leaving the page mostly empty instead of the cards
     filling the 1200px column like every other detail screen. */
  align-items: stretch;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 4px;
}

.request-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  color: var(--brand-fg-1);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.request-detail-back:hover {
  color: var(--brand-fg-1);
  text-decoration: none;
}

.request-detail-back__icon {
  flex-shrink: 0;
}

.request-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.request-detail-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.request-detail-hero__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.request-detail-hero__title {
  margin: 0;
  font-size: 1.875rem;
  font-weight: var(--font-semibold);
  line-height: 2.25rem;
  letter-spacing: 0;
  color: var(--neutral-fg-1);
}

.request-detail-hero__subtitle {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--font-normal);
  line-height: 1.5rem;
  color: var(--neutral-fg-2);
}

.request-detail-hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.request-detail-hero__reject-form,
.request-detail-hero__approve-form {
  margin: 0;
}

.request-detail-hero__divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--neutral-border-1);
  width: 100%;
}

.request-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  cursor: pointer;
  white-space: nowrap;
}

.request-detail-btn--reject {
  background: var(--neutral-bg-1);
  border-color: #ff939a;
  color: var(--status-error-fg);
}

.request-detail-btn--reject:hover {
  background: var(--status-error-bg);
  border-color: #ff939a;
  color: var(--status-error-fg);
}

.request-detail-btn--approve {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-fg);
}

.request-detail-btn--approve:hover {
  background: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
  color: var(--cta-fg);
}

.request-detail-section-label {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.request-detail-request-info,
.request-detail-requested-data {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.request-detail-card {
  width: 100%;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  overflow: hidden;
}

.request-detail-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.request-detail-field-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  width: 100%;
}

.request-detail-review-card {
  width: 100%;
}

.request-detail-field {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.request-detail-field__label {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.request-detail-field__value {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.request-detail-field--spacer {
  visibility: hidden;
}

.request-detail-closed-banner {
  width: 100%;
  background: var(--neutral-bg-2);
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
}

.request-detail-closed-banner__text {
  margin: 0;
  padding: 20px 24px;
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.request-detail-closed-banner__status {
  font-weight: var(--font-medium);
  color: var(--neutral-fg-1);
}

.request-detail-field__value--decision {
  display: flex;
  align-items: center;
}

@media (max-width: 960px) {
  .request-detail-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .request-detail-hero__actions {
    justify-content: flex-end;
  }
}

/* Approval workflow pages ? page-level loading (no in-button spinners) */
.psm-page--loading {
  position: relative;
}

.psm-page--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: all;
}

.psm-page--loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 21;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--color-primary, #2563eb);
  border-radius: 50%;
  animation: psm-page-spin 0.75s linear infinite;
  pointer-events: none;
}

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

.practice-review-btn:disabled,
.request-detail-btn:disabled,
.approval-reject-panel__btn:disabled,
.practice-review-reject-panel__btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.practice-review__reject-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Org-admin Entities list / detail / create drawer (Figma 427-1245 / 427-1536 / 427-3300) */
/* Entities list ? Figma 427-1312 + status dropdown 633-905 */
.entities-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.entities-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.entities-page__title {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0;
  color: var(--neutral-fg-1);
}

.entities-page__create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.entities-page__create-icon {
  display: block;
  flex-shrink: 0;
}

.entities-page__create-btn:hover {
  color: var(--cta-fg);
  text-decoration: none;
  opacity: 0.92;
}

.entities-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  width: 100%;
  overflow: visible;
  position: relative;
  z-index: 5;
}

.entities-filters__search {
  flex: 0 0 360px;
  width: 360px;
  max-width: 100%;
}

@media (max-width: 640px) {
  .entities-filters__search {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Figma search field: 360?40; focus matches 769:1118 on the shell */
.entities-filters .psm-figma-search {
  min-height: 40px;
  height: 40px;
  gap: 8px;
  padding-right: 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  overflow: visible;
}

.entities-filters .psm-figma-search:focus-within {
  border: 1px solid var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-shadow);
}

.entities-filters .psm-figma-search__input {
  padding: 8px 0;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-1);
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.entities-filters .psm-figma-search__input:focus,
.entities-filters .psm-figma-search__input:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.entities-filters .psm-figma-search.has-value .psm-figma-search__input {
  font-size: var(--text-base);
  line-height: 20px;
}

.entities-filters .psm-figma-search__submit,
.audit-logs-filters .psm-figma-search__submit,
.approval-requests-filters .psm-figma-search__submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.entities-filters__divider {
  width: 1px;
  height: 40px;
  background: var(--neutral-border-1);
  flex-shrink: 0;
}

/* ============================================================
   STAB-D-PSM-59 ? .psm-table: the two app-wide table layouts.
   Replaces .entities-table (-> .psm-table--compact) and
   .audit-logs-table (-> .psm-table--comfortable), which stay
   defined below until every screen still referencing them has
   migrated over; delete both legacy systems once that's done.
   Row/header height is exposed as custom properties so a screen
   can override just the density it needs instead of forking a
   new table system (see e.g. .rbac-matrix-table's table-layout:auto
   override, further down, for the capability-matrix's sticky column).
   ============================================================ */

.psm-table-card {
  width: 100%;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  overflow: hidden;
}

.psm-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.psm-table thead {
  background: var(--color-surface-muted);
}

.psm-table th {
  box-sizing: border-box;
  height: var(--psm-table-header-h, 36px);
  padding: 0 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--neutral-border-1);
}

.psm-table td {
  box-sizing: border-box;
  height: var(--psm-table-row-h, 40px);
  padding: 8px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--neutral-border-1);
}

.psm-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Dedicated hover token, not the header/footer chrome color ? a hovered
   row should read as an interactive highlight, not blend into the
   table's structural chrome (carried over from .entities-table). */
.psm-table tbody tr:hover {
  background: var(--neutral-bg-hover);
}

/* Compact ? 36px header / 40px row (was .entities-table). Dense,
   high-volume governance/operational lists. */
.psm-table--compact {
  --psm-table-header-h: 36px;
  --psm-table-row-h: 40px;
}
.psm-table--compact th {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}
.psm-table--compact td {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 18px;
  color: var(--color-text);
}

/* Comfortable ? 48px header / 48px row (was .audit-logs-table). Wider,
   richer multi-attribute rows; th/td clip long content (pair with
   .audit-logs-cell-truncate) instead of wrapping. */
.psm-table--comfortable {
  --psm-table-header-h: 48px;
  --psm-table-row-h: 48px;
}
.psm-table--comfortable th {
  color: var(--neutral-fg-2);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}
.psm-table--comfortable td {
  font-size: var(--text-base);
  line-height: 20px;
  color: var(--neutral-fg-1);
}
.psm-table--comfortable th,
.psm-table--comfortable td {
  overflow: hidden;
}

.psm-table__empty {
  height: auto;
  padding: 32px 16px;
  text-align: center;
  color: var(--neutral-fg-2);
}
/* STAB-BUG-71: beat .psm-table td { text-align: left } so empty copy is centered. */
.psm-table td.psm-table__empty {
  text-align: center;
  vertical-align: middle;
}
.psm-table__empty p {
  margin: 0 0 12px;
}
/* #8: centered stack for empty-state copy + primary action (Create Entity / Add Practice). */
.psm-table__empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}
.psm-table__empty-inner p {
  margin: 0;
  text-align: center;
}

/* #23: reusable single-line truncation for fixed-layout table cells ? clip overflow with an
   ellipsis so long values never bleed into the next column. Pair with title="<full value>" on
   the cell so the whole text is still available on hover. */
.psm-cell-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status-pill sizing override kept from .entities-table's scoping ? same
   visual result, now keyed on the shared base class. */
.psm-table .approval-status-pill--approved {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  border-radius: 12px;
  padding: 4px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 18px;
}
.psm-table .entities-status-pill--disabled {
  background: var(--neutral-border-1);
  color: var(--neutral-fg-1);
  border-radius: 40px;
  padding: 4px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 18px;
}

/* Sort header ? shared by both densities via fragments/psm-table-sort-icon.html. */
.psm-table-sort {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}
.psm-table-sort:hover {
  color: inherit;
  text-decoration: none;
}
.psm-table-sort__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 2px;
  border-radius: 3px;
  color: var(--neutral-fg-2);
  flex-shrink: 0;
  box-sizing: border-box;
}
.psm-table-sort.is-sorted .psm-table-sort__icon {
  color: var(--neutral-fg-1);
}
/* Inactive: swap-arrows rotated 90deg. Active: filter-lines (decreasing width). */
.psm-table-sort__icon--inactive svg {
  display: block;
  transform: rotate(90deg);
}
.psm-table-sort__icon--active svg {
  display: block;
}

/* Pagination footer ? shared by both densities via
   fragments/psm-table-pagination.html. */
.psm-table-pagination {
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 48px;
  padding: 2px 16px;
  background: var(--neutral-bg-2);
  border-top: 0;
  color: var(--neutral-fg-2);
}
.psm-table-pagination__summary {
  color: var(--neutral-fg-2);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}
.psm-table-pagination__controls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.psm-table-pagination__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--neutral-bg-2);
  color: var(--neutral-fg-1);
  text-decoration: none;
}
.psm-table-pagination__nav svg {
  display: block;
  width: 20px;
  height: 20px;
}
.psm-table-pagination__nav.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.psm-table-pagination__page {
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-1);
  white-space: nowrap;
}
.psm-table-pagination__size-form {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-2);
  white-space: nowrap;
}

/* Native <select> variant of the page-size control, for panels (like batch
   detail's Statements table) whose pagination is AJAX-driven via a plain
   change-event listener rather than the psm-figma-menu widget + full GET
   submit ? see bindBatchStatementsPagination in psm-ui.js. */
.psm-table-pagination__size-select {
  height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 8px;
  background: var(--neutral-bg-2);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
}
.psm-table-pagination__size-select {
  height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 8px;
  background: var(--neutral-bg-2);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
}

/* STAB-D-PSM-59: dashboard chart alt-view tables (org-admin/manager/operations
   performance charts' "Table" toggle). Rows are injected client-side by
   dashboard-performance-charts.js as bare <td>s with no per-cell class, so the
   Week/metric split is done positionally rather than via a cell class. */
.dashboard-chart-table__col-week {
  width: 24%;
}
.dashboard-chart-table__col-metric {
  width: 19%;
}
.dashboard-chart-table--narrow .dashboard-chart-table__col-week {
  width: 28%;
}
.dashboard-chart-table--narrow .dashboard-chart-table__col-metric {
  width: 24%;
}
.dashboard-chart-table th:not(:first-child),
.dashboard-chart-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* STAB-D-PSM-59: org-admin metrics-only views (payer documents / patient batches). */
.payer-metrics-table__col-document {
  width: 16%;
}
.payer-metrics-table__col-practice {
  width: 26%;
}
.payer-metrics-table__col-payer {
  width: 20%;
}
.payer-metrics-table__col-status {
  width: 18%;
}
.payer-metrics-table__col-updated {
  width: 20%;
}

.batch-metrics-table__col-batch {
  width: 14%;
}
.batch-metrics-table__col-practice {
  width: 16%;
}
.batch-metrics-table__col-entity {
  width: 12%;
}
.batch-metrics-table__col-statements {
  width: 10%;
}
.batch-metrics-table__col-errors {
  width: 8%;
}
.batch-metrics-table__col-reconcile {
  width: 10%;
}
.batch-metrics-table__col-lifecycle {
  width: 14%;
}
.batch-metrics-table__col-updated {
  width: 16%;
}

/* STAB-D-PSM-59: reports flagship detail (Statements mailed by practice). */
.report-detail-table__col-practice {
  width: 18%;
}
.report-detail-table__col-entity {
  width: 16%;
}
.report-detail-table__col-metric {
  width: 12.25%;
}
.report-detail-table__col-delta {
  width: 17%;
}
.report-detail-table th:not(:first-child):not(:nth-child(2)),
.report-detail-table td:not(:first-child):not(:nth-child(2)) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* STAB-D-PSM-59: RBAC capability matrix ? rows are capabilities, columns are
   roles (not a record list), with a sticky-left capability column
   (.rbac-matrix__cap-col / __cap-row, 05-components.css) that needs
   content-driven column widths, not psm-table's default table-layout:fixed. */
.rbac-matrix-table {
  table-layout: auto;
}

.entities-card {
  width: 100%;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  overflow: hidden;
}

.entities-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.entities-table thead {
  background: var(--color-surface-muted);
}

/* Canonical app-wide dense data-grid rhythm (2026-07-21 table-system pass) ?
   supersedes the old 48px/16px "Figma 427:1353" sizing (STAB-UAT-20's own
   goal was UNIFORM row heights across screens, not specifically 48px; this
   keeps rows uniform, just at a density appropriate for high-volume PHI
   lists with frequent filter/sort work). Matches .queue-table's already-
   tokenized header convention so tables that carry both classes (payer
   queue, patient-statement batches) stop fighting over font-size/padding. */
.entities-table th {
  box-sizing: border-box;
  height: 36px;
  padding: 0 16px;
  text-align: left;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  vertical-align: middle;
  border-bottom: var(--size-px) solid var(--color-border);
}

.entities-table td {
  box-sizing: border-box;
  height: 40px;
  padding: 8px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--size-px) solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 18px;
  color: var(--color-text);
}

.entities-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Dedicated hover token, not the header/footer chrome color (--color-surface-muted) ?
   a hovered row should read as an interactive highlight, not blend into the
   table's structural chrome. */
.entities-table tbody tr:hover {
  background: var(--neutral-bg-hover);
}

/*
 * Original Figma ratios (480/160/380/180/200/200 -> 1600 = 30/10/23.75/11.25/12.5/12.5%)
 * gave Name 30% and read as dominant with short real content (sponsor feedback
 * 2026-07-20). Capping the card at 1600px was tried and reverted separately ?
 * that stays reverted (see git history); this is a straight ratio rebalance,
 * a different lever. Name reduced, Actions/Status widened now that both are
 * left-aligned (below) instead of trailing-edge-anchored.
 */

.entities-table__col-name { width: 24%; }
.entities-table__col-code { width: 10%; }
.entities-table__col-manager { width: 24%; }
.entities-table__col-practices { width: 12%; }
.entities-table__col-status { width: 14%; }
.entities-table__col-actions { width: 16%; }

.entities-table__name {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 18px;
}

.entities-table__code {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.entities-table__manager {
  padding: 4px 16px;
}

.entities-manager {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.entities-manager__name {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 18px;
}

.entities-manager__email {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 16px;
}

.entities-table__practices {
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.entities-table__status {
  padding: 8px 12px;
}

/* Tokenized ? was hardcoded #c9f0cf/#004e00, bypassing --status-success-*
   used everywhere else in the app. */
.entities-table .approval-status-pill--approved {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  border-radius: 12px;
  padding: 4px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 18px;
}

.entities-table .entities-status-pill--disabled {
  background: var(--neutral-border-1);
  color: var(--neutral-fg-1);
  border-radius: 40px;
  padding: 4px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 18px;
}

.entities-table__empty {
  height: auto;
  padding: 32px 16px;
  text-align: center;
  color: var(--neutral-fg-2);
}

.entities-table__empty p {
  margin: 0 0 12px;
}

.entities-sort {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
}

.entities-sort:hover {
  color: inherit;
  text-decoration: none;
}

.entities-sort__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 2px;
  border-radius: 3px;
  color: var(--neutral-fg-2);
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Active column gets the darker/emphasized icon color (was previously
   applied to no visual effect ? is-sorted had no matching rule). */
.entities-sort.is-sorted .entities-sort__icon {
  color: var(--neutral-fg-1);
}

/* Inactive: swap-arrows rotated 90deg (Figma 427:1312). */
.entities-sort__icon--inactive svg {
  display: block;
  transform: rotate(90deg);
}

/* Active: filter-lines (decreasing-width bars) ? matches Audit Logs (Figma 435-7387). */
.entities-sort__icon--active svg {
  display: block;
}

.entities-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.entities-edit-link:hover {
  color: var(--brand-fg-1);
  text-decoration: none;
}

/* Practices list ? Figma 840-701 (reuses entities chrome; fixed cols + scrollbar gutter) */
.practices-table {
  table-layout: fixed;
  width: 100%;
}
.practices-table__col-name,
.practices-table td:nth-child(1) { width: 28%; }
.practices-table__col-entity,
.practices-table td:nth-child(2) { width: 26%; }
.practices-table__col-pms,
.practices-table td:nth-child(3) { width: 16%; }
.practices-table__col-status,
.practices-table td:nth-child(4) { width: 14%; }
.practices-table__col-actions,
.practices-table td:nth-child(5) { width: 16%; }
.practices-table th,
.practices-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/* STAB-UAT-20: uniform row height ? name stays on one line like entity/PMS. */
.practices-table .entities-table__name {
  white-space: nowrap;
}

.practices-table__entity,
.practices-table__pms {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 18px;
}

/* STAB-UAT-20: single line + ellipsis. td must stay display:table-cell ?
   flex on a td drops it out of the fixed-column layout and collapses its width. */
.practices-table__entity,
.practices-table__pms {
  white-space: nowrap;
}

.practices-table__entity > span {
  vertical-align: middle;
}

.practices-table__entity .entity-needs-badge {
  margin-left: 8px;
  white-space: nowrap;
}

/* Figma 456:697 ? footer exactly 48px (px-16 py-2 + controls) */
.entities-pagination {
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 48px;
  padding: 2px 16px;
  background: var(--neutral-bg-2);
  border-top: 0;
  color: var(--neutral-fg-2);
}

.entities-pagination__summary {
  color: var(--neutral-fg-2);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

.entities-pagination__controls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.entities-pagination__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--neutral-bg-2);
  color: var(--neutral-fg-1);
  text-decoration: none;
}

.entities-pagination__nav svg {
  display: block;
  width: 20px;
  height: 20px;
}

.entities-pagination__nav.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.entities-pagination__page {
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-1);
  white-space: nowrap;
}

.entities-pagination__size-form {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-2);
  white-space: nowrap;
}

/* Entity detail ? Figma 427-1608 (empty) / 633-1091 (with practices) */
.entity-detail-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.entity-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: var(--brand-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-decoration: none;
}

.entity-detail-back:hover {
  color: var(--brand-fg-1);
  text-decoration: none;
}

/* Page column gap is 20px; pull hero up so back ? Short Code is 10px. */
.entity-detail-back + .entity-detail-hero {
  margin-top: -10px;
}

.entity-detail-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.entity-detail-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.entity-detail-hero__short-code {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--neutral-fg-2);
}

.entity-detail-hero__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.entity-detail-hero__title {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0;
  color: var(--neutral-fg-1);
}

.entity-detail-page .approval-status-pill--hero {
  border-radius: 12px;
  padding: 4px 12px;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
}

.entity-detail-divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--neutral-border-1);
  width: 100%;
}

.entity-detail-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.entity-detail-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.entity-detail-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entity-detail-section__header--practices {
  justify-content: space-between;
  width: 100%;
}

.entity-detail-section__header-start {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.entity-detail-section__label {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--neutral-fg-2);
}

.entity-detail-count-pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 2px;
  border-radius: 40px;
  background: var(--brand-bg-subtle);
  color: var(--brand-fg-1);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.28px;
  text-align: center;
}

/* Entity detail ? Practices/Users side-by-side panels (scoped modifiers so
   the shared .card-panel/.card-panel__header used by dashboard panels
   elsewhere is unaffected). */
.entity-panel__header {
  background: var(--neutral-bg-2);
}

.entity-panel__body {
  max-height: 245px;
  overflow-y: auto;
}

.entity-detail-add-practice {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.entity-detail-add-practice:hover {
  color: var(--brand-fg-1);
  text-decoration: none;
}

.entity-detail-card {
  box-sizing: border-box;
  width: 100%;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-border-1);
  border-radius: 8px;
}

.entity-detail-manager {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
}

.entity-detail-manager__avatar {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 9999px;
  background: #e0d509;
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  flex-shrink: 0;
}

.entity-detail-manager__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.entity-detail-manager__name {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.2px;
  color: var(--neutral-fg-1);
}

.entity-detail-manager__email {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  color: #464646;
}

.entity-detail-roles {
  padding: 24px;
  border-radius: 12px;
}

.entity-detail-roles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.entity-detail-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.entity-detail-field label {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.entity-detail-field input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  background: var(--neutral-bg-input);
  color: var(--neutral-fg-1);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  outline: none;
  cursor: default;
}

.entity-detail-field input::placeholder {
  color: var(--input-placeholder);
}

.entity-detail-field input:focus,
.entity-detail-field input:focus-visible {
  outline: none;
  border: 1px solid var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-shadow);
  padding: var(--input-padding);
}

.entity-detail-practices {
  /* Figma 633:1181 ? px 16 / py 12 */
  padding: 12px 16px;
}

.entity-detail-practices--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
}

.entity-detail-practices__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Figma: gap 12 between row / divider / row */
  gap: 12px;
  width: 100%;
}

.entity-detail-practices__list > li:not(.entity-detail-practices__rule) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  margin: 0;
  /* Figma row: py 6, height 44 */
  min-height: 44px;
  padding: 6px 0;
  border: 0;
}

.entity-detail-practices__rule {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--neutral-border-1);
  list-style: none;
  min-height: 0;
  overflow: hidden;
}

.entity-detail-practices__name {
  color: var(--neutral-fg-1);
  text-decoration: none;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 24px;
  min-width: 0;
}

.entity-detail-practices__name:hover {
  color: var(--brand-fg-1);
}

.entity-detail-practices__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  box-sizing: border-box;
  /* Figma pill: px 12 / py 4 / radius 40 */
  border-radius: 40px;
  padding: 4px 12px;
  background: #c9f0cf;
  color: #004e00;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
}

.entity-detail-practices__status svg {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.entity-detail-practices__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  max-width: 28rem;
}

.entity-detail-practices__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  background: var(--neutral-bg-2);
}

.entity-detail-practices__empty-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.entity-detail-practices__empty-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.entity-detail-practices__empty-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.entity-detail-practices__empty-desc {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.entity-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: none;
}

.entity-detail-btn--disable {
  background: var(--neutral-bg-1);
  border: 1px solid #ff939a;
  color: var(--status-error-fg);
  flex-shrink: 0;
  cursor: pointer;
}

.entity-detail-btn--disable:hover {
  background: var(--neutral-bg-1);
  border-color: #ff939a;
  color: var(--status-error-fg);
}

.entity-detail-btn--enable {
  background: var(--neutral-bg-1);
  border: 1px solid var(--brand-fg-1);
  color: var(--brand-fg-1);
  flex-shrink: 0;
  cursor: pointer;
}

.entity-detail-btn--enable:hover {
  background: #f0f8fc;
  border-color: var(--brand-fg-1);
  color: var(--brand-fg-1);
}

.entity-detail-btn--onboard {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--cta-bg);
  border: 1px solid var(--cta-bg);
  color: var(--cta-fg);
  font-size: var(--text-base);
  line-height: 20px;
}

.entity-detail-btn--onboard:hover {
  color: var(--cta-fg);
  text-decoration: none;
  opacity: 0.92;
}

.entity-detail-page .entities-status-pill--disabled {
  background: var(--neutral-border-1);
  color: var(--neutral-fg-1);
  border-radius: 40px;
}

@media (max-width: 960px) {
  .entity-detail-roles__grid {
    grid-template-columns: 1fr;
  }

  .entity-detail-hero {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Create entity slide-over ? Figma 427-3300 */
.entity-create-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer, 40);
  display: none;
  justify-content: flex-end;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.entity-create-drawer.is-open {
  display: flex;
}

.entity-create-drawer__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: var(--scrim);
  cursor: default;
  pointer-events: none;
}

.entity-create-drawer__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(800px, 100vw);
  height: 100%;
  background: var(--neutral-bg-1);
  box-shadow: none;
}

.entity-create-drawer__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  padding: 16px 24px;
  background: var(--neutral-bg-1);
  border-bottom: 1px solid var(--neutral-border-1);
}

.entity-create-drawer__title {
  margin: 0;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.2px;
  color: var(--neutral-fg-1);
}

.entity-create-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--neutral-fg-1);
  text-decoration: none;
}

.entity-create-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.entity-create-drawer__body {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

.entity-create-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 0;
  width: auto;
  padding: 16px 48px 16px 24px;
  background: var(--neutral-bg-1);
  border-right: 1px solid var(--neutral-border-1);
}

.entity-create-steps__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.entity-create-steps__circle {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 40px;
  border: 1px solid var(--neutral-border-2);
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-2);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 24px;
}

.entity-create-steps__num {
  display: inline;
}

.entity-create-steps__icon {
  display: none;
  color: var(--brand-fg-on);
}

.entity-create-steps__item.is-current .entity-create-steps__circle,
.entity-create-steps__item.is-complete .entity-create-steps__circle {
  background: var(--control-accent);
  border-color: var(--control-accent);
  color: var(--brand-fg-on);
}

/* Step 1 current + any complete ? check; step 2 current ? number (Figma 443-351) */
.entity-create-steps__item.is-complete .entity-create-steps__num,
.entity-create-steps__item.is-current[data-entity-step-indicator="1"] .entity-create-steps__num {
  display: none;
}

.entity-create-steps__item.is-complete .entity-create-steps__icon,
.entity-create-steps__item.is-current[data-entity-step-indicator="1"] .entity-create-steps__icon {
  display: block;
}

.entity-create-steps__item.is-current[data-entity-step-indicator="2"] .entity-create-steps__num {
  display: inline;
  color: var(--brand-fg-on);
}

.entity-create-steps__item.is-current[data-entity-step-indicator="2"] .entity-create-steps__icon {
  display: none;
}

.entity-create-steps__label {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.entity-create-steps__rail {
  box-sizing: border-box;
  width: 32px;
  height: 60px;
  margin: 0;
  border: none;
  background: transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--neutral-border-2) 0,
    var(--neutral-border-2) 4px,
    transparent 4px,
    transparent 8px
  );
  background-position: center;
  background-size: 2px 100%;
  background-repeat: no-repeat;
}

/* DI-SHELL-03 refinement 2 (A3 mock): once the preceding step is complete,
   the rail switches from dashed to a solid --control-accent line. CSS-only ?
   the rail is always the DOM-adjacent sibling of its preceding .item (no JS
   change needed; entity-create-wizard.js already toggles .is-complete there).
   background-image only (not background-color): a solid fill would paint the
   full 32px box instead of the constrained background-size:2px 100% line ?
   the exact bug the mock flagged. */
.entity-create-steps__item.is-complete + .entity-create-steps__rail {
  background-image: linear-gradient(var(--control-accent), var(--control-accent));
}

.entity-create-drawer__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 32px;
  min-width: 0;
  min-height: 0;
  padding: 16px 24px;
  overflow: auto;
  background: var(--neutral-bg-page);
}

.entity-create-step {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.entity-create-step__intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
}

.entity-create-step__heading {
  margin: 0;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.2px;
  color: var(--neutral-fg-1);
}

.entity-create-step__heading--sm {
  font-size: var(--text-base);
  line-height: 20px;
  letter-spacing: 0;
}

.entity-create-step__desc {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.entity-create-step__desc--xs {
  font-size: var(--text-xs);
  line-height: 16px;
  letter-spacing: 0.3px;
}

.entity-create-step__rule {
  margin: 0;
  border: 0;
  border-top: 1px solid #eeeeee;
  width: 100%;
}

.entity-create-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.entity-create-block__intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.entity-create-block__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.entity-create-block__desc {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.entity-create-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.entity-create-step__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.entity-create-drawer .entity-create-field {
  gap: 8px;
  margin-bottom: 0;
  width: 100%;
}

.entity-create-drawer .entity-create-field label {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.entity-create-field__required,
.entity-create-drawer .entity-create-field .field-marker {
  color: var(--status-error-fg);
  font-weight: 500;
}

.entity-create-drawer .entity-create-field input[type="text"],
.entity-create-drawer .entity-create-field input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  padding: var(--input-padding);
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  background: var(--neutral-bg-input);
  color: var(--neutral-fg-1);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  transition: var(--input-focus-transition);
}

.entity-create-drawer .entity-create-field input::placeholder {
  color: var(--input-placeholder);
  font-weight: 400;
  opacity: 1;
}

/* Focus uses shared tokens (Figma 769:1118); keep drawer-scoped for specificity. */
.entity-create-drawer .entity-create-field input:focus,
.entity-create-drawer .entity-create-field input:focus-visible {
  outline: none;
  border: 1px solid var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-shadow);
  padding: var(--input-padding);
}

.entity-create-drawer .entity-create-field input:disabled {
  background: var(--neutral-bg-page);
  border-color: var(--neutral-border-1);
  color: var(--neutral-fg-2);
  cursor: not-allowed;
  box-shadow: none;
}

.entity-create-drawer .entity-create-field.form-field--error input {
  border-color: #ff939a;
}

.entity-create-drawer .entity-create-field.form-field--error input:focus,
.entity-create-drawer .entity-create-field.form-field--error input:focus-visible {
  outline: none;
  border: 1px solid var(--input-focus-error-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-error-shadow);
  padding: var(--input-padding);
}

.entity-create-drawer .entity-create-field .form-field__error {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-danger);
}

.entity-create-drawer .entity-create-field .form-field__error[hidden],
.entity-create-drawer .entity-create-field .form-field__error.is-empty {
  display: none;
}

.entity-create-drawer .entity-create-field input:-webkit-autofill,
.entity-create-drawer .entity-create-field input:-webkit-autofill:hover,
.entity-create-drawer .entity-create-field input:-webkit-autofill:focus,
.entity-create-drawer .entity-create-field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--neutral-fg-1);
  caret-color: var(--neutral-fg-1);
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  box-shadow: 0 0 0 1000px var(--neutral-bg-input) inset;
  transition: background-color 99999s ease-out 0s;
}

.entity-create-drawer .entity-create-field input:-webkit-autofill:focus,
.entity-create-drawer .entity-create-field input:-webkit-autofill:focus-visible {
  border-color: var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  box-shadow:
    var(--input-focus-shadow),
    0 0 0 1000px var(--input-focus-bg) inset;
}

.entity-create-field__hint,
.entity-create-drawer .entity-create-field .form-field__hint {
  margin: 0;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--neutral-fg-2);
}

.entity-create-status,
.entity-create-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
}

.entity-create-status__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.entity-create-status__legend,
.entity-create-section__legend {
  margin: 0;
  padding: 0;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.entity-create-status__desc {
  margin: 0;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--neutral-fg-2);
}

.entity-create-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--neutral-fg-1);
}

.entity-create-checkbox input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.entity-create-checkbox__box {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 6px;
  border: 1px solid var(--neutral-border-2);
  background: var(--neutral-bg-input);
  flex-shrink: 0;
}

.entity-create-checkbox__box svg {
  display: none;
}

.entity-create-checkbox input:checked + .entity-create-checkbox__box {
  background: var(--control-accent);
  border-color: var(--control-accent);
}

.entity-create-checkbox input:checked + .entity-create-checkbox__box svg {
  display: block;
}

.entity-create-checkbox__label {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.entity-create-summary {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  padding: 0;
  background: var(--neutral-bg-1);
  width: 100%;
}

.entity-create-summary__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: var(--neutral-bg-2);
}

.entity-create-summary__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.entity-create-summary__edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--brand-fg-1);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.entity-create-summary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 12px 16px;
}

.entity-create-summary__grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.entity-create-summary__grid dt {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.entity-create-summary__grid dd {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-2);
  min-height: 28px;
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-create-summary__grid .approval-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 40px;
  padding: 4px 12px;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
}

.entity-create-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  margin: 0;
  padding: 16px;
  border-top: 1px solid var(--neutral-border-1);
  background: var(--neutral-bg-1);
}

.entity-create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  cursor: pointer;
}

.entity-create-btn--cancel {
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-border-1);
  color: var(--neutral-fg-1);
}

.entity-create-btn__label-back {
  display: none;
}

/* Step 2: Cancel ? Back (Figma 443-351) */
.entity-create-drawer:has([data-entity-step="2"]:not([hidden])) .entity-create-btn__label-cancel {
  display: none;
}

.entity-create-drawer:has([data-entity-step="2"]:not([hidden])) .entity-create-btn__label-back {
  display: inline;
}

.entity-create-btn--primary {
  background: var(--cta-bg);
  border: 1px solid var(--cta-bg);
  color: var(--cta-fg);
}

.entity-create-drawer-open {
  overflow: hidden;
}

/* Create Entity confirm ? Figma 633-1734 / 633-1821 */
.entity-create-confirm {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.entity-create-confirm[hidden] {
  display: none;
}

.entity-create-confirm__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--scrim);
  cursor: pointer;
}

.entity-create-confirm__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
  width: min(100%, 480px);
  padding: 24px;
  border: none;
  border-radius: 12px;
  background: var(--neutral-bg-1);
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.12);
  outline: none;
}

.entity-create-confirm__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.entity-create-confirm__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  color: var(--neutral-fg-1);
  overflow-wrap: anywhere;
}

.entity-create-confirm__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.2px;
  color: var(--neutral-fg-1);
}

.entity-create-confirm__body {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.entity-create-confirm__name {
  font-weight: 600;
}

.entity-create-confirm__code {
  color: var(--neutral-fg-2);
  font-weight: 400;
}

.entity-create-confirm__email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 16px;
  border: 1px solid var(--neutral-bg-2);
  border-radius: 8px;
  background: var(--neutral-bg-page);
}

.entity-create-confirm__email {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--neutral-fg-1);
  overflow-wrap: anywhere;
}

.entity-create-confirm__error {
  margin: 0;
}

.entity-create-confirm__error[hidden] {
  display: none;
}

.entity-create-confirm__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.entity-create-confirm__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}

.entity-create-confirm__btn--cancel {
  padding: 10px 16px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 8px;
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-1);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 24px;
}

.entity-create-confirm__btn--proceed {
  padding: 12px 16px;
  border: 1px solid var(--cta-bg);
  border-radius: 12px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
}

.entity-create-confirm__btn--proceed:hover {
  opacity: 0.92;
}

.entity-create-confirm-open {
  overflow: hidden;
}

@media (max-width: 960px) {
  .entity-create-summary__grid,
  .entity-create-roles-grid {
    grid-template-columns: 1fr;
  }

  .entity-create-drawer__body {
    flex-direction: column;
    overflow: auto;
  }

  .entity-create-steps {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
  }

  .entity-create-steps__rail {
    width: 24px;
    height: 2px;
    background-image: repeating-linear-gradient(
      to right,
      var(--neutral-border-2) 0,
      var(--neutral-border-2) 4px,
      transparent 4px,
      transparent 8px
    );
    background-size: 100% 2px;
  }
}


/* Org-admin Audit Logs (Figma 435-7316) ? route /org-admin/activity-log */
.audit-logs-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  /* max-width: 1200px; */
  margin: 0 auto;
}

.audit-logs-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.audit-logs-page__title {
  margin: 0;
  font-size: 1.875rem;
  font-weight: var(--font-semibold);
  line-height: 2.25rem;
  color: var(--neutral-fg-1);
}

.audit-logs-page__subtitle {
  margin: 4px 0 0;
  color: var(--neutral-fg-2);
  font-size: var(--text-base);
  line-height: 20px;
}

.audit-logs-page__error {
  margin: 0;
}

.audit-logs-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--neutral-fg-disabled);
  border-radius: 8px;
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.audit-logs-export-btn:hover {
  color: var(--neutral-fg-1);
  text-decoration: none;
  background: var(--neutral-bg-page);
}

.audit-logs-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  width: 100%;
}

.audit-logs-filters__search {
  flex: 0 0 360px;
  width: 360px;
  max-width: 100%;
}

@media (max-width: 640px) {
  .audit-logs-filters__search {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ALOG-08: search/filter chrome parity with Practices (Figma 427-3938) ?
   reuse psm-figma-search tokens at 40px height + matching menu triggers. */
.audit-logs-filters .psm-figma-search {
  min-height: 40px;
  height: 40px;
  gap: 8px;
  padding-right: 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  overflow: visible;
}

.audit-logs-filters .psm-figma-search:focus-within {
  border: 1px solid var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-shadow);
}

.audit-logs-filters .psm-figma-search__input {
  padding: 8px 0;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
}

.audit-logs-filters .psm-figma-search.has-value .psm-figma-search__input {
  font-size: var(--text-base);
  line-height: 20px;
}

.audit-logs-filters__divider {
  width: 1px;
  height: 40px;
  background: var(--neutral-border-1);
  flex-shrink: 0;
}

.audit-logs-date-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.audit-logs-date-group__label {
  color: var(--neutral-fg-2);
  font-size: var(--text-base);
  line-height: 20px;
  white-space: nowrap;
}

.audit-logs-filters__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* STAB-D-PSM-56: statement-table Amount range filter ? plain number inputs (no
   custom widget needed, unlike the date range's calendar popover), styled to the
   same 40px/12px-radius weight as .psm-figma-menu__trigger for visual parity. */
.audit-logs-amount-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.audit-logs-amount-input {
  box-sizing: border-box;
  width: 6rem;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  background: var(--neutral-bg-input);
  font-size: var(--text-base);
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.audit-logs-amount-input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.audit-logs-amount-group__sep {
  color: var(--neutral-fg-2);
}

.audit-logs-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: var(--cta-bg);
  cursor: pointer;
}

.audit-logs-apply-btn:hover {
  opacity: 0.92;
}

.audit-logs-table-scroll {
  width: 100%;
  overflow-x: auto;
}

/* Shared column widths ? applied via <colgroup> + matching th/td classes (Figma 435-7387) */
.audit-logs-table__col-ts { width: 240px; max-width: 240px; }
.audit-logs-table__col-activity { width: 320px; max-width: 320px; }
.audit-logs-table__col-actor { width: 280px; max-width: 280px; }
.audit-logs-table__col-entity { width: 240px; max-width: 240px; }
.audit-logs-table__col-category { width: 160px; max-width: 160px; }
.audit-logs-table__col-ip { width: 200px; max-width: 200px; }

.audit-logs-cell-truncate {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.audit-logs-cell-truncate {
  display: block;
}

.audit-logs-category-pill {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audit-logs-category-pill--governance {
  background: rgba(100, 32, 152, 0.2);
  color: #642098;
}

.audit-logs-category-pill--workflow {
  background: rgba(14, 114, 160, 0.16);
  color: var(--brand-fg-1);
}

.audit-logs-category-pill--security {
  background: rgba(198, 40, 40, 0.14);
  color: var(--status-error-fg);
}

.audit-logs-ip {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.audit-logs-ip__value {
  flex: 0 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--neutral-fg-1);
  background: transparent;
}

.audit-logs-ip__copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--neutral-fg-2);
  cursor: pointer;
}

.audit-logs-ip__copy:hover {
  color: var(--brand-fg-1);
}

.audit-logs-ip__copy.is-copied {
  color: var(--status-success-fg);
}

/* ALOG-09 / STAB-PO-02 / STAB-PO-04: visible "Copied" confirmation, shown briefly after a copy.
   Anchored to the RIGHT of the button and vertically centred so it stays inside the row band ?
   `.audit-logs-table-scroll` uses `overflow-x:auto`, which forces the y-axis to clip too, so a
   bubble placed above the top row was getting half cut off. The IP value no longer flex-grows,
   leaving free space to the right of the button for the confirmation. */
.audit-logs-ip__copied {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--neutral-fg-1);
  color: var(--neutral-bg-1);
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease-in-out;
}

.audit-logs-ip__copy.is-copied .audit-logs-ip__copied {
  opacity: 1;
}

@media (max-width: 900px) {
  .audit-logs-filters__divider {
    display: none;
  }

  .audit-logs-page__header {
    flex-direction: column;
    align-items: stretch;
  }
}

/*
 * STAB-PO-20: Activity Log detail drawer shell matches Add Practice drawer
 * (practice-drawer-page chrome / scrim / close SVG). Overrides 05-components
 * activity-log-drawer defaults; keep class names for existing JS hooks.
 */
.activity-log-drawer {
  z-index: var(--z-drawer, 40);
  font-family: var(--font-sans);
}

.activity-log-drawer__backdrop {
  background: var(--scrim);
  pointer-events: none;
}

.activity-log-drawer__panel {
  position: relative;
  width: min(450px, 100vw);
  max-width: 100%;
  background: var(--neutral-bg-1);
  border-left: none;
  box-shadow: none;
}

/* STAB-PO-22: chrome overlays close only; event title is in detail hero */
.activity-log-drawer__chrome {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 16px;
  flex-shrink: 0;
  padding: 20px 24px;
  border-bottom: none;
  background: transparent;
  pointer-events: none;
}

.activity-log-drawer__title {
  margin: 0;
}

.activity-log-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--neutral-fg-2);
  text-decoration: none;
  cursor: pointer;
  min-width: 24px;
  min-height: 24px;
  font-size: inherit;
  line-height: 1;
  pointer-events: auto;
}

.activity-log-drawer__close:hover {
  color: var(--neutral-fg-1);
  background: transparent;
}

.activity-log-drawer__close svg {
  display: block;
}

.activity-log-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 24px;
  background: var(--neutral-bg-1);
}

/* STAB-PO-22: Audit Log detail drawer ? match uploaded mock (UI only) */
.activity-log-detail {
  margin: 0;
  padding: 0;
  max-width: 100%;
}

.activity-log-detail__hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0 40px 16px 0;
  border-bottom: 1px solid var(--neutral-border-1);
}

.activity-log-detail__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--neutral-bg-2);
  color: var(--neutral-fg-2);
}

.activity-log-detail__hero-text {
  min-width: 0;
  padding-top: 2px;
}

.activity-log-detail__hero-title {
  margin: 0;
  font-size: var(--text-lg, 18px);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.1px;
  color: var(--neutral-fg-1);
}

.activity-log-detail__hero-subtitle {
  margin: 4px 0 0;
  font-size: var(--text-sm, 14px);
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.activity-log-detail__card {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.activity-log-detail__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

/* STAB-PO-24: no row dividers ? only hero border-bottom */
.activity-log-detail__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 10px 0;
  border-bottom: none;
}

.activity-log-detail__label {
  margin: 0;
  flex: 0 0 auto;
  max-width: 40%;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.activity-log-detail__value {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 20px;
  color: var(--neutral-fg-1);
  text-align: right;
  min-width: 0;
  word-break: break-word;
}

.activity-log-detail__section-title {
  margin: 28px 0 12px;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-fg-2);
}

.activity-log-detail__payload-card {
  margin: 0;
  padding: 4px 16px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  background: var(--neutral-bg-1);
}

.activity-log-detail__payload-list {
  margin: 0;
}

.activity-log-detail__outcome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--neutral-bg-2);
  color: var(--neutral-fg-1);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.activity-log-detail__outcome--success {
  /* STAB-BUG-44: match .psm-table .approval-status-pill--approved (tokens only) */
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  border-radius: var(--radius-input);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: calc(var(--text-sm) * var(--line-height-base));
  letter-spacing: 0;
  text-transform: none;
}

.activity-log-detail__outcome--failed {
  background: var(--status-error-fg);
  color: var(--brand-fg-on);
}

.activity-log-detail__outcome-icon {
  display: block;
  flex-shrink: 0;
}

.activity-log-detail__actions {
  margin-top: 24px;
  padding-top: 16px;
}

@media (max-width: 768px) {
  .activity-log-drawer__panel {
    width: 100vw;
  }

  .activity-log-detail__row {
    flex-direction: column;
    gap: 4px;
  }

  .activity-log-detail__label {
    max-width: none;
  }

  .activity-log-detail__value {
    text-align: left;
  }
}

/* Practice drawer ? Figma 456-1849: same overlay pattern as entity-create (list stays visible under scrim). */
.practices-list-underlay {
  /* Document-flow list; fixed drawer paints above with translucent scrim. */
  position: relative;
  z-index: 0;
}

.app-main:has(.practice-drawer-page.is-open) .practices-list-underlay {
  pointer-events: none;
  user-select: none;
}

body:has(.practice-drawer-page.is-open) {
  overflow: hidden;
}

.practice-drawer-page {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer, 40);
  display: none;
  justify-content: flex-end;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.practice-drawer-page.is-open {
  display: flex;
}

.practice-drawer-page__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: var(--scrim);
  cursor: default;
  pointer-events: none;
}

.practice-drawer-page__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(800px, 100vw);
  height: 100%;
  background: var(--neutral-bg-1);
  box-shadow: none;
}

.practice-drawer-page__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  padding: 16px 24px;
  border-bottom: 1px solid var(--neutral-border-1);
}

.practice-drawer-page__title-row {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.practice-drawer-page__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.2px;
  color: var(--neutral-fg-1);
}

/* Figma 923-1610 ? Manage Practice header status dropdown */
.practice-status-menu {
  position: relative;
  flex-shrink: 0;
}

/* Visually hide status POST form; keep it out of flex layout (do not use [hidden] before drawer body). */
.practice-status-menu__form {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* DI-SHELL-03 refinement 1 (A3 mock): bordered neutral pill + colored status
   dot + chevron, matching .psm-figma-menu__trigger's control language ? was
   solid-fill background/text (indistinguishable from a read-only
   .practice-status-pill badge). Solid-fill stays reserved for genuinely
   read-only badges; this trigger is interactive, so it now looks like one. */
.practice-status-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: var(--neutral-bg-input);
  border: 1px solid var(--neutral-border-1);
  border-radius: 40px;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
  cursor: pointer;
}

.practice-status-menu__trigger:hover {
  background: var(--neutral-bg-page);
}

.practice-status-menu__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral-fg-3);
}

.practice-status-menu__trigger--active .practice-status-menu__dot {
  background: var(--status-success-fg);
}

.practice-status-menu__trigger--suspended .practice-status-menu__dot {
  background: var(--status-warning-fg);
}

.practice-status-menu__trigger--archived .practice-status-menu__dot {
  background: var(--status-error-fg);
}

.practice-status-menu__trigger:focus,
.practice-status-menu__trigger:focus-visible {
  outline: none;
  box-shadow: var(--input-focus-shadow, 0 0 0 3px rgba(14, 114, 160, 0.15));
}

.practice-status-menu__chevron {
  flex-shrink: 0;
  color: var(--neutral-fg-3);
}

.practice-status-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 180px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: 8px;
  background: var(--neutral-bg-1);
  box-shadow: 0 2px 6px rgba(51, 51, 51, 0.1);
}

.practice-status-menu.is-open .practice-status-menu__panel {
  display: flex;
}

.practice-status-menu__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.practice-status-menu__option:hover {
  background: var(--neutral-bg-page);
}

.practice-status-menu__check {
  flex-shrink: 0;
}

.practice-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 40px;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
}

.practice-status-pill--active {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
}

.practice-status-pill--suspended,
.practices-table .approval-status-pill[aria-label="Status: Suspended"] {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  color: var(--color-warning);
  padding: var(--space-1) var(--space-3);
  border-radius: 40px;
}

.practice-status-pill--archived,
.practices-table .approval-status-pill[aria-label="Status: Archived"] {
  background: color-mix(in srgb, var(--status-error-fg) 10%, transparent);
  color: var(--status-error-fg);
  padding: var(--space-1) var(--space-3);
  border-radius: 40px;
}

.practice-status-pill--draft {
  background: var(--neutral-bg-2);
  color: var(--neutral-fg-2);
}

.practice-status-pill--pending {
  /* STAB-BUG-46: match .approval-status-pill--pending / practices-table Pending approval */
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}

.practice-drawer-page__draft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px 13px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 8px;
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  font-family: inherit;
  cursor: pointer;
}

.practice-drawer-page__draft:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--neutral-bg-page);
}

.practice-drawer-page__draft:disabled,
.practice-drawer-page__draft[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  color: var(--neutral-fg-2);
}

.practice-drawer-page__draft:focus,
.practice-drawer-page__draft:focus-visible {
  outline: none;
  border-color: var(--input-focus-border, #0e72a0);
  box-shadow: var(--input-focus-shadow, 0 0 0 3px rgba(14, 114, 160, 0.15));
}

.practice-drawer-page__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--neutral-fg-1);
  text-decoration: none;
}

.practice-drawer-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.practice-drawer-page__body {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

.practice-drawer-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 0;
  padding: 16px 48px 16px 24px;
  border-right: 1px solid var(--neutral-border-1);
  background: var(--neutral-bg-1);
  text-decoration: none;
}

.practice-drawer-steps__item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.practice-drawer-steps__circle {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 40px;
  border: 1px solid var(--neutral-border-2);
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-2);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 24px;
}

.practice-drawer-steps__num {
  display: inline;
}

.practice-drawer-steps__icon {
  display: none;
  color: var(--brand-fg-on);
}

.practice-drawer-steps__label {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 20px;
  color: var(--neutral-fg-1);
  max-width: 160px;
}

.practice-drawer-steps__rail {
  box-sizing: border-box;
  width: 32px;
  height: 60px;
  margin: 0;
  border: none;
  background: transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--neutral-border-2) 0,
    var(--neutral-border-2) 4px,
    transparent 4px,
    transparent 8px
  );
  background-position: center;
  background-size: 2px 100%;
  background-repeat: no-repeat;
}

/* DI-SHELL-03 refinement 2 (A3 mock) ? see entity-create-steps__rail above
   for the full rationale; same CSS-only adjacent-sibling approach, driven by
   practice-drawer-wizard.js's existing .is-complete toggle on the item. */
.practice-drawer-steps__item.is-complete + .practice-drawer-steps__rail {
  background-image: linear-gradient(var(--control-accent), var(--control-accent));
}

.practice-drawer-page__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  background: var(--neutral-bg-page);
}

.practice-drawer-page__scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 16px;
  min-height: 0;
  padding: 16px 24px;
  overflow: auto;
}

.practice-drawer-markers {
  margin: 0;
  padding: 0;
  font-size: var(--text-base);
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.practice-drawer-status {
  margin: 0;
  padding: 0;
  font-size: var(--text-base);
  gap: 8px;
}

.practice-drawer-status .form-field__label {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--neutral-fg-1);
}

.practice-drawer-steps-content {
  flex: 1 1 auto;
  min-height: 0;
}

/* Step panels ? JS class navigation (stepper is visual-only). */
.practice-drawer-step-panel {
  display: none;
  flex-direction: column;
  gap: 24px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.practice-drawer-step-panel.is-current {
  display: flex;
}

.practice-drawer-step__intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.practice-drawer-step__heading {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.2px;
  color: var(--neutral-fg-1);
}

.practice-drawer-step__heading--sm {
  font-size: var(--text-base);
  line-height: 20px;
  letter-spacing: 0;
}

/* PRACTICE-CSV-PREVIEW-01 — onboarding sample-statement preview step. */
.practice-step__optional {
  margin-left: 6px;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--neutral-fg-2);
}

.practice-csv-preview__lead {
  margin: 0;
}

.practice-csv-preview__steps {
  margin: 0;
  padding-left: 22px;
  list-style: decimal outside;
  font-size: var(--text-sm);
  color: var(--neutral-fg-1);
}

.practice-csv-preview__steps li {
  margin-bottom: 8px;
}

.practice-csv-preview__steps li::marker {
  font-weight: 600;
  color: var(--neutral-fg-2);
}

.practice-csv-preview__steps li:last-child {
  margin-bottom: 0;
}

.practice-csv-preview__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  vertical-align: middle;
}

.practice-csv-preview__download svg {
  flex-shrink: 0;
}

.practice-csv-preview__notice {
  margin: 0;
}

.practice-csv-file {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.practice-csv-file__name {
  font-size: var(--text-sm);
  color: var(--neutral-fg-2);
  word-break: break-all;
}

.practice-csv-file__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--neutral-border-2);
  border-radius: var(--radius-sm);
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.practice-csv-file__clear:hover {
  background: var(--neutral-bg-2);
  color: var(--neutral-fg-1);
}

.practice-drawer-step__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.practice-drawer-page .practice-form-card {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.practice-drawer-page .practice-drawer-field {
  gap: 8px;
  margin-bottom: 0;
  width: 100%;
}

.practice-drawer-page .practice-drawer-field label,
.practice-drawer-page .practice-drawer-field legend {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.practice-drawer-page .practice-drawer-field input[type="text"],
.practice-drawer-page .practice-drawer-field input[type="email"],
.practice-drawer-page .practice-drawer-field input[type="tel"],
.practice-drawer-page .practice-drawer-field input[type="url"],
.practice-drawer-page .practice-drawer-field input[type="number"],
.practice-drawer-page .practice-drawer-field select,
.practice-drawer-page .practice-drawer-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  background: var(--neutral-bg-input);
  color: var(--neutral-fg-1);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
}

/* STAB-UAT-29 / STAB-UAT-206: selects showing placeholder match --input-placeholder.
   :required:invalid is a CSS-only fallback — required select on empty option is :invalid. */
.practice-drawer-page .practice-drawer-field select:required:invalid,
.practice-drawer-page .practice-drawer-field select.is-placeholder-shown,
.practice-drawer-page select.is-placeholder-shown {
  color: var(--input-placeholder);
}
.practice-drawer-page .practice-drawer-field select:required:invalid option,
.practice-drawer-page select.is-placeholder-shown option {
  color: var(--neutral-fg-1);
}

/* STAB-UAT-05 / STAB-UAT-206: placeholders use shared --input-placeholder (vs filled fg-1). */
.practice-drawer-page .practice-drawer-field input::placeholder,
.practice-drawer-page .practice-drawer-field textarea::placeholder,
.practice-drawer-page input::placeholder,
.practice-drawer-page textarea::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

/*
 * STAB-BUG-12: Chrome can keep :-webkit-autofill after JS strips an invalid phone to "".
 * Global autofill rules force -webkit-text-fill-color to filled text (--neutral-fg-1), so the
 * placeholder looks typed. When empty (:placeholder-shown), restore placeholder paint.
 */
.practice-drawer-page .practice-drawer-field input[data-psm-us-phone]:placeholder-shown,
.practice-drawer-page .practice-drawer-field input[data-psm-us-phone].is-phone-empty {
  color: var(--input-placeholder);
}

.practice-drawer-page .practice-drawer-field input[data-psm-us-phone]:placeholder-shown::placeholder,
.practice-drawer-page .practice-drawer-field input[data-psm-us-phone].is-phone-empty::placeholder {
  color: var(--input-placeholder);
  -webkit-text-fill-color: var(--input-placeholder);
  opacity: 1;
}

.practice-drawer-page .practice-drawer-field input[data-psm-us-phone]:placeholder-shown:-webkit-autofill,
.practice-drawer-page .practice-drawer-field input[data-psm-us-phone]:placeholder-shown:-webkit-autofill:hover,
.practice-drawer-page .practice-drawer-field input[data-psm-us-phone]:placeholder-shown:-webkit-autofill:focus,
.practice-drawer-page .practice-drawer-field input[data-psm-us-phone]:placeholder-shown:-webkit-autofill:active,
.practice-drawer-page .practice-drawer-field input[data-psm-us-phone].is-phone-empty:-webkit-autofill,
.practice-drawer-page .practice-drawer-field input[data-psm-us-phone].is-phone-empty:-webkit-autofill:hover,
.practice-drawer-page .practice-drawer-field input[data-psm-us-phone].is-phone-empty:-webkit-autofill:focus,
.practice-drawer-page .practice-drawer-field input[data-psm-us-phone].is-phone-empty:-webkit-autofill:active {
  -webkit-text-fill-color: var(--input-placeholder);
  caret-color: var(--neutral-fg-1);
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  box-shadow: 0 0 0 1000px var(--neutral-bg-input) inset;
  transition: background-color 99999s ease-out 0s;
}

.practice-drawer-page .practice-drawer-field input[data-psm-us-phone]:placeholder-shown:-webkit-autofill:focus,
.practice-drawer-page .practice-drawer-field input[data-psm-us-phone]:placeholder-shown:-webkit-autofill:focus-visible,
.practice-drawer-page .practice-drawer-field input[data-psm-us-phone].is-phone-empty:-webkit-autofill:focus,
.practice-drawer-page .practice-drawer-field input[data-psm-us-phone].is-phone-empty:-webkit-autofill:focus-visible {
  border-color: var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  box-shadow:
    var(--input-focus-shadow),
    0 0 0 1000px var(--input-focus-bg) inset;
}

.practice-drawer-page .practice-drawer-field select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23141414' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
}

/* STAB-PPO-09: locked Entity (and any disabled select) — no chevron; reads as read-only. */
.practice-drawer-page .practice-drawer-field select:disabled {
  background-image: none;
  padding-right: 12px;
  color: var(--neutral-fg-2);
  cursor: default;
}

.practice-drawer-page .practice-drawer-field input:focus,
.practice-drawer-page .practice-drawer-field select:focus,
.practice-drawer-page .practice-drawer-field textarea:focus,
.practice-drawer-page .practice-drawer-field input:focus-visible,
.practice-drawer-page .practice-drawer-field select:focus-visible,
.practice-drawer-page .practice-drawer-field textarea:focus-visible {
  outline: none;
  border: 1px solid var(--input-focus-border, #0e72a0);
  box-shadow: var(--input-focus-shadow, 0 0 0 3px rgba(14, 114, 160, 0.15));
}

.practice-drawer-page .form-field__hint {
  margin: 0;
  font-size: var(--text-base);
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.practice-drawer-page .practice-drawer-field .form-field__error {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  color: var(--color-error);
}

.practice-drawer-page .practice-drawer-field .form-field__error[hidden],
.practice-drawer-page .practice-drawer-field .form-field__error--border-only {
  display: none;
}

.practice-drawer-page .practice-drawer-field.form-field--error input[type="text"],
.practice-drawer-page .practice-drawer-field.form-field--error input[type="email"],
.practice-drawer-page .practice-drawer-field.form-field--error input[type="tel"],
.practice-drawer-page .practice-drawer-field.form-field--error input[type="url"],
.practice-drawer-page .practice-drawer-field.form-field--error input[type="number"],
.practice-drawer-page .practice-drawer-field.form-field--error select,
.practice-drawer-page .practice-drawer-field.form-field--error textarea {
  border-color: var(--status-error-border);
}

/* STAB-BUG-01: Figma state select shows the trigger, not the visually hidden native <select>. */
.practice-drawer-page .practice-drawer-field.form-field--error .practice-drawer-select__trigger {
  border-color: var(--status-error-border);
}

.practice-drawer-page .practice-drawer-field.form-field--error .practice-drawer-select__trigger:focus,
.practice-drawer-page .practice-drawer-field.form-field--error .practice-drawer-select__trigger:focus-visible {
  border-color: var(--input-focus-error-border);
  box-shadow: var(--input-focus-error-shadow);
}

.practice-drawer-page .practice-drawer-field.form-field--error input[type="text"]:focus,
.practice-drawer-page .practice-drawer-field.form-field--error input[type="text"]:focus-visible,
.practice-drawer-page .practice-drawer-field.form-field--error input[type="email"]:focus,
.practice-drawer-page .practice-drawer-field.form-field--error input[type="email"]:focus-visible,
.practice-drawer-page .practice-drawer-field.form-field--error input[type="tel"]:focus,
.practice-drawer-page .practice-drawer-field.form-field--error input[type="tel"]:focus-visible,
.practice-drawer-page .practice-drawer-field.form-field--error input[type="url"]:focus,
.practice-drawer-page .practice-drawer-field.form-field--error input[type="url"]:focus-visible,
.practice-drawer-page .practice-drawer-field.form-field--error input[type="number"]:focus,
.practice-drawer-page .practice-drawer-field.form-field--error input[type="number"]:focus-visible,
.practice-drawer-page .practice-drawer-field.form-field--error select:focus,
.practice-drawer-page .practice-drawer-field.form-field--error select:focus-visible,
.practice-drawer-page .practice-drawer-field.form-field--error textarea:focus,
.practice-drawer-page .practice-drawer-field.form-field--error textarea:focus-visible {
  border-color: var(--input-focus-error-border);
  box-shadow: var(--input-focus-error-shadow);
}

.practice-drawer-page__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-shrink: 0;
  margin: 0;
  padding: 16px;
  border-top: 1px solid var(--neutral-border-1);
  background: var(--neutral-bg-1);
}

/* DI-SHELL-03 refinement 3 (A3 mock): Delete Draft was clustered inline with
   Back/Save-as-Draft/Next ? a misclick risk next to primary actions. Now an
   isolated left-hand group, with the primary nav cluster staying right via
   space-between on the (now full-width) actions row. */
.practice-drawer-page__footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 1 1 auto;
}

.practice-drawer-page__footer-actions-left,
.practice-drawer-page__footer-actions-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* STAB-UAT-57: Create is first type=submit in DOM (safe default submitter);
   visual order stays Back ? Draft ? Next ? Create. */
.practice-drawer-page__footer-actions-right [data-practice-back] {
  order: 0;
}
.practice-drawer-page__footer-actions-right [data-practice-save-draft] {
  order: 1;
}
.practice-drawer-page__footer-actions-right [data-practice-next] {
  order: 2;
}
.practice-drawer-page__footer-actions-right [data-practice-submit] {
  order: 3;
}

.practice-drawer-page__footer.is-current {
  display: flex;
}

.practice-drawer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  cursor: pointer;
}

.practice-drawer-btn--ghost {
  background: var(--neutral-bg-1);
  border-color: var(--neutral-border-1);
  color: var(--neutral-fg-1);
}

.practice-drawer-btn--ghost.practice-drawer-btn--danger {
  color: var(--status-error-fg);
  border-color: var(--status-error-border);
}

.practice-drawer-btn--ghost.practice-drawer-btn--danger:hover {
  background: var(--status-error-bg);
  border-color: var(--status-error-border);
  color: var(--status-error-fg);
}

.practice-drawer-btn--ghost.practice-drawer-btn--danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.2);
}

.practice-drawer-btn--primary {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-fg);
}

.practice-drawer-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.92;
  color: var(--cta-fg);
  text-decoration: none;
}

.practice-drawer-btn--hidden {
  visibility: hidden;
  pointer-events: none;
}

.practice-drawer-btn:disabled,
.practice-drawer-btn[aria-disabled="true"] {
  cursor: not-allowed;
}

.practice-drawer-btn--primary:disabled,
.practice-drawer-btn--primary[aria-disabled="true"] {
  background: var(--neutral-bg-disabled);
  border-color: var(--neutral-bg-disabled);
  color: var(--brand-fg-on);
  opacity: 1;
}

/* Stepper active / complete (visual only). Figma 923-1610: complete = blue circle + white check. */
.practice-drawer-steps__item.is-current .practice-drawer-steps__circle {
  background: var(--control-accent);
  border-color: var(--control-accent);
  color: var(--brand-fg-on);
}

.practice-drawer-steps__item.is-complete .practice-drawer-steps__num {
  display: none;
}

.practice-drawer-steps__item.is-complete .practice-drawer-steps__icon {
  display: block;
}

.practice-drawer-steps__item.is-complete .practice-drawer-steps__circle {
  background: var(--control-accent);
  border-color: var(--control-accent);
  color: var(--brand-fg-on);
}

.practice-drawer-steps__item.is-current.is-complete .practice-drawer-steps__num {
  display: inline;
}

.practice-drawer-steps__item.is-current.is-complete .practice-drawer-steps__icon {
  display: none;
}

/* Branding ? Figma 691-2949 */
.practice-branding-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.practice-branding-block__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--neutral-fg-1);
}

.practice-drawer-page .practice-branding-fieldset {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
  gap: 0;
}

.practice-drawer-page .practice-logo-type-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.practice-drawer-page .practice-logo-type-option {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.practice-drawer-page .practice-logo-type-option input[type="radio"] {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--control-accent);
}

.practice-logo-type-option__muted {
  font-weight: 400;
  color: var(--neutral-fg-2);
}

.practice-branding-upload__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.practice-branding-upload-box {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  background: var(--neutral-bg-1);
  overflow: clip;
}

.practice-branding-upload-box__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  padding: 8px;
  border-radius: 8px;
  background: var(--neutral-bg-2);
  overflow: hidden;
}

.practice-branding-upload-box--has-file .practice-branding-upload-box__preview {
  padding: 0;
  background: transparent;
}

.practice-branding-upload-box__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.practice-branding-upload-box__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.practice-branding-upload-box__preview:has(.practice-branding-upload-box__img:not([hidden])) .practice-branding-upload-box__placeholder,
.practice-branding-upload-box__preview.practice-logo-preview--has-existing .practice-branding-upload-box__placeholder {
  display: none;
}

.practice-branding-upload-box__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

.practice-branding-upload-box__empty,
.practice-branding-upload-box__selected {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.practice-branding-upload-box__btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.practice-branding-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 8px;
  background: var(--neutral-bg-page);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.practice-branding-upload-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 13px;
  border: none;
  border-radius: 8px;
  background: var(--neutral-bg-1);
  color: var(--status-error-fg);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  font-family: inherit;
  cursor: pointer;
}

.practice-branding-upload-remove:hover {
  background: var(--neutral-bg-page);
}

.practice-branding-upload-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--neutral-fg-2);
}

/* STAB-BUG-08: filename truncates; size stays fully visible beside it. */
.practice-branding-upload-meta__name {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  outline: none;
}

.practice-branding-upload-meta__name-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-branding-upload-meta__size {
  flex: 0 0 auto;
  white-space: nowrap;
}

.practice-branding-upload-meta__size[hidden] {
  display: none;
}

/*
 * STAB-BUG-09: match Activity Logs `.audit-logs-ip__copied` pill tokens exactly
 * (padding/radius/colors/type). Anchored above the truncated name with a down caret
 * so a long filename tip stays readable without covering the size label.
 */
.practice-branding-upload-meta__tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 3;
  box-sizing: border-box;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--neutral-fg-1);
  color: var(--neutral-bg-1);
  font-size: 11px;
  line-height: 16px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: min(360px, 85vw);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease-in-out;
}

.practice-branding-upload-meta__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 12px;
  border: 5px solid transparent;
  border-top-color: var(--neutral-fg-1);
}

.practice-branding-upload-meta__name.is-tip-visible .practice-branding-upload-meta__tip {
  opacity: 1;
}

.practice-branding-upload-hint {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--neutral-fg-2);
}

.practice-branding-upload-validation {
  display: flex;
  align-items: center;
  gap: 4px;
}

.practice-branding-upload-validation[hidden] {
  display: none;
}

.practice-branding-upload-validation__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.practice-branding-upload-validation__text {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--status-error-fg);
}

.practice-drawer-page .practice-logo-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.practice-color-scheme-select-wrap {
  width: 100%;
}

.practice-color-scheme-select {
  width: 100%;
}

.practice-color-scheme-swatch {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--onboard-swatch-blue);
}

.practice-color-scheme-swatch--blue {
  background: var(--onboard-swatch-blue);
}

.practice-color-scheme-swatch--green {
  background: var(--onboard-swatch-green);
}

.practice-color-scheme-swatch--teal {
  background: var(--onboard-swatch-teal);
}

.practice-color-scheme-swatch--slate {
  background: var(--onboard-swatch-slate);
}

.practice-color-scheme-swatch--maroon {
  background: var(--onboard-swatch-maroon);
}

.practice-drawer-page .practice-drawer-select--swatch .practice-drawer-select__trigger {
  gap: 12px;
  padding: 12px;
}

.practice-drawer-page .practice-drawer-select__value {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.practice-drawer-page .practice-drawer-select--swatch .practice-drawer-select__panel [role="option"] {
  gap: 12px;
}

.practice-drawer-page .practice-drawer-select__option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Practice drawer selects ? Figma 633-905 open list (max 5 rows, then scroll) */
.practice-drawer-page .form-field:has(.practice-drawer-select),
.practice-drawer-page .practice-color-scheme-select-wrap {
  position: relative;
}

.practice-drawer-page .practice-drawer-select {
  display: block;
  width: 100%;
  z-index: 2;
}

.practice-drawer-page .practice-drawer-select.is-open {
  z-index: 60;
}

.practice-drawer-page .practice-drawer-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none;
}

.practice-drawer-page .practice-drawer-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  box-sizing: border-box;
  background: var(--neutral-bg-input);
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  text-align: left;
}

.practice-drawer-page .practice-drawer-select__trigger:hover:not(:disabled) {
  background: var(--neutral-bg-page);
}

.practice-drawer-page .practice-drawer-select__trigger:focus,
.practice-drawer-page .practice-drawer-select__trigger:focus-visible {
  outline: none;
  border-color: var(--input-focus-border, #0e72a0);
  box-shadow: var(--input-focus-shadow, 0 0 0 3px rgba(14, 114, 160, 0.15));
}

.practice-drawer-page .practice-drawer-select.is-disabled .practice-drawer-select__trigger,
.practice-drawer-page .practice-drawer-select__trigger:disabled {
  background: var(--neutral-bg-page);
  color: var(--neutral-fg-2);
  cursor: not-allowed;
}

.practice-drawer-page .practice-drawer-select__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* STAB-UAT-110 / STAB-UAT-206: Entity (and other drawer selects) — match --input-placeholder */
.practice-drawer-page .practice-drawer-select__label.is-placeholder,
.practice-drawer-page .practice-drawer-select__label.psm-figma-menu__label.is-placeholder {
  color: var(--input-placeholder);
  font-weight: 400;
}

.practice-drawer-page .practice-drawer-select__panel {
  display: none;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
  max-width: none;
  /* 4px pad + 5?44px rows + 4?4px gaps */
  max-height: calc(8px + (5 * 44px) + (4 * 4px));
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px;
  gap: 4px;
  border-radius: 8px;
  background: var(--neutral-bg-1);
  box-shadow: 0 2px 6px rgba(51, 51, 51, 0.1);
}

.practice-drawer-page .practice-drawer-select.is-open .practice-drawer-select__panel:not(.is-anchored) {
  display: flex;
  flex-direction: column;
}

/* STAB-PPO-12: portaled to body — escapes .practice-drawer-page__scroll overflow (Remit State). */
.practice-drawer-select__panel.is-anchored,
.practice-drawer-select__panel.is-anchored.is-visible {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  z-index: 1300;
  margin: 0;
  padding: 4px;
  gap: 4px;
  list-style: none;
  border: none;
  border-radius: 8px;
  background: var(--neutral-bg-1);
  box-shadow: 0 2px 6px rgba(51, 51, 51, 0.1);
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(8px + (5 * 44px) + (4 * 4px));
}

.practice-drawer-select__panel.is-anchored [role="option"] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 4px;
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  background: transparent;
}

.practice-drawer-select__panel.is-anchored [role="option"] > .practice-drawer-select__option-label,
.practice-drawer-select__panel.is-anchored [role="option"] > span:not(.practice-color-scheme-swatch):not(.psm-figma-menu__check) {
  flex: 1 1 auto;
  min-width: 0;
}

.practice-drawer-select__panel.is-anchored [role="option"]:hover {
  background: var(--neutral-bg-selected);
}

.practice-drawer-select__panel.is-anchored [role="option"].is-selected {
  background: #d4e9f2;
}

.practice-drawer-select__panel.is-anchored [role="option"].is-selected:hover {
  background: #d4e9f2;
}

.practice-drawer-select__panel.is-anchored .psm-figma-menu__check {
  display: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.practice-drawer-select__panel.is-anchored [role="option"].is-selected .psm-figma-menu__check {
  display: inline-flex;
}

.practice-drawer-page .practice-drawer-select__panel [role="option"] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 4px;
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  background: transparent;
}

.practice-drawer-page .practice-drawer-select__panel [role="option"] > .practice-drawer-select__option-label,
.practice-drawer-page .practice-drawer-select__panel [role="option"] > span:not(.practice-color-scheme-swatch):not(.psm-figma-menu__check) {
  flex: 1 1 auto;
  min-width: 0;
}

.practice-drawer-page .practice-drawer-select__panel [role="option"]:hover {
  background: var(--neutral-bg-selected);
}

.practice-drawer-page .practice-drawer-select__panel [role="option"].is-selected {
  background: #d4e9f2;
}

.practice-drawer-page .practice-drawer-select__panel [role="option"].is-selected:hover {
  background: #d4e9f2;
}

.practice-drawer-page .practice-drawer-select__panel .psm-figma-menu__check {
  display: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--brand-fg-1);
}

.practice-drawer-page .practice-drawer-select__panel [role="option"].is-selected .psm-figma-menu__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Addresses — Figma 924-2095 (carded Physical + Remit). STAB-BUG-49: tokenized inter-card gap. */
.practice-addresses-intro {
  margin-bottom: 0;
}

#practice-step-3.practice-drawer-step-panel.is-current {
  gap: var(--space-6);
}

.practice-addresses-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.practice-address-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

/* STAB-BUG-49: vertical space between Additional location units. */
#additional-locations-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

/* STAB-BUG-50: each unit stacks Location name + Remit-matching address cards. */
.additional-location {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.additional-location__remove {
  align-self: flex-start;
}

/* STAB-PPO-05: 10pt white space below "+ Add another location". */
.practice-drawer-page #additional-locations {
  padding-bottom: 10pt;
}

.practice-address-block__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}

.practice-address-group__title {
  margin: 0;
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.practice-address-group__required {
  color: var(--status-error-fg);
  font-weight: 500;
}

.practice-address-card {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  background: var(--neutral-bg-1);
}

/* Figma 924-2160: label text then checkbox on the right of Remit title row */
.practice-same-as-physical {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.practice-same-as-physical input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.practice-same-as-physical__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 4px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 4px;
  background: var(--neutral-bg-input);
}

.practice-same-as-physical__check {
  display: none;
  width: 12px;
  height: 12px;
  color: var(--cta-fg);
}

.practice-same-as-physical input[type="checkbox"]:checked ~ .practice-same-as-physical__box {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
}

.practice-same-as-physical input[type="checkbox"]:checked ~ .practice-same-as-physical__box .practice-same-as-physical__check {
  display: block;
}

.practice-same-as-physical input[type="checkbox"]:focus-visible ~ .practice-same-as-physical__box {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 114, 160, 0.2);
}

.practice-same-as-physical__label {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.practice-address-remit-fields--mirrored .practice-drawer-field input[type="text"],
.practice-address-remit-fields--mirrored .practice-drawer-field input[type="text"][readonly] {
  background: var(--neutral-bg-page);
  color: var(--neutral-fg-1);
  cursor: default;
}

.practice-address-remit-fields--mirrored .practice-drawer-field .practice-drawer-select.is-disabled .practice-drawer-select__trigger {
  background: var(--neutral-bg-page);
  color: var(--neutral-fg-1);
  cursor: default;
}

/* Addresses State selects ? Figma 924-2371: 12px padding, 12px gap to chevron */
#practice-step-3 .practice-drawer-select__trigger {
  min-height: 44px;
  padding: 12px;
  gap: 12px;
}

/* Beat .practice-onboard-form .form-field-grid { gap: 12px } — Figma 924-2357 uses 20px. */
.practice-drawer-page .practice-address-city-row.form-field-grid,
.practice-drawer-page .form-field-grid.practice-address-city-row {
  gap: var(--space-5);
}

@media (min-width: 40rem) {
  .practice-drawer-page .form-field-grid--3,
  .practice-drawer-page .practice-address-city-row.form-field-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.practice-drawer-page .practice-same-as-physical.practice-drawer-checkbox {
  opacity: 1;
  cursor: pointer;
}

/* STAB-BUG-54/55: Additional Locations Same-as — same control as primary; ensure clickable. */
.additional-location__same-as {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.additional-location .practice-same-as-physical input[type="checkbox"] {
  /* Keep clipped visually but retain label-toggle (native primary pattern). */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 39.99rem) {
  .practice-address-block__header {
    flex-direction: column;
    align-items: stretch;
  }

  .practice-same-as-physical {
    justify-content: space-between;
  }
}

/* Statement messages & rules ? Figma 456-3656 */
.practice-drawer-page .practice-statements-step .field-marker {
  color: var(--status-error-fg);
}

.practice-statements-step {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.practice-statements-step__messages {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.practice-statements-step__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--neutral-border-1);
}

.practice-statements-step__rules,
.practice-statements-step__payment {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.practice-statements-step__payment {
  gap: 24px;
}

.practice-statements-step__rules-fields,
.practice-statements-step__payment-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.practice-statements-step__numeric-row {
  gap: 20px;
}

.practice-drawer-page .practice-statement-textarea {
  min-height: 72px;
  resize: vertical;
}

.practice-drawer-page .practice-statement-textarea--important {
  border-radius: 8px;
}

.practice-drawer-page .practice-statement-textarea--important:focus,
.practice-drawer-page .practice-statement-textarea--important:focus-visible {
  border-color: var(--control-accent);
  box-shadow: 0 0 0 4px rgba(14, 114, 160, 0.1);
}

.practice-drawer-page .practice-statement-url-input {
  min-height: 44px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.practice-drawer-page .practice-drawer-field__legend {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.practice-payment-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.practice-payment-toggle__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.practice-payment-toggle__label {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.practice-payment-toggle__hint {
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.3px;
  color: var(--neutral-fg-2);
}

/* STAB-PPO-03: required chrome for collect-payments checkbox (custom box, not native input). */
.practice-drawer-page .form-field--error .practice-figma-checkbox__box {
  border-color: var(--status-error-border);
}

.practice-drawer-page .form-field--error .practice-figma-checkbox__input:focus-visible + .practice-figma-checkbox__box {
  border-color: var(--input-focus-error-border);
  box-shadow: var(--input-focus-error-shadow);
}

/* Figma checkbox ? payment toggle + credit cards (707:3893) */
.practice-figma-checkbox-row {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.practice-figma-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.practice-figma-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 4px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 6px;
  /* STAB-UAT-09: enabled unchecked must not look disabled (was neutral-bg-2 grey). */
  background: var(--neutral-bg-1);
}

.practice-figma-checkbox__check {
  display: none;
  width: 12px;
  height: 12px;
}

.practice-figma-checkbox__input:checked + .practice-figma-checkbox__box {
  background: var(--control-accent);
  border-color: var(--control-accent);
}

.practice-figma-checkbox__input:checked + .practice-figma-checkbox__box .practice-figma-checkbox__check {
  display: block;
}

.practice-figma-checkbox__input:focus-visible + .practice-figma-checkbox__box {
  outline: none;
  box-shadow: 0 0 0 3px var(--control-accent-ring);
}

.practice-figma-checkbox__input:disabled + .practice-figma-checkbox__box {
  opacity: 0.55;
  background: var(--neutral-bg-2);
  cursor: not-allowed;
}

.practice-figma-checkbox-row:has(.practice-figma-checkbox__input:disabled) {
  cursor: not-allowed;
}

.practice-drawer-page .practice-credit-card-options {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}

.practice-credit-card-option {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 0;
}

.practice-credit-card-option__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

/* Figma radio ? credit card box type (456:4355) */
.practice-credit-card-box-options {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 6px 0;
  margin: 0;
}

.practice-figma-radio-row {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
  cursor: pointer;
  user-select: none;
}

.practice-figma-radio__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.practice-figma-radio__ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--neutral-border-1);
  border-radius: 50%;
  background: var(--neutral-bg-input);
}

.practice-figma-radio__dot {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--control-accent);
}

.practice-figma-radio__input:checked + .practice-figma-radio__ring {
  border-color: var(--control-accent);
}

.practice-figma-radio__input:checked + .practice-figma-radio__ring .practice-figma-radio__dot {
  display: block;
}

.practice-figma-radio__input:focus-visible + .practice-figma-radio__ring {
  outline: none;
  box-shadow: 0 0 0 3px var(--control-accent-ring);
}

.practice-drawer-page .practice-payment-box-fieldset {
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
}

.practice-drawer-page .practice-payment-box-fieldset legend {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.practice-drawer-page .payment-options-panel {
  padding-left: 0;
}

/* ACTIVE readiness card ? visible in drawer main (Manage Practice / Figma) */
.practice-drawer-page .practice-completeness-rail--drawer {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 16px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  background: var(--neutral-bg-1);
  box-shadow: none;
}

.practice-drawer-page .practice-completeness-rail--drawer .practice-completeness-rail__status {
  margin: 0 0 12px;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.practice-drawer-page .practice-completeness-rail--drawer .practice-completeness-rail__status strong {
  font-weight: 600;
}

.practice-drawer-page .practice-completeness-rail--drawer .practice-completeness-rail__progress {
  height: 8px;
  margin: 0 0 12px;
  border-radius: 40px;
  background: var(--neutral-border-1);
}

.practice-drawer-page .practice-completeness-rail--drawer .practice-completeness-rail__progress-fill {
  background: #1b7f4e;
  border-radius: 40px;
}

.practice-drawer-page .practice-completeness-rail--drawer .practice-completeness-rail__checklist {
  margin: 0 0 16px;
  font-size: var(--text-base);
  line-height: 20px;
}

.practice-drawer-page .practice-completeness-rail--drawer .practice-completeness-rail__checklist-item {
  margin-bottom: 4px;
  color: var(--neutral-fg-1);
}

.practice-drawer-page .practice-completeness-rail--drawer .practice-completeness-rail__checklist-item.rail-checklist-done {
  color: var(--neutral-fg-1);
}

.practice-drawer-page .practice-completeness-rail--drawer .practice-completeness-rail__checklist-link {
  color: var(--neutral-fg-1);
  text-decoration: none;
}

.practice-drawer-page .practice-completeness-rail--drawer .practice-completeness-rail__check {
  color: #1b7f4e;
  font-size: var(--text-base);
  font-weight: 700;
}

.practice-drawer-page .practice-completeness-rail--drawer .practice-completeness-rail__preview {
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--neutral-border-1);
}

.practice-drawer-page .practice-completeness-rail--drawer #practice-preview-statement-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 8px;
  background: var(--neutral-bg-page);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
}

.practice-drawer-page .practice-completeness-rail--drawer #practice-preview-hint {
  margin: 8px 0 0;
  font-size: var(--text-base);
  line-height: 20px;
  color: var(--neutral-fg-2);
}

.practice-drawer-page #practice-form-errors {
  margin: 8px 24px 0;
}

@media (max-width: 720px) {
  .practice-drawer-page__body {
    flex-direction: column;
  }

  .practice-drawer-steps {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--neutral-border-1);
  }

  .practice-drawer-steps__rail {
    display: none;
  }

  .practice-drawer-steps__label {
    display: none;
  }
}


/* ?? Users page + modals (STAB-PO-11 / Figma 471-5241; STAB-PO-21 polish) ?? */
body.users-modal-open {
  overflow: hidden;
}

.users-page {
  gap: 24px;
}

.users-page__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.users-page__header-actions {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.users-page__download-btn {
  gap: 12px;
  color: var(--neutral-fg-1);
  cursor: pointer;
}

.users-page__download-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.users-page__header-actions .entities-page__create-btn {
  cursor: pointer;
}

.users-filters {
  margin-bottom: 0;
}

.users-list-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.users-card {
  margin-top: 0;
}

/* Figma 471:5597 ? column widths (240 / flex / 160 / 200 / 200 / 200 / 120) */
/* Percentages, not px ? table-layout:fixed + a mix of fixed-px columns and one
   width:auto column (email) meant the auto column absorbed all leftover
   width unpredictably (the wide gap before Role). Every column now takes an
   explicit, proportional share, matching the .entities-table convention. */
.users-table__col-name { width: 15%; }
.users-table__col-email { width: 22%; }
.users-table__col-role { width: 13%; }
.users-table__col-department { width: 14%; }
.users-table__col-entity { width: 13%; }
.users-table__col-status { width: 11%; }
.users-table__col-actions {
  width: 12%;
  text-align: left;
}

.users-table .entities-sort--chrome {
  cursor: default;
}

.users-table__name {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 18px;
}

.users-table__entity {
  color: var(--color-text-muted);
}

.users-table__status {
  padding: 8px 12px;
}

.users-table__manage-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--brand-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}

.users-table__manage-link:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.users-table__manage-link:hover:not(:disabled) {
  text-decoration: none;
}

.users-table__manage-link:hover:not(:disabled) .users-table__manage-label {
  text-decoration: underline;
}

.users-table__manage-chevron {
  display: block;
  flex-shrink: 0;
}

.users-pagination {
  border-top: 0;
}

.users-pagination__size-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 8px;
  background: var(--neutral-bg-input);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
}

.users-pagination__size-trigger svg {
  display: block;
  flex-shrink: 0;
}

.users-page__rbac-link-row {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0;
  margin: 0;
}

.users-page__rbac-link {
  color: var(--brand-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.users-page__rbac-link:hover {
  text-decoration: underline;
}

.users-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.users-modal[hidden],
.users-modal[hidden="hidden"] {
  display: none !important;
}

.users-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.users-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 560px);
  max-height: min(92vh, 900px);
  overflow: hidden;
  border-radius: 12px;
  background: var(--neutral-bg-1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

.users-add-modal__panel {
  width: min(100%, 1100px);
}

.users-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  padding: 16px 24px;
  border-bottom: 1px solid var(--neutral-border-1);
}

.users-modal__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.2px;
  color: var(--neutral-fg-1);
}

.users-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.users-modal__close:hover {
  background: var(--neutral-bg-2);
}

.users-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 24px;
  background: var(--neutral-bg-page);
}

.users-modal__btn-secondary {
  padding: 10px 16px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 8px;
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-1);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 24px;
}

.users-add-panel {
  margin: 0 0 24px;
  padding: 0 0 8px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  background: var(--neutral-bg-1);
  overflow: hidden;
}

.users-add-panel[hidden],
.users-add-panel[hidden="hidden"] {
  display: none !important;
}

.users-add-panel__form {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.users-add-panel__summary {
  margin: 16px 16px 0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--status-error-border);
  background: var(--status-error-bg);
  color: var(--status-error-fg);
  font-size: var(--text-base);
  line-height: 1.4;
}

.users-add-panel__summary[hidden] {
  display: none !important;
}

.users-add-panel__table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.users-add-panel__table {
  table-layout: fixed;
  width: 100%;
  min-width: 72rem;
  border-collapse: collapse;
  margin: 0;
}

.users-add-panel__col--email,
.users-add-panel__col--name {
  width: 16%;
}

.users-add-panel__col--department {
  width: 12%;
}

.users-add-panel__col--role,
.users-add-panel__col--entity {
  width: 12%;
}

.users-add-panel__col--module {
  width: 12%;
}

.users-add-panel__col--action {
  width: 8%;
}

.users-add-panel__table thead tr {
  background: var(--neutral-bg-2);
}

.users-add-panel__table thead th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--neutral-border-1);
  color: var(--neutral-fg-2);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.users-add-panel__table tbody tr {
  background: var(--neutral-bg-1);
  border-bottom: 1px solid var(--neutral-border-1);
}

.users-add-panel__table tbody tr:last-child {
  border-bottom: 1px solid var(--neutral-border-1);
}

.users-add-panel__table tbody td {
  padding: 16px;
  vertical-align: middle;
  border: none;
}

.users-add-panel__table .form-field__error,
.users-add-panel__table .form-field__hint {
  margin: 6px 0 0;
  font-size: var(--text-xs);
  line-height: 16px;
}

/* STAB-PO-26/27 ? Add Users validation: danger highlight only (no error copy / no cell bg)
   STAB-UAT-56/58 ? show inline messages on error-highlighted cells + acknowledgement. */
.users-add-panel .form-field__error {
  display: none !important;
}

.users-add-panel .user-bulk-row__cell--error .form-field__error,
.users-add-panel .user-bulk-row__entity-cell .form-field__error {
  display: block !important;
  color: var(--color-error);
  margin: 6px 0 0;
  font-size: var(--text-xs);
  line-height: 16px;
}

.users-add-panel .users-add-panel__ack .form-field__error,
.users-add-panel .users-add-panel__ack-error,
.users-add-panel [data-users-add-ack-error] {
  display: block !important;
  color: var(--color-error);
  margin: 8px 0 0;
  font-size: var(--text-xs);
  line-height: 16px;
}

.users-add-panel .user-bulk-create__ack--error,
.users-add-panel .checkbox-list__item--error,
.users-add-panel .user-bulk-row__cell--error {
  background-color: transparent;
  background: none;
}

.users-add-panel .user-bulk-row__cell--error input.user-bulk-row__input,
.users-add-panel .user-bulk-row__cell--error select.user-bulk-row__select,
.users-add-panel .user-bulk-row__cell--error .users-figma-select__trigger {
  border-color: var(--color-error);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-error) 35%, transparent);
}

.users-add-panel .user-bulk-row__cell--error .user-bulk-row__workflow-check input[type="checkbox"] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 1px var(--color-error);
}

/* STAB-PO-28 ? ack error: color only; keep same padding/flex alignment as resting state */
.users-add-panel .users-add-panel__ack.user-bulk-create__ack--error {
  border: none;
  padding: 9px 16px;
}

.users-add-panel .users-add-panel__ack-label.checkbox-list__item--error {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
}

.users-add-panel .user-bulk-create__ack--error .users-add-panel__ack-label input[type="checkbox"],
.users-add-panel .checkbox-list__item--error input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  vertical-align: middle;
  border: 1px solid var(--color-error);
  box-shadow: none;
  outline: none;
}

.users-add-panel__table input.user-bulk-row__input,
.users-add-panel__table select.user-bulk-row__select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 40px;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  background: var(--neutral-bg-input);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  transition: var(--input-focus-transition);
}

/* STAB-PO-25 ? Email (type=email) focus must match Name/text fields exactly */
.users-add-panel__table input.user-bulk-row__input:focus,
.users-add-panel__table input.user-bulk-row__input:focus-visible,
.users-add-panel__table input.user-bulk-row__input[type="email"]:focus,
.users-add-panel__table input.user-bulk-row__input[type="email"]:focus-visible,
.users-add-panel__table select.user-bulk-row__select:focus,
.users-add-panel__table select.user-bulk-row__select:focus-visible {
  outline: none;
  border: 1px solid var(--input-focus-border);
  border-radius: var(--radius-input);
  background-color: var(--input-focus-bg);
  box-shadow: var(--input-focus-shadow);
}

/* STAB-PO-27 ? invalid border wins over focus chrome until the field is cleared */
.users-add-panel .user-bulk-row__cell--error input.user-bulk-row__input:focus,
.users-add-panel .user-bulk-row__cell--error input.user-bulk-row__input:focus-visible,
.users-add-panel .user-bulk-row__cell--error input.user-bulk-row__input[type="email"]:focus,
.users-add-panel .user-bulk-row__cell--error input.user-bulk-row__input[type="email"]:focus-visible,
.users-add-panel .user-bulk-row__cell--error select.user-bulk-row__select:focus,
.users-add-panel .user-bulk-row__cell--error select.user-bulk-row__select:focus-visible {
  border-color: var(--color-error);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-error) 35%, transparent);
}

.users-add-panel__table input.user-bulk-row__input::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

.users-add-panel__table select.user-bulk-row__select {
  appearance: none;
  padding: 10px 36px 10px 16px;
  font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23707070' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

/* STAB-PO-16 ? Figma status option list over native selects on Users page */
.users-page .users-figma-select {
  position: relative;
  display: block;
  width: 100%;
  z-index: 2;
  overflow: visible;
}

.users-page .users-figma-select.is-open {
  z-index: 80;
}

.users-page .users-figma-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none;
}

.users-page td:has(.users-figma-select),
.users-page .user-bulk-row__entity-cell {
  position: relative;
  overflow: visible;
}

.users-page .users-figma-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  height: 40px;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 16px;
  background: var(--neutral-bg-input);
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.users-page .users-figma-select__trigger:hover:not(:disabled) {
  background: var(--neutral-bg-page);
}

.users-page .users-figma-select__trigger:focus,
.users-page .users-figma-select__trigger:focus-visible {
  outline: none;
  border-color: var(--input-focus-border, #0e72a0);
  box-shadow: var(--input-focus-shadow, 0 0 0 3px rgba(14, 114, 160, 0.15));
}

/* STAB-PO-27 ? error border must win over Figma select resting/focus chrome */
.users-add-panel .user-bulk-row__cell--error .users-figma-select__trigger,
.users-add-panel .user-bulk-row__cell--error .users-figma-select__trigger:hover:not(:disabled),
.users-add-panel .user-bulk-row__cell--error .users-figma-select__trigger:focus,
.users-add-panel .user-bulk-row__cell--error .users-figma-select__trigger:focus-visible {
  border-color: var(--color-error);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-error) 35%, transparent);
}

.users-page .users-figma-select.is-disabled .users-figma-select__trigger,
.users-page .users-figma-select__trigger:disabled {
  background: var(--neutral-bg-page);
  color: var(--neutral-fg-2);
  cursor: not-allowed;
}

.users-page .users-figma-select__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-page .users-figma-select__panel,
.users-page .users-figma-select__panel.is-anchored,
.users-page .users-figma-select .psm-figma-menu--comfortable {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 90;
  width: 100%;
  min-width: 200px;
  max-height: calc(8px + (5 * 44px) + (4 * 4px));
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  gap: 4px;
  list-style: none;
  border: none;
  border-radius: 8px;
  background: var(--neutral-bg-1);
  box-shadow: 0 2px 6px rgba(51, 51, 51, 0.1);
  flex-direction: column;
}

.users-page .users-figma-select.is-open .users-figma-select__panel:not(.is-anchored) {
  display: flex;
}

/* Portaled to body ? escapes table/card overflow (STAB-PO-17) */
.users-figma-select__panel.is-anchored,
.users-figma-select__panel.is-anchored.is-visible {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  z-index: 1300;
  margin: 0;
  padding: 4px;
  gap: 4px;
  list-style: none;
  border: none;
  border-radius: 8px;
  background: var(--neutral-bg-1);
  box-shadow: 0 2px 6px rgba(51, 51, 51, 0.1);
  overflow-x: hidden;
  overflow-y: auto;
}

.users-figma-select__panel.is-anchored [role="option"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 4px;
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  background: transparent;
}

.users-figma-select__panel.is-anchored [role="option"]:hover {
  background: var(--neutral-bg-selected);
}

/* STAB-BUG-64: disabled empty-state row (e.g. No entities available) — visible, not selectable. */
.users-figma-select__panel.is-anchored [role="option"].is-empty-state,
.users-page .users-figma-select__panel [role="option"].is-empty-state {
  color: var(--neutral-fg-3);
  cursor: default;
  pointer-events: none;
}

.users-figma-select__panel.is-anchored [role="option"].is-empty-state:hover,
.users-page .users-figma-select__panel [role="option"].is-empty-state:hover {
  background: transparent;
}

.users-figma-select__panel.is-anchored [role="option"].is-selected {
  background: #d4e9f2;
}

.users-figma-select__panel.is-anchored .psm-figma-menu__check {
  display: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.users-figma-select__panel.is-anchored [role="option"].is-selected .psm-figma-menu__check {
  display: inline-flex;
}

.users-page .users-figma-select__panel [role="option"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 4px;
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  background: transparent;
}

.users-page .users-figma-select__panel [role="option"]:hover {
  background: var(--neutral-bg-selected);
}

.users-page .users-figma-select__panel [role="option"].is-empty-state:hover {
  background: transparent;
}

.users-page .users-figma-select__panel [role="option"].is-selected {
  background: #d4e9f2;
}

.users-page .users-figma-select__panel .psm-figma-menu__check {
  display: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.users-page .users-figma-select__panel [role="option"].is-selected .psm-figma-menu__check {
  display: inline-flex;
}

.users-add-panel__table .user-bulk-row__workflow-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  justify-content: flex-start;
}

.users-add-panel__table .user-bulk-row__workflow-cell--inactive .user-bulk-row__workflow-group {
  visibility: visible;
  opacity: 0.55;
}

.users-add-panel__table .user-bulk-row__workflow-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 4px;
  height: 40px;
  color: var(--neutral-fg-2);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}

.users-add-panel__table .user-bulk-row__workflow-check input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--neutral-border-1);
  border-radius: 4px;
  background: var(--neutral-bg-2);
  flex-shrink: 0;
  cursor: pointer;
}

.users-add-panel__table .user-bulk-row__workflow-check input[type="checkbox"]:checked {
  border-color: transparent;
  background: var(--control-accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6l2.5 2.5L9.5 3.5' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}

.users-add-panel__table .user-bulk-row__workflow-check input[type="checkbox"]:disabled:checked {
  background-color: rgba(33, 117, 181, 0.5);
}

.users-add-panel__table .user-bulk-row__actions {
  white-space: nowrap;
}

.users-add-panel__table .user-bulk-row__remove {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--status-error-fg);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.users-add-panel__table .user-bulk-row__remove:hover {
  color: var(--status-error-fg);
}

.users-add-panel__add-row-wrap {
  padding: 16px;
}

.users-add-panel__add-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--brand-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.users-add-panel__add-row:hover {
  text-decoration: underline;
}

.users-add-panel__ack {
  margin: 0;
  padding: 9px 16px;
  border: none;
  min-width: 0;
}

.users-add-panel__ack-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.users-add-panel__ack-label input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid var(--neutral-border-1);
  border-radius: 6px;
  background: var(--neutral-bg-2);
  cursor: pointer;
}

.users-add-panel__ack-label input[type="checkbox"]:checked {
  border-color: transparent;
  background: var(--control-accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6l2.5 2.5L9.5 3.5' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}

.users-add-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding: 12px 16px;
}

.users-add-panel__btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--neutral-fg-disabled);
  border-radius: 8px;
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.users-add-panel__btn-cancel:hover {
  background: var(--neutral-bg-page);
}

.users-add-panel__submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--cta-bg);
  border-radius: 12px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.users-add-panel__submit:hover {
  background: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
}

.users-add-panel__submit .btn__spinner {
  display: none;
}

.users-add-panel__submit.btn--loading .btn__spinner,
.users-add-panel__submit[aria-busy="true"] .btn__spinner {
  display: inline-flex;
}

.users-add-panel__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 6px 16px;
  color: var(--neutral-fg-2);
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0.3px;
}

.users-add-modal__body {
  background: var(--neutral-bg-1);
  padding: 16px 24px 24px;
}

.users-add-modal__summary {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--status-error-border);
  background: var(--status-error-bg);
  color: var(--status-error-fg);
  font-size: var(--text-base);
  line-height: 1.4;
}

.users-add-modal__summary[hidden] {
  display: none !important;
}

.users-add-modal__table-wrap {
  overflow: auto;
}

.users-add-modal__row-actions {
  margin-top: 12px;
}

.users-add-modal__add-row {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--brand-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
}

.users-add-modal__footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.users-add-modal__ack {
  flex: 1 1 240px;
  margin: 0;
}

.users-add-modal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0;
  color: var(--neutral-fg-2);
  font-size: var(--text-xs);
  line-height: 16px;
}

.users-add-modal__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.users-add-modal__submit {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
}

.users-add-modal__submit:hover {
  background: var(--cta-bg-hover);
  border-color: var(--cta-bg-hover);
}

.user-bulk-row__workflow-cell--manager-locked {
  opacity: 0.7;
}

/* STAB-PO-34 ? Manage User modal (Figma 941-156 / 941-350 / 633-767) */
.users-manage-modal__panel {
  width: min(100%, 520px);
}

.users-manage-modal__form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.users-manage-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 24px;
  background: var(--neutral-bg-page);
}

.users-manage-modal__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.users-manage-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.users-manage-modal__fields .form-field,
.users-manage-modal__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  width: 100%;
}

.users-manage-modal__fields .form-field label {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.users-manage-modal__fields .form-field input[type="text"],
.users-manage-modal__fields .form-field input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  background: var(--neutral-bg-input);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  line-height: 20px;
}

.users-manage-modal__fields .form-field input[type="text"]:focus,
.users-manage-modal__fields .form-field input[type="text"]:focus-visible,
.users-manage-modal__fields .form-field input[type="email"]:focus,
.users-manage-modal__fields .form-field input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--brand-fg-1);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-fg-1) 35%, transparent);
}

.users-manage-modal__field.form-field--error input[type="text"],
.users-manage-modal__field.form-field--error input[type="email"],
.users-manage-modal__field.form-field--error .users-manage-modal__select-link {
  border-color: var(--color-error, #ff939a);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-error, #ff939a) 35%, transparent);
  background: var(--neutral-bg-input);
}

.users-manage-modal__modules.form-field--error .users-manage-modal__module-card,
.users-manage-modal__module-card.is-error {
  border-color: var(--color-error, #ff939a);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-error, #ff939a) 35%, transparent);
}

.users-manage-modal__label {
  margin: 0 0 8px;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  color: var(--neutral-fg-1);
}

.users-manage-modal__label--flush {
  margin: 0;
}

.users-manage-modal__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.users-manage-modal__static-box {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  background: var(--neutral-bg-page);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
}

.users-manage-modal__role-cards {
  display: flex;
  gap: 16px;
  width: 100%;
}

.users-manage-modal__role-card {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.users-manage-modal__role-card.is-selected {
  border-color: #d4e9f2;
}

.users-manage-modal__role-card:disabled {
  cursor: default;
}

.users-manage-modal__role-radio {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: 2px solid var(--neutral-fg-disabled);
  border-radius: 50%;
  background: var(--neutral-bg-input);
}

.users-manage-modal__role-card.is-selected .users-manage-modal__role-radio {
  border: 2px solid var(--cta-bg);
  background: radial-gradient(circle at center, var(--cta-bg) 0 6px, var(--neutral-bg-input) 7px);
}

.users-manage-modal__select-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  line-height: 20px;
  text-decoration: none;
}

.users-manage-modal__select-link:hover {
  background: var(--neutral-bg-page);
  color: var(--neutral-fg-1);
  text-decoration: none;
}

/* STAB-PO-37 ? Entity / Practice multi-select dropdown (Figma 712-5541) */
.users-manage-multiselect {
  position: relative;
  width: 100%;
}

.users-manage-multiselect__trigger {
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.users-manage-multiselect__trigger:disabled {
  cursor: default;
  background: var(--neutral-bg-page);
}

.users-manage-multiselect__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-height: 240px;
  overflow: auto;
  padding: 4px;
  border-radius: 12px;
  background: var(--neutral-bg-1);
  box-shadow: 0 2px 6px rgba(51, 51, 51, 0.1);
}

.users-manage-multiselect__panel[hidden] {
  display: none !important;
}

/* STAB-UAT-139 — disabled empty cue when selected entity has zero practices. */
.users-manage-multiselect__empty {
  margin: 0;
  padding: 12px;
  border-radius: 4px;
  color: var(--neutral-fg-3, #707070);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.users-manage-multiselect__empty[hidden],
.users-manage-multiselect__option[hidden] {
  display: none !important;
}

.users-manage-multiselect__option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border-radius: 4px;
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}

.users-manage-multiselect__option:hover {
  background: var(--neutral-bg-selected);
}

.users-manage-multiselect__option:has(input:checked) {
  background: #d4e9f2;
}

.users-manage-multiselect__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
}

.users-manage-multiselect__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid var(--neutral-border-1);
  background: var(--neutral-bg-input);
  color: transparent;
}

.users-manage-multiselect__option:has(input:checked) .users-manage-multiselect__check {
  background: var(--control-accent);
  border-color: var(--control-accent);
  color: var(--brand-fg-on);
}

.users-manage-multiselect__name {
  flex: 1 1 auto;
  min-width: 0;
}

.users-manage-modal__field.form-field--error .users-manage-multiselect__trigger {
  border-color: var(--color-error, #ff939a);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-error, #ff939a) 35%, transparent);
}

.users-manage-modal__modules,
.users-manage-modal__account {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.users-manage-modal__module-cards {
  display: flex;
  gap: 16px;
  width: 100%;
}

.users-manage-modal__module-card {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  line-height: 20px;
  cursor: pointer;
}

.users-manage-modal__module-card.is-locked {
  cursor: default;
}

.users-manage-modal__module-check {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.users-manage-modal__module-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
}

.users-manage-modal__module-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid var(--neutral-border-1);
  background: var(--neutral-bg-input);
  color: transparent;
}

.users-manage-modal__module-card.is-checked .users-manage-modal__module-box {
  background: var(--control-accent);
  border-color: var(--control-accent);
  color: var(--brand-fg-on);
}

.users-manage-modal__module-card.is-locked.is-checked .users-manage-modal__module-box {
  background: rgba(33, 117, 181, 0.5);
  border-color: transparent;
  color: var(--brand-fg-on);
}

/* STAB-PO-46 ? Two distinct boxes; each = title row + action row stacked. */
.users-manage-modal__invite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.users-manage-modal__invite-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  min-width: 0;
  border: 1px solid var(--neutral-border-1);
  border-radius: 12px;
  background: var(--neutral-bg-1);
}

.users-manage-modal__invite-status {
  margin: 0;
  color: var(--neutral-fg-1);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
}

.users-manage-modal__invite-btn {
  flex-shrink: 0;
  padding: 6px 13px;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  border-radius: 8px;
}

.users-manage-modal__reset-link {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--brand-fg-1);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  text-decoration: underline;
  cursor: pointer;
}

.users-manage-modal__reset-link:hover {
  color: var(--cta-bg-hover);
}

.users-manage-modal__reset-link:focus-visible {
  outline: 2px solid var(--brand-fg-1);
  outline-offset: 2px;
  border-radius: 2px;
}

.users-manage-modal__account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.users-manage-modal__account-actions .btn {
  padding: 6px 13px;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
  border-radius: 8px;
}

.users-manage-modal__delete {
  border: none;
  border-radius: 8px;
  background: var(--status-error-fg);
  color: var(--brand-fg-on);
}

.users-manage-modal__delete:hover {
  background: var(--status-error-fg);
  color: var(--brand-fg-on);
}

.users-manage-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  flex-shrink: 0;
  padding: 16px;
  border-top: 1px solid var(--neutral-border-1);
  background: var(--neutral-bg-1);
}

.users-manage-modal__footer .users-modal__btn-secondary,
.users-manage-modal__save {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 24px;
}

/* STAB-PO-35 ? Save always looks enabled (full primary), never muted/disabled chrome */
.users-manage-modal__save,
.users-manage-modal__save:disabled,
.users-manage-modal__save[disabled],
.users-manage-modal__save[aria-disabled="true"] {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-fg);
}

.users-manage-modal__save:hover,
.users-manage-modal__save:disabled:hover,
.users-manage-modal__save[disabled]:hover {
  background: var(--cta-bg-hover, #0b5c82);
  border-color: var(--cta-bg-hover, #0b5c82);
  color: var(--cta-fg);
}

.users-change-role-modal__panel {
  width: min(100%, 420px);
  padding: 24px;
  gap: 32px;
}

.users-change-role-modal__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.users-change-role-modal__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.users-change-role-modal__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.2px;
  color: var(--neutral-fg-1);
}

.users-change-role-modal__body {
  margin: 0;
  color: var(--neutral-fg-2);
  font-size: var(--text-base);
  line-height: 20px;
}

.users-change-role-modal__email-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--neutral-bg-2);
  border-radius: 8px;
  background: var(--neutral-bg-page);
  color: var(--neutral-fg-1);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.3px;
}

.users-change-role-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.users-change-role-modal__proceed {
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 20px;
}

.users-change-role-modal__proceed:hover {
  background: var(--cta-bg-hover);
  color: var(--cta-fg);
}

@media (max-width: 720px) {
  .users-manage-modal__role-cards,
  .users-manage-modal__module-cards {
    flex-direction: column;
  }

  .users-add-panel__actions,
  .users-add-modal__actions {
    width: 100%;
    margin-left: 0;
    justify-content: stretch;
  }

  .users-add-panel__actions .users-add-panel__btn-cancel,
  .users-add-panel__actions .users-add-panel__submit,
  .users-add-panel__actions .btn,
  .users-add-modal__actions .btn {
    flex: 1 1 auto;
  }
}
/* =============================================================================
 * OPERATOR-WF-01 Wave 2 ? fulfillment operator queue (UX-SPEC ?2)
 *
 * Net new: 5 blocks only ? .fulfillment-cards, .fulfillment-card, .fulfillment-chip,
 * .fulfillment-mail-class, .fulfillment-live. Everything else on that screen composes from
 * existing components (status-badge, .filter-bar, .queue-table, .btn--*, .psm-modal*,
 * payer-bulk-footer).
 *
 * Design tokens only ? no value below is a literal. The reference mock re-declared PSM tokens under
 * short inline names (--danger, --info, --surface) and hand-rolled .kpi/.mc/.chip; none of that
 * ships. Token map: UX-SPEC ?1.
 * ========================================================================== */

/* --- 1/5 .fulfillment-cards ? five-card strip (STAB-LP-08; funnel buckets still 4) ---------- */
/* .stat-grid is hardcoded 2-col, so it cannot carry the funnel. */
.fulfillment-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--fulfillment-cards-gap);
  padding: var(--fulfillment-cards-padding-top) var(--fulfillment-cards-padding-x)
    var(--fulfillment-cards-padding-bottom);
  margin-bottom: var(--space-6);
  align-items: start;
  box-sizing: border-box;
}

@media (max-width: 1400px) {
  .fulfillment-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (max-width: 1024px) {
  .fulfillment-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

@media (max-width: 640px) {
  .fulfillment-cards {
    grid-template-columns: var(--layout-fr);
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* --- 2/5 .fulfillment-card — funnel filter cards + Run Sheet report link ---- */
/* STAB-LP-09/10 borders/tokens kept. STAB-LP-15: hover + selected share screenshot lift
 * (--fq-card-lift / --fq-card-shadow). No LP-08 rail/arrow/value/big-scale. */
.fulfillment-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: var(--size-px) solid var(--color-border-strong);
  border-top: calc(var(--size-px) * 3) solid var(--fc-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
  color: var(--color-text);
  text-decoration: none;
  transition:
    transform var(--transition-fast) ease,
    box-shadow var(--transition-fast) ease,
    border-color var(--transition-fast) ease;
}

.fulfillment-card:hover,
.fulfillment-card[aria-current="page"] {
  transform: translateY(var(--fq-card-lift));
  box-shadow: var(--fq-card-shadow);
  text-decoration: none;
}

.fulfillment-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Active funnel bucket — TLRB accent + same elevation as hover (STAB-LP-15). */
.fulfillment-card[aria-current="page"] {
  border-color: var(--fc-accent);
}

@media (prefers-reduced-motion: reduce) {
  .fulfillment-card,
  .fulfillment-card:hover,
  .fulfillment-card[aria-current="page"] {
    transition: none;
    transform: none;
  }
}

.fulfillment-card--queue {
  --fc-accent: var(--color-upstream);
  --fc-accent-bg: var(--color-upstream-bg);
}

.fulfillment-card--run-sheet {
  --fc-accent: var(--color-success);
  --fc-accent-bg: var(--color-success-bg);
}

.fulfillment-card--printed {
  --fc-accent: var(--color-operator);
  --fc-accent-bg: var(--color-operator-bg);
}

.fulfillment-card--sent {
  --fc-accent: var(--color-posting);
  --fc-accent-bg: var(--color-posting-bg);
}

.fulfillment-card--returns {
  --fc-accent: var(--color-error);
  --fc-accent-bg: var(--color-error-bg);
}

.fulfillment-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--fc-accent-bg);
  border-bottom: var(--size-2px) solid var(--fc-accent);
}

.fulfillment-card__title {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--fc-accent);
}

.fulfillment-card__flow {
  margin-left: auto;
  display: flex;
  color: var(--fc-accent);
  opacity: 0.6;
}

.fulfillment-card__flow svg {
  width: var(--text-base);
  height: var(--text-base);
  display: block;
}

.fulfillment-card__body {
  display: flex;
  flex-direction: column;
}

.fulfillment-card__metric {
  padding: var(--space-3) var(--space-2);
  text-align: center;
  border-bottom: var(--size-px) solid
    color-mix(in srgb, var(--fc-accent) 22%, var(--color-surface));
}

.fulfillment-card__metric:last-child {
  border-bottom: none;
}

.fulfillment-card__value {
  font-size: var(--text-stat-value);
  font-weight: var(--font-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.fulfillment-card__metric--primary .fulfillment-card__value {
  color: var(--fc-accent);
}

.fulfillment-card__label {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  line-height: 1.35;
  color: var(--color-text-subtle);
}

/* --- 3/5 .fulfillment-chip ? workflow type -------------------------------- */
/* Filled, not outlined: the mock outline colours have no tokens, and filled matches every other
 * chip in PSM (.entity-badge, .approval-status-pill). */
.fulfillment-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-badge-y) var(--space-badge-x);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1.25;
  white-space: nowrap;
}

.fulfillment-chip__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.fulfillment-chip--patient {
  background: var(--color-upstream-bg);
  color: var(--color-upstream);
}

.fulfillment-chip--payer {
  background: var(--color-system-bg);
  color: var(--color-system);
}

/* --- 4/5 .fulfillment-mail-class ? payer rows only ------------------------ */
/* A badge variant, not a bordered pill: the mock border colours are untokenized. */
.fulfillment-mail-class {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-badge-y) var(--space-badge-x);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
}

.fulfillment-mail-class--red-hcfa {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.fulfillment-mail-class--black-hcfa {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.fulfillment-mail-class--wc {
  background: var(--color-upstream-bg);
  color: var(--color-upstream);
}

/* The only mail class that changes behaviour (its mail modal demands a number), so the only one
 * that earns an affordance ? the lock glyph lives in the fragment. */
.fulfillment-mail-class--tracking {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.fulfillment-mail-class--correspondence {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.fulfillment-mail-class__lock {
  width: 0.6875rem;
  height: 0.6875rem;
  flex-shrink: 0;
}

/* --- 5/5 .fulfillment-live ? poll indicator ------------------------------- */
.fulfillment-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface);
  border: var(--size-px) solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-subtle);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.fulfillment-live__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-success);
  animation: fulfillment-live-pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes fulfillment-live-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 45%, transparent);
  }

  70% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-success) 0%, transparent);
  }

  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 0%, transparent);
  }
}

/* Required, not optional ? a permanently pulsing dot is a vestibular trigger. */
@media (prefers-reduced-motion: reduce) {
  .fulfillment-live__dot {
    animation: none;
  }
}

/* Queue row helpers ? compose existing components; not counted as new blocks.
 * The status cell wraps so a returned chip can never truncate the badge beside it. */
.fulfillment-status-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.fulfillment-pieces {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-semibold);
}

.fulfillment-ref__sub {
  display: block;
  margin-top: 1px;
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--color-text-subtle);
}

/* --- OWF-STAB-07/08: stable queue columns (header ? body, all buckets) ----- */
/* STAB-07: table-layout:fixed + colgroup widths; select only under
 * .queue-table--with-select (STAB-05).
 * STAB-08: .table-wrap th/td { text-align:right } (05-components) is more
 * specific than .queue-table and wins ? headers sit on the right edge while
 * block .cluster actions stay left ? visible TYPE?ACTION drift. Reset here. */
.fulfillment-queue-table {
  table-layout: fixed;
  width: var(--full-width);
  min-width: 48rem;
}

.table-wrap .fulfillment-queue-table th,
.table-wrap .fulfillment-queue-table td {
  text-align: left;
  vertical-align: middle;
  padding: var(--space-3) var(--space-4);
  font-variant-numeric: normal;
}

.fulfillment-queue-table__col-select {
  width: 2.75rem;
}

.fulfillment-queue-table__col-type {
  width: 9%;
}

.fulfillment-queue-table__col-reference {
  width: 18%;
}

.fulfillment-queue-table__col-mail {
  width: 14%;
}

.fulfillment-queue-table__col-status {
  width: 14%;
}

.fulfillment-queue-table__col-pieces {
  width: 7%;
}

.fulfillment-queue-table__col-updated {
  width: 10%;
}

.fulfillment-queue-table__col-mailed {
  width: 14%;
}

.fulfillment-queue-table__col-action {
  width: 22%;
}

/* Sent (OWF-STAB-09): 6 cols, no select/action ? give Reference room from Action. */
.fulfillment-queue-table--sent {
  min-width: 40rem;
}

.fulfillment-queue-table--sent .fulfillment-queue-table__col-type {
  width: 10%;
}

.fulfillment-queue-table--sent .fulfillment-queue-table__col-reference {
  width: 22%;
}

.fulfillment-queue-table--sent .fulfillment-queue-table__col-mail {
  width: 16%;
}

.fulfillment-queue-table--sent .fulfillment-queue-table__col-status {
  width: 18%;
}

.fulfillment-queue-table--sent .fulfillment-queue-table__col-pieces {
  width: 10%;
}

.fulfillment-queue-table--sent .fulfillment-queue-table__col-mailed {
  width: 24%;
}

.queue-table--with-select.fulfillment-queue-table .fulfillment-queue-table__col-type {
  width: 8%;
}

.queue-table--with-select.fulfillment-queue-table .fulfillment-queue-table__col-reference {
  width: 16%;
}

.queue-table--with-select.fulfillment-queue-table .fulfillment-queue-table__col-action {
  width: 20%;
}

/* STAB-D-PSM-59: Returns colgroup ? no OWF-era counterpart, sized fresh for psm-table--compact. */
.fulfillment-returns-table {
  table-layout: fixed;
  width: var(--full-width);
  min-width: 40rem;
}

.fulfillment-returns-table__col-item {
  width: 18%;
}

.fulfillment-returns-table__col-type {
  width: 14%;
}

.fulfillment-returns-table__col-reason {
  width: 24%;
}

.fulfillment-returns-table__col-returned {
  width: 20%;
}

.fulfillment-returns-table__col-recorded {
  width: 24%;
}

.table-wrap .fulfillment-queue-table th.fulfillment-pieces,
.table-wrap .fulfillment-queue-table td.fulfillment-pieces {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fulfillment-queue-actions {
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-2);
}

.table-wrap .fulfillment-queue-table td.fulfillment-queue-table__col-action,
.table-wrap .fulfillment-batch-statements-table td.fulfillment-batch-statements-table__col-action {
  text-align: left;
  vertical-align: middle;
}

/* OWF-STAB-29: batch-detail statement table ? Statement / Tracking / Action alignment. */
.fulfillment-batch-statements-table {
  table-layout: fixed;
  width: var(--full-width);
  min-width: 36rem;
}

.table-wrap .fulfillment-batch-statements-table th,
.table-wrap .fulfillment-batch-statements-table td {
  text-align: left;
  vertical-align: middle;
  padding: var(--space-3) var(--space-4);
}

.fulfillment-batch-statements-table__col-statement {
  width: 28%;
}

.fulfillment-batch-statements-table__col-tracking {
  width: 36%;
}

.fulfillment-batch-statements-table--with-action .fulfillment-batch-statements-table__col-statement {
  width: 24%;
}

.fulfillment-batch-statements-table--with-action .fulfillment-batch-statements-table__col-tracking {
  width: 36%;
}

.fulfillment-batch-statements-table__col-action {
  width: 40%;
}

.table-wrap .fulfillment-queue-table .fulfillment-queue-select {
  width: 2.75rem;
  text-align: center;
  vertical-align: middle;
}

.fulfillment-queue-select input[type="checkbox"] {
  margin: 0;
  vertical-align: middle;
}

/* OWF-STAB-03/04: pointer on interactive checkboxes (all buckets; none disabled for UI) */
.fulfillment-queue-select__input,
input.fulfillment-row-select {
  cursor: pointer;
}

.fulfillment-queue-row--selected > td {
  background: var(--neutral-bg-selected);
}

/* --- OWF-STAB-02 / STAB-LP-13: queue filter row (Payer Mailings chrome) --- */
/* Figma search (empty placeholder) · type menu · datepickers · funnel reset · Start printing.
 * Colors/chrome from shared .filter-bar. HTMX via patched form.submit → requestSubmit. */
.fulfillment-queue-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  overflow: visible;
  position: relative;
  z-index: 5;
}

.fulfillment-queue-filters__form {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  overflow: visible;
}

.fulfillment-queue-filters__search {
  flex: 0 0 360px;
  width: 360px;
  max-width: 100%;
}

.fulfillment-queue-filters__divider {
  width: 1px;
  height: 40px;
  background: var(--neutral-border-1);
  flex-shrink: 0;
}

.fulfillment-queue-filters .psm-figma-search {
  min-height: 40px;
  height: 40px;
  gap: 8px;
  padding-right: 12px;
  border: 1px solid var(--neutral-border-1);
  border-radius: var(--radius-input);
  overflow: visible;
  position: relative;
}

.fulfillment-queue-filters .psm-figma-search:focus-within {
  border: 1px solid var(--input-focus-border);
  border-radius: var(--input-focus-radius);
  background: var(--input-focus-bg);
  box-shadow: var(--input-focus-shadow);
}

.fulfillment-queue-filters .psm-figma-search__input {
  padding: 8px 0;
}

.fulfillment-queue-filters .psm-figma-search__input:focus,
.fulfillment-queue-filters .psm-figma-search__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.fulfillment-queue-filters .psm-figma-search.has-value .psm-figma-search__input {
  font-size: var(--text-base);
  line-height: 20px;
}

.fulfillment-queue-filters .psm-figma-search__submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fulfillment-queue-filters .filter-reset-btn {
  flex: 0 0 auto;
  align-self: center;
}

.fulfillment-queue-filters__bulk {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
}

.fulfillment-queue-filters__print {
  width: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .fulfillment-queue-filters__search {
    flex: 1 1 100%;
    width: 100%;
  }

  .fulfillment-queue-filters__divider {
    display: none;
  }

  .fulfillment-queue-filters__bulk {
    flex: 1 1 auto;
    justify-content: stretch;
  }

  .fulfillment-queue-filters__print {
    width: 100%;
  }
}

/* --- Run sheet print (OWF-08, UX-SPEC ?6) --------------------------------- */
/* The operator works this on paper. Reuses statement-pdf.css's conventions ? @page letter, black on
 * white, no shadows ? rather than inventing a print stylesheet.
 *
 * Scoped via :has() to the run sheet only: hiding the shell for every screen's print output would
 * change pages this slice does not own. Where :has() is unsupported the sheet simply prints with
 * chrome, which is the pre-slice behaviour, not a break.
 * Screen rendering is untouched: everything here is inside @media print. */
@media print {
  @page {
    size: letter;
    margin: 0.5in;
  }

  body:has(.fulfillment-run-sheet) .app-shell > aside,
  body:has(.fulfillment-run-sheet) .app-column > header,
  body:has(.fulfillment-run-sheet) .filter-bar,
  body:has(.fulfillment-run-sheet) .fulfillment-live,
  body:has(.fulfillment-run-sheet) .page-back-link,
  body:has(.fulfillment-run-sheet) #psm-modal-root {
    display: none !important;
  }

  body:has(.fulfillment-run-sheet) .app-main {
    padding: 0;
  }

  body:has(.fulfillment-run-sheet) .table-wrap,
  body:has(.fulfillment-run-sheet) .card {
    box-shadow: none;
    border: none;
  }

  .fulfillment-run-sheet,
  .fulfillment-run-sheet .queue-table {
    color: var(--color-text);
    background: var(--color-surface);
  }

  .fulfillment-run-sheet .queue-table th {
    background: var(--color-surface);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-text);
  }

  .fulfillment-run-sheet .queue-table td {
    border-bottom: 1px solid var(--color-border);
  }

  /* Rows must not break across pages ? a half-printed work item is a mis-mailed piece. */
  .fulfillment-run-sheet .queue-table tr {
    break-inside: avoid;
  }
}