/* FusionShield app stylesheet (SHLD-16, SDD §7 "on-brand", §13.2).
 *
 * Layered top to bottom (SHLD-211): @font-face -> design tokens (:root)
 * -> base/reset -> components -> layout -> utilities -> @media. New rules
 * belong in the matching layer below, not bolted onto the end of the file.
 *
 * Fusion Collective brand kit applied: Brand Purple #3D369F primary,
 * Brand Orange #F09C2D secondary accent, Brand Red / Brand Blue reserved
 * for status emphasis. templates/reports/report.html carries its own copy
 * of the brand --fs-* tokens (standalone WeasyPrint document, so it can't
 * just link this stylesheet) — change the values in both files in one
 * pass; tests/test_css_tokens.py fails the build if they drift apart.
 *
 * Fonts, per the kit: Proxima Nova for display, Merriweather for body.
 * Proxima Nova is commercial and not bundled — Montserrat (the kit's
 * approved fallback, OFL-licensed) is self-hosted below and serves
 * whenever Proxima Nova isn't installed. Merriweather (OFL) is
 * self-hosted too. All url() references resolve inside static/, so
 * whitenoise's CompressedManifestStaticFilesStorage can rewrite them at
 * collectstatic time with no external asset to fetch.
 */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-var.c154477b9aff.woff2") format("woff2");
}

@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/merriweather-var.c355ec2df77a.woff2") format("woff2");
}

@font-face {
  font-family: "Merriweather";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/merriweather-italic-var.0f2a86d2b95a.woff2") format("woff2");
}

:root {
  --fs-page: #f7f6fb;
  --fs-surface: #fdfdfe;
  --fs-ink: #16142b;
  --fs-ink-secondary: #4c4964;
  --fs-ink-muted: #726f8a;
  --fs-border: rgba(22, 20, 43, 0.18);
  --fs-gridline: #e4e2ef;
  --fs-brand: #3d369f; /* Brand Purple */
  --fs-brand-dark: #2a2472;
  --fs-accent: #f09c2d; /* Brand Orange — callouts and highlights */

  /* Ordinal 4-step maturity ramp on the brand purple, light -> dark —
   * matches report.html. Validated with the dataviz skill's --ordinal
   * check: monotone lightness, >=0.06 OKLCH gaps, light end clears 2:1
   * against the surface. */
  --fs-level-0: #aba6e0;
  --fs-level-1: #8781cc;
  --fs-level-2: #615bb4;
  --fs-level-3: #3d369f;

  /* Status colors: danger is a deepened Brand Red (#F02F00 itself falls
   * short of AA on light backgrounds); success stays a functional green
   * (the brand palette has none); warning leans Brand Orange. */
  --fs-danger: #c22600;
  --fs-danger-bg: #fdece8;
  --fs-success: #1e6b3e;
  --fs-success-bg: #e9f5ee;
  --fs-warning: #7c5410;
  --fs-warning-bg: #fdf2e0;

  /* Fonts, per the kit: Proxima Nova for display, Merriweather for body. */
  --fs-font-display: "Proxima Nova", Montserrat, "Open Sans", system-ui, sans-serif;
  --fs-font-body: Merriweather, Georgia, serif;

  /* Weight steps for the `font` shorthand's weight slot. --fs-font-weight-*
   * is safe under the boundary guardrail (SHLD-55): it excludes
   * hyphen-adjacent matches, so this name never trips it — a bare `weight`
   * would (see tests/test_boundary_guardrail.py and content/tests.py). */
  --fs-font-weight-regular: 400;
  --fs-font-weight-semibold: 600;
  --fs-font-weight-bold: 700;

  /* Type scale — every step below is seeded to a font-size already in use
   * elsewhere in this sheet, so swapping a literal for a token is a
   * zero-diff migration (SHLD-211). */
  --fs-text-3xs: 0.5em;
  --fs-text-2xs: 0.8em;
  --fs-text-xs: 0.85em;
  --fs-text-sm: 0.9em;
  --fs-text-base: 1em;
  --fs-text-md: 1.05em;
  --fs-text-lg: 1.1em;
  --fs-text-xl: 1.2em;
  --fs-text-2xl: 2.2em;

  /* Spacing scale — same seeding rule as the type scale above: every step
   * equals a margin/padding/gap literal already in this file. The token
   * name is the value in units of 0.05em (e.g. --fs-space-10 = 10 *
   * 0.05em = 0.5em); it isn't a rounder scale on purpose — collapsing the
   * off-grid steps (4, 6, 7, 8, 12, 22, 28, 32) into a cleaner rhythm is
   * follow-up work for A2/A3, not this ticket. */
  --fs-space-4: 0.2em;
  --fs-space-6: 0.3em;
  --fs-space-7: 0.35em;
  --fs-space-8: 0.4em;
  --fs-space-10: 0.5em;
  --fs-space-12: 0.6em;
  --fs-space-15: 0.75em;
  --fs-space-20: 1em;
  --fs-space-22: 1.1em;
  --fs-space-25: 1.25em;
  --fs-space-28: 1.4em;
  --fs-space-30: 1.5em;
  --fs-space-32: 1.6em;
  --fs-space-35: 1.75em;
  --fs-space-40: 2em;

  /* Layout measures — the page shell's max-width was repeated verbatim
   * across four rules before this ticket (SHLD-211); the two narrower
   * measures are shared by forms/auth and the landing hero. */
  --fs-measure-page: 60rem;
  --fs-measure-form: 28rem;
  --fs-measure-hero: 34rem;

  /* Radius set — --fs-radius predates this ticket and stays the workhorse
   * for cards/inputs/buttons; the two new steps are additive, for
   * downstream consumers (SHLD-212). */
  --fs-radius-sm: 4px;
  --fs-radius: 8px;
  --fs-radius-lg: 16px;

  /* Elevation — four shadow steps, modeled on the marketing site
   * (www.fusioncollective.net/static/css/style.css). Unconsumed by this
   * sheet today (no box-shadow rule exists yet); defined for SHLD-212/A2. */
  --fs-shadow-1: 0 1px 2px rgba(22, 20, 43, 0.08);
  --fs-shadow-2: 0 2px 6px rgba(22, 20, 43, 0.1);
  --fs-shadow-3: 0 6px 16px rgba(22, 20, 43, 0.12);
  --fs-shadow-4: 0 12px 32px rgba(22, 20, 43, 0.16);

  /* Motion — three speeds and one easing curve, modeled on the same
   * reference sheet. Unconsumed today (no transition/animation rule
   * exists yet); defined for SHLD-212/A2. */
  --fs-duration-fast: 120ms;
  --fs-duration-base: 200ms;
  --fs-duration-slow: 320ms;
  --fs-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus ring — a visible, brand-colored ring for :focus-visible.
   * Unconsumed today; defined for SHLD-212/A2. */
  --fs-focus-ring: 0 0 0 3px rgba(61, 54, 159, 0.35);

  /* Breakpoints — reference values only. CSS custom properties can't
   * appear in an @media prelude, so these exist for downstream JS/
   * container-query use, not for this file's (currently nonexistent)
   * @media rules. */
  --fs-breakpoint-sm: 30rem;
  --fs-breakpoint-md: 48rem;
  --fs-breakpoint-lg: 75rem;

  /* Z-index scale — unconsumed today (no positioned/stacked component
   * exists yet); defined for SHLD-212/A2. */
  --fs-z-dropdown: 10;
  --fs-z-sticky: 20;
  --fs-z-overlay: 30;
  --fs-z-modal: 40;
  --fs-z-toast: 50;
}

