/*
 * SafeEntry design tokens and Bootstrap 5.3 overrides (DESIGN.md sections 2.2, 2.5, 3 and 4).
 * Load after lib/bootstrap/css/bootstrap.min.css. Platform-owned: lanes put page styles in their own files
 * and use these tokens rather than raw hex values.
 */

/* Fonts are self-hosted (Latin subset, font-display: swap), so no page calls a third-party font CDN. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}

:root {
  /* Pass status (D160): green good, blue near or expired, red flagged. Each pair is at least 4.5:1 (WCAG AA). */
  --status-good: #1f7a4a; --status-good-text: #ffffff;
  --status-near: #1f5fad; --status-near-text: #ffffff;
  --status-flagged: #a8232f; --status-flagged-text: #ffffff;
  /* Ink: text and primary actions (from the logo's #383838) */
  --ink-900: #262626;   /* primary button background, headings */
  --ink-800: #383838;   /* body text */
  --ink-700: #4A4A4A;   /* primary button hover */

  /* Sand: neutrals (from the logo's tan and the site's off-white) */
  --sand-50:  #F7F6F5;  /* app canvas */
  --sand-100: #F0EBDF;  /* subtle surface, neutral chips */
  --sand-200: #E5E0D8;  /* hairline borders, dividers */
  --sand-300: #CFC7B8;  /* input borders */
  --sand-500: #9C8E75;  /* decorative: logo tan, focus ring base. Never body text */
  --sand-700: #6E6450;  /* secondary text (5.8:1 on white) */

  /* Brand red: brand moments and critical states only (DESIGN.md 2.1, "red means stop") */
  --red-600: #C41D2B;   /* 5.9:1 on white */
  --red-700: #9A1520;   /* pressed / hover */
  --red-50:  #FFE3E3;   /* critical background */

  /* Status */
  --success-600: #1E7A46;  --success-50: #E8F5EC;   /* active, clear */
  --info-600:    #1F5FAD;  --info-50:    #EAF1FB;   /* screening in progress */
  --warning-600: #9A5B00;  --warning-50: #FFF4E0;   /* provider error, timeout */

  --surface: #FFFFFF;
  /* D181: a box-shadow twin of --focus-outline for the few places that draw focus on another element (5.8:1 on white, WCAG 1.4.11) */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--sand-700);

  /* Shape and elevation (DESIGN.md 4) */
  --radius-card: 10px;
  --radius-pass: 16px;
  --shadow-card: 0 1px 2px rgba(38, 38, 38, .06), 0 1px 3px rgba(38, 38, 38, .08);
  --shadow-modal: 0 12px 32px rgba(38, 38, 38, .18);

  /* Bootstrap mapping (DESIGN.md 2.5) */
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--ink-800);
  --bs-body-bg: var(--sand-50);
  --bs-border-color: var(--sand-200);
  --bs-border-radius: 6px;
  --bs-border-radius-lg: 10px;
  --bs-border-radius-pill: 999px;
  --bs-link-color: var(--ink-900);
  --bs-link-hover-color: var(--red-700);
  --bs-danger: #C41D2B;  --bs-danger-rgb: 196, 29, 43;
  --bs-success: #1E7A46; --bs-success-rgb: 30, 122, 70;
  --bs-info: #1F5FAD;    --bs-info-rgb: 31, 95, 173;
  --bs-warning: #9A5B00; --bs-warning-rgb: 154, 91, 0;
}

