/* Privacy108 training platform
   Visual direction: clinical calm.
   Warm off white, one muted green, serif headings, generous space.
   Nothing here loads from another origin. */

:root {
  --paper: #fbfaf7;
  --panel: #ffffff;
  --ink: #22302c;
  --ink-soft: #3d4642;
  --ink-faint: #8b8577;
  --line: #e4e0d6;
  --line-soft: #efece4;
  --green: #3f6d63;
  --green-dark: #33574f;
  --green-wash: #f3f7f5;
  --amber-wash: #fbf6ea;
  --amber-line: #ddc48a;
  --clay: #a2493f;
  --clay-wash: #fbf1ef;
  --clay-line: #e3bdb6;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; min-height: 100vh; }

.wrap { width: 100%; max-width: 620px; margin: 0 auto; padding: 0 22px; }

/* The masthead and the footer keep the reading width whatever the screen
   below them is doing, so the brand does not drift to the far edge of a
   large monitor. Only the screen itself widens. */
.wrap.roomy { max-width: 1160px; }
.wrap.wide { max-width: 1280px; }

.skip { position: absolute; left: -9999px; }

/* Announced to a screen reader, never drawn. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  left: 10px; top: 10px; z-index: 20; background: var(--panel);
  padding: 10px 16px; border-radius: var(--radius); border: 1px solid var(--line);
}

/* ---------- masthead ---------- */

.masthead { background: var(--panel); border-bottom: 1px solid var(--line); }
.masthead-inner { display: flex; align-items: center; gap: 14px; min-height: 62px; }
.brand {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
}
.client-name {
  font-size: 14px; color: var(--ink-soft);
  border-left: 1px solid var(--line); padding-left: 14px;
}
.link-button {
  margin-left: auto; background: none; border: none; padding: 6px 2px;
  font: inherit; font-size: 14px; color: var(--green); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.link-button:hover { color: var(--green-dark); }

/* The masthead can carry two controls, so the pair is pushed right as a
   group and neither one claims the space for itself. */
.masthead-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.masthead-actions .link-button { margin-left: 0; }

main { flex: 1 0 auto; padding: 44px 0 60px; }

/* ---------- panels and type ---------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 34px 36px;
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 29px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  color: var(--ink);
}

h2 { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 30px 0 10px; }

p { margin: 0 0 15px; }
p:last-child { margin-bottom: 0; }
p.lede { font-size: 18px; line-height: 1.55; color: var(--ink); }
p.small { font-size: 14px; color: var(--ink-faint); line-height: 1.6; }
p.hint { font-size: 14px; color: var(--ink-faint); margin: 0 0 10px; }
p.loading { color: var(--ink-faint); }

a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--green-dark); }

.kicker {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--green); font-weight: 700; margin: 0 0 13px;
}

.rule { height: 1px; background: var(--line); margin: 26px 0; border: 0; }

/* ---------- forms ---------- */

label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 6px; }

input[type="email"], input[type="text"] {
  width: 100%; padding: 13px 14px; font: inherit; color: var(--ink);
  background: var(--panel); border: 1px solid #cdc7b8; border-radius: 8px;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}
input.code {
  font-family: ui-monospace, Consolas, Menlo, monospace;
  font-size: 22px; letter-spacing: 0.18em; text-align: center; text-transform: uppercase;
}

button.primary {
  margin-top: 20px; width: 100%; padding: 14px 20px; font: inherit; font-weight: 600;
  color: #fff; background: var(--green); border: 0; border-radius: 8px; cursor: pointer;
}
button.primary:hover { background: var(--green-dark); }
button.primary[disabled] { background: #b4b0a4; cursor: default; }

/* A button that is counting down says so, and reads as waiting rather than
   as broken. The number is what tells a reader it is going to open. */
.nav-bar button.forward.waiting {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* ---------- notices ---------- */

.notice {
  border-radius: 8px; padding: 14px 16px; font-size: 14.5px; line-height: 1.6;
  margin: 0 0 20px; border: 1px solid var(--line); background: var(--green-wash);
  color: var(--ink-soft);
}
.notice.warn { background: var(--amber-wash); border-color: var(--amber-line); }
.notice.bad { background: var(--clay-wash); border-color: var(--clay-line); }
.notice.good { background: var(--green-wash); border-color: var(--green); }

.stack > * + * { margin-top: 10px; }

/* The way out of this page is an action, not another line of advice, so it
   sits clear of the paragraph above it. */
.stack + p.small { margin-top: 24px; }

/* ---------- module list ---------- */

.section-list { list-style: none; margin: 22px 0 0; padding: 0; }
.section-list li { border-top: 1px solid var(--line-soft); }
.section-list li:first-child { border-top: 1px solid var(--line); }
.module-link {
  display: block; width: 100%; text-align: left; padding: 20px 4px;
  font: inherit; background: none; border: none; cursor: pointer; color: var(--ink);
}
.module-link:hover { background: var(--green-wash); }
.module-link .title { font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.module-link .meta { font-size: 13px; color: var(--ink-faint); margin-top: 5px; }
.pill {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 3px;
  background: var(--line-soft); color: var(--ink-faint); margin-left: 10px;
  vertical-align: 3px; font-family: system-ui, sans-serif;
}
.pill.done { background: var(--green-wash); color: var(--green); }

/* ---------- module shell ---------- */

.module-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 22px; }

.progress-rail {
  position: sticky; top: 0; z-index: 5;
  background: rgba(251,250,247,0.94);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 0 14px;
}
.progress-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 9px;
}
.progress-track { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.progress-fill { height: 100%; background: var(--green); transition: width 260ms ease; }

.section {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 46px 54px 50px; margin: 24px 0;
  min-height: min(72vh, 660px);
  display: flex; flex-direction: column; justify-content: center;
}

/* A screen is one column of words and one of animation on a wide window,
   and one column on a narrow one. Side by side is what keeps the card
   from being a strip without running a line of body copy to a hundred and
   thirty characters. */
.section.has-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: start;
}

/* On a long screen the text runs well past the animation, which used to
   leave the right half of the card empty. The animation holds its place in
   the window instead, so it is still there when the reader reaches the part
   of the text it illustrates. */
.section.has-media > .media {
  margin: 0;
  position: sticky;
  top: 24px;
}
.section-text { min-width: 0; }
.section-text > :first-child { margin-top: 0; }
.section-text > :last-child { margin-bottom: 0; }

/* A screen with no animation still sits on the wide card, so its contents
   are held to a readable measure rather than run to the full width. That
   covers the questions, the sorting exercises and the assessment as well
   as the prose, because each of those renderers puts its own children
   straight into the card. */
.section:not(.has-media) > * { max-width: 72ch; width: 100%; }
.section:not(.has-media) > .section-text { max-width: 68ch; }

/* The badge is a fixed square mark, not a block, so it keeps its own size
   rather than being stretched to the width of the card by the column. */
.section > .section-badge { align-self: flex-start; width: 40px; flex: none; }
.section h1 { margin-bottom: 16px; }
/* A subheading inside a screen. The screen already has its title, so this
   sits below it in weight and is a break in the reading rather than a new
   subject. */
.section h2.sub, .section h3.sub {
  font-family: var(--serif); font-weight: normal;
  font-size: 22px; line-height: 1.3;
  margin: 30px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.section ul, .section ol { margin: 0 0 15px; padding-left: 20px; }
.section li { margin-bottom: 7px; }
.section li:last-child { margin-bottom: 0; }
.section > :last-child { margin-bottom: 0; }
.section p + p { margin-top: 0; }

/* The generic list indent inside a section must not reach the option,
   statement and finding lists, which are laid out as cards. */
.section ul.options,
.section ul.statements,
.section ul.findings { padding-left: 0; list-style: none; }

.section.callout { background: var(--green-wash); border-color: #cfe0d9; }
.section.callout-important { background: var(--amber-wash); border-color: var(--amber-line); }
.section.callout-tip { background: var(--green-wash); border-color: #cfe0d9; }
.section.callout-dont { background: var(--clay-wash); border-color: var(--clay-line); }
.section.callout .kicker { color: var(--green-dark); }

.section.scenario { background: #f8f6f1; border-color: #ddd6c6; }

.prompt { font-family: var(--serif); font-size: 21px; line-height: 1.35; margin: 0 0 6px; }
.prompt-note { font-size: 14px; color: var(--ink-faint); margin: 0 0 20px; }

/* ---------- options ---------- */

.options { list-style: none; margin: 0; padding: 0; }
.options li { margin: 0 0 11px; }
.option {
  display: flex; gap: 13px; align-items: flex-start; width: 100%; text-align: left;
  padding: 15px 17px; font: inherit; font-size: 15.5px; line-height: 1.5; color: var(--ink);
  background: var(--panel); border: 1px solid #ddd8cc; border-radius: 9px; cursor: pointer;
}
.option:hover:not([disabled]) { border-color: var(--green); background: #fcfdfc; }
.option[aria-pressed="true"] { border-color: var(--green); background: var(--green-wash); box-shadow: inset 0 0 0 1px var(--green); }
.option[disabled] { cursor: default; }
.option .marker {
  flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; border-radius: 4px;
  border: 1px solid #b6ae9c; background: var(--panel);
}
.option.style-single .marker { border-radius: 50%; }
.option[aria-pressed="true"] .marker { background: var(--green); border-color: var(--green); }
.option.judged-right { border-color: var(--green); background: var(--green-wash); }
.option.judged-right .marker { background: var(--green); border-color: var(--green); }
.option.judged-wrong { border-color: var(--clay); background: var(--clay-wash); }
.option.judged-wrong .marker { background: var(--clay); border-color: var(--clay); }
.option.judged-missed { border-color: var(--amber-line); background: var(--amber-wash); }

.feedback {
  margin: 9px 0 0 0; padding: 15px 18px; font-size: 15px; line-height: 1.62;
  border-radius: 0 8px 8px 0; background: var(--green-wash); border-left: 3px solid var(--green);
  color: var(--ink-soft);
}
.feedback.right { background: var(--green-wash); border-left-color: var(--green); }
.feedback.wrong { background: var(--clay-wash); border-left-color: var(--clay); }
.feedback.partial { background: var(--amber-wash); border-left-color: #c79a3f; }
.feedback p:last-child { margin-bottom: 0; }
.feedback strong { color: var(--ink); }

/* ---------- sort ---------- */

/* The unsorted items, which is also a place to drop something back. */
.sort-pool {
  display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 20px;
  min-height: 58px; padding: 10px; border-radius: 9px;
  border: 1px dashed transparent; transition: background 120ms ease, border-color 120ms ease;
}
.sort-pool.over { border-color: var(--green); background: var(--green-wash); }
.sort-item {
  padding: 11px 14px; font: inherit; font-size: 14.5px; line-height: 1.45; text-align: left;
  background: var(--panel); border: 1px solid #ddd8cc; border-radius: 8px; cursor: pointer; max-width: 100%;
}
.sort-item:not([disabled]) { cursor: grab; touch-action: none; user-select: none; }
.sort-item:hover:not([disabled]) { border-color: var(--green); }
.sort-item.is-dragging { opacity: 0.3; }

/* What follows the pointer. The original stays where it was, dimmed, so
   nothing behind it shuffles about while the reader is still deciding. */
.drag-proxy {
  position: fixed; z-index: 60; pointer-events: none; margin: 0;
  cursor: grabbing; opacity: 0.97;
  box-shadow: 0 10px 26px rgba(34, 48, 44, 0.22);
  border-color: var(--green) !important; background: var(--panel);
  transform: rotate(-1deg);
}
body.is-sorting { cursor: grabbing; }
body.is-sorting * { cursor: grabbing !important; }
.sort-item[aria-pressed="true"] { border-color: var(--green); background: var(--green-wash); box-shadow: 0 0 0 2px rgba(63,109,99,.16); }
.sort-item[disabled] { cursor: default; }
.sort-item.judged-right { border-color: var(--green); background: var(--green-wash); }
.sort-item.judged-wrong { border-color: var(--clay); background: var(--clay-wash); }
.sort-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .sort-columns { grid-template-columns: 1fr; } }
.sort-column {
  border: 1px dashed #cfc8b8; border-radius: 9px; padding: 14px; min-height: 104px; background: #fdfcfa;
}
.sort-column.armed { border-style: solid; border-color: var(--green); }
.sort-column.over { border-style: solid; border-color: var(--green); background: var(--green-wash); }
.sort-column-body { min-height: 34px; }

/* The way in for anybody not using a mouse. It only appears while an item
   is held, so a column is not carrying a control with nothing to act on. */
/* A display rule beats the hidden attribute, so the attribute is given it
   back explicitly. Without this the button shows during a drag, when there
   is nothing held for it to place. */
.place-here[hidden] { display: none; }
.place-here {
  display: block; width: 100%; margin: 10px 0 0; padding: 7px 12px;
  font: inherit; font-size: 13px; border: 1px solid var(--green);
  border-radius: 7px; background: var(--panel); color: var(--green-dark); cursor: pointer;
}
.place-here:hover { background: var(--green-wash); }
.place-here:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.sort-column h3 {
  margin: 0 0 11px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; font-family: system-ui, sans-serif;
}
.sort-column .drop-hint { font-size: 13px; color: #b0a996; margin: 0; }
.sort-column .sort-item { display: block; width: 100%; margin-bottom: 8px; }

/* ---------- find issues ---------- */

.passage {
  background: #fdfcfa; border: 1px solid var(--line); border-radius: 9px;
  padding: 18px 20px; margin: 0 0 18px;
  font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 13.5px; line-height: 1.95;
  white-space: pre-wrap; word-break: break-word; color: var(--ink-soft);
}
.span-btn {
  font: inherit; padding: 1px 2px; margin: 0; border: none;
  border-bottom: 2px dotted #c3bcaa; background: none; color: inherit; cursor: pointer; text-align: left;
  /* A button does not inherit the pre-wrap from .passage, so without this
     the newlines inside each span collapse and the email runs together. */
  white-space: pre-wrap;
}
.span-btn:hover:not([disabled]) { background: #eef3f1; }
.span-btn[aria-pressed="true"] { background: #dcebe6; border-bottom-color: var(--green); }
.span-btn[disabled] { cursor: default; }
.span-btn.hit { background: #d7e9e2; border-bottom-color: var(--green); }
.span-btn.missed { background: var(--amber-wash); border-bottom: 2px solid #c79a3f; }
.span-btn.false-positive { background: var(--clay-wash); border-bottom: 2px solid var(--clay); text-decoration: line-through; }
.span-plain { border: none; }

.findings { list-style: none; margin: 0; padding: 0; }
.findings li { margin-bottom: 16px; }
.findings .prompt { font-size: 16px; font-family: ui-monospace, Consolas, Menlo, monospace; margin-bottom: 4px; }

/* ---------- attestation ---------- */

.statements { list-style: none; margin: 0 0 22px; padding: 0; }
.statements li { margin-bottom: 11px; }
.statement {
  display: flex; gap: 13px; align-items: flex-start; padding: 14px 16px;
  border: 1px solid #ddd8cc; border-radius: 9px; background: var(--panel);
  cursor: pointer; font-size: 15px; line-height: 1.55;
}
.statement input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--green); }
.statement.ticked { border-color: var(--green); background: var(--green-wash); }

/* ---------- score ---------- */

.score-panel { text-align: center; padding: 24px 0 6px; }
.score-figure { font-family: var(--serif); font-size: 72px; line-height: 1; font-weight: 400; }
.score-figure.pass { color: var(--green); }
.score-figure.fail { color: var(--clay); }
.score-caption { font-size: 15.5px; color: var(--ink-soft); margin: 12px 0 0; }

.code-block {
  font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 23px; letter-spacing: 0.16em;
  text-align: center; padding: 18px; background: var(--green-wash);
  border: 1px solid #cfe0d9; border-radius: 9px; margin: 0 0 20px; word-break: break-all; color: var(--ink);
}

/* ---------- navigation ---------- */

.nav-bar { display: flex; gap: 12px; align-items: center; margin: 0 0 56px; }
.nav-bar .spacer { flex: 1 1 auto; }
button.secondary {
  padding: 12px 22px; font: inherit; color: var(--ink-soft); background: var(--panel);
  border: 1px solid #ddd8cc; border-radius: 8px; cursor: pointer;
}
button.secondary:hover:not([disabled]) { background: #f6f4ef; }
button.secondary[disabled] { color: #b6b0a2; border-color: var(--line-soft); cursor: default; }
button.forward {
  padding: 13px 30px; font: inherit; font-weight: 600; color: #fff;
  background: var(--green); border: 0; border-radius: 8px; cursor: pointer;
}
button.forward:hover:not([disabled]) { background: var(--green-dark); }
button.forward[disabled] { background: #b4b0a4; cursor: default; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line); padding: 20px 0;
  font-size: 13px; color: var(--ink-faint); background: var(--panel);
}
.footer p { margin: 0; }

/* ---------- icons and figures ---------- */

.icon {
  width: 22px; height: 22px; display: block; flex: none;
}

/* The mark at the top of a card. It names the kind of screen without
   taking a line of type to do it. */
.section-badge {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 0 18px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--green-wash); color: var(--green);
}
.section.callout .section-badge { background: var(--panel); border-color: #cfe0d9; }
.section.scenario .section-badge { background: var(--panel); border-color: #ddd6c6; }

/* The chapter mark in the progress rail. */
.progress-meta .chapter { display: inline-flex; align-items: center; gap: 8px; }
.icon-rail { width: 15px; height: 15px; color: var(--green); }

figure.figure { margin: 26px 0 0; }
.section > figure.figure:last-child { margin-bottom: 0; }

.figure-svg {
  display: block; width: 100%; height: auto;
  overflow: visible;
}
.figure-svg text {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  fill: var(--ink);
}
.figure-svg .fig-label { font-size: 15px; font-weight: 600; }
.figure-svg .fig-big {
  font-family: var(--serif); font-size: 21px; font-weight: 400; fill: var(--green-dark);
}
.figure-svg .fig-note { font-size: 12.5px; fill: var(--ink-faint); }

.figure-svg .fig-shell { fill: var(--green-wash); stroke: var(--line); stroke-width: 1; }
.figure-svg .fig-mid { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.figure-svg .fig-core { fill: #e8f0ed; stroke: #cfe0d9; stroke-width: 1; }

.figure-svg .fig-divider {
  stroke: var(--green); stroke-width: 1.4; stroke-dasharray: 4 5; stroke-linecap: round;
}
.figure-svg .fig-arrow {
  stroke: var(--green); stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

figure.figure figcaption {
  margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-faint);
}

/* A narrow screen cannot hold the side by side figures at a readable type
   size, so let them scroll rather than shrink the labels to nothing. */
@media (max-width: 560px) {
  figure.figure { overflow-x: auto; padding-bottom: 4px; }
  .figure-svg[viewBox="0 0 520 210"],
  .figure-svg[viewBox="0 0 520 168"] { min-width: 440px; }
  .section-badge { width: 36px; height: 36px; }
  .icon { width: 20px; height: 20px; }
}

/* A find the problems screen that describes a scene rather than quoting an
   email. The spans have to flow and wrap inside the sentence, which an
   inline-block button cannot do. */
.passage-prose {
  font-family: inherit; font-size: 16px; line-height: 1.85;
  white-space: normal; word-break: normal; color: var(--ink);
}
.passage-prose .span-btn {
  display: inline; white-space: normal; padding: 0; border: 0;
  border-bottom: 2px dotted #c3bcaa; box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.passage-prose .span-btn[aria-disabled="true"] { cursor: default; }
.findissues-prose .findings .prompt { font-family: inherit; font-size: 15px; }

/* ---------- narration and video ---------- */

.media { margin: 0 0 22px; }

.media-audio {
  background: var(--green-wash); border: 1px solid #cfe0d9; border-radius: 9px;
  padding: 13px 15px 15px;
}
.media-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 9px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green-dark); font-weight: 700;
}
.media-length { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: var(--ink-faint); }
.media-audio audio { display: block; width: 100%; height: 36px; }

/* The animation is part of the screen, so it has no frame, no border and
   no player furniture. Its own background is the paper colour, which is
   what lets it sit on the card without an edge. */
.media-video { position: relative; }
.media-video video {
  display: block; width: 100%; height: auto;
  background: var(--paper);
}

/* Motion that starts by itself and runs beside text has to be stoppable.
   The control is quiet until it is wanted and never hidden from the
   keyboard, because a control that only exists on hover does not exist
   for somebody who does not use a mouse. */
.motion-control {
  position: absolute; right: 10px; bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255, 255, 255, 0.86); color: var(--ink-soft);
  cursor: pointer; opacity: 0; transition: opacity 140ms ease;
}
.motion-control svg { width: 13px; height: 13px; display: block; }
.media-video:hover .motion-control,
.motion-control:focus-visible { opacity: 1; }
.motion-control:hover { color: var(--ink); border-color: var(--green); }
.motion-control:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* A reader who has asked for less motion gets the still frame, so the
   control is the way in rather than the way out and is always visible. */
.media-video.is-still .motion-control { opacity: 1; }

/* The transcript is the accessible equivalent of the narration, so it is
   always present, and closed by default because the screen already carries
   the same words. */
.transcript { margin: 12px 0 0; }
.transcript summary {
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--green-dark);
  padding: 3px 0; list-style-position: outside;
}
.transcript summary:hover { color: var(--green); }
.transcript[open] summary { margin-bottom: 8px; }
.transcript p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 10px; }
.transcript p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .section, .section.has-media {
    display: flex; flex-direction: column; padding: 30px 26px 34px; min-height: 0;
  }
  .section.has-media > .media { order: -1; margin: 0 0 24px; }
  .section:not(.has-media) > *, .section:not(.has-media) > .section-text { max-width: none; }
}

@media (max-width: 560px) {
  .section, .section.has-media { padding: 24px 20px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-control { opacity: 1; }
}

/* ---------- administrator portal ---------- */

.admin-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin: 0 0 22px;
}
.admin-head h1 { margin: 0 0 6px; }
.admin-head .kicker { margin-bottom: 8px; }

button.ghost {
  font: inherit; font-weight: 600; font-size: 14px; padding: 10px 16px;
  color: var(--green-dark); background: var(--panel);
  border: 1px solid #cfe0d9; border-radius: 8px; cursor: pointer;
}
button.ghost:hover { background: var(--green-wash); }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 0 0 26px; }
.tab {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-faint);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 11px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--green-dark); border-bottom-color: var(--green); }
.tab-count {
  font-size: 11px; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 99px;
  background: var(--line-soft); color: var(--ink-faint);
}
.tab.active .tab-count { background: var(--green-wash); color: var(--green-dark); }

.admin-body h2 { font-size: 19px; margin: 32px 0 6px; }
.admin-body h2:first-child { margin-top: 0; }
.admin-body > p.small { margin: 0 0 16px; max-width: 62ch; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 8px; }
.stat {
  display: flex; flex-direction: column; gap: 3px; padding: 16px 17px;
  background: var(--green-wash); border: 1px solid #cfe0d9; border-radius: var(--radius);
}
.stat-value { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--green-dark); }
.stat-label { font-size: 13px; font-weight: 600; }
.stat-note { font-size: 12px; color: var(--ink-faint); }

.row-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 6px; }
.row-form .field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 200px; }
.row-form .field label { margin: 0; font-size: 13px; }
.row-form .field.check { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 7px; padding-bottom: 12px; }
.row-form .field.check label { font-weight: 500; }
.row-form input[type="text"], .row-form input[type="email"] { padding: 10px 12px; }
.row-form button { flex: 0 0 auto; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th {
  text-align: left; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; padding: 11px 14px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.grid td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid td.mono { font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 13px; white-space: nowrap; }
table.grid td.muted { color: var(--ink-faint); font-size: 13px; white-space: nowrap; }
table.grid td.empty { color: var(--ink-faint); text-align: center; padding: 26px; }
table.grid td.actions { text-align: right; white-space: nowrap; }
table.grid td.actions button + button { margin-left: 10px; }

.pill.off { background: var(--clay-wash); color: var(--clay); }
.pill.admin { background: var(--green); color: #fff; }
.pill.warn { background: var(--amber-wash); color: #8a6520; }

button.small-button { font-size: 13px; padding: 7px 13px; }

.import-result { margin: 8px 0 0; }
ul.refused { margin: 10px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-soft); }
ul.refused li { margin-bottom: 5px; }

@media (max-width: 620px) {
  .admin-head { flex-direction: column; }
  .row-form .field { flex: 1 1 100%; }
}

/* Starting a module again, which is what makes annual training annual. */
button.retake { display: inline-block; margin: 8px 0 4px; font-size: 13.5px; }

/* ---------- reporting ----------
   The overview is the one screen an administrator reads rather than works in,
   so it is built as cards on the paper background: a headline, then the detail
   that takes the headline apart. Three steps of the one green carry the three
   rollout states, because the states are ordered rather than separate. */

.panel-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
  margin: 0 0 18px;
}
.panel-card > h2 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: normal;
  margin: 0 0 14px;
  color: var(--ink);
}
.panel-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.panel-pair > .panel-card { margin: 0 0 18px; }

.muted-note { color: var(--ink-faint); margin: 0 0 18px; }
.muted-inline { color: var(--ink-faint); font-size: 12px; margin-left: 8px; }

/* The headline: one ratio against a total, so a meter and not a pie. */
.meter-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.hero {
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1;
  color: var(--green-dark);
}
.hero-note { color: var(--ink-soft); font-size: 14px; }

.meter-track {
  display: flex;
  gap: 2px;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--line-soft);
}
.meter-fill {
  border: 0;
  padding: 0;
  height: 100%;
  min-width: 4px;
  cursor: pointer;
  transition: filter 120ms ease, outline-color 120ms ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.meter-fill:hover { filter: brightness(0.92); }
.meter-fill.is-on { outline-color: var(--ink); }
.meter-fill:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 4px; margin: 12px 0 0; padding: 0; }
.legend-entry {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 11px 4px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.legend-entry:hover { border-color: var(--line); background: var(--paper); }
.legend-entry.is-on { border-color: var(--green); background: var(--green-wash); color: var(--green-dark); }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.legend-label { text-transform: lowercase; }
.legend-value { font-weight: 600; color: var(--ink); }

/* Every chart carries the same figures as a table, because two of the three
   steps sit below a 3 to 1 contrast ratio against the panel. */
.chart-block { margin: 0; }
.chart-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0 0; }
.chart-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}
.chart-table td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); }
.chart-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.chart-block > .link-button { margin: 12px 0 0; font-size: 13px; }

.chart-figure { margin: 0; }
.chart-figure figcaption { font-size: 12.5px; color: var(--ink-faint); margin: 8px 0 0; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart .grid { stroke: var(--line); stroke-width: 1; }
svg.chart .tick { fill: var(--ink-faint); font-size: 11px; }
svg.chart .bar { fill: var(--green-dark); }
svg.chart .bar-label { fill: var(--ink); font-size: 12px; font-weight: 600; }
svg.chart .bar-target { fill: transparent; cursor: pointer; }
svg.chart .bar-target:hover { fill: rgba(63, 109, 99, 0.07); }
svg.chart .bar-target:focus-visible { fill: rgba(63, 109, 99, 0.12); outline: none; }

/* Horizontal bars for the score bands, where the labels are words and reading
   them across is easier than reading them on their side. */
.hbars { display: flex; flex-direction: column; gap: 8px; }
.hbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 4px;
  border-radius: 6px;
  cursor: pointer;
}
.hbar:hover, .hbar:focus-visible { background: var(--green-wash); outline: none; }
.hbar-label { flex: 0 0 78px; font-size: 12.5px; color: var(--ink-soft); }
.hbar-track { flex: 1 1 auto; height: 16px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: 4px; min-width: 0; }
.hbar-value { flex: 0 0 28px; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* One tooltip for the whole portal. */
.chart-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: var(--ink);
  color: #fff;
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 12.5px;
  line-height: 1.45;
  max-width: 240px;
  box-shadow: 0 6px 18px rgba(34, 48, 44, 0.22);
}
.chart-tip .tip-head { font-weight: 600; }
.chart-tip .tip-line { color: #d8e2de; }

/* Filtering the list, which the meter also drives. */
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.chip:hover { border-color: var(--green); color: var(--ink); }
.chip.is-on { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.chip-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.chip.is-on .chip-count { color: #fff; }
input.search {
  flex: 0 1 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  background: var(--panel);
  color: var(--ink);
}
input.search:focus { outline: 2px solid var(--green); outline-offset: 1px; }

.pill.part { background: var(--amber-wash); color: #8a6520; }

.export-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}

@media (max-width: 760px) {
  .panel-pair { grid-template-columns: 1fr; }
  .hero { font-size: 42px; }
  input.search { flex: 1 1 100%; }
}

/* Refinements once the overview was drawn and looked at. */
.panel-card .denominator { margin: 14px 0 0; font-size: 12.5px; }
.meter-fill.is-off { opacity: 0.42; }
.meter-fill.is-on { outline-color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
.export-row .grow { flex: 1 1 260px; margin: 0; }
.export-row .link-button { font-size: 13.5px; }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid th:nth-child(4) { text-align: right; }
svg.chart .bar-target:hover { fill: rgba(63, 109, 99, 0.05); }
svg.chart .bar-target:focus-visible { fill: rgba(63, 109, 99, 0.10); }
.meter .denominator { color: var(--ink-faint); margin: 12px 0 0; font-size: 12.5px; }
.meter .choose { margin: 6px 0 0; }
.stat-value.words { font-size: 20px; line-height: 1.25; }
.empty-state p { margin: 0 0 10px; color: var(--ink-soft); }
.empty-state p:last-child { margin: 0; }

/* ---------- verification and certificates ----------
   The public page discloses nobody. It says what was completed and when,
   and confirms a person only when the checker already knows who to name. */

.verify-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; }
.code-inline {
  font-family: ui-monospace, Consolas, Menlo, monospace;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.detail-list { border-top: 1px solid var(--line-soft); margin: 0 0 18px; }
.detail {
  display: flex;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
}
.detail-label { flex: 0 0 150px; color: var(--ink-faint); }
.detail-value { flex: 1 1 auto; color: var(--ink); }

.confirm-form { border-top: 1px solid var(--line); margin: 22px 0 0; padding: 20px 0 0; }
.confirm-form label { display: block; font-size: 13.5px; font-weight: 600; margin: 0 0 8px; }
.confirm-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.confirm-row input {
  flex: 1 1 240px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  background: var(--panel);
  color: var(--ink);
}
.confirm-row input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.confirm-row button.primary { flex: 0 0 auto; width: auto; margin-top: 0; padding: 10px 20px; }
.confirm-answer:not(:empty) { margin: 14px 0 0; }

a.forward.download { display: inline-block; text-decoration: none; margin: 6px 0 14px; }
.certificate-line { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 0; flex-wrap: wrap; }
.certificate-line .muted-inline {
  font-family: ui-monospace, Consolas, Menlo, monospace;
  font-size: 12px;
  margin: 0;
}

@media (max-width: 620px) {
  .detail { flex-direction: column; gap: 2px; }
  .detail-label { flex: none; }
}

/* ---------- review mode ----------
   Reading the training as an editor. The furniture is deliberately outside
   the module column and marked review-chrome, so the text index that turns
   a selection into an anchor never picks it up as content. */

.review-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--ink);
  color: #e7ece9;
  font-size: 13px;
}
.review-bar .small { color: #b9c6c1; margin: 0; }
.review-bar .muted-inline { color: #8fa39d; margin: 0; }
.review-bar .ghost {
  background: transparent;
  border: 1px solid #52655f;
  color: #e7ece9;
  border-radius: 999px;
  padding: 5px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.review-bar .ghost:hover { border-color: #e7ece9; }
.review-badge {
  background: var(--green);
  color: #fff;
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body:has(.review-bar) .site-footer { padding-bottom: 60px; }

.review-tag {
  position: fixed;
  z-index: 45;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 7px 13px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(34, 48, 44, 0.28);
}
.review-tag:hover { background: var(--green-dark); }

.review-panel {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: min(420px, 100%);
  z-index: 44;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(34, 48, 44, 0.10);
  padding: 22px 24px 80px;
  overflow-y: auto;
}
.review-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.review-panel-head h2 { font-family: var(--serif); font-size: 19px; font-weight: normal; margin: 0 0 14px; }
.review-close {
  background: none; border: 0; padding: 4px; font: inherit; font-size: 13px;
  color: var(--ink-faint); cursor: pointer; text-decoration: underline;
}
.review-panel textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font: inherit; font-size: 14.5px; resize: vertical;
  background: var(--paper); color: var(--ink);
}
.review-panel textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.review-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; }
.review-actions button.primary { width: auto; margin-top: 0; padding: 9px 18px; }
.review-actions .small { margin: 0; }

.review-quote {
  margin: 0 0 10px;
  padding: 8px 0 8px 14px;
  border-left: 3px solid var(--green);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}
.review-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 12px 0 0;
  background: var(--paper);
}
.review-card.focused { border-color: var(--green); background: var(--green-wash); }
.review-card p { margin: 0 0 8px; font-size: 14.5px; }
.review-card p:last-of-type { margin: 0; }
.review-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.warn-note { color: #8a6520; }

mark.review-mark {
  background: #fbe9c0;
  border-bottom: 2px solid var(--amber-line);
  padding: 0 1px;
  cursor: pointer;
  color: inherit;
}
mark.review-mark.settled { background: var(--green-wash); border-bottom-color: var(--green); }
mark.review-mark:hover { background: #f6dda2; }

/* The answer key, which a learner never sees. */
.answer-key {
  border: 1px dashed var(--amber-line);
  background: var(--amber-wash);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 22px 0 0;
}
.answer-key .kicker { margin: 0 0 10px; color: #8a6520; }
.key-prompt { font-weight: 600; font-size: 14px; margin: 12px 0 6px; }
.key-list { list-style: none; margin: 0; padding: 0; }
.key-list li { display: flex; gap: 10px; padding: 5px 0; font-size: 13.5px; line-height: 1.5; }
.key-mark {
  flex: 0 0 62px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 2px;
}
.key-list li.right .key-mark { color: var(--green-dark); }
.key-list li.wrong .key-mark { color: var(--ink-faint); }
.key-feedback { display: block; color: var(--ink-faint); font-size: 12.5px; margin-top: 2px; }

/* The Content tab. */
.screen-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 22px 0 0; padding: 0 0 6px; border-bottom: 1px solid var(--line);
}
.screen-link { font-weight: 600; font-size: 14.5px; color: var(--green-dark); }
.screen-head .muted-inline { font-size: 12px; }
.decide-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.decide-row .search { flex: 1 1 220px; }
.decide-row .small { margin: 0; }
a.primary.as-button {
  display: inline-block; text-decoration: none; width: auto;
  padding: 11px 20px; background: var(--green); color: #fff;
  border-radius: 8px; font-weight: 600; font-size: 15px; margin: 6px 0 0;
}
a.primary.as-button:hover { background: var(--green-dark); }

@media (max-width: 620px) {
  .review-panel { width: 100%; border-left: 0; }
  .review-bar { font-size: 12px; padding: 8px 12px; gap: 8px; }
}

/* ---------- the mandatory gate ---------- */

/* Five questions that all have to be right. A question already marked
   correct stays on screen, settled, so a learner can see how much of the
   gate is behind them rather than only what is still in front. */
.gate-question { padding: 4px 0 8px; }
.gate-question + .gate-question { border-top: 1px solid var(--line-soft); padding-top: 20px; margin-top: 8px; }
.gate-question.settled { opacity: 0.62; }
.gate-question.settled .prompt { color: var(--ink-soft); }
.gate-question .feedback .link-button { margin-left: 0; padding-left: 0; }