/*
  Stars.Companion.Web shared stylesheet.
  Sourced from specs/mockups/_shared/app-shell.html — class names + DOM
  primitives MUST stay verbatim per the Mockup Fidelity Contract.
  Mockup-only chrome (.viewport-controls, .sim-tablet, .sim-mobile) lives
  in dev-shim partials, not here.
*/

/* ============================================================
   DESIGN TOKENS — from specs/mockups/_shared/design-tokens.html
   ============================================================ */
:root {
  /* Typography */
  --font-body:    "Source Sans 3", "Gill Sans MT", "Gill Sans", Optima, "Segoe UI", Tahoma, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
  --font-mono:    "Cascadia Code", "Consolas", "SF Mono", "Fira Code", monospace;

  /* Typography scale — readable defaults. The previous geometric 1.25
     scale put --text-xs at 0.64rem (~10px) and --text-sm at 0.8rem
     (~13px), which renders form section labels and meta lines below the
     accessible-readable floor. Bumped to the de-facto standard
     12 / 14 / 16 / 20 / 24 / 30 / 36 scale. */
  --text-xs:   0.75rem;   /* 12px — uppercase section labels, meta */
  --text-sm:   0.875rem;  /* 14px — secondary text, table cells */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   1.25rem;
  --text-lg:   1.563rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Raw scale */
  --_navy-950: #0a1628;
  --_navy-900: #0f2040;
  --_navy-800: #162d57;
  --_navy-700: #1d3a6e;
  --_navy-600: #254785;
  --_navy-500: #2d549c;
  --_navy-400: #4a72b8;
  --_navy-300: #7096ce;
  --_navy-200: #a8bee4;
  --_navy-100: #d4e0f2;
  --_navy-50:  #eaf0f9;

  --_gold-700: #8a6200;
  --_gold-600: #a87800;
  --_gold-500: #c49200;
  --_gold-400: #e0ac10;
  --_gold-300: #f0c840;
  --_gold-200: #f8de80;
  --_gold-100: #fdf1be;
  --_gold-50:  #fef9e8;

  --_neutral-950: #0d0f12;
  --_neutral-900: #16191e;
  --_neutral-800: #252a32;
  --_neutral-700: #353c47;
  --_neutral-600: #4b5463;
  --_neutral-500: #64707f;
  --_neutral-400: #8796a5;
  --_neutral-300: #adbbc8;
  --_neutral-200: #cdd8e3;
  --_neutral-100: #e4ebf2;
  --_neutral-50:  #f3f6fa;
  --_neutral-0:   #ffffff;

  --_green-700: #1a5c35;
  --_green-600: #1f6e3e;
  --_green-500: #237a45;
  --_green-100: #d3eedd;
  --_green-50:  #eef8f2;

  --_amber-700: #7a3e00;
  --_amber-600: #974d00;
  --_amber-500: #b86000;
  --_amber-100: #fde8c3;
  --_amber-50:  #fff7eb;

  --_red-700:   #7d1a1a;
  --_red-600:   #991f1f;
  --_red-500:   #b52828;
  --_red-100:   #fdd8d8;
  --_red-50:    #fff0f0;

  --_blue-700:  #0d4477;
  --_blue-600:  #115290;
  --_blue-500:  #1565ab;
  --_blue-100:  #cce0f7;
  --_blue-50:   #eaf3fd;

  /* Semantic tokens */
  --color-surface-base:    var(--_neutral-0);
  --color-surface-subtle:  var(--_neutral-50);
  --color-surface-muted:   var(--_neutral-100);
  --color-surface-inset:   var(--_neutral-200);
  --color-surface-inverse: var(--_navy-900);

  --color-text-primary:    var(--_neutral-900);
  --color-text-secondary:  var(--_neutral-600);
  --color-text-tertiary:   var(--_neutral-400);
  --color-text-disabled:   var(--_neutral-300);
  --color-text-inverse:    var(--_neutral-0);
  --color-text-link:       var(--_navy-600);
  --color-text-link-hover: var(--_navy-800);

  --color-border:          var(--_neutral-200);
  --color-border-strong:   var(--_neutral-300);
  --color-border-focus:    var(--_navy-500);

  --color-primary:         var(--_navy-800);
  --color-primary-hover:   var(--_navy-900);
  --color-primary-active:  var(--_navy-950);
  --color-primary-subtle:  var(--_navy-50);
  --color-primary-text:    var(--_neutral-0);

  --color-accent:          var(--_gold-400);
  --color-accent-hover:    var(--_gold-500);
  --color-accent-subtle:   var(--_gold-50);
  --color-accent-text:     var(--_neutral-900);

  --color-success:         var(--_green-600);
  --color-success-bg:      var(--_green-50);
  --color-success-text:    var(--_green-700);

  --color-warning:         var(--_amber-500);
  --color-warning-bg:      var(--_amber-50);
  --color-warning-text:    var(--_amber-700);

  --color-error:           var(--_red-500);
  --color-error-hover:     var(--_red-600);
  --color-error-bg:        var(--_red-50);
  --color-error-text:      var(--_red-700);

  --color-info:            var(--_blue-500);
  --color-info-bg:         var(--_blue-50);
  --color-info-text:       var(--_blue-700);

  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  2rem;
  --space-8:  2.5rem;
  --space-9:  3rem;
  --space-10: 4rem;
  --space-11: 6rem;

  --space-page-x: var(--space-7);
  --space-page-y: var(--space-6);

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-full: 9999px;

  --shadow-xs:    0 1px 2px 0 rgba(10, 22, 40, 0.08);
  --shadow-sm:    0 1px 3px 0 rgba(10, 22, 40, 0.10), 0 1px 2px -1px rgba(10, 22, 40, 0.06);
  --shadow-md:    0 4px 6px -1px rgba(10, 22, 40, 0.10), 0 2px 4px -2px rgba(10, 22, 40, 0.06);
  --shadow-lg:    0 10px 15px -3px rgba(10, 22, 40, 0.12), 0 4px 6px -4px rgba(10, 22, 40, 0.08);
  --shadow-xl:    0 20px 25px -5px rgba(10, 22, 40, 0.14), 0 8px 10px -6px rgba(10, 22, 40, 0.06);
  --shadow-focus: 0 0 0 3px rgba(29, 58, 110, 0.35);

  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
  --ease-out:      cubic-bezier(0.25, 0, 0, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);

  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-base) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* Sidebar */
  --sidebar-bg:              var(--_navy-900);
  --sidebar-width:           248px;
  --sidebar-icon-width:      56px;
  --sidebar-text:            var(--_navy-200);
  --sidebar-text-active:     var(--_neutral-0);
  --sidebar-item-active-bg:  var(--_navy-700);
  --sidebar-item-hover-bg:   rgba(255, 255, 255, 0.06);

  /* Top bar */
  --topbar-bg:     var(--_navy-950);
  --topbar-height: 3.25rem;

  /* Inputs — these were referenced throughout stars.css and the mockups but
     never defined in the live stylesheet, which caused inputs (filter rows,
     date inputs, sort selects) to render with no border / no background. */
  --input-height-sm:   2rem;
  --input-height-md:   2.375rem;
  --input-height-lg:   2.75rem;
  --input-padding-x:   var(--space-3);
  --input-bg:          var(--color-surface-base);
  --input-border:      var(--color-border-strong);
  --input-radius:      var(--radius-md);
  --input-text:        var(--color-text-primary);
  --input-placeholder: var(--color-text-tertiary);
  --input-focus-border: var(--color-border-focus);

  /* Table */
  --table-header-bg:    var(--color-surface-subtle);
  --table-row-hover:    var(--color-primary-subtle);
  --table-border:       var(--color-border);
  --table-cell-padding: var(--space-3) var(--space-4);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-surface-subtle);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ============================================================
   SKIP-TO-MAIN LINK (a11y)
   ============================================================ */
.skip-link {
  position: absolute;
  top: -999px;
  left: var(--space-4);
  z-index: 9999;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-2); }

/* ============================================================
   APP FRAME
   ============================================================ */
.app-frame { display: flex; flex-direction: column; min-height: 100vh; }

/* ============================================================
   TOP BAR
   ============================================================ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--topbar-height);
  background: var(--topbar-bg);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  gap: var(--space-4);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.app-header__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  background: transparent; border: none;
  border-radius: var(--radius-md);
  color: var(--_neutral-300);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.app-header__hamburger:hover { background: rgba(255,255,255,0.08); }
.app-header__hamburger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.hamburger-icon { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.hamburger-icon span { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--transition-base), opacity var(--transition-base); }

.app-header__brand {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  letter-spacing: -0.01em;
  text-decoration: none;
  flex-shrink: 0;
}
.app-header__brand span { color: var(--color-accent); }

.app-header__divider { width: 1px; height: 1.25rem; background: rgba(255,255,255,0.12); flex-shrink: 0; }

.app-header__page-title {
  flex: 1;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--_navy-200);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

/* Environment badge */
.env-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.2rem var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--_amber-50); color: var(--_amber-700); border: 1px solid var(--_amber-100);
}
.env-badge--prod  { background: var(--_green-50);   color: var(--_green-700);   border-color: var(--_green-100); }
.env-badge--uat   { background: var(--_amber-50);   color: var(--_amber-700);   border-color: var(--_amber-100); }
.env-badge--dev   { background: var(--_blue-50);    color: var(--_blue-700);    border-color: var(--_blue-100); }
.env-badge--local { background: var(--_neutral-50); color: var(--_neutral-700); border-color: var(--_neutral-100); }
.env-badge__dot  { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }

/* Notifications */
.notif-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border: none; border-radius: var(--radius-md);
  background: transparent;
  color: var(--_navy-300);
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.notif-btn:hover { background: rgba(255,255,255,0.08); color: var(--_neutral-0); }
.notif-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.notif-badge {
  position: absolute; top: 3px; right: 3px;
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  border: 2px solid var(--topbar-bg);
}
.icon-bell { width: 18px; height: 18px; }

/* User chip */
.user-chip {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}
.user-chip:hover { background: rgba(255,255,255,0.10); }
.user-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.user-avatar {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--_neutral-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: var(--weight-semibold);
  color: var(--_neutral-0);
  flex-shrink: 0; user-select: none;
}
.user-name      { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--_neutral-0); white-space: nowrap; }
.user-role-tag  { font-size: 0.6rem; color: var(--_navy-300); font-weight: var(--weight-normal); }
.user-caret     { color: var(--_navy-400); width: 14px; height: 14px; transition: transform var(--transition-fast); }
.user-chip.open .user-caret { transform: rotate(180deg); }

.user-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 200px;
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 500;
  overflow: hidden;
  display: none;
}
.user-menu.open { display: block; }
.user-menu__header { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface-subtle); }
.user-menu__name   { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-text-primary); }
.user-menu__email  { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; }
.user-menu__items  { padding: var(--space-1) 0; }
.user-menu__item   {
  display: block; width: 100%; text-align: left;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: transparent; border: none;
  cursor: pointer; text-decoration: none;
  transition: background var(--transition-fast);
}
.user-menu__item:hover { background: var(--color-surface-subtle); }
.user-menu__item:focus-visible { outline: none; background: var(--color-primary-subtle); }
.user-menu__item--danger { color: var(--color-error); }
.user-menu__item--danger:hover { background: var(--color-error-bg); }
.user-menu__divider { height: 1px; background: var(--color-border); margin: var(--space-1) 0; }

/* ============================================================
   BODY LAYOUT
   ============================================================ */
.app-body { display: flex; flex: 1; overflow: hidden; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto; overflow-x: hidden;
  transition: width var(--transition-slow);
  position: relative;
  z-index: 100;
}
.sidebar.collapsed { width: var(--sidebar-icon-width); }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 150; }
.sidebar-overlay.open { display: block; }

.sidebar-context {
  padding: var(--space-3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  flex-shrink: 0;
}
.ctx-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; }
.ctx-label--admin     { color: var(--color-accent); }
.ctx-label--companion { color: var(--_navy-300); }
.ctx-badge { font-size: var(--text-xs); padding: 0.15rem var(--space-2); border-radius: var(--radius-full); background: rgba(255,255,255,0.07); color: var(--_navy-300); white-space: nowrap; }

.sidebar-collapse-btn {
  position: absolute; right: -12px; top: var(--space-7);
  width: 24px; height: 24px;
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  z-index: 110;
  transition: background var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.sidebar-collapse-btn:hover { background: var(--color-surface-subtle); }
.sidebar-collapse-btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.sidebar-nav { flex: 1; padding: var(--space-3) 0; overflow-y: auto; }
.sidebar__section-label {
  padding: var(--space-4) var(--space-5) var(--space-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--weight-semibold);
  color: var(--_navy-400);
  white-space: nowrap;
  overflow: hidden;
}

.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  color: var(--sidebar-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-left: 3px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap; overflow: hidden;
  position: relative;
}
.nav-item:hover { background: var(--sidebar-item-hover-bg); color: var(--sidebar-text-active); }
.nav-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.nav-item.active { background: var(--sidebar-item-active-bg); color: var(--sidebar-text-active); border-left-color: var(--color-accent); }
.nav-item__icon  { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.75; }
.nav-item.active .nav-item__icon { opacity: 1; }
.nav-item:hover .nav-item__icon  { opacity: 0.9; }
.nav-item__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-item__badge {
  font-size: var(--text-xs);
  background: var(--_navy-600); color: var(--_navy-100);
  border-radius: var(--radius-full);
  padding: 0.1rem var(--space-2);
  flex-shrink: 0; min-width: 1.4rem; text-align: center;
}
.nav-item.active .nav-item__badge { background: var(--color-accent); color: var(--_neutral-900); }

.sidebar__brand {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar__brand img {
  max-width: 100%;
  max-height: var(--sidebar-brand-max-height, 72px);
  width: auto; height: auto;
  display: block;
}
.sidebar.collapsed .sidebar__brand { display: none; }

.sidebar__footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--_navy-400);
  font-family: var(--font-mono);
}
.sidebar__brand + .sidebar__footer { border-top: none; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-width: 0; }

.page-header {
  background: var(--color-surface-base);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-page-x);
}

.breadcrumb {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}
.breadcrumb a { color: var(--color-text-link); text-decoration: none; transition: color var(--transition-fast); }
.breadcrumb a:hover { color: var(--color-text-link-hover); }
.breadcrumb a:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.breadcrumb__sep     { color: var(--color-text-tertiary); font-size: var(--text-xs); user-select: none; }
.breadcrumb__current { color: var(--color-text-primary); font-weight: var(--weight-medium); }

