/* MOVED 2026-09-15 from the GP Part 1 module folder to _components/, because
   five streams now mount the same survey and five copies of 3.8 MB of
   photography is not a component. Self-contained: its artwork lives in
   ./assets/ beside it, including the three marks it used to reach into the
   module's own assets/mim/ for. Nothing else about it changed. */
/* ═══════════════════════════════════════════════════════════════════════════
   precourse-survey.css — the pre-course survey, ported from the Matt/Andy
   Claude Design artboard "MIM Pre-course Survey.dc.html".

   PORTED, NOT REINTERPRETED. The artboard's layout, stages, poses, highlighter,
   room plate and motion are reproduced. What is NOT reproduced is its chrome:
   it drew its own header (logo, title, counter, ?, bug, settings, menu) and its
   own Back/Continue footer, and every one of those is a redraw of the module's
   real chrome. So the port uses the engine's furniture and this file styles the
   screen body only.

   THREE THINGS THIS FILE DOES THAT THE ARTBOARD DID NOT, ON PURPOSE:

   1. --fs-scale. Every size in the artboard was a bare clamp() in cqw/cqh, so
      the module's text-size control did nothing — while the artboard's own
      settings panel promised "Text size ... carry through to this screen".
      Every type size here is calc(clamp(...) * var(--fs-scale)).
   2. Night mode is an override list in this engine, not a token flip, so a new
      component renders wrong until its night rules are written. They are at the
      bottom of this file. This screen is dark in both modes by design.
   3. No CDN. The artboard pulled lucide from unpkg; a web package has no
      network guarantee. Icons are inline SVG in the markup.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the screen shell ─────────────────────────────────────────────────────── */

/* ⚠ .screen is position:static in this engine, so an inset:0 child resolves
   against the VIEWPORT, not the screen — which silently slid the whole
   composition under the sticky header and footer and cropped the man's head.
   Nothing errors; it just looks wrong. This one line is what holds it in. */
#screenHost .screen--survey {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #000;
}

.pcs {
  position: absolute;
  inset: 0;
  container-type: size;
  display: flex;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: 'Overpass', system-ui, sans-serif;
  font-weight: 300;
}

/* The room plate, its gradient and the photocopy texture. All three are
   decorative layers from the artboard and all three are load-bearing for the
   look, so none of them is optional. */
.pcs__plate,
.pcs__wash,
.pcs__tex {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pcs__plate {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
}
.pcs__wash {
  background: linear-gradient(100deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.28) 40%, rgba(0,0,0,0.72) 100%);
}
.pcs__tex {
  background-image: url('./assets/texture-photocopy-black.png');
  background-size: cover;
  background-position: center;
  opacity: 0.24;
  mix-blend-mode: multiply;
}

/* ── the two columns ──────────────────────────────────────────────────────── */

.pcs__row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
}

.pcs__mancol {
  flex: 0 0 44%;
  position: relative;
  min-width: 0;
  align-self: stretch;
}
.pcs.is-question .pcs__mancol { flex-basis: 34%; }

/* ⚠ THE ARTBOARD'S CONSTRUCTION DOES NOT SURVIVE THE ENGINE'S RESET.
   The artboard used `left: 50%; transform: translateX(-50%)` with no width. On
   its own canvas that was fine. Here, `img { max-width: 100% }` (mim-gp-shared.css
   line 68) clamps the image to the wrapper's shrink-to-fit width - which, anchored
   at left:50% with no width, is HALF the column - while `height: 100%` still
   holds. The man rendered at an aspect ratio of 0.44 against a natural 0.957:
   squashed to about half his width, at every viewport tested.
   Nothing errors and no gate notices, because the box is exactly the size it was
   asked to be. Only its RATIO is wrong, and a position check cannot see that.
   A full-width flex wrapper plus `max-width: none` restores the artboard. */
.pcs__manwrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* The parallax translate is written to this element by JS, so nothing else may
   own its transform — an animation would replace the property outright. */
.pcs__man {
  height: 100%;
  will-change: transform;
  animation: pcsFade 520ms cubic-bezier(0.2,0.7,0.2,1) both;
}
.pcs__man img {
  height: 100%;
  width: auto;
  max-width: none;          /* see the note above - without this he is crushed */
  display: block;
  filter: drop-shadow(0 30px 64px rgba(0,0,0,0.6)) contrast(1.03);
}

.pcs__content {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 3cqh, 44px) clamp(24px, 4%, 84px) clamp(16px, 3cqh, 44px) clamp(10px, 2%, 28px);
}

