/* The "time saved" calculator: two sliders and a result box. */

.calc {
  display: grid;
  gap: var(--space-6);
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.field + .field {
  margin-top: var(--space-6);
}

/* Label on the left, current value on the right. */
.field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.field label {
  font-weight: 600;
}

.field-value {
  flex: none;
  color: var(--color-brand-strong);
  font-weight: 700;
  /* Every digit gets the same width, so the text does not wobble as it changes. */
  font-variant-numeric: tabular-nums;
}

/* The native slider already works with the keyboard and with screen readers.
   accent-color paints it in the brand color with a single line. */
.field input[type="range"] {
  width: 100%;
  height: 2.75rem;
  accent-color: var(--color-brand);
  cursor: pointer;
}

.calc-result {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-brand-soft);
  text-align: center;
}

.calc-result > * + * {
  margin-top: var(--space-3);
}

.calc-label {
  font-weight: 600;
}

/* <output> holds the big number and its unit. */
.calc-number {
  display: block;
  color: var(--color-brand-strong);
  font-size: var(--text-lg);
  font-weight: 600;
}

.calc-figure {
  display: block;
  font-size: var(--text-3xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Wide screens: sliders left, result right. */
@media (min-width: 52rem) {
  .calc {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-7);
  }
}