/* D181 (docs/briefs/D181-ui-ux-audit.md 1.2): the shared token set. Brand values above are unchanged; lanes use these, not raw values. */
:root {
  /* Spacing: 4 px base (DESIGN.md 4) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Type: Poppins 600 for headings and display, Inter 400/500/600. Each view uses at most 4 sizes. */
  --fs-display: 2.5rem;  --lh-display: 1.15;
  --fs-h1: 1.75rem;      --lh-h1: 1.25;
  --fs-h2: 1.375rem;     --lh-h2: 1.25;
  --fs-h3: 1.125rem;     --lh-h3: 1.35;
  --fs-body: 1rem;       --lh-body: 1.5;
  --fs-body-visitor: 1.0625rem;
  --fs-small: .875rem;   --lh-small: 1.45;
  --fs-caption: .75rem;  --lh-caption: 1.35;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --measure: 65ch;

  /* Text tiers (all AA on white and on --sand-50) */
  --text-primary: var(--ink-900);
  --text-body: var(--ink-800);
  --text-secondary: var(--sand-700);
  --text-tertiary: #7A705C;          /* captions only: 4.9:1 on white, 4.5:1 on sand-50 */
  --text-on-ink: #FFFFFF;

  /* Surfaces and borders */
  --canvas: var(--sand-50); --surface-sunken: var(--sand-100);
  --border-subtle: var(--sand-200); --border-strong: var(--sand-300);
  --ink-950: #1C1B19;                /* pressed primary (tinted, never pure black) */

  /* Shape */
  --radius-control: 6px; --radius-pill: 999px;

  /* Interaction */
  --target-min: 44px; --target-visitor: 48px;
  --focus-outline: 2px solid var(--sand-700);   /* 5.8:1 on white (WCAG 1.4.11) */
  --focus-offset: 2px;
  --press-scale: .98;
  --disabled-opacity: .5;
  --dur-fast: 120ms;

  /* Pass colours of the day (DESIGN.md 2.4), so the pass needs no inline style */
  --day-slate: #475569; --day-gold: #7A6A00; --day-violet: #6D28D9;
  --day-indigo: #4338CA; --day-magenta: #A21CAF; --day-copper: #9A4A00;

  /* Bootstrap mapping additions, so .text-secondary, .text-muted and .text-body-secondary are tinted */
  --bs-secondary: var(--sand-700); --bs-secondary-rgb: 110, 100, 80;
  --bs-secondary-color: var(--sand-700);
  --bs-tertiary-color: #7A705C;
  --bs-emphasis-color: var(--ink-900);
  --bs-secondary-bg: var(--sand-100);
  --bs-tertiary-bg: var(--sand-50);
  --bs-heading-color: var(--ink-900);
  --bs-focus-ring-color: rgba(110, 100, 80, .5);
}

h1, h2, h3, .display-1, .display-2 { font-family: "Poppins", sans-serif; font-weight: 600; color: var(--ink-900); }

/* Only Poppins 600 and Inter 400/500/600 are loaded, so no rule asks for 300 or 700 (no faux bold). */
strong, b, dt, .alert-link { font-weight: var(--fw-semibold); }
.fw-bold, .fw-bolder { font-weight: var(--fw-semibold) !important; }
.fw-light, .fw-lighter { font-weight: var(--fw-regular) !important; }
.lead, .display-3, .display-4, .display-5, .display-6 { font-weight: var(--fw-regular); }
.badge { --bs-badge-font-weight: var(--fw-semibold); }

/* Focus: one visible ring on every control (WCAG 2.4.7, 1.4.11). Bootstrap's blue focus shadows are switched off. */
:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); box-shadow: none; }
.btn:focus-visible, .btn-check:focus-visible + .btn, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
  outline: var(--focus-outline); outline-offset: var(--focus-offset); box-shadow: none;
}
.form-control, .form-select { border-color: var(--border-strong); background-color: var(--surface); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--sand-700); box-shadow: none; }
.form-check-input:checked { background-color: var(--ink-900); border-color: var(--ink-900); }

/* Buttons (DESIGN.md 5): 44 px tall, Inter 600, press feedback, a clear disabled state. */
.btn {
  --bs-btn-padding-y: .5625rem;   /* 24 px line + 18 px padding + 2 px border = 44 px */
  --bs-btn-font-weight: 600;
  --bs-btn-focus-box-shadow: none;
  --bs-btn-disabled-opacity: var(--disabled-opacity);
  min-height: var(--target-min);
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, transform var(--dur-fast) ease-out;
}
.btn-sm, .btn-group-sm > .btn { --bs-btn-padding-y: .65625rem; }   /* 21 px line + 21 px padding + 2 px border = 44 px */
.btn-lg, .btn-group-lg > .btn { --bs-btn-padding-y: .5rem; }
.btn-link { --bs-btn-font-weight: 500; }
.btn:active:not(:disabled):not(.disabled) { transform: scale(var(--press-scale)); }
.btn:disabled, .btn.disabled, fieldset:disabled .btn { opacity: var(--disabled-opacity); }
.btn:disabled, fieldset:disabled button.btn { cursor: not-allowed; pointer-events: auto; }   /* a disabled <button> ignores clicks anyway; links (a.btn) in a disabled fieldset keep pointer-events: none */