/* ---------------------------------------------------------------------
 * Base / reset
 * ------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fs-font-body);
  color: var(--fs-ink);
  background: var(--fs-page);
  line-height: 1.5;
}

a {
  color: var(--fs-brand-dark);
}

h1,
h2,
h3 {
  font-family: var(--fs-font-display);
  line-height: 1.25;
}

/* Focus (SHLD-213) — a visible ring on every focusable element, keyboard-
 * triggered only (`:focus-visible` skips the ring on a mouse/touch click).
 * Universal selector on purpose: every link, button, .btn, and form
 * control inherits it with no per-component rule to keep in sync. */

:focus-visible {
  outline: 2px solid var(--fs-brand);
  outline-offset: 2px;
  box-shadow: var(--fs-focus-ring);
}

/* ---------------------------------------------------------------------
 * Components
 * ------------------------------------------------------------------- */

/* Alerts (Django messages framework) */

.messages {
  list-style: none;
  max-width: var(--fs-measure-page);
  margin: var(--fs-space-20) auto 0;
  padding: 0 var(--fs-space-30);
}

.messages li {
  padding: var(--fs-space-15) var(--fs-space-20);
  border-radius: var(--fs-radius);
  border: 1px solid var(--fs-border);
  background: var(--fs-surface);
  margin-bottom: var(--fs-space-10);
}

.messages li.error {
  color: var(--fs-danger);
  background: var(--fs-danger-bg);
  border-color: var(--fs-danger);
}

.messages li.success {
  color: var(--fs-success);
  background: var(--fs-success-bg);
  border-color: var(--fs-success);
}

.messages li.warning {
  color: var(--fs-warning);
  background: var(--fs-warning-bg);
  border-color: var(--fs-warning);
}

/* Buttons */

button,
input[type="submit"] {
  font: var(--fs-font-weight-semibold) var(--fs-text-base) var(--fs-font-display);
  cursor: pointer;
  color: #fff;
  background: var(--fs-brand);
  border: 1px solid var(--fs-brand-dark);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-10) var(--fs-space-22);
}

button:hover,
input[type="submit"]:hover {
  background: var(--fs-brand-dark);
}

/* .btn component — opt-in for markup that wants an explicit variant or
 * size instead of the bare element defaults above (which stay the
 * "primary" look so unclassed buttons never regress). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-8);
  font: var(--fs-font-weight-semibold) var(--fs-text-base) var(--fs-font-display);
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  background: var(--fs-brand);
  border: 1px solid var(--fs-brand-dark);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-10) var(--fs-space-22);
}

.btn:hover {
  background: var(--fs-brand-dark);
}

.btn--primary {
  background: var(--fs-brand);
  color: #fff;
  border-color: var(--fs-brand-dark);
}

.btn--primary:hover {
  background: var(--fs-brand-dark);
}

.btn--secondary {
  background: transparent;
  color: var(--fs-brand-dark);
  border-color: var(--fs-brand);
}

.btn--secondary:hover {
  background: var(--fs-page);
}

.btn--ghost {
  background: transparent;
  color: var(--fs-brand-dark);
  border-color: transparent;
}

.btn--ghost:hover {
  background: var(--fs-page);
}

.btn--danger {
  background: var(--fs-danger);
  color: #fff;
  border-color: var(--fs-danger);
}

.btn--danger:hover {
  filter: brightness(0.88);
}

.btn--sm {
  padding: var(--fs-space-6) var(--fs-space-15);
  font-size: var(--fs-text-sm);
}

.btn--lg {
  padding: var(--fs-space-15) var(--fs-space-35);
  font-size: var(--fs-text-lg);
}

/* Forms */

form p {
  margin: 0 0 var(--fs-space-20);
}

label {
  display: block;
  font-family: var(--fs-font-display);
  margin-bottom: var(--fs-space-6);
  color: var(--fs-ink-secondary);
}

input,
textarea,
select {
  font: var(--fs-text-base) var(--fs-font-display);
  color: var(--fs-ink);
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-10) var(--fs-space-12);
  width: 100%;
  max-width: var(--fs-measure-form);
}

/* Brand-colored border on top of the global :focus-visible ring above, so
 * a focused field reads as branded even where the outline is subtle
 * against the surface color. */

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--fs-brand);
}

textarea {
  max-width: none;
  width: 100%;
  min-height: 4em;
}

