/* ==========================================================================
   calculator.css - the interactive cost calculator embedded in article prose
   --------------------------------------------------------------------------
   Loaded only by pages that carry one, via the `css` field on the POSTS entry
   (see articleMeta in worker.js, which concatenates it onto the two sheets
   every article gets). Nothing else on the site uses these classes.

   The markup this styles lives inside an article body, where service.css
   supplies the column width and typography. Only .calc* selectors appear here
   so the two sheets cannot collide.

   !! The calculator must render and read correctly with JavaScript off. The
   !! HTML ships with the article's own worked example already in the output
   !! cells, so a no-JS reader sees a static worked example rather than empty
   !! boxes. Nothing below hides a result until script runs.
   ========================================================================== */

.calc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: var(--space-3);
  margin: var(--space-4) 0;
}

.calc__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-1);
}

.calc__intro {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
}

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

.calc__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}

.calc__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calc__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* The unit sits inside the box so the number and its unit read as one value.
   focus-within moves the ring to the wrapper, since the <input> itself has no
   visible border of its own. */
.calc__input {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  padding: 8px 10px;
}

.calc__input:focus-within {
  outline: 2px solid var(--ink-raised);
  outline-offset: 1px;
}

.calc__input input {
  border: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: var(--text-base);
  color: var(--on-light);
  background: transparent;
}

.calc__input input:focus { outline: none; }

/* Chrome and Safari's spinners make the field narrower than its content and
   are useless on a touch device, where inputmode="decimal" already gives the
   right keypad. */
.calc__input input::-webkit-outer-spin-button,
.calc__input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calc__input input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.calc__unit {
  color: var(--muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* --- results ------------------------------------------------------------ */

.calc__results {
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}

.calc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--surface);
}

.calc__row:last-of-type { border-bottom: 0; }

.calc__row--total {
  border-top: 2px solid var(--ink-raised);
  border-bottom: 0;
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.calc__row dt { color: var(--muted); font-size: var(--text-sm); margin: 0; }
.calc__row--total dt { color: var(--on-light); font-size: inherit; }

/* tabular-nums stops the total jittering horizontally as digits change. */
.calc__row dd {
  margin: 0;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc__effective {
  margin: var(--space-3) 0 0;
  padding: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.calc__effective strong { font-variant-numeric: tabular-nums; }

.calc__note {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Shown only when an input is out of range. Hidden via the `hidden` attribute
   from script, so it must not be given a competing display value here. */
.calc__warning {
  margin: var(--space-2) 0 0;
  color: var(--on-light);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

@media (max-width: 480px) {
  .calc { padding: var(--space-2); }
  .calc__fields { grid-template-columns: 1fr 1fr; }
}