/* Spot it before it hurts someone.
   High visibility industrial identity for a self-contained safety module.
   Everything is local and relative: no CDN, no build step, no network call.

   The module is a fixed stage, not a page: the masthead is pinned at the top,
   the pager is pinned at the bottom, and the screen body takes what is left.
   At 900px wide by 640px tall and up, nothing scrolls. Content that will not
   fit a screen is restructured inside it, as a tab set, an accordion, or a run
   of sub-steps, never shrunk below the reading size.

   Faces: Realistico (display, a single weight, assets/fonts/display.ttf) and
   Parson (body), both licensed from Envato Elements and sitting in the folder.
   The fallback stack (Arial Narrow, then Helvetica Neue, then Impact) is sized
   and tracked so a missing display file still reads as a deliberate stencil. */

/* Realistico, licensed from Envato Elements: a single-weight condensed
   industrial face shipped as TTF only, so it is declared once across the
   whole weight range and no bold is synthesized. */
@font-face {
  font-family: 'Site Display';
  src: url('assets/fonts/display.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Parson';
  src: url('assets/fonts/Parson-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Parson';
  src: url('assets/fonts/Parson-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Parson';
  src: url('assets/fonts/Parson-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --orange: #FF6A13;
  --yellow: #FFD100;
  --charcoal: #1B1D1F;
  --deep: #111214;
  --concrete: #C9C9C4;
  --chalk: #F2F0EA;
  --red: #D7263D;

  --panel: #212427;
  --raise: #2A2D30;
  --line: rgb(242 240 234 / 0.16);
  --line-hard: rgb(242 240 234 / 0.3);

  --font-display: 'Site Display', 'Arial Narrow', 'Helvetica Neue', Impact, sans-serif;
  --font-body: 'Parson', system-ui, sans-serif;

  /* One vertical rhythm knob. Short stages tighten the gaps, never the type. */
  --v: 1rem;
  --gutter: 1.5rem;

  --stripe: repeating-linear-gradient(
    45deg,
    var(--yellow) 0 14px,
    var(--charcoal) 14px 28px
  );
  --stripe-faint: repeating-linear-gradient(
    45deg,
    rgb(255 209 0 / 0.07) 0 16px,
    rgb(0 0 0 / 0) 16px 32px
  );
}

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

html {
  background: var(--deep);
}

body {
  margin: 0;
  background: var(--deep);
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* One focus treatment everywhere: 3px hi-vis yellow, 3px offset, square. */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.visually-hidden {
  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;
}

/* ---------- the stage ---------- */

.rig {
  max-width: 68rem;
  margin: 0 auto;
  background: var(--charcoal);
  min-height: 100vh;
  /* The stamp scales down onto the corner and the verdicts slam in, and both
     briefly reach past the panel edge. Clip rather than hidden: no scroll
     container is created and the gutter inside keeps every focus ring well
     clear of the clip line. */
  overflow-x: clip;
}

/* Everything from here to the next banner applies only when the script is
   running. With scripting off the whole module renders as one long document
   with every screen, tab panel, accordion panel and sub-step open in order,
   and the browser scrolls it the ordinary way. */

html.js,
html.js body {
  height: 100%;
  overflow: hidden;
}

html.js .rig {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

html.js .rig-head,
html.js .rig-foot {
  flex: 0 0 auto;
}

html.js #module {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: clip;
  overflow-clip-margin: 10px;
}

html.js .screen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

html.js .screen[hidden] {
  display: none;
}

html.js .screen-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- header ---------- */

.rig-head {
  background: var(--deep);
}

.rig-head-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem var(--gutter) 0.8rem;
}

.head-id {
  min-width: 0;
}

.kicker {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--yellow);
}

h1 {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--chalk);
}

.stripe {
  height: 12px;
  background-image: var(--stripe);
  background-size: 39.6px 39.6px;
}

.stripe-foot {
  height: 8px;
}

/* ---------- progress ---------- */

.meter {
  flex: 0 0 auto;
  width: min(18rem, 32%);
}

.meter-track {
  height: 14px;
  background: #000;
  border: 2px solid var(--line-hard);
  overflow: hidden;
}

.meter-fill {
  display: block;
  height: 100%;
  width: 10%;
  background-image: var(--stripe);
  background-size: 39.6px 39.6px;
  transition: width 0.4s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.meter-text {
  margin: 0.4rem 0 0;
  text-align: right;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--concrete);
}

/* ---------- screens ---------- */

#module {
  padding: 0 var(--gutter) 0.4rem;
}

.screen {
  position: relative;
  padding-top: 1rem;
}

.screen[hidden] {
  display: none;
}

.stamp {
  position: absolute;
  right: 0;
  top: 0.5rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.9rem, 5.4vw, 4.4rem);
  line-height: 0.72;
  letter-spacing: -0.06em;
  color: #757674;
  pointer-events: none;
  user-select: none;
  transform-origin: 100% 0;
}

