/* ---------- proof ----------
   Head, then one instrument: the calculator. Sliders on one side; on the
   other, the readouts over a WebGL field where every point is a fixed number
   of minutes of the job a year. The minutes that remain after the fix stay
   white; the saved ones lift out and turn green (money only). */

.proof { padding: var(--section-y) 0; background: var(--bg); }

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "result" "inputs" "formula";
  gap: 40px;
  margin-top: clamp(56px, 6.5vw, 96px);
  padding: clamp(20px, 3.4vw, 48px);
}
.calc-result { grid-area: result; min-width: 0; }
.calc-inputs { grid-area: inputs; min-width: 0; }
.calc .formula { grid-area: formula; }

/* ---------- readouts ----------
   Labels share one line and the numerals share one baseline: each readout
   gives its label to row 1 and its value to row 2 of the same column. */

.calc-readouts {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: last baseline;
  gap: 10px clamp(28px, 3.6vw, 56px);
}
.calc-readouts .readout { display: contents; }
.calc-readouts .ro-label { grid-row: 1; }
.calc-readouts .ro-value { grid-row: 2; }
.calc-readouts .readout:nth-child(2) > * { grid-column: 2; }
.calc-readouts .readout-main > * { grid-column: 3; justify-self: end; }
.calc .ro-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--fg-3);
}
.calc .ro-value {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 480;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc .ro-value small { margin-left: 4px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--fg-2); }
.calc .readout-main .ro-value { font-size: clamp(2.75rem, 4.4vw, 4.25rem); letter-spacing: -0.035em; color: var(--gain); }
.calc .readout-main .ro-value small { color: var(--gain); }
.calc .ro-approx { margin-right: 0.12em; font-size: 0.56em; font-weight: 400; vertical-align: 0.2em; }
.calc.is-zero .ro-approx { display: none; }
.calc.is-long .readout-main .ro-value { font-size: clamp(2rem, 3.2vw, 2.75rem); }

/* ---------- the field ---------- */

.calc-field { margin-top: clamp(20px, 2.2vw, 32px); }
.field-plot { position: relative; height: clamp(224px, 22vw, 300px); }
.field-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* direct labels in the right gutter; proof.js moves them to their block */
.field-tag {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--field-gutter, 64px);
  padding-left: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg-2);
  transform: translate3d(0, var(--y, 0px), 0);
  transition: opacity 0.3s ease;
  will-change: transform;
}
.field-tag-saved { color: var(--gain); }
.field-tag.is-off { opacity: 0; }

.field-axis {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-right: var(--field-gutter, 64px);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--fg-3);
}
.field-axis b { font-weight: 500; color: var(--fg-2); }

/* no WebGL2: the same split as two dotted blocks, sized by proof.js */
.field-fallback { display: none; }
.no-webgl .field-gl { display: none; }
.no-webgl .field-fallback { display: block; position: absolute; inset: 0 var(--field-gutter, 64px) 0 0; }
.ff-saved,
.ff-kept { position: absolute; left: 0; right: 0; }
/* one dot per week column (46 across) at the field's row pitch */
.ff-kept {
  bottom: 2px;
  height: var(--kept-h, 36%);
  background: radial-gradient(circle, rgba(233, 234, 234, 0.76) 0 1px, transparent 1.4px) 0 100% / calc(100% / 46) var(--pitch, 5px);
}
.ff-saved {
  bottom: calc(var(--kept-h, 36%) + var(--lift, 14px) + 2px);
  height: var(--saved-h, 64%);
  max-height: calc(100% - var(--kept-h, 36%) - var(--lift, 14px) - 2px);
  background: radial-gradient(circle, var(--gain) 0 1px, transparent 1.4px) 0 100% / calc(100% / 46) var(--pitch, 5px);
}

/* ---------- inputs ---------- */

.calc-inputs { position: relative; display: grid; align-content: start; gap: 22px; }
.range-pair { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.range-pair legend {
  float: left;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--fg);
}
.range-pair legend + .range { clear: both; }
.range-pair .range + .range { margin-top: 22px; }

.calc .range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; }
.calc .range label { font-size: 15px; line-height: 1.35; color: var(--fg-2); }
.calc .range output { font-family: var(--mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg); }
.calc .range input { grid-column: 1 / -1; }

/* A 1px track, white up to the thumb, and a square thumb. proof.js sets --f
   (0 to 1); the white part ends at the centre of the thumb (--tv is the
   thumb's drawn width), so line and thumb always meet. */
.calc input[type="range"] {
  --f: 0.27;
  --fx: 8px;
  --tv: 13px;
  --at: calc(var(--tv) / 2 + var(--f) * (100% - var(--tv)));
  --thumb-c: var(--fg);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.calc input[type="range"]:hover { --thumb-c: #ffffff; }
.calc input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: linear-gradient(to right, var(--fg) var(--at), var(--line-2) var(--at));
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  background: var(--thumb-c);
  border: 2px solid var(--bg-1);
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--fg);
}
.calc input[type="range"]::-moz-range-track { height: 1px; background: linear-gradient(to right, var(--fg) var(--at), var(--line-2) var(--at)); }
.calc input[type="range"]::-moz-range-progress { background: transparent; }
.calc input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 0; background: var(--thumb-c); border: 2px solid var(--bg-1); box-shadow: 0 0 0 1px var(--fg); }
.calc input[type="range"]:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }

/* the value tag that rides above a moving thumb (touch only, see below) */
.calc-tip { display: none; }

/* ---------- touch: a thumb a finger can hold ----------
   iOS drags a range only when the touch starts on its thumb, so on touch the
   thumb itself is the target: a transparent 44 x 45px box that draws the
   same 15px square (ring, gap, centre). The square sits --fx into the box
   (--f of the box's spare 29px, rounded by proof.js), so it still travels
   the whole track. 45px keeps the track and the square on whole pixels.
   Narrow screens count as touch, as in base.css. */
@media (pointer: coarse), (max-width: 860px) {
  .calc input[type="range"] { --tv: 15px; height: 45px; }
  .calc input[type="range"]::-webkit-slider-thumb {
    box-sizing: border-box;
    width: 44px;
    height: 45px;
    margin-top: -22px;
    border: 0;
    box-shadow: none;
    background:
      linear-gradient(var(--thumb-c), var(--thumb-c)) calc(var(--fx) + 3px) 50% / 9px 9px no-repeat,
      linear-gradient(var(--bg-1), var(--bg-1)) calc(var(--fx) + 1px) 50% / 13px 13px no-repeat,
      linear-gradient(var(--fg), var(--fg)) var(--fx) 50% / 15px 15px no-repeat;
  }
  .calc input[type="range"]::-moz-range-thumb {
    box-sizing: border-box;
    width: 44px;
    height: 45px;
    border: 0;
    box-shadow: none;
    background:
      linear-gradient(var(--thumb-c), var(--thumb-c)) calc(var(--fx) + 3px) 50% / 9px 9px no-repeat,
      linear-gradient(var(--bg-1), var(--bg-1)) calc(var(--fx) + 1px) 50% / 13px 13px no-repeat,
      linear-gradient(var(--fg), var(--fg)) var(--fx) 50% / 15px 15px no-repeat;
  }
  /* the taller hit box makes its own air: label close above, the next one further off */
  .calc .range { row-gap: 2px; }
  .calc-inputs { row-gap: 12px; }
  .range-pair .range + .range { margin-top: 12px; }

  /* While a thumb moves, its value rides above it, clear of the finger. */
  .calc-tip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    min-width: 36px;
    padding: 5px 8px 4px;
    background: var(--fg);
    color: var(--bg);
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0;
    translate: -50% calc(-100% - 30px);
    transition: opacity 0.3s ease;
  }
  .calc-tip.is-on { opacity: 1; transition-duration: 0.08s; }

  /* field tags and scale at 12px, the phone floor */
  .field-tag { font-size: 12px; letter-spacing: 0.06em; }
  .field-axis { font-size: 12px; letter-spacing: 0.06em; }
}

/* ---------- formula and note ---------- */

.calc .formula {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.calc .formula span { display: block; }
.calc-note { margin-top: 18px; max-width: 62ch; font-size: 15px; line-height: 1.5; color: var(--fg-3); }

/* ---------- wide (1100 and up): sliders left, readouts and field right ---------- */

@media (min-width: 1100px) {
  .calc {
    grid-template-columns: minmax(250px, 0.66fr) minmax(0, 1.34fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "inputs result" "formula result";
    column-gap: clamp(40px, 5.6vw, 88px);
    row-gap: 32px;
  }
  /* the formula closes the slider column, level with the field's scale line:
     the field takes whatever height the slider column leaves it */
  .calc .formula { align-self: end; }
  .calc-result { display: flex; flex-direction: column; }
  .calc-field { display: flex; flex: 1; flex-direction: column; }
  .field-plot { flex: 1; height: auto; min-height: clamp(260px, 22vw, 300px); }
}

/* ---------- tablet (760 to 1099): field full width, sliders in two columns ---------- */

@media (min-width: 760px) and (max-width: 1099px) {
  .calc-inputs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 56px); }
  .range-pair { grid-row: span 3; margin-bottom: 0; }
}

/* ---------- phone (below 760): the money readout takes its own line ---------- */

@media (max-width: 759px) {
  .calc-readouts { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .calc-readouts .readout-main > * { grid-column: 1 / -1; justify-self: start; }
  .calc-readouts .readout-main .ro-label { grid-row: 3; margin-top: 18px; }
  .calc-readouts .readout-main .ro-value { grid-row: 4; }
}

/* Phones, and phones on their side: the sliders sit right under the
   readouts, so the figures stay in view while a thumb moves; the field
   follows them. (The readouts and the field leave .calc-result for the
   panel's own grid.) */
@media (max-width: 759px), (max-width: 1099px) and (max-height: 520px) {
  .calc { grid-template-areas: "readouts" "inputs" "field" "formula"; }
  .calc-result { display: contents; }
  .calc-readouts { grid-area: readouts; min-width: 0; }
  .calc-field { grid-area: field; min-width: 0; margin-top: 0; }
}

/* narrow phones: the scale line takes the full width, and wraps last */
@media (max-width: 560px) {
  .field-tag { padding-left: 8px; }
  .field-axis { flex-wrap: wrap; row-gap: 4px; padding-right: 0; }
  .field-axis > span:last-child { margin-left: auto; }
}