.page-header__row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4);
}
.page-header__title    { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-primary); line-height: var(--leading-snug); }
.page-header__subtitle { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-1); }
.page-header__actions  { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

/* ============================================================
   BUTTON LIBRARY — civic-ledger 4-tier system
   Authored 2026-05-13 (P2k consolidation). Single source of truth;
   do NOT add competing .btn rules elsewhere in this file.

   ┌──────────────────────┬──────────────────────┬───────────────────┐
   │ Tier                 │ Class                │ Hover motion      │
   ├──────────────────────┼──────────────────────┼───────────────────┤
   │ Primary commit       │ .btn--primary        │ -1px + navy lift  │
   │ Secondary (nav/cxl)  │ .btn--secondary      │ -1px + navy fill  │
   │ Destructive thinking │ .btn--danger-ghost   │ -1px + red fill   │
   │ Destructive commit   │ .btn--danger         │ -2px + red lift   │
   └──────────────────────┴──────────────────────┴───────────────────┘

   Modifiers: .btn--sm (compact), .btn--full (100% width),
              .btn--link (text-only inline link).

   Canonical convention is BEM (.btn--primary). Single-hyphen aliases
   (.btn-primary, .btn-secondary, .btn-danger, .btn-danger-ghost, .btn-sm,
   .btn-link) are DEPRECATED — preserved only so the gradual migration of
   /admin/groups, /admin/roles, /admin/grants pages doesn't visually regress.
   Remove the deprecated aliases at the end of P2k migration.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
.btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.btn:disabled,
.btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Wrapper for a disabled button that still needs to surface a tooltip.
   Because .btn:disabled sets pointer-events: none, the browser skips the
   native tooltip on the button itself; the wrapper receives the hover and
   the title attribute resolves there instead. */
.btn-disabled-wrap { display: inline-block; cursor: not-allowed; }
.btn[hidden] { display: none; }

/* Tier 1 — Primary commit. Solid navy, white text. The page's dominant CTA. */
.btn--primary,
.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}
.btn--primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(13, 68, 119, 0.30);
}
.btn--primary:active:not(:disabled),
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

/* Tier 2 — Secondary. White surface, navy text + border. Tertiary nav + cancel.
   Hover inverts to filled navy (the civic-ledger invert-on-hover pattern). */
.btn--secondary,
.btn-secondary {
  background: var(--color-surface-base);
  color: var(--color-primary);
  border: 1px solid rgba(13, 68, 119, 0.22);
}
.btn--secondary:hover:not(:disabled):not(.disabled),
.btn-secondary:hover:not(:disabled):not(.disabled) {
  background: var(--color-primary);
  color: var(--_neutral-0);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 68, 119, 0.22);
}
.btn--secondary:active:not(:disabled):not(.disabled),
.btn-secondary:active:not(:disabled):not(.disabled) {
  transform: translateY(0);
  box-shadow: none;
}

/* Tier 3 — Destructive thinking. White surface, red text + border. Opens a
   confirm modal; never commits destruction directly. Hover fills red with the
   same -1px lift vocabulary as secondary, in red. */
.btn--danger-ghost,
.btn-danger-ghost {
  background: transparent;
  color: var(--color-error-text);
  border-color: var(--color-error-border);
}
.btn--danger-ghost:hover:not(:disabled),
.btn-danger-ghost:hover:not(:disabled) {
  background: var(--color-error);
  color: var(--_neutral-0);
  border-color: var(--color-error);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(125, 26, 26, 0.28);
}
.btn--danger-ghost:active:not(:disabled),
.btn-danger-ghost:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

/* Tier 4 — Destructive commit. Solid red. Confirms destruction inside a modal.
   Bolder -2px lift + layered tinted shadow keys the affordance to "you are
   about to commit irreversible action" (WCAG 1.4.1 / 1.4.11 — state cue not
   carried by color alone). */
.btn--danger,
.btn-danger {
  background: var(--color-error);
  color: var(--_neutral-0);
  border-color: var(--color-error);
  box-shadow: 0 1px 2px rgba(125, 26, 26, 0.18);
}
.btn--danger:hover:not(:disabled),
.btn-danger:hover:not(:disabled) {
  background: var(--color-error-hover);
  border-color: var(--_red-700);
  box-shadow: 0 6px 14px rgba(125, 26, 26, 0.38), 0 2px 4px rgba(125, 26, 26, 0.22);
  transform: translateY(-2px);
}
.btn--danger:active:not(:disabled),
.btn-danger:active:not(:disabled) {
  box-shadow: 0 1px 2px rgba(125, 26, 26, 0.22);
  transform: translateY(0);
}

/* CDOWN — success button: the async-export "Download file" CTA on the job
   status page. Green commit-affordance matching the danger button's lift idiom
   (state cue not carried by color alone, WCAG 1.4.1). */
.btn--success,
.btn-success {
  background: var(--color-success);
  color: var(--_neutral-0);
  border-color: var(--color-success);
  box-shadow: 0 1px 2px rgba(26, 92, 53, 0.18);
}
.btn--success:hover:not(:disabled),
.btn-success:hover:not(:disabled) {
  background: var(--color-success-hover, var(--_green-700));
  border-color: var(--_green-700);
  color: var(--_neutral-0);
  box-shadow: 0 6px 14px rgba(26, 92, 53, 0.30), 0 2px 4px rgba(26, 92, 53, 0.18);
  transform: translateY(-2px);
}
.btn--success:active:not(:disabled),
.btn-success:active:not(:disabled) { box-shadow: 0 1px 2px rgba(26, 92, 53, 0.22); transform: translateY(0); }

/* Modifiers */
.btn--sm,
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
.btn--full { width: 100%; }

/* .btn--link — text-only inline link that behaves as a button (POST-on-click
   form actions, JS-triggered modals). Lives inside flowing copy, so no lift,
   no border, no padding. Underline on hover only. */
.btn--link,
.btn-link {
  background: transparent;
  border: 0;
  color: var(--color-text-link);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  padding: 0;
}
.btn--link:hover,
.btn-link:hover { text-decoration: underline; }

/* Reduced motion — hold position; color cues remain. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:hover,
  .btn:active { transform: none !important; }
}

.page-content { flex: 1; padding: var(--space-7) var(--space-page-x); }

.placeholder-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-7);
  text-align: center;
  box-shadow: var(--shadow-xs);
}
.placeholder-card__icon  { width: 48px; height: 48px; margin: 0 auto var(--space-4); color: var(--color-text-tertiary); }
.placeholder-card__title { font-family: var(--font-heading); font-size: var(--text-md); color: var(--color-text-primary); margin-bottom: var(--space-2); }
.placeholder-card__body  { font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 32rem; margin: 0 auto var(--space-5); line-height: var(--leading-relaxed); }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.stat-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xs);
}
.stat-card__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.stat-card__value { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text-primary); line-height: 1; }
.stat-card__delta { font-size: var(--text-xs); color: var(--color-success-text); margin-top: var(--space-1); }

.app-footer {
  background: var(--color-surface-base);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-page-x);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  flex-shrink: 0;
}
.footer-meta { font-size: var(--text-xs); color: var(--color-text-tertiary); font-family: var(--font-mono); }
.footer-meta span { color: var(--color-text-secondary); }

/* ============================================================
   FLASH / LIVE REGION
   ============================================================ */
#flash {
  position: fixed; bottom: var(--space-6); right: var(--space-6);
  z-index: 600;
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
}
.flash-msg {
  pointer-events: all;
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  max-width: 320px;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 960px) {
  .sidebar { width: var(--sidebar-icon-width); }
  .sidebar__section-label,
  .nav-item__label,
  .nav-item__badge,
  .ctx-label,
  .ctx-badge,
  .sidebar__brand,
  .sidebar__footer { display: none; }
  .nav-item { padding: var(--space-2); justify-content: center; }
  .sidebar-context { justify-content: center; padding: var(--space-3) var(--space-2); }
  .sidebar-collapse-btn { display: none; }
}

@media (max-width: 640px) {
  .app-header { padding: 0 var(--space-3); gap: var(--space-2); }
  .app-header__hamburger { display: flex; }
  .env-badge { display: none; }
  .user-name, .user-role-tag { display: none; }
  .user-chip { padding: var(--space-1); gap: var(--space-1); }
  .sidebar {
    position: fixed;
    left: calc(-1 * var(--sidebar-width));
    top: var(--topbar-height);
    height: calc(100vh - var(--topbar-height));
    width: var(--sidebar-width);
    z-index: 160;
    transition: left var(--transition-slow);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.drawer-open { left: 0; }
  .sidebar-overlay { display: none; }
  .sidebar-overlay.open { display: block; }
  .app-header__page-title { display: none; }
  .page-content { padding: var(--space-5) var(--space-4); }
  .page-header { padding: var(--space-4); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ============================================================
   DEV-ONLY CHROME — gated by Env.IsDevelopment() AND
   data-dev-chrome="visible" attribute on container
   (per frontend-quality.md)
   ============================================================ */
.dev-only { display: none !important; }
[data-dev-chrome="visible"] .dev-only,
[data-dev-chrome="visible"].dev-only { display: revert !important; }

/* ============================================================
   PHASE 3 — FEATURE COMPONENT STYLES
   Sourced verbatim from specs/mockups/admin/users.html (binding
   contract per conventions.md §UI Patterns). Class names are the
   contract; do not rename.
   ============================================================ */

/* Page heading */
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.page-heading h1 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}
.page-heading__meta {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}
.page-heading__actions { display: flex; gap: var(--space-3); }

/* Buttons — see canonical .btn library above (line 550). Block intentionally
   removed 2026-05-13 (P2k consolidation). */
.w-full { width: 100%; }

/* Avatars (honest placeholders — neutral gray, never brand) */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--_neutral-200);
  color: var(--_neutral-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--text-md); }
.avatar--xl { width: 64px; height: 64px; font-size: var(--text-lg); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.badge-error   { background: var(--color-error-bg);   color: var(--color-error-text);   border: 1px solid var(--color-error-border); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info-text);    border: 1px solid var(--color-info-border); }
.badge-neutral { background: var(--color-surface-muted); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.badge-dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Stat pill */
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border: 1px solid var(--color-border);
  background: var(--color-surface-base);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.stat-pill strong { color: var(--color-text-primary); font-weight: var(--weight-bold); }
.stat-pill--success { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }
.stat-pill--error   { background: var(--color-error-bg);   color: var(--color-error-text);   border-color: var(--color-error-border); }
.stat-pill--warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.stat-pill--info    { background: var(--color-info-bg);    color: var(--color-info-text);    border-color: var(--color-info-border); }

/* Table card */
.table-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  flex-wrap: wrap;
}
.search-bar { position: relative; flex: 1; min-width: 200px; }
.search-bar__icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-tertiary);
}
.search-bar input {
  width: 100%;
  height: var(--input-height-md);
  padding: 0 var(--space-4) 0 32px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-surface-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-bar input:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); outline: none; }
.filter-select {
  height: var(--input-height-md);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-surface-base);
  cursor: pointer;
}
.filter-select:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); outline: none; }
.filter-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.filter-toggle input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--_navy-600); }

/* Tables */
.table-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.table-card thead {
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
}
.table-card thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
/* P2e — sortable column headers. A persistent, muted up/down glyph marks EVERY
   sortable header so sortability is discoverable at rest (not only when active);
   it resolves to a bold gold single arrow on the active sort column. The glyph
   sits inside the header's <a.sort-link>, so clicking the icon sorts exactly
   like clicking the label. Wrapper-agnostic on purpose: applies in .table-card
   grids AND .mini-table grids (roles + the detail sub-grids), which the old
   .table-card-scoped rule silently skipped. */
thead th.sortable { cursor: pointer; white-space: nowrap; }
thead th.sortable .sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
thead th.sortable .sort-link:hover { color: var(--color-text-primary); }
thead th.sortable .sort-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
thead th.sortable .sort-link::after {
  content: '\2195';                                   /* ↕ = sortable (both directions) */
  font-family: "Segoe UI Symbol", "Segoe UI", system-ui, sans-serif;
  font-size: 0.8em;
  line-height: 1;
  color: var(--color-text-tertiary);
  opacity: 0.5;
  transition: opacity 0.12s ease, color 0.12s ease;
}
thead th.sortable .sort-link:hover::after { opacity: 0.9; }
thead th.sortable.sort-asc  .sort-link::after { content: '\2191'; color: var(--_gold-600); opacity: 1; font-weight: 700; } /* ↑ active asc */
thead th.sortable.sort-desc .sort-link::after { content: '\2193'; color: var(--_gold-600); opacity: 1; font-weight: 700; } /* ↓ active desc */
.table-card tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}
/* Only rows that actually have a click handler get the pointer affordance.
   Previously the global rule promised clickability on every row of every
   table-card consumer (history, endpoint-catalog, users, groups). Audit-log
   rows were removed from this allowlist 2026-05-15 when the row-level click
   was replaced by a per-row kebab "View details" affordance — the row itself
   is no longer clickable, so the pointer cursor would be misleading. */
.table-card tbody tr.clickable-row { cursor: pointer; }
.table-card tbody tr:last-child { border-bottom: none; }
.table-card tbody tr:hover { background: var(--color-surface-subtle); }
.table-card tbody tr.inactive { opacity: 0.65; }
.table-card tbody tr.inactive td { color: var(--color-text-secondary); }
.table-card td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  color: var(--color-text-primary);
}

/* User cell */
.user-cell { display: flex; align-items: center; gap: var(--space-3); }
.user-cell__text { display: flex; flex-direction: column; gap: 1px; }
.user-cell__name { font-weight: var(--weight-medium); color: var(--color-text-primary); }
.user-cell__email { font-size: var(--text-xs); color: var(--color-text-secondary); }
/* ADM-USR-REQ-007 — list→detail nav anchor on the name cell. Inherits
   the visual contract of the mockup `<div class="user-cell">` so pixel
   parity is preserved; the anchor is the keyboard/screen-reader entry. */
a.user-cell__link {
  text-decoration: none;
  color: inherit;
}
a.user-cell__link:hover .user-cell__name { color: var(--color-text-link); }
a.user-cell__link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Roles cell hovercard */
.roles-cell { position: relative; }
.roles-cell__trigger {
  cursor: pointer;
  color: var(--color-text-link);
  font-weight: var(--weight-medium);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.roles-hovercard {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  min-width: 180px;
  max-width: 240px;
}
.roles-hovercard__title { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.roles-hovercard ul { list-style: none; }
.roles-hovercard li { font-size: var(--text-sm); padding: 2px 0; color: var(--color-text-primary); }
.roles-cell:hover .roles-hovercard { display: block; }

/* Relative time */
.rel-time { position: relative; cursor: default; }
.rel-time__tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--_neutral-800);
  color: var(--_neutral-0);
  font-size: var(--text-xs);
  padding: 3px 8px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  pointer-events: none;
  z-index: 60;
}
.rel-time:hover .rel-time__tooltip { display: block; }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  background: var(--color-surface-subtle);
}
.pagination__info { color: var(--color-text-secondary); }
.pagination__controls { display: flex; align-items: center; gap: var(--space-2); }
/* P2e — standalone pager under a card grid (e.g. /endpoints): drop the
   table-card chrome (border-top + filled bar) and just float Prev/Next at the
   right with a little breathing room above. */
.card-pager {
  border-top: 0;
  background: transparent;
  padding: var(--space-3) 0 0;
  justify-content: flex-end;
  gap: var(--space-4);
}
/* `.pagination { display:flex }` outranks the UA `[hidden]` rule, so the
   pager's `hidden` attribute (set when there's ≤1 page) needs this higher-
   specificity reset to actually collapse it. */
.card-pager[hidden] { display: none; }
.pagination__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-base);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.pagination__btn:hover { background: var(--color-surface-muted); }
.pagination__btn.active { background: var(--color-primary); color: var(--_neutral-0); border-color: var(--color-primary); }
.pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination__per-page { color: var(--color-text-secondary); display: flex; align-items: center; gap: var(--space-2); }
.pagination__per-page select { font-family: var(--font-body); font-size: var(--text-xs); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 2px 6px; }

