/* =============================================================
 * calculator.css — Calculator page styles
 * Depends on: tokens.css, base.css
 * Mobile-first responsive design.
 * ============================================================= */

/* ---------- Calculator hero (dark band) ---------- */
.calc-hero {
  background: var(--jy-bg-primary);
  padding: var(--sp-10) 0 var(--sp-8);
  border-bottom: 1px solid var(--jy-border);
}

.calc-hero__breadcrumb {
  font-size: var(--text-xs);
  color: var(--jy-text-tertiary);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.calc-hero__breadcrumb a {
  color: var(--jy-text-tertiary);
  transition: color 0.15s;
  text-decoration: none;
}

.calc-hero__breadcrumb a:hover { color: var(--jy-accent); }
.calc-hero__breadcrumb a:focus-visible {
  outline: 2px solid var(--jy-focus-ring-on-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

.calc-hero__tag-row {
  margin-bottom: var(--sp-4);
}

.calc-hero__tag {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--jy-accent);
  background: var(--jy-accent-bg);
  border: 1px solid var(--jy-accent-subtle);
  border-radius: var(--r-full);
  padding: 4px 12px;
}

.calc-hero__h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--jy-text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}

.calc-hero__lead {
  font-size: var(--text-lg);
  color: var(--jy-text-secondary);
  max-width: 600px;
  line-height: 1.55;
}

/* ---------- Calculator article (warm bg) ---------- */
.calc-article {
  background: var(--warm-bg);
  padding: var(--sp-10) 0 var(--sp-16);
}

.calc-section__h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--warm-text);
  margin-bottom: var(--sp-5);
  margin-top: var(--sp-10);
  padding-top: var(--sp-2);
}

.calc-section__h2:first-child {
  margin-top: 0;
}

/* ---------- Form ---------- */
.calc-input-section {
  background: var(--warm-card);
  border: 1px solid var(--warm-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

.calc-form__row {
  margin-bottom: var(--sp-5);
}

.calc-form__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--warm-text);
  margin-bottom: var(--sp-2);
}

.calc-form__unit {
  font-weight: 400;
  color: var(--warm-text-3);
}

.calc-form__input,
.calc-form__select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--warm-text);
  background: var(--warm-bg);
  border: 1.5px solid var(--warm-border);
  border-radius: var(--r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.calc-form__input:focus,
.calc-form__select:focus {
  outline: none;
  border-color: var(--jy-accent);
  box-shadow: 0 0 0 3px var(--jy-accent-bg);
}

.calc-form__input--short {
  max-width: 140px;
}

.calc-form__hint {
  font-size: var(--text-xs);
  color: var(--warm-text-3);
  margin-top: var(--sp-1);
}

.calc-form__submit {
  margin-top: var(--sp-4);
  width: 100%;
  font-size: var(--text-base);
  padding: var(--sp-4) var(--sp-8);
}

@media (min-width: 480px) {
  .calc-form__submit { width: auto; min-width: 180px; }
}

/* ---------- Result section ---------- */
.calc-result {
  background: var(--warm-card);
  border: 1px solid var(--warm-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

/* Result band cards */
.result-band {
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  border-left: 4px solid;
}

.result-band h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.result-band-normal {
  background: var(--color-green-bg);
  border-color: var(--color-green);
  color: var(--color-green);
}
.result-band-normal p { color: var(--warm-text); }

.result-band-borderline {
  background: var(--color-amber-bg);
  border-color: var(--color-amber);
  color: var(--color-amber);
}
.result-band-borderline p { color: var(--warm-text); }

.result-band-moderate {
  background: var(--color-amber-dark-bg);
  border-color: var(--color-amber-dark);
  color: var(--color-amber-dark);
}
.result-band-moderate p { color: var(--warm-text); }

.result-band-significant {
  background: #fff3e0;
  border-color: #e65100;
  color: #e65100;
}
.result-band-significant p { color: var(--warm-text); }

.result-band-critical {
  background: var(--color-red-bg);
  border-color: var(--color-red);
  color: var(--color-red-text);
}
.result-band-critical p { color: var(--warm-text); }

.result-band .action {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  background: rgba(0,0,0,0.04);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}

.result-band .link {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
}

.result-band .link a {
  color: inherit;
  text-decoration: underline;
}

/* ---------- Bands table ---------- */
.calc-bands-section {
  margin-top: var(--sp-10);
}

.calc-bands__intro {
  color: var(--warm-text-2);
  margin-bottom: var(--sp-5);
  font-size: var(--text-sm);
}

.calc-bands__table-wrapper {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--warm-border);
  box-shadow: var(--shadow-sm);
}

.calc-bands__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--warm-card);
}

.calc-bands__table th {
  background: var(--jy-bg-elevated);
  color: var(--jy-text-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--jy-border);
}

.calc-bands__table td {
  padding: var(--sp-4);
  vertical-align: top;
  border-bottom: 1px solid var(--warm-divider);
  color: var(--warm-text);
  line-height: 1.5;
}

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

/* Band row color coding */
.calc-bands__table .band-row--normal td:first-child { color: var(--color-green); font-weight: 600; }
.calc-bands__table .band-row--borderline td:first-child { color: var(--color-amber); font-weight: 600; }
.calc-bands__table .band-row--moderate td:first-child { color: var(--color-amber-dark); font-weight: 600; }
.calc-bands__table .band-row--significant td:first-child { color: #e65100; font-weight: 600; }
.calc-bands__table .band-row--critical td:first-child { color: var(--color-red-text); font-weight: 600; }

/* Active band highlight (set by JS) */
.calc-bands__table .band-row--active {
  background: var(--jy-accent-bg);
}

/* ---------- CTA ---------- */
.calc-cta {
  background: var(--jy-bg-card);
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-8);
  text-align: center;
  margin-top: var(--sp-10);
  border: 1px solid var(--jy-border);
}

.calc-cta .calc-section__h2 {
  color: var(--jy-text-primary);
}

.calc-cta__disclaimer {
  font-size: var(--text-xs);
  color: var(--jy-text-tertiary);
  margin-top: var(--sp-4);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Related links ---------- */
.calc-related {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--warm-divider);
}

.calc-related__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.calc-related__list li a {
  color: var(--jy-accent);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: text-decoration 0.1s;
}

.calc-related__list li a:hover {
  text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .calc-hero { padding: var(--sp-16) 0 var(--sp-10); }
  .calc-hero__h1 { font-size: var(--text-5xl); }
  .calc-input-section { padding: var(--sp-10) var(--sp-8); }
}

/* ---------- Utility ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ---------- Calculator link banner (injected into marker pages) ---------- */
.calc-link-banner {
  background: var(--jy-accent-bg);
  border-top: 1px solid var(--jy-accent-subtle);
  border-bottom: 1px solid var(--jy-accent-subtle);
  padding: var(--sp-4) 0;
}

.calc-link-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.calc-link-banner__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.calc-link-banner__heading {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--jy-accent);
}

.calc-link-banner__desc {
  font-size: var(--text-xs);
  color: var(--jy-text-secondary);
}

.calc-link-banner__btn {
  white-space: nowrap;
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-5);
  flex-shrink: 0;
}