/* ---------- Diffuse data fields (landing #decode): soft colour under crisp data marks ---------- */
/* Colour-only paint softens the range fields and dot fills. Every threshold divider,
   tick, label, number and marker keeps its exact position and stays crisp: no filters,
   no blur on .ps-range/.ps-bar/.ps-track/.ps-mark or any ancestor, no geometry change,
   no new motion. The zone border-right (the 2px --ps-ring divider) and the .ps-ticks row
   are untouched, so boundaries stay readable where softened fields meet. */

/* -- Range bars: feathered zone fields, crisp dividers painted on top -- */
/* Each zone keeps its exact inline left/width; only the fill becomes a radial field
   that holds full colour through the core and feathers toward the boundaries.
   The original solid colour is declared first as a fallback. */
#decode .ps-zone--in,
#decode .ps-zone--ok {
  background: var(--mint);
  background: radial-gradient(65% 65% at 50% 50%,
    var(--mint) 0%, var(--mint) 46%,
    color-mix(in srgb, var(--mint) 72%, transparent) 66%,
    color-mix(in srgb, var(--mint) 26%, transparent) 84%,
    transparent 97%);
}
#decode .ps-zone--out {
  background: var(--warm-soft);
  background: radial-gradient(65% 65% at 50% 50%,
    var(--warm-soft) 0%, var(--warm-soft) 46%,
    color-mix(in srgb, var(--warm-soft) 72%, transparent) 66%,
    color-mix(in srgb, var(--warm-soft) 26%, transparent) 84%,
    transparent 97%);
}
#decode .ps-zone--pre {
  background: var(--warm);
  background: radial-gradient(65% 65% at 50% 50%,
    var(--warm) 0%, var(--warm) 46%,
    color-mix(in srgb, var(--warm) 72%, transparent) 66%,
    color-mix(in srgb, var(--warm) 26%, transparent) 84%,
    transparent 97%);
}
#decode .ps-zone--conf {
  /* warm-ink carries the strongest meaning, so its core holds longer and
     only the last few percent feather into the divider. */
  background: var(--warm-ink);
  background: radial-gradient(65% 65% at 50% 50%,
    var(--warm-ink) 0%, var(--warm-ink) 58%,
    color-mix(in srgb, var(--warm-ink) 74%, transparent) 72%,
    color-mix(in srgb, var(--warm-ink) 30%, transparent) 88%,
    transparent 98%);
}

/* -- Markers: small soft halo + gentle interior gradient; structure stays crisp -- */
/* The pseudos are colour-only, pointer-events:none, and layered inside each mark's own
   stacking context below the ring highlight; the bubble (.ps-mark__val) and its arrow
   are not touched and render fully sharp above the bar. */
#decode .ps-mark--cur {
  background: radial-gradient(circle at 36% 30%, var(--forest-2), var(--forest) 74%);
}
#decode .ps-mark--cur::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  z-index: -1; pointer-events: none;
  /* transparent across the dot face and under the 3px ring highlight; the soft
     forest halo blooms just outside the crisp ring and fades at the box edge. */
  background: radial-gradient(circle closest-side,
    transparent 0 70%,
    color-mix(in srgb, var(--forest) 24%, transparent) 82%,
    transparent 99%);
}
#decode .ps-mark--prev {
  /* still clearly hollow: pale interior, crisp inset forest ring untouched */
  background: radial-gradient(circle at 38% 32%, var(--page), var(--surface) 70%);
}
#decode .ps-mark--prev::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(circle closest-side,
    transparent 0 66%,
    color-mix(in srgb, var(--forest) 16%, transparent) 78%,
    transparent 99%);
}

/* -- Evidence dot matrix (#insight .dots): gradient-edged colour fields -- */
/* All 100 grid positions, classes, counts and caption/legend text are untouched.
   These scoped rules outrank the !important background overrides in site.css
   (same origin/importance, higher specificity) without editing them. Relative
   intensities are preserved: .d--x strongest warm, .d--dm solid warm,
   .d--pre softer warm, .d--ok faint forest, .d--dmu hollow. */
#insight .dots .d {
  background: radial-gradient(circle closest-side,
    rgba(23, 60, 50, .14) 0 46%,
    rgba(23, 60, 50, .07) 70%,
    transparent 96%);
}
#insight .dots .d--ok {
  background: rgba(23, 60, 50, .30);
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--forest) 30%, transparent) 0 52%,
    color-mix(in srgb, var(--forest) 15%, transparent) 74%,
    transparent 94%) !important;
}
#insight .dots .d--x {
  background: rgba(224, 138, 98, 0.9);
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--brand-attention) 88%, transparent) 0 54%,
    color-mix(in srgb, var(--brand-attention) 48%, transparent) 76%,
    transparent 95%) !important;
}
#insight .dots .d--dm {
  background: var(--warm);
  background: radial-gradient(circle closest-side,
    var(--warm) 0 52%,
    color-mix(in srgb, var(--warm) 52%, transparent) 74%,
    transparent 94%) !important;
}
#insight .dots .d--dmu {
  /* hollow: transparent centre, soft warm bloom hugging the inside of the
     existing crisp 2.5px inset ring (ring itself unchanged). Never reads filled. */
  background: transparent;
  background: radial-gradient(circle closest-side,
    transparent 0 50%,
    color-mix(in srgb, var(--warm) 30%, transparent) 70%,
    transparent 82%) !important;
}
#insight .dots .d--pre {
  background: rgba(224, 138, 98, 0.72);
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--brand-attention) 66%, transparent) 0 50%,
    color-mix(in srgb, var(--brand-attention) 34%, transparent) 72%,
    transparent 92%) !important;
}
/* Legend chips carry the same classes, so they inherit these treatments at 11px;
   the percentage-based ramps scale with the chip, keeping each semantic legible. */

/* -- Forced colors: restore unambiguous solid data colours, scoped to these marks -- */
@media (forced-colors: active) {
  #insight .dots .d { background: CanvasText; }
  #decode .ps-zone--in, #decode .ps-zone--ok { forced-color-adjust: none; background: var(--mint); }
  #decode .ps-zone--out { forced-color-adjust: none; background: var(--warm-soft); }
  #decode .ps-zone--pre { forced-color-adjust: none; background: var(--warm); }
  #decode .ps-zone--conf { forced-color-adjust: none; background: var(--warm-ink); }
  #insight .dots .d--ok { forced-color-adjust: none; background: rgba(23, 60, 50, .30) !important; }
  #insight .dots .d--x { forced-color-adjust: none; background: rgba(224, 138, 98, 0.9) !important; }
  #insight .dots .d--dm { forced-color-adjust: none; background: var(--warm) !important; }
  #insight .dots .d--dmu { forced-color-adjust: none; background: transparent !important; }
  #insight .dots .d--pre { forced-color-adjust: none; background: rgba(224, 138, 98, 0.72) !important; }
}