/* Empty + skeleton */
.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-7);
  color: var(--color-text-secondary);
}
.empty-state__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  background: var(--color-surface-muted);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-state h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-2); }
.empty-state p { font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 360px; margin: 0 auto; }
.skeleton-row td { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.skeleton { display: block; background: var(--color-surface-muted); border-radius: var(--radius-md); }
@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: skeleton-shimmer 1.4s ease-in-out infinite; }
  @keyframes skeleton-shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
}

/* Detail layout */
.detail-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-6);
  align-items: start;
}
/* Endpoint Detail variant: widen the left column so the 43-column District
   + 28-column School schema previews don't crush column names like
   schoolLevelDescription onto two lines. Other Detail pages
   (user-detail, etc.) keep the 300px default. */
.detail-layout--endpoint {
  grid-template-columns: 380px 1fr;
}
.identity-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.identity-card__header {
  background: var(--color-primary);
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.identity-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--_neutral-0);
  line-height: var(--leading-snug);
}
.identity-card__email {
  font-size: var(--text-sm);
  color: var(--_navy-200);
}
.identity-card__body { padding: var(--space-4); }
.identity-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.identity-field:last-child { border-bottom: none; }
.identity-field__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}
.identity-field__value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.identity-field__value code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--color-surface-muted);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}
.copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-tertiary);
  padding: 0 2px;
  font-size: 11px;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.copy-btn:hover { color: var(--color-text-link); }
.identity-card__actions {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface-subtle);
}

.detail-right { display: flex; flex-direction: column; gap: var(--space-5); }
.tab-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}
.tab-btn {
  padding: var(--space-3) var(--space-5);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.tab-btn:hover { color: var(--color-text-primary); }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--weight-semibold); }
.tab-panel { padding: var(--space-5); display: none; }
.tab-panel.active { display: block; }

.roles-list, .groups-list { list-style: none; margin-bottom: var(--space-4); }
.roles-list li, .groups-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.roles-list li:last-child, .groups-list li:last-child { border-bottom: none; }
.roles-list li strong, .groups-list li strong { font-weight: var(--weight-medium); }
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.permissions-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin-top: var(--space-4);
}
.permissions-summary__count { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-primary); }
.permissions-summary__label { font-size: var(--text-sm); color: var(--color-text-secondary); flex: 1; }

.audit-table { width: 100%; font-size: var(--text-xs); }
.audit-table th { padding: var(--space-2) var(--space-3); text-align: left; font-weight: var(--weight-semibold); color: var(--color-text-secondary); background: var(--color-surface-subtle); border-bottom: 1px solid var(--color-border); }
.audit-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); font-family: var(--font-mono); }
.audit-table tr:last-child td { border-bottom: none; }

.activity-panel {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.activity-panel__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface-subtle);
}
.activity-panel__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.activity-panel__range { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.activity-metric {
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.activity-metric:nth-child(3n) { border-right: none; }
.activity-metric:nth-last-child(-n+3) { border-bottom: none; }
.activity-metric__value { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text-primary); line-height: 1.2; }
.activity-metric__label { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; }
.activity-metric__sub { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: 4px; }

/* Sticky action bar */
.sticky-action-bar {
  position: sticky;
  bottom: 0;
  background: var(--color-surface-base);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-page-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  box-shadow: 0 -4px 12px rgba(10, 22, 40, 0.07);
}
.sticky-action-bar__left { display: flex; gap: var(--space-3); }
.sticky-action-bar__right { display: flex; gap: var(--space-3); }

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.55);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--color-surface-base);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  margin: var(--space-6);
}
.modal__header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal__title { font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-text-primary); }
.modal__close { background: none; border: none; cursor: pointer; color: var(--color-text-tertiary); font-size: 20px; line-height: 1; padding: 0; }
.modal__close:hover { color: var(--color-text-primary); }
.modal__body { padding: var(--space-5) var(--space-6); }
.modal__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  background: var(--color-surface-subtle);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.warning-callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.warning-callout__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-error);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
}
.warning-callout__text { font-size: var(--text-sm); color: var(--color-error-text); line-height: var(--leading-normal); }

.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); margin-bottom: var(--space-2); }
.form-group label span.required { color: var(--color-error); margin-left: 2px; }
.form-group input[type="text"] {
  width: 100%;
  height: var(--input-height-md);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group input[type="text"]:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); outline: none; }

/* Flash */
.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.flash--error   { background: var(--color-error-bg);   border: 1px solid var(--color-error-border);   color: var(--color-error-text); }
.flash--success { background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: var(--color-success-text); }
.flash--warning { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); color: var(--color-warning-text); }
.flash__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.flash__body { font-size: var(--text-sm); margin-top: 2px; }
.flash__trace { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-2); }

/* Utility */
.text-secondary { color: var(--color-text-secondary); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.font-mono { font-family: var(--font-mono); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.flex-1 { flex: 1; }

/* ============================================================
   CDOWN — Endpoint Browser (Companion download) page chrome
   Sourced from specs/mockups/companion-app/download.html. These
   rules were defined in the mockup but missing from the live
   stylesheet, which left .filter-bar / .page-heading__sub /
   .section-divider rendering with browser defaults.
   ============================================================ */

/* Editorial eyebrow above the page title — adds civic-data
   character without leaning on logos or color blocks. */
.page-heading__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}
.page-heading__eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--color-border-strong);
  vertical-align: middle;
  margin-right: var(--space-2);
  position: relative;
  top: -2px;
}

/* Page subtitle — sits one line under the h1. Referenced by
   Endpoints/Index.cshtml but previously undefined. */
.page-heading__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  max-width: 60ch;
  line-height: var(--leading-snug);
}

/* Live-data notice — replaces the inline-styled status pill in
   Index.cshtml. Thin band with a left accent stripe and dot
   indicator. Two semantic variants: live (success) / sample (warn). */
.live-data-notice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid;
  border-left-width: 3px;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.live-data-notice__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}
.live-data-notice__label {
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: var(--text-xs);
}
.live-data-notice__body {
  color: var(--color-text-secondary);
  flex: 1;
}
.live-data-notice--live {
  background: var(--color-success-bg);
  border-color: var(--_green-100);
  color: var(--color-success-text);
}
.live-data-notice--sample {
  background: var(--color-warning-bg);
  border-color: var(--_amber-100);
  color: var(--color-warning-text);
}
/* Production: live fetch failed and the dev-shim sample fallback is gated off.
   Distinct red treatment (not amber) so it reads as an outage, not "sample". */
.live-data-notice--unavailable {
  background: var(--_red-50);
  border-color: var(--_red-100);
  color: var(--_red-700);
}

/* Filter toolbar — porting mockup rules into the live sheet so
   inputs render with the token-system look instead of browser
   defaults. Scoped under .browser-page so admin pages keep their
   own .filter-toggle styling. */
.browser-page .filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-6);
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  flex-wrap: wrap;
}
.browser-page .filter-bar__search {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 380px;
}
.browser-page .filter-bar__search input {
  width: 100%;
  height: var(--input-height-md);
  padding: 0 var(--space-4);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--input-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.browser-page .filter-bar__search input::placeholder {
  color: var(--input-placeholder);
}
.browser-page .filter-bar__search input:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: var(--shadow-focus);
}
.browser-page .filter-bar__search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  pointer-events: none;
}
.browser-page .filter-bar select {
  height: var(--input-height-md);
  padding: 0 var(--space-7) 0 var(--space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--input-text);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-tertiary) 50%),
                    linear-gradient(135deg, var(--color-text-tertiary) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.browser-page .filter-bar select:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: var(--shadow-focus);
}
.browser-page .filter-bar .filter-toggle {
  padding: 0 var(--space-2);
}

/* Scoped page-heading override for the browser page — stack the
   eyebrow / h1 / subtitle vertically left-aligned instead of using
   the global flex space-between layout (which is for admin pages
   with action buttons on the right). */
.browser-page-heading {
  display: block;
  margin-bottom: var(--space-5);
}
.browser-page-heading h1 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

/* Section heading inside the browser — overrides the global
   uppercase chip with an editorial-style heading + count. */
.browser-page .section-label {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  color: var(--color-text-primary);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.browser-page .section-label .count {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-subtle);
}

/* Divider between Accessible and Restricted sections. */
.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* Endpoint card — version chip. Single source of truth for the
   per-version pill so single-version and multi-version cards render
   identically. Previously the markup used <span> for single-version
   and <a> for multi-version with duplicated inline styles, which
   picked up browser-default anchor styling and looked like different
   fonts. */
.endpoint-card__version {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  margin-right: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}
a.endpoint-card__version:hover {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
a.endpoint-card__version:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* ============================================================
   CDOCS — Embedded docs landing + per-version page
   Sourced from specs/mockups/companion-app/embedded-docs.html.
   ============================================================ */

.version-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 760px;
}
.version-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.version-card:hover:not(.version-card--sunset) {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}
.version-card--sunset {
  opacity: 0.65;
}
.version-card__ver {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  min-width: 48px;
}
.version-card--sunset .version-card__ver {
  color: var(--color-text-tertiary);
}
.version-card__info {
  flex: 1;
  min-width: 0;
}
.version-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  line-height: var(--leading-snug);
}
.version-card__meta {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.version-card__note {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  line-height: var(--leading-snug);
  max-width: 60ch;
}
.version-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Status badges — sit alongside the existing .badge family. The mockup
   uses --color-*-border tokens which don't exist in the live stylesheet,
   so we use the underlying raw scale tokens instead. */
.badge--active {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid var(--_green-100);
}
.badge--preview {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border: 1px solid var(--_blue-100);
}
.badge--deprecated {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1px solid var(--_amber-100);
}
.badge--sunset {
  background: var(--color-surface-muted);
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border-strong);
}
.badge--dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  margin-right: var(--space-1);
}

/* Alert banner (deprecation / preview / error notices). */
.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.alert-banner__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.alert-banner__body { flex: 1; }
.alert-banner__title {
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}
.alert-banner--warning {
  background: var(--color-warning-bg);
  border: 1px solid var(--_amber-100);
  color: var(--color-warning-text);
}
.alert-banner--error {
  background: var(--color-error-bg);
  border: 1px solid var(--_red-100);
  color: var(--color-error-text);
}
.alert-banner--info {
  background: var(--color-info-bg);
  border: 1px solid var(--_blue-100);
  color: var(--color-info-text);
}
.alert-banner a { color: inherit; font-weight: var(--weight-semibold); }

/* Scalar mount — host for the renderer that Scalar swaps in at runtime.
   Scalar replaces the inner <script id="api-reference"> with its UI; the
   placeholder text is visible until that swap commits. The mount itself
   provides a card-like frame so the renderer sits cohesively inside the
   page-content area. */
.scalar-mount {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  min-height: 400px;
  overflow: hidden;
}
.scalar-mount__placeholder {
  padding: var(--space-7);
  text-align: center;
}

/* ============================================================
   ADM-CAT — endpoint catalog page (specs/mockups/admin/endpoint-catalog.html)
   ============================================================ */
.filter-rail {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
/* Section-label styling — scoped to `.filter-group__label` only so the
   uppercase/letter-spacing treatment does not leak onto the option labels
   wrapping `.filter-check` / `.filter-radio` inputs (option labels stay
   mixed case per the mockup: "Download", "Grant", "sdsa", etc.). */
.filter-rail .filter-group__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.filter-rail__group { display: flex; flex-direction: column; gap: 4px; }
.detail-meta-card, .panel-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.drift-banner {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.flash-error {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
}

/* ============================================================
   CDOCS — embedded docs (specs/mockups/companion-app/embedded-docs.html)
   ============================================================ */
.version-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.version-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.version-card--sunset { opacity: 0.6; border-color: var(--color-warning-border); }
.scalar-shell {
  display: grid;
  grid-template-columns: 240px 1fr 280px;
  gap: var(--space-4);
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.scalar-nav, .scalar-snippets, .scalar-detail { padding: var(--space-4); }
.scalar-nav { border-right: 1px solid var(--color-border); background: var(--color-surface-subtle); }
.scalar-snippets { border-left: 1px solid var(--color-border); background: var(--color-surface-subtle); }
.alert-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.alert-banner--warning { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); color: var(--color-warning-text); }

/* Section visibility (for state variants per `?state=` query).
   Scoped to <section data-view="..."> so the rule does not leak onto
   any future element that happens to carry a data-view attribute
   (Phase 0 shell drift root cause: a global selector competing with
   the mockup's `[data-view]` rules). The Phase 3 mockup-bound pages
   render `<section data-view="...">` per the binding HTML. */
section[data-view] { display: none; }
section[data-view].active { display: block; }
section[data-view].visible { display: block; }

/* ============================================================
   ADM-GRANT — admin/grants.html (Phase 5)
   Class names + structure copied verbatim from the binding mockup.
   ============================================================ */

.page-top { padding: var(--space-page-y) var(--space-page-x) 0; }
.page-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-1) 0;
}
.page-title-sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5) 0;
}
.content-area { padding: 0 var(--space-page-x) var(--space-9); }

.overview-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-5);
  align-items: start;
}
.stat-card__number {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
  margin-top: var(--space-2);
}
.stat-card__sub { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-2); }
.stat-card__links {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.stat-card__links a { font-size: var(--text-sm); color: var(--color-text-link); text-decoration: none; }
.stat-card__links a:hover { text-decoration: underline; }

.activity-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.activity-card__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.activity-card__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-text-primary); }
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-item {
  display: flex; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}
.activity-item:last-child { border-bottom: 0; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.activity-dot.grant  { background: var(--color-success); }
.activity-dot.revoke { background: var(--color-error); }
.activity-action { font-size: var(--text-sm); color: var(--color-text-primary); }
.activity-meta   { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: 2px; }

.user-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4);
  align-items: center;
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.user-card__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--_navy-100); color: var(--_navy-800);
  font-weight: var(--weight-bold); font-size: var(--text-md);
  display: flex; align-items: center; justify-content: center;
}
.user-card__name  { font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--color-text-primary); }
.user-card__email { font-size: var(--text-sm); color: var(--color-text-secondary); }
.user-card__meta  { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: 2px; }

.grant-layout {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-5); align-items: start;
}
.panel-card__header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--space-3); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.panel-card__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-text-primary); }
.panel-card__body { padding: 0; }

.role-checkbox-list { list-style: none; padding: 0; margin: 0; }
.role-checkbox-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.role-checkbox-item:last-child { border-bottom: 0; }
.role-checkbox-item input[type="checkbox"] { margin-top: 4px; }
.role-info .role-name { font-weight: var(--weight-medium); color: var(--color-text-primary); font-size: var(--text-sm); }
.role-info .role-desc { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; }
.role-checkbox-item.via-group .role-name { font-style: italic; color: var(--_amber-700); }
.via-group-tag { font-size: var(--text-xs); color: var(--_amber-700); font-style: italic; }
.badge-system {
  background: var(--color-info-bg); color: var(--color-info-text); border: 1px solid var(--color-info-border);
  font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-full);
  text-transform: uppercase; font-weight: var(--weight-semibold); letter-spacing: 0.04em;
}

.permission-list { list-style: none; padding: 0; margin: 0; }
.permission-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.permission-list li:last-child { border-bottom: 0; }
.perm-key    { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-primary); }
.perm-source { font-size: var(--text-xs); color: var(--color-text-tertiary); }

.save-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding-top: var(--space-4); margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
/* .btn-link / .btn--link — see canonical .btn library above (line 550). */