h2 {
  flex: 0 0 auto;
  margin: 0 0 0.7rem;
  padding-right: 4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--yellow);
}

h3 {
  margin: var(--v) 0 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--chalk);
}

.screen-body > *:first-child,
.col > *:first-child,
.tabpanel > *:first-child {
  margin-top: 0;
}

p {
  margin: 0 0 var(--v);
}

.lead {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--chalk);
}

.quiet {
  color: var(--concrete);
  font-size: 0.95rem;
}

.note {
  border-left: 5px solid var(--orange);
  background: var(--panel);
  padding: 0.7rem 0.9rem;
  color: var(--chalk);
  font-size: 0.96rem;
}

.disclaimer {
  border-top: 2px solid var(--line);
  padding-top: 0.7rem;
  color: var(--concrete);
  font-size: 0.86rem;
  line-height: 1.5;
}

ul,
ol {
  margin: 0 0 var(--v);
  padding-left: 1.3rem;
}

li {
  margin-bottom: 0.4rem;
}

li::marker {
  color: var(--orange);
  font-weight: 700;
}

b {
  font-weight: 700;
  color: var(--chalk);
}

/* The objectives, one to a stamped plate. Same furniture as the zone list on
   screen 3, so the promise and the method read as the same object. */
.ticklist {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--v);
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.ticklist > li {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.45rem 0.9rem 0.45rem 2.6rem;
  background: var(--panel);
  border-left: 5px solid var(--yellow);
  color: var(--chalk);
  line-height: 1.45;
}

.ticklist > li::before {
  content: '';
  position: absolute;
  left: 0.95rem;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  background: var(--orange);
  clip-path: polygon(18% 48%, 8% 60%, 40% 90%, 92% 22%, 80% 12%, 38% 66%);
}

/* ---------- two column screen bodies ---------- */

.cols2 {
  display: grid;
  gap: 1.4rem;
  align-content: start;
}

.col {
  min-width: 0;
}

.col > *:last-child,
.tabpanel > *:last-child {
  margin-bottom: 0;
}

/* ---------- screen 1: the cover ---------- */

/* The site plate. It was the backdrop of the old dense opener; a cover is
   where a photograph of the work earns its keep, so it lives here now and
   carries one line of type instead of six paragraphs. */
.screen-cover {
  background-color: var(--panel);
  background-image:
    /* Overlay measured against a pure white photo pixel as the worst case:
       at 0.78 the ground resolves to about #454547, and chalk, yellow, and
       concrete all clear 4.5:1 on it. Heavier at the bottom where the
       meta line sits. */
    linear-gradient(180deg, rgb(17 18 20 / 0.78) 0%, rgb(17 18 20 / 0.92) 100%),
    url('assets/img/hero.jpg'),
    var(--stripe-faint);
  background-size: cover, cover, 45.3px 45.3px;
  background-position: center, center, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  padding: 1.2rem 1.4rem;
  border: 2px solid var(--line);
  margin: 0.6rem 0 0.4rem;
}