fieldset {
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-15) var(--fs-space-20);
  margin: 0 0 var(--fs-space-20);
}

fieldset label {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-6);
  width: auto;
  margin: 0 var(--fs-space-20) 0 0;
  color: var(--fs-ink);
}

fieldset input[type="radio"] {
  width: auto;
}

.errorlist {
  list-style: none;
  margin: 0 0 var(--fs-space-15);
  padding: var(--fs-space-10) var(--fs-space-15);
  background: var(--fs-danger-bg);
  border: 1px solid var(--fs-danger);
  border-radius: var(--fs-radius);
  color: var(--fs-danger);
  font-size: var(--fs-text-sm);
}

.errorlist li + li {
  margin-top: var(--fs-space-6);
}

/* .field — one bound form field (templates/partials/_field.html), the
 * replacement unit for the `form p` rows `{{ form.as_p }}` used to produce. */

.field {
  margin: 0 0 var(--fs-space-20);
}

.field-help {
  margin: var(--fs-space-6) 0 0;
  color: var(--fs-ink-muted);
  font-size: var(--fs-text-sm);
}

/* Tables */

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--fs-space-30);
}

th,
td {
  text-align: left;
  padding: var(--fs-space-12) var(--fs-space-15);
  border-bottom: 1px solid var(--fs-gridline);
}

th {
  font-family: var(--fs-font-display);
  color: var(--fs-ink-muted);
  text-transform: uppercase;
  font-size: var(--fs-text-2xs);
  letter-spacing: 0.03em;
}

/* Sections / cards */

.card {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-25) var(--fs-space-30);
  margin-bottom: var(--fs-space-30);
}

section h2 {
  font-size: var(--fs-text-md);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fs-brand-dark);
  border-bottom: 1px solid var(--fs-gridline);
  padding-bottom: var(--fs-space-8);
  margin: 0 0 var(--fs-space-15);
}

/* Section lede (SHLD-217) — `why_it_matters` reads as framing copy, not a
 * bare body paragraph. */

.section-lede {
  color: var(--fs-ink-secondary);
  font-size: var(--fs-text-md);
  padding-left: var(--fs-space-15);
  border-left: 2px solid var(--fs-border);
  margin: 0 0 var(--fs-space-20);
}

/* Badges + eyebrows — generic components for downstream consumers
 * (SHLD-212/A2), same convention as the elevation/motion tokens above. */

.badge {
  display: inline-block;
  padding: var(--fs-space-4) var(--fs-space-12);
  border-radius: 999px;
  font-family: var(--fs-font-display);
  font-weight: var(--fs-font-weight-semibold);
  font-size: var(--fs-text-xs);
  background: var(--fs-gridline);
  color: var(--fs-ink-secondary);
}

.eyebrow {
  display: block;
  font-family: var(--fs-font-display);
  color: var(--fs-ink-muted);
  text-transform: uppercase;
  font-size: var(--fs-text-2xs);
  letter-spacing: 0.03em;
}

/* Assessment progress */

#assessment-progress {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-20) var(--fs-space-25);
  margin-bottom: var(--fs-space-30);
}

#assessment-progress .overall-progress {
  font-weight: var(--fs-font-weight-semibold);
  margin: 0 0 var(--fs-space-10);
}

/* <progress> (SHLD-217) — the app's first real progress bar. The "X of Y
 * answered" text stays the string other tests bind to; this is a purely
 * visual reinforcement, styled cross-browser via the -webkit-/-moz- pseudo
 * elements since the unstyled native track/value colors don't follow the
 * brand ramp. */

.progress-bar {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  width: 100%;
  height: var(--fs-space-12);
  border: none;
  border-radius: var(--fs-radius-sm);
  background: var(--fs-gridline);
  overflow: hidden;
}

.progress-bar::-webkit-progress-bar {
  background: var(--fs-gridline);
  border-radius: var(--fs-radius-sm);
}

.progress-bar::-webkit-progress-value {
  background: var(--fs-brand);
  border-radius: var(--fs-radius-sm);
  transition: width var(--fs-duration-base) var(--fs-ease-standard);
}

.progress-bar::-moz-progress-bar {
  background: var(--fs-brand);
  border-radius: var(--fs-radius-sm);
}

.progress-bar-overall {
  margin: var(--fs-space-10) 0 var(--fs-space-15);
}

.progress-bar-section {
  height: var(--fs-space-8);
  margin-top: var(--fs-space-4);
}

.section-progress-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
  gap: var(--fs-space-15) var(--fs-space-30);
  color: var(--fs-ink-secondary);
  font-size: var(--fs-text-sm);
}

.section-progress-item {
  margin: 0;
}

.section-progress-label {
  display: block;
}

.section-progress {
  color: var(--fs-ink-secondary);
  font-size: var(--fs-text-sm);
}

/* Self-rating scale key */

.scale-key {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-20) var(--fs-space-25);
  margin-bottom: var(--fs-space-30);
}

.scale-key-summary {
  color: var(--fs-ink-secondary);
  margin: 0 0 var(--fs-space-15);
}

.scale-key-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--fs-space-20);
  row-gap: var(--fs-space-8);
  margin: 0 0 var(--fs-space-15);
}

.scale-key-list dt {
  font-family: var(--fs-font-display);
  font-weight: var(--fs-font-weight-semibold);
  white-space: nowrap;
  padding: var(--fs-space-4) 0 var(--fs-space-4) var(--fs-space-12);
  border-left: 3px solid var(--fs-border);
}

.scale-key-list dd {
  margin: 0;
  padding: var(--fs-space-4) 0;
  color: var(--fs-ink-secondary);
}

/* Level ramp on the key's left border (SHLD-217) — same --fs-level-*
 * tokens/order as .level-pill's maturity ramp, applied by list position
 * since SELF_RATING_SCALE always renders 0..3 in ascending order. */

.scale-key-list dt:nth-of-type(1) {
  border-left-color: var(--fs-level-0);
}