/* P2j 2026-05-14 — per-user grants page polish.
   - Dirty-state counter on the Save button (set by JS when checkbox state
     differs from page-load).
   - "X of 7 assigned" pill on the panel header (civic-ledger gold left-bar).
   - info-banner copy explaining the via-group convention (matches mockup
     style `.info-banner` block; promoted to stars.css so it stays in sync
     with future design-system tweaks). */
.grant-layout .panel-card__header .panel-card__count {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  padding-left: var(--space-3);
  border-left: 3px solid var(--_gold-400);
  line-height: 1.2;
}
.grant-layout .save-bar .save-counter {
  font-size: var(--text-xs);
  color: var(--_amber-700);
  font-weight: var(--weight-medium);
  margin-left: var(--space-2);
}
.grant-layout .save-bar .save-counter[hidden] { display: none; }
.info-banner {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-info-text);
}
.info-banner > span:first-child { font-size: var(--text-lg); line-height: 1; padding-top: 2px; }
.info-banner p { margin: 0; }
.info-banner a { color: inherit; text-decoration: underline; }

.role-identity-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4);
  align-items: center;
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.role-icon {
  font-size: var(--text-2xl); width: 64px; height: 64px;
  background: var(--_navy-50); border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
}
.role-identity-card__name  { font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--color-text-primary); }
.role-identity-card__desc  { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-1); }
.role-identity-card__meta  { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-2); }
.role-identity-card__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

.role-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }

.mini-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.mini-table th, .mini-table td {
  text-align: left; padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.mini-table thead th {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-secondary); background: var(--color-surface-subtle);
  font-weight: var(--weight-semibold);
}
.mini-table tbody tr:hover { background: var(--color-surface-subtle); }
.avatar-sm {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--_navy-100); color: var(--_navy-800);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  display: flex; align-items: center; justify-content: center;
}

.pagination-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs); color: var(--color-text-secondary);
}
.pagination-controls { display: flex; gap: var(--space-1); }
.pagination-controls button {
  background: transparent; border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-xs); padding: 4px 10px;
  border-radius: var(--radius-md); cursor: pointer;
}
.pagination-controls button.active { background: var(--color-primary); color: var(--color-primary-text); border-color: var(--color-primary); }
.pagination-controls button:disabled { color: var(--color-text-disabled); cursor: not-allowed; }

.role-list-card, .role-table-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.role-list-card__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.role-list-card__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-text-primary); }

.form-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  max-width: 640px;
}
.form-field { margin-bottom: var(--space-4); }
.form-field__label {
  display: block;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
.form-field__input,
.form-field__textarea {
  width: 100%;
  padding: var(--input-padding-x);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  color: var(--input-text);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  box-sizing: border-box;
}
.form-field__input:focus, .form-field__textarea:focus {
  outline: 0; border-color: var(--input-focus-border);
  box-shadow: var(--shadow-focus);
}
.form-field__textarea { min-height: 100px; resize: vertical; }
.form-field__hint   { display: block; font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-1); }
.form-field__static {
  display: block;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.form-actions {
  display: flex; gap: var(--space-2); align-items: center;
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.form-actions__spacer { flex: 1; }

/* ============================================================
   ADM-AUDIT — admin/audit-log-viewer.html (Phase 5)
   ============================================================ */
.page-header { padding: var(--space-page-y) var(--space-page-x) var(--space-4); }
.page-header__title {
  font-family: var(--font-heading); font-size: var(--text-xl);
  font-weight: var(--weight-bold); margin: 0; color: var(--color-text-primary);
}
.page-header__meta { font-size: var(--text-sm); color: var(--color-text-secondary); margin: var(--space-1) 0 0; }

.audit-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-5);
  padding: 0 var(--space-page-x) var(--space-9);
  align-items: start;
}
/* Grid children must declare min-width: 0 (or be sized via minmax(0, …) in
   the template) so a wide table inside `.results-area` can shrink and let
   `.table-wrapper { overflow-x: auto }` actually scroll. Without this, the
   1fr column grows to the table's intrinsic width and pushes the right
   columns off-screen with no scroll affordance. */
.audit-layout > * { min-width: 0; }

/* The audit-log mockup renders the filter rail as a vertical sidebar.
   The global `.filter-rail` rule (1783) sets `display: flex; flex-wrap:
   wrap` for the endpoint-catalog page's horizontal filter strip — that
   layout conflicts here (it turns each `.filter-group` into a flex item
   that wraps into 2 columns and shrinks `.filter-rail__header` to its
   content width so `justify-content: space-between` has no room). Reset
   to block layout inside the audit layout. */
.audit-layout .filter-rail {
  display: block;
  align-items: initial;
  flex-wrap: initial;
  gap: 0;
  padding: var(--space-5);
}
.audit-layout .filter-rail__header { width: 100%; gap: var(--space-3); }

/* The two-input date row uses a 2-column grid so each input takes exactly
   half the rail's content width. Without this, both inputs (each
   `width: 100%`) demand the full parent width and the second one
   overflows the rail's right edge. */
.audit-layout .filter-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.audit-layout .filter-date-row .filter-input { min-width: 0; width: 100%; }

.filter-rail__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.filter-rail__title  { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.filter-rail__clear  { background: transparent; border: 0; color: var(--color-text-link); font-size: var(--text-xs); cursor: pointer; }
.filter-group        { margin-bottom: var(--space-4); }
.filter-group__label {
  display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
.filter-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: var(--space-2);
}
.filter-preset-btn {
  background: var(--color-surface-base); border: 1px solid var(--color-border);
  color: var(--color-text-secondary); font-size: 11px;
  padding: 3px 4px; border-radius: var(--radius-md); cursor: pointer;
  white-space: nowrap; text-align: center;
  letter-spacing: 0;
}
.filter-preset-btn.active { background: var(--color-primary); color: var(--color-primary-text); border-color: var(--color-primary); }
.filter-date-row { display: flex; gap: var(--space-2); }
.filter-input {
  width: 100%; padding: 6px 10px;
  border: 1px solid var(--input-border); border-radius: var(--input-radius);
  background: var(--input-bg); font-size: var(--text-sm);
  color: var(--input-text); box-sizing: border-box;
}
.filter-checks, .filter-radio-group { display: flex; flex-direction: column; gap: 4px; }
.filter-check, .filter-radio { font-size: var(--text-sm); display: flex; align-items: center; gap: 6px; color: var(--color-text-primary); }
.filter-traceid-hint { font-size: var(--text-xs); color: var(--color-text-tertiary); margin: 4px 0 0; }
.filter-traceid-hint code { background: var(--color-surface-subtle); padding: 1px 4px; border-radius: 3px; font-family: var(--font-mono); }
.filter-apply-btn {
  width: 100%; background: var(--color-primary); color: var(--color-primary-text);
  border: 1px solid var(--color-primary); font-size: var(--text-sm);
  font-weight: var(--weight-medium); padding: 8px 12px;
  border-radius: var(--radius-md); cursor: pointer;
}

.results-area { display: flex; flex-direction: column; gap: var(--space-3); }
.results-action-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.results-count { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }
.results-right { display: flex; gap: var(--space-2); align-items: center; }
.pagination__size {
  padding: 6px 10px; border: 1px solid var(--input-border);
  border-radius: var(--input-radius); background: var(--input-bg); font-size: var(--text-sm);
}

.ts-primary  { font-size: var(--text-xs); color: var(--color-text-primary); }
.ts-relative { font-size: var(--text-xs); color: var(--color-text-tertiary); }

.principal-cell { display: flex; align-items: center; gap: var(--space-2); }
.principal-cell .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--_navy-100); color: var(--_navy-800);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  display: flex; align-items: center; justify-content: center;
}
.principal-cell .avatar.vendor { background: var(--color-info-bg); color: var(--color-info-text); }
.principal-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.principal-sub  { font-size: var(--text-xs); color: var(--color-text-tertiary); font-family: var(--font-mono); }

/* Audience pill — mockup renders the audience name verbatim ("sdsa",
   "leader-services", "admin"). The earlier `text-transform: uppercase`
   rule fought the mockup label vocabulary; removed so the rendered
   text matches the data values one-to-one. */
.aud-badge {
  display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  padding: 2px 8px; border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}
.aud-badge.sdsa   { background: var(--color-info-bg); color: var(--color-info-text); border: 1px solid var(--color-info-border); }
.aud-badge.leader { background: var(--_amber-50); color: var(--_amber-700); border: 1px solid var(--_amber-100); }
.aud-badge.admin  { background: var(--color-primary-subtle); color: var(--color-primary); border: 1px solid var(--_navy-100); }

.target-link { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-link); text-decoration: none; }
.target-link:hover { text-decoration: underline; }

.row-count-chip {
  font-size: var(--text-xs); color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  padding: 2px 8px; border-radius: var(--radius-md);
}

.traceid {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-link); text-decoration: none; cursor: pointer;
}
.traceid:hover { text-decoration: underline; }
/* Plain TraceId rendering used when App Insights is not configured —
   reads as a value, not a link. Title attr still surfaces the full id. */
.traceid--plain { color: var(--color-text-secondary); cursor: default; }
.traceid--plain:hover { text-decoration: none; }
.traceid-copy-hint { display: block; font-size: 10px; color: var(--color-text-tertiary); }

/* SC-25 break-glass row styling per ADM-AUDIT-REQ-005 / AC-007. */
.row-break-glass { background: var(--_red-50); border-left: 4px solid var(--color-error); }
.row-vendor      { background: rgba(13, 68, 119, 0.03); }

.badge-break-glass {
  background: var(--color-error-bg); color: var(--color-error-text);
  border: 1px solid var(--color-error-border);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  padding: 2px 8px; border-radius: var(--radius-full);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.badge-warning {
  background: var(--color-warning-bg); color: var(--color-warning-text);
  border: 1px solid var(--color-warning-border);
  font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-full);
}
.badge-download {
  background: var(--color-info-bg); color: var(--color-info-text);
  border: 1px solid var(--color-info-border);
  font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-full);
}

.detail-overlay {
  position: fixed; top: 64px; right: 0; bottom: 0;
  width: min(640px, 90vw);
  background: var(--color-surface-base);
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 24px rgba(0,0,0,.08);
  display: flex; flex-direction: column;
  z-index: 900;
}
.detail-sheet { display: flex; flex-direction: column; height: 100%; }
.detail-sheet__header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.detail-sheet__title { font-weight: var(--weight-semibold); font-size: var(--text-md); }
.detail-sheet__close {
  background: transparent; border: 0; font-size: 24px; cursor: pointer;
  color: var(--color-text-tertiary); text-decoration: none; line-height: 1;
}
.detail-sheet__body { padding: var(--space-4) var(--space-5); overflow-y: auto; flex: 1; }
.detail-section { margin-bottom: var(--space-5); }
.detail-section__label {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}
.detail-row {
  display: grid; grid-template-columns: 140px 1fr; gap: var(--space-2);
  padding: var(--space-1) 0; font-size: var(--text-sm);
}
.detail-row__key { color: var(--color-text-tertiary); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); }

/* Modal detail body — mockup-faithful (history.html §detail-meta-grid).
   Used by Download Details modal (CHIST-REQ-006). */
.text-mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.detail-endpoint {
  display: inline-block;
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  word-break: break-all;
}
.detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  margin: 0;
}
.detail-meta-item { margin: 0; }
.detail-meta-item dt {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: 2px;
  font-weight: var(--weight-medium);
}
.detail-meta-item dd {
  margin: 0;
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}
.trace-id {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-secondary); word-break: break-all;
  background: var(--color-surface-muted);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
@media (max-width: 560px) {
  .detail-meta-grid { grid-template-columns: 1fr; }
}

.breadcrumb__url {
  margin-left: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* ============================================================
   ADM-GRP — admin/groups.html (Phase 7)
   Class names + structure copied verbatim from the binding mockup
   (specs/mockups/admin/groups.html). Pixel-parity contract per SC-33.
   ============================================================ */

/* Group identity card (detail page header). */
.group-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}
.group-card__header { display: flex; align-items: flex-start; gap: var(--space-4); }
.group-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.group-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.group-card__desc { font-size: var(--text-sm); color: var(--color-text-secondary); }
.group-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-2);
  display: flex; gap: var(--space-4);
}
.group-card__actions {
  margin-left: auto; display: flex; gap: var(--space-3); flex-shrink: 0;
}

/* Two-panel detail grid (members + roles side-by-side per SC-33 break:
   "collapsing two-panel detail to tabbed view"). */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

/* Role checkbox row variants used on the group-detail page. The bare
   .role-checkbox-list / .role-checkbox-item primitives are shared with
   ADM-GRANT; the .role-name-key / .role-desc-sm / .changed-tag classes
   appear only in the ADM-GRP mockup. */
.role-name-key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}
.role-desc-sm { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.role-checkbox-item.changed {
  background: var(--_amber-50);
  margin: 0 calc(-1 * var(--space-5));
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  border-left: 3px solid var(--_amber-500);
}
.changed-tag {
  font-size: var(--text-xs);
  background: var(--_amber-100);
  color: var(--_amber-700);
  border: 1px solid var(--_amber-100);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  white-space: nowrap;
}
.changed-tag--revoke {
  background: var(--_red-50);
  color: var(--_red-700);
  border-color: var(--_red-100);
}

/* Audit footer (group detail recent-activity block). */
.audit-footer {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.audit-footer__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}
.audit-footer__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); padding: 0; margin: 0; }
.audit-footer__list li {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  display: flex; gap: var(--space-3);
}
.audit-footer__list .op { font-weight: var(--weight-semibold); min-width: 100px; }

/* Add-member dialog (modal-add-member view). */
.dialog-overlay {
  position: relative;
  background: rgba(10, 22, 40, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  min-height: 480px;
}
.dialog-box {
  background: var(--color-surface-base);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  width: 520px; max-width: 95vw;
  overflow: hidden;
}
.dialog-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
}
.dialog-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.dialog-close {
  background: none; border: none; font-size: 20px;
  cursor: pointer; color: var(--color-text-tertiary);
  padding: 0; line-height: 1;
}
.dialog-close:hover { color: var(--color-text-primary); }
.dialog-body { padding: var(--space-5) var(--space-6); }
.dialog-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: flex-end; gap: var(--space-3);
  background: var(--color-surface-subtle);
}

.typeahead-wrap { position: relative; margin-bottom: var(--space-4); }
.typeahead-wrap input {
  width: 100%;
  height: var(--input-height-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  font: var(--text-sm)/1 var(--font-body);
  color: var(--input-text);
}
.typeahead-wrap input:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: var(--shadow-focus);
}
.typeahead-dropdown {
  position: absolute; left: 0; right: 0; top: 100%;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 10;
  max-height: 16rem;
  overflow-y: auto;
}
.typeahead-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.typeahead-item + .typeahead-item { border-top: 1px solid var(--color-border); }
.typeahead-item:hover,
.typeahead-item--active {
  background: var(--_gold-50);
  border-left-color: var(--_gold-500);
}
.typeahead-item .name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.typeahead-item .email { font-size: var(--text-xs); color: var(--color-text-tertiary); }