/* The cover numeral sits over a photograph, so it is lightened to clear 3:1
   against the brightest pixel the overlay can let through (a pure white photo
   under the 86 percent wash reads as #323335). */
.screen-cover .stamp {
  right: 0.8rem;
  top: 0.5rem;
  color: #8A8A86;
}

.cover {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.cover-lede {
  align-self: center;
  min-width: 0;
  max-width: 44rem;
  padding-right: 3.5rem;
}

.cover-kicker {
  margin: 0 0 0.5rem;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--yellow);
}

.cover-title {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.4vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--yellow);
}

.cover-rule {
  height: 12px;
  margin: 0.85rem 0 0.9rem;
  background-image: var(--stripe);
  background-size: 39.6px 39.6px;
}

.cover-promise {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.45;
  color: var(--chalk);
}

.cover-meta {
  align-self: end;
  margin: 1rem 0 0;
  padding-top: 0.7rem;
  border-top: 2px solid var(--line-hard);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--concrete);
}

/* ---------- screen 2: the brief ---------- */

/* Both columns take the whole stage: the objective plates share the slack
   between them, and the disclaimer sits on the floor of its column rather
   than trailing off halfway down an empty screen. */
.brief {
  align-content: stretch;
}

.brief > .col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The plates take some of a tall stage's slack, capped so a single line of
   type never floats in the middle of an empty box. */
.brief .ticklist {
  flex: 1 1 auto;
  max-height: 20rem;
  align-content: stretch;
  grid-auto-rows: minmax(min-content, 1fr);
}

/* The floor of each column: the hook under the objectives, the disclaimer
   under the practicalities. Both sit on the bottom rule of the stage, so a
   tall window opens one clean gap rather than trailing off. */
.brief-floor {
  margin-top: auto;
}

.brief .disclaimer {
  margin-top: auto;
  margin-bottom: 0;
}

.brief .col > *:last-child {
  margin-bottom: 0;
}

.brief .note {
  margin-bottom: 0;
}

/* ---------- zones list ---------- */

.zones {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.7rem;
}

.zones > li {
  position: relative;
  margin: 0;
  padding: 0.6rem 0.9rem 0.6rem 3.3rem;
  background: var(--panel);
  border-left: 5px solid var(--yellow);
}

.zones > li > p {
  margin: 0.1rem 0 0;
  color: var(--concrete);
}

.zone-num {
  position: absolute;
  left: 0.9rem;
  top: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--orange);
}

.why > li {
  break-inside: avoid;
}

.why + .note {
  margin-bottom: 0;
}

/* ---------- teaching screens ---------- */

.split {
  display: grid;
  gap: 1.2rem;
}

.split-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.split-text > .lead {
  flex: 0 0 auto;
}

.split-media,
.media-stack > span {
  min-height: 180px;
  background-color: var(--panel);
  border: 2px solid var(--line);
  background-repeat: no-repeat, repeat;
  background-size: cover, 45.3px 45.3px;
  background-position: center, 0 0;
}

.media-stack {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1.2rem;
  min-height: 0;
  background: none;
  border: 0;
}

.media-stack > span {
  display: block;
  min-height: 0;
}

.media-scaffold {
  background-image: url('assets/img/scaffold.jpg'), var(--stripe-faint);
}

.media-electrical {
  background-image: url('assets/img/electrical.jpg'), var(--stripe-faint);
}

.media-ppe {
  background-image: url('assets/img/ppe.jpg'), var(--stripe-faint);
}

.media-housekeeping {
  background-image: url('assets/img/housekeeping.jpg'), var(--stripe-faint);
}

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

html.js .split-text > .tabs,
html.js .screen-body > .tabs {
  flex: 1 1 auto;
}

.tab-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.tab-row .counter {
  margin-bottom: 0.55rem;
}

.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 0 1 auto;
  border-bottom: 3px solid var(--line-hard);
  margin-bottom: 0.9rem;
}