.scale-key-list dt:nth-of-type(2) {
  border-left-color: var(--fs-level-1);
}

.scale-key-list dt:nth-of-type(3) {
  border-left-color: var(--fs-level-2);
}

.scale-key-list dt:nth-of-type(4) {
  border-left-color: var(--fs-level-3);
}

/* Verified (SHLD-219) — the engagement-only 5th level ENGAGEMENT_RATING_SCALE
 * appends past the 0-3 self-rating ramp above. It isn't part of that ramp
 * (an auditor's own independent verification, not a self-rating), so it
 * takes the accent color the ceiling CTA/note already use for "beyond
 * self-attestation" rather than a 5th --fs-level-* shade. */

.scale-key-list dt:nth-of-type(5) {
  border-left-color: var(--fs-accent);
}

.scale-ceiling-note {
  color: var(--fs-ink-secondary);
  font-size: var(--fs-text-sm);
  margin: 0;
  padding: var(--fs-space-12) var(--fs-space-15);
  background: var(--fs-page);
  border-left: 3px solid var(--fs-accent);
  border-radius: var(--fs-radius-sm);
}

/* Question cards */

.question-form {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-20) var(--fs-space-25);
  margin-bottom: var(--fs-space-20);
}

.question-code {
  font-family: var(--fs-font-display);
  color: var(--fs-ink-muted);
  text-transform: uppercase;
  font-size: var(--fs-text-2xs);
  letter-spacing: 0.03em;
  margin: 0 0 var(--fs-space-6);
}

.question-prompt {
  font-weight: var(--fs-font-weight-semibold);
  font-size: var(--fs-text-lg);
  margin: 0 0 var(--fs-space-8);
}

.question-good-looks-like {
  color: var(--fs-ink-secondary);
  font-size: var(--fs-text-sm);
  margin: 0 0 var(--fs-space-15);
}

.question-error {
  color: var(--fs-danger);
  font-size: var(--fs-text-sm);
}

.question-saved {
  color: var(--fs-success);
  font-weight: var(--fs-font-weight-semibold);
  margin-left: var(--fs-space-15);
}

/* Rating control / note field separation (SHLD-217) — a divider so the two
 * inputs read as distinct steps instead of running together. */

.question-rating {
  margin: 0 0 var(--fs-space-15);
}

.question-note {
  padding-top: var(--fs-space-15);
  border-top: 1px solid var(--fs-gridline);
}

.phi-warning {
  display: inline-block;
  color: var(--fs-warning);
  font-weight: var(--fs-font-weight-semibold);
  margin-bottom: var(--fs-space-4);
}

/* Segmented rating control (SHLD-217; also the auditor's
 * _engagement_question.html since SHLD-219) — the fieldset/legend
 * structure is unchanged; only the radios' visual layer changes. (The
 * self-rating runner's `aria-describedby` target moved from the whole
 * key section to a one-line summary in it — SHLD-159 — but the fieldset
 * markup itself is untouched.) Scoped to these `.rating-segments`/`.segment*`
 * classes (not a bare `.question-form fieldset`/`input[type=radio]`
 * selector) so it only ever applies to a question card that opts in with
 * this exact markup.
 *
 * Each `.segment-input` is a real, visible, appearance:none radio sized to
 * fill its `.segment` label (not display:none/opacity:0'd) so Playwright's
 * `.check()` in e2e/test_happy_path.py keeps landing on it; the label text
 * sits in a `.segment-label` span layered above with pointer-events:none,
 * so clicks pass through to the input underneath. */

.question-form .rating-segments {
  border: none;
  padding: 0;
  margin: 0;
}

.question-form .rating-segments legend {
  font-family: var(--fs-font-display);
  color: var(--fs-ink-muted);
  text-transform: uppercase;
  font-size: var(--fs-text-2xs);
  letter-spacing: 0.03em;
  padding: 0 0 var(--fs-space-8);
}

.question-form .segment-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-8);
}

.question-form .segment {
  position: relative;
  display: inline-flex;
  margin: 0;
}

.question-form .segment-input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  background: var(--fs-surface);
  cursor: pointer;
  transition:
    background var(--fs-duration-fast) var(--fs-ease-standard),
    border-color var(--fs-duration-fast) var(--fs-ease-standard);
}

.question-form .segment-input:hover {
  border-color: var(--fs-brand);
}

.question-form .segment-input:checked {
  background: var(--fs-brand);
  border-color: var(--fs-brand);
}

.question-form .segment-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: var(--fs-space-8) var(--fs-space-15);
  font-size: var(--fs-text-sm);
  color: var(--fs-ink-secondary);
  white-space: nowrap;
  pointer-events: none;
}

.question-form .segment-input:checked + .segment-label {
  color: #fff;
  font-weight: var(--fs-font-weight-semibold);
}

/* Engagement question provenance markers (SHLD-169/SHLD-212) — the
 * auditor's self-attested / revised / auditor-recorded signal, tinted with
 * the same status-bg tokens the coverage summary uses so the three states
 * read as distinct at a glance instead of undifferentiated body text. */

.provenance-marker {
  display: inline-block;
  margin: 0 0 var(--fs-space-10);
  padding: var(--fs-space-4) var(--fs-space-12);
  border-radius: var(--fs-radius-sm);
  font-size: var(--fs-text-xs);
}

.provenance-self-attested {
  background: var(--fs-page);
  color: var(--fs-ink-secondary);
}

.provenance-revised {
  background: var(--fs-warning-bg);
  color: var(--fs-warning);
}

.provenance-auditor-recorded {
  background: var(--fs-success-bg);
  color: var(--fs-success);
}

/* Carried-from-older-version notice (SHLD-169/SHLD-219) — the engagement
 * runner's prompt to re-verify carried-over wording rather than trust it,
 * shown whenever Engagement.carried_from_older_version is true. Same
 * warning tokens as the provenance-revised marker and the vendor
 * coverage-incomplete banner, so "needs a second look" reads consistently
 * across the app. */

