/* calc.css: the calculator's frame (kit\calc.md), the same in every run: the structure and mechanics of its pieces, no
   look. Every color, font, corner and shadow is a knob (--calc-*), set on the calculator or on any element around it,
   and falls back to this site's tokens (design\system.css) or to currentColor. Every rule is :where(), with no weight,
   so the site's own CSS always wins. build.mjs loads it before components.css on a page that holds a calculator; it
   serves the kit's worth (src\partials\calc.mjs) and any [data-kit-calc] built with the same classes.

   The knobs, and what each falls back to:
     --calc-ink            the figures, the labels and the values          --c-ink
     --calc-ink-soft       the scale and the note                          --c-ink-soft
     --calc-track          a slider's empty track                          --c-line
     --calc-fill           its fill, up to the thumb (the kit's --kit-fill) --c-brand
     --calc-thumb          the thumb's face                                --c-paper
     --calc-thumb-edge     the thumb's ring                                --c-brand
     --calc-thumb-shadow   the thumb's shadow                              --shadow-s
     --calc-focus          the focus ring                                  --c-brand-text, --c-brand
     --calc-surface        what the calculator stands on (inside the ring) --c-paper
     --calc-font           the labels, the values and the scale            --font-ui
     --calc-font-figure    the total and the figures                       --font-display
     --calc-track-radius   the track's ends (a length; half its height at most) --radius-s
     --calc-thumb-radius   the thumb's corners                             --radius-l
   Sizes: --calc-hit (the height a hand grabs, anywhere along the track: 44px, never under 40px), --calc-track-size
   (6px), --calc-thumb-size (28px), --calc-thumb-edge-size (3px), --calc-focus-size (3px), --calc-focus-gap (2px),
   --calc-label-size (--fs-ui), --calc-value-size (--fs-h3), --calc-scale-size (--fs-small), --calc-total-size
   (--fs-display, the largest the total is ever drawn), --calc-figure-size (--fs-h2), --calc-gap (--space-3), and
   --calc-months (how the picture's 12 month marks show: none, or flex, grid ...). */

/* The sliders: a group, and each slider's label, value, track and scale. */
:where(.calc-sliders) { display: grid; gap: var(--calc-gap, var(--space-3, 1rem)); min-width: 0; }
:where(.calc-slider) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-2, .75rem);
  min-width: 0; font-family: var(--calc-font, var(--font-ui, inherit)); color: var(--calc-ink, var(--c-ink, currentColor));
}
:where(.calc-slider__label) { grid-column: 1; min-width: 0; font-size: var(--calc-label-size, var(--fs-ui, 1rem)); overflow-wrap: anywhere; }
:where(.calc-slider__value) { grid-column: 2; font-size: var(--calc-value-size, var(--fs-h3, 1.25rem)); line-height: var(--lh-tight, 1.2); }

/* A number keeps the room of the widest it can show (its .calc-sizer, hidden), so nothing beside it moves or wraps
   again while a slider is dragged; its digits are all one width. */