.btn-primary, .btn-dark {
  --bs-btn-color: var(--text-on-ink); --bs-btn-bg: var(--ink-900); --bs-btn-border-color: var(--ink-900);
  --bs-btn-hover-color: var(--text-on-ink); --bs-btn-hover-bg: var(--ink-700); --bs-btn-hover-border-color: var(--ink-700);
  --bs-btn-active-color: var(--text-on-ink); --bs-btn-active-bg: var(--ink-950); --bs-btn-active-border-color: var(--ink-950);
  --bs-btn-disabled-color: var(--text-on-ink); --bs-btn-disabled-bg: var(--ink-900); --bs-btn-disabled-border-color: var(--ink-900);
}
/* Secondary: white fill, ink text, sand-300 border (DESIGN.md 5) */
.btn-secondary, .btn-outline-secondary, .btn-outline-dark {
  --bs-btn-color: var(--ink-900); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--ink-900); --bs-btn-hover-bg: var(--sand-100); --bs-btn-hover-border-color: var(--sand-500);
  --bs-btn-active-color: var(--ink-900); --bs-btn-active-bg: var(--sand-200); --bs-btn-active-border-color: var(--sand-500);
  --bs-btn-disabled-color: var(--ink-900); --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--border-strong);
}
.btn-ghost {
  --bs-btn-color: var(--ink-900); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--ink-900); --bs-btn-hover-bg: var(--sand-100); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--ink-900); --bs-btn-active-bg: var(--sand-200); --bs-btn-active-border-color: transparent;
}
.btn-danger {
  --bs-btn-hover-bg: var(--red-700); --bs-btn-hover-border-color: var(--red-700);
  --bs-btn-active-bg: var(--red-700); --bs-btn-active-border-color: var(--red-700);
}

/* Bootstrap colour fixes: the stock .text-bg-warning and .text-bg-info put black on our darker warning and info (under 4.5:1). */
.text-bg-warning, .text-bg-info { color: var(--text-on-ink) !important; }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--ink-900); --bs-dropdown-link-active-color: var(--text-on-ink); --bs-dropdown-border-color: var(--border-subtle); }
.pagination {
  --bs-pagination-color: var(--ink-900); --bs-pagination-hover-color: var(--ink-900); --bs-pagination-focus-color: var(--ink-900);
  --bs-pagination-active-bg: var(--ink-900); --bs-pagination-active-border-color: var(--ink-900); --bs-pagination-focus-box-shadow: none;
}


/* The 4 px brand bar along the top of every page (DESIGN.md 4) */
.brand-bar { height: 4px; background: var(--red-600); }

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

/* SafeEntry wordmark with the "by Datasource" endorsement */
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.wordmark-mark { width: 40px; height: auto; }
.wordmark-name { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.5rem; line-height: 1; color: var(--ink-900); }
.wordmark-by { display: block; margin-top: 4px; font-size: .75rem; font-weight: 500; line-height: 1rem; color: var(--sand-700); }
.wordmark-lg .wordmark-mark { width: 72px; }
.wordmark-lg .wordmark-name { font-size: 2.5rem; }
.wordmark-lg .wordmark-by { font-size: .875rem; }

.surface-card { background: var(--surface); border: 1px solid var(--sand-200); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
/* D179a: the /admin onboarding page width (was an inline style; the page runs under the strict card-page CSP). */
.ops-page { max-width: 960px; }

/*
 * D181 shared components (brief 1.2). Lanes use these instead of hand-rolling their own.
 */
/* Skip link (WCAG 2.4.1): hidden until focused; the layout's first focusable element, pointing at #main-content. */
.skip-link {
  position: absolute; top: var(--space-2); left: var(--space-4); z-index: 1090;
  display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-4);
  background: var(--ink-900); color: var(--text-on-ink); border-radius: var(--radius-control);
  font-weight: var(--fw-semibold); text-decoration: none; transform: translateY(-200%);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; color: var(--text-on-ink); }

