/* Data bars field. Bars are placed in % of the field (so it scales with its box) with heights in px times
   --dbf-scale. Colours are knobs; the defaults are the measured palette (white / cream / sage rules, sky, and the
   blue gradient that runs dark on the left into pale sky on the right). */
.dbf {
  --dbf-ratio: 650 / 450;          /* field box */
  --dbf-scale: 1;                  /* bar heights (0.75 reads right on a phone) */
  --dbf-white: #ffffff;
  --dbf-cream: #f1f2eb;
  --dbf-sage: #e9ebde;
  --dbf-sky: #2db2ff;
  --dbf-grad: linear-gradient(-90deg, #d0eeff 0%, #2db2ff 39.5%, #0288d6 63.9%, #0f1b24 100%);
  position: relative;
  aspect-ratio: var(--dbf-ratio);
  will-change: transform;
}
.dbf-bar {
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 0%);
  width: var(--w, 50%);
  height: calc(var(--h, 12) * 1px * var(--dbf-scale));
  background: var(--c, var(--dbf-white));
  will-change: transform;
}
.dbf--white { --c: var(--dbf-white); }
.dbf--cream { --c: var(--dbf-cream); }
.dbf--sage  { --c: var(--dbf-sage); }
.dbf--sky   { --c: var(--dbf-sky); }
.dbf--grad  { --c: var(--dbf-grad); }

/* a field that bleeds past its column must be clipped by its section, not the page */
.dbf-clip { overflow: clip; }