.tablist [role='tab'] {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk);
  background: var(--raise);
  border: 2px solid var(--line);
  border-bottom: 0;
  margin-bottom: -3px;
  padding: 0.45rem 1rem 0.5rem;
  cursor: pointer;
}

.tablist [role='tab']:hover {
  color: var(--yellow);
  border-color: var(--yellow);
}

.tablist [role='tab'][aria-selected='true'] {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--deep);
}

.tabpanel {
  min-height: 0;
}

.tabpanel[hidden] {
  display: none;
}

html.js .tabs > .tabpanel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

html.js .tabs > .tabpanel[hidden] {
  display: none;
}

.tabpanel:focus-visible {
  outline-offset: -3px;
}

/* A counter is a stamped chip, never a full width bar, so it keeps its own
   width inside a stretching flex column. */
html.js .tabpanel > .counter {
  align-self: flex-start;
}

.sub-intro {
  margin-bottom: 0.8rem;
  color: var(--concrete);
}

/* ---------- accordion ---------- */

.accordion {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.acc-h {
  margin: 0;
}

.acc-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--yellow);
  background: var(--raise);
  border: 2px solid var(--line);
  border-left: 5px solid var(--yellow);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.acc-btn:hover {
  border-color: var(--yellow);
}

.acc-mark {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: var(--orange);
  clip-path: polygon(0 12%, 100% 50%, 0 88%);
  transition: transform 0.2s ease;
}

.acc-btn[aria-expanded='true'] .acc-mark {
  transform: rotate(90deg);
}

.acc-panel {
  padding: 0.5rem 0.9rem 0.6rem 1.4rem;
  background: var(--panel);
  border: 2px solid var(--line);
  border-top: 0;
}

.acc-panel[hidden] {
  display: none;
}

/* ---------- hazard hunt ---------- */

.counter {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.35rem 0.8rem;
  background: var(--deep);
  border: 2px solid var(--yellow);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}

.hunt {
  display: flex;
  flex-direction: column;
}

.hunt > .lead {
  flex: 0 0 auto;
}

.hunt-row {
  display: grid;
  gap: 1.2rem;
  min-height: 0;
}

.hunt-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.hunt-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
  margin-bottom: 0.6rem;
}

.hunt-head .counter {
  margin: 0;
}

.hunt-head .quiet {
  margin: 0;
  flex: 1 1 14rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

.scene-fit {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  container-type: size;
}

.scene {
  position: absolute;
  inset: 0;
  margin: auto;
  /* The drawing keeps its 1000 by 560 ratio and takes the largest box the
     stage will give it, so the hotspot rings stay on the drawing at every
     size. Both dimensions come from the same box, never from the content. */
  width: min(100cqw, calc(100cqh * 1.7857));
  height: min(100cqh, calc(100cqw / 1.7857));
  border: 3px solid var(--line-hard);
  background: var(--deep);
}

.scene-art {
  display: block;
  width: 100%;
  height: 100%;
}

.hot {
  position: absolute;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.hot-ring {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid var(--yellow);
  box-shadow: 0 0 0 2px rgb(0 0 0 / 0.6);
}

.hot:hover .hot-ring {
  background: rgb(255 209 0 / 0.18);
}

.hot[aria-pressed='true'] .hot-ring {
  border-color: var(--orange);
  background: rgb(255 106 19 / 0.16);
  animation: none;
}

.hot[aria-pressed='true'] .hot-ring::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -2px;
  width: 18px;
  height: 18px;
  background: var(--orange);
  clip-path: polygon(18% 48%, 8% 60%, 40% 90%, 92% 22%, 80% 12%, 38% 66%);
}

/* Positioned as percentages of the 1000 by 560 viewBox, so the rings track
   the drawing at every width. */
.hot-ladder { left: 78.5%; top: 51%;   width: 11%;   height: 34%; }
.hot-edge   { left: 56%;   top: 42.5%; width: 23.5%; height: 11%; }
.hot-cord   { left: 8%;    top: 83%;   width: 26%;   height: 13%; }
.hot-door   { left: 35.5%; top: 60%;   width: 11%;   height: 25%; }
.hot-worker { left: 47.5%; top: 62%;   width: 7%;    height: 23%; }
.hot-exit   { left: 65.5%; top: 54%;   width: 11%;   height: 31%; }

/* the same six spots, as a list */

.hunt-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.hunt-right > h3 {
  margin: 0 0 0.5rem;
  flex: 0 0 auto;
}

.spotlist {
  list-style: none;
  padding-left: 0;
  margin: 0 0 0.7rem;
  display: grid;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.spotlist > li {
  margin: 0;
}

.spot {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--chalk);
  background: var(--raise);
  border: 2px solid var(--line);
  padding: 0.42rem 0.7rem;
  cursor: pointer;
}

.spot:hover {
  border-color: var(--yellow);
}

.spot-mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--concrete);
  background: transparent;
}