/* Page widths (replace inline style="max-width"; T3.1 will tighten style-src to 'self'). Use with .container. */
.page-compact { max-width: 480px; }
.page-form { max-width: 640px; }
.page-narrow { max-width: 720px; }
.page-wide { max-width: 1280px; }

/* Status chips (DESIGN.md 2.3): pill, caption size, always icon plus label. Replace badge text-bg-* for status. */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: 1rem; white-space: nowrap;
  background: var(--sand-100); color: var(--sand-700);
}
.chip-good     { background: var(--success-50); color: var(--success-600); }
.chip-info     { background: var(--info-50); color: var(--info-600); }
.chip-critical { background: var(--red-50); color: var(--red-600); }
.chip-denied   { background: var(--red-600); color: var(--text-on-ink); }
.chip-warn     { background: var(--warning-50); color: var(--warning-600); }
.chip-expired  { background: var(--sand-100); color: var(--sand-700); }
.chip-out      { background: transparent; border-color: var(--border-strong); color: var(--sand-700); }

/* Counts in section headers: neutral; .count-critical only when the count is above 0. */
.count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; padding: 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--sand-100); color: var(--ink-800);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1; font-variant-numeric: tabular-nums; vertical-align: middle;
}
.count-critical { background: var(--red-600); color: var(--text-on-ink); }

/* Critical banner (DESIGN.md 5 alert banner): red-50, a 4 px red-600 left border, ink text. Works with or without .alert. */
.alert-critical {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--red-50); color: var(--ink-900); border: 0; border-left: 4px solid var(--red-600); border-radius: 0;
}
.alert-critical > .bi { color: var(--red-600); }

/* Empty state (DESIGN.md 5): one line of why plus one action, left-aligned; .empty-state-page centres it when it is the whole page. */
.empty-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4); color: var(--text-secondary); }
.empty-state > .bi { font-size: 1.25rem; color: var(--text-tertiary); }
.empty-state p { margin: 0; max-width: var(--measure); }
.empty-state-page { flex-direction: column; justify-content: center; padding: var(--space-8) var(--space-4); text-align: center; }

/* Loading rows sized like table rows; mark the container aria-busy="true". The shimmer stops under reduced motion (below). */
.skeleton-row { position: relative; overflow: hidden; height: 48px; border-radius: var(--radius-control); background: var(--sand-100); }
.skeleton-row + .skeleton-row { margin-top: var(--space-2); }
.skeleton-row::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes skeleton-sweep { to { transform: translateX(100%); } }
/* Reduced motion: no press scale, no button transition, no shimmer (after the rules it overrides). */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active:not(:disabled):not(.disabled) { transform: none; }
  .skeleton-row::after { animation: none; }
}

/* Busy button: put <span class="spinner-border" aria-hidden="true"></span> inside; it shows while the button has aria-busy="true". */
.btn-busy .spinner-border { display: none; width: 1rem; height: 1rem; margin-right: var(--space-2); border-width: .15em; vertical-align: -.125em; }
.btn-busy[aria-busy="true"] { pointer-events: none; }
.btn-busy[aria-busy="true"] .spinner-border { display: inline-block; }

