/* ==========================================================================
   Scout Health Admin Portal - Styles
   ========================================================================== */

/* CSS Custom Properties (Variables)
   ========================================================================== */
:root {
  /* Colors - Scout Purple Theme */
  --color-primary: #7b2d8e;
  --color-primary-dark: #5e2270;
  --color-primary-light: #9b4dae;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Semantic Colors */
  --color-error: #dc2626;
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;
  --color-success: #16a34a;
  --color-success-bg: #f0fdf4;

  /* Admin brand tokens (Scouts Victoria purple) — reused across the shell */
  --admin-brand-primary: var(--color-primary);
  --admin-brand-secondary: var(--color-primary-dark);
  --admin-brand-gradient: linear-gradient(135deg, #7b2d8e 0%, #5e2270 100%);

  /* Semantic status badge tokens — single source for status-badge--* colours.
     Kept in step with src/config/adminHealthDisplayConfig.js variants by
     tests/admin-display-config.test.js. */
  --admin-status-success-bg: #d1fae5;
  --admin-status-success-text: #065f46;
  --admin-status-danger-bg: #fee2e2;
  --admin-status-danger-text: #991b1b;
  --admin-status-warning-bg: #fef3c7;
  --admin-status-warning-text: #92400e;
  --admin-status-neutral-bg: #e5e7eb;
  --admin-status-neutral-text: #374151;
  --admin-status-info-bg: #dbeafe;
  --admin-status-info-text: #1e40af;

  /* Status ICON colours (UAT 13/14) — the brighter per-variant palette used by
     standalone status icons on a plain background (filter/select dropdown
     items, metric icons). One mapping per semantic variant — never an inline
     hex per item. Badge text/backgrounds keep the darker pairs above. */
  --admin-status-icon-success: #10b981;
  --admin-status-icon-danger: #ef4444;
  --admin-status-icon-warning: #f59e0b;
  --admin-status-icon-neutral: #6b7280;
  --admin-status-icon-info: #3b82f6;

  /* Button design system — role tokens (single source for button colours).
     The primary ACTION colour is a distinct, accessible blue and is DELIBERATELY
     NOT the Scout purple (--color-primary / --admin-brand-*), which is reserved
     for menu/nav-selected state. Blue #1d4ed8 gives ~6.5:1 contrast on white. */
  --btn-primary-bg: #1d4ed8;      /* blue-700 — primary action fill */
  --btn-primary-hover: #1e40af;   /* blue-800 */
  --btn-primary-fg: #ffffff;
  --btn-secondary-bg: #f3f4f6;
  --btn-secondary-hover: #e5e7eb;
  --btn-secondary-active: #d1d5db;
  --btn-secondary-fg: #374151;
  --btn-secondary-border: #d1d5db;
  --btn-danger-bg: #dc2626;
  --btn-danger-hover: #b91c1c;
  --btn-danger-fg: #ffffff;
  --btn-disabled-bg: #d1d5db;
  --btn-disabled-fg: #6b7280;
  --btn-radius: 8px;

  /* Shell layout tokens (2026-08-13 density tiers) — component rules consume
     these so the desktop density tiers at the end of this file can retune
     them centrally without touching any component/breakpoint rule. */
  --sidebar-width: 220px;
  --metric-card-min: 200px;
  /* F-107 Card View: minimum person-card track width (the card grid's ONE
     sizing lever; the desktop density tiers retune it). 280px since the
     UAT 2026-08-14 compact card (collapsed details) — verified across the
     device matrix in e2e/fixtures/member-card-view.fixture.js. */
  --person-card-min: 280px;

  /* Typography */
  --font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Layout */
  --header-height: 72px;
  --max-width: 1200px;
}

/* Reset & Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-gray-700);
  background-color: var(--color-gray-50);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Header
   ========================================================================== */
.header {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  height: var(--header-height);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  /* Matches .dashboard-layout's 1920px cap so the header content, formations
     bar, and page content share one alignment edge at every viewport. */
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  text-decoration: none;
  color: inherit;
  /* The lockup may carry a long configured APP_NAME ("ScoutHealth |
     Management Portal"): allow this flex item to shrink below the text's
     intrinsic width so the header row can never overflow the page. */
  min-width: 0;
}

.logo-link:hover {
  color: inherit;
}

.logo-image {
  height: 48px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0; /* the brand mark never squashes — only the text yields */
}

.app-name {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-gray-800);
  white-space: nowrap;
  /* Full name whenever the viewport affords it; ellipsis only when the row
     would otherwise overflow (no fixed breakpoint — pure flex shrinking, so
     any configured APP_NAME length degrades gracefully). */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Main Content
   ========================================================================== */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Hero Section
   ========================================================================== */
.hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: var(--spacing-8) var(--spacing-6);
  background: linear-gradient(
    135deg,
    var(--color-gray-50) 0%,
    var(--color-white) 100%
  );
}

.hero-container {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr 420px;
    gap: var(--spacing-16);
  }
}

/* Hero Info (Left Column)
   ========================================================================== */
.hero-info {
  order: 2;
}

@media (min-width: 1024px) {
  .hero-info {
    order: 1;
  }
}

.hero-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.2;
  margin-bottom: var(--spacing-4);
}

@media (min-width: 768px) {
  .hero-title {
    font-size: var(--font-size-4xl);
  }
}

.hero-description {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-8);
  max-width: 540px;
}

/* Feature List
   ========================================================================== */
.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
}

.feature-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 2px;
}

.feature-item div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.feature-item strong {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-800);
}

.feature-item span {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Sign-in Card (Right Column)
   ========================================================================== */
.signin-card-wrapper {
  order: 1;
}

@media (min-width: 1024px) {
  .signin-card-wrapper {
    order: 2;
  }
}

.signin-card {
  background-color: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-8);
  max-width: 420px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .signin-card {
    margin: 0;
  }
}

.signin-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-gray-900);
  text-align: center;
  margin-bottom: var(--spacing-6);
}

/* Alert Messages
   ========================================================================== */
.alert {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-5);
  font-size: var(--font-size-sm);
}

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