.spot-name {
  flex: 1 1 auto;
}

.spot-state {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}

.spot[aria-pressed='true'] {
  border-color: var(--orange);
  background: var(--panel);
}

.spot[aria-pressed='true'] .spot-mark {
  border-color: var(--orange);
  background: var(--orange);
  clip-path: polygon(18% 48%, 8% 60%, 40% 90%, 92% 22%, 80% 12%, 38% 66%);
}

.verdict {
  margin: 0.8rem 0 0;
  border-left: 6px solid var(--orange);
  background: var(--panel);
  padding: 0.7rem 0.9rem;
  flex: 0 0 auto;
}

.verdict:empty {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.verdict-head {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--orange);
}

.verdict-why {
  margin: 0;
  color: var(--chalk);
  font-size: 0.96rem;
  line-height: 1.5;
}

/* ---------- hierarchy of controls ---------- */

.hoc {
  counter-reset: hoc;
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem;
}

.hoc > li {
  counter-increment: hoc;
  position: relative;
  margin: 0 0 0.4rem;
  padding: 0.4rem 1rem 0.4rem 3.2rem;
  background: var(--panel);
  border-left: 5px solid var(--orange);
  color: var(--concrete);
}

.hoc > li::before {
  content: counter(hoc);
  position: absolute;
  left: 1rem;
  top: 0.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--yellow);
}

/* ---------- sub-steps ---------- */

.substeps {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

html.js .tabpanel > .substeps,
html.js .screen-body > .substeps {
  flex: 1 1 auto;
}

.sub-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--line);
  padding-bottom: 0.5rem;
  margin-bottom: 0.9rem;
  flex: 0 0 auto;
}

.sub-head {
  margin: 0;
  font-size: 1.2rem;
  color: var(--yellow);
}

.sub-bar .counter {
  margin: 0;
}

.sub-nav {
  display: flex;
  gap: 0.5rem;
}

.btn-mini {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk);
  background: transparent;
  border: 2px solid var(--line-hard);
  padding: 0.32rem 0.9rem;
  cursor: pointer;
  border-radius: 0;
}

.btn-mini:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.substep[hidden] {
  display: none;
}

.qcard {
  margin: 0;
}

.qtext {
  margin: 0 0 0.8rem;
  font-size: 1.05rem;
  color: var(--chalk);
}

.hoc-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lvl {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--chalk);
  background: var(--raise);
  border: 2px solid var(--line-hard);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

.lvl:hover {
  border-color: var(--yellow);
}

.lvl[aria-pressed='true'] {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--deep);
}

/* ---------- stop or go ---------- */

.sg-item {
  margin: 0;
}

.sg-text {
  margin: 0 0 0.85rem;
  font-size: 1.1rem;
  color: var(--chalk);
}

.sg-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.call {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 8.5rem;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk);
  background: var(--raise);
  padding: 0.6rem 1.35rem;
  cursor: pointer;
  box-shadow: 3px 3px 0 0 rgb(242 240 234 / 0.24);
}

