/* Hours back estimator, design language v2: a hairline worksheet. 1px track with a thin vertical handle, a tick row in
   small caps, the result as a serif italic numeral over a caption, the working as a ruled ledger. Tokens only. */
.calc {
  --calc-thumb-w: 6px;
  --calc-thumb-h: 22px;
  --calc-track: 1px;
  max-width: 44rem;
  margin-inline: auto;
  padding: var(--ix-pad);
  border: 1px solid var(--ix-hair);
  border-top-color: var(--ix-rule);
  border-radius: 0;
  background: transparent;
  color: var(--text-1);
  font-family: var(--font-sans);
}

.calc__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.15;
}

.calc p { max-width: none; }

.calc__lede,
.calc__hint,
.calc__note,
.calc__example {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.calc__lede { margin-bottom: var(--s-4); }

.calc__field {
  padding-block: var(--s-4);
  border-top: 1px solid var(--ix-hair);
}

.calc__field label {
  display: block;
  margin-bottom: var(--s-2);
  font-weight: 500;
  font-size: var(--fs-body);
}

.calc input[type="number"] {
  width: 7rem;
  min-height: 44px;
  padding: 0 var(--s-3);
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--ix-hair);
  border-radius: 0;
  font: inherit;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--ix-t-fast) var(--ix-ease);
}

.calc input[type="number"]:hover { border-color: var(--ix-rule); }
.calc input[type="number"]:focus-visible { border-color: var(--ix-blue); outline: 2px solid var(--ix-blue); outline-offset: 3px; }

.calc__hint { margin-top: var(--s-2); }

/* Enhanced layout: label and value on one line, slider and tick row under it, hint and exact entry on the last line. */
.calc--ready .calc__field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--s-4);
}

.calc--ready .calc__field label { margin-bottom: 0; }

.calc__value {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.calc__range {
  grid-column: 1 / -1;
  width: 100%;
  height: 44px;
  margin: var(--s-1) 0 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.calc__range::-webkit-slider-runnable-track { height: var(--calc-track); background: var(--text-1); }
.calc__range::-moz-range-track { height: var(--calc-track); background: var(--text-1); }

.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--calc-thumb-w);
  height: var(--calc-thumb-h);
  margin-top: calc((var(--calc-track) - var(--calc-thumb-h)) / 2);
  background: var(--text-1);
  border: 0;
  border-radius: 0;
}

.calc__range::-moz-range-thumb {
  width: var(--calc-thumb-w);
  height: var(--calc-thumb-h);
  background: var(--text-1);
  border: 0;
  border-radius: 0;
}

@media (hover: hover) {
  .calc__range:hover::-webkit-slider-thumb { background: var(--ix-blue); }
  .calc__range:hover::-moz-range-thumb { background: var(--ix-blue); }
}

.calc__range:focus-visible { outline: none; }
.calc__range:focus-visible::-webkit-slider-thumb { background: var(--ix-blue); outline: 2px solid var(--ix-blue); outline-offset: 3px; }
.calc__range:focus-visible::-moz-range-thumb { background: var(--ix-blue); outline: 2px solid var(--ix-blue); outline-offset: 3px; }

.calc__ticks {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}

.calc__ticks span::before {
  content: "";
  display: block;
  width: 1px;
  height: 6px;
  margin-bottom: var(--s-1);
  background: var(--ix-rule);
}

.calc__ticks span:nth-child(2) { text-align: center; }
.calc__ticks span:nth-child(2)::before { margin-inline: auto; }
.calc__ticks span:last-child { text-align: right; }
.calc__ticks span:last-child::before { margin-left: auto; }

.calc--ready .calc__hint { grid-column: 1 / -1; margin: 0 0 var(--s-2); }
.calc--ready .calc__or { grid-column: 1; justify-self: end; color: var(--text-3); font-size: var(--fs-meta); }
.calc--ready input[type="number"] { grid-column: 2; justify-self: end; }
.calc__or, .calc__ticks { display: none; }
.calc--ready .calc__or { display: block; }
.calc--ready .calc__ticks { display: flex; }

/* Result: a panel with the always-on edge (ix-box--edge, added by the script). */
.calc__out {
  margin-top: var(--s-4);
  padding: var(--ix-pad);
  border: 1px solid var(--ix-hair);
}

.calc__eyebrow { margin: 0; }

.calc__figure {
  margin: var(--s-2) 0 0;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--ix-t-fast) var(--ix-ease);
}

.calc__unit {
  margin: var(--s-1) 0 var(--s-5);
  transition: opacity var(--ix-t-fast) var(--ix-ease);
}

.calc__figure.is-swap,
.calc__unit.is-swap { opacity: 0; }

.calc__detail { margin-top: 0; }

.calc__line {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  column-gap: var(--s-4);
  padding-block: var(--s-3);
  align-items: baseline;
}

.calc__line dt { margin: 0; }
.calc__line dd { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--text-1); }

.calc__example { padding: var(--s-3) var(--s-4); border: 1px solid var(--ix-hair); border-radius: 0; }
.calc__note { margin-top: var(--s-4); font-style: italic; }
.calc [data-calc-cta] { margin-top: var(--s-4); }
.calc [data-calc-cta]:empty { display: none; }

@media (max-width: 639px) {
  .calc__line { grid-template-columns: 1fr; row-gap: var(--s-1); }
  .calc--ready .calc__field { column-gap: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .calc__figure, .calc__unit, .calc input[type="number"] { transition: none; }
}