.alert-info {
  background-color: var(--color-info-bg, #eff6ff);
  border: 1px solid var(--color-info-border, #bfdbfe);
  color: var(--color-info-text, #1e40af);
}

/* Controlled access-guidance message (shared-identity sign-in Step 1). */
.alert-warning {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

/* Multi-paragraph alerts (access guidance / registration guidance) align the
   icon to the first line and stack their paragraphs. */
.alert > div p {
  margin: 0 0 var(--spacing-2);
}

.alert > div p:last-child {
  margin-bottom: 0;
}

.alert-lead {
  font-weight: 600;
}

.alert-warning a {
  color: inherit;
  font-weight: 600;
}

.registration-guidance {
  align-items: flex-start;
}

.alert-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Form Styles
   ========================================================================== */
.signin-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-700);
}

.form-input {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-base);
  font-family: inherit;
  color: var(--color-gray-900);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  /* Centre the text in every auth/profile input so the email, password and
     reset fields match the already-centred RegID + verification-code fields. */
  text-align: center;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.form-input::placeholder {
  color: var(--color-gray-400);
}

.form-input:hover {
  border-color: var(--color-gray-400);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(123, 45, 142, 0.15);
}

.form-input-error {
  border-color: var(--color-error);
}

.form-input-error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.form-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-error);
}

.form-error-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary {
  width: 100%;
  /* Primary ACTION colour (centralised token) — a distinct accessible blue,
     kept separate from the Scout purple used for menu/nav selection. */
  background-color: var(--btn-primary-bg);
  background-image: none;
  color: var(--btn-primary-fg);
  border: none;
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover);
  background-image: none;
  color: var(--btn-primary-fg);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
}

.btn-secondary:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-gray-400);
  color: var(--color-gray-700);
}

.btn-icon {
  width: 18px;
  height: 18px;
}

/* Button design-system utilities (shared across auth + dashboard).
   - .button-group  : a wrapping row of buttons (consistent gap/alignment).
   - .modal-actions : the canonical modal footer row — two actions on one row,
                      centred, secondary-first then primary, wraps on mobile.
   - .btn-compact   : compact size variant for table-row / inline actions
                      (matches the dashboard's existing .btn-sm metrics). */
.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
}

.btn-compact {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

/* Sign-in Footer
   ========================================================================== */
.signin-footer {
  margin-top: var(--spacing-5);
  text-align: center;
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--color-gray-200);
}

.forgot-link {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}

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

/* Shared-identity two-step sign-in
   ========================================================================== */

/* Step indicator ("Step 1 of 2") above the card title. */
.signin-step {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--spacing-2);
}

.signin-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  text-align: center;
  margin-top: calc(-1 * var(--spacing-4));
  margin-bottom: var(--spacing-5);
}

/* Fixed "Signing in as: email" chip on Step 2 — the email comes from
   server-side pending-auth state and is NOT editable here. */
.signin-as {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  margin-bottom: var(--spacing-4);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}

.signin-as-label {
  color: var(--color-gray-500);
}

.signin-as-email {
  font-weight: 600;
  color: var(--color-gray-900);
  overflow-wrap: anywhere;
}

.signin-as-change {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.signin-as-change:hover {
  text-decoration: underline;
}

/* Member Registration ID — variable length (legacy source is varchar(8), may
   carry leading zeros or letters), so ONE input styled with a segmented look
   rather than a hard-coded box count. Large, spaced characters remain
   comfortable down to 320 px wide. */
.regid-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-lg);
  letter-spacing: 0.35em;
  text-align: center;
}

.regid-input::placeholder {
  letter-spacing: normal;
  font-family: inherit;
  font-size: var(--font-size-base);
}

/* Full-width anchor buttons (the Register for ScoutHealth action). */
.btn-block {
  display: flex;
  width: 100%;
}

/* In-progress submit (loading state set by the sign-in page scripts). */
.btn[disabled],
.btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Compact / inline / danger button variants used by the recovery + profile
   flows (auth pages use styles.css, not dashboard.css). */
.btn-inline {
  width: auto;
}

.btn-danger-solid {
  width: 100%;
  background-color: var(--color-error);
  color: var(--color-white);
  border: none;
}

.btn-danger-solid:hover {
  background-color: #b91c1c;
}

/* Header "Account" link mirrors the Sign Out button treatment. */
.btn-account .btn-account-text {
  white-space: nowrap;
}

/* ── Account Settings / profile pages ─────────────────────────────────────── */
.profile-section {
  padding: var(--spacing-8) var(--spacing-4);
}

.profile-container {
  max-width: 640px;
  margin: 0 auto;
}

.profile-back {
  margin-bottom: var(--spacing-4);
}

.profile-title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-1);
}

.profile-subtitle {
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
}

.profile-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-5);
  box-shadow: var(--shadow-sm);
}

.profile-card-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-4);
}

.profile-detail-list {
  margin: 0;
}

.profile-detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1) var(--spacing-4);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.profile-detail-row:last-child {
  border-bottom: none;
}

.profile-detail-row dt {
  flex: 0 0 200px;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.profile-detail-row dd {
  margin: 0;
  color: var(--color-gray-900);
  overflow-wrap: anywhere;
}

.profile-security-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.profile-security-row:last-child {
  border-bottom: none;
}

.profile-security-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
  flex: 1 1 260px;
}

.profile-security-info strong {
  color: var(--color-gray-900);
}

.profile-security-info span {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.profile-security-actions {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.profile-security-row .btn {
  width: auto;
  flex: 0 0 auto;
}

.profile-status {
  display: inline-block;
  margin-left: var(--spacing-2);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.profile-status--on {
  background-color: var(--admin-status-success-bg, #d1fae5);
  color: var(--admin-status-success-text, #065f46);
}

.profile-status--off {
  background-color: var(--admin-status-neutral-bg, #e5e7eb);
  color: var(--admin-status-neutral-text, #374151);
}

/* Authenticator set-up QR + manual key */
.mfa-qr-wrapper {
  display: flex;
  justify-content: center;
  margin: var(--spacing-4) 0;
}

.mfa-qr {
  width: 100%;
  max-width: 220px;
  height: auto;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2);
  background: var(--color-white);
}

.mfa-secret {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  align-items: center;
  margin-bottom: var(--spacing-5);
  text-align: center;
}

.mfa-secret-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.mfa-secret-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-base);
  letter-spacing: 0.12em;
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  overflow-wrap: anywhere;
  max-width: 100%;
}

@media (max-width: 640px) {
  .profile-detail-row dt {
    flex-basis: 100%;
  }
  .profile-security-row .btn,
  .profile-security-actions {
    width: 100%;
  }
  .profile-security-actions .btn {
    flex: 1 1 auto;
  }
}

/* Footer
   ========================================================================== */
.footer {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
  padding: var(--spacing-6);
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.footer-copyright {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-2);
}

.footer-security {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
}

.footer-icon {
  width: 14px;
  height: 14px;
}

/* Dashboard Placeholder
   ========================================================================== */
.dashboard-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-6);
}

.placeholder-container {
  max-width: 480px;
  width: 100%;
}

.placeholder-card {
  background-color: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-10);
  text-align: center;
}

.placeholder-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: var(--color-gray-100);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-6);
}