/* Data tables (DESIGN.md 5): sticky sand-100 header, 48 px rows (56 on touch), sand-50 row hover, no zebra stripes. */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); color: var(--text-body); }
.data-table th, .data-table td { height: 48px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: middle; }
.data-table thead th { position: sticky; top: 0; z-index: 1; background: var(--sand-100); color: var(--text-secondary); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.data-table tbody tr:hover > * { background: var(--sand-50); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .truncate { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (pointer: coarse) { .data-table th, .data-table td { height: 56px; } }

/* Colour of the day on the pass: sets --day-colour, which pass.css reads (no inline style). */
.day-slate { --day-colour: var(--day-slate); }
.day-gold { --day-colour: var(--day-gold); }
.day-violet { --day-colour: var(--day-violet); }
.day-indigo { --day-colour: var(--day-indigo); }
.day-magenta { --day-colour: var(--day-magenta); }
.day-copper { --day-colour: var(--day-copper); }

/*
 * Landing page at / (H1; Views/Home/Index.cshtml). Values from mockups/Landing/L1-landing.dc.html (desktop, 1440 px); the narrow-width
 * rules at the end are ours (D143 (7)). Scoped to body.landing, so no other page changes.
 */
body.landing { background: var(--surface); color: var(--ink-800); overflow-x: hidden; }
@media (prefers-reduced-motion: no-preference) { html:has(> body.landing) { scroll-behavior: smooth; } }
.landing {
  --lp-band: #F8F5EF;   /* section band in the mockup, between sand-50 and sand-100 */
  --lp-shadow: 0 1px 2px rgba(38, 38, 38, .06), 0 8px 24px rgba(38, 38, 38, .08);
}
.landing a { color: var(--ink-900); }
.landing a:hover { color: var(--ink-700); }
.landing p, .landing ul, .landing ol, .landing h1, .landing h2, .landing h3 { margin: 0; }
.landing ul, .landing ol { padding: 0; list-style: none; }
.landing strong { font-weight: 600; }
.lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.lp-grow { flex: 1; min-width: 0; }
.ico { flex: none; width: 16px; height: 16px; fill: currentColor; }
.ico-10 { width: 10px; height: 10px; }
.ico-13 { width: 13px; height: 13px; }
.ico-15 { width: 15px; height: 15px; }
.ico-20 { width: 20px; height: 20px; }
.ico-22 { width: 22px; height: 22px; }

/* Buttons */
.landing .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 6px; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.landing .lp-btn-ink { padding: 0 18px; background: var(--ink-900); color: #FFFFFF; }
.landing .lp-btn-ink:hover { background: var(--ink-700); color: #FFFFFF; }
.landing .lp-btn-line { background: #FFFFFF; border-color: var(--sand-300); color: var(--ink-900); }
.landing .lp-btn-line:hover { background: var(--lp-band); color: var(--ink-900); }
.landing .lp-btn-white { background: #FFFFFF; color: var(--ink-900); }
.landing .lp-btn-white:hover { background: var(--sand-100); color: var(--ink-900); }
.landing .lp-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .6); color: #FFFFFF; }
.landing .lp-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.landing .lp-btn-md { min-height: 48px; padding: 0 22px; font-size: 16px; }
.landing .lp-btn-lg { min-height: 52px; padding: 0 22px; font-size: 17px; }
.landing .lp-btn-lg.lp-btn-ink { padding: 0 24px; }
.landing .lp-btn-lg.lp-btn-white { padding: 0 26px; }

/* Header */
.lp-header { background: var(--surface); border-bottom: 1px solid var(--sand-200); }
.lp-header .lp-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 14px; padding-bottom: 14px; }
.lp-logo { display: flex; align-items: center; min-height: 44px; }
.lp-logo img { display: block; width: 130px; height: 32px; }
.lp-nav { flex: 1 1 360px; display: flex; flex-wrap: wrap; gap: 2px; }
.landing .lp-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 6px; font-size: 15px; font-weight: 500; color: var(--ink-800); text-decoration: none; }
.landing .lp-nav a:hover { background: var(--lp-band); color: var(--ink-900); }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Hero */
.lp-hero { padding: 72px 0 80px; }
.lp-hero > .lp-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.lp-hero-copy { flex: 1 1 460px; min-width: 0; }
.lp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--sand-100); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--sand-700); }
.landing .lp-hero h1 { margin-top: 20px; font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.12; text-wrap: balance; }
.landing .lp-lead { margin-top: 20px; max-width: 560px; font-size: 19px; line-height: 30px; }
.landing .lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.landing .lp-checks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; font-size: 15px; line-height: 22px; }
.lp-checks li { display: flex; align-items: center; gap: 8px; }
.lp-checks .ico { color: var(--ink-900); }

