/* FusionTrace Academy: fusiontrace.io's own system, so the Standard's site and its Academy read as one package.
   Serif headings, a 17 px body, 12 px minimum labels, hairline rules, corners of 0 to 4 px, no glows, no shadows,
   no shaded or side-barred callouts, and nothing hidden until a script runs. Light, and dark built only from the
   site's navy family.

   The marks are the official files (academy/src/assets.mjs): never redrawn, retyped, recoloured, cropped or
   stretched, and no text is ever set over one. Navy grounds take the navy-ground seal and the white wordmark; light
   grounds take the light seal and the navy wordmark. The smallest seal is 32 px, with clear space of at least a fifth
   of its diameter. Below that the seal's lettering cannot be read, so a browser tab carries the emblem, the seal's own
   centre, on the seal's navy face (favicon.svg). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family: "Source Serif"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/source-serif-var.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-mono-500.woff2") format("woff2"); }

/* fusiontrace.io's tokens, verbatim from src/css/site.css (tests/academy-design.test.mjs fails if a shared name
   drifts), and two status colours the site already ships. */
:root {
  --ink: #0B1528; --navy: #0B1528; --navy-2: #13213A;
  --body: #2B3547; --muted: #4A5568;
  --paper: #F4F5F7; --white: #FFFFFF;
  --line: #D5DAE2; --line-strong: #6B778C;
  --blue: #1F4FCC;
  --blue-light: #8FB4FF;
  --on-navy: rgba(255, 255, 255, .86); --on-navy-muted: rgba(255, 255, 255, .72); --line-dark: rgba(255, 255, 255, .18);
  --max: 1240px; --r: 3px;
  --serif: "Source Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ok: #1B6B3A; --bad: #8A1F2B;
  color-scheme: light dark;
}
/* Dark: learners study on a plane at night. Only the site's navy family: paper is navy, a card is navy-2. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #FFFFFF; --body: rgba(255, 255, 255, .86); --muted: rgba(255, 255, 255, .72);
    --paper: #0B1528; --white: #13213A;
    --line: rgba(255, 255, 255, .18); --line-strong: rgba(255, 255, 255, .6);
    --blue: #8FB4FF; --ok: #4CD18F; --bad: #FF8A8A;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--navy); -webkit-text-size-adjust: 100%; }
body { font: 400 17px/1.65 var(--sans); color: var(--body); background: var(--paper); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: var(--blue); text-underline-offset: 3px; }
::selection { background: rgba(31, 79, 204, .2); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.bar, .phead, .foot, .exam-strip { color-scheme: dark; }
.bar :focus-visible, .phead :focus-visible, .foot :focus-visible, .exam-strip :focus-visible { outline-color: var(--blue-light); }
.skip { position: absolute; left: 16px; top: -80px; background: #FFFFFF; color: #0B1528; padding: 12px 16px; border: 2px solid #0B1528; border-radius: var(--r); font-weight: 700; z-index: 100; }
.skip:focus { top: 12px; }
/* .wrap owns only the side gutter, so it never zeroes the page's own top and bottom padding (18 Oct 2026). */
.wrap { max-width: var(--max); width: 100%; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrapword { word-break: break-all; }
.mt { margin-top: 32px; }
[hidden] { display: none !important; }

/* THE BAR: navy in both themes, the seal and the wordmark, "Academy" as live text beside it. */
.bar { position: relative; z-index: 50; background: var(--navy); color: #FFFFFF; border-bottom: 1px solid var(--line-dark); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; flex: none; color: #FFFFFF; text-decoration: none; }
.brand-seal { width: 44px; height: 44px; flex: none; }
.brand-lock { display: inline-flex; align-items: center; gap: 14px; }
.brand-word { width: auto; height: 22px; }
.brand-sub { font: 600 13px/26px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--on-navy); padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .28); }
.nav-links { list-style: none; display: flex; align-items: center; gap: 26px; }
.nav-links a, .nav-plain a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font: 600 14px/1 var(--sans); color: var(--on-navy); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-plain a:hover { color: #FFFFFF; }
.nav-links a[aria-current="page"], .nav-plain a[aria-current="page"] { color: #FFFFFF; border-bottom-color: var(--blue-light); }
.bar form.inline { display: inline-flex; }
.bar button.out { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--r); font: 600 14px/1 var(--sans); cursor: pointer; white-space: nowrap; }
.bar button.out:hover { border-color: #FFFFFF; background: transparent; }
/* The phone menu: a <details>, so it opens with no script (academy.js adds Back and Escape). */
.menu { display: none; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--r); font: 600 14px/1 var(--sans); color: #FFFFFF; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: #FFFFFF; color: #0B1528; border-color: #FFFFFF; }
.menu-list { list-style: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--navy); border-bottom: 1px solid var(--line-dark); padding: 4px 40px 16px; }
.menu-list li + li { border-top: 1px solid var(--line-dark); }
.menu-list a, .menu-list button.out { display: flex; align-items: center; width: 100%; min-height: 52px; font: 600 17px/1.2 var(--sans); color: var(--on-navy); text-decoration: none; }
.menu-list form.inline { display: block; padding: 12px 0 4px; }
.menu-list button.out { justify-content: center; }
.menu-list a[aria-current="page"] { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--blue-light); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 1100px) {
  .nav-wide { display: none; }
  .menu { display: block; }
}

