/* =========================================================================
   ASHLAR LENDING — Calculator Library styles
   Reuses the design tokens defined in styles.css (:root).
   ========================================================================= */

/* Jump navigation at top of the library */
.calc-index {
  background: var(--mist);
  border: 1px solid var(--mist-line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 2.5rem;
}
.calc-index h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }
.calc-index ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.calc-index a { font-weight: bold; }

/* Category band heading */
.calc-cat { margin: 3rem 0 1.25rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--gold); }
.calc-cat:first-of-type { margin-top: 0; }

/* Each calculator is a card */
.calc {
  background: #fff;
  border: 1px solid var(--mist-line);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 2rem;
  max-width: 780px;
}
.calc > h3 { margin-top: 0; font-size: 1.3rem; }
.calc__intro { color: var(--ink-soft); margin-bottom: 1.25rem; }

/* Field grid */
.calc-grid { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.calc-field { margin: 0; }
.calc-field label {
  display: block;
  font-weight: bold;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.calc-field .hint { font-size: 0.85rem; color: var(--ink-soft); margin: 0.1rem 0 0.35rem; font-weight: normal; }
.calc-field input {
  width: 100%;
  font-family: var(--font);
  font-size: 1.0625rem;
  color: var(--ink);
  padding: 0.65rem 0.75rem;
  border: 2px solid #9aa7b6;
  border-radius: var(--radius);
  background: #fff;
}
.calc-field input:focus { border-color: var(--navy); }

/* Optional-field marker */
.calc-field .opt { font-weight: normal; color: var(--ink-soft); font-size: 0.85rem; }

.calc__actions { margin-top: 1.4rem; }

/* Result box — this is the ARIA live region */
.calc-result {
  margin-top: 1.4rem;
  background: var(--mist);
  border: 1px solid var(--mist-line);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.calc-result:empty { display: none; }
.calc-result--error { border-left-color: #a12b1e; background: #fdf3f1; }
.calc-result__headline { font-size: 1.15rem; font-weight: bold; color: var(--navy); margin: 0 0 0.6rem; max-width: none; }
.calc-result--error .calc-result__headline { color: #8a2214; }
.calc-result__list { margin: 0; padding-left: 1.2rem; }
.calc-result__list li { margin-bottom: 0.3rem; }

/* Back-to-top link after each category */
.calc-top { font-size: 0.9rem; font-weight: bold; display: inline-block; margin-bottom: 1rem; }