/* The availability heat ramp, shared by the hub UI and the report daemon.

   The other half of `common/heat.py`: that file decides which class a bucket
   gets, this one decides what the class looks like. Adding a step means adding
   a rule here too - a class with no rule renders transparent, which on the page
   reads as a gap rather than as a colour nobody chose.

   Heat scale: c-h10 is a slice where everything answered, c-h0 one where
   nothing did, and the nine between are shades of the same ramp. The hue is
   fixed per step and only the saturation and lightness follow the theme, so
   the dark palette stays one edit rather than eleven.

   Green is reserved for c-h10 alone, and the ramp restarts at green-yellow
   rather than continuing down from it. The point of the strip is to find an
   outage without reading it column by column, and a continuous ramp defeated
   that at the top end: c-h9 used to be hue 124 against c-h10's 137, thirteen
   degrees of green nobody can tell apart at 15px wide, so a column that was
   99% up looked like a clean one. It is not a clean one - it is the column to
   go and look at - so it leaves green entirely.

   Hence the deliberate cliff at the top: 100% to 99.99% is a jump of ~37 CIELAB
   deltaE, where 2.3 is the just-noticeable threshold. From there down to red the
   steps are even and gradual, deltaE 8-15 each - distinguishable side by side,
   but reading as one continuous ramp rather than ten separate colours. Keep
   both properties if you retune this: the cliff is what makes an outage
   obvious, the even walk is what makes its depth readable.

   The middle of the ramp is lightened a little: at one fixed lightness the
   yellows come out muddy brown and read as a third colour rather than as a
   point between the two ends.

   The page including this file must define --line, which is what a gap is
   painted with: "we did not hear" is not a reading and must not look like one. */

:root { --heat-s: 66%; --heat-l: 36%; }
@media (prefers-color-scheme: dark) {
  :root { --heat-s: 58%; --heat-l: 50%; }
}

.c-h10 { background: hsl(142 var(--heat-s) var(--heat-l)); }
.c-h9  { background: hsl( 74 var(--heat-s) calc(var(--heat-l) +  4%)); }
.c-h8  { background: hsl( 66 var(--heat-s) calc(var(--heat-l) +  8%)); }
.c-h7  { background: hsl( 58 var(--heat-s) calc(var(--heat-l) + 10%)); }
.c-h6  { background: hsl( 51 var(--heat-s) calc(var(--heat-l) + 10%)); }
.c-h5  { background: hsl( 43 var(--heat-s) calc(var(--heat-l) +  9%)); }
.c-h4  { background: hsl( 35 var(--heat-s) calc(var(--heat-l) +  6%)); }
.c-h3  { background: hsl( 27 var(--heat-s) calc(var(--heat-l) +  4%)); }
.c-h2  { background: hsl( 20 var(--heat-s) calc(var(--heat-l) +  2%)); }
.c-h1  { background: hsl( 12 var(--heat-s) calc(var(--heat-l) +  1%)); }
.c-h0  { background: hsl(  4 var(--heat-s) var(--heat-l)); }
.c-gap { background: var(--line); }