/* PAGE HEADS: a navy band on a landing page, as on fusiontrace.io. */
main { flex: 1; }
.phead { background: var(--navy); color: #FFFFFF; border-bottom: 1px solid var(--line-dark); --ok: #4CD18F; --bad: #FF8A8A; --muted: var(--on-navy-muted); }
.phead-in { padding: 44px 0 36px; }
.phead.has-sub .phead-in { padding-bottom: 28px; }
.phead-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.phead .eyebrow { color: var(--blue-light); }
.phead h1 { font: 600 clamp(32px, 4vw, 46px)/1.08 var(--serif); letter-spacing: -.015em; color: #FFFFFF; margin-bottom: 14px; text-wrap: balance; overflow-wrap: anywhere; }
.phead .lede { font-size: 18px; line-height: 1.6; color: var(--on-navy); max-width: 62ch; }
.phead p { color: var(--on-navy); }
.phead a { color: var(--blue-light); }
.phead .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.phead .meta .mono { font-size: 15px; color: #FFFFFF; overflow-wrap: anywhere; }
.phead .meta a { display: inline-flex; align-items: center; min-height: 44px; }
.phead p.mono { font-size: 14px; letter-spacing: .02em; color: var(--on-navy-muted); }
.phead .status-line { margin: 20px 0 0; font: 500 13px/1.5 var(--mono); letter-spacing: .04em; color: var(--on-navy-muted); padding-top: 14px; border-top: 1px solid var(--line-dark); max-width: 62ch; }
.phead-short .phead-in { padding-bottom: 40px; }
/* A page that is all head (not found, an error on our side) meets the footer with one hairline, as on fusiontrace.io. */
.phead-only { border-bottom: 0; }
.phead-only .phead-in { padding-top: 56px; padding-bottom: 48px; }
.phead-only .actions { margin: 28px 0 0; }
.titleblock { border: 1px solid var(--line-dark); border-radius: var(--r); padding: 20px 22px; }
.tb-seal { width: 120px; height: 120px; margin: 4px 0 20px; }
.tb-k { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 8px; }
.tb-rows div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-dark); }
.tb-rows dt { font: 500 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-navy-muted); }
.tb-rows dd { font-size: 15px; line-height: 1.5; color: var(--on-navy); min-width: 0; overflow-wrap: anywhere; }
.tb-rows dd b { color: #FFFFFF; }
.subnav { border-top: 1px solid var(--line-dark); }
.subnav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 24px; }
.subnav a { display: inline-flex; align-items: center; min-height: 48px; min-width: 44px; font: 600 14px/1.2 var(--sans); color: var(--on-navy); text-decoration: none; border-bottom: 2px solid transparent; }
.subnav a:hover { color: #FFFFFF; }
.subnav a[aria-current="page"] { color: #FFFFFF; border-bottom-color: var(--blue-light); }
/* How far along: one segment per module, filled when complete. */
/* The list reset below zeroes a list's margin, so the bar's own spacing is set with the band's specificity. */
.segs { list-style: none; display: flex; gap: 4px; max-width: 420px; padding: 0; }
.phead .segs { margin: 22px 0 12px; }
.segs li { flex: 1; height: 8px; margin: 0; border: 1px solid var(--blue-light); border-radius: 1px; }
.segs li.on { background: var(--blue-light); }

/* THE PAGE */
.page { padding-top: 32px; padding-bottom: 56px; overflow-wrap: break-word; }
.phead + .page { padding-top: 40px; }
h1 { font: 600 clamp(30px, 3.4vw, 40px)/1.12 var(--serif); letter-spacing: -.01em; color: var(--ink); margin-bottom: 16px; text-wrap: balance; }
h2 { font: 600 24px/1.25 var(--serif); color: var(--ink); margin: 40px 0 12px; text-wrap: balance; }
h3 { font: 600 19px/1.3 var(--serif); color: var(--ink); margin: 24px 0 8px; }
p, ul, ol { margin-bottom: 14px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 6px; }
/* Lists that are navigation or layout carry no bullets, indents or gaps of their own. */
.nav-links, .menu-list, .subnav ul, .foot-nav ul, .tiles, .segs, .checklist, .modrows, .module-rail ol, .toc ol { margin: 0; padding: 0; list-style: none; }
.nav-links li, .menu-list li, .subnav li, .foot-nav li, .tiles li, .segs li, .modrows li, .module-rail li, .toc li { margin-bottom: 0; }
strong, b { color: var(--ink); }
.lede { font-size: 19px; line-height: 1.6; color: var(--ink); max-width: 68ch; }
.eyebrow { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.muted { color: var(--muted); font-size: 15px; }
.big { font-size: 22px; letter-spacing: .12em; }
.lhead { margin-bottom: 8px; }
.prose { max-width: 72ch; }
.prose p, .prose li { font-size: 17px; line-height: 1.72; }
.prose h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 36px 0 12px; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 20px; }
.prose li { margin-bottom: 8px; }
.sec { margin: 0 0 44px; }
.sec > h2:first-child { margin-top: 0; margin-bottom: 4px; }
.sec-k { font-size: 15px; color: var(--muted); margin-bottom: 16px; max-width: 80ch; }
.tz { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.split > * { min-width: 0; }
.split > .card { margin-top: 12px; }
h2.first { margin-top: 0; }

/* NOTICES: a mono label and a plain paragraph under a hairline. Never a shaded or side-barred box. */
.notice { border-top: 1px solid var(--line-strong); padding-top: 14px; margin: 28px 0; max-width: 80ch; }
.notice-k { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.notice p:not(.notice-k) { color: var(--body); margin-bottom: 0; }
.notice p:not(.notice-k) + p { margin-top: 10px; }
.notice.ok { border-top: 2px solid var(--ok); }
.notice.ok .notice-k { color: var(--ok); }
.notice.bad { border-top: 2px solid var(--bad); }
.notice.bad .notice-k { color: var(--bad); }
.notice.bad p:not(.notice-k) { color: var(--ink); font-weight: 600; }
.status-line { border-top: 1px solid var(--line-strong); padding-top: 12px; margin: 20px 0; color: var(--ink); font-weight: 600; max-width: 80ch; }
.done { border-top: 2px solid var(--ok); padding-top: 10px; margin-bottom: 24px; color: var(--ink); font-weight: 600; max-width: 80ch; }
.error { color: var(--bad); border-top: 2px solid var(--bad); padding-top: 10px; margin: 12px 0 16px; font-size: 16px; font-weight: 600; max-width: 80ch; }
.ok { color: var(--ok); font-weight: 600; }
.offline-banner { border-top: 2px solid var(--blue); padding-top: 10px; margin-bottom: 20px; color: var(--ink); font-weight: 600; }
.offline-banner.synced { border-top-color: var(--ok); }

/* BUTTONS: the site's. Primary is filled ink; secondary is white with a strong hairline. */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.step-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 8px; }
.step-actions form.inline { display: inline-flex; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: var(--r); font: 600 15px/1.2 var(--sans); cursor: pointer; text-decoration: none; text-align: center; background: var(--ink); color: #FFFFFF; border: 1px solid var(--ink); }
button:hover, .button:hover { background: var(--navy-2); border-color: var(--navy-2); }
button.secondary, .button.secondary { background: var(--white); color: var(--ink); border-color: var(--line-strong); }
button.secondary:hover, .button.secondary:hover { background: var(--white); border-color: var(--ink); }
button.link { background: none; border: 0; padding: 0; min-height: 44px; color: var(--blue); font: inherit; text-decoration: underline; text-underline-offset: 3px; }
button.link:hover { background: none; }
button[disabled] { opacity: .6; cursor: not-allowed; }
.phead .button { background: #FFFFFF; color: #0B1528; border-color: #FFFFFF; }
.phead .button.secondary { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .6); }
form.inline { display: inline; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.inline-form .field { flex: 1 1 160px; }
.inline-form .field > span { font-size: 13px; }
.inline-form > input { flex: 1 1 160px; width: auto; min-width: 0; }
.inline-form button { min-height: 48px; padding: 0 16px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; }

/* FORMS */
.stack { display: grid; gap: 16px; max-width: 640px; margin: 12px 0 24px; }
.stack.compact { margin: 8px 0 16px; }
.stack > button { justify-self: start; }
.stack.exam, .stack.check { max-width: 860px; gap: 0; }
.stack.exam > .muted, .stack.exam > .row, .stack.check > button { margin-top: 8px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span { font: 600 15px/1.35 var(--sans); color: var(--ink); }
.field small { color: var(--muted); font-size: 14px; line-height: 1.5; }
input, select, textarea { font: 400 17px/1.4 var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 11px 12px; min-height: 48px; width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
/* Safari ignores a native select's height and padding, so every select draws its own box and chevron. */
select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B1528' stroke-width='2'/%3E%3C/svg%3E"); }
textarea { min-height: 120px; resize: vertical; }
input[type="radio"], input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; flex: none; margin-top: 2px; padding: 0; accent-color: var(--blue); }
/* A choice is a full-row tap area. */
.opt { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 12px 14px; margin: 8px 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); color: var(--ink); cursor: pointer; }
.opt:hover { border-color: var(--line-strong); }
.opt:has(input:checked) { border-color: var(--blue); outline: 1px solid var(--blue); outline-offset: -2px; }
.stack > .opt { margin: 0; }
fieldset.q { min-width: 0; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px 12px; margin: 0 0 16px; background: var(--white); }
fieldset.q legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font: 600 17px/1.5 var(--sans); color: var(--ink); }
fieldset.q legend + * { clear: both; }
fieldset.q .opt { background: transparent; }
fieldset.q .ok, fieldset.q .error { margin: 10px 0 6px; }
details.more, details.record { border-top: 1px solid var(--line); margin: 24px 0; max-width: 820px; }
details.more > summary, details.record > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; color: var(--blue); font-weight: 600; }
details.record[open] > summary { margin-bottom: 8px; }

/* CARDS: white, a hairline, 3 px corners, no shadow. */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 40px; }
.card, .panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin: 20px 0; min-width: 0; }
.cards > .card { margin: 0; }
.card > h2:first-child, .panel > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card > :last-child, .panel > :last-child { margin-bottom: 0; }
.card .stack { max-width: 640px; }
.split .card .stack { max-width: none; }
.card-k { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.staff-actions { border-color: var(--line-strong); }
.enrol { max-width: 80ch; }

/* TABLES: the site's. Up to 1100 px a wide table becomes a stack of cards; a narrow one stays a table. 1100, not the
   phone layout's 820: a phone held sideways (844 to 932 px) and a tablet (834 to 1024) are too narrow for the wider
   tables as well, which slid up to 215 px sideways inside their boxes there (19 Oct 2026). */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); margin: 12px 0 28px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; color: var(--body); }
th { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
tr:last-child td { border-bottom: 0; }
td.any { overflow-wrap: anywhere; }
/* A link in a cell gets a 44 px tall press area from padding the cell already has (14 px above and below), so the
   row keeps its height and two rows never share a press area. */
td a:not(.button) { display: inline-block; min-width: 44px; padding: 13px 0; margin: -13px 0; }
td .mono, td.mono { font-size: 14px; }
.when, .id { white-space: nowrap; }
.empty { margin: 8px 0 24px; }
.stamp { display: inline-block; font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 2px; padding: 3px 8px; color: var(--ok); white-space: nowrap; vertical-align: 1px; }
.s-suspended, .s-revoked, .s-expired, .s-none, .s-void, .s-not-yet, .s-no-certificate { color: var(--bad); }
.s-pending-issue, .s-open, .s-in-training, .s-working-toward-it { color: var(--muted); border-style: dashed; }
.checklist { list-style: none; padding: 0; margin: 8px 0 20px; max-width: 900px; border-top: 1px solid var(--line); }
.checklist li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.checklist .stamp { justify-self: start; }
.stamps { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
@media (max-width: 1100px) {
  .tablewrap:not(.keep) { overflow-x: visible; border: 0; background: transparent; }
  .tablewrap:not(.keep) table, .tablewrap:not(.keep) tbody { display: block; width: 100%; }
  .tablewrap:not(.keep) thead { display: none; }
  .tablewrap:not(.keep) tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; padding: 14px 16px; margin-bottom: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
  .tablewrap:not(.keep) td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  .tablewrap:not(.keep) td::before { content: attr(data-k); display: block; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .tablewrap:not(.keep):not(.untitled) td:first-child { grid-column: 1 / -1; font-size: 16px; font-weight: 600; color: var(--ink); }
  .tablewrap:not(.keep):not(.untitled) td:first-child::before, .tablewrap:not(.keep) td[data-k=""]::before { display: none; }
  .tablewrap:not(.keep) td.any, .tablewrap:not(.keep) td[data-k=""], .tablewrap:not(.keep) td:has(.stamp) { grid-column: 1 / -1; }
  .tablewrap:not(.keep) td:empty { display: none; }
  .tablewrap.keep th, .tablewrap.keep td { padding: 12px; }
}

/* THE STEWARD'S CONSOLE */
.tiles { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; }
.tiles > li { margin: 0; min-width: 0; }
.tile { display: flex; flex-direction: column; height: 100%; padding: 18px 20px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); color: inherit; text-decoration: none; }
a.tile:hover { border-color: var(--line-strong); }
.tile .label { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.tile .num { font: 600 44px/1.05 var(--serif); color: var(--ink); margin: 10px 0 8px; font-variant-numeric: lining-nums tabular-nums; }
.tile .what { font-size: 14px; line-height: 1.5; color: var(--muted); }
.tile .go { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-top: auto; padding-top: 14px; }
/* The audit log: an action in plain words with its code underneath, who did it, and the record it concerns. */
.audit-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); margin: 12px 0 28px; }
.audit td.n { font: 400 13px/1.6 var(--mono); color: var(--muted); white-space: nowrap; }
.audit .code { display: block; font: 400 12px/1.4 var(--mono); color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.audit .who { font-weight: 600; color: var(--ink); }
.audit td.act { min-width: 230px; }
.audit td.lab.any { min-width: 180px; }
.audit td.detail { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
/* The audit log is a card per entry up to 1100 px, as the tables are. */
@media (max-width: 1100px) {
  .audit-wrap { border: 0; background: transparent; overflow-x: visible; }
  .audit, .audit tbody { display: block; }
  .audit thead { display: none; }
  .audit tr { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
  .audit td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .audit td.act { order: -1; flex: 1 0 100%; font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
  .audit td.act .code { font-weight: 400; }
  .audit td.n, .audit td.at { font: 500 12px/1.6 var(--mono); color: var(--muted); }
  .audit td.n::before { content: "# "; }
  .audit td.at::before { content: "\00b7\00a0"; margin-right: 2px; }
  .audit td.lab { flex: 1 0 100%; font-size: 15px; }
  .audit td.lab a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; }
  .audit td.lab::before { content: attr(data-k) "  "; font: 500 12px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .audit td:empty { display: none; }
}

/* LEARNING: the pathway, a module and its film, the knowledge check, the lab. */
.modrows { list-style: none; padding: 0; margin: 8px 0 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.modrows li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 4px 18px; align-items: baseline; padding: 14px 18px; margin: 0; border-bottom: 1px solid var(--line); }
.modrows li:last-child { border-bottom: 0; }
.mr-code { font: 500 14px/1.5 var(--mono); color: var(--muted); }
.mr-title { font-weight: 600; color: var(--ink); }
a.mr-title { color: var(--ink); text-decoration-color: var(--line-strong); }
a.mr-title:hover { color: var(--blue); }
/* The whole row presses the title link: a finger anywhere on a module's row opens it. */
a.mr-title::after { content: ""; position: absolute; inset: 0; }
.modrows li:hover { background: var(--paper); }
.mr-min { font: 400 13px/1.5 var(--mono); color: var(--muted); white-space: nowrap; }
.mr-state { justify-self: end; font-size: 14px; color: var(--muted); }
.module { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: start; }
.module-main { min-width: 0; }
.module-main > p, .module-main > ul, .module-main > ol, .module-main section > p, .module-main section > ul, .module-main section > ol { max-width: 72ch; }
.toc { display: none; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); margin: 0 0 24px; }
.toc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after { content: "+"; font: 400 22px/1 var(--sans); color: var(--muted); }
.toc[open] > summary::after { content: "\2212"; }
.toc li { border-top: 1px solid var(--line); }
.toc a { display: block; padding: 10px 0; color: var(--body); text-decoration: none; }
.module-head .lede { margin-bottom: 20px; }
.module-rail { position: sticky; top: 24px; border-top: 2px solid var(--ink); padding-top: 14px; font-size: 15px; }
.module-rail .card-k { color: var(--ink); }
.module-rail ol { list-style: none; padding: 0; margin: 0 0 18px; }
.module-rail li { margin: 0; border-bottom: 1px solid var(--line); }
.module-rail a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--body); text-decoration: none; line-height: 1.4; }
.module-rail a:hover { color: var(--blue); text-decoration: underline; }
.module-rail .cites { font: 400 13px/1.6 var(--mono); color: var(--muted); }
.module-video { display: block; width: 100%; max-width: 880px; aspect-ratio: 16 / 9; background: #000000; border-radius: var(--r); margin: 8px 0 28px; }
/* The film with its caption control: the Captions button mirrors the player's own CC control (academy.js). */
.module-film { max-width: 880px; margin: 8px 0 28px; }
.module-film .module-video { margin: 0; }
.film-captions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0 0; }
.film-captions .muted { font-size: 14px; }
.film-captions button .state { font-weight: 500; color: var(--muted); }
.film-captions button[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.film-captions button[aria-pressed="true"] .state { color: rgba(255, 255, 255, .8); }
video::cue { background-color: rgba(0, 0, 0, .78); color: #FFFFFF; }
.example { max-width: 80ch; }
.pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.pager a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); text-decoration: none; color: var(--ink); }
.pager a:hover { border-color: var(--line-strong); }
.pager .k { display: block; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.pager .next { text-align: right; grid-column: 2; }
.lab-steps { padding-left: 1.4em; }
.lab-steps li { margin-bottom: 10px; overflow-wrap: anywhere; }
.modlist { list-style: none; padding: 0; }
.modlist li { border-bottom: 1px solid var(--line); padding: 10px 0; display: grid; gap: 4px; }
.modlist .name { font-weight: 600; color: var(--ink); }

/* THE EXAM: a strip under the bar with the clock, how many are answered, and whether the last answer is saved. */
.exam-strip { position: sticky; top: 0; z-index: 20; background: var(--navy-2); color: #FFFFFF; border-bottom: 1px solid var(--line-dark); }
.exam-strip-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
.exam-strip p { margin: 0; }
.exam-strip .x-name { font: 600 15px/1.3 var(--sans); color: #FFFFFF; margin-right: auto; }
.exam-strip .clock, .exam-strip .answered { font: 500 14px/1.4 var(--mono); color: #FFFFFF; }
.exam-strip .saved { font: 500 13px/1.4 var(--mono); color: var(--on-navy-muted); }
.exam-strip .saved .working { border-color: var(--line-dark); border-top-color: var(--blue-light); }
.exam-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; margin: 8px 0 32px; }
.exam-kinds > .panel { margin: 0; }
.result-head .stamp { font-size: 14px; padding: 6px 12px; }

/* CERTIFICATES */
.certlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin: 8px 0 32px; }
.certcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; min-width: 0; }
.certcard .cid { font: 500 22px/1.3 var(--mono); letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; margin: 4px 0 6px; }
.certcard .cred { font: 600 18px/1.35 var(--serif); color: var(--ink); margin-bottom: 12px; }
.certcard .links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 8px 0 0; font-weight: 600; }
.certcard .links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.cid-big { font: 500 clamp(26px, 3vw, 36px)/1.2 var(--mono); letter-spacing: .03em; overflow-wrap: anywhere; }
/* A certificate or a signed attestation is a document: white paper in both themes, like a printed page. */
.certificate { --ink: #0B1528; --body: #2B3547; --muted: #4A5568; --line: #D5DAE2; --line-strong: #6B778C; --blue: #1F4FCC; --white: #FFFFFF; --ok: #1B6B3A; --bad: #8A1F2B;
  color-scheme: light; background: #FFFFFF; color: var(--body); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 56px 64px; max-width: 880px; margin: 0 auto;
  outline: 1px solid var(--line); outline-offset: -12px; }
.certificate .doc-head { text-align: center; margin-bottom: 32px; }
.certificate .doc-seal { width: 112px; height: 112px; margin: 0 auto 18px; }
.certificate .doc-word { width: 165px; height: 22px; margin: 0 auto 14px; }
.certificate .doc-head .eyebrow { margin-bottom: 14px; }
.certificate h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 18px; }
.certificate .holder { font: 600 26px/1.3 var(--serif); color: var(--ink); margin-bottom: 4px; }
.certificate .doc-org { font-size: 18px; color: var(--body); margin-bottom: 0; }
.certificate .doc-close { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: end; }
.certificate .doc-close.has-award { grid-template-columns: minmax(0, 1fr) auto; }
.certificate .doc-close-text { min-width: 0; }
.certificate .doc-verify { margin-bottom: 0; }
.certificate .doc-url { white-space: nowrap; }
.certificate .doc-certified { width: 104px; height: 104px; }
.certificate .doc-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.certificate .doc-foot > :last-child { margin-bottom: 0; }
.nobreak { white-space: nowrap; }
.doc-actions { max-width: 880px; margin: 28px auto 0; justify-content: center; }
/* A signed attestation's letterhead: the seal and the wordmark side by side, "Academy" as live text, as in the bar. */
.certificate .doc-letterhead { display: flex; align-items: center; gap: 16px; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.certificate .doc-letterhead .doc-seal { width: 64px; height: 64px; margin: 0; flex: none; }
.doc-lock { display: inline-flex; align-items: center; gap: 14px; }
.certificate .doc-lock .doc-word { width: auto; height: 22px; margin: 0; }
.doc-sub { font: 600 13px/26px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); padding-left: 14px; border-left: 1px solid var(--line-strong); }
.certificate.attestation .doc-head { text-align: left; }
.certificate button, .certificate .button { background: #0B1528; color: #FFFFFF; border-color: #0B1528; }
.facts { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); margin: 20px 0; border-top: 1px solid var(--line); }
.facts dt, .facts dd { padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 12px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-right: 20px; }
.facts dd { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.facts.two { grid-template-columns: repeat(2, minmax(150px, max-content) minmax(0, 1fr)); column-gap: 0; }
.facts.two dt:nth-of-type(even) { padding-left: 24px; }
.facts.two dt.full { grid-column: 1; padding-left: 0; }
.facts.two dd.full { grid-column: 2 / -1; }
.result-hash { font: 400 14px/1.5 var(--mono); word-break: break-all; }
.canon .field input.initials { max-width: 8em; text-transform: uppercase; letter-spacing: .08em; }
.canons li { margin-bottom: 12px; }
.canons .initialed { display: inline-flex; gap: 8px; align-items: baseline; margin-top: 4px; padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 2px; font-size: 14px; }
.canons .initialed .mono { font-size: 16px; color: var(--ink); letter-spacing: .08em; }

/* SIGNING IN: the front door, plain on purpose. */
.door { max-width: 520px; margin: 24px auto 24px; }
.door-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 36px 36px 28px; }
.door-seal { width: 104px; height: 104px; margin: 0 0 22px; }
.door h1 { font-size: 34px; line-height: 1.15; margin-bottom: 12px; }
.door p { margin-bottom: 18px; }
.door .stack { max-width: none; margin-bottom: 18px; }
.door .stack > button { justify-self: stretch; }
.door-card > :last-child { margin-bottom: 0; }
.door-foot { margin-top: 18px; font-size: 15px; color: var(--muted); }
.qr-wrap { display: inline-block; line-height: 0; padding: 8px; margin: 4px 0 16px; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r); }
.qr-wrap svg { display: block; width: 232px; height: 232px; max-width: 100%; }
.totp-key { display: inline-block; font-size: 18px; letter-spacing: .06em; word-spacing: .3em; color: var(--ink); overflow-wrap: anywhere; }
/* Two columns of codes; the numbers sit inside the gutter and a code never breaks at its hyphen. */
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 16px 0 24px; padding: 16px 0; list-style-position: inside; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 17px; letter-spacing: .04em; color: var(--ink); }
.recovery-codes li { white-space: nowrap; margin: 0; }