.pcs__stage {
  margin-block: auto;
  width: 100%;
  animation: pcsRise 420ms cubic-bezier(0.16,1,0.3,1) both;
}
.pcs.is-question .pcs__stage { animation-duration: 380ms; }

/* ── type ─────────────────────────────────────────────────────────────────── */

.pcs h2.pcs__h {
  font-family: 'Lora', Georgia, serif;
  font-weight: 400;
  font-size: calc(clamp(26px, 3.5cqw, 56px) * var(--fs-scale));
  line-height: 1.28;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 clamp(16px, 2.6cqh, 30px);
  max-width: 22ch;
  text-wrap: pretty;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}
.pcs.is-handover h2.pcs__h,
.pcs.is-done h2.pcs__h { line-height: 1.14; }
.pcs.is-question h2.pcs__h {
  font-size: calc(clamp(24px, 3.1cqw, 48px) * var(--fs-scale));
  line-height: 1.16;
  margin-bottom: clamp(14px, 2.4cqh, 28px);
}

/* The hand-drawn purple sweep. THE brand signature, at most one per layout. */
.pcs__hl {
  color: #000;
  text-shadow: none;
  background-image: url('./assets/mark-highlighter-line-v2.png');
  background-repeat: no-repeat;
  background-position: center 58%;
  background-size: 100% 92%;
  padding: 0 0.16em 0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.pcs__lede {
  font-size: calc(clamp(15px, 1.35cqw, 20px) * var(--fs-scale));
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255,255,255,0.90);
  margin: 0 0 clamp(10px, 1.4cqh, 16px);
  max-width: 44ch;
  text-wrap: pretty;
}
.pcs__sub {
  font-size: calc(clamp(14px, 1.2cqw, 17px) * var(--fs-scale));
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255,255,255,0.70);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

/* The question itself, behind its purple rule. This text is VERBATIM from the
   live Zoho instrument and must never be reworded; the conversational line
   above it is the only part that is ours. */
.pcs__q {
  padding-left: 14px;
  border-left: 2px solid var(--mim-purple, #B7A3FC);
  margin: 0 0 clamp(14px, 2.2cqh, 24px);
  max-width: 50ch;
}
.pcs__q p {
  font-size: calc(clamp(14px, 1.25cqw, 18px) * var(--fs-scale));
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255,255,255,0.94);
  margin: 0;
  text-wrap: pretty;
}

.pcs__hint {
  font-size: calc(13px * var(--fs-scale));
  line-height: 1.45;
  color: rgba(255,255,255,0.62);
  margin: 12px 0 0;
  max-width: 44ch;
}

/* ── the reassurance card on the handover ─────────────────────────────────── */

.pcs__note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(18px, 2.6cqh, 32px);
  padding: 13px 17px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 8px;
  max-width: 40ch;
  background: rgba(255,255,255,0.07);
}
.pcs__note svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--mim-purple, #B7A3FC);
}
.pcs__note span {
  font-size: calc(14px * var(--fs-scale));
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
}

/* ── options ──────────────────────────────────────────────────────────────── */

.pcs__opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 9px;
  max-width: 820px;
}
.pcs__optcell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pcs__opt {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: left;
  font-family: 'Overpass', system-ui, sans-serif;
  font-size: calc(14px * var(--fs-scale));
  font-weight: 300;
  line-height: 1.35;
  color: #fff;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 8px;
  background: rgba(0,0,0,0.42);
  cursor: pointer;
  transition: border-color 180ms cubic-bezier(0.2,0.7,0.2,1),
              background   180ms cubic-bezier(0.2,0.7,0.2,1);
}
.pcs__opt:hover { border-color: rgba(255,255,255,0.70); }
.pcs__opt[aria-checked="true"] {
  font-weight: 400;
  color: #000;
  border-color: var(--mim-purple, #B7A3FC);
  background: rgba(183,163,252,0.92);
}
.pcs__opt > span:last-child { flex: 1 1 auto; min-width: 0; }

.pcs__dot {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.60);
  background: transparent;
}
.pcs__opt--multi .pcs__dot { border-radius: 4px; }
.pcs__opt[aria-checked="true"] .pcs__dot {
  border-color: #000;
  background: #000;
  box-shadow: inset 0 0 0 3.5px rgba(183,163,252,0.92);
}

/* ── free text ────────────────────────────────────────────────────────────── */