.recently-added-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}
.recent-member-list {
  list-style: none;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: 0; margin: 0;
}
.recent-member-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.recent-member-name { font-size: var(--text-sm); font-weight: var(--weight-medium); flex: 1; }
.recent-member-when { font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* Filter rail variant used by ADM-GRP list view (matches the mockup's
   own .filter-rail block, distinct from the ADM-AUDIT side-rail above). */
.filter-rail--inline {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-page-x);
  background: var(--color-surface-base);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.filter-search { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.filter-search input {
  width: 100%;
  height: var(--input-height-md);
  padding: 0 var(--space-3) 0 var(--space-8);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  font: var(--text-sm)/1 var(--font-body);
  color: var(--input-text);
}
.filter-search input:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: var(--shadow-focus);
}
.filter-search-icon {
  position: absolute; left: var(--space-3); top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  pointer-events: none;
  font-size: 14px;
}

/* Page-top row used by the Groups list (title left, action right). */
.page-top-row { display: flex; align-items: flex-end; gap: var(--space-4); }
.page-top-actions { margin-left: auto; display: flex; gap: var(--space-3); align-items: flex-end; }

/* Kebab button for per-row actions menu (Groups list Actions column). */
.kebab-btn {
  background: none; border: none;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  color: var(--color-text-tertiary);
  border-radius: var(--radius-md);
  font-size: 18px; line-height: 1;
}
.kebab-btn:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }

/* Pending-changes notice banner (roles-delta view). */
.pending-changes-banner {
  padding: var(--space-3) var(--space-5);
  background: var(--_amber-50);
  border: 1px solid var(--_amber-100);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--_amber-700);
}

/* ============================================================
   CDOWN — Endpoint detail + download form
   Ported from specs/mockups/companion-app/download.html to give the
   live page the same visual contract the customer reviewed.
   ============================================================ */

/* Schema panel — collapsible read-only schema preview. */
.schema-panel {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.schema-panel__toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  cursor: pointer; background: var(--color-surface-subtle);
  border: none; width: 100%; text-align: left;
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  transition: background var(--transition-fast);
}
.schema-panel__toggle:hover { background: var(--color-surface-muted); }
.schema-panel__toggle:focus { outline: none; box-shadow: inset var(--shadow-focus); }
.schema-panel__chevron { color: var(--color-text-tertiary); transition: transform var(--transition-base); flex-shrink: 0; }
.schema-panel__chevron.collapsed { transform: rotate(-90deg); }
.schema-panel__body { overflow: hidden; transition: max-height var(--transition-slow); }
.schema-panel__body.collapsed { max-height: 0; }
.schema-panel__body.expanded  { max-height: 600px; overflow-y: auto; }

/* Schema table sizes columns so Description WRAPS instead of triggering
   horizontal scroll. Without table-layout:fixed the browser picks its own
   column widths and Description (longest content) gets squeezed. */
.schema-panel .schema-table { table-layout: fixed; width: 100%; }
.schema-panel .schema-table col.col-name,
.schema-panel .schema-table td:nth-child(1) { width: 38%; word-break: break-word; }
.schema-panel .schema-table th:nth-child(1) { width: 38%; }
.schema-panel .schema-table td:nth-child(2) { width: 18%; }
.schema-panel .schema-table th:nth-child(2) { width: 18%; }
.schema-panel .schema-table td:nth-child(3) { width: 44%; word-break: normal; overflow-wrap: anywhere; white-space: normal; }
.schema-panel .schema-table th:nth-child(3) { width: 44%; }
/* Header row stays single-line even when a column's body cells wrap.
   word-break:break-word on the name column was wrapping "COLUMN" itself
   when the panel was narrow; nowrap keeps the header crisp. */
.schema-panel .schema-table thead th { white-space: nowrap; }

.schema-table { width: 100%; font-size: var(--text-sm); border-collapse: collapse; }
.schema-table th {
  background: var(--table-header-bg);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-4); text-align: left;
  border-bottom: 1px solid var(--table-border);
}
.schema-table td {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary); vertical-align: top;
}
.schema-table td:first-child { font-family: var(--font-mono); font-size: var(--text-xs); }
.type-chip {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--color-primary-subtle); color: var(--_navy-700);
  border: 1px solid var(--_navy-100); border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
}

/* Form sections — grouping containers inside the download form. */
.form-section {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.form-section__label,
.form-section__title {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.form-section__caption {
  font-size: var(--text-xs); color: var(--color-text-tertiary);
  margin-top: calc(-1 * var(--space-2));
  line-height: var(--leading-relaxed);
}
.form-inline-row { display: flex; gap: var(--space-3); }
.form-inline-row > * { flex: 1; }

/* Collapsible form-section — used on School Year/Date Range, Sort Rows,
   Filters. Lets the user collapse the middle of the form so the Download
   button is reachable without scrolling. Collapsed header shows the
   current selection as a suffix ("2024-2025", "lastName asc", "2 active"). */
.form-section--collapsible { gap: 0; }
.form-section--collapsible .form-section__toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: var(--space-2) 0;
  background: transparent; border: 0; cursor: pointer;
  font: inherit; color: var(--color-text-primary); text-align: left;
}
.form-section--collapsible .form-section__toggle:focus {
  outline: 2px solid var(--color-border-focus); outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.form-section__label-row {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  flex: 1; min-width: 0;
}
.form-section__label-suffix {
  font-size: var(--text-xs); font-weight: var(--weight-normal);
  text-transform: none; letter-spacing: 0;
  color: var(--color-text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.form-section__chevron {
  color: var(--color-text-tertiary); flex-shrink: 0;
  transition: transform var(--transition-base);
}
.form-section--collapsible.collapsed .form-section__chevron {
  transform: rotate(-90deg);
}
.form-section__body {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-top: var(--space-3);
}
.form-section--collapsible.collapsed .form-section__body {
  display: none;
}

/* Date-range presets — quick-pick school-year buttons. */
.date-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.date-preset-btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-base);
  font: inherit; font-size: var(--text-xs);
  color: var(--color-text-secondary); cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.date-preset-btn:hover { background: var(--color-primary-subtle); border-color: var(--_navy-200); }
.date-preset-btn.active {
  background: var(--color-primary-subtle);
  border-color: var(--_navy-400);
  color: var(--_navy-700);
  font-weight: var(--weight-medium);
}

/* Output format radio group. */
.radio-group { display: flex; gap: var(--space-4); }
.radio-option {
  display: flex; align-items: center; gap: var(--space-2);
  cursor: pointer; font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.radio-option input[type="radio"] { cursor: pointer; accent-color: var(--color-primary); }

/* Column-picker panel — checkboxes + drag + reorder. */
.col-picker-panel {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.col-picker-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer; user-select: none;
}
.col-picker-panel__header:hover { background: var(--color-surface-muted); }
.col-picker-panel__header-left {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.col-picker-count {
  font-size: var(--text-xs); font-weight: var(--weight-normal);
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}
.col-picker-panel__chevron { color: var(--color-text-tertiary); transition: transform var(--transition-base); flex-shrink: 0; }
.col-picker-panel__chevron.collapsed { transform: rotate(-90deg); }
.col-picker-list { list-style: none; height: 280px; max-height: 80vh; overflow-y: auto; padding: 0; margin: 0; resize: vertical; }
.col-picker-list.hidden { display: none; }
.col-picker-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}
.col-picker-row:last-child { border-bottom: none; }
.col-picker-row:hover { background: var(--color-surface-subtle); }
.col-picker-row.dragging { opacity: 0.45; background: var(--color-primary-subtle); }
.col-picker-row.drag-over { border-top: 2px solid var(--color-primary); }
.col-picker-row__name,
.col-name {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-primary); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.col-picker-row.unchecked .col-picker-row__name,
.col-picker-row.unchecked .col-name { color: var(--color-text-tertiary); }
.col-drag-handle {
  cursor: grab; color: var(--color-text-tertiary);
  font-size: 13px; line-height: 1; padding: var(--space-1);
  letter-spacing: -1px; flex-shrink: 0; touch-action: none;
}
.col-drag-handle:active { cursor: grabbing; }
.col-drag-handle:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; border-radius: var(--radius-sm); }
.col-picker-checkbox {
  cursor: pointer; width: 15px; height: 15px;
  flex-shrink: 0; accent-color: var(--color-primary);
}
.col-reorder-btns { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.col-reorder-btn {
  background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 20px; height: 20px; min-width: 20px; min-height: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-text-secondary);
  font-size: 9px; padding: 0; line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.col-reorder-btn:hover { background: var(--color-primary-subtle); color: var(--_navy-700); border-color: var(--_navy-200); }
.col-reorder-btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.col-reorder-btn:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 600px) {
  .col-reorder-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 14px; }
  .col-drag-handle { padding: var(--space-3); }
}
.col-picker-actions {
  display: flex; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}
/* CDOWN-REQ-005 — empty-fallback hint surfaced when count = 0. The
   strike-through visual on every row otherwise misleads about the
   actual server-side behavior (empty form = all columns). */
.col-picker-empty-hint {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--_amber-50, #fff4e5);
  border: 1px solid var(--_amber-100, #f0b46b);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--_amber-700, #5a3a00);
  line-height: var(--leading-relaxed);
}
.col-picker-empty-hint[hidden] { display: none; }

/* Row-sort builder. */
.sort-builder { display: flex; flex-direction: column; gap: var(--space-2); }
.sort-row { display: flex; align-items: center; gap: var(--space-2); }
.sort-row select {
  flex: 1; height: var(--input-height-sm);
  padding: 0 var(--space-2);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  font: inherit; font-size: var(--text-xs);
  color: var(--input-text);
}
.sort-row select:focus { outline: none; border-color: var(--input-focus-border); box-shadow: var(--shadow-focus); }
.sort-dir-btn {
  display: flex; align-items: center; gap: 2px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  font: inherit; font-size: var(--text-xs);
  color: var(--color-text-primary);
  cursor: pointer; white-space: nowrap;
  height: var(--input-height-sm);
  transition: background var(--transition-fast);
}
.sort-dir-btn:hover { background: var(--color-primary-subtle); border-color: var(--_navy-200); }
.sort-dir-btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.sort-remove-btn {
  background: none; border: 1px solid transparent;
  color: var(--color-text-tertiary);
  cursor: pointer; font-size: 15px; line-height: 1;
  padding: var(--space-1); border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.sort-remove-btn:hover { color: var(--color-error); background: var(--color-error-bg); border-color: var(--color-error-border); }
.sort-remove-btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.sort-empty-note { font-size: var(--text-xs); color: var(--color-text-tertiary); font-style: italic; }

/* Form-card chrome — header, body, footer + estimate panel. */
.form-card__header {
  background: var(--color-primary);
  color: var(--color-primary-text);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex-shrink: 0;
}
.form-card__header h3 {
  font-family: var(--font-heading); font-size: var(--text-base);
  font-weight: var(--weight-normal); margin: 0;
}
.form-card__header p { font-size: var(--text-xs); color: var(--_navy-200); margin-top: var(--space-1); }
.form-card__body {
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column;
  gap: var(--space-4); overflow-y: auto; flex: 1;
}
.form-card__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  flex-shrink: 0;
}
.form-card__estimate { display: flex; gap: var(--space-5); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.form-card__estimate-item { display: flex; flex-direction: column; gap: var(--space-1); }
.form-card__estimate-item .label {
  font-size: var(--text-xs); color: var(--color-text-tertiary);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.form-card__estimate-item .value { font-weight: var(--weight-semibold); color: var(--color-text-primary); }

/* Misc utilities used by the download form. .btn--full lives in the canonical
   button library above (line 550). */
hr.divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }
.text-link {
  font-size: var(--text-sm); color: var(--color-text-link);
  cursor: pointer; background: none; border: none; padding: 0; font: inherit;
}
.text-link:hover { color: var(--color-text-link-hover); text-decoration: underline; }
.text-link:disabled { opacity: 0.5; cursor: default; text-decoration: none; }

/* ============================================================
   Endpoint card grid + card (download page).
   Mirrors specs/mockups/companion-app/download.html.
   ============================================================ */
.endpoint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.endpoint-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.endpoint-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--_navy-200);
}
.endpoint-card.restricted {
  background: var(--color-surface-subtle);
  border-color: var(--color-border);
  opacity: 0.72;
}
.endpoint-card.restricted:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border-strong);
}
.endpoint-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
/* Title block must be allowed to shrink so a long route can't push the
   audience badge outside the card (min-width:0 defeats the flex-item default
   min-width:auto). */
.endpoint-card__header > div {
  min-width: 0;
  flex: 1 1 auto;
}
/* Badge stays put and intact regardless of title length. */
.endpoint-card__header > .badge {
  flex: 0 0 auto;
  white-space: nowrap;
}
.endpoint-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}
.endpoint-card__path {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-top: var(--space-1);
  display: inline-block;
  /* A long route (e.g. a param-heavy path) wraps inside the card instead of
     overflowing and shoving the badge out. */
  max-width: 100%;
  overflow-wrap: anywhere;
}
.endpoint-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}
.endpoint-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.endpoint-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.endpoint-card__versions {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}
/* Leader Services restricted cards: app-to-app vendor feed, no user-OBO path,
   so we show an accurate non-actionable notice instead of a Request-access CTA. */
.endpoint-card__vendor-note {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-text-tertiary);
  text-align: right;
  max-width: 60%;
  line-height: 1.3;
}

/* Filter inputs in the download form — bare-default browser look is
   "ugly" per smoke feedback. Apply the form-field input styling so they
   match the rest of the form. Wrapping rows align label + input in a
   compact vertical stack. */
.filter-input-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.filter-input-row label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}
.filter-input-row input[type="text"],
.filter-input-row input[type="number"],
.filter-input-row input[type="date"],
.filter-input-row select {
  width: 100%;
  height: var(--input-height-md);
  padding: 0 var(--input-padding-x);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--input-text);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filter-input-row input:focus,
.filter-input-row select:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: var(--shadow-focus);
}
/* The date inputs inside the form-inline-row for "Custom..." preset
   get the same treatment so they don't render as bare browser controls. */
.form-inline-row input[type="date"] {
  width: 100%;
  height: var(--input-height-md);
  padding: 0 var(--input-padding-x);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--input-text);
  box-sizing: border-box;
}
.form-inline-row input[type="date"]:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: var(--shadow-focus);
}

/* (Description-column wrap is now handled via table-layout:fixed
   column-percentage sizing on .schema-panel .schema-table above. The
   prior max-width:240px override caused a horizontal scrollbar on the
   schema panel — removed.) */


/* ============================================================
   CHIST — Download history: filter row + kebab menu + pagination
   Mockup: specs/mockups/companion-app/history.html
   ============================================================ */

/* Filter row: horizontal flex layout in a card. Scoped to .filter-row
   so the page-specific override of .filter-group (which has a default
   block layout with margin-bottom elsewhere in this file) only applies
   inside this container. */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.filter-row .filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: 0;
  min-width: 140px;
}
.filter-row .filter-group--wide { flex: 1 1 220px; min-width: 220px; }
.filter-row .filter-label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}
.filter-row__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-left: auto;
}

/* Kebab menu — absolute-positioned dropdown anchored to the kebab button. */
.actions-cell { position: relative; text-align: right; width: 44px; }
/* Kebab menu uses `position: fixed` so it can escape `.table-card`'s
   `overflow: hidden` (which is required to clip the table against the
   card's rounded corners). JS sets `top`/`left` on open relative to the
   trigger button's bounding rect. */
.kebab-menu {
  position: fixed; left: 0; top: 0;
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 180px; z-index: 1000;
  display: none;
  overflow: hidden;
}
.kebab-menu.open { display: block; }
.kebab-menu button,
.kebab-menu a {
  display: block; width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none; border: none;
  text-align: left;
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--color-text-primary); cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.kebab-menu button:hover,
.kebab-menu a:hover { background: var(--color-surface-subtle); }
.kebab-menu .disabled-action,
.kebab-menu button.disabled-action { color: var(--color-text-disabled); cursor: not-allowed; }
.kebab-menu .disabled-action:hover { background: none; }
.kebab-menu hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-1) 0; }