.carried-over-notice {
  margin: 0 0 var(--fs-space-20);
  padding: var(--fs-space-12) var(--fs-space-15);
  background: var(--fs-warning-bg);
  color: var(--fs-warning);
  border-left: 3px solid var(--fs-warning);
  border-radius: var(--fs-radius-sm);
  font-size: var(--fs-text-sm);
}

/* Section heatmap maturity pills — same ramp as the PDF report */

.level-pill {
  display: inline-block;
  min-width: 6.5em;
  text-align: center;
  padding: var(--fs-space-4) var(--fs-space-12);
  border-radius: 999px;
  font-family: var(--fs-font-display);
  font-weight: var(--fs-font-weight-semibold);
  font-size: var(--fs-text-sm);
  white-space: nowrap;
}

/* Border style + width ramp from none -> dotted -> dashed -> solid, thin
 * -> thick: a second, non-color way to tell adjacent steps apart (SHLD-213)
 * that survives grayscale print and most color-vision deficiencies. Mirrored
 * in templates/reports/report.html. */

.level-pill.level-0 {
  background: var(--fs-level-0);
  color: var(--fs-ink);
  border: 1px dotted currentColor;
}

.level-pill.level-1 {
  background: var(--fs-level-1);
  color: var(--fs-ink);
  border: 1px dashed currentColor;
}

.level-pill.level-2 {
  background: var(--fs-level-2);
  color: #fff;
  border: 2px solid currentColor;
}

.level-pill.level-3 {
  background: var(--fs-level-3);
  color: #fff;
  border: 3px solid currentColor;
}

.level-pill.level-none {
  background: var(--fs-surface);
  color: var(--fs-ink-muted);
  border: 1px dashed var(--fs-gridline);
}

.benchmark-line {
  margin-top: var(--fs-space-6);
  color: var(--fs-ink-secondary);
  font-size: var(--fs-text-2xs);
}

table.heatmap .why {
  color: var(--fs-ink-secondary);
  font-size: var(--fs-text-sm);
}

/* Overall maturity card — the score hero (SHLD-218). The figure plate
 * takes a level-matched border, same ramp/tokens as .level-pill, so the
 * headline number reads consistently with the heatmap below it. */

.overall-card {
  display: flex;
  align-items: center;
  gap: var(--fs-space-30);
  padding: var(--fs-space-10) 0;
}

.overall-figure {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  justify-content: center;
  min-width: 2.4em;
  padding: var(--fs-space-15) var(--fs-space-25);
  background: var(--fs-surface);
  border: 3px solid var(--fs-brand);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-2);
  font: var(--fs-font-weight-bold) var(--fs-text-2xl)/1 var(--fs-font-display);
  font-variant-numeric: tabular-nums;
  color: var(--fs-brand-dark);
}

.overall-figure.level-0 {
  border-color: var(--fs-level-0);
}

.overall-figure.level-1 {
  border-color: var(--fs-level-1);
}

.overall-figure.level-2 {
  border-color: var(--fs-level-2);
}

.overall-figure.level-3 {
  border-color: var(--fs-level-3);
}

.overall-scale {
  font-size: var(--fs-text-3xs);
  color: var(--fs-ink-muted);
}

.overall-copy .label {
  font: var(--fs-font-weight-bold) var(--fs-text-lg) var(--fs-font-display);
  color: var(--fs-brand-dark);
  margin-bottom: var(--fs-space-8);
}

/* The self-attested caveat (SDD §1.4's assurance ceiling) — the honest
 * framing the whole product rests on, so it gets a callout treatment
 * instead of fading into gray micro-copy. */

.overall-copy .muted {
  display: inline-block;
  max-width: 34em;
  padding: var(--fs-space-8) var(--fs-space-12);
  background: var(--fs-warning-bg);
  border-left: 2px solid var(--fs-warning);
  border-radius: 0 var(--fs-radius-sm) var(--fs-radius-sm) 0;
  color: var(--fs-warning);
  font-size: var(--fs-text-xs);
}

/* Ranked gaps + evidence checklist */

ol.gaps {
  margin: 0;
  padding-left: var(--fs-space-28);
}

ol.gaps li {
  margin-bottom: var(--fs-space-15);
}

ol.gaps .gap-section {
  display: block;
  font-family: var(--fs-font-display);
  font-size: var(--fs-text-2xs);
  color: var(--fs-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

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

ul.checklist li {
  position: relative;
  padding: var(--fs-space-7) 0 var(--fs-space-7) var(--fs-space-32);
  border-bottom: 1px solid var(--fs-gridline);
}

ul.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.9em;
  height: 0.9em;
  border: 1.5px solid var(--fs-brand);
  border-radius: 2px;
}

.empty-state {
  color: var(--fs-ink-secondary);
  font-style: italic;
}

/* Report status panel */

#report-status {
  background: var(--fs-surface);
  border: 1px dashed var(--fs-gridline);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-20) var(--fs-space-25);
}

#report-status a {
  font-weight: var(--fs-font-weight-semibold);
}

/* Vendor coverage summary + reconcile prompt (SHLD-53) */

#coverage-summary {
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  padding: var(--fs-space-20) var(--fs-space-25);
  margin-bottom: var(--fs-space-30);
}

#coverage-summary.coverage-complete {
  background: var(--fs-success-bg);
  border-color: var(--fs-success);
}

#coverage-summary.coverage-empty {
  background: var(--fs-surface);
  border-color: var(--fs-border);
}

#coverage-summary.coverage-incomplete {
  background: var(--fs-warning-bg);
  border-color: var(--fs-warning);
}

#coverage-summary .coverage-count {
  margin: 0;
}

#coverage-summary .reconcile-prompt {
  margin: var(--fs-space-8) 0 0;
  color: var(--fs-warning);
}

.coverage-status {
  font-size: var(--fs-text-sm);
}

.coverage-status-complete {
  color: var(--fs-success);
  font-weight: var(--fs-font-weight-semibold);
}

