/* ==========================================================================
   Loan repayment calculator (loan-calculator.html)

   The summary panel is deliberately dark — it is the figure the visitor came
   for, and the contrast is what makes it read as the answer rather than as
   another field. Its colours are therefore fixed rather than tokens.
   ========================================================================== */

.lcalc {
  --lc-principal: #34d399;
  --lc-interest: var(--clr-accent);
}

.lcalc__header {
  max-width: 44rem;
  margin-bottom: var(--space-2xl, 3rem);
}

.lcalc__title {
  margin: 0.5rem 0 0;
  color: var(--clr-ink);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.lcalc__intro {
  margin: 0.75rem 0 0;
  color: var(--clr-muted);
  line-height: 1.6;
}

.lcalc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.lcalc__params {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  background: var(--clr-white);
}

.lcalc__sub {
  margin: 0 0 1.25rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-ink);
  font-size: 1rem;
  font-weight: var(--fw-bold);
}

.lcalc__sub--dark {
  border-bottom-color: rgba(255, 255, 255, 0.14);
  color: var(--clr-white);
}

/* ---- Parameters ---- */

.lcalc__field {
  margin-bottom: 1.5rem;
}

.lcalc__field:last-child {
  margin-bottom: 0;
}

.lcalc__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.lcalc__label {
  color: var(--clr-ink);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
}

.lcalc__select {
  width: 100%;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.75rem;
  background: var(--clr-white);
  color: var(--clr-ink);
  font: inherit;
  font-size: 0.9375rem;
}

.lcalc__help {
  display: block;
  margin-top: 0.5rem;
  color: var(--clr-muted);
  font-size: 0.8125rem;
}

.lcalc__box {
  display: flex;
  align-items: center;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--clr-white);
}

.lcalc__box:focus-within {
  border-color: var(--clr-primary);
}

.lcalc__box-unit {
  padding: 0.5rem 0.625rem;
  background: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
}

.lcalc__box-unit--after {
  border-left: 1px solid var(--clr-border);
}

.lcalc__input {
  width: 8rem;
  border: none;
  background: none;
  padding: 0.5rem 0.625rem;
  color: var(--clr-ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  text-align: right;
}

.lcalc__input--sm {
  width: 4rem;
}

.lcalc__input:focus {
  outline: none;
}

.lcalc__range {
  width: 100%;
  margin: 0;
  accent-color: var(--clr-primary);
  cursor: pointer;
}

.lcalc__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.375rem;
  color: var(--clr-muted);
  font-size: 0.75rem;
}

/* ---- Summary ---- */

.lcalc__summary {
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  background: linear-gradient(160deg, #10241a, #06120c);
  color: var(--clr-white);
}

.lcalc__big {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.lcalc__biglabel {
  margin: 0.375rem 0 1.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lcalc__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.lcalc__tile {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 0.875rem;
  background: rgba(255, 255, 255, 0.04);
}

.lcalc__tile--wide {
  grid-column: 1 / -1;
}

.lcalc__tile span {
  display: block;
  margin-bottom: 0.3125rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lcalc__tile strong {
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
}

/* ---- Donut ---- */

.lcalc__chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.lcalc__donut {
  position: relative;
  display: grid;
  place-items: center;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  /* --lc-split is the principal share, set by js/loan-calculator.js. */
  background: conic-gradient(
    var(--lc-principal) 0 var(--lc-split, 100%),
    var(--lc-interest) var(--lc-split, 100%) 100%
  );
}

.lcalc__donut::after {
  content: "";
  position: absolute;
  width: 4.625rem;
  height: 4.625rem;
  border-radius: 50%;
  background: #0b1a12;
}

.lcalc__donut-value {
  position: relative;
  z-index: 1;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
}

.lcalc__legend {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
}

.lcalc__legend b {
  color: var(--clr-white);
}

.lcalc__dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4375rem;
  border-radius: 50%;
}

.lcalc__dot--principal {
  background: var(--lc-principal);
}

.lcalc__dot--interest {
  background: var(--lc-interest);
}

.lcalc__note {
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  line-height: 1.55;
  text-align: center;
}

@media (max-width: 60rem) {
  .lcalc__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 30rem) {
  .lcalc__row {
    flex-wrap: wrap;
  }

  .lcalc__input {
    width: 6.5rem;
  }
}

/* ---- Detailed amortization schedule ---- */

.lcalc__sched {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background-color: var(--clr-white);
}

.lcalc__sched-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.lcalc__sched-title {
  margin: 0 0 0.375rem;
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
}

.lcalc__sched-sub {
  margin: 0;
  max-width: 34rem;
  color: var(--clr-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.lcalc__sched-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lcalc__sched-csv svg {
  width: 1rem;
  height: 1rem;
  margin-right: 0.375rem;
  vertical-align: -0.1875rem;
}

/* The panel scrolls in both directions: eight columns are wider than a phone,
   and a 36-month term is longer than the screen. Capping the height keeps the
   sliders above it reachable without scrolling back past the whole table. */
.lcalc__sched-panel {
  max-height: 26rem;
  margin-top: 1.5rem;
  overflow: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
}

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

.lcalc-sched {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.lcalc-sched th,
.lcalc-sched td {
  padding: 0.6875rem 0.875rem;
  text-align: right;
  white-space: nowrap;
}

.lcalc-sched thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--clr-surface);
  color: var(--clr-muted);
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 -1px 0 var(--clr-border);
}

.lcalc-sched thead th:first-child,
.lcalc-sched tbody th,
.lcalc-sched tfoot th {
  text-align: left;
}

.lcalc-sched tbody th {
  color: var(--clr-muted);
  font-weight: var(--fw-semibold);
}

.lcalc-sched tbody tr + tr th,
.lcalc-sched tbody tr + tr td {
  border-top: 1px solid var(--clr-border);
}

.lcalc-sched tbody tr:nth-child(even) th,
.lcalc-sched tbody tr:nth-child(even) td {
  background-color: rgba(16, 33, 24, 0.02);
}

.lcalc-sched tfoot th,
.lcalc-sched tfoot td {
  position: sticky;
  bottom: 0;
  background-color: var(--clr-surface);
  font-weight: var(--fw-bold);
  box-shadow: inset 0 1px 0 var(--clr-border);
}

@media (max-width: 40rem) {
  .lcalc__sched-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lcalc__sched-actions {
    width: 100%;
  }

  .lcalc__sched-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .lcalc-sched th,
  .lcalc-sched td {
    padding: 0.5rem;
  }
}