/* ==================================================================
   Biztech AI security training

   The learner holds a training pass and works a board of items.
   Token layers: primitives -> semantic roles -> components. Theme
   changes remap the semantic layer only; components never reference
   a primitive or a raw literal.

   The safety-sign colors are signals, not surfaces: they appear only
   as small solid tags and 4px rules, never as filled panels.
   ================================================================== */

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/barlow-semi-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/barlow-semi-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/barlow-semi-condensed-700.woff2") format("woff2"); }
/* the certificate's own voices: an engraved Roman for the title, a garalde
   for the prose, a copperplate script for the name. Variable files, so one
   face each covers its weight range */
@font-face { font-family: "Cinzel"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("fonts/cinzel.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-weight: 400 600; font-style: normal; font-display: swap; src: url("fonts/eb-garamond.woff2") format("woff2"); }
@font-face { font-family: "Pinyon Script"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/pinyon-script-400.woff2") format("woff2"); }

:root {
  /* ---- primitives ------------------------------------------------ */
  --stone-100: #ededeb;
  --stone-050: #f8f8f6;
  --stone-300: #d3d3cf;
  --stone-400: #b4b4ae;
  --stone-500: #7c7c76;
  --stone-600: #686863;
  --stone-700: #54544f;
  --stone-950: #141414;

  --navy-500: #164679;   /* Biztech "biz" blue, sampled from the logo */
  --navy-700: #0f3560;
  --navy-200: #8fb8e4;

  --sign-red: #c8102e;
  --sign-yellow: #f2b705;
  --sign-green: #00843d;
  --red-700: #b0102a;
  --green-700: #0b6a33;

  /* ---- semantic roles -------------------------------------------- */
  --ground:       var(--stone-100);
  --panel:        var(--stone-050);
  --field:        #ffffff;
  --hover:        rgba(20, 20, 20, .045);

  --ink:          var(--stone-950);
  --ink-soft:     var(--stone-700);   /* 7.2:1 on panel */
  --ink-muted:    var(--stone-600);   /* dimmed rows - a color, never opacity */
  --rule:         var(--stone-300);
  --rule-strong:  var(--stone-950);
  --perforation:  var(--stone-400);
  --control-line: var(--stone-500);   /* input and control edges, 4.2:1 on white */

  /* your answer, and a flagged line: the row inverts */
  --invert-bg:    var(--stone-950);
  --invert-ink:   #ffffff;
  --invert-soft:  #c9c9c4;

  --brand:        var(--navy-500);
  --brand-hover:  var(--navy-700);
  --on-brand:     #ffffff;
  --focus:        var(--navy-500);

  --signal-red:    var(--sign-red);
  --signal-yellow: var(--sign-yellow);
  --signal-green:  var(--sign-green);
  --on-red:        #ffffff;           /* 5.9:1 */
  --on-yellow:     var(--stone-950);  /* 10:1 */
  --on-green:      #ffffff;           /* 4.8:1 */
  --red-ink:       var(--red-700);
  --green-ink:     var(--green-700);

  --shadow-panel: 0 1px 2px rgba(20, 20, 20, .06), 0 8px 22px rgba(20, 20, 20, .06);

  --radius-panel: 10px;
  --radius-control: 4px;
  --radius-tag: 2px;

  --font-read:  "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --pass-width: 360px;
}

/* ---- dark: a board at night, composed rather than inverted ------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ground:       #111315;
    --panel:        #1a1d20;
    --field:        #222529;
    --hover:        rgba(236, 235, 231, .06);

    --ink:          #ecebe7;
    --ink-soft:     #b3b2ab;
    --ink-muted:    #9a9993;
    --rule:         #33373b;
    --rule-strong:  #ecebe7;
    --perforation:  #4a4e53;
    --control-line: #7f8388;

    --invert-bg:    #ecebe7;
    --invert-ink:   #141414;
    --invert-soft:  #4c4c48;

    --brand:        #1d5594;
    --brand-hover:  #2462a8;
    --focus:        var(--navy-200);

    --red-ink:      #ff9a93;
    --green-ink:    #74d39c;

    --shadow-panel: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 22px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--perforation) transparent;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-read);
  /* 100%, not a pixel size: body copy follows the reader's browser text size */
  font-size: 100%;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  caret-color: var(--brand);
}

::selection { background: var(--brand); color: var(--on-brand); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--perforation); border: 3px solid var(--ground); border-radius: 99px; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* the hidden attribute has to beat component display rules */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* a programmatic focus target should not paint a ring where nothing is clickable */
[tabindex="-1"]:focus-visible { outline: none; }

/* ---------------- shared atoms ---------------- */

/* labels on the pass and the board: condensed caps, the pass's own voice */
.k {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.v {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 1.3125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.15;
}

.tag {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 3px 8px;
  border: 1px solid transparent;   /* painted in forced-colors mode */
  border-radius: var(--radius-tag);
  white-space: nowrap;
}
.tag-navy   { background: var(--brand); color: var(--on-brand); }
.tag-red    { background: var(--signal-red); color: var(--on-red); }
.tag-yellow { background: var(--signal-yellow); color: var(--on-yellow); }
.tag-green  { background: var(--signal-green); color: var(--on-green); }
.tag-line   { border-color: currentColor; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 22px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color .14s var(--ease-out), border-color .14s var(--ease-out);
}
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-wide { width: 100%; }
.btn-small { min-height: 44px; padding: 8px 14px; font-size: .8125rem; }
@media (hover: hover) {
  .btn-primary:hover { background: var(--brand-hover); }
  .btn-quiet:hover { background: var(--hover); }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: 24px 28px 26px;
}

/* ---------------- masthead ---------------- */
.mast { border-bottom: 1px solid var(--rule); }
.mast-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.mast-logo img { display: block; height: 30px; width: auto; }
.mast-title {
  margin: 0;
  padding-left: 20px;
  border-left: 1px solid var(--rule);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.module-field { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.module-label {
  font-family: var(--font-label); font-weight: 500; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.select-wrap { position: relative; display: inline-flex; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  width: 7px; height: 7px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.module-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 8px 40px 8px 12px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--panel);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-control);
  cursor: pointer;
}

/* ---------------- layout: the pass beside the work ---------------- */
.layout {
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 32px 56px;
  display: grid;
  grid-template-columns: var(--pass-width) minmax(0, 1fr);
  grid-template-areas: "pass main";
  gap: 24px;
  align-items: start;
}
#app { grid-area: main; min-width: 0; }
.pass { grid-area: pass; }
.screen { display: grid; gap: 16px; }

/* the pass stays in view while a long explanation scrolls */
@media (min-width: 901px) and (min-height: 700px) {
  .pass { position: sticky; top: 16px; }
}

/* ---------------- the training pass ---------------- */
.pass {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.pass-band {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pass-band img { height: 19px; width: auto; display: block; }

.pass-form, .pass-issued { padding: 4px 22px 18px; }

.field { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.field .k { display: block; }
.field input {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 8px 12px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--field);
  border: 1.5px solid var(--control-line);
  border-radius: var(--radius-control);
  transition: border-color .14s var(--ease-out);
}
.field input::placeholder { color: var(--ink-muted); }
.field input:focus-visible { outline-offset: 1px; border-color: var(--brand); }
.field input[aria-invalid="true"] { border-color: var(--red-ink); }
.field-err { margin: 6px 0 0; font-size: .9375rem; color: var(--red-ink); font-weight: 500; }

.pass-figures { display: flex; gap: 24px; margin: 14px 0 16px; }
.pass-figures div { min-width: 0; }
.pass-figures dt, .pass-figures dd { margin: 0; }

.load-error {
  margin: 0 0 16px;
  padding-top: 10px;
  border-top: 4px solid var(--signal-red);
  font-size: .9375rem;
}

.seg { padding: 12px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.seg .k { display: block; }
.pass-name {
  display: block;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: .02em;
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.pass-email { display: block; margin-top: 2px; font-size: .9375rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.seg .v { display: block; overflow-wrap: anywhere; }

/* the three figures sit in ruled cells, like the pass's gate/seat row */
.pass-issued .pass-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
}
.pass-issued .pass-figures > div { padding: 0 10px; border-left: 1px solid var(--rule); }
.pass-issued .pass-figures > div:first-child { padding-left: 0; border-left: 0; }

/* the record's result replaces the "correct so far" cell when done */
.v.is-pass { color: var(--green-ink); }
.v.is-fail { color: var(--red-ink); }

.progress-track { height: 4px; margin-top: 14px; background: var(--rule); overflow: hidden; }
/* scaleX composites; animating width would relayout every frame */
.progress-fill {
  height: 100%;
  width: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease-out);
}

.pass-code { display: block; width: 100%; height: 50px; margin: 16px 0 8px; color: var(--ink); }
.pass-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.stub {
  padding: 12px 22px 16px;
  border-top: 2px dashed var(--perforation);
}
.stub .k { display: block; }
.stub-text { margin: 4px 0 0; font-size: .9375rem; line-height: 1.45; }
.stub.is-sent .stub-text { color: var(--green-ink); font-weight: 600; }
.stub.is-failed .stub-text { color: var(--red-ink); font-weight: 600; }
/* no collection point is a setup gap, not the learner's error: said plainly, not in red */
.stub.is-unset .stub-text { font-weight: 600; }
.stub .btn { margin-top: 10px; }

/* ---------------- start: the module's reference card ---------------- */
.module-title {
  margin: 0 0 8px;
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.005em;
}
/* the module code rides in the heading line, not above it */
.module-code { margin-right: 8px; font-size: .8125rem; vertical-align: .4em; }

.lede { margin: 0 0 12px; font-size: 1.0625rem; line-height: 1.55; max-width: 66ch; }
.creed { margin: 0 0 8px; font-weight: 600; font-size: 1.0625rem; max-width: 66ch; }

.board-title {
  margin: 32px 0 8px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.board-lede { margin: 0 0 12px; font-size: 1rem; max-width: 70ch; }
.board-after { margin: 12px 0 0; font-weight: 600; }

/* a board is ruled rows, never cards: a strong rule under the heads,
   hairlines between rows */
.board { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-strong); }
.board-row {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 4px 18px;
  align-items: baseline;
  padding: 12px 10px;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
  line-height: 1.5;
}
.board .board-head {
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom-color: var(--rule-strong);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* when a head row leads, it carries the strong rule instead of the board */
.board:has(> .board-head) { border-top: 0; }
/* the reading column of a board never runs past a comfortable measure */
.board-row > :last-child { max-width: 72ch; }
.board-breakdown .board-row > :last-child, .board .board-head > :last-child { max-width: none; }
.row-label {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.board-legend .board-row { grid-template-columns: 7rem 11rem minmax(0, 1fr); }

.board-parts .board-row { grid-template-columns: 2rem 13rem minmax(0, 1fr); }
.row-num { font-family: var(--font-label); font-weight: 700; font-size: 1rem; color: var(--ink-soft); }
.row-eg { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .9375rem; }

.board-ladder .board-row { grid-template-columns: 14rem minmax(0, 1fr); }
.rung-head { display: flex; align-items: flex-start; gap: 12px; }
.rung-name { display: block; }
.rung-stage { display: block; }
.rung-line { margin: 0; }
.rung-line b { font-weight: 600; }
.rung-gate { margin: 4px 0 0; font-size: .9375rem; color: var(--ink-soft); }

/* four bars rising to the stage; decorative, the stage name carries it */
.rungs {
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 22px; height: 18px;
  margin-top: 2px;
}
.rungs span { flex: 1; background: var(--rule); }
.rungs span:nth-child(1) { height: 25%; }
.rungs span:nth-child(2) { height: 50%; }
.rungs span:nth-child(3) { height: 75%; }
.rungs span:nth-child(4) { height: 100%; }
.rungs span.is-on { background: var(--brand); }

.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.checks li {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-tag);
}

/* notes and the never-list carry their signal as a 4px rule on top */
.note {
  margin: 28px 0 0;
  padding-top: 12px;
  border-top: 4px solid var(--signal-yellow);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 70ch;
}
.never { margin-top: 28px; padding-top: 12px; border-top: 4px solid var(--signal-red); }
.never-title {
  margin: 0 0 8px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-ink);
}
.never ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 36px; }
.never li { break-inside: avoid; margin-bottom: 6px; }

.source-line { margin: 28px 0 0; font-size: .875rem; color: var(--ink-soft); max-width: 72ch; }

/* ---------------- quiz ---------------- */

.q-prompt {
  margin: 0 0 18px;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.4;
  max-width: 36em;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
/* with a scenario, the heading names it in the board's voice and the
   question after the story carries the weight */
.has-scenario .q-prompt {
  margin-bottom: 12px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sc-text { margin: 0 0 12px; font-size: 1.0625rem; line-height: 1.55; max-width: 68ch; overflow-wrap: break-word; }
.q-ask {
  margin: 20px 0 16px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  max-width: 38em;
  overflow-wrap: break-word;
}

/* what someone typed, and what the tool said back: ruled slips, told
   apart by label and rule style, not by color alone */
.exchange {
  margin: 0 0 12px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  max-width: 72ch;
}
.exchange-output { border-top-style: dashed; border-bottom-style: dashed; }
.exchange-label { margin-bottom: 6px; }
.exchange-text { margin: 0; font-size: 1rem; line-height: 1.55; overflow-wrap: break-word; }
.exchange-input .exchange-text { font-weight: 500; }

/* ---- answers: board rows ---- */
.options-head, .opt {
  display: grid;
  align-items: center;
  column-gap: 14px;
}
.options-head {
  padding: 6px 12px;
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.options-head:empty { display: none; }
.options { display: grid; }

.grid-color  { grid-template-columns: 2.5rem 7rem minmax(0, 1fr) auto; }
.grid-choice { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
.grid-ladder { grid-template-columns: 2.5rem 1.75rem minmax(0, 1fr) auto; }
.grid-spot   { grid-template-columns: 2.5rem minmax(0, 1fr) auto 1.5rem; }

.opt {
  width: 100%;
  min-height: 56px;
  padding: 11px 12px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background-color .12s var(--ease-out), color .12s var(--ease-out);
}
.opt:focus-visible { outline-offset: -3px; }
.opt[aria-disabled="true"] { cursor: default; }
@media (hover: hover) {
  .opt:not([aria-disabled="true"]):not(.is-mine):not([aria-pressed="true"]):hover { background: var(--hover); }
}

.opt-key { font-family: var(--font-label); font-weight: 700; font-size: .9375rem; }
.opt-text { min-width: 0; max-width: 68ch; font-size: 1.0625rem; line-height: 1.45; overflow-wrap: break-word; }
.opt-rule, .opt-stage {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.opt-stage { display: block; font-weight: 700; }
.opt-sub { display: block; margin-top: 1px; font-size: .9375rem; color: var(--ink-soft); }
.opt-note { display: block; margin-top: 6px; font-size: .9375rem; color: var(--ink-soft); }

.opt-mark { justify-self: end; }
.icon-check { width: .85em; height: .85em; margin-right: 6px; vertical-align: -.08em; flex-shrink: 0; }
.tag .icon-check { vertical-align: -.1em; }

.mark-answer {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-ink);
  white-space: nowrap;
}

/* spot-the-problem: each line is a toggle. The box fills and the row
   inverts, so the flagged state never rests on color alone */
.spot-box {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}
.opt[aria-pressed="true"] .spot-box::after {
  content: "";
  width: 5px; height: 10px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* state by inversion: your answer, or a flagged line, turns solid */
.opt.is-mine, .opt[aria-pressed="true"] { background: var(--invert-bg); color: var(--invert-ink); border-bottom-color: var(--invert-bg); }
.opt.is-mine .opt-sub, .opt.is-mine .opt-note,
.opt[aria-pressed="true"] .opt-sub, .opt[aria-pressed="true"] .opt-note { color: var(--invert-soft); }
.opt.is-mine .rungs span:not(.is-on) { background: var(--invert-soft); }
.opt.is-mine .rungs span.is-on { background: var(--invert-ink); }
.opt.is-muted { color: var(--ink-muted); }
.opt.is-muted .opt-sub { color: var(--ink-muted); }

/* ---- the verdict, printed under the answers ---- */
.feedback {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 4px solid var(--rule-strong);
}
.feedback.good { border-top-color: var(--signal-green); }
.feedback.bad  { border-top-color: var(--signal-red); }
.fb-head { margin: 0 0 6px; font-size: 1.1875rem; font-weight: 700; }
.feedback.good .fb-head { color: var(--green-ink); }
.feedback.bad .fb-head  { color: var(--red-ink); }
.fb-why { margin: 0; font-size: 1.0625rem; line-height: 1.55; max-width: 68ch; }
.fb-action { margin: 12px 0 0; font-size: 1rem; line-height: 1.55; max-width: 68ch; }
.fb-action strong { font-weight: 700; }
.fb-lesson { font-weight: 600; }
.feedback .exchange { margin: 14px 0 0; }
.fb-source, .rv-source {
  margin: 14px 0 0;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.q-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.support { margin: 0; font-size: .9375rem; color: var(--ink-soft); }
.support strong { color: var(--ink); }
.q-foot .btn { margin-left: auto; }

.reminder { margin-top: 10px; font-size: .9375rem; }
.reminder summary, .rv-scenario summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  width: fit-content;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
/* a drawn chevron that turns when the panel opens, so the row reads as a control */
.reminder summary::-webkit-details-marker, .rv-scenario summary::-webkit-details-marker { display: none; }
.reminder summary::before, .rv-scenario summary::before {
  content: "";
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(-45deg);
  transition: transform .15s var(--ease-out);
}
details[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
@media (hover: hover) {
  .reminder summary:hover, .rv-scenario summary:hover { text-decoration: underline; text-underline-offset: 4px; }
}
.reminder ul { margin: 0; padding-left: 18px; max-width: 70ch; }
.reminder li { margin-bottom: 4px; }
.mini-note { margin: 8px 0 0; max-width: 70ch; }
.ml-RED b    { color: var(--red-ink); }
.ml-GREEN b  { color: var(--green-ink); }

/* ---- the item board ---- */
.gate { padding-top: 16px; padding-bottom: 18px; }
.gate-title {
  margin: 0 0 6px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.gate-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 10), auto);
  border-top: 1px solid var(--rule-strong);
}
.gate-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 4px 4px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.gate-num { color: var(--ink-soft); }
.gate-topic { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-topic a { text-decoration: underline; text-underline-offset: 3px; }
.gate-wait { font-weight: 500; font-size: .75rem; letter-spacing: .1em; color: var(--ink-muted); }
.gate-row.is-now .gate-num, .gate-row.is-now .gate-topic { color: var(--ink); }

/* the signature: a status flips in place, like a split-flap board */
.flip { animation: flip .36s var(--ease-out) both; transform-origin: 50% 50%; }
@keyframes flip {
  0%   { transform: perspective(240px) rotateX(-90deg); }
  60%  { transform: perspective(240px) rotateX(12deg); }
  100% { transform: perspective(240px) rotateX(0); }
}

/* ---------------- results ---------------- */
.result-title { margin: 0 0 6px; font-size: 2.125rem; font-weight: 700; line-height: 1.15; }
.result-line { margin: 0 0 18px; font-size: 1.0625rem; line-height: 1.55; max-width: 64ch; }
.board-breakdown .board-row { grid-template-columns: minmax(0, 1fr) 6rem; align-items: center; }
.board-breakdown .bd-num { font-family: var(--font-label); font-weight: 700; font-size: 1.125rem; text-align: right; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.review-title { margin: 0 0 6px; font-size: 1.5rem; font-weight: 700; }
.review { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.review-item { padding: 20px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px; }
.review-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rv-head {
  margin: 0 0 6px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.rv-num { color: var(--ink-soft); }
.rv-q { margin: 0 0 10px; font-size: 1.0625rem; line-height: 1.5; max-width: 70ch; overflow-wrap: break-word; }
.rv-answers { margin: 0 0 8px; font-size: 1rem; line-height: 1.6; }
.rv-yours { color: var(--red-ink); font-weight: 600; }
.rv-right { font-weight: 600; }
.rv-why { margin: 0 0 6px; font-size: 1rem; line-height: 1.55; max-width: 68ch; }
.rv-action strong { font-weight: 700; }
.rv-lesson { font-weight: 600; }
.rv-scenario { margin: 0 0 10px; }
.rv-scenario .sc-text { font-size: 1rem; }
.rv-lines { margin: 0 0 10px; padding-left: 20px; font-size: .9375rem; color: var(--ink-muted); }
.rv-line { margin-bottom: 8px; padding-left: 2px; }
.rv-line.is-caught, .rv-line.is-missed, .rv-line.is-flagged { color: var(--ink); }
.rv-line .tag { margin-right: 8px; }
.rv-line-note { display: block; margin-top: 2px; color: var(--ink-soft); }

/* ---------------- noscript ---------------- */
.noscript {
  max-width: 1296px;
  margin: 24px auto 0;
  padding: 12px 0 0;
  border-top: 4px solid var(--signal-red);
  font-size: 1rem;
}

/* ---------------- certificate: print only ---------------- */
.certificate { display: none; }

/* ---------------- narrow screens ---------------- */
@media (max-width: 1080px) {
  :root { --pass-width: 320px; }
  .panel { padding: 22px 22px 24px; }
  .board-row { grid-template-columns: 10rem minmax(0, 1fr); }
  .board-legend .board-row { grid-template-columns: 6rem minmax(0, 1fr); }
  .board-legend .board-row > :nth-child(3) { grid-column: 2; }
  .board-ladder .board-row { grid-template-columns: 11rem minmax(0, 1fr); }
  .gate-board { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
}

@media (max-width: 900px) {
  .mast-inner { padding: 10px 16px; }
  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "pass" "main";
    padding: 16px 16px 40px;
    gap: 16px;
  }
  /* the pass comes first on every screen: issuing it is the first step */
  /* during the quiz and on results the pass is a slim strip: who, which
     item or score, and how it is going. On results the stub stays, because
     it says whether Biztech has the record */
  .layout:not([data-screen="start"]) .seg-company,
  .layout:not([data-screen="start"]) .seg-module,
  .layout:not([data-screen="start"]) .pass-code,
  .layout:not([data-screen="start"]) .pass-meta,
  .layout:not([data-screen="start"]) .pass-email,
  .layout:not([data-screen="start"]) .seg-learner .k,
  .layout[data-screen="quiz"] .stub { display: none; }
  .layout:not([data-screen="start"]) .pass-issued { padding: 0 16px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px; }
  .layout:not([data-screen="start"]) .seg-learner { border-bottom: 0; padding: 10px 0 0; }
  .layout:not([data-screen="start"]) .pass-name { font-size: 1.25rem; }
  .layout:not([data-screen="start"]) .pass-figures { border-bottom: 0; padding: 10px 0 0; grid-template-columns: repeat(3, auto); }
  .layout:not([data-screen="start"]) .progress-track { grid-column: 1 / -1; margin-top: 10px; }
  .layout:not([data-screen="start"]) .pass-band { padding: 9px 16px; }
  .layout:not([data-screen="start"]) .v { font-size: 1.0625rem; }
  .layout[data-screen="results"] .stub { padding: 10px 16px 12px; }
}

@media (max-width: 640px) {
  /* the page heading stays for screen readers; it just leaves the bar */
  .mast-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; }
  .module-field { margin-left: 0; width: 100%; }
  /* the select's own text needs the width; the label stays for screen readers */
  .module-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .select-wrap, .module-select { width: 100%; }
  .mast-logo img { height: 26px; }
  .panel { padding: 18px 16px 20px; border-radius: 8px; }
  .module-title, .result-title { font-size: 1.75rem; }
  .q-prompt { font-size: 1.1875rem; }
  .has-scenario .q-prompt { font-size: 1.0625rem; }
  .q-ask { font-size: 1.125rem; }

  .board-row, .board-legend .board-row, .board-parts .board-row, .board-ladder .board-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .board-legend .board-row > :nth-child(3) { grid-column: auto; }
  .board-parts .row-num { display: none; }
  .board .board-head { display: none; }
  .board:has(> .board-head) { border-top: 1px solid var(--rule-strong); }
  .never ul { columns: 1; }

  .grid-color  { grid-template-columns: 2rem 5.5rem minmax(0, 1fr); }
  .grid-choice { grid-template-columns: 2rem minmax(0, 1fr); }
  .grid-ladder { grid-template-columns: 2rem 1.75rem minmax(0, 1fr); }
  .grid-spot   { grid-template-columns: 2rem minmax(0, 1fr) 1.5rem; }
  .opt { column-gap: 10px; }
  /* the answer's status drops under its text instead of squeezing it */
  .opt-mark { grid-column: 2 / -1; justify-self: start; margin-top: 8px; }
  .opt-mark:empty { display: none; }
  .grid-spot .spot-box { grid-column: 3; grid-row: 1; }
  .options-head { display: none; }

  .q-foot { flex-direction: column-reverse; align-items: stretch; }
  .q-foot .btn { margin-left: 0; width: 100%; }

  /* one column, titles kept and allowed to wrap: a missed row has to say
     which item it was, in full */
  .gate-board { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
  .gate-row { align-items: start; padding: 8px 4px; }
  .gate-topic { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }

  .result-actions .btn { flex: 1 1 100%; }
}

/* ---------------- Windows high contrast ---------------- */
/* backgrounds are stripped, so state has to survive on borders and words */
@media (forced-colors: active) {
  .tag { border-color: CanvasText; }
  .opt.is-mine, .opt[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
  .rungs, .pass-code { forced-color-adjust: none; }
  .feedback, .note, .never, .load-error { border-top-color: CanvasText; }
  .progress-fill { background: Highlight; forced-color-adjust: none; }
  :focus-visible { outline: 3px solid Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  /* states still change; they arrive instead of travelling */
  .flip { animation: none; }
  .progress-fill, .btn, .opt, .field input { transition: none; }
  .reminder summary::before, .rv-scenario summary::before { transition: none; }
}

/* ---------------- print ---------------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #141414; }
  .mast .module-field, .btn, .reminder, .q-foot, .gate, .noscript { display: none !important; }
  .layout { display: block; padding: 0; }
  .pass { position: static; box-shadow: none; margin-bottom: 16px; }
  .panel { box-shadow: none; }

  /* a pass prints its certificate and nothing else */
  body.has-certificate > *:not(.certificate) { display: none !important; }
  body.has-certificate .certificate { display: flex !important; }
}


/* ==================================================================
   The certificate

   Printed evidence, not a screen surface: a formal award document in
   the Biztech colours. It keeps its own voices and literal inks,
   because a printed record must not follow the screen theme.
   ================================================================== */
.certificate {
  flex-direction: column;
  height: 186mm;
  padding: 4mm;
  background: #ffffff;
  color: #141414;
  border: 3px solid #164679;
  font-family: "EB Garamond", Georgia, serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cert-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6mm 14mm 5mm;
  border: 1px solid #1a4321;
}

.cert-logo { height: 12mm; width: auto; margin-bottom: 5mm; }

.cert-title {
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: 40pt;
  line-height: 1;
  letter-spacing: .14em;
  text-indent: .14em;      /* the tracking would otherwise push it off-centre */
  text-transform: uppercase;
  color: #164679;
}
.cert-sub {
  margin: 3mm 0 0;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 400;
  font-size: 13pt;
  letter-spacing: .38em;
  text-indent: .38em;
  text-transform: uppercase;
  color: #1a4321;
}

/* a ruled line with a diamond at its centre, drawn, not a glyph */
.cert-divider { display: flex; align-items: center; gap: 4mm; width: 78mm; margin: 5mm 0 7mm; }
.cert-divider span { flex: 1; height: 1px; background: #164679; }
.cert-divider i { width: 5px; height: 5px; background: #1a4321; transform: rotate(45deg); }

.cert-presented {
  margin: 0;
  font-size: 11pt;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  color: #54544f;
}
.cert-name {
  margin: 2mm 0 0;
  font-family: "Pinyon Script", "EB Garamond", cursive;
  font-size: 46pt;
  line-height: 1.15;
  color: #164679;
  /* the script needs room for its descenders before the rule */
  padding: 0 6mm 4mm;
  border-bottom: 1px solid #b4b4ae;
  min-width: 120mm;
  max-width: 100%;
  overflow-wrap: break-word;
}
.cert-company { margin: 3mm 0 0; font-size: 13pt; color: #141414; }
.cert-company span { font-weight: 600; }

.cert-prose {
  margin: 5mm 0 auto;
  max-width: 150mm;
  font-size: 13.5pt;
  line-height: 1.55;
}
.cert-prose strong { font-weight: 600; color: #164679; }

.cert-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 10mm;
  width: 100%;
  margin-top: auto;
  padding-top: 6mm;
}
.cert-block { display: flex; flex-direction: column; align-items: center; }
.cert-block-value {
  padding: 0 4mm 1.5mm;
  min-width: 52mm;
  border-bottom: 1px solid #141414;
  font-size: 13pt;
  font-weight: 600;
}
.cert-block-label {
  margin-top: 1.5mm;
  font-size: 9.5pt;
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: uppercase;
  color: #54544f;
}

.cert-seal { width: 24mm; height: 30mm; }
.cert-seal-code {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .06em;
  fill: #ffffff;
}
.cert-seal-word {
  font-family: "Cinzel", Georgia, serif;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  fill: #ffffff;
  opacity: .9;
}

.cert-note {
  margin: 4mm 0 0;
  font-family: var(--font-label);
  font-size: 9.5pt;
  letter-spacing: .04em;
  color: #54544f;
}