/* ============================================================================
   Purpose: The two instrument gauges. Geometry is generated in
   template-parts/gauge.php; this file only decides how the instrument looks.
   Tokens only.
   ========================================================================= */

/* Dial with its SCORE beneath it on the left; name, band and detail stacked to
   the right. Nothing sits inside the arc - text in there is crossed by the
   needle and collides with the ticks. */
.czf-gauge {
  --g: var(--c-shield);
  --g-hi: var(--c-shield-hi);
  --g-ghost: var(--c-shield-ghost);

  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.czf-gauge__dial {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  width: var(--space-80);
}

/* Glass over the dial.
 *
 * Done in CSS rather than as an SVG overlay on purpose: an SVG gradient needs
 * an id, the gauge is rendered twice on the page, and duplicate ids in two
 * inline SVGs is a bug waiting for someone to reuse the partial a third time.
 * A pseudo-element has no such problem.
 *
 * Sized off the SVG's own square, which is the full dial width at 1:1 - the
 * value readout sits below it in the grid and must stay clear. */
.czf-gauge__dial::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grad-glass);
  pointer-events: none;
}

.czf-gauge--weather {
  --g: var(--c-weather);
  --g-hi: var(--c-weather-hi);
  --g-ghost: var(--c-weather-ghost);
}

.czf-gauge__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- Arc --------------------------------------------------------------- */

.czf-gauge__track {
  fill: none;
  stroke: var(--c-line-2);
  stroke-width: 6;
  stroke-linecap: round;
}

/* The band where this channel reads high. Present from question one, so the
   visitor can see where they are heading before the needle gets there. */
.czf-gauge__redline {
  fill: none;
  stroke: var(--g);
  stroke-width: 6;
  stroke-linecap: butt;
  opacity: 0.18;
}

.czf-gauge__fill {
  fill: none;
  stroke: var(--g);
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--g-ghost));
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}

/* --- Ticks -------------------------------------------------------------- */

.czf-gauge__tick {
  stroke: var(--c-line-2);
  stroke-width: 1;
}

.czf-gauge__tick--major {
  stroke: var(--c-ink-3);
  stroke-width: 1.5;
}

/* --- Needle -------------------------------------------------------------
   NO transform-origin here on purpose. The pivot is carried by the SVG
   `transform` attribute - rotate(angle cx cy) - and by GSAP's svgOrigin.
   Adding a CSS transform-origin as well makes both apply and the needle walks
   off the dial. One owner for the pivot, and it is not CSS.
   ---------------------------------------------------------------------- */

.czf-gauge__needle line {
  stroke: var(--c-ink);
  stroke-width: 2;
  stroke-linecap: round;
}

.czf-gauge__hub {
  fill: var(--c-elev-4);
  stroke: var(--g);
  stroke-width: 2;
}

/* --- Peak marker (max hold) ----------------------------------------------
   The highest this channel has read so far, left behind on the scale.

   This is a readout, not decoration. Answers can lower a score as well as
   raise it, and without a mark the visitor never sees the worst case their
   own answers produced - which is the entire argument the product is making.
   Real meters do exactly this and call it max hold.

   Paler than the channel colour: it is the memory of a value, not a value.
   ---------------------------------------------------------------------- */
.czf-gauge__peak {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.czf-gauge__peak line {
  stroke: var(--c-peak);
  stroke-width: 2;
  stroke-linecap: round;
}

.czf-gauge__peak[data-on="1"] { opacity: 1; }

/* --- Readout, to the right of the dial ---------------------------------- */

.czf-gauge__readout {
  flex: 1 1 auto;
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  min-width: 0;
}

.czf-gauge__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--g);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-4);
}

.czf-gauge__max {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--weight-regular);
  color: var(--c-ink-3);
}

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

.czf-gauge__sub {
  margin: 0;
  max-width: none;
  font-size: var(--fs-micro);
  line-height: var(--lh-normal);
  color: var(--c-ink-3);
  white-space: nowrap;   /* "Weather & chemical → coating" reads as one line */
}

/* The band chip only earns colour once the channel actually reads high. */
.czf-gauge__band {
  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;
  white-space: nowrap;   /* "HIGH → COATING" must never wrap to two lines */
  color: var(--c-ink-3);
  border: 1px solid var(--c-line-2);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}

.czf-gauge.is-high .czf-gauge__band {
  color: var(--g);
  border-color: var(--g);
  background: var(--g-ghost);
}

.czf-gauge.is-high .czf-gauge__redline { opacity: 0.4; }

/* --- Narrow ----------------------------------------------------------------
   Two instruments side by side on a phone, each one restacked.

   The wide layout puts the dial on the left and the whole readout to its
   right, which needs more horizontal room than half a 375px screen has. So at
   this width the gauge turns into two rows instead: the dial and its score on
   one line, because a number belongs next to the needle that produced it, then
   the channel name, the band and the one-line explanation underneath.

   Side by side is not a space decision - it is the point. Two dials exist so
   the visitor can compare them at a glance; one above the other reads as a
   list of unrelated readings.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .czf-gauge {
    display: grid;
    gap: var(--space-8);
    align-items: start;
    /* `align-content`, not just `align-items`.
       The two gauges are stretched to the same height by the grid above, and
       one channel's explanation wraps to two lines while the other's does not.
       That spare height has to go somewhere: the default `stretch` shares it
       out between the rows, which pushed the shorter gauge's name, band and
       explanation down by half a line and left the two columns visibly out of
       step. `start` packs the rows and lets the slack fall at the bottom. */
    align-content: start;
  }

  /* Dial and score on one line.
     The box shrinks to exactly those two and is then centred in the column as
     a whole. Making the box full-width and centring its TRACKS instead looks
     the same but is not: it detaches the box's left edge from the dial, and
     the glass overlay below is positioned from that edge. */
  .czf-gauge__dial {
    grid-template-columns: var(--space-64) auto;
    align-items: center;
    justify-items: start;
    gap: var(--space-8);
    width: auto;
    justify-self: center;
  }

  /* The glass stays absolute and stays pinned to the dial's own column, which
     is now the box's left edge again. It must NOT become a grid item with an
     explicit `grid-area` - that occupies a cell, and auto-placement then puts
     the score in the cell the dial wanted, which silently swaps the two. */
  .czf-gauge__dial::after {
    width: var(--space-64);
  }

  .czf-gauge__svg { width: var(--space-64); }

  /* The value sits on the dial's baseline rather than under it. */
  .czf-gauge__value { justify-content: flex-start; }

  /* The name, band and explanation centre under the dial-and-score pair above
     them, rather than hanging off its left edge. Left-aligned they read as a
     separate list that happens to sit below a dial; centred they read as that
     dial's caption. */
  .czf-gauge__readout {
    justify-items: center;
    text-align: center;
  }

  /* One line, at a size measured to make that true.
     The longer of the two strings ("Weather & chemical -> coating") wants
     173px at 12px and has a 160px column, so it wrapped and the two gauges
     ended up different heights. 10px clears it at 144px - enough margin that a
     fallback font or a slightly wider arrow glyph will not push it over. */
  .czf-gauge__sub {
    white-space: nowrap;
    font-size: var(--fs-10);
  }
}

@media (prefers-reduced-motion: reduce) {
  .czf-gauge__fill { transition: none; }
}

@media print {
  .czf-gauge__fill { filter: none; }
  .czf-gauge__track { stroke: #bbb; }
}