.coverage-status-incomplete {
  color: var(--fs-warning);
}

/* Per-vendor verification CTA (vendor_list.html / _verification_requested.html) */

.verification-cta-panel {
  margin-top: var(--fs-space-15);
  padding-top: var(--fs-space-15);
  border-top: 1px solid var(--fs-gridline);
}

.verification-cta-body {
  margin: 0 0 var(--fs-space-10);
  color: var(--fs-ink-secondary);
  font-size: var(--fs-text-sm);
}

.verification-cta-confirmed {
  color: var(--fs-ink-secondary);
  font-style: italic;
}

/* Ceiling CTA — a callout, so it takes the Brand Orange accent. Per SDD
 * §14 this must read as value (what closing the gap gets you), not a
 * paywall interstitial — a soft tint and an inline form, not a full-bleed
 * ad band. */

.ceiling-cta {
  background: var(--fs-page);
  border-left: 4px solid var(--fs-accent);
}

.ceiling-cta-panel h2 {
  margin: 0 0 var(--fs-space-10);
  font-size: var(--fs-text-xl);
  color: var(--fs-brand-dark);
}

.ceiling-cta-panel p {
  max-width: 40em;
  margin: 0 0 var(--fs-space-10);
  color: var(--fs-ink-secondary);
}

.ceiling-cta-panel form {
  margin-top: var(--fs-space-20);
}

.ceiling-cta-panel form button {
  background: var(--fs-accent);
  border-color: var(--fs-accent);
  color: var(--fs-ink);
}

.ceiling-cta-panel form button:hover {
  filter: brightness(0.92);
}

.ceiling-cta-confirmed {
  padding: var(--fs-space-15) var(--fs-space-20);
  background: var(--fs-success-bg);
  border-radius: var(--fs-radius);
}

.ceiling-cta-confirmed h2 {
  color: var(--fs-success);
}

.ceiling-cta-confirmed p {
  margin: 0;
  color: var(--fs-ink-secondary);
}

/* Auth screens (login / activate / set-password / invalid-link /
 * throttled) — citation.fusioncollective.net's auth pattern (SHLD-216):
 * a tinted, full-height ground; a centered eyebrow/h1/sub-copy head; the
 * card itself; then a secondary line for the alternate action. */

.auth-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-30);
  min-height: 60vh;
  padding: var(--fs-space-40) 0;
  text-align: center;
}

.auth-head {
  max-width: var(--fs-measure-form);
}

.auth-eyebrow {
  margin-bottom: var(--fs-space-10);
  color: var(--fs-warning);
}

.auth-head h1 {
  margin: 0 0 var(--fs-space-10);
  color: var(--fs-brand);
}

.auth-subcopy {
  margin: 0;
  color: var(--fs-ink-secondary);
}

.auth-card {
  width: 100%;
  max-width: var(--fs-measure-form);
  margin: 0 auto;
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-3);
  padding: var(--fs-space-40) var(--fs-space-35);
  text-align: left;
}

.auth-card--message p {
  margin: 0;
  color: var(--fs-ink-secondary);
}

.auth-card form {
  display: flex;
  flex-direction: column;
}

.auth-card .btn {
  width: 100%;
  margin-top: var(--fs-space-10);
}

.auth-secondary {
  margin: 0;
  color: var(--fs-ink-secondary);
  font-size: var(--fs-text-sm);
}

/* ---------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------- */

/* Sticky translucent chrome (SHLD-214) — backdrop-filter blur over a
 * partially transparent surface tone, hairline border instead of the
 * old solid 3px brand rule. color-mix keeps this on the existing
 * --fs-surface token rather than a second hardcoded hex. */
.page-header {
  position: sticky;
  top: 0;
  z-index: var(--fs-z-sticky);
  border-bottom: 1px solid var(--fs-gridline);
  background: color-mix(in srgb, var(--fs-surface) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-nav {
  max-width: var(--fs-measure-page);
  margin: 0 auto;
  padding: var(--fs-space-15) var(--fs-space-30);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-20);
}

/* Everything right of the brand lockup (member nav + session block) as one
 * unit, so .page-nav's space-between puts the logo on the left and this
 * whole cluster on the right instead of splitting it into three columns. */
.nav-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-20);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--fs-space-15);
  text-decoration: none;
}

/* Fusion Collective wide logo: fixed height, auto width — never stretch
 * or squash. Surrounding nav padding + gaps keep the kit's clear space.
 * fc-wide-logo.png ships fully opaque on its own white field (verified
 * pixel-by-pixel: every pixel alpha 255), so on any surface that isn't
 * pure white it reads as a stray white rectangle. Frame it as an
 * intentional white tile instead of fixing the art (SHLD-221) — same
 * treatment as templates/reports/report.html's ".masthead .fc-logo";
 * mirror both if either changes. */
.brand-lockup .fc-logo {
  height: 2.4em;
  width: auto;
  display: block;
  background: #fff;
  padding: 0.25em;
  border: 1px solid var(--fs-gridline);
  border-radius: 6px;
}

.brand-lockup .divider {
  width: 1px;
  height: 1.8em;
  background: var(--fs-gridline);
}

.page-nav .wordmark {
  font: var(--fs-font-weight-bold) var(--fs-text-xl)/1 var(--fs-font-display);
  color: var(--fs-brand-dark);
  letter-spacing: 0.02em;
}

/* Member navigation (SHLD-214) — Assessments/Vendors for every signed-in
 * user, plus the role-gated auditor/association-admin links, all in one
 * cluster so .nav-right can wrap it as a unit on narrow viewports. */
.member-nav-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-20);
  font: var(--fs-font-weight-semibold) var(--fs-text-sm) var(--fs-font-display);
}

.member-nav-group a {
  text-decoration: none;
}

.page-nav .session {
  display: flex;
  align-items: center;
  gap: var(--fs-space-15);
  color: var(--fs-ink-secondary);
  font-size: var(--fs-text-sm);
}

