/* ─────────────────────────────────────────────────────────
   dial — one proportion, as a ring of ticks.

   From a dark progress screen: sixty tapered spokes, a fifth
   lit and running warm from orange to red, a large
   percentage in the middle, two lines of reassurance under
   it. Inverted to ink on white with the rest of this repo.

   The inversion is harder here than anywhere else in the
   folder, because the reference's unlit ring is a *glow* —
   dark grey spokes that fade towards the bottom of the
   frame, which works because they are brighter than the
   background and fading means approaching it. On white the
   equivalent would be spokes fading towards invisible, and
   an unlit spoke that cannot be seen is not an unlit spoke,
   it is a missing one — which breaks the only thing the ring
   has to communicate, that the dark part is work still to do.

   So the unlit ring here is flat. It loses the reference's
   depth and keeps its meaning, which is the right trade.

   The warm ramp stayed. Orange-to-red on a progress ring is
   normally a mistake — it is the palette of a failure — but
   here it is doing something specific and worth keeping:
   the warmest spokes are the newest ones, so the colour is
   marking the leading edge rather than grading a severity.
   Anything on this ring that looked like a status colour was
   tested against exactly that reading and kept only if it
   survived it.

   Paint only; geometry is the GEO block in dial.js.
   ───────────────────────────────────────────────────────── */

/* ── The parts ─────────────────────────────────────────────
   Copied into public/style.css next to .d-*, .fn-*, .bp-*,
   .st-* and .bar-* when a case study takes one. Class names
   only, no style attributes — the site's CSP blocks those. */

/* Work still to do. Flat, and heavier than the reference's dimmest spokes:
   on white, a spoke that fades out reads as absent rather than as unlit. */
.dl-idle line {
  stroke: var(--dl-idle);
  stroke-width: 3.5;
  stroke-linecap: round;
}

/* Work done. Three bands rather than a gradient, so the arc stays
   class-addressable and can be pasted into a case study as a fragment. The
   ramp runs from the start of the arc to its leading edge. */
.dl-live line {
  stroke: var(--dl-warm);
  stroke-width: 4;
  stroke-linecap: round;
}
.dl-live .dl-mid {
  stroke: var(--dl-warmer);
}
/* The leading edge: the strongest colour in the frame, on the longest spokes.
   Length and weight together say "this end is moving", which is the one thing
   a progress figure has to say and a filled arc cannot. */
.dl-live .dl-lead {
  stroke: var(--dl-hot);
  stroke-width: 4.5;
}

.dl-value {
  fill: currentColor;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.dl-state {
  fill: var(--ink-50);
  font-size: 16px;
}
.dl-head {
  fill: currentColor;
  font-size: 17px;
  font-weight: 600;
}
.dl-caption {
  fill: var(--ink-50);
  font-size: 14px;
}

/* ── The host ──────────────────────────────────────────────
   Workshop pages only. On the site .diagram provides the
   scroll, the min-width floor and the inherited currentColor. */

.dl {
  /* 0.55 not 0.5, matching public/style.css: #737373 on white at 4.74:1,
     which clears AA. 0.5 is 3.95:1 and fails. */
  --ink-50: rgba(0, 0, 0, 0.55);
  --dl-idle: rgba(0, 0, 0, 0.16);
  /* The warm ramp. --stop in public/style.css is #f71b07, which is the site's
     failure red; the hot end here stops short of it on purpose, so a lit ring
     is never mistaken for the colour that means something went wrong. */
  --dl-warm: #a8cf6b;
  --dl-warmer: #84b82e;
  --dl-hot: #60a000;

  color: #000;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    sans-serif;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  min-width: 0;
}

.dl svg {
  display: block;
  width: 100%;
  height: auto;
  /* The ring is 350 units of a 640 viewBox, so it scales down comfortably;
     the floor is set by the caption, not the drawing. */
  min-width: 22rem;
  max-width: 34rem;
  margin: 0 auto;
  overflow: visible;
}

.dl-figure {
  margin: 0;
  min-width: 0;
}
.dl-figure figcaption {
  margin-top: 16px;
  color: rgba(0, 0, 0, 0.55);
  max-width: 34rem;
}