/*
 * calculators.css - Renegade Home Mortgage
 *
 * Shared design language for the native calculator suite. Extends the tokens in
 * style.css; defines no colors of its own beyond the two accent tints, so both
 * [data-theme="dark"] (the default) and [data-theme="light"] work without
 * a second set of rules.
 */

/* ------------------------------------------------------------------ tabs */

.calc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: var(--space-4);
}

.calc-tab {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-interactive);
  transition-property: color, background-color, border-color;
}

.calc-tab:hover {
  color: var(--color-text);
  border-color: var(--color-text-faint);
}

.calc-tab[aria-selected="true"] {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #FFFFFF;
}

.calc-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ---------------------------------------------------------------- panels */

.calc-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
}

.calc-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.calc-panel__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  max-width: 62ch;
}

.calc-panel[hidden] { display: none; }

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

.calc-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.calc-inputs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.calc-input label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.calc-input__wrap { position: relative; }

.calc-input__prefix,
.calc-input__suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-weight: 500;
  pointer-events: none;
  font-size: var(--text-base);
}

.calc-input__prefix { left: var(--space-4); }
.calc-input__suffix { right: var(--space-4); }

.calc-input input,
.calc-input select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

/* Make room for the adornments only where they exist. */
.calc-input__wrap--money input { padding-left: var(--space-8); }
.calc-input__wrap--pct input { padding-right: var(--space-8); }

.calc-input select {
  font-size: var(--text-base);
  cursor: pointer;
}

.calc-input input:focus,
.calc-input select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Strip the spinner so the field reads as a formatted figure, not a stepper. */
.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; }

/* Muted, not faint: --color-text-faint measures 3.58:1 on dark and 2.25:1 on
   light, under the 4.5:1 AA floor, and these hints carry the "this is an
   illustration, not a rate offer" language that has to be readable. */
.calc-input__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Secondary row: taxes, insurance, HOA. Same controls, quieter. */
.calc-inputs--secondary {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}

.calc-inputs--secondary .calc-input input,
.calc-inputs--secondary .calc-input select {
  font-size: var(--text-base);
}

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

.calc-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.calc-result-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.calc-result-card--primary { border-top: 3px solid var(--color-primary); }
.calc-result-card--good { border-top: 3px solid var(--color-success); }

.calc-result-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* The one number the page exists to produce. */
.calc-headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.calc-headline--good { color: var(--color-success); }

.calc-headline__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}

.calc-result-row:last-child { border-bottom: none; }

.calc-result-row--total {
  border-top: 1px solid var(--color-border);
  border-bottom: none;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
}

.calc-result-row__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.calc-result-row__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  white-space: nowrap;
}

.calc-result-row--total .calc-result-row__label,
.calc-result-row--total .calc-result-row__value {
  font-size: var(--text-lg);
  color: var(--color-text);
  font-weight: 700;
}

/* ------------------------------------------------------------- highlight */

.calc-savings {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-8);
}

.calc-savings__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.calc-savings__item-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-success);
  line-height: 1.1;
}

.calc-savings__item-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Status pill: conforming vs jumbo, DTI verdict, break-even verdict. */
.calc-flag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-top: var(--space-3);
}

.calc-flag--ok {
  background: rgba(52, 211, 153, 0.12);
  color: var(--color-success);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.calc-flag--warn {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid rgba(230, 57, 70, 0.3);
}

/* ----------------------------------------------------------------- chart */

.calc-chart {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
}

.calc-chart__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.calc-chart__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.calc-chart__legend {
  display: flex;
  gap: var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.calc-chart__legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: var(--space-2);
  vertical-align: middle;
}

.calc-chart canvas {
  display: block;
  width: 100%;
  height: 320px;
}

/* ------------------------------------------------- worked example / table */

.calc-example {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-8);
}

.calc-example__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.calc-example__intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  max-width: 70ch;
}

.calc-example table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.calc-example th,
.calc-example td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}

.calc-example th {
  color: var(--color-text-muted);
  font-weight: 600;
}

.calc-example td:last-child,
.calc-example th:last-child {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  white-space: nowrap;
}

.calc-example tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------ disclaimer */

.calc-disclaimer {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: var(--space-8) 0;
}

/* ------------------------------------------------------------ responsive */

/* Tablet: two fields per row. One-per-row here would double the scroll
   distance to the result card for no reason. */
@media (max-width: 900px) {
  .calc-inputs,
  .calc-inputs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-results { grid-template-columns: minmax(0, 1fr); }
  .calc-panel { padding: var(--space-6); }
}

@media (max-width: 600px) {
  .calc-inputs,
  .calc-inputs--2 { grid-template-columns: minmax(0, 1fr); }
  .calc-savings__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }

  /* A horizontally scrolling strip hid the last two calculators entirely with
     no affordance, so all four get a fixed 2x2 grid instead. */
  .calc-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .calc-tab {
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-xs);
    text-align: center;
  }

  .calc-headline { font-size: var(--text-2xl); }
  .calc-chart canvas { height: 240px; }
  .calc-chart,
  .calc-savings { padding: var(--space-5); }
  .calc-example { padding: var(--space-4); overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .calc-tab { transition: none; }
}