.placeholder-icon {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
}

.placeholder-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-3);
}

.placeholder-text {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-2);
}

.placeholder-subtext {
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  margin-bottom: var(--spacing-6);
}

/* Forgot Password Page
   ========================================================================== */
.forgot-password-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-6);
}

.forgot-container {
  max-width: 420px;
  width: 100%;
}

.forgot-card {
  background-color: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-10);
  text-align: center;
}

.forgot-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: var(--color-gray-100);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-6);
}

.forgot-icon {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
}

.forgot-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-4);
}

.forgot-text {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
}

/* Error Pages
   ========================================================================== */
.error-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-6);
}

.error-container {
  max-width: 420px;
  width: 100%;
}

.error-card {
  background-color: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-10);
  text-align: center;
}

.error-code {
  font-size: 5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--spacing-4);
}

.error-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-3);
}

.error-text {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
}

/* Utility Classes
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile Optimizations
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --header-height: 56px;
  }

  .header {
    height: var(--header-height);
  }
}

@media (max-width: 640px) {
  .header-container {
    padding: 0 var(--spacing-4);
  }

  .hero {
    padding: var(--spacing-6) var(--spacing-4);
  }

  .hero-title {
    font-size: var(--font-size-2xl);
  }

  .hero-description {
    font-size: var(--font-size-base);
  }

  .signin-card {
    padding: var(--spacing-6);
  }

  .placeholder-card,
  .forgot-card,
  .error-card {
    padding: var(--spacing-6);
  }

  .error-code {
    font-size: 4rem;
  }
}

/* Verification Page
   ========================================================================== */
.verify-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-6);
  background: linear-gradient(
    135deg,
    var(--color-gray-50) 0%,
    var(--color-white) 100%
  );
}

.verify-container {
  max-width: 420px;
  width: 100%;
}

.verify-card {
  background-color: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-8);
  text-align: center;
}

.verify-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-5);
}

.verify-icon {
  width: 36px;
  height: 36px;
  color: var(--color-white);
}

.verify-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-3);
}

.verify-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-6);
  line-height: 1.6;
}

.verify-text strong {
  color: var(--color-gray-800);
  word-break: break-all;
}

.verify-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  text-align: left;
}

.form-input-code {
  text-align: center;
  font-size: var(--font-size-xl);
  font-weight: 600;
  letter-spacing: 4px;
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  margin-top: var(--spacing-1);
}

/* Password-requirements checklist (F-120 — Member Portal parity). Every state
   carries wording + a ✓/✕ icon, never colour alone; colours use the page's
   semantic tokens. No font-size !important (mobile zoom guard). Wraps
   naturally at narrow widths. */
.pw-requirements { text-align: left; }
.pw-requirements-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1) var(--spacing-3);
  margin: var(--spacing-1) 0 0;
  padding: 0;
  font-size: var(--font-size-xs);
}
.pw-req {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-1);
  color: var(--color-gray-400);
  transition: color 0.2s;
}
.pw-req i { font-size: 0.85em; }
.pw-req.met { color: var(--color-success); }
.pw-req.unmet { color: var(--color-error); }

/* Confirm-password live match hint (separate from the checklist). */
.pw-match-hint {
  font-size: var(--font-size-xs);
  margin: var(--spacing-1) 0 0;
  text-align: left;
}
.pw-match-hint:empty { display: none; }
.pw-match-hint.match { color: var(--color-success); }
.pw-match-hint.no-match { color: var(--color-error); }

.verify-footer {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--color-gray-200);
}

.verify-footer-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-2);
}

.resend-form {
  display: inline;
}

.btn-link {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  font-family: inherit;
}

.btn-link:hover {
  text-decoration: underline;
  color: var(--color-primary-dark);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-top: var(--spacing-4);
}

.back-link:hover {
  color: var(--color-primary);
}

.back-icon {
  width: 16px;
  height: 16px;
}

/* Alert Success */
.alert-success {
  background-color: var(--color-success-bg);
  border: 1px solid #bbf7d0;
  color: var(--color-success);
}

/* Authenticated Header
   ========================================================================== */
.header-container-authenticated {
  justify-content: space-between;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  /* Functional controls hold their size; the decorative app-name text (and
     the ellipsis-capable user-info block) absorb any width pressure. */
  flex-shrink: 0;
}

/* Phone widths: the authenticated header COMPRESSES instead of overflowing the
   page (the row outgrew phone viewports once the Help item joined it). The
   header-authenticated.css ≤768px block already makes every nav button
   icon-only (44px targets, aria-labels/tooltips remain); here the app-name
   TEXT yields too (the logo image stays — standard mobile brand treatment)
   and the nav tightens. */
@media (max-width: 560px) {
  .header-container-authenticated .app-name {
    display: none;
  }
  .header-container-authenticated .header-nav {
    gap: var(--spacing-2);
    min-width: 0;
  }
  .header-container-authenticated .btn-account-text {
    display: none;
  }
  /* The configurable Knowledge Base ("Guide") action is the one header item
     that yields at phone widths. Measured in Chromium against the fully-loaded
     header (drawer, switcher, bell, Admin Console, Help, Guide, User Agreement,
     Account, Sign Out): the six-action row needs ≥520px and fits from this tier
     up, while at 320–480px it pushed the page into horizontal overflow — the
     row was already at its limit with five actions. Hiding it here keeps every
     narrower width byte-identical to the pre-existing header rather than
     shrinking touch targets below 38px or dropping an action that has no other
     entry point. The knowledge base remains reachable at ≥561px and from its
     in-app links; this rule lands on an EXISTING tier boundary, so no new
     breakpoint is introduced. */
  .header-container-authenticated .knowledge-base-nav-link {
    display: none;
  }
}
/* Very narrow phones: slightly smaller (still ≥40px) touch targets. */
@media (max-width: 400px) {
  .header-container-authenticated {
    gap: 0.375rem;
  }
  .header-container-authenticated .header-nav .btn-logout {
    min-width: 40px;
    min-height: 40px;
    padding: 0.4rem;
  }
}
/* Smallest supported phones (320px): compact logo + padding so the full
   control row (drawer, switcher, bell, Help, Account, Sign Out) fits without
   page overflow. Touch targets stay ≥38px. */