/* History pagination footer (uses .pagination-bar wrapper; the inner BEM
   class names — .pagination__info / __controls / __btn / __per-page —
   already have rules earlier in this file). */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.pagination__ellipsis {
  padding: 0 var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}
/* Numbered-page links need the same chrome as the buttons. */
a.pagination__btn { text-decoration: none; display: inline-flex; align-items: center; }

/* Break-glass row marker (CHIST-REQ-007). */
.status--break-glass {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-2);
  padding: 2px 8px;
  border-radius: var(--radius-md);
  background: var(--_amber-50, #fef3c7);
  color: var(--_amber-800, #92400e);
  border: 1px solid var(--_amber-100, #fde68a);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   CHIST — Status / Mode / Format badges
   Lifted from specs/mockups/companion-app/history.html <style>.
   The bare class names referenced by Razor views were never
   ported during the initial regen (OES Flow finding 4 in
   .docs/oes-flow-builder-verifier-findings-2026-05-12.md).
   ============================================================ */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.status-badge__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status--succeeded {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid var(--color-success-border, var(--_green-100));
}
.status--failed {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border: 1px solid var(--color-error-border, var(--_red-100));
}
.status--partial {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning-border, var(--_amber-100));
}
.status--expired {
  background: var(--color-surface-muted);
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border);
}
.status--queued {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning-border, var(--_amber-100));
}
.status--running {
  background: var(--_blue-50);
  color: var(--_blue-700);
  border: 1px solid var(--_blue-100);
}

.mode-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mode--async { background: var(--_navy-100); color: var(--_navy-700); }
.mode--sync  { background: var(--_neutral-100); color: var(--_neutral-700); }

.format-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-bold);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}
.format--csv  { background: var(--_green-100); color: var(--_green-700); }
.format--json { background: var(--_blue-100);  color: var(--_blue-700); }

/* Two-line timestamp stack in the Requested column. */
.ts-cell { white-space: nowrap; }
.ts-relative { display: block; font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.ts-absolute { display: block; font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* Endpoint link in the table. */
.endpoint-link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-primary, var(--_navy-700));
  text-decoration: none;
}
.endpoint-link:hover { text-decoration: underline; }

/* Expired row tint. */
tr.row--expired td { color: var(--color-text-secondary); background: var(--color-surface-subtle); }

/* Page header row — title on the left, action button(s) anchored right.
   Mirrors the mockup's flex layout (specs/mockups/companion-app/history.html
   §`.page-header-row`). Without this rule the button sits below the subtitle
   as raw inline-flex text rather than a properly anchored button. */
.page-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

/* Table wrapper — `.table-card` sets `overflow: hidden` to clip the table
   against its rounded corners. Without an inner wrapper that owns horizontal
   scroll, narrow viewports lose the rightmost columns (Actions) entirely.
   This rule makes the table horizontally scrollable inside the card. */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Compact filter row at narrow widths so the form doesn't push the table
   off-screen on mobile/tablet. */
@media (max-width: 768px) {
  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-row .filter-group,
  .filter-row .filter-group--wide { flex: 1 1 100%; min-width: 0; }
  .filter-row__actions { justify-content: flex-end; }
  .pagination-bar { flex-direction: column; gap: var(--space-3); align-items: stretch; }
  .pagination__controls { justify-content: center; flex-wrap: wrap; }
  .pagination__info,
  .pagination__per-page { text-align: center; justify-content: center; }
}

/* ============================================================
   ADM-AUDIT-REQ-001..014 — Audit Log page additions (Session 4d, 2026-05-13).
   ============================================================ */

/* Clickable row affordance — pointer + subtle hover lift. Tabindex makes
   it keyboard-reachable; focus ring matches the design-token focus color. */
/* Audit rows are no longer whole-row clickable (the per-row kebab handles
   detail open). Keep the hover-tint for visual scanning, but drop the
   cursor:pointer / focus-outline that signaled clickability. */
.audit-row { transition: background-color var(--transition-fast); }
.audit-row:hover { background-color: var(--color-surface-subtle); }
.audit-row.row-vendor:hover { background-color: rgba(13, 68, 119, 0.06); }
.audit-row.row-break-glass:hover { background-color: var(--_red-100); }

/* "Clear all" turned into an anchor (link to /admin/audit with no query)
   so a hard click resets state without JS. Keep the visual treatment
   identical to the prior button. */
a.filter-rail__clear { color: var(--color-text-link); text-decoration: none; font-size: var(--text-xs); }
a.filter-rail__clear:hover { text-decoration: underline; }

/* Pagination ellipsis sentinel emitted by the numbered-pagination
   build loop when current ± 1 is non-adjacent to first/last. */
.pagination__ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; padding: 0 6px; color: var(--color-text-tertiary);
  font-size: var(--text-sm); user-select: none;
}

/* Sort hint right of the "N rows — filtered: …" line. */
.results-sort-hint { margin-left: var(--space-2); color: var(--color-text-tertiary); font-size: var(--text-xs); }

/* Detail-modal header badge cluster (Mode / Outcome / Break Glass). */
.audit-modal-badges { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); flex-wrap: wrap; }

/* The HTML `hidden` attribute on a `.badge` element was being ignored
   because `.badge { display: inline-flex }` (class selector, specificity
   0-1-0) wins over `[hidden] { display: none }` (attribute selector,
   same specificity) when the class rule is defined later in the cascade.
   Explicitly restore the hidden semantics for badges so the JS-driven
   show/hide on `#audit-modal-bg` actually takes effect.

   Same bug affects `.btn`, `.btn--primary`, `.btn--secondary` (all use
   `display: inline-flex`); the audit-modal cross-pivot user button stays
   visible with stale label content when `userLink.hidden = true` is set
   for non-user principals (vendor, break-glass). Force [hidden] to win
   for both element families. */
.badge[hidden],
.btn[hidden] { display: none; }

/* Detail-modal cross-pivot button row. */
.detail-pivots { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.detail-pivots .btn { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }
/* `.disabled` on an anchor-styled button — visually inert, click-through
   prevented, and tooltip explains why. Used in the audit-log Detail modal
   for cross-pivot buttons that need config to function (App Insights deep-
   link without a workspace resource ID, etc.). */
a.btn.disabled, a.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* Filter inputs accept name= attrs from the form wrapper; pad them so the
   placeholder text doesn't crowd the border on mobile. */
.filter-input { width: 100%; }

/* ------------------------------------------------------------
   Procedural-receipt pattern — used by detail-vendor, accepted-202,
   modal-export, and the four job-state harness views. Authoritative,
   civic, archival feel that matches the compliance-viewer context.
   ------------------------------------------------------------ */

.receipt-card {
  position: relative;
  max-width: 640px;
  margin: var(--space-7) auto;
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(10, 22, 40, 0.10), 0 2px 6px rgba(10, 22, 40, 0.06);
  overflow: hidden;
}
.receipt-card--accepted { border-top-color: var(--color-info); }
.receipt-card--sealed   { border-top-color: var(--color-accent); }
.receipt-card--job      { border-top-color: var(--color-primary); }

.receipt-card__header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.receipt-card__eyebrow {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-tertiary); font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}
.receipt-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--leading-snug);
}
.receipt-card__close {
  background: transparent; border: 0; font-size: 24px; cursor: pointer;
  color: var(--color-text-tertiary); text-decoration: none; line-height: 1;
  padding: 0 var(--space-1);
}
.receipt-card__close:hover { color: var(--color-text-primary); }

.receipt-card__body { padding: var(--space-5) var(--space-6); }
.receipt-card__body p { margin: 0 0 var(--space-4); color: var(--color-text-secondary); }

.receipt-card__hint {
  margin-top: var(--space-4) !important;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-style: italic;
}

.receipt-card__footer {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

.receipt-section { margin-bottom: var(--space-5); }
.receipt-section:last-child { margin-bottom: 0; }
.receipt-section__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-2);
}

/* Definition-list grid used to render meta rows in the receipt body.
   Uses `display: grid` per row so dt/dd lay out side-by-side without
   the markup contortions of `dl > dt + dd` flex hacks. */
.receipt-dl { margin: 0; padding: 0; }
.receipt-dl > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-surface-muted);
}
.receipt-dl > div:last-child { border-bottom: 0; }
.receipt-dl dt {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--weight-semibold);
  align-self: center;
}
.receipt-dl dd { margin: 0; color: var(--color-text-primary); }
.receipt-failure { color: var(--color-error-text); }

/* "202 Accepted" stamp — top-right corner of the receipt card,
   evoking a date-stamp on a paper form. */
.receipt-stamp {
  position: absolute; top: var(--space-4); right: var(--space-5);
  transform: rotate(-8deg);
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-info-text);
  border-radius: var(--radius-sm);
  color: var(--color-info-text);
  font-family: var(--font-heading);
  line-height: 1;
  opacity: 0.65;
  pointer-events: none;
}
.receipt-stamp__code { font-size: 22px; font-weight: var(--weight-bold); letter-spacing: 0.05em; }
.receipt-stamp__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
  margin-top: 2px; font-weight: var(--weight-semibold);
}

/* "SEALED" seal on the succeeded state — circular gold disc evoking
   an official wax seal. */
.receipt-seal {
  position: absolute; top: var(--space-5); right: var(--space-5);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--_gold-300), var(--_gold-500) 70%);
  border: 2px solid var(--_gold-600);
  box-shadow: 0 4px 10px rgba(168, 120, 0, 0.25), inset 0 -2px 4px rgba(138, 98, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-12deg);
  pointer-events: none;
}
.receipt-seal__inner {
  font-family: var(--font-heading);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  color: var(--_gold-700);
  text-transform: uppercase;
}

/* Status line — pulse dot + badge + optional inline progress %. */
.receipt-status-line {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2); flex-wrap: wrap;
}
.receipt-progress {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-warning-text);
}

.status-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.status-pulse--queued   { background: var(--color-info); }
.status-pulse--running  { background: var(--color-warning); animation: status-pulse-anim 1.4s ease-in-out infinite; }
.status-pulse--succeeded { background: var(--color-success); }
.status-pulse--failed    { background: var(--color-error); }
@keyframes status-pulse-anim {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 96, 0, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(184, 96, 0, 0); }
}

/* Indeterminate-flavored progress bar (the running state pretends to
   know progress; in production this hooks to the worker's row counter). */
.receipt-progressbar {
  margin: var(--space-3) 0 0;
  height: 6px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.receipt-progressbar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-warning), var(--_gold-400));
  border-radius: var(--radius-full);
  transition: width var(--transition-fast);
}

/* ------------------------------------------------------------
   Job pipeline 4-phase stepper — shared between modal-export,
   accepted-202, and the four job-state views. Done phases get a
   check; the active phase gets a filled circle; pending phases
   get a subtle outline. Connecting lines render via ::after.
   ------------------------------------------------------------ */
.job-stepper {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 640px;
  margin: 0 auto var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.job-stepper__step {
  display: flex; align-items: center; gap: var(--space-2);
  flex: 1; position: relative;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}
.job-stepper__step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin: 0 var(--space-2);
}
.job-stepper__num {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-bold);
  background: var(--color-surface-base);
  color: var(--color-text-tertiary);
  border: 1.5px solid var(--color-border-strong);
  flex-shrink: 0;
}
.job-stepper__label {
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.job-stepper__step--done .job-stepper__num {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
}
.job-stepper__step--done { color: var(--color-success-text); }
.job-stepper__step--done:not(:last-child)::after { background: var(--color-success); }
.job-stepper__step--active .job-stepper__num {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}
.job-stepper__step--active { color: var(--color-primary); font-weight: var(--weight-semibold); }

/* ------------------------------------------------------------
   Audit Log responsive — stack filter rail above results on
   narrow viewports. Filter rail collapses to a top horizontal
   group; the 8-column table scrolls inside its `.table-wrapper`.
   Action bar / pagination rows stack.
   ------------------------------------------------------------ */
@media (max-width: 960px) {
  .audit-layout { grid-template-columns: 1fr; }
  .filter-rail { max-height: none; }
  .results-action-bar { flex-direction: column; align-items: stretch; }
  .results-right { justify-content: space-between; }
  .pagination { flex-direction: column; gap: var(--space-3); align-items: stretch; }
  .pagination__controls { justify-content: center; flex-wrap: wrap; }
  .pagination__info { text-align: center; }
}
@media (max-width: 640px) {
  .receipt-card { margin: var(--space-4) var(--space-2); }
  .receipt-card__header,
  .receipt-card__body,
  .receipt-card__footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .receipt-dl > div { grid-template-columns: 1fr; gap: var(--space-1); }
  .receipt-dl dt { letter-spacing: 0.02em; }
  .receipt-stamp,
  .receipt-seal { transform: scale(0.85) rotate(-8deg); top: var(--space-3); right: var(--space-3); }
  .job-stepper { padding: var(--space-2); }
  .job-stepper__label { display: none; }
  .job-stepper__step { gap: var(--space-1); }
  .ts-primary { white-space: nowrap; }
  .principal-cell { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .audit-modal-badges { gap: var(--space-1); }
  .detail-pivots .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Audit Row Detail modal — "civic ledger" design pass.
   Scoped to #audit-details-modal so other modals (.modal-backdrop
   / .modal) keep their default treatment. Aesthetic: navy authority
   band, gold seal rule, serif display title, ledger hairline rows,
   monospaced data values inset on muted ground, staggered section
   reveal on open. Matches the procedural-receipt vocabulary already
   used by the audit-log harness states (.receipt-card, .receipt-seal).
   ============================================================ */

#audit-details-modal { padding: var(--space-5); }

#audit-details-modal .modal {
  max-width: 720px;
  padding: 0;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(13, 68, 119, 0.18);
  box-shadow:
    0 24px 60px rgba(10, 22, 40, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: audit-modal-rise 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Navy / gold authority band across the very top edge */
#audit-details-modal .modal::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-primary) 72%,
    var(--color-accent) 72%,
    var(--color-accent) 100%
  );
  z-index: 2;
}

/* Decorative italic watermark behind the body — "AUDIT · STARS" */
#audit-details-modal .modal::after {
  content: "AUDIT · STARS";
  position: absolute;
  right: 28px;
  bottom: 96px;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 52px;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}

#audit-details-modal .modal__header {
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: none;
  position: relative;
  background: linear-gradient(180deg, rgba(13, 68, 119, 0.03) 0%, transparent 100%);
  z-index: 1;
}

/* Gold seal rule under the header */
#audit-details-modal .modal__header::after {
  content: "";
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    var(--color-accent) 56px,
    rgba(13, 68, 119, 0.12) 56px,
    rgba(13, 68, 119, 0.12) 100%
  );
}

/* Eyebrow above the title — small-caps tracked, gold */
#audit-details-modal .modal__header > div::before {
  content: "Compliance record";
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
}

#audit-details-modal .modal__title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--color-primary);
}

#audit-details-modal .audit-modal-badges { margin-top: var(--space-3); }
#audit-details-modal .audit-modal-badges .badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  padding: 2px 9px;
}

#audit-details-modal .modal__close {
  font-size: 22px;
  color: var(--color-text-tertiary);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}
