/**
 * ============================================================================
 * calculator.css — .calculator BEM Block
 * ============================================================================
 *
 * PURPOSE:
 *   Core styles for ALL calculator components on the site. Every calculator
 *   page uses this same BEM block — the differences between calculators
 *   are in their templates and JS, not their styling.
 *
 * BEM STRUCTURE:
 *   .calculator                    — Outer wrapper
 *   .calculator__form              — The form containing inputs
 *   .calculator__field             — A single form field (label + input pair)
 *   .calculator__label             — Field label text
 *   .calculator__input             — Input element (text, number, select)
 *   .calculator__input--with-unit  — Input that has a unit suffix (£, %, yrs)
 *   .calculator__unit              — Unit suffix display (£, %, years)
 *   .calculator__field-group       — Row of related fields (e.g. amount + rate)
 *   .calculator__toggle            — Toggle button group (e.g. compounding freq)
 *   .calculator__toggle-btn        — Individual toggle option button
 *   .calculator__toggle-btn--active — Currently selected toggle
 *   .calculator__results           — Results panel below the form
 *   .calculator__result            — Single result item
 *   .calculator__result-value      — The big number (primary result)
 *   .calculator__result-label      — Label for the result
 *   .calculator__result--primary   — The main/hero result (larger, emphasised)
 *   .calculator__chart             — Chart container wrapper
 *   .calculator__chart-canvas      — The actual canvas element
 *
 * DESIGN DECISIONS:
 *   - Form fields use subtle 1px borders, not chunky pill shapes
 *   - Primary result is large and prominent (the hero number)
 *   - Results panel has a subtle background to separate from form
 *   - Chart has fixed aspect ratio container for responsive sizing
 *   - No heavy shadows or gradients anywhere
 *
 * ============================================================================
 */


/* ==========================================================================
 * CALCULATOR — OUTER WRAPPER
 * ========================================================================== */

.calculator {
  margin-bottom: var(--space-xl);
}


/* ==========================================================================
 * FORM — INPUT AREA
 * ========================================================================== */

.calculator__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* A single form field: label above, input below */
.calculator__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

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

/* Input wrapper — allows positioning of unit suffixes */
.calculator__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.calculator__input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background-color: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}

.calculator__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Hide browser-default number spinners — we use step attributes for
   accessibility but the visual spinners clash with unit prefix/suffix
   positioning and look inconsistent across browsers. */
.calculator__input[type="number"]::-webkit-inner-spin-button,
.calculator__input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calculator__input[type="number"] {
  -moz-appearance: textfield;
}

/* Input with a unit suffix (e.g. "%" or "yrs") — extra right padding
   so the typed number doesn't run under the unit label. */
.calculator__input--with-unit {
  padding-right: var(--space-xl);
}

/* Unit label positioned inside the input — both prefix and suffix variants.
   Pointer-events: none so clicks pass through to the input beneath. */
.calculator__unit {
  position: absolute;
  right: var(--space-sm);
  color: var(--color-text-light);
  font-size: var(--text-sm);
  pointer-events: none;
  font-weight: var(--weight-medium);
}

/* Prefix variant (e.g. £ before the number) — flip to left side.
   Keep a small inset so the symbol doesn't sit on the border. */
.calculator__unit--prefix {
  right: auto;
  left: var(--space-sm);
}

/* Input with a unit prefix (e.g. £) — generous left padding so the
   typed number never overlaps the symbol. 2xl (48px) gives a clear
   gap after the £ in all font sizes. */
.calculator__input--with-prefix {
  padding-left: var(--space-2xl);
  padding-right: var(--space-md);
}

/* Group of related fields displayed in a row (e.g. rate + term) */
.calculator__field-group {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

/* Mobile: compact 2- or 3-column layout to reduce vertical scroll */
@media (max-width: 767px) {
  .calculator__field-group {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .calculator__field-group--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 640px) {
  .calculator__field-group {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .calculator__field-group--three {
    grid-template-columns: 1fr 1fr 1fr;
  }
}


/* ==========================================================================
 * TOGGLE BUTTONS
 * ==========================================================================
 * Used for compounding frequency, repayment type, time period presets, etc.
 * A row of buttons where one is active at a time.
 * ========================================================================== */

.calculator__toggle {
  display: flex;
  gap: 0;
  border: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.calculator__toggle-btn {
  flex: 1;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  background-color: var(--color-white);
  border: none;
  border-right: var(--border);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.calculator__toggle-btn:last-child {
  border-right: none;
}

.calculator__toggle-btn:hover {
  background-color: var(--color-surface);
}

/* Active toggle state — accent-coloured background */
.calculator__toggle-btn--active {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.calculator__toggle-btn--active:hover {
  background-color: var(--color-accent);
}


/* ==========================================================================
 * RESULTS — OUTPUT PANEL
 * ==========================================================================
 * Displays calculator results. The primary result (the "big number") is
 * large and prominent. Secondary results are smaller details.
 * ========================================================================== */

.calculator__results {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-md);
}

/* Mobile: 2-column results grid, primary spans full width */
@media (max-width: 767px) {
  .calculator__results {
    grid-template-columns: repeat(2, 1fr);
  }

  .calculator__result--primary {
    grid-column: 1 / -1;
  }
}

/* Arrange results in a grid on wider screens */
@media (min-width: 768px) {
  .calculator__results {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  /* Primary result spans full width on its own row */
  .calculator__result--primary {
    grid-column: 1 / -1;
  }
}

.calculator__result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.calculator__result-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}

/* The big number — this is the hero of the calculator */
.calculator__result-value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Primary result gets extra emphasis */
.calculator__result--primary .calculator__result-value {
  font-size: var(--text-4xl);
}

/* Warning style — used for "total interest paid" type figures */
.calculator__result--warning .calculator__result-value {
  color: var(--color-warning);
}

/* Success style — used for positive results */
.calculator__result--success .calculator__result-value {
  color: var(--color-success);
}


/* ==========================================================================
 * CHART — VISUALISATION AREA
 * ==========================================================================
 * Container for Chart.js canvas elements. Fixed aspect ratio ensures
 * consistent sizing across different calculators and screen sizes.
 * ========================================================================== */

.calculator__chart {
  margin-top: var(--space-xl);
  padding: var(--space-md);
  background-color: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-md);
}

/* Fixed height container — Chart.js responsive: true handles the rest */
.calculator__chart-canvas {
  position: relative;
  height: 300px;
}

@media (min-width: 768px) {
  .calculator__chart-canvas {
    height: 360px;
  }
}


/* ==========================================================================
 * COMPARISON MODE
 * ==========================================================================
 * Side-by-side comparison layout for loan calculator etc.
 * ========================================================================== */

.calculator__comparison {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .calculator__comparison {
    grid-template-columns: 1fr 1fr;
  }
}

.calculator__comparison-panel {
  padding: var(--space-lg);
  border: var(--border);
  border-radius: var(--radius-md);
}

.calculator__comparison-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}