@media (max-width: 360px) {
  .header-container-authenticated {
    padding: 0 0.5rem;
    gap: 0.3rem;
  }
  .header-container-authenticated .logo-image {
    height: 28px;
  }
  .header-container-authenticated .header-nav .btn-logout {
    min-width: 38px;
    min-height: 38px;
    padding: 0.35rem;
  }
  /* The switcher stays tappable without its ornamental chevron; the
     single-role profile display tightens equally. */
  .header-container-authenticated .profile-switcher .dropdown-arrow {
    display: none;
  }
  .header-container-authenticated .profile-switcher-toggle,
  .header-container-authenticated .profile-display {
    padding: 0.375rem 0.25rem;
  }
}

.btn-logout {
  background-color: transparent;
  color: var(--color-gray-600);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: 1px solid var(--color-gray-300);
}

.btn-logout:hover {
  background-color: var(--color-gray-50);
  color: var(--color-gray-700);
  border-color: var(--color-gray-400);
}

/* Dashboard Section
   ========================================================================== */
.dashboard-section {
  flex: 1;
  padding: var(--spacing-8) var(--spacing-6);
  background: linear-gradient(
    135deg,
    var(--color-gray-50) 0%,
    var(--color-white) 100%
  );
}

.dashboard-container {
  max-width: 800px;
  margin: 0 auto;
}

.dashboard-welcome {
  margin-bottom: var(--spacing-8);
}

.dashboard-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.dashboard-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
}

.dashboard-subtitle strong {
  color: var(--color-primary);
}

.dashboard-card {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: var(--spacing-6);
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-5) var(--spacing-6);
  background-color: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}

.dashboard-card-icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.dashboard-card-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-800);
}

.dashboard-card-content {
  padding: var(--spacing-5) var(--spacing-6);
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.info-value {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-800);
}

.dashboard-placeholder-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
}

.notice-icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.notice-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-1);
}

.notice-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Role Selection Page
   ========================================================================== */
.select-role-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-6);
  background: linear-gradient(
    135deg,
    var(--color-gray-50) 0%,
    var(--color-white) 100%
  );
}

.select-role-container {
  max-width: 520px;
  width: 100%;
}

.select-role-card {
  background-color: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-8);
}

.select-role-header {
  text-align: center;
  margin-bottom: var(--spacing-6);
}

.welcome-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-5);
}

.welcome-icon {
  width: 36px;
  height: 36px;
  color: var(--color-white);
}

.select-role-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.select-role-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.6;
}

.select-role-form {
  margin-bottom: var(--spacing-6);
}

.role-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.role-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.role-item {
  display: block;
  cursor: pointer;
}

.role-checkbox,
.role-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.role-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4);
  background-color: var(--color-gray-50);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.role-item:hover .role-content {
  border-color: var(--color-gray-300);
  background-color: var(--color-gray-100);
}

.role-checkbox:focus + .role-content,
.role-radio:focus + .role-content {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.role-checkbox:checked + .role-content,
.role-radio:checked + .role-content {
  border-color: var(--color-primary);
  background-color: rgba(123, 45, 142, 0.05);
}

.role-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
}

.role-line {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-gray-800);
}

.role-label {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-800);
}

.role-description {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-800);
}

.role-group-name {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.role-location {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.role-check-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.check-icon {
  width: 14px;
  height: 14px;
  color: var(--color-white);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.role-checkbox:checked + .role-content .role-check-indicator,
.role-radio:checked + .role-content .role-check-indicator {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.role-checkbox:checked + .role-content .check-icon,
.role-radio:checked + .role-content .check-icon {
  opacity: 1;
}

.select-role-actions {
  margin-top: var(--spacing-6);
}

.btn-icon-right {
  width: 18px;
  height: 18px;
  margin-left: var(--spacing-1);
}

.select-role-footer {
  text-align: center;
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--color-gray-200);
}

/* No Access Page
   ========================================================================== */
.no-access-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-6);
  background: linear-gradient(
    135deg,
    var(--color-gray-50) 0%,
    var(--color-white) 100%
  );
}

.no-access-container {
  max-width: 480px;
  width: 100%;
}

.no-access-card {
  background-color: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-10);
  text-align: center;
}

.no-access-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: var(--color-error-bg);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-6);
}

.no-access-icon {
  width: 40px;
  height: 40px;
  color: var(--color-error);
}

.no-access-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-4);
}

.no-access-text {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-3);
  line-height: 1.6;
}

.no-access-text strong {
  color: var(--color-gray-800);
}

.no-access-subtext {
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  margin-bottom: var(--spacing-6);
}

/* Active Roles Display
   ========================================================================== */
.active-roles-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.active-role-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background-color: rgba(123, 45, 142, 0.05);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-primary);
}

.active-role-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.active-role-icon {
  width: 14px;
  height: 14px;
  color: var(--color-white);
}

.active-role-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.active-role-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-800);
}