/* TAKING THE COURSE OFFLINE (offline.js) */
.badge { display: inline-block; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 2px; padding: 1px 6px; margin: 2px 4px 2px 0; color: var(--muted); white-space: nowrap; }
.badge.ready, .badge.synced, .badge.complete { color: var(--ok); }
.badge.waiting { color: var(--blue); }
progress { width: 100%; height: 14px; accent-color: var(--blue); }
.progress-line { font: 500 14px/1.5 var(--mono); color: var(--ink); }
.working { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
#offline-app .phead { margin: 0 0 24px; border-radius: var(--r); }
#offline-app .phead .wrap { padding-left: 24px; padding-right: 24px; }
#offline-app .page { padding: 0; }
/* SAVE FOR THE FLIGHT (23 Oct 2026): the step strip while a save runs, the control beside a film, the practice sitting. */
.flight-work { margin: 12px 0 20px; }
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 0 0 10px; font: 500 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.steps li { position: relative; padding-left: 18px; margin: 0; }
.steps li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; }
.steps li.on { color: var(--blue); }
.steps li.on::before { background: var(--blue); border-color: var(--blue); animation: pulse 1s ease-in-out infinite; }
.steps li.done { color: var(--ok); }
.steps li.done::before { background: var(--ok); border-color: var(--ok); }
@keyframes pulse { 50% { opacity: .3; } }
.flight-time { margin: 6px 0 0; font: 500 13px/1.5 var(--mono); color: var(--muted); }
.flight-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 20px; }
.flight-line .muted { font-size: 14px; }
.plist { list-style: none; padding: 0; }
.plist li { border-bottom: 1px solid var(--line); padding: 10px 0; display: grid; gap: 4px; }
.plist .name { font-weight: 600; color: var(--ink); }
.practice-why { margin: 8px 0 0; font-size: 15px; }
.q .chosen { font-weight: 600; color: var(--ink); }
#offline-app .exam-strip { margin: 0 0 20px; border-radius: var(--r); }
#offline-app .exam-strip-in { padding-left: 16px; padding-right: 16px; }
.progress-line.ok { color: var(--ok); }