/* Hero illustration: the staff board behind a phone showing a live pass */
.lp-hero-art { flex: 1 1 440px; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
.lp-stage { position: relative; width: 100%; max-width: 520px; height: 560px; }
.lp-card { overflow: hidden; background: var(--surface); border: 1px solid var(--sand-200); border-radius: 12px; box-shadow: var(--lp-shadow); }
.lp-mini { position: absolute; top: 56px; left: 0; width: 76%; }
.lp-card-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--sand-200); }
.lp-card-title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px; color: var(--ink-900); }
.lp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--sand-100); font-size: 11px; font-weight: 600; color: var(--ink-800); }
.lp-thead { display: flex; align-items: center; height: 28px; padding: 0 16px; background: var(--sand-100); font-size: 11px; font-weight: 600; color: var(--sand-700); }
/* Heights include the 1px row border; the mockup draws 44 px rows (and 46 px on the board) plus the border. */
.lp-row { display: flex; align-items: center; gap: 10px; height: 45px; padding: 0 16px; border-top: 1px solid var(--sand-200); font-size: 12px; }
.lp-av { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--sand-100); font-size: 10px; font-weight: 600; color: var(--ink-800); }
.lp-name { font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-until { width: 72px; text-align: right; color: var(--ink-800); }
.lp-phone { position: absolute; top: 0; right: 0; width: 256px; height: 540px; overflow: hidden; background: var(--surface); border: 10px solid var(--ink-900); border-radius: 40px; box-shadow: var(--shadow-modal); }
.lp-pass-top { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 196px; padding-bottom: 20px; text-align: center; color: #FFFFFF; }
.lp-word { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 28px; line-height: 34px; letter-spacing: .08em; }
.lp-clock { font-weight: 600; font-size: 26px; line-height: 30px; }
.lp-where { margin-top: 6px; font-size: 11px; line-height: 14px; font-weight: 500; }
.lp-shimmer { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent); transform: translateX(-100%); pointer-events: none; }
@keyframes lp-sweep { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: no-preference) { .lp-live .lp-shimmer { animation: lp-sweep 4s linear infinite; } }
.lp-live.lp-paused .lp-shimmer { animation-play-state: paused; }
/* WCAG 2.2.2 pause control (not in the mockup): small and quiet, in the empty corner under the "On campus now" card, at the stage's left
 * edge. Hidden in the markup; landing.js shows it only while the clock and shimmer run, so never without JS or with reduced motion. */
.landing .lp-pause { position: absolute; bottom: 0; left: max(0px, calc((100% - 520px) / 2)); display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--sand-300); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink-800); cursor: pointer; }
.landing .lp-pause:hover { background: var(--lp-band); color: var(--ink-900); }
.lp-pass-card { position: relative; margin: -20px 10px 0; padding: 12px; background: var(--surface); border: 1px solid var(--sand-200); border-radius: 12px; }
.lp-person { display: flex; align-items: center; gap: 10px; }
.landing .lp-av-lg { width: 48px; height: 48px; font-family: "Poppins", sans-serif; font-size: 17px; }
.lp-person-text { display: flex; flex-direction: column; min-width: 0; }
.lp-person-name { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 16px; line-height: 22px; color: var(--ink-900); }
.lp-person-sub { font-size: 11px; line-height: 15px; color: var(--sand-700); }
.lp-valid { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; line-height: 14px; }
.lp-valid strong { color: var(--ink-900); }
.lp-muted { color: var(--sand-700); }
.lp-bar { height: 4px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--sand-200); }
.lp-bar span { display: block; width: 13%; height: 4px; background: var(--info-600); }
.lp-qr-wrap { display: flex; justify-content: center; margin-top: 12px; }
.lp-qr { width: 144px; height: 144px; padding: 4px; border: 2px solid var(--ink-900); border-radius: 8px; fill: var(--ink-900); shape-rendering: crispEdges; }
.landing .lp-pass-caption { margin-top: 8px; text-align: center; font-size: 11px; line-height: 14px; color: var(--sand-700); }