.active-role-location {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

/* Reduced motion (quality floor)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Print Styles
   ========================================================================== */
@media print {
  .header,
  .footer {
    display: none;
  }

  body {
    background: white;
  }
}

/* ==========================================================================
   Reusable semantic status badges (config-driven; see
   src/config/adminHealthDisplayConfig.js). Colours come from the
   --admin-status-* variables — never hardcode a badge colour elsewhere.
   ========================================================================== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-md, 0.375rem);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: normal;
  max-width: 100%;
}
.status-badge i {
  font-size: 0.85em;
}
.status-badge--success {
  background: var(--admin-status-success-bg);
  color: var(--admin-status-success-text);
}
.status-badge--danger {
  background: var(--admin-status-danger-bg);
  color: var(--admin-status-danger-text);
}
.status-badge--warning {
  background: var(--admin-status-warning-bg);
  color: var(--admin-status-warning-text);
}
.status-badge--neutral {
  background: var(--admin-status-neutral-bg);
  color: var(--admin-status-neutral-text);
}
.status-badge--info {
  background: var(--admin-status-info-bg);
  color: var(--admin-status-info-text);
}

/* Standalone status icons (UAT 13/14) — variant → icon colour, resolved from
   the shared tokens. Used by the filter/select dropdown items so an icon's
   colour always follows the canonical adminHealthDisplayConfig variant. */
.status-icon--success { color: var(--admin-status-icon-success); }
.status-icon--danger { color: var(--admin-status-icon-danger); }
.status-icon--warning { color: var(--admin-status-icon-warning); }
.status-icon--neutral { color: var(--admin-status-icon-neutral); }
.status-icon--info { color: var(--admin-status-icon-info); }
/* Category (non-status) filter/select item icons — classification, section:
   brand purple from the shared token, never an inline hex per item (UAT
   2026-08-12: dashboardMembers/dashboardActivities carried style="color:#7B2D8E"). */
.status-icon--category { color: var(--color-primary); }

/* Health condition risk badges (semantic, reusable) */
.health-risk-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.health-risk-badge--high {
  background: var(--admin-status-danger-bg);
  color: var(--admin-status-danger-text);
}
.health-risk-badge--medium {
  background: var(--admin-status-warning-bg);
  color: var(--admin-status-warning-text);
}
.health-risk-badge--low {
  background: var(--admin-status-info-bg);
  color: var(--admin-status-info-text);
}

/* GRANT-ONLY sign-in profile badge (select-role page, 2026-07-23). */
.role-grant-only-badge {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* CSRF-01 — logout is a POST form styled to match the previous link. The form
   is a transparent wrapper so it does not disturb the header nav flex layout or
   the select-role footer; the button inside inherits the prior link's classes. */
.logout-form {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  display: inline-flex;
}
/* select-role footer: the button-as-link variant matches .back-link exactly. */
.back-link--button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.logout-form--link {
  margin-top: var(--spacing-4);
}
/* Logout confirmation page: primary "Sign out" + secondary "return" actions. */
.logout-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  justify-content: center;
  margin-top: var(--spacing-4);
}
.logout-confirm-actions .logout-form--confirm {
  display: inline-flex;
}

/* ── Terms of Use acknowledgement (F-111) ─────────────────────────────────────
   Shared by the standalone /terms-of-use page, the public /legal/terms-of-use
   document view, and the interstitial the gate renders IN PLACE at /dashboard,
   /profile/*, /security/* and /admin-console/*. It reuses the existing auth-page
   card, button and focus rules — the only additions here are the wider reading
   column legal prose needs and the typography inside the Terms fragment.

   The PAGE scrolls, not an inner box: a fixed-height inner scroller traps touch
   scrolling on short viewports, and the content must stay readable at any
   viewport height without trapping scroll. */
.terms-section {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-6);
  background: linear-gradient(
    135deg,
    var(--color-gray-50) 0%,
    var(--color-white) 100%
  );
}

.terms-container {
  /* Wider than the 480px auth cards — legal prose needs a reading measure. */
  max-width: 780px;
  width: 100%;
}

.terms-card {
  background-color: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-8);
}

/* The card is the programmatic focus anchor (tabindex="-1") termsGate.js moves
   focus to on load. It is never in the Tab order, so no ring is drawn. */
.terms-card:focus {
  outline: none;
}

.terms-version {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-4);
}

.terms-lead {
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  line-height: 1.6;
  margin-bottom: var(--spacing-6);
}

.terms-document {
  color: var(--color-gray-700);
  line-height: 1.65;
  /* Long URLs / unbroken strings in supplied legal wording must never widen the
     page — the portal's no-horizontal-overflow rule applies here too. */
  overflow-wrap: break-word;
}

.terms-document h2 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-3);
}

.terms-document h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-gray-800);
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-2);
}

/* Sub-clauses (e.g. "8.1 Discretion and confidentiality") — bold at body size
   with slightly tighter lead-in than a top-level numbered section, mirroring
   the approved agreement PDF's heading hierarchy. */
.terms-document h4 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-gray-800);
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-2);
}

/* The ORIGINAL approved agreement PDF download row: sits between the agreement
   text and the related policies, reusing the .terms-doc-link row treatment.
   The full document name wraps to several lines on narrow phones, so this row
   top-aligns its icons (the shared centre alignment would sink the document
   icon into the middle of a three-line label). */
.terms-source-doc {
  margin-top: var(--spacing-5);
  display: flex;
}
.terms-source-doc .terms-doc-link {
  align-items: flex-start;
}
.terms-source-doc .terms-doc-icon,
.terms-source-doc .terms-doc-external {
  margin-top: 2px;
  flex-shrink: 0;
}

.terms-document p,
.terms-document ul,
.terms-document ol {
  margin-bottom: var(--spacing-3);
}

.terms-document ul,
.terms-document ol {
  padding-left: var(--spacing-6);
}

.terms-document li {
  margin-bottom: var(--spacing-2);
}

.terms-document table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

/* Related legal documents. Presented as DOCUMENT ROWS, not inline prose links:
   the earlier bare text links read as ordinary body copy and gave no signal that
   they open a separate policy. Compact by design — supporting material beside
   the Terms, never competing with them. */
.terms-links {
  margin-top: var(--spacing-6);
}

.terms-links-heading {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-3);
}

.terms-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2) var(--spacing-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.terms-doc-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  max-width: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.terms-doc-link:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* The global a:focus-visible ring applies; the offset keeps it clear of the
   row's own border. */
.terms-doc-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Icons must not shrink when a long document name wraps the row. */
.terms-doc-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.terms-doc-external {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.75;
}

/* The label carries the underline (not the whole row, which would score under
   the icons too) and is the only part that may wrap — the icons stay aligned
   with it rather than centring against a two-line block. */
.terms-doc-name {
  overflow-wrap: break-word;
  min-width: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Announced via role="status"; the border + colour are supplementary, never the
   only carrier of the message. */
.terms-error {
  margin-top: var(--spacing-5);
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-error-bg);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

/* The acknowledgement group: the affirmative checkbox first, then the two
   actions below it. The divider sits ABOVE the checkbox because checkbox and
   buttons are ONE decision unit. */
.terms-acknowledge {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-3);
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--color-gray-200);
}

