/* ==========================================================================
   Toolbeel Finance — Reusable calculator component
   ========================================================================== */

.calculator {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  margin: var(--space-6) 0;
}

.calculator-form {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-5);
}

.calculator-field {
  display: flex;
  flex-direction: column;
}

/* Groups a subset of a calculator's fields under a labelled border — used
   when a single form covers more than one independent thing (e.g. two loan
   offers to compare side by side), so each group reads as its own unit
   instead of one long undifferentiated field list. At the 2-column form
   breakpoint, each fieldset naturally becomes one grid column. */
.calculator-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.calculator-fieldset legend {
  padding: 0 var(--space-2);
  font-weight: 600;
  color: var(--color-text);
}

.calculator-field[hidden] {
  display: none;
}

.calculator-field label {
  margin-bottom: 2px;
}

.calculator-field-hint {
  display: block;
  min-height: 1em;
  margin-bottom: var(--space-2);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-text-subtle);
  font-weight: 400;
}

.input-affix {
  position: relative;
  display: flex;
  align-items: stretch;
}

.input-affix-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.input-affix input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.input-affix-symbol.is-suffix {
  order: 2;
  border-right: 1px solid var(--color-border-strong);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* When the suffix is a <select> (e.g. a tenure unit toggle) rather than a
   static span, override the global select width/cursor so it sizes to its
   content instead of stretching to fill the input-affix row. */
select.input-affix-symbol {
  width: auto;
  cursor: pointer;
}

.input-affix.has-suffix input {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Field slider — a range input paired with the text input above it, so a
   value can be dragged into place instead of typed. Track fill (--slider-fill,
   set by wireSliders() on every value change) shows progress up to the thumb. */
.field-slider {
  --slider-fill: 0%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  padding: 0;
  margin: var(--space-2) 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--color-primary) var(--slider-fill),
    var(--color-border) var(--slider-fill)
  );
  outline-offset: 6px;
}

.field-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25), 0 1px 8px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.field-slider::-webkit-slider-thumb:hover,
.field-slider::-webkit-slider-thumb:active {
  transform: scale(1.08);
}

.field-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25), 0 1px 8px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.field-slider::-moz-range-thumb:hover,
.field-slider::-moz-range-thumb:active {
  transform: scale(1.08);
}

.field-slider::-moz-range-track {
  height: 4px;
  background: var(--color-border);
  border-radius: 999px;
}

.field-slider::-moz-range-progress {
  height: 4px;
  background: var(--color-primary);
  border-radius: 999px;
}

.calculator-actions {
  display: flex;
  gap: var(--space-3);
  grid-column: 1 / -1;
}

.calculator-actions .btn {
  flex: 1;
}

.calculator-error {
  color: var(--color-danger);
  background: var(--color-danger-light);
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
}

.calculator-error[hidden] {
  display: none;
}

/* Results
   ========================================================================== */
.calculator-results {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}

.calculator-results[hidden] {
  display: none;
}

/* Empty-state placeholder shown below the form before a first calculation.
   Always in the markup; CSS alone decides whether it or the real results
   show. */
.calculator-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 140px;
  margin-top: var(--space-5);
  padding: var(--space-6);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-subtle);
}

.calculator:has(.calculator-results:not([hidden])) .calculator-placeholder {
  display: none;
}

.results-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-5);
}

.result-tile {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.result-tile.is-primary {
  background: var(--color-primary-light);
  border: 1px solid #bfdbfe;
}

.result-tile-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.result-tile-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
}

.result-tile.is-primary .result-tile-value {
  color: var(--color-primary-dark);
}

.calculator-result-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.calculator-result-actions .btn {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.copy-feedback {
  font-size: 0.85rem;
  color: var(--color-success);
}

.copy-feedback[hidden] {
  display: none;
}

/* Donut chart
   ========================================================================== */
.calculator-chart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.donut-chart {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.chart-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 160px;
}

.chart-legend li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
}

.chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-legend-label {
  color: var(--color-text-muted);
  flex: 1;
}

.chart-legend-value {
  font-weight: 600;
  color: var(--color-text);
}

/* Amortization / schedule tables
   ========================================================================== */
.schedule-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.schedule-table {
  min-width: 480px;
  font-size: 0.9rem;
}

.schedule-table th,
.schedule-table td {
  padding: var(--space-2) var(--space-3);
  text-align: right;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.schedule-table th:first-child,
.schedule-table td:first-child {
  text-align: left;
}

.calculator-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
}

/* Cash-flow row editor — a variable-length list of date/amount entries, used
   by calculators (XIRR, and any future IRR-style tool) where the number of
   inputs isn't fixed in advance, unlike every other calculator's fixed field
   set. Deliberately outside .calculator-form's 5-row subgrid, since rows
   here don't share that fixed field/hint/input/slider/error shape. */
.cashflow-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.cashflow-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.cashflow-row-field {
  display: flex;
  flex-direction: column;
}

.cashflow-row-field label {
  margin-bottom: 2px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.cashflow-remove-btn {
  justify-self: start;
}

.cashflow-add-btn {
  align-self: flex-start;
}

@media (min-width: 640px) {
  .cashflow-row {
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items: end;
  }

  .calculator-form {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Each field spans label / hint / input / slider / error as its own
     subgrid row group, so two fields side by side always line up —
     regardless of whether one has a longer hint, no slider, or a
     validation error the other doesn't. The 5th row collapses to 0
     height when no .field-error-message is present. */
  .calculator-field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
  }

  .results-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (min-width: 768px) {
  .calculator {
    padding: var(--space-7);
  }
}

/* Print / "Download PDF"
   ==========================================================================
   Triggered by the shared [data-action="print"] button (window.print()) or
   directly by the browser's own print command. Keeps only what identifies
   the result — the page heading/intro and the calculator itself — and drops
   site chrome, the ad slot, and the long-form article below the calculator
   (identified as the .content-block with no H1, since every page has
   exactly one H1 and it always sits in the intro block). */
@media print {
  .site-header,
  .site-footer,
  .breadcrumb,
  .ad-slot,
  .skip-link,
  .calculator-actions,
  .calculator-result-actions,
  .copy-feedback,
  .field-slider {
    display: none !important;
  }

  .content-block:not(:has(h1)) {
    display: none !important;
  }

  .calculator {
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .schedule-table-wrap {
    overflow-x: visible;
  }
}