#audit-details-modal .modal__close:hover {
  background: rgba(13, 68, 119, 0.06);
  color: var(--color-primary);
}

#audit-details-modal .modal__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  position: relative;
  z-index: 1;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}

/* Sections — staggered reveal on open */
#audit-details-modal .detail-section {
  margin-bottom: var(--space-5);
  opacity: 0;
  animation: audit-section-in 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#audit-details-modal .detail-section:nth-of-type(1) { animation-delay:  60ms; }
#audit-details-modal .detail-section:nth-of-type(2) { animation-delay: 100ms; }
#audit-details-modal .detail-section:nth-of-type(3) { animation-delay: 140ms; }
#audit-details-modal .detail-section:nth-of-type(4) { animation-delay: 180ms; }
#audit-details-modal .detail-section:nth-of-type(5) { animation-delay: 220ms; }
#audit-details-modal .detail-section:nth-of-type(6) { animation-delay: 260ms; }

/* Section label — gold left-bar marker + tracked small-caps */
#audit-details-modal .detail-section__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  padding-left: 10px;
  position: relative;
  display: inline-block;
}
#audit-details-modal .detail-section__label::before {
  content: "";
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 3px;
  background: var(--color-accent);
  border-radius: 1px;
}

/* Data rows — ledger hairline underline, baseline-aligned */
#audit-details-modal .detail-row {
  grid-template-columns: 140px 1fr;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(13, 68, 119, 0.06);
  font-size: var(--text-sm);
  align-items: baseline;
}
#audit-details-modal .detail-row:last-child { border-bottom: none; }
#audit-details-modal .detail-row__key {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
#audit-details-modal .detail-row > div:not(.detail-row__key) {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

/* Monospaced data values — inset chip on muted navy ground */
#audit-details-modal .detail-row .mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: rgba(13, 68, 119, 0.05);
  padding: 2px 7px;
  border-radius: 3px;
  display: inline-block;
  word-break: break-all;
}

/* Cross-pivot block — inset, distinct ground.
   Scoped via :has() to the section that contains .detail-pivots, so
   ordering changes (failure-reason section appearing) don't break it. */
#audit-details-modal .detail-section:has(.detail-pivots) {
  background: rgba(13, 68, 119, 0.025);
  margin: var(--space-6) calc(var(--space-6) * -1) calc(var(--space-6) * -1);
  padding: var(--space-5) var(--space-6) var(--space-6);
  border-top: 1px solid rgba(13, 68, 119, 0.08);
  position: relative;
}
#audit-details-modal .detail-pivots {
  gap: var(--space-2);
  margin-top: var(--space-1);
}
#audit-details-modal .detail-pivots .btn {
  font-size: var(--text-xs);
  padding: 8px 14px;
  background: var(--color-surface-base);
  border: 1px solid rgba(13, 68, 119, 0.18);
  color: var(--color-primary);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}
#audit-details-modal .detail-pivots .btn::after {
  content: " →";
  opacity: 0.45;
  margin-left: 4px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
#audit-details-modal .detail-pivots .btn:hover:not(.disabled) {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 68, 119, 0.22);
}
#audit-details-modal .detail-pivots .btn:hover:not(.disabled)::after {
  transform: translateX(3px);
  opacity: 1;
}

/* Footer Close button is redundant with the × in the header — collapse it */
#audit-details-modal .modal__footer {
  background: transparent;
  border-top: none;
  padding: 0;
  display: none;
}

@keyframes audit-modal-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes audit-section-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #audit-details-modal .modal,
  #audit-details-modal .detail-section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 600px) {
  #audit-details-modal .modal__title { font-size: 22px; }
  #audit-details-modal .modal::after { display: none; }
  #audit-details-modal .detail-row { grid-template-columns: 1fr; }
  #audit-details-modal .detail-row__key { margin-bottom: 2px; }
}

/* ============================================================
   Breadcrumb refinement — gold-accent chevron, animated underline
   on hover, faint hairline rule under the row. Replaces the plain
   text/›/text presentation with a treatment that matches the rest
   of the navy/gold civic-ledger language.
   ============================================================ */

.breadcrumb {
  gap: var(--space-3);
  /* Horizontal padding matches .page-content so the breadcrumb aligns
     with the page-body content edge instead of butting against the
     sidebar / page-frame border. Vertical padding gives the row a
     little breathing room above and below. */
  padding: var(--space-4) var(--space-page-x) var(--space-3);
  border-bottom: 1px solid rgba(13, 68, 119, 0.07);
  margin-bottom: var(--space-5);
}
.breadcrumb a {
  position: relative;
  padding: 2px 0;
  color: var(--color-text-link);
  font-weight: var(--weight-medium);
  transition: color var(--transition-fast);
}
.breadcrumb a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb a:hover::after { transform: scaleX(1); }
.breadcrumb__sep {
  color: var(--color-accent);
  font-size: 14px;
  font-weight: var(--weight-bold);
  user-select: none;
  opacity: 0.75;
  line-height: 1;
}
.breadcrumb__current {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   CIVIC-LEDGER GLOBAL DESIGN PASS
   ------------------------------------------------------------
   Extends the audit-log modal aesthetic to shared chrome across
   every page. The audit-log detail modal (#audit-details-modal)
   and procedural-receipt harness states (.receipt-card family)
   are already in this language and are NOT re-styled here.

   Aesthetic vocabulary:
     • Navy authority (--color-primary, used sparingly with weight)
     • Gold seal accent (--color-accent, used as highlights only)
     • Georgia serif for display titles (--font-heading)
     • Cascadia / Consolas mono for data values (--font-mono)
     • Tracked uppercase small-caps for section/label markers
     • Gold left-bar (3px) as the section-label indicator
     • Hairline ledger rules (1px navy 6% opacity) for data rows
     • Restrained motion: staggered reveals on load, animated
       underlines on hover. No gratuitous transitions.

   Declared at the end of the file so specificity-equivalent older
   rules are overridden via cascade order without needing !important.
   ============================================================ */

/* ── Page titles ────────────────────────────────────────────── */
/* Three heading conventions are in use across the codebase:
     .page-header__title   — emitted by the layout shell
     .page-title           — emitted inline by SuppressLayoutHeading pages
     .page-heading h1      — older variant used by Users + Endpoints/Detail
   Treat all three identically. Add a gold "seal tab" rule device
   under the title via ::after so every page reads as an official
   document. */
.page-header__title,
.page-title,
.page-heading h1 {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--color-primary);
  position: relative;
  padding-bottom: 14px;
  margin: 0 0 6px;
}
.page-header__title::after,
.page-title::after,
.page-heading h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    var(--color-accent) 56px,
    rgba(13, 68, 119, 0.12) 56px,
    rgba(13, 68, 119, 0.12) 100%
  );
}

.page-header__subtitle,
.page-title-sub,
.page-heading__meta {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin-top: 8px;
  max-width: 720px;
}

/* ── Card / section label primitive ─────────────────────────── */
/* The "gold left-bar marker + tracked uppercase" treatment used in
   the audit-modal section labels. Apply it via class to any label
   we want to read as a fielded record marker. Existing classes that
   should get this treatment are listed below — adding the selector
   list here avoids touching every Razor template. */
.panel-card__title,
.activity-card__title,
.role-list-card__title,
.filter-rail__title,
.filter-group__label,
.detail-section__label,
.role-identity-card__name,
.form-section__title,
.stat-card__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  position: relative;
  padding-left: 10px;
  display: inline-block;
}
.panel-card__title::before,
.activity-card__title::before,
.role-list-card__title::before,
.filter-rail__title::before,
.filter-group__label::before,
.detail-section__label::before,
.role-identity-card__name::before,
.form-section__title::before,
.stat-card__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  background: var(--color-accent);
  border-radius: 1px;
}
/* Role-identity name is a display value, not a meta label — restore
   sensible reading size while keeping the gold left-bar device. */
.role-identity-card__name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  color: var(--color-primary);
}

/* ── Cards: refined borders + subtle navy authority band ────── */
/* Borders move from neutral gray to navy-tinted (6%) so cards feel
   like they belong to one document. Box-shadow is kept restrained —
   civic, not floaty-modern. */
.panel-card,
.activity-card,
.stat-card,
.form-card,
.role-list-card,
.role-identity-card,
.role-table-card,
.user-card,
.tab-card,
.table-card,
.form-section,
.status-card,
.identity-card {
  background: var(--color-surface-base);
  border: 1px solid rgba(13, 68, 119, 0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(13, 68, 119, 0.04);
  position: relative;
}
.panel-card__header,
.activity-card__header,
.role-list-card__header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(13, 68, 119, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.panel-card__body,
.activity-card__body { padding: 16px 18px; }

/* Optional modifier for prominent cards — adds a gold seal tab. */
.card--accented,
.role-identity-card,
.user-card {
  border-color: rgba(13, 68, 119, 0.14);
}
.card--accented::before,
.role-identity-card::before,
.user-card::before {
  content: "";
  position: absolute;
  top: 0; left: 24px;
  width: 56px; height: 3px;
  background: var(--color-accent);
  border-radius: 0 0 2px 2px;
}

/* ── Stat cards: serif numerics, navy authority ─────────────── */
.stat-card { padding: 18px 20px; }
.stat-card__number {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1;
  margin-top: 8px;
  letter-spacing: -0.01em;
}
.stat-card__sub {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* ── Tables: ledger treatment ───────────────────────────────── */
/* Header row reads like a fielded form caption — tracked uppercase,
   navy bold, double-width bottom border in navy 15%. Body rows get
   hairline separators and a subtle navy tint on hover. */
table.mini-table,
.role-list-card table,
.table-card table,
.role-table-card table,
.tab-card table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
table.mini-table thead th,
.role-list-card table thead th,
.table-card table thead th,
.role-table-card table thead th,
.tab-card table thead th {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-align: left;
  padding: 14px 14px 10px;
  border-bottom: 2px solid rgba(13, 68, 119, 0.15);
  background: rgba(13, 68, 119, 0.018);
}
table.mini-table tbody td,
.role-list-card table tbody td,
.table-card table tbody td,
.role-table-card table tbody td,
.tab-card table tbody td {
  padding: 14px;
  font-size: 14px;
  color: var(--color-text-primary);
  border-bottom: 1px solid rgba(13, 68, 119, 0.06);
  vertical-align: middle;
}
table.mini-table tbody tr:hover,
.role-list-card table tbody tr:hover,
.table-card table tbody tr:hover,
.role-table-card table tbody tr:hover,
.tab-card table tbody tr:hover {
  background: rgba(13, 68, 119, 0.025);
}
table.mini-table tbody tr:last-child td,
.role-list-card table tbody tr:last-child td,
.table-card table tbody tr:last-child td,
.role-table-card table tbody tr:last-child td,
.tab-card table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Identity field (key/value pair component) ──────────────── */
.identity-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(13, 68, 119, 0.06);
}
.identity-field:last-child { border-bottom: none; }
.identity-field__label {
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.identity-field__value {
  font-size: 14px;
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}
.identity-field__value.mono,
.identity-field__value .mono {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(13, 68, 119, 0.05);
  padding: 2px 7px;
  border-radius: 3px;
  display: inline-block;
  width: fit-content;
}

/* ── Buttons: hover-lift overrides removed 2026-05-13 (P2k consolidation).
   All button styling lives in the canonical .btn library at line 550. */

/* ── Badges: tighter civic feel ─────────────────────────────── */
.badge {
  letter-spacing: 0.04em;
  font-weight: var(--weight-semibold);
  padding: 3px 10px;
}
/* Mono-style badges for counts / IDs */
.badge.badge-count,
.row-count-chip {
  font-family: var(--font-mono);
  letter-spacing: 0;
  font-weight: var(--weight-medium);
  font-size: 12px;
  padding: 2px 8px;
  background: rgba(13, 68, 119, 0.05);
  color: var(--color-text-primary);
  border-radius: 3px;
  border: 1px solid rgba(13, 68, 119, 0.08);
}

/* ── Filter rail (admin filter panel) ───────────────────────── */
/* The filter group label now uses the gold left-bar marker (set
   above). Add a hairline below each group for visual rhythm. */
.filter-rail {
  background: var(--color-surface-base);
  border: 1px solid rgba(13, 68, 119, 0.10);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 0 1px 2px rgba(13, 68, 119, 0.04);
}
.filter-rail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(13, 68, 119, 0.10);
}
.filter-rail .filter-group {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(13, 68, 119, 0.06);
}
.filter-rail .filter-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.filter-rail .filter-group__label {
  margin-bottom: 10px;
}
.filter-input,
.filter-select {
  border: 1px solid rgba(13, 68, 119, 0.18);
  background: var(--color-surface-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filter-input:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(13, 68, 119, 0.10);
}

/* ── Data-source banner: refined civic palette ──────────────── */
.data-source-banner {
  border-radius: var(--radius-md);
  font-size: 13px;
  letter-spacing: 0.005em;
}
.data-source-banner strong {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
}

/* ── Page-content top padding (tighter, breadcrumb has its own) */
.page-content {
  padding-top: 24px;
}

/* ── Subtle entrance for the page title on initial render ──── */
/* Just the title area — animating every section on every page
   would feel busy. Keep it restrained: a quiet fade-up that gives
   the title a sense of arrival, then the rest is static. */
.page-header,
.page-top,
.page-heading {
  animation: civic-rise 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes civic-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-header,
  .page-top,
  .page-heading {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Per-page selector standard ─────────────────────────────── */
/* The per-page selector lives in the grid's pagination footer at the
   BOTTOM of every grid, paired with the count line and the page
   controls. Three-column layout: count (left) · controls (center) ·
   per-page (right). Label uses tracked-uppercase navy to match the
   civic-ledger meta-label vocabulary; select is a tight navy-bordered
   input with the filter-input focus-glow treatment.
   Two class-name conventions in use (.pagination + .pagination__info
   on older pages, .pagination-footer on newer ones) — both styled
   identically by the selector group below. */
.pagination-footer,
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid rgba(13, 68, 119, 0.08);
  background: rgba(13, 68, 119, 0.015);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.pagination-count,
.pagination__info {
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  flex: 0 0 auto;
}
.pagination-count strong,
.pagination__info strong {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}
.pagination-footer .pagination__controls,
.pagination .pagination__controls {
  flex: 1 1 auto;
  justify-content: center;
}
.pagination__per-page {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--color-text-secondary);
}
.pagination__per-page-label,
.pagination__per-page > label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  position: relative;
  padding-left: 10px;
  margin: 0;
}
.pagination__per-page-label::before,
.pagination__per-page > label::before {
  content: "";
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 3px;
  background: var(--color-accent);
  border-radius: 1px;
}
.pagination__per-page select,
.pagination__per-page-select {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  background: var(--color-surface-base);
  border: 1px solid rgba(13, 68, 119, 0.22);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  min-width: 64px;
  cursor: pointer;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}
.pagination__per-page select:hover,
.pagination__per-page-select:hover {
  border-color: var(--color-primary);
}
.pagination__per-page select:focus,
.pagination__per-page-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(13, 68, 119, 0.10);
}

@media (max-width: 760px) {
  .pagination-footer {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .pagination-count,
  .pagination__per-page { flex: 1 1 100%; }
  .pagination__per-page { justify-content: flex-end; }
  .pagination-footer .pagination__controls { order: 3; flex: 1 1 100%; }
}

/* ── Mobile refinements for the global pass ─────────────────── */
@media (max-width: 640px) {
  .page-header__title,
  .page-title { font-size: 24px; }
  .stat-card__number { font-size: 28px; }
  table.mini-table thead th,
  .role-list-card table thead th,
  .table-card table thead th,
  .role-table-card table thead th { padding: 10px 8px 8px; }
  table.mini-table tbody td,
  .role-list-card table tbody td,
  .table-card table tbody td,
  .role-table-card table tbody td { padding: 10px 8px; }
}

/* ============================================================
   ADM-CAT detail — /admin/endpoint-catalog/detail
   Per-endpoint dashboard: hero strip, metadata ledger, roles
   panel, 30-day usage panel with sparkline + top callers.
   Class names scoped under .catalog-detail so we don't collide
   with the user-detail layout (which also owns .detail-layout
   / .detail-meta-card with different geometry).
   Bound to specs/mockups/admin/endpoint-catalog.html
   (data-view="detail"). Civic-ledger treatment: Georgia
   numerals, gold left-bar labels, hairline ledger rows,
   navy sparkline with a gold peak bar.
   ============================================================ */

/* Inline permission-key chip in the page-title-sub line (mockup
   `.permission-key`). Mono font, neutral surface, hairline border —
   not gold-tinted; we let the page-top stay quiet so the panel
   cards below carry the visual weight. */
.catalog-detail .permission-key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--color-surface-subtle);
  border: 1px solid rgba(13, 68, 119, 0.10);
  color: var(--color-text-primary);
  padding: 2px 8px;
  border-radius: var(--radius-md);
  display: inline-block;
}

.catalog-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-page-x) var(--space-7);
}