/* Pass colors of the day (sample days) */
.lp-slate { background: #475569; }
.lp-gold { background: #7A6A00; }
.lp-violet { background: #6D28D9; }

/* Staff sign-in band */
.lp-band { background: var(--lp-band); border-top: 1px solid var(--sand-200); border-bottom: 1px solid var(--sand-200); }
.lp-band .lp-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.lp-band-text { flex: 1 1 420px; min-width: 0; display: flex; align-items: center; gap: 14px; }
.lp-band-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; background: var(--surface); border: 1px solid var(--sand-200); color: var(--ink-900); }
.lp-band p { font-size: 17px; line-height: 26px; }
.lp-band strong { color: var(--ink-900); }

/* Sections */
.lp-section { padding: 96px 0; }
.lp-alt { background: var(--lp-band); }
.lp-head { max-width: 680px; }
.lp-center { max-width: 720px; margin: 0 auto; text-align: center; }
.lp-eyebrow { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--sand-700); }
.landing .lp-h2 { margin-top: 8px; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.2; text-wrap: balance; }
.landing .lp-intro { margin-top: 14px; font-size: 18px; line-height: 28px; }
.landing .lp-h3 { margin-top: 18px; font-size: 20px; line-height: 28px; }
.landing .lp-h3s { font-family: var(--bs-body-font-family); font-size: 17px; line-height: 24px; font-weight: 600; }
.lp-split { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.lp-split-top { align-items: stretch; }

/* How it works */
.landing .lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 48px; }
.lp-steps li { padding: 24px; background: var(--surface); border: 1px solid var(--sand-200); border-radius: var(--radius-card); }
.lp-step-n { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--ink-900); color: #FFFFFF; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 18px; }
.landing .lp-steps p { margin-top: 8px; font-size: 16px; line-height: 24px; }
.landing .lp-note { margin-top: 20px; font-size: 15px; line-height: 22px; color: var(--sand-700); }

/* Front desk */
.lp-desk-copy { flex: 1 1 400px; min-width: 0; }
.landing .lp-points { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.lp-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 24px; }
.lp-tick { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--ink-900); color: #FFFFFF; }
.lp-desk-art { flex: 1 1 520px; min-width: 0; }
.lp-brandbar { height: 4px; background: var(--red-600); }
.lp-board-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--sand-200); }
.lp-board-head img { display: block; width: 85px; height: 21px; }
.lp-board-campus { padding-left: 10px; border-left: 1px solid var(--sand-200); font-size: 12px; font-weight: 500; color: var(--sand-700); }
.lp-alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--red-50); border-left: 4px solid var(--red-600); }
.lp-alert .ico { color: var(--red-600); }
.lp-alert-text { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; color: var(--ink-900); }
.lp-alert-btn { flex: none; padding: 6px 12px; border-radius: 6px; background: var(--ink-900); color: #FFFFFF; font-size: 12px; font-weight: 600; }
.lp-board-title { display: flex; align-items: center; gap: 8px; padding: 14px 18px 10px; }
.lp-board-title .lp-card-title { font-size: 16px; }
.lp-board .lp-thead { gap: 12px; height: 30px; padding: 0 18px; }
.lp-board .lp-row { gap: 12px; height: 47px; padding: 0 18px; font-size: 13px; }
.lp-board .lp-av { width: 28px; height: 28px; }
.lp-board .lp-until { width: 70px; }
.lp-who { display: flex; flex-direction: column; }
.lp-purpose { font-size: 11px; line-height: 14px; color: var(--sand-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-status { flex: none; width: 92px; }
.lp-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.lp-pill-ok { background: var(--success-50); color: var(--success-600); }
.lp-pill-expired { background: var(--sand-100); color: var(--sand-700); }

/* The pass */
.lp-passes { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 48px; }
.lp-pass { width: 240px; overflow: hidden; background: var(--surface); border: 1px solid var(--sand-200); border-radius: var(--radius-pass); box-shadow: var(--lp-shadow); }
.lp-pass-head { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 136px; text-align: center; color: #FFFFFF; }
.lp-pass-head .lp-word { font-size: 26px; line-height: 32px; }
.lp-pass-head .lp-clock { font-size: 22px; line-height: 28px; }
.lp-pass-head .lp-where { margin-top: 4px; }
.lp-pass-body { padding: 14px 16px 16px; }
.lp-pass-name { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 17px; line-height: 24px; color: var(--ink-900); }
.landing .lp-pass-purpose { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--sand-700); }
.lp-pass-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.lp-qr-sm { flex: none; width: 72px; height: 72px; fill: var(--ink-900); shape-rendering: crispEdges; }
.lp-pass-until { font-size: 12px; line-height: 16px; color: var(--ink-800); }
.lp-pass-until strong { display: block; font-size: 15px; color: var(--ink-900); }
.landing .lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 56px; }
.lp-features li { display: flex; gap: 14px; }
.lp-feat-icon, .lp-trust-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--sand-100); color: var(--ink-900); }
.landing .lp-features p, .landing .lp-trust p, .landing .lp-included p { margin-top: 4px; font-size: 15px; line-height: 22px; }

