/* Almeer Securities — Compounding Calculator
   Built entirely on the existing design tokens (tokens.css) so the component
   inherits both the light theme and the dark theme with no extra work. */

#calc { --calc-gap: var(--sp-4); }

#calc :is(input, select, button) { font-family: inherit; }
#calc .calc-num,
#calc .calc-tile__value,
#calc .calc-table td,
#calc .calc-table th[scope="row"] { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- form */
.calc-panel {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--calc-gap);
}
@media (min-width: 560px) { .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .calc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.calc-field { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }

.calc-field > label,
.calc-fieldset > legend {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-heading);
  letter-spacing: .01em;
}

.calc-hint { font-size: var(--fs-xs); color: var(--color-text-subtle); margin: 0; }

.calc-input-wrap { position: relative; display: flex; align-items: center; }
.calc-input-wrap__prefix,
.calc-input-wrap__suffix {
  position: absolute;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  pointer-events: none;
}
.calc-input-wrap__prefix { inset-inline-start: 12px; }
.calc-input-wrap__suffix { inset-inline-end: 12px; }
#calc .calc-input-wrap--prefix input[type="number"] { padding-inline-start: 38px; }
#calc .calc-input-wrap--suffix input[type="number"] { padding-inline-end: 34px; }

/* The site already styles input/select globally (main.css uses !important on the
   background), so we inherit that skin and only reserve room for the Rs / % adornments. */
#calc input[type="number"],
#calc select { width: 100%; min-width: 0; }

#calc input[type="number"]:focus-visible,
#calc select:focus-visible,
#calc button:focus-visible {
  outline: 2px solid var(--color-heading-rule);
  outline-offset: 2px;
}

#calc .calc-field.is-invalid input,
#calc .calc-field.is-invalid select { border-color: var(--color-error); }

.calc-error {
  font-size: var(--fs-xs);
  color: var(--color-error);
  min-height: 1.1em;   /* reserved — stops the grid jumping when a message appears */
  margin: 0;
}

/* toggle ------------------------------------------------------------------ */
.calc-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.calc-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-md);
}
.calc-toggle__btn {
  padding: 8px 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: calc(var(--r-md) - 4px);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.calc-toggle__btn[aria-pressed="true"] {
  background: var(--color-heading-rule);
  color: #062A1A;
  font-weight: var(--fw-semi);
}

.calc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.calc-actions .calc-live { font-size: var(--fs-xs); color: var(--color-text-subtle); margin: 0; }

.calc-form-error { font-size: var(--fs-sm); color: var(--color-error); min-height: 1.2em; margin: var(--sp-3) 0 0; }

/* ---------------------------------------------------------------- results */
.calc-results { margin-top: var(--sp-7); min-height: 320px; }   /* reserved, no layout shift */

.calc-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
@media (min-width: 760px) { .calc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.calc-tile {
  min-width: 0;
  padding: var(--sp-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
}
.calc-tile__label {
  margin: 0 0 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.calc-tile__value {
  margin: 0;
  font-size: clamp(1.05rem, 3.4vw, 1.45rem);
  font-weight: var(--fw-semi);
  color: var(--color-heading);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.calc-tile__value.is-pos { color: var(--color-success); }
.calc-tile__value.is-neg { color: var(--color-error); }

/* chart ------------------------------------------------------------------- */
.calc-chart-wrap {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
}
.calc-chart svg { display: block; width: 100%; height: auto; }
.calc-chart__grid { stroke: var(--color-border); stroke-width: 1; }
.calc-chart__ylab,
.calc-chart__xlab {
  fill: var(--color-text-subtle);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.calc-chart__ylab { text-anchor: end; }
.calc-chart__xlab { text-anchor: middle; }
.calc-chart__line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.calc-chart__line--val { stroke: var(--color-heading-rule); }
.calc-chart__line--inv { stroke: var(--color-text-muted); stroke-dasharray: 5 4; stroke-width: 1.8; }
.calc-chart__area { fill: var(--color-heading-rule); opacity: .10; stroke: none; }

.calc-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.calc-legend li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--color-text-muted); }
.calc-legend .calc-swatch { width: 18px; height: 0; border-top: 3px solid var(--color-heading-rule); border-radius: 2px; flex: none; }
.calc-legend .calc-swatch--inv { border-top: 2px dashed var(--color-text-muted); }

/* table ------------------------------------------------------------------- */
.calc-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
}
.calc-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--fs-sm); }
.calc-table caption {
  caption-side: top;
  text-align: start;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.calc-table th, .calc-table td { padding: 10px 14px; text-align: end; white-space: nowrap; }
.calc-table thead th {
  position: sticky; top: 0;
  background: var(--color-bg-tint);
  color: var(--color-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--color-border-strong);
}
.calc-table th:first-child, .calc-table td:first-child { text-align: start; }
.calc-table tbody th[scope="row"] { color: var(--color-heading); font-weight: var(--fw-semi); }
.calc-table tbody tr + tr th, .calc-table tbody tr + tr td { border-top: 1px solid var(--color-border); }
.calc-table tbody tr:nth-child(even) th,
.calc-table tbody tr:nth-child(even) td { background: var(--color-bg-alt); }
.calc-table .is-pos { color: var(--color-success); }
.calc-table .is-neg { color: var(--color-error); }

/* no-JS -------------------------------------------------------------------- */
.calc-nojs {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--color-text);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--r-md);
}
#calc.is-ready .calc-placeholder { display: none; }
.calc-placeholder { color: var(--color-text-subtle); font-size: var(--fs-sm); }

@media (prefers-reduced-motion: reduce) {
  #calc * { transition: none !important; }
}