.page-nav .session button {
  font-size: var(--fs-text-sm);
}

.page-main {
  max-width: var(--fs-measure-page);
  margin: 0 auto;
  padding: var(--fs-space-30);
}

/* Anonymous landing-page footer (SHLD-215) — the disclaimer stands alone
 * with no copyright/link row since landing.html renders it itself, only
 * for signed-out visitors, outside the app chrome partials below. */
.page-footer.disclaimer {
  max-width: var(--fs-measure-page);
  margin: var(--fs-space-30) auto 0;
  padding: var(--fs-space-15) var(--fs-space-30) var(--fs-space-30);
  color: var(--fs-ink-muted);
  font-size: var(--fs-text-xs);
}

/* Signed-in app footer (SHLD-214) — top border, tinted ground, copyright
 * left / link row right, disclaimer underneath. Separate from
 * .page-footer.disclaimer above so the two surfaces (anonymous landing
 * vs. authenticated app chrome) can evolve independently. */
.app-footer {
  max-width: var(--fs-measure-page);
  margin: var(--fs-space-30) auto 0;
  padding: var(--fs-space-25) var(--fs-space-30) var(--fs-space-30);
  border-top: 1px solid var(--fs-gridline);
  background: var(--fs-gridline);
}

.app-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-15);
  padding-bottom: var(--fs-space-15);
  border-bottom: 1px solid var(--fs-border);
  margin-bottom: var(--fs-space-15);
}

.app-footer-copyright {
  color: var(--fs-ink-secondary);
  font-size: var(--fs-text-sm);
}

.app-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-20);
  font-size: var(--fs-text-sm);
}

.app-footer .disclaimer {
  color: var(--fs-ink-muted);
  font-size: var(--fs-text-xs);
  margin: 0;
}

/* Landing page (SHLD-215) — hero, numbered problem/solution sections,
 * comparison table, pull-quote, FAQ accordion, CTA band. Public marketing
 * surface modeled on citation.fusioncollective.net; this repo has no
 * Tailwind, so its utility classes are translated below into semantic
 * rules built on the --fs-* tokens above. */

.landing-hero {
  max-width: var(--fs-measure-page);
  margin: var(--fs-space-30) auto 0;
  padding: var(--fs-space-40) var(--fs-space-30);
  border-radius: var(--fs-radius-lg);
  background: linear-gradient(135deg, var(--fs-brand-dark), var(--fs-brand));
  color: #fff;
  text-align: center;
}

.landing-hero-eyebrow {
  display: block;
  margin-bottom: var(--fs-space-15);
  color: var(--fs-accent);
  text-transform: uppercase;
  font-family: var(--fs-font-display);
  font-size: var(--fs-text-xs);
  letter-spacing: 0.18em;
}

.landing-hero h1 {
  max-width: var(--fs-measure-page);
  margin: 0 auto var(--fs-space-15);
  font-size: var(--fs-text-2xl);
}

.landing-accent {
  color: var(--fs-accent);
}

.landing-hero-lede {
  max-width: var(--fs-measure-hero);
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-text-lg);
}

.landing-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fs-space-15);
  margin-top: var(--fs-space-30);
}

.landing-hero .btn--secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.landing-hero .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Stat strip — a `gap-px` grid (1px gaps double as gridlines) inside a
 * subtle ring, per the citation.fusioncollective.net reference. */

.landing-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: var(--fs-space-35);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--fs-radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
}

.landing-stat {
  padding: var(--fs-space-20) var(--fs-space-15);
  background: rgba(255, 255, 255, 0.08);
}

.landing-stat-figure {
  display: block;
  font-family: var(--fs-font-display);
  font-weight: var(--fs-font-weight-bold);
  font-size: var(--fs-text-xl);
}

.landing-stat-label {
  display: block;
  margin-top: var(--fs-space-6);
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-text-xs);
}

/* Numbered problem/solution sections — each its own hairline-bordered
 * card, alternating white (.landing-section on its own) and tinted
 * (.landing-section--tint) per the ticket. */

.landing-section {
  max-width: var(--fs-measure-page);
  margin: var(--fs-space-30) auto 0;
  padding: var(--fs-space-35) var(--fs-space-25);
  background: var(--fs-surface);
  border-top: 1px solid var(--fs-gridline);
  border-bottom: 1px solid var(--fs-gridline);
  border-radius: var(--fs-radius-lg);
}

.landing-section--tint {
  background: var(--fs-page);
}

.landing-section .eyebrow {
  margin-bottom: var(--fs-space-10);
  color: var(--fs-brand-dark);
}

.landing-section h2 {
  margin: 0 0 var(--fs-space-15);
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--fs-ink);
  text-transform: none;
  font-size: var(--fs-text-xl);
  line-height: 1.3;
}

/* Self-assessment vs. auditor-engagement comparison table (SHLD-163) */

.comparison-table th,
.comparison-table td {
  vertical-align: top;
}

.comparison-table thead th:not(:first-child) {
  color: var(--fs-brand-dark);
  font-size: var(--fs-text-xs);
}

.comparison-table tbody th {
  color: var(--fs-ink-secondary);
  font-family: var(--fs-font-display);
  font-weight: var(--fs-font-weight-semibold);
  white-space: nowrap;
}

/* Serif pull-quote, orange left border to match .ceiling-cta's callout
 * treatment elsewhere in the app. */

.pull-quote {
  max-width: var(--fs-measure-hero);
  margin: var(--fs-space-40) auto;
  padding: var(--fs-space-10) var(--fs-space-25);
  border-left: 4px solid var(--fs-accent);
  color: var(--fs-ink-secondary);
  font-style: italic;
  font-size: var(--fs-text-lg);
}

.pull-quote p {
  margin: 0;
}

/* FAQ accordion — Alpine-driven show/hide (SHLD-215 is the first page to
 * actually need Alpine beyond ui_demo.html). */

.accordion {
  margin-top: var(--fs-space-20);
  border-top: 1px solid var(--fs-gridline);
}