.terms-acknowledge-checkbox {
  /* Large enough to hit on touch; aligned to the first line of the label. */
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.terms-acknowledge-checkbox:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.terms-acknowledge-label {
  color: var(--color-gray-700);
  font-size: var(--font-size-base);
  line-height: 1.5;
  cursor: pointer;
}

/* The two actions are CENTRED as one group — this is a decision page, not a form
   footer, and neither choice is subordinate. */
.terms-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-4);
}

/* Sign out is a real, equally-visible choice — never a subordinate afterthought. */
.terms-accept-form,
.terms-signout-form {
  display: inline-flex;
  margin: 0;
}

@media (max-width: 640px) {
  .terms-section {
    padding: var(--spacing-4) var(--spacing-3);
  }
  .terms-card {
    padding: var(--spacing-5);
  }
  .terms-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .terms-accept-form,
  .terms-signout-form {
    display: flex;
  }
  .terms-accept-form .btn,
  .terms-signout-form .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Passkeys (F-099) ─────────────────────────────────────────────────────── */

/* Sign-in: "or" divider + passkey button block. */
.passkey-block {
  margin-top: var(--spacing-4);
}
.passkey-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  margin: var(--spacing-4) 0;
}
.passkey-divider::before,
.passkey-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--color-gray-200);
}
.passkey-divider span {
  padding: 0 var(--spacing-3);
}
.passkey-hint {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-top: var(--spacing-2);
}
.passkey-status {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  margin-top: var(--spacing-2);
  min-height: 1.25rem;
}
.passkey-status--error {
  color: var(--color-danger, #b3261e);
}

/* Profile: passkey management card. */
.profile-card-intro {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-3);
}
.passkey-manage-status {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  min-height: 1.25rem;
  margin-bottom: var(--spacing-2);
}
.passkey-list {
  list-style: none;
  margin: 0 0 var(--spacing-3) 0;
  padding: 0;
}
.passkey-empty {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  padding: var(--spacing-3) 0;
}
.passkey-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--color-gray-100);
}
.passkey-item:last-child {
  border-bottom: none;
}
.passkey-item--revoked {
  opacity: 0.7;
}
.passkey-item__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
  flex: 1 1 260px;
}
.passkey-item__name {
  color: var(--color-gray-900);
  overflow-wrap: anywhere;
}
.passkey-item__meta {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}
.passkey-item__actions {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  align-items: center;
}
.passkey-rename-input {
  width: auto;
  min-width: 12rem;
}
.passkey-confirm {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  flex-basis: 100%;
  text-align: center;
  margin-bottom: var(--spacing-2);
}
/* Remove + Cancel on ONE centred row; compact (never full-width) buttons that
   wrap cleanly on narrow screens. */
.passkey-confirm-actions {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}
.passkey-confirm-actions .btn {
  width: auto;
  flex: 0 0 auto;
  min-width: 6rem;
}
.passkey-add-row {
  padding-top: var(--spacing-4);
}

/* "Verify it's you" step-up modal. */
.passkey-verify-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.5);
  padding: var(--spacing-4);
}
.passkey-verify-modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: min(28rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.passkey-verify-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-900);
}
.passkey-verify-desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}
.passkey-verify-methods {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
.passkey-verify-hint {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}
/* Verify / Choose another method / Cancel share ONE centred, wrapping row of
   compact (natural-width) buttons with consistent height + alignment. */
.passkey-verify-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  margin-top: var(--spacing-3);
}
.passkey-verify-actions .btn {
  width: auto;
  flex: 0 0 auto;
}
.passkey-verify-status {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  min-height: 1.25rem;
}
.passkey-verify-status--error {
  color: var(--color-danger, #b3261e);
}

/* Security-enrolment reminder banner (F-099) — subtle, informational. */
.security-reminder-wrap {
  max-width: 1920px;
  margin: 0 auto;
  padding: var(--spacing-3) 1.5rem 0;
  width: 100%;
}
.security-reminder {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: var(--radius-lg);
  padding: var(--spacing-3) var(--spacing-4);
}
/* UAT-1: `display: flex` above defeats the UA's `[hidden] { display: none }`
   (any author `display` wins over the UA origin), which made the X dismiss —
   and the server-rendered pre-reveal state — appear to do nothing: the
   attribute WAS set, sessionStorage WAS written, but the banner stayed
   painted. The hidden attribute must always win. */
.security-reminder[hidden] {
  display: none;
}
.security-reminder__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--color-primary);
}
.security-reminder__text {
  flex: 1 1 16rem;
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  margin: 0;
}
.security-reminder__cta {
  width: auto;
  flex: 0 0 auto;
}
.security-reminder__dismiss {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--color-gray-500);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.security-reminder__dismiss svg {
  width: 18px;
  height: 18px;
}
.security-reminder__dismiss:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-gray-700);
}
.security-reminder__dismiss:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .security-reminder__cta {
    order: 3;
    flex-basis: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Mobile form-control zoom guard (portal-wide)

   iOS Safari auto-zooms the page when a focused input/textarea/select has an
   effective font-size below 16px. Floor every text-entry control at 16px on
   mobile-sized viewports so focusing a field never rescales the page.

   - First arm: the portal's shared mobile breakpoint (768px), any device.
   - Second arm: touch devices up to 1024px, so phone LANDSCAPE (844-932px)
     and tablets are covered without inflating narrow desktop windows.
   - max(16px, 1em) keeps a control that inherits a larger context size.
   - !important is the guarantee: page/component rules (e.g. .sr-ctl select at
     0.85rem) cannot pull the computed mobile size back under the iOS zoom
     threshold. Never add a competing !important font-size on a form control
     (enforced by tests/mobile-input-zoom-guard.test.js).
   - .regid-input (--font-size-lg) and .form-input-code (--font-size-xl) are
     excluded: their deliberate large type already clears 16px.
   - Pinch zoom must stay available; never "solve" this with user-scalable=no
     or maximum-scale in the viewport meta.
   - Mirrored in offline.css for the standalone offline pages, which do not
     load this stylesheet. Keep the two blocks identical.
*/
@media (max-width: 768px), (pointer: coarse) and (max-width: 1024px) {
  input:not(.regid-input):not(.form-input-code),
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }
}

/* Browser-to-app onboarding (PWA recommendation — PWA_ENFORCE_CHECK_ENABLED)
   ==========================================================================
   Advisory interstitial over the sign-in landing. Rendered hidden; revealed
   by /js/pwaOnboarding.js only in browser (non-installed) display mode with
   no active suppression. Built entirely from the existing token system: the
   Scout purple identifies the app/private path, the portal's amber caution
   family marks the shared/public path (never colour alone — each path also
   carries its own icon, heading and copy), and actions reuse .btn roles.

   Scale (F-133 final UAT pass): the ~780px/large-type tier overshot — the
   desktop dialog is now capped at 640px with standard button/type scale, and
   the INITIAL state fits a 14-inch laptop (1440×900, density tier active)
   without internal scrolling; a short-viewport arm (≤760px tall) compacts
   further so 1280×720 also fits. The px width cap is DELIBERATE so the
   ≥1440px density tier's 14px rem root cannot shrink the dialog's footprint. */
.pwa-onboarding {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
}

/* UAT-1 cascade lesson (see .security-reminder[hidden]): the author
   `display: flex` above would defeat the UA's `[hidden] { display: none }`,
   leaving the overlay permanently painted and "Continue in browser" visually
   dead. This override is LOAD-BEARING — never remove it. */
.pwa-onboarding[hidden] {
  display: none;
}

/* And the same lesson for EVERY toggle inside the overlay (install button
   .btn is inline-flex, eyebrows/steps are flex, …): any [hidden] element in
   here must actually disappear, whatever author display rule it carries.
   Scoped !important — display only, nothing to do with the zoom-guard's
   font-size rules. */
.pwa-onboarding [hidden] {
  display: none !important;
}

body.pwa-onboarding-open {
  overflow: hidden;
}

.pwa-onboarding__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgb(17 24 39 / 0.55);
  animation: pwa-onboarding-fade 150ms ease-out;
}

.pwa-onboarding__dialog {
  position: relative;
  background-color: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-height: calc(100dvh - 2 * var(--spacing-4));
  overflow-y: auto;
  padding: var(--spacing-6) var(--spacing-5);
  animation: pwa-onboarding-rise 180ms ease-out;
}

.pwa-onboarding__dialog:focus {
  outline: none;
}

@keyframes pwa-onboarding-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pwa-onboarding-rise {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-onboarding__backdrop,
  .pwa-onboarding__dialog {
    animation: none;
  }
}

/* The conventional dismissal affordance — EXACTLY "Continue in browser"
   (same canonical dismissal, same checkbox semantics). 40px target. */
.pwa-onboarding__close {
  position: absolute;
  top: var(--spacing-3);
  right: var(--spacing-3);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  color: var(--color-gray-500);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  z-index: 1;
}

.pwa-onboarding__close:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}

.pwa-onboarding__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pwa-onboarding__close svg {
  width: 20px;
  height: 20px;
}

.pwa-onboarding__header {
  text-align: center;
  margin-bottom: var(--spacing-6);
}

/* The app badge: the actual install icon in a brand-gradient tile, so the
   header literally shows what lands on the Home Screen / taskbar. */
.pwa-onboarding__badge {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-xl);
  background: var(--admin-brand-gradient);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-3);
}

.pwa-onboarding__badge img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background-color: var(--color-white);
  border-radius: calc(var(--radius-xl) - 3px);
  padding: var(--spacing-1);
}

.pwa-onboarding__badge--done {
  background: var(--color-success);
}

.pwa-onboarding__badge--done svg {
  width: 52px;
  height: 52px;
  padding: var(--spacing-2);
  background-color: var(--color-white);
  border-radius: calc(var(--radius-xl) - 3px);
  color: var(--color-success);
}

.pwa-onboarding__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1.3;
}

.pwa-onboarding__title:focus {
  outline: none;
}

.pwa-onboarding__intro {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-base);
  color: var(--color-gray-500);
}

/* The device fork — the screen's real content: two scenario paths. */
.pwa-onboarding__paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-5);
}

.pwa-path {
  border-radius: var(--radius-xl);
  padding: var(--spacing-4) var(--spacing-5);
  font-size: var(--font-size-base);
  line-height: 1.55;
}

.pwa-path p {
  margin: 0 0 var(--spacing-2);
}

.pwa-path p:last-child {
  margin-bottom: 0;
}

.pwa-path--private {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-top: 3px solid var(--color-primary);
}

.pwa-path--shared {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  border-top: 3px solid var(--admin-status-icon-warning);
}

.pwa-path--shared strong {
  color: #92400e;
}

.pwa-path__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-3);
}

.pwa-path--private .pwa-path__eyebrow {
  color: var(--color-primary-dark);
}

.pwa-path--shared .pwa-path__eyebrow {
  color: #92400e;
}

.pwa-path__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.pwa-path__note {
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px dashed var(--color-gray-300);
  color: var(--color-gray-600);
}

/* Manual installation guidance (shown INSTEAD of the install button once no
   native path remains). Tied to the ACTION blue — it is the "how to do the
   primary action" panel, never worded or styled as an error. */
.pwa-onboarding__guide {
  background-color: var(--color-info-bg, #eff6ff);
  border: 1px solid var(--color-info-border, #bfdbfe);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4) var(--spacing-5);
  margin-bottom: var(--spacing-5);
  font-size: var(--font-size-sm);
}

.pwa-onboarding__guide-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-info-text, #1e40af);
  margin-bottom: var(--spacing-2);
}

.pwa-onboarding__guide-title:focus {
  outline: none;
}

.pwa-onboarding__guide p {
  margin: 0 0 var(--spacing-2);
}

.pwa-onboarding__guide p:last-child {
  margin-bottom: 0;
}

.pwa-onboarding__steps {
  margin: 0;
  padding-left: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* Samsung Internet choice (2026-09-10): the set carries its OWN action row
   inside the guidance panel — Continue in browser is the primary — and an
   optional follow-up block (the Chrome steps) revealed beneath it. */
.pwa-onboarding__guide .pwa-onboarding__actions {
  margin: var(--spacing-4) 0 0;
}

.pwa-onboarding__guide-followup {
  margin-top: var(--spacing-4);
}

.pwa-onboarding__guide-subtitle {
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin: 0 0 var(--spacing-2);
}

.pwa-onboarding__guide-subtitle:focus {
  outline: none;
}

.pwa-onboarding__actions {
  margin-bottom: var(--spacing-4);
}

/* .btn-primary is full-width by default in this stylesheet (sign-in forms);
   inside the action row the two choices sit side by side — secondary first,
   then the recommended primary (the .modal-actions convention). */
.pwa-onboarding__actions .btn {
  width: auto;
  flex: 0 1 auto;
  min-width: 13rem;
}

.pwa-onboarding__suppress {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  border-top: 1px solid var(--color-gray-200);
  padding-top: var(--spacing-4);
}

.pwa-onboarding__suppress-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1875rem;
  flex-shrink: 0;
  accent-color: var(--btn-primary-bg);
}

.pwa-onboarding__suppress-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-700);
  cursor: pointer;
}