.call-glyph {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
}

.call-stop {
  border: 3px solid var(--red);
}

.call-stop .call-glyph {
  fill: var(--red);
  stroke: none;
}

.call-go {
  border: 3px solid var(--orange);
}

.call-go .call-glyph {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: square;
}

.call:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

.call-stop[aria-pressed='true'] {
  background: var(--red);
  color: var(--chalk);
}

.call-stop[aria-pressed='true'] .call-glyph {
  fill: var(--chalk);
}

.call-go[aria-pressed='true'] {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--deep);
}

.call-go[aria-pressed='true'] .call-glyph {
  stroke: var(--deep);
}

/* ---------- feedback ---------- */

.feedback {
  margin: 0.8rem 0 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--chalk);
}

.feedback:empty {
  margin: 0;
}

.feedback .glyph {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.16em;
  margin-right: 0.4em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.feedback .verdict-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yellow);
}

/* ---------- checklist and card ---------- */

.picker label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.22rem 0;
  font-size: 0.98rem;
  line-height: 1.5;
  cursor: pointer;
}

.picker input[type='checkbox'] {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.18rem 0 0;
  accent-color: var(--yellow);
  cursor: pointer;
}

.card,
.results {
  position: relative;
  margin: 0 0 1rem;
  background: var(--panel);
  border: 2px solid var(--line);
  padding: 1.2rem 1.1rem 0.9rem;
}

.card::before,
.results::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background-image: var(--stripe);
  background-size: 39.6px 39.6px;
}

.card-title,
.results .card-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--yellow);
}

#card-body {
  columns: 19rem auto;
  column-gap: 1.6rem;
}

.card-zone {
  margin: 0.8rem 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  break-after: avoid;
}

#card-body > .card-zone:first-child {
  margin-top: 0;
}

.card-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.card-list > li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.2rem;
  /* A carry card is a list of short lines, not prose: it sets tighter than
     the body copy without going below the reading size. */
  line-height: 1.45;
  color: var(--chalk);
  break-inside: avoid;
}

.card-list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 14px;
  height: 14px;
  background: var(--yellow);
  clip-path: polygon(18% 48%, 8% 60%, 40% 90%, 92% 22%, 80% 12%, 38% 66%);
}

.card-foot {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 2px solid var(--line);
  color: var(--concrete);
  font-size: 0.9rem;
}

.results ul {
  padding-left: 1.3rem;
  margin: 0;
}

/* ---------- the ending ---------- */

/* A native dialog: closed it is display:none from the user agent sheet, so a
   visitor with scripting off never meets it, and open it sits in the top layer
   where the stage behind it is inert to pointer and keyboard. */
.done {
  width: min(44rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 3px solid var(--yellow);
  background: var(--panel);
  color: var(--chalk);
  box-shadow: 8px 8px 0 0 rgb(255 106 19 / 0.75);
}

.done::backdrop {
  background: rgb(9 10 11 / 0.84);
}

.done-body {
  padding: 1rem 1.3rem 1.2rem;
}

.done-h {
  margin: 0 0 0.2rem;
  padding-right: 0;
  font-size: clamp(2rem, 4.6vw, 2.7rem);
  line-height: 0.98;
}

.done-sub {
  margin: 0 0 0.9rem;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--concrete);
}

/* The recap comes before the numbers on purpose: what you can now do is the
   point of the module, and the scores are how it went. Same five verbs as
   screen 2, in the same order. */
.done-recap-head {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

.done-recap {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  columns: 15rem auto;
  column-gap: 1.6rem;
}

.done-recap > li {
  position: relative;
  margin: 0 0 0.18rem;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--chalk);
  break-inside: avoid;
}

.done-recap > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 13px;
  height: 13px;
  background: var(--yellow);
  clip-path: polygon(18% 48%, 8% 60%, 40% 90%, 92% 22%, 80% 12%, 38% 66%);
}