.accordion-item {
  border-bottom: 1px solid var(--fs-gridline);
}

.accordion-item h3 {
  margin: 0;
  font-size: var(--fs-text-base);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-15);
  width: 100%;
  padding: var(--fs-space-20) 0;
  background: transparent;
  color: var(--fs-ink);
  border: 0;
  border-radius: 0;
  text-align: left;
  font: var(--fs-font-weight-semibold) var(--fs-text-base) var(--fs-font-display);
}

.accordion-trigger:hover {
  background: transparent;
  color: var(--fs-brand-dark);
}

.accordion-icon {
  flex: 0 0 auto;
  color: var(--fs-brand);
  font-size: var(--fs-text-lg);
}

.accordion-panel {
  padding: 0 0 var(--fs-space-20);
  color: var(--fs-ink-secondary);
}

.accordion-panel p {
  margin: 0;
}

/* CTA band, closing the page before the shared footer */

.landing-cta-band {
  max-width: var(--fs-measure-page);
  margin: var(--fs-space-40) auto 0;
  padding: var(--fs-space-35) var(--fs-space-30);
  border-radius: var(--fs-radius-lg);
  background: var(--fs-brand);
  color: #fff;
  text-align: center;
}

.landing-cta-band h2 {
  margin: 0 0 var(--fs-space-15);
  color: #fff;
  font-size: var(--fs-text-xl);
}

.landing-cta-band p {
  max-width: var(--fs-measure-hero);
  margin: 0 auto var(--fs-space-20);
  color: rgba(255, 255, 255, 0.85);
}

.landing-cta-band .btn--primary {
  background: #fff;
  color: var(--fs-brand-dark);
  border-color: #fff;
}

.landing-cta-band .btn--primary:hover {
  background: var(--fs-page);
}

/* ---------------------------------------------------------------------
 * Utilities
 * ------------------------------------------------------------------- */

/* Visually hidden but still reachable by assistive tech (SHLD-213) — the
 * standard clip-based recipe, not `display: none`/`visibility: hidden`,
 * which would also hide it from screen readers and break `aria-live`
 * announcements. */

.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;
}

/* Skip-to-content link (SHLD-213) — first focusable element in the
 * document (see templates/base.html); off-screen until keyboard focus
 * lands on it, then slides into view above the header. */

.skip-link {
  position: absolute;
  top: -3em;
  left: var(--fs-space-15);
  z-index: var(--fs-z-toast);
  background: var(--fs-brand);
  color: #fff;
  padding: var(--fs-space-10) var(--fs-space-20);
  border-radius: var(--fs-radius);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--fs-space-15);
}

/* ---------------------------------------------------------------------
 * @media
 * ------------------------------------------------------------------- */

/* Respect the OS-level motion preference (SHLD-213) — lands ahead of any
 * transition/animation rule actually being written (SHLD-212/A2 tees up
 * --fs-duration-*/--fs-ease-standard for that) so motion is capped the
 * moment one is. */

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

/* Narrow viewports (SHLD-213) — literal value below mirrors
 * --fs-breakpoint-sm (30rem); custom properties can't appear in an
 * @media prelude. Covers the 400px AC with room to spare and lets the
 * page shell's edge padding shrink instead of forcing a horizontal
 * scrollbar. Wide tables (.table-wrap) and .page-nav (flex-wrap, set
 * above) handle most of the rest without needing a query at all; the
 * result page's score hero and section heatmap (SHLD-218) get dedicated
 * rules below since a plain horizontal scroll reads as unfinished on the
 * page most likely to be shown in a demo. */

@media (max-width: 30rem) {
  .page-nav,
  .page-main,
  .page-footer.disclaimer,
  .app-footer,
  .messages {
    padding-left: var(--fs-space-15);
    padding-right: var(--fs-space-15);
  }

  /* App chrome (SHLD-214): the member-nav cluster and session block each
   * collapse to their own stacked column instead of a cramped row once
   * .nav-right has already wrapped below the brand lockup. */
  .nav-right {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fs-space-10);
  }

  .member-nav-group,
  .app-footer-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Landing page (SHLD-215): the 3-up stat strip stacks to one column,
   * and the hero/section/CTA-band panels shed some of their own padding
   * so their content doesn't compete with the shrunk page-main gutter
   * above for room. */

  .landing-stats {
    grid-template-columns: 1fr;
  }

  .landing-hero,
  .landing-section,
  .landing-cta-band {
    padding-left: var(--fs-space-15);
    padding-right: var(--fs-space-15);
  }

  /* Result page (SHLD-218): the score hero stacks instead of squeezing
   * the figure plate and copy onto one cramped row. */

  .overall-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fs-space-15);
  }

  /* Card-collapse (SHLD-218's section heatmap; generalized to `table.stacked`
   * by SHLD-219 for the vendor registry and engagement workspace tables):
   * rows become self-labeled cards instead of a table that only scrolls
   * sideways. The header row stays in the DOM (and announced to screen
   * readers) but is visually clipped, same recipe as .sr-only; each cell
   * grows its own label from the data-label attribute the template sets
   * per column. */

  table.heatmap thead,
  table.stacked thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  table.heatmap,
  table.heatmap tbody,
  table.heatmap tr,
  table.heatmap td,
  table.stacked,
  table.stacked tbody,
  table.stacked tr,
  table.stacked td {
    display: block;
    width: 100%;
  }

  table.heatmap tr,
  table.stacked tr {
    margin-bottom: var(--fs-space-15);
    padding: var(--fs-space-12) var(--fs-space-15);
    border: 1px solid var(--fs-gridline);
    border-radius: var(--fs-radius);
  }

  table.heatmap td,
  table.stacked td {
    padding: var(--fs-space-7) 0;
    border-bottom: 0;
  }

  table.heatmap td::before,
  table.stacked td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--fs-space-4);
    color: var(--fs-ink-muted);
    font-family: var(--fs-font-display);
    font-size: var(--fs-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
}