.pwa-onboarding__suppress-hint {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Desktop / laptop: a balanced decision dialog — 640px cap (px on purpose:
   immune to the ≥1440px density tier's 14px rem root), standard type and
   button scale. The INITIAL state fits 1440×900 without internal scroll. */
@media (min-width: 768px) {
  .pwa-onboarding__dialog {
    width: min(640px, 100%);
    padding: var(--spacing-8);
  }
}

/* Short desktop viewports (e.g. 1280×720): compact the vertical rhythm so
   the initial state still avoids scrolling — never transform-scale. */
@media (min-width: 768px) and (max-height: 760px) {
  .pwa-onboarding__dialog {
    padding: var(--spacing-6) var(--spacing-8);
  }
  .pwa-onboarding__header {
    margin-bottom: var(--spacing-4);
  }
  .pwa-onboarding__badge img,
  .pwa-onboarding__badge--done svg {
    width: 44px;
    height: 44px;
  }
  .pwa-path {
    font-size: var(--font-size-sm);
    padding: var(--spacing-3) var(--spacing-4);
  }
  .pwa-onboarding__intro {
    margin-top: var(--spacing-1);
  }
}

@media (max-width: 560px) {
  .pwa-onboarding__paths {
    grid-template-columns: 1fr;
  }
  .pwa-onboarding__actions .btn {
    flex: 1 1 100%;
  }
}

/* ── Sign-out offline-report choice (offlineManager.js, 2026-09-02) ──────────
   Built in JS (CSP-safe). Shown on the authenticated header sign-out AND the
   /logout confirmation page, so it lives here (both load styles.css; the
   offline pages' offline.css is not loaded on either). Keep and remove are
   EQUAL weight (the same .btn-secondary) and nothing is pre-selected; the
   dialog itself receives focus. */
.logout-choice-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
  background: rgba(31, 27, 36, 0.55);
}

.logout-choice-dialog {
  width: 100%;
  max-width: 460px;
  background: var(--color-white);
  color: var(--color-gray-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-5);
  outline: none;
}

.logout-choice-dialog:focus-visible {
  box-shadow: var(--shadow-xl), 0 0 0 3px var(--color-primary-light);
}

.logout-choice-title {
  margin: 0 0 var(--spacing-3);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-primary-dark);
}

.logout-choice-notes {
  margin: 0 0 var(--spacing-4) var(--spacing-4);
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
}

.logout-choice-notes li {
  margin: 0 0 var(--spacing-2);
}

.logout-choice-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.logout-choice-actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

.logout-choice-actions .btn-link {
  width: auto;
  align-self: center;
  padding: var(--spacing-2) var(--spacing-3);
}

/* ── Sign-in page offline panel (signinOffline.js, 2026-09-02) ───────────────
   `.alert` is display:flex, which would defeat the UA's [hidden] rule (UAT-1
   cascade lesson) — so the panel and its notice hint restate it explicitly. */
.signin-offline-panel {
  align-items: flex-start;
}

.signin-offline-panel[hidden] {
  display: none;
}

.signin-offline-panel .signin-offline-cta {
  margin-top: var(--spacing-2);
}

.signin-offline-hint[hidden] {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP DENSITY TIERS (2026-08-13, retuned for the real 14-inch laptop)
   ═══════════════════════════════════════════════════════════════════════════
   MEASURED TARGET: 14-inch Windows laptops run 1920×1080 @ 125% or
   2880×1800 @ 150% OS scaling → a CSS viewport of 1440–1536 px at 100%
   browser zoom. The original single ≥1600px tier therefore missed the
   primary UAT device entirely. Tiers key on CSS viewport width ONLY (never
   physical resolution/DPR), so browser zoom composes naturally:
     1536-class laptop:  80% zoom → 1920 CSS (compact)  · 100% → 1536
     (COMPACT — the fix) · 110% → ~1396 (standard) · 125% → 1229 (standard)
     1920 desktop:  80% → 2400 (compact+) · 100% → 1920 (compact+) ·
     125% → 1536 (compact) · 150% → 1280 (standard)

   TIER 1 — COMPACT DESKTOP, ≥1440px (the 14-inch laptop range):
     rem basis 16px → 14px (the portal is rem-built, so typography, page
     headings, buttons, chips, cards, table cell padding, badges, pagination
     and modal spacing condense proportionally — the ~80%-zoom density
     target), header 72px → 60px (token drives the sticky offset chain),
     sidebar 220px → 204px, metric-card floor 200px → 184px (six statistic
     cards fit one row at 1536).
   TIER 2 — LARGE DESKTOP, ≥1600px: retains tier 1 and refines the shell
     further (sidebar 196px).

   MECHANISM — tokens only, never component rules (cascade-safe by
   construction: nothing here can override tablet/mobile/component/[hidden]/
   sticky/print/report-viewer rules). ≤1439px — 1366 laptops, tablets,
   mobile — is byte-identical to the standard layout (fixture-proven).
   Do NOT add component selectors, `zoom`, or `transform: scale()` here.
   The ≥1440px arms are provably disjoint from the mobile input zoom-guard
   arms (≤768px / coarse ≤1024px) — pinned in mobile-input-zoom-guard tests. */
@media (min-width: 1440px) {
  html {
    font-size: 14px;
  }
  :root {
    --sidebar-width: 204px;
    --header-height: 60px;
    --metric-card-min: 184px;
    --person-card-min: 260px;
  }
}
@media (min-width: 1600px) {
  :root {
    --sidebar-width: 196px;
  }
}