.done-scores {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.done-scores > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0;
  padding: 0.35rem 0.75rem;
  background: var(--raise);
  border-left: 5px solid var(--orange);
}

.done-label {
  color: var(--concrete);
  font-size: 0.92rem;
  line-height: 1.35;
}

.done-val {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  color: var(--yellow);
  white-space: nowrap;
}

.done-line {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

.done-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

/* ---------- pager ---------- */

.rig-foot {
  background: var(--deep);
}

.pager {
  display: flex;
  gap: 0.85rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem var(--gutter) 0.75rem;
}

.foot-note {
  margin: 0;
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--concrete);
}

.btn-ghost,
.btn-hi {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.55rem 1.5rem;
  cursor: pointer;
  border-radius: 0;
  flex: 0 0 auto;
}

.btn-ghost.btn-mini {
  padding: 0.32rem 0.9rem;
  font-size: 0.92rem;
  box-shadow: none;
}

.btn-ghost {
  color: var(--chalk);
  background: transparent;
  border: 3px solid var(--line-hard);
  box-shadow: 3px 3px 0 0 rgb(242 240 234 / 0.24);
}

.btn-ghost:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.btn-hi {
  color: var(--deep);
  background: var(--yellow);
  border: 3px solid var(--yellow);
  box-shadow: 3px 3px 0 0 var(--orange);
}

.btn-hi:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--deep);
  box-shadow: 3px 3px 0 0 var(--yellow);
}

.btn-ghost:active,
.btn-hi:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

button[disabled] {
  opacity: 0.42;
  cursor: default;
  box-shadow: none;
  transform: none;
}

button[disabled]:hover {
  border-color: var(--line-hard);
  color: var(--chalk);
  background: transparent;
}

.btn-hi[disabled]:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--deep);
}

/* ---------- the wide stage ---------- */

@media (min-width: 56rem) {
  .cols2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem 2.2rem;
  }

  .zones {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .why {
    columns: 2;
    column-gap: 2.2rem;
  }

  .split {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 1.5rem;
  }

  .hunt-row {
    grid-template-columns: minmax(0, 1fr) 29rem;
  }

  .spotlist {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 68rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) 17rem;
  }
}

/* ---------- short stages tighten the rhythm ---------- */

@media (max-height: 46rem) {
  :root {
    --v: 0.75rem;
  }

  .lead {
    margin-bottom: 0.7rem;
  }

  .zones {
    gap: 0.5rem;
  }

  .ticklist {
    gap: 0.35rem;
  }

  .ticklist > li {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }

  .screen-cover {
    padding: 0.9rem 1rem;
  }

  .cover-rule {
    margin: 0.6rem 0 0.65rem;
  }

  .note {
    padding: 0.55rem 0.8rem;
  }

  .hoc {
    margin-bottom: 0.6rem;
  }

  .hoc > li {
    padding: 0.2rem 0.8rem 0.2rem 3rem;
    margin-bottom: 0.25rem;
    line-height: 1.5;
  }

  .hoc > li::before {
    top: 0.2rem;
    font-size: 1.35rem;
  }

  .tablist {
    margin-bottom: 0.65rem;
  }

  .card-zone {
    margin: 0.5rem 0 0.2rem;
  }

  .spot {
    padding: 0.3rem 0.6rem;
  }

  .verdict {
    margin-top: 0.6rem;
    padding: 0.55rem 0.8rem;
  }

  .card,
  .results {
    padding: 0.95rem 0.9rem 0.75rem;
  }

  .card-foot {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
  }
}