:where(.calc-num) { display: inline-grid; justify-items: end; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
:where(.calc-fit) { display: grid; justify-items: start; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
:where(.calc-num, .calc-fit) > * { grid-area: 1 / 1; }
:where(.calc-sizer) { visibility: hidden; }

/* The track. The input itself is the hit area (--calc-hit tall, the whole width), so a hand grabs it anywhere; the
   visible track, its fill and its rounded ends are painted inside it, the fill up to the kit's --kit-fill (always under
   the thumb), the same in Chromium, WebKit and Firefox. */
:where(.calc-range) {
  --_h: max(40px, var(--calc-hit, 44px));
  --_t: var(--calc-track-size, 6px);
  --_th: var(--calc-thumb-size, 28px);
  --_r: min(var(--calc-track-radius, var(--radius-s, 0px)), var(--_t) / 2);
  --_track: var(--calc-track, var(--c-line, color-mix(in srgb, currentColor 25%, transparent)));
  --_fill: var(--calc-fill, var(--c-brand, currentColor));
  --_face: var(--calc-thumb, var(--c-paper, Canvas));
  --_edge: var(--calc-thumb-edge, var(--c-brand, currentColor));
  --_ring: var(--calc-focus, var(--c-brand-text, var(--c-brand, currentColor)));
  --_under: var(--calc-surface, var(--c-paper, Canvas));
  --_paint:
    linear-gradient(var(--_fill), var(--_fill)) var(--_r) 50% / max(0px, calc(var(--kit-fill, 0%) - var(--_r))) var(--_t) no-repeat,
    radial-gradient(circle var(--_r) at var(--_r) 50%, var(--_fill) 94%, transparent) 0 0 / 100% 100% no-repeat,
    linear-gradient(var(--_track), var(--_track)) var(--_r) 50% / calc(100% - 2 * var(--_r)) var(--_t) no-repeat,
    radial-gradient(circle var(--_r) at calc(100% - var(--_r)) 50%, var(--_track) 94%, transparent) 0 0 / 100% 100% no-repeat;
  grid-column: 1 / -1;
  -webkit-appearance: none; appearance: none;
  display: block; box-sizing: border-box; width: 100%; height: var(--_h); margin: 0; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; cursor: pointer; outline: none;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
:where(.calc-range)::-webkit-slider-runnable-track {
  box-sizing: border-box; height: var(--_h); border: 0; border-radius: 0; background: var(--_paint);
}
:where(.calc-range)::-moz-range-track {
  box-sizing: border-box; height: var(--_h); border: 0; border-radius: 0; background: var(--_paint);
}
:where(.calc-range)::-moz-range-progress { background: transparent; }
:where(.calc-range)::-moz-focus-outer { border: 0; }

/* The thumb, and its focus ring (the keyboard's), in every engine. */
:where(.calc-range)::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: var(--_th); height: var(--_th); margin-top: calc((var(--_h) - var(--_th)) / 2);
  border: var(--calc-thumb-edge-size, 3px) solid var(--_edge); border-radius: var(--calc-thumb-radius, var(--radius-l, 0px));
  background: var(--_face); box-shadow: var(--calc-thumb-shadow, var(--shadow-s, none)); cursor: grab;
}
:where(.calc-range)::-moz-range-thumb {
  box-sizing: border-box; width: var(--_th); height: var(--_th);
  border: var(--calc-thumb-edge-size, 3px) solid var(--_edge); border-radius: var(--calc-thumb-radius, var(--radius-l, 0px));
  background: var(--_face); box-shadow: var(--calc-thumb-shadow, var(--shadow-s, none)); cursor: grab;
}
:where(.calc-range):active::-webkit-slider-thumb { cursor: grabbing; }
:where(.calc-range):active::-moz-range-thumb { cursor: grabbing; }
:where(.calc-range):focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--calc-focus-gap, 2px) var(--_under), 0 0 0 calc(var(--calc-focus-gap, 2px) + var(--calc-focus-size, 3px)) var(--_ring);
}
:where(.calc-range):focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 var(--calc-focus-gap, 2px) var(--_under), 0 0 0 calc(var(--calc-focus-gap, 2px) + var(--calc-focus-size, 3px)) var(--_ring);
}
@supports not selector(:focus-visible) {
  :where(.calc-range):focus::-webkit-slider-thumb { box-shadow: 0 0 0 var(--calc-focus-gap, 2px) var(--_under), 0 0 0 calc(var(--calc-focus-gap, 2px) + var(--calc-focus-size, 3px)) var(--_ring); }
  :where(.calc-range):focus::-moz-range-thumb { box-shadow: 0 0 0 var(--calc-focus-gap, 2px) var(--_under), 0 0 0 calc(var(--calc-focus-gap, 2px) + var(--calc-focus-size, 3px)) var(--_ring); }
}
/* Forced colors take painted tracks away: a plain track with an edge, in the system's colors. */
@media (forced-colors: active) {
  :where(.calc-range)::-webkit-slider-runnable-track { height: var(--_t); border: 1px solid CanvasText; background: Canvas; }
  :where(.calc-range)::-webkit-slider-thumb { margin-top: calc((var(--_t) - var(--_th)) / 2 - 1px); border-color: ButtonText; background: ButtonFace; }
  :where(.calc-range)::-moz-range-track { height: var(--_t); border: 1px solid CanvasText; background: Canvas; }
  :where(.calc-range)::-moz-range-thumb { border-color: ButtonText; background: ButtonFace; }
  :where(.calc-range):focus-visible::-webkit-slider-thumb { outline: 3px solid Highlight; outline-offset: 2px; }
  :where(.calc-range):focus-visible::-moz-range-thumb { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* The scale under a track: its two ends at the track's ends, and any marks at their place (--at, 0 to 1, where the
   thumb's middle stands for that value). It never takes the hand. */
:where(.calc-scale) {
  --_th: var(--calc-thumb-size, 28px);
  grid-column: 1 / -1; position: relative; display: flex; justify-content: space-between; gap: var(--space-2, .5rem);
  min-height: 1.3em; font-family: var(--calc-font, var(--font-ui, inherit)); font-size: var(--calc-scale-size, var(--fs-small, .875rem));
  line-height: 1.3; color: var(--calc-ink-soft, var(--c-ink-soft, currentColor)); font-variant-numeric: tabular-nums lining-nums;
  pointer-events: none; user-select: none;
}
:where(.calc-scale__end) { white-space: nowrap; }
:where(.calc-scale__mark) { position: absolute; top: 0; left: calc(var(--_th) / 2 + (100% - var(--_th)) * var(--at, 0)); transform: translateX(-50%); white-space: nowrap; }

/* The year's total and the figures: each drawn as large as its knob, and never wider than its box, up to the largest
   the sliders allow (calc.js measures that width, in em, as --calc-em). Each takes the width its place gives it (a
   grid cell, a block, a flex item with a basis), never the width of its own text. */
:where(.calc-total) { container-type: inline-size; min-width: 0; margin: 0; color: var(--calc-ink, var(--c-ink, currentColor)); }
:where(.calc-total__value) {
  font-family: var(--calc-font-figure, var(--font-display, inherit)); line-height: 1;
  font-size: var(--calc-total-size, var(--fs-display, 3rem));
  font-size: min(var(--calc-total-size, var(--fs-display, 3rem)), 100cqi / var(--calc-em, 7.2));
}
:where(.calc-total__label) { display: block; }
:where(.calc-figures) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--calc-gap, var(--space-3, 1rem)); min-width: 0; }
:where(.calc-figure) { container-type: inline-size; min-width: 0; margin: 0; color: var(--calc-ink, var(--c-ink, currentColor)); }
:where(.calc-figure__value) {
  font-family: var(--calc-font-figure, var(--font-display, inherit)); line-height: 1.1;
  font-size: var(--calc-figure-size, var(--fs-h2, 2rem));
  font-size: min(var(--calc-figure-size, var(--fs-h2, 2rem)), 100cqi / var(--calc-em, 6.4));
}
:where(.calc-figure__label) { display: block; font-family: var(--calc-font, var(--font-ui, inherit)); font-size: var(--calc-label-size, var(--fs-ui, 1rem)); }
:where(.calc-month-num) { justify-items: start; }

/* The note, the picture's slot and its month marks, and the sentence for a screen reader. */
:where(.calc-note) { margin: 0; font-size: var(--calc-scale-size, var(--fs-small, .875rem)); color: var(--calc-ink-soft, var(--c-ink-soft, currentColor)); }
:where(.calc-picture) { position: relative; min-width: 0; }
:where(.calc-months) { display: var(--calc-months, none); }
:where(.calc-sr) {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}