/* Metadata ledger — 4-column grid of gold-bar labels above
   value rows. Inner hairline separators give the "fielded
   record" cadence rather than a bare grid. */
.catalog-meta-card {
  background: var(--color-surface-base);
  border: 1px solid rgba(13, 68, 119, 0.10);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(13, 68, 119, 0.04);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  overflow: hidden;
}
.catalog-meta__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid rgba(13, 68, 119, 0.06);
  border-bottom: 1px solid rgba(13, 68, 119, 0.06);
  min-height: 70px;
}
.catalog-meta__field:nth-child(4n) { border-right: none; }
.catalog-meta__field:nth-last-child(-n+4) { border-bottom: none; }
.catalog-meta__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-left: 10px;
  position: relative;
  display: inline-block;
}
.catalog-meta__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 3px;
  background: var(--color-accent);
  border-radius: 1px;
}
.catalog-meta__value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  padding-left: 10px;
}
.catalog-meta__value--mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--color-surface-subtle);
  border: 1px solid rgba(13, 68, 119, 0.08);
  padding: 3px 8px;
  border-radius: var(--radius-md);
  display: inline-block;
  margin-left: 6px;
}
.catalog-meta__value--muted { color: var(--color-text-tertiary); }

/* Panels stretch to match the taller column (mockup default-grid
   behavior). The Roles card uses align-content/justify-content on
   its body so its rows pin to the top while the card chrome still
   fills the row height. */
.catalog-detail__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
.catalog-detail__panels .panel-card {
  display: flex;
  flex-direction: column;
}
.catalog-detail__panels .panel-card__body {
  flex: 1;
}
@media (max-width: 1100px) {
  .catalog-meta-card { grid-template-columns: repeat(2, 1fr); }
  .catalog-meta__field:nth-child(4n) { border-right: 1px solid rgba(13, 68, 119, 0.06); }
  .catalog-meta__field:nth-child(2n) { border-right: none; }
  .catalog-detail__panels { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .catalog-meta-card { grid-template-columns: 1fr; }
  .catalog-meta__field { border-right: none !important; }
  .catalog-detail__route { font-size: 18px; }
}

/* Roles panel — ledger rows. PascalCase code in Georgia, the
   human display label + user count below as a faint sub-row. */
.catalog-role-count {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  border: 1px solid rgba(13, 68, 119, 0.10);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}
.catalog-role-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.catalog-role-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 0;
  border-bottom: 1px solid rgba(13, 68, 119, 0.06);
}
.catalog-role-list li:last-child { border-bottom: none; }
.catalog-role-list__primary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.catalog-role-list__name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: -0.005em;
}
.catalog-role-list__sub {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}
.catalog-role-list__link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-link);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.catalog-role-list__link:hover { color: var(--color-text-link-hover); }
.catalog-role-list__link--disabled {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

.catalog-empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  padding: var(--space-4) 0 var(--space-2);
}

/* Usage panel — Georgia tabular numerals, gold-bar labels. */
.catalog-usage__window {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.catalog-usage__summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.catalog-usage__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-subtle);
  border: 1px solid rgba(13, 68, 119, 0.06);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.catalog-usage__stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--color-accent);
  border-radius: 1px;
}
.catalog-usage__stat-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-left: 10px;
}
.catalog-usage__stat-number {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  padding-left: 10px;
}
.catalog-usage__stat-sub {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  padding-left: 10px;
}

.catalog-sparkline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.catalog-sparkline-head__title {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-left: 10px;
  position: relative;
}
.catalog-sparkline-head__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 3px;
  background: var(--color-accent);
  border-radius: 1px;
}
.catalog-sparkline-head__legend {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.catalog-sparkline-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.catalog-sparkline-key--peak { background: var(--color-accent); }
.catalog-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 60px;
  padding: 8px 0 4px;
  margin-bottom: var(--space-5);
  border-bottom: 1px solid rgba(13, 68, 119, 0.10);
}
.catalog-sparkline__bar {
  flex: 1;
  background: var(--_navy-200);
  border-radius: 2px 2px 0 0;
  min-height: 3px;
  transition: background var(--transition-fast), transform var(--transition-fast);
  position: relative;
}
.catalog-sparkline__bar:hover {
  background: var(--_navy-500);
  transform: scaleY(1.04);
  transform-origin: bottom;
}
.catalog-sparkline__bar--peak {
  background: var(--color-accent);
}
.catalog-sparkline__bar--peak:hover { background: var(--_gold-600); }

.catalog-callers__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.catalog-callers__title {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-left: 10px;
  position: relative;
}
.catalog-callers__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 3px;
  background: var(--color-accent);
  border-radius: 1px;
}
.catalog-callers__sub {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-style: italic;
}
.catalog-callers {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: caller;
}
.catalog-callers li {
  display: grid;
  grid-template-columns: 26px 1fr 96px auto;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 0;
  border-bottom: 1px solid rgba(13, 68, 119, 0.06);
  font-size: var(--text-sm);
}
.catalog-callers li:last-child { border-bottom: none; }
.catalog-callers__rank {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--_gold-50);
  border: 1px solid rgba(196, 146, 0, 0.30);
  border-radius: var(--radius-full);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.catalog-callers__name {
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-callers__bar-wrap {
  height: 6px;
  background: rgba(13, 68, 119, 0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.catalog-callers__bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--_navy-500), var(--_navy-700));
  border-radius: var(--radius-full);
}
.catalog-callers__count {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Catalog index — dedicated trailing "view detail" column. The
   row itself is NOT clickable; only this chevron link is. Keeps
   click affordance scoped to a single column instead of turning
   every cell into a navigation hotspot. */
.endpoint-catalog__view-col { width: 44px; }
.endpoint-catalog__view-cell { text-align: right; padding-right: 8px; }
.endpoint-catalog__view-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast);
}
.endpoint-catalog__view-link:hover,
.endpoint-catalog__view-link:focus-visible {
  background: var(--_gold-50);
  color: var(--color-primary);
  transform: translateX(2px);
  outline: none;
}
.endpoint-catalog__view-link:focus-visible {
  box-shadow: 0 0 0 2px var(--color-accent);
}

/* ============================================================
   JOB STATUS PAGE (Phase C — /jobs/{jobId})
   Inner components for the async-export status card. The card
   container itself is styled by the shared card rule above;
   these style the header / body / file-card / progress / panels
   that were never ported during regen (rendered bare — the
   "Download file" link had no .btn--success, cards had no chrome).
   Matches specs/mockups/companion-app/download.html, civic-ledger
   tokens only, real data only (no fabricated estimate/duration).
   ============================================================ */
.status-page { max-width: 860px; }
.detail-layout--status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 900px) {
  .detail-layout--status { grid-template-columns: 1fr; }
}

.status-card__header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid rgba(13, 68, 119, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.status-card__header-left { display: flex; flex-direction: column; gap: var(--space-2); }
.status-card__job-id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); }
.status-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--color-primary);
  margin: 0;
}
.status-card__body { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }

/* Detail grid — scoped to the status card so the generic .label/.value
   names can't leak into other pages. */
.status-card .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-6); }
.status-card .detail-item { display: flex; flex-direction: column; gap: var(--space-1); }
.status-card .detail-item .label {
  font-size: var(--text-xs); color: var(--color-text-tertiary);
  font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em;
}
.status-card .detail-item .value { font-size: var(--text-sm); color: var(--color-text-primary); }
.status-card .detail-item .value code {
  font-family: var(--font-mono); font-size: var(--text-xs);
  background: var(--color-surface-muted); padding: 2px var(--space-2); border-radius: var(--radius-sm);
}

/* Progress bar (running) — indeterminate shimmer, no fabricated percentage. */
.progress-wrap { background: var(--color-surface-muted); border-radius: var(--radius-full); height: 8px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--color-info); border-radius: var(--radius-full); }
@media (prefers-reduced-motion: no-preference) {
  .progress-bar--animated {
    background: linear-gradient(90deg, var(--_blue-500) 0%, var(--_blue-100) 50%, var(--_blue-500) 100%);
    background-size: 200%;
    animation: statusShimmer 1.8s linear infinite;
  }
}
@keyframes statusShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.progress-meta { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-2); }

/* Polling notice */
.polling-notice {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-tertiary);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-info); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pulse-dot { animation: statusPulse 1.5s ease-in-out infinite; }
}
@keyframes statusPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } }

/* Bookmark note (info banner variant) */
.bookmark-note {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: var(--color-info-bg); border: 1px solid var(--color-info-border, var(--_blue-100));
  border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-info-text);
}
.bookmark-note__icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.bookmark-note code { font-family: var(--font-mono); font-size: var(--text-xs); }

/* File card (succeeded) */
.file-card {
  background: var(--color-success-bg); border: 1px solid var(--color-success-border, var(--_green-100));
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.file-card__header { display: flex; align-items: flex-start; gap: var(--space-4); }
.file-card__icon {
  width: 44px; height: 44px; background: var(--color-success); border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center; color: var(--_neutral-0); font-size: 20px; flex-shrink: 0;
}
.file-card__info { flex: 1; min-width: 0; }
.file-card__name { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-success-text); word-break: break-all; }
.file-card__meta { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: var(--space-1); }
.file-card__expiry { font-size: var(--text-xs); color: var(--color-warning-text); display: flex; align-items: center; gap: var(--space-1); }

/* Related actions panel ("What next?") */
.related-actions {
  background: var(--color-surface-subtle); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
}
.related-actions h3 { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
.related-actions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.related-actions li a { font-size: var(--text-sm); color: var(--color-text-link); }

/* Error panel (failed) */
.error-panel {
  background: var(--color-error-bg); border: 1px solid var(--color-error-border, var(--_red-100));
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.error-panel__message { font-size: var(--text-sm); color: var(--color-error-text); margin: 0 0 var(--space-2); }
.error-panel__trace { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); padding: var(--space-2) var(--space-3); background: rgba(0,0,0,0.04); border-radius: var(--radius-sm); }

/* Bottom action row on the status states */
.status-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* ============================================================
   Home / landing page (SDAPI-73)
   Welcome + sign-in hero, auth-gated document cards, and an
   always-visible public-dataset section (anonymous CSV links).
   ============================================================ */
.home { display: flex; flex-direction: column; gap: var(--space-8); }

.home__heading h1 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-normal);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

.home__grid { display: grid; gap: var(--space-5); }
.home__grid--anon { grid-template-columns: 1fr; }

@media (min-width: 880px) {
  .home__grid--auth {
    grid-template-columns: 1.7fr 1fr;
    grid-template-areas: "welcome guide" "welcome faq";
    align-items: stretch;
  }
  .home__grid--auth .home-welcome        { grid-area: welcome; }
  .home__grid--auth .home-doc-card--guide { grid-area: guide; }
  .home__grid--auth .home-doc-card--faq   { grid-area: faq; }
}

/* Welcome hero — navy field, gold accent, the page's anchor element. */
.home-welcome {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  background: linear-gradient(150deg, var(--_navy-900), var(--_navy-800));
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.home-welcome::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--_gold-400), var(--_gold-300));
}
.home-welcome__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-normal);
  margin-bottom: var(--space-3);
}
.home-welcome__lede {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--_navy-100);
  max-width: 52ch;
}
.home-welcome__note {
  margin-top: var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--_gold-400);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--_navy-200);
  max-width: 60ch;
}
.home-welcome__action form { margin: 0; }
.home-welcome__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  background: var(--_gold-400);
  color: var(--_navy-950);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.home-welcome__btn svg { width: 20px; height: 20px; }
.home-welcome__btn:hover {
  background: var(--_gold-300);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.home-welcome__btn:focus-visible { outline: 2px solid var(--_gold-200); outline-offset: 2px; }

/* Document cards — Getting Started / Questions (authenticated only).
   Civic-ledger gold left-bar label treatment. */
.home-doc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.home-doc-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--_navy-200);
  border-left-color: var(--color-accent);
  transform: translateY(-2px);
}
.home-doc-card__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
}
.home-doc-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-normal);
  color: var(--color-text-primary);
}
.home-doc-card__desc {
  flex: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}
.home-doc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-link);
}
.home-doc-card__cta svg { width: 18px; height: 18px; transition: transform var(--transition-fast); }
.home-doc-card:hover .home-doc-card__cta svg { transform: translateX(3px); }

/* Public datasets — always visible, no login required. */
.home-public {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}
.home-public__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--_green-100);
  border-radius: var(--radius-full);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-public__title {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-normal);
  color: var(--color-text-primary);
}
.home-public__lede {
  margin-top: var(--space-2);
  max-width: 64ch;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}
.home-public__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.home-dataset {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.home-dataset:hover { box-shadow: var(--shadow-md); border-color: var(--_navy-200); }
/* The whole card is a download link — make that obvious (cursor, lift, accent). */
.home-dataset--link { cursor: pointer; text-decoration: none; color: inherit; }
.home-dataset--link:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.home-dataset--link:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.home-dataset__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.home-dataset__name {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  color: var(--color-text-primary);
}
.home-dataset__tag {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-success-text);
}
.home-dataset__path {
  align-self: flex-start;
  max-width: 100%;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}
.home-dataset__desc {
  flex: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}
.home-dataset__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.home-dataset__ver { font-size: var(--text-xs); color: var(--color-text-tertiary); }
/* CTA styled as a filled button so the download action reads clearly, even
   though the whole card is the link. */
.home-dataset__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: background var(--transition-fast);
}
.home-dataset__cta svg { width: 16px; height: 16px; }
.home-dataset--link:hover .home-dataset__cta { background: var(--color-primary-hover); }
.home-dataset__cta--disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-normal);
}
/* Unconfigured tier: the card is rendered as an <a href="#"> for markup
   parity but must not navigate or look interactive. */
.home-dataset[aria-disabled="true"] { pointer-events: none; }

@media (max-width: 640px) {
  .home-welcome { padding: var(--space-6); }
  .home-public { padding: var(--space-6); }
}