@media (max-height: 42rem) {
  :root {
    --v: 0.6rem;
  }

  .lead {
    margin-bottom: 0.5rem;
  }

  .note {
    padding: 0.45rem 0.75rem;
  }

  .ticklist {
    gap: 0.28rem;
  }

  .ticklist > li {
    padding-top: 0.22rem;
    padding-bottom: 0.22rem;
  }

  .hoc > li {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    margin-bottom: 0.2rem;
  }

  .card,
  .results {
    padding: 0.8rem 0.8rem 0.65rem;
  }

  .card-title {
    margin-bottom: 0.4rem;
  }

  .card-list > li {
    margin-bottom: 0.12rem;
  }

  .card-foot {
    margin-top: 0.45rem;
    padding-top: 0.45rem;
  }

  .done-body {
    padding: 0.8rem 1rem 0.9rem;
  }

  .done-sub,
  .done-recap,
  .done-scores,
  .done-line {
    margin-bottom: 0.65rem;
  }

  .spotlist {
    margin-bottom: 0.4rem;
  }

  .sub-intro {
    margin-bottom: 0.55rem;
  }
}

/* ---------- narrow or short: the screen body is the only thing that moves --- */

@media (max-width: 56.24rem), (max-height: 39.99rem) {
  html.js .screen-body {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html.js .screen {
    padding-bottom: 0.5rem;
  }

  .scene-fit {
    container-type: normal;
    min-height: 0;
  }

  .scene {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 560;
  }

  .hunt-row,
  .split,
  .cols2 {
    align-content: start;
  }
}

/* ---------- reflow ---------- */

@media (max-width: 34rem) {
  :root {
    --gutter: 1rem;
  }

  .rig-head-inner {
    display: block;
  }

  .meter {
    width: 100%;
    margin-top: 0.6rem;
  }

  .meter-text {
    text-align: left;
  }

  .foot-note {
    display: none;
  }

  .call {
    flex: 1 1 auto;
    min-width: 0;
  }

  .lvl {
    flex: 1 1 100%;
  }

  h2 {
    padding-right: 3.4rem;
  }

  .sub-bar {
    gap: 0.5rem;
  }

  .done-scores {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- motion, only when the visitor has not asked for less ---------- */

@media (prefers-reduced-motion: no-preference) {
  .stripe {
    animation: stripe-sweep 0.55s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  }

  .screen {
    animation: screen-in 0.3s ease both;
  }

  .stamp {
    animation: stamp-in 0.42s cubic-bezier(0.2, 1.2, 0.3, 1) both;
  }

  .hot-ring {
    animation: ring-pulse 2s ease-in-out infinite;
  }

  .feedback.slam.is-in {
    transform-origin: 0 50%;
    animation: slam 0.28s cubic-bezier(0.2, 1.4, 0.35, 1) both;
  }

  .card-list > li {
    animation: tick-in 0.3s ease both;
  }

  /* The ending stamps itself down. The stripe band inside it sweeps on its own,
     because opening the dialog builds the box fresh and .stripe restarts. */
  .done[open] {
    animation: done-in 0.32s cubic-bezier(0.2, 1.15, 0.3, 1) both;
  }

  @keyframes stripe-sweep {
    from { background-position: -260px 0; opacity: 0.25; }
    to { background-position: 0 0; opacity: 1; }
  }

  /* No opacity in the screen, stamp or verdict keyframes. A fade would drop
     every one of these below its contrast ratio for a few frames, and there is
     nothing here a fade buys that the movement does not already say. */
  @keyframes screen-in {
    from { transform: translateY(12px); }
    to { transform: none; }
  }

  @keyframes stamp-in {
    from { transform: scale(1.6) rotate(-9deg); }
    to { transform: none; }
  }

  @keyframes ring-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgb(0 0 0 / 0.6), 0 0 0 0 rgb(255 209 0 / 0.55); }
    55% { box-shadow: 0 0 0 2px rgb(0 0 0 / 0.6), 0 0 0 11px rgb(255 209 0 / 0); }
  }

  @keyframes slam {
    from { transform: scale(1.07) translateY(-6px); }
    60% { transform: scale(0.99); }
    to { transform: none; }
  }

  @keyframes tick-in {
    from { transform: translateX(-8px); }
    to { transform: none; }
  }

  @keyframes done-in {
    from { transform: scale(1.06) rotate(-1.2deg); }
    to { transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}