.pcs__text {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  font-family: 'Overpass', system-ui, sans-serif;
  font-size: calc(clamp(17px, 1.6cqw, 22px) * var(--fs-scale));
  font-weight: 300;
  color: #fff;
  padding: 12px 2px;
  border: 0;
  border-bottom: 2px solid rgba(255,255,255,0.45);
  background: transparent;
  outline: none;
}
.pcs__text:focus { border-bottom-color: var(--mim-purple, #B7A3FC); }

.pcs__area {
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  font-family: 'Overpass', system-ui, sans-serif;
  font-size: calc(16px * var(--fs-scale));
  font-weight: 300;
  line-height: 1.55;
  color: #fff;
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.40);
  border-radius: 8px;
  background: rgba(0,0,0,0.42);
  outline: none;
  resize: vertical;
}
.pcs__area:focus,
.pcs__other:focus {
  border-color: var(--mim-purple, #B7A3FC);
  box-shadow: 0 0 0 2px rgba(183,163,252,0.40);
}

.pcs__other {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Overpass', system-ui, sans-serif;
  font-size: calc(15px * var(--fs-scale));
  font-weight: 300;
  color: #fff;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,0.40);
  border-radius: 8px;
  background: rgba(0,0,0,0.40);
  outline: none;
}

.pcs ::placeholder { color: rgba(255,255,255,0.42); }

/* ── the counter and the contents affordance ──────────────────────────────── */

.pcs__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(10px, 1.8cqh, 20px);
}
.pcs__count {
  font-family: 'Overpass Mono', ui-monospace, monospace;
  font-size: calc(12px * var(--fs-scale));
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
}
.pcs__req {
  font-size: calc(12px * var(--fs-scale));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
}
.pcs__jump {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Overpass', system-ui, sans-serif;
  font-size: calc(12px * var(--fs-scale));
  color: rgba(255,255,255,0.80);
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
}
.pcs__jump:hover { background: rgba(255,255,255,0.16); }
.pcs__jump svg { width: 14px; height: 14px; }

/* the survey's own progress rail, under the counter row */
.pcs__rail {
  height: 3px;
  background: #4A4A4A;
  margin: 0 0 clamp(14px, 2.2cqh, 26px);
  max-width: 820px;
}
.pcs__rail i {
  display: block;
  height: 100%;
  background: var(--mim-purple, #B7A3FC);
  transition: width 320ms cubic-bezier(0.2,0.7,0.2,1);
}

/* ── the contents drawer ──────────────────────────────────────────────────── */

.pcs__drawer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  justify-content: flex-end;
  background: rgba(0,0,0,0.5);
}
.pcs__drawer[hidden] { display: none !important; }
.pcs__scrim { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
.pcs__panel {
  position: relative;
  width: min(400px, 88cqw);
  background: #000;
  color: #fff;
  overflow-y: auto;
  padding: clamp(20px, 3cqh, 32px);
  box-shadow: -18px 0 48px rgba(0,0,0,0.5);
  animation: pcsFade 220ms cubic-bezier(0.2,0.7,0.2,1) both;
}
.pcs__panelhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.pcs__panelhead p {
  font-weight: 600;
  font-size: calc(12px * var(--fs-scale));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.60);
  margin: 0;
}
.pcs__close {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.pcs__list { display: flex; flex-direction: column; gap: 2px; }
.pcs__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  font-family: 'Overpass', system-ui, sans-serif;
  font-size: calc(14px * var(--fs-scale));
  font-weight: 300;
  color: rgba(255,255,255,0.66);
  padding: 11px 12px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  background: transparent;
  cursor: pointer;
  line-height: 1.35;
}
.pcs__item[aria-current="true"] {
  color: #fff;
  border-left-color: var(--mim-purple, #B7A3FC);
  background: rgba(255,255,255,0.09);
}
.pcs__item:disabled { opacity: 0.4; cursor: not-allowed; }
.pcs__item b {
  flex: 0 0 26px;
  font-family: 'Overpass Mono', ui-monospace, monospace;
  font-size: calc(11px * var(--fs-scale));
  font-weight: 400;
  color: rgba(255,255,255,0.45);
}
.pcs__item span { flex: 1 1 auto; }
.pcs__item i {
  flex: 0 0 auto;
  font-style: normal;
  font-size: calc(15px * var(--fs-scale));
  color: var(--mim-purple, #B7A3FC);
}

/* ── the done stage ───────────────────────────────────────────────────────── */

.pcs__tick {
  width: 56px;
  height: 56px;
  margin: 0 0 clamp(16px, 2.4cqh, 28px);
  background: url('./assets/mark-tick.png') left center / contain no-repeat;
}

/* ── the debug panel, only with ?surveydebug=1 ────────────────────────────── */

.pcs__diag {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 8;
  max-width: 380px;
  max-height: 46%;
  overflow: auto;
  margin: 0;
  padding: 10px 12px;
  font-family: 'Overpass Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  color: #C2E189;
  background: rgba(0,0,0,0.86);
  /* Never swallow a click meant for an option underneath it. */
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
}

/* ── focus, keyboard, reduced motion ──────────────────────────────────────── */

.pcs :focus-visible {
  outline: 2px solid var(--mim-purple, #B7A3FC);
  outline-offset: 2px;
}

/* SVG needs this explicitly: the browser's implicit [hidden] rule does not
   reach inside SVG. */
.pcs [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .pcs__stage,
  .pcs__man,
  .pcs__panel { animation: none !important; }
  .pcs__rail i { transition: none !important; }
}

@keyframes pcsRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pcsFade { from { opacity: 0; } to { opacity: 1; } }

/* ── narrow ───────────────────────────────────────────────────────────────── */

@container (max-width: 640px) {
  .pcs__row { flex-direction: column; }
  .pcs__mancol { flex: 0 0 34%; }
  .pcs__content { padding: 16px 18px 20px; }
  .pcs__opts { grid-template-columns: 1fr; }
}

/* ── NIGHT MODE ───────────────────────────────────────────────────────────────
   Night mode in this engine is an override LIST, not a token flip, so a new
   component gets nothing unless it is written here. This screen is dark in both
   modes by design, so these rules exist to STOP the night overrides reaching in
   and bleaching it, not to restyle it.
   ─────────────────────────────────────────────────────────────────────────── */

body.night-mode .pcs,
body.night-mode .pcs__panel { background: #000; color: #fff; }
body.night-mode .pcs h2.pcs__h { color: #fff; }
body.night-mode .pcs__q p { color: rgba(255,255,255,0.94); }
body.night-mode .pcs__opt { color: #fff; background: rgba(0,0,0,0.42); border-color: rgba(255,255,255,0.34); }
body.night-mode .pcs__opt[aria-checked="true"] { color: #000; background: rgba(183,163,252,0.92); }
body.night-mode .pcs__text,
body.night-mode .pcs__area,
body.night-mode .pcs__other { color: #fff; }
body.night-mode .pcs__hl { color: #000; }

/* ── THE CONTINUE LOCK ─────────────────────────────────────────────────────────
   The survey needs its OWN lock class. `.scroll-locked` belongs to the engine,
   which recomputes it on every screen entry and every scroll, so anything set
   there is either wiped or left on. This one is applied by the component only,
   and ONLY while the current question is unanswered - never for the whole
   survey, which is what made Continue read as a dead button from screen one.
   ─────────────────────────────────────────────────────────────────────────── */
/* ── the per-question submit, and the Continue it replaces ────────────────
   Tom, 15 Sep 2026: a button to submit each question on the screen itself, and
   Continue unlocks only when the survey is finished.

   The submit is ALWAYS clickable. Before the question is answered it is quiet
   rather than disabled, because pressing it is how the learner finds out what
   is missing - step() flashes "Answer this one to continue." A disabled button
   would explain nothing, which is the fault this screen already had once. */
.pcs__submit {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 26px;
  padding: 13px 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-primary);
  font-size: calc(14px * var(--fs-scale));
  font-weight: var(--weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard),
              border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard),
              transform 200ms var(--ease-standard);
}
.pcs__submit:hover { border-color: rgba(255,255,255,0.6); color: rgba(255,255,255,0.85); }

/* Answered: it becomes the obvious thing to press. */
.pcs__submit.is-ready {
  background: var(--mim-white);
  border-color: var(--mim-white);
  color: var(--mim-black);
  box-shadow: var(--depth-1-lt);
}
.pcs__submit.is-ready:hover { transform: translateY(-1px); box-shadow: var(--depth-2-lt); }
.pcs__submit:focus-visible { outline: 2px solid var(--mim-purple); outline-offset: 3px; }

.pcs__kbd {
  margin-top: 10px;
  font-family: var(--font-primary);
  font-size: calc(12px * var(--fs-scale));
  font-weight: var(--weight-light);
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) { .pcs__submit.is-ready:hover { transform: none; } }
body.reduced-motion .pcs__submit.is-ready:hover { transform: none; }

/* Continue, while the survey is unfinished. It is not broken, it is not yet
   the learner's move, and the cursor says so as well as the opacity. */
.nav-btn.pcs-locked { opacity: 0.38; cursor: not-allowed; }