/* THE FOOTER: the site's two columns. */
.foot { background: var(--navy); color: var(--on-navy-muted); padding: 48px 0 40px; border-top: 1px solid var(--line-dark); font-size: 15px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--line-dark); }
.foot-mark .brand-seal { width: 40px; height: 40px; }
.foot-k { margin-top: 14px; font: 500 12px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy); }
.foot-nav ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 0 28px; padding: 0; margin: 0; }
.foot-nav li { margin: 0; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--on-navy); text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; color: #FFFFFF; }
.foot-legal { padding-top: 20px; display: grid; gap: 8px; }
.foot-legal p { font-size: 14px; line-height: 1.65; max-width: 110ch; margin: 0; }

/* DARK: the buttons turn white on navy; everything else follows the tokens above. */
@media (prefers-color-scheme: dark) {
  button, .button { background: #FFFFFF; color: #0B1528; border-color: #FFFFFF; }
  button:hover, .button:hover { background: #FFFFFF; border-color: var(--blue-light); }
  button.secondary, .button.secondary { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .6); }
  button.secondary:hover, .button.secondary:hover { background: transparent; border-color: #FFFFFF; }
  button.link, button.link:hover { background: none; color: var(--blue); }
  .certificate button, .certificate .button { background: #0B1528; color: #FFFFFF; border-color: #0B1528; }
  select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='2'/%3E%3C/svg%3E"); }
  ::selection { background: rgba(143, 180, 255, .3); }
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .phead-grid, .split, .module { grid-template-columns: 1fr; gap: 28px; }
  .titleblock { max-width: 640px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: 1fr; }
  .module-rail { display: none; }
  .toc { display: block; }
}
@media (max-width: 820px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .bar-in { min-height: 64px; gap: 12px; }
  .brand { gap: 10px; }
  .brand-seal { width: 36px; height: 36px; }
  .brand-lock { display: grid; gap: 6px; }
  .brand-word { height: 18px; }
  .brand-sub { font-size: 12px; line-height: 1; letter-spacing: .2em; border-left: 0; padding-left: 0; }
  .menu-list { padding: 4px 16px 16px; }
  .phead-in { padding-top: 28px; padding-bottom: 28px; }
  .phead-only .phead-in { padding-top: 36px; padding-bottom: 36px; }
  .tb-rows div { grid-template-columns: 1fr; gap: 2px; }
  .tb-seal { width: 96px; height: 96px; }
  .subnav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .page, .phead + .page { padding-top: 28px; padding-bottom: 48px; }
  .tiles { gap: 10px; }
  .tile { padding: 14px 14px 12px; }
  .tile .num { font-size: 36px; margin: 6px 0; }
  .tile .go { display: none; }
  .actions .button, .actions button, .stack > button { width: 100%; justify-self: stretch; }
  .row > button { flex: 1 1 100%; }
  .flight-line > button { flex: 1 1 100%; }
  .step-actions > *, .step-actions .button, .step-actions button { width: 100%; }
  .modrows li { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 12px 14px; }
  .modrows .mr-min { grid-column: 2; grid-row: 2; }
  .modrows .mr-state { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: auto; text-align: left; }
  .exam-strip .x-name { flex: 1 0 100%; }
  .certlist { grid-template-columns: 1fr; }
  .certificate { padding: 28px 18px; outline: 0; }
  .certificate .doc-seal, .certificate .doc-certified { width: 88px; height: 88px; }
  .certificate .doc-close.has-award { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .certificate .doc-certified { justify-self: center; }
  .certificate .doc-url { white-space: normal; overflow-wrap: anywhere; }
  .certificate .doc-letterhead { gap: 12px; }
  .certificate .doc-letterhead .doc-seal { width: 52px; height: 52px; }
  .doc-lock { display: grid; gap: 6px; }
  .certificate .doc-lock .doc-word { height: 18px; }
  .doc-sub { font-size: 12px; line-height: 1; letter-spacing: .2em; border-left: 0; padding-left: 0; }
  .facts, .facts.two { grid-template-columns: 1fr; }
  .facts dt { border-bottom: 0; padding-bottom: 0; }
  .facts dd { padding-top: 2px; }
  .facts.two dt:nth-of-type(even) { padding-left: 0; }
  .facts.two dt.full, .facts.two dd.full { grid-column: auto; }
  .checklist li { grid-template-columns: 1fr; gap: 6px; }
  .door { margin-top: 4px; }
  .door-card { padding: 24px 18px 20px; }
  .door-seal { width: 84px; height: 84px; }
  .door h1 { font-size: 30px; }
  .recovery-codes { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; gap: 20px; }
  .foot-nav ul { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 360px) {
  .subnav ul { grid-template-columns: 1fr; }
}
/* 320 px, the width WCAG reflow is judged at: a date in a two-column card may wrap rather than push the page sideways. */
@media (max-width: 380px) {
  .tablewrap:not(.keep) td .when { white-space: normal; }
}

/* PRINT: a certificate, an attestation or recovery codes print clean on Letter or A4, with no bar. */
@page { margin: 16mm; }
@media print {
  .bar, .foot, .skip, .noprint, .no-print, .done, .offline-banner, .subnav, .exam-strip, .phead { display: none !important; }
  html, body { background: #FFFFFF; color: #000000; }
  .page { padding: 0; }
  .wrap { max-width: none; padding: 0; }
  .certificate { border: 0; outline: 0; padding: 0; max-width: none; }
  .door-card { border: 0; padding: 0; }
  a { color: inherit; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }