/* ============================================================================
   Purpose: The rig - question panel, options, progress. Tokens only.
   ========================================================================= */

/* --- Head: intro left, live instruments right --------------------------- */

/* No pull-up. The old -16px margin dragged the eyebrow up level with the
   question panel, which read as a failed alignment rather than a deliberate
   one. The offset itself is set at the breakpoint below - it only means
   anything where the two columns sit side by side. */
.czf-rig__head { position: relative; margin-top: 0; }

/* No scrim here any more. The car now sits BELOW the heading rather than
   behind it, and a radial mask over open space reads as a hard dark rectangle
   - a visible box is worse than the problem it was solving. */

.czf-rig__head .czf-h2 {
  margin-top: var(--space-12);
  max-width: 18ch;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);   /* 24 → 32 */
}

/* Both instruments in one row, always. Side by side is how you compare two
   numbers; stacked, they read as a list. */
.czf-rig__instruments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
  max-width: 480px;
}

.czf-rig__side { display: grid; gap: var(--space-32); align-content: start; }
.czf-rig__side > * { position: relative; z-index: var(--z-raised); }

/* --- Body: car on the left, questions on the right ----------------------- */

/* `minmax(0, 1fr)`, never a bare `1fr`.
   A bare `1fr` is `minmax(auto, 1fr)`, and that `auto` floors the track at its
   content's MIN-CONTENT width - so one nowrap child (the "scores nothing"
   badge) pushed the panel 38px past the container on a 375px screen and the
   whole column bled off the right edge. The desktop rule below already had the
   guard; the mobile default did not. */
.czf-rig__grid {
  display: grid;
  gap: var(--space-32);
  grid-template-columns: minmax(0, 1fr);
}

/* Open space the shared canvas shows the car through. It reserves real height
   so the car is never covered by the question panel. */
.czf-rig__view { display: none; }

@media (min-width: 1024px) {
  .czf-rig__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
    gap: var(--space-64);
    align-items: start;
  }
  .czf-rig__view { display: block; min-height: 44svh; }
  .czf-rig__side { position: sticky; top: var(--space-96); }

  /* Drop the heading 64px below the question panel's top edge, so the left
     column reads as set INSIDE the panel's line. Desktop only: below 1024 the
     two stack, and an indent on a stacked column is just a gap. The column
     already starts 32px down, so this adds the other 32. */
  .czf-rig__head { margin-top: var(--space-32); }
}

/* --- Question panel ------------------------------------------------------ */

/* One fixed height for every question.

   A panel that resizes per question does not just make the page jump. On
   desktop the car is parked against the panel's base and the scroll handoff is
   timed to the panel's bottom edge, so a three-option question pulls the whole
   car up into the gauges. The height is the fix, not a clamp on the car.

   Only binds at >= 1024, where the car sits beside the panel - below that the
   car has its own reserved bay and framework.css releases this to 0. */
/* Everything below is surface only. No padding, no font size and no box size
   changes - the panel's height is measured and load-bearing (see above), so
   the styling works in backgrounds, borders and absolutely positioned
   pseudo-elements, and the 704px stays true. */
.czf-rig__panel {
  position: relative;
  min-height: var(--rig-panel-h);
  display: flex;
  flex-direction: column;
  padding: var(--space-32);
  /* Ruled surface over warm spill over the base gradient. Three layers rather
     than a flat fill, because this panel sits next to a lit car and a plain
     dark card next to that reads as an unfinished box. */
  background: var(--grad-rig-grid), var(--grad-rig-spill), var(--grad-rig);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-inset-top), var(--shadow-md);
}

/* The top edge, lit from the middle. Same idea as the turntable's rim: a plate
   should have somewhere it starts. */
.czf-rig__panel::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;      /* -1px so it sits ON the border, not under it */
  height: 1px;
  background: var(--grad-rig-edge);
  pointer-events: none;
}

/* Corner crop marks. Eight 1px bars in one element - two arms per corner,
   drawn as background layers so this costs no extra DOM.

   This is the detail that stops the panel reading as a generic dark card. It
   is also the measuring-equipment character the 3D plate had to give up. */
.czf-rig__panel::after {
  content: "";
  position: absolute;
  inset: var(--space-12);
  pointer-events: none;
  background-image:
    linear-gradient(var(--c-mark), var(--c-mark)), linear-gradient(var(--c-mark), var(--c-mark)),
    linear-gradient(var(--c-mark), var(--c-mark)), linear-gradient(var(--c-mark), var(--c-mark)),
    linear-gradient(var(--c-mark), var(--c-mark)), linear-gradient(var(--c-mark), var(--c-mark)),
    linear-gradient(var(--c-mark), var(--c-mark)), linear-gradient(var(--c-mark), var(--c-mark));
  background-size:
    var(--rig-mark-arm) 1px, 1px var(--rig-mark-arm),
    var(--rig-mark-arm) 1px, 1px var(--rig-mark-arm),
    var(--rig-mark-arm) 1px, 1px var(--rig-mark-arm),
    var(--rig-mark-arm) 1px, 1px var(--rig-mark-arm);
  background-position:
    0 0,        0 0,
    100% 0,     100% 0,
    0 100%,     0 100%,
    100% 100%,  100% 100%;
  background-repeat: no-repeat;
}

@media (max-width: 599px) {
  /* The marks sit inside a 32px pad on desktop. At 20px they would land on the
     text, so they go. */
  .czf-rig__panel::after { display: none; }
}

/* No min-height here. Everything below 1024 already has it released to 0 by
   pages/framework.css, which loads after this file - a floor set here was
   dead code, and read as if narrow screens were still being held to a height
   they were not. */
@media (max-width: 599px) {
  .czf-rig__panel { padding: var(--space-20); }
}

.czf-rig__meta {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}

/* Narrow. The badge is the widest single run of text on the panel, so on a
   phone it takes its own line under the counter rather than forcing the row -
   and the width guard on the grid stops it from being able to force anything
   in the first place. Desktop keeps all three on one line, which is where the
   panel's measured height was taken. */
@media (max-width: 699px) {
  .czf-rig__meta { flex-wrap: wrap; }
  .czf-rig__free { white-space: normal; }
  .czf-rig__count { flex: 0 0 auto; }
  .czf-rig__rail  { flex: 1 1 var(--space-64); }
}

.czf-rig__count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--c-ink-3);
  white-space: nowrap;
}

/* The live number reads as an instrument, not as body copy: gold, and lit,
   the way a value on a dial is. */
.czf-rig__count b {
  color: var(--c-shield);
  font-weight: var(--weight-bold);
  text-shadow: var(--glow-text-shield);
}
.czf-rig__of { color: var(--c-ink-3); }

/* A segmented gauge rather than a plain bar.
   Taller, so the segments are legible, and the segmenting is drawn by an
   overlay ON TOP of the fill - the fill element keeps its plain width
   transition and the JS that sets it is untouched. */
.czf-rig__rail {
  position: relative;
  flex: 1 1 auto;
  /* A flex item's default minimum is its content size. The rail has no content
     to speak of, but without this it still refuses to shrink past `auto` in
     some engines and pushes the row wider than the panel. */
  min-width: 0;
  height: var(--space-4);
  background: var(--c-line-2);
  overflow: hidden;
}

.czf-rig__rail i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-shield);
  box-shadow: var(--glow-shield);
  transition: width var(--dur-base) var(--ease-out);
}

/* The teeth. Cut out of both the fill and the empty track in one pass, so the
   gauge reads as one scale that happens to be filled up to a point. */
.czf-rig__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-rail-ticks);
  pointer-events: none;
}

/* The "this scores nothing" badge. It is the most persuasive thing on the
   page, so it is stated while the question is being answered - not buried in
   a methodology table further down. */
.czf-rig__free {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-clear);
  border: 1px solid var(--c-clear);
  background: var(--c-clear-ghost);
  white-space: nowrap;
}

/* A live indicator, because this badge is a reading about the current
   question rather than a permanent label on the panel. */
.czf-rig__free::before {
  content: "";
  flex: 0 0 auto;
  width: var(--space-4);
  height: var(--space-4);
  border-radius: 50%;
  background: var(--c-clear);
  box-shadow: 0 0 8px var(--c-clear);
}

/* The question, marked in the panel's own gutter.
   The mark lives in the existing 32px padding, absolutely positioned, so it
   costs no height and the copy does not move. */
.czf-rig__q {
  position: relative;
  font-size: var(--fs-h4);
  max-width: 22ch;
  margin-bottom: var(--space-12);
}

.czf-rig__q::before {
  content: "";
  position: absolute;
  left: calc(var(--space-16) * -1);
  top: 0.32em;
  width: 2px;
  height: 1em;
  background: var(--grad-shield);
}

@media (max-width: 599px) {
  /* 20px of padding will not hold the mark clear of the text. */
  .czf-rig__q::before { display: none; }
}

.czf-rig__why {
  font-size: var(--fs-caption);
  color: var(--c-ink-3);
  max-width: 54ch;
  margin-bottom: var(--space-24);
}

/* --- Options -------------------------------------------------------------- */

/* The `hidden` attribute is only a UA rule of display:none, so ANY class that
   sets display beats it. Both of these get an explicit guard, or the options
   and the routing step render on top of each other. */
.czf-options[hidden],
.czf-pin[hidden] { display: none !important; }

.czf-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* An option is a channel strip on an instrument: a key you could press, a
   label, and a reading that fills from the leading edge.

   Padding, gap and font size are all untouched from the plain version. Every
   addition below is a background, a border or an absolutely positioned
   pseudo-element, so the row height is exactly what it was and the panel's
   measured 704px still holds. */
.czf-opt {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-16);
  text-align: left;
  color: var(--c-ink-2);
  background: var(--c-elev-2);
  border: 1px solid var(--c-line);
  font-size: var(--fs-body);
  line-height: var(--lh-heading);
  transition: border-color var(--dur-fast) var(--ease-out),
              background   var(--dur-fast) var(--ease-out),
              color        var(--dur-fast) var(--ease-out);
}

/* The sweep. Transform and opacity only, so it is free to animate and it obeys
   the reduced-motion rule without a special case. */
.czf-opt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-opt-sweep);
  opacity: 0;
  transform: translateX(calc(var(--space-8) * -1));
  transition: opacity   var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}

/* The selection bar, growing from the middle of the leading edge. A bar that
   simply appears reads as a state; one that grows reads as a response. */
.czf-opt::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--c-shield);
  box-shadow: var(--glow-shield);
  transform: scaleY(0);
  transition: transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}

/* Both pseudo-elements are painted over the row's own background, so the
   content has to be lifted above them. */
.czf-opt__key,
.czf-opt__label { position: relative; z-index: var(--z-raised); }

.czf-opt:hover {
  background: var(--c-elev-3);
  border-color: var(--c-line-3);
  color: var(--c-ink);
}

.czf-opt:hover::before { opacity: 1; transform: none; }

/* A keycap, not a box. Lighter along the top edge where a real one would
   catch the room, and the number in the same mono as every other readout. */
.czf-opt__key {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--space-24);
  height: var(--space-24);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--c-ink-3);
  background: var(--grad-key-cap);
  border: 1px solid var(--c-line-2);
  box-shadow: var(--shadow-inset-top);
  transition: color      var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.czf-opt:hover .czf-opt__key {
  color: var(--c-ink-2);
  border-color: var(--c-line-3);
}

.czf-opt[aria-checked="true"] {
  border-color: var(--c-shield);
  background: var(--c-shield-ghost);
  color: var(--c-ink);
}

.czf-opt[aria-checked="true"]::after { transform: scaleY(1); }
.czf-opt[aria-checked="true"]::before { opacity: 1; transform: none; }

/* The chosen key lights up properly - it is the one thing on the panel
   carrying the answer, so it gets the gradient rather than a flat fill. */
.czf-opt[aria-checked="true"] .czf-opt__key {
  background: var(--grad-shield);
  border-color: var(--c-shield-hi);
  color: var(--c-ink-inv);
  font-weight: var(--weight-bold);
  box-shadow: var(--glow-shield);
}

/* Keyboard path. The whole diagnostic is answerable with the number keys, so
   the focus ring has to be as loud as the selection. */
.czf-opt:focus-visible {
  outline: 2px solid var(--c-shield);
  outline-offset: 2px;
  border-color: var(--c-shield);
}

/* --- Feedback ------------------------------------------------------------- */

/* The row keeps its height whether or not there is feedback, so answering
   never shifts the layout. But the rule is drawn by a pseudo-element sized to
   the TEXT - a border on the box itself spans the reserved height and makes a
   single line look like it is floating at the top of a taller bar. */
.czf-rig__fb {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: var(--space-40);
  margin-top: var(--space-16);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--c-weather);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* The rule draws DOWN as the text fades in, rather than fading with it.
   Two things arriving the same way read as one thing appearing; a rule that
   draws and then text that resolves reads as a reading being taken. */
.czf-rig__fb::before {
  content: "";
  flex: 0 0 auto;
  width: 2px;
  height: calc(var(--lh-normal) * 1em);
  background: var(--c-weather);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--dur-base) var(--ease-out);
}

.czf-rig__fb.is-on { opacity: 1; }
.czf-rig__fb.is-on::before { transform: scaleY(1); }

/* --- Nav ------------------------------------------------------------------ */

.czf-rig__nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: auto;          /* pinned to the base of the fixed-height panel */
  padding-top: var(--space-24);
  flex-wrap: wrap;
}

.czf-rig__tip {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--c-ink-3);
}

@media (max-width: 767px) { .czf-rig__tip { display: none; } }

/* --- Routing step ---------------------------------------------------------
   The PIN step is not a question - it scores nothing and it is the only place
   the visitor types. It gets its own treatment so it reads as a handover, not
   as more quiz.
   ------------------------------------------------------------------------ */

.czf-pin { display: grid; gap: var(--space-12); }

.czf-pin__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.czf-pin__row { display: flex; gap: var(--space-8); flex-wrap: wrap; }

/* The one field on the page. Treated as a readout you type into rather than a
   web form input: mono, wide-tracked, sunk into the panel, and lit at the
   caret. */
.czf-pin__input {
  flex: 1 1 180px;
  padding: var(--space-16);
  background: var(--c-void);
  border: 1px solid var(--c-line-2);
  color: var(--c-ink);
  caret-color: var(--c-shield);
  font-family: var(--font-mono);
  font-size: var(--fs-lead);
  letter-spacing: 0.2em;
  box-shadow: var(--shadow-inset-sunk);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow   var(--dur-fast) var(--ease-out);
}

.czf-pin__input:focus {
  outline: none;
  border-color: var(--c-shield);
  box-shadow: var(--shadow-inset-sunk), var(--glow-shield-soft);
}
.czf-pin__input::placeholder { color: var(--c-ink-3); letter-spacing: 0.2em; }

.czf-pin__match {
  margin: 0;
  min-height: var(--space-20);
  font-size: var(--fs-caption);
  color: var(--c-ink-3);
}

.czf-pin__match[data-state="hit"]  { color: var(--c-clear); }
.czf-pin__match[data-state="miss"] { color: var(--c-ink-3); }

.czf-pin__skip {
  justify-self: start;
  padding: 0;
  font-size: var(--fs-caption);
  color: var(--c-ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.czf-pin__skip:hover { color: var(--c-ink); }