/* ChartStyle — charts as markup, not pictures.
   Everything is keyed off ONE custom property, --v, holding the real
   reading; the ink is derived from it. Nothing here is a hard-coded
   colour except the accent, which a page may override. */
.heat, .barlist {
  --chart: #2d5c96;      /* the accent a value is painted in */
  --null: #9b3d28;       /* the ring on "this reads as nothing" */
  --lo: .5;              /* the reading that means nothing */
  --k: 2;                /* 1 / (full - nothing) — calc() may not divide by a var() */
  --cols: 3;
  font-family: var(--sans, ui-sans-serif, system-ui, sans-serif);
  font-feature-settings: "onum" 0, "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
}
:root[data-theme="dark"] .heat, :root[data-theme="dark"] .barlist { --chart: #6d9bd4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .heat,
  :root:not([data-theme="light"]) .barlist { --chart: #6d9bd4; }
}

/* how far a reading sits between "nothing" and "full", clamped to 0..1 */
.heat > span, .bar {
  --f: clamp(0, calc((var(--v) - var(--lo)) * var(--k)), 1);
}

.heat {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) repeat(var(--cols), 1fr);
  gap: 3px;
  margin: 1.6rem 0;
  font-size: .82rem;
}
/* the column heads */
.heat > b {
  font-weight: 600;
  font-size: .69rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--quiet);
  text-align: center;
  padding: 0 0 .3rem;
  align-self: end;
}
.heat > b:first-child { text-align: right; padding-right: .7rem; }
/* the row labels */
.heat > i {
  font-style: normal;
  color: var(--quiet);
  text-align: right;
  padding-right: .7rem;
  align-self: center;
  white-space: nowrap;
}
/* a reading: its own ground, its own contrast */
.heat > span {
  padding: .55rem .4rem;
  text-align: center;
  border-radius: 2px;
  background: color-mix(in srgb,
              var(--chart) calc(var(--f) * 92%),
              color-mix(in srgb, var(--hair) 45%, transparent));
  /* contrast must FLIP, not fade. A linear ink-to-paper ramp puts mid
     readings at mid-grey on a mid-ground — the one place contrast is
     worst, and exactly where 0.76 and 0.86 became unreadable. This
     crosses over quickly around the middle instead. */
  color: color-mix(in srgb,
         var(--bg) clamp(0%, calc((var(--f) - .45) * 400%), 100%),
         var(--ink));
}
.heat > span.null { box-shadow: inset 0 0 0 1.5px var(--null); }

/* an inline bar — the number sits on its own fill */
.bar {
  display: inline-block;
  min-width: 5.5rem;
  padding: .12rem .5rem;
  border-radius: 2px;
  text-align: right;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--chart) 55%, transparent) calc(var(--f) * 100%),
      color-mix(in srgb, var(--hair) 40%, transparent) 0);
}

@media (max-width: 640px) {
  .heat { font-size: .74rem; gap: 2px; }
  .heat > span { padding: .45rem .2rem; }
}