/* Screening and privacy */
.lp-privacy-copy { flex: 1 1 380px; min-width: 0; }
.landing .lp-trust { flex: 1 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.lp-trust li { padding: 20px; background: var(--surface); border: 1px solid var(--sand-200); border-radius: var(--radius-card); }
.lp-trust-icon { width: 40px; height: 40px; }
.lp-trust .lp-h3s { margin-top: 14px; }

/* What's included */
.landing .lp-included { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 40px; border-top: 1px solid var(--sand-200); }
.lp-included li { display: flex; gap: 14px; padding: 24px 24px 24px 0; border-bottom: 1px solid var(--sand-200); color: var(--ink-800); }
.lp-included .ico { margin-top: 2px; color: var(--ink-900); }

/* Closing section */
.lp-demo { padding: 88px 0; background: var(--ink-900); color: #FFFFFF; }
.lp-demo .lp-wrap { max-width: 760px; text-align: center; }
.landing .lp-demo .lp-h2 { margin-top: 0; color: #FFFFFF; }
.landing .lp-demo .lp-intro { color: #FFFFFF; }
.landing .lp-demo .lp-cta-row { justify-content: center; }
.landing .lp-demo :focus-visible { outline-color: var(--text-on-ink); }   /* the sand ring is too faint on ink */
.landing .lp-demo-email { margin-top: 24px; font-size: 15px; line-height: 22px; }
.landing .lp-demo-email a { font-weight: 600; color: #FFFFFF; text-underline-offset: 3px; }

/* Footer */
.lp-footer { background: var(--surface); border-top: 1px solid var(--sand-200); }
.lp-footer .lp-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 24px; padding-bottom: 24px; }
.lp-foot-brand { display: flex; align-items: center; gap: 14px; }
.lp-foot-brand img { display: block; width: 114px; height: 28px; }
.lp-by { font-size: 13px; line-height: 20px; color: var(--sand-700); }
.landing .lp-by strong { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px; color: var(--ink-800); }
.lp-foot-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; }
.landing .lp-foot-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-800); text-decoration: none; }
.landing .lp-foot-nav a:hover { color: var(--ink-900); text-decoration: underline; }
.lp-copy { font-size: 13px; line-height: 20px; color: var(--sand-700); }

/* Narrow screens (D143 (7)): the mockup is desktop-only. Tighter gutters and spacing, full-width buttons, and the hero shows the phone alone. */
@media (max-width: 575.98px) {
  .lp-wrap { padding: 0 16px; }
  .lp-hero { padding: 48px 0 56px; }
  .lp-section, .lp-demo { padding: 64px 0; }
  .lp-hero > .lp-wrap, .lp-split { gap: 40px; }
  .landing .lp-nav a { padding: 0 10px; }
  .lp-actions { width: 100%; }
  .landing .lp-actions .lp-btn, .landing .lp-cta-row .lp-btn, .landing .lp-band .lp-btn { flex: 1 1 auto; }
  .lp-included li { padding-right: 0; }
}
@media (max-width: 479.98px) {
  .lp-stage { display: flex; justify-content: center; height: auto; }
  .lp-mini { display: none; }
  .lp-phone { position: relative; }
  .landing .lp-pause { position: static; margin-top: 12px; }
}
@media (max-width: 399.98px) {
  .lp-board .lp-until { display: none; }
}

/* D180: the screening provider's permissible-purpose certification, shown as plain text (line breaks kept, long text scrolls). */
.pp-text { white-space: pre-line; max-height: 20rem; overflow-y: auto; background: var(--surface); }

/* D183c: Settings sub-tabs (Campus settings / District plan). */
.settings-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--sand-300); }
.settings-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-weight: 500; color: var(--ink-800); text-decoration: none; border-bottom: 2px solid transparent; }
.settings-tabs a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--ink-800); }
.settings-tabs a:focus-visible { outline: 2px solid var(--ink-800); outline-offset: 2px; }