/* ================================================
   CALCULATOR ECOSYSTEM — Design system extension
   Load after main.css on tools/calculator pages only.
   Extends glass-card, bento-item, floating-stat, bento-ring.
   ================================================ */

/* ─── 1. Slider ─── */
.calculator-slider {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.calculator-slider__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.calculator-slider__label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
  line-height: 1.4;
}

.calculator-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--touch);
  margin: 0;
  padding: calc((var(--touch) - 0.5rem) / 2) 0;
  background: transparent;
  cursor: pointer;
}

.calculator-slider input[type="range"]:focus {
  outline: none;
}

.calculator-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 0.5rem;
  background: var(--color-gray-100);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), background var(--transition-theme);
}

.calculator-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: calc((0.5rem - 1.25rem) / 2);
  background: var(--color-midnight-light);
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 calc((var(--touch) - 1.25rem) / 2) transparent;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.calculator-slider input[type="range"]:hover::-webkit-slider-thumb {
  border-color: var(--color-gold-light);
}

.calculator-slider input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.08);
}

.calculator-slider input[type="range"]:focus-visible::-webkit-slider-runnable-track {
  border-color: var(--color-gold);
  background: var(--form-input-focus);
}

.calculator-slider input[type="range"]::-moz-range-track {
  height: 0.5rem;
  background: var(--color-gray-100);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}

.calculator-slider input[type="range"]::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-midnight-light);
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 calc((var(--touch) - 1.25rem) / 2) transparent;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.calculator-slider input[type="range"]:hover::-moz-range-thumb {
  border-color: var(--color-gold-light);
}

.calculator-slider input[type="range"]:focus-visible::-moz-range-track {
  border-color: var(--color-gold);
}

[data-theme="light"] .calculator-slider input[type="range"]::-webkit-slider-thumb,
[data-theme="light"] .calculator-slider input[type="range"]::-moz-range-thumb {
  background: var(--color-midnight-light);
  border-color: var(--color-gold-dark);
}

[data-theme="light"] .calculator-slider input[type="range"]:hover::-webkit-slider-thumb,
[data-theme="light"] .calculator-slider input[type="range"]:hover::-moz-range-thumb {
  border-color: var(--color-gold);
}

/* ─── 2. Value badge (slider companion) ─── */
.calculator-value-badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
  background: var(--color-midnight-light);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

[data-theme="light"] .calculator-value-badge {
  color: var(--color-midnight-light);
  background: var(--color-navy);
  border-color: var(--glass-border-gold);
}

/* ─── 3. Results card (.glass-card variant) ─── */
.calculator-results.glass-card {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.calculator-results__header {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-xs);
}

.calculator-results__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.calculator-results__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--glass-border);
}

.calculator-results__row:last-child {
  border-bottom: none;
}

.calculator-results__row-label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-gray-500);
}

.calculator-results__row-value {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-white);
  text-align: right;
}

.calculator-results__total {
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--glass-border-gold);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.calculator-results__total-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.calculator-results__total-value {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .calculator-results__total-value {
  background: var(--floating-stat-gold);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ─── 4. Stat strip (extends .floating-stat) ─── */
.calculator-stat-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.calculator-stat-strip .floating-stat {
  min-width: 0;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
}

@media (min-width: 768px) {
  .calculator-stat-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

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

@media (min-width: 1024px) {
  .calculator-stat-strip--four {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ─── 5. Gauge (extends .bento-ring from main.css) ─── */
.calculator-gauge {
  position: relative;
  width: min(100%, 9rem);
  margin: 0 auto var(--space-md);
}

.calculator-gauge .bento-ring {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
}

.calculator-gauge .bento-ring svg {
  display: block;
  width: 100%;
  height: 100%;
}

.calculator-gauge .bento-ring-progress {
  stroke-dashoffset: calc(283 - (283 * var(--calculator-gauge-pct, 0) / 100));
  transition: stroke-dashoffset var(--transition-medium);
}

.calculator-gauge .bento-ring-value {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
}

@media (min-width: 768px) {
  .calculator-gauge {
    width: min(100%, 11rem);
  }
}

/* ─── 6. Breakdown bars (insights-progress visual language) ─── */
.calculator-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.calculator-breakdown__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xs) var(--space-sm);
  align-items: center;
}

.calculator-breakdown__label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

.calculator-breakdown__pct {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gray-700);
}

.calculator-breakdown__track {
  grid-column: 1 / -1;
  height: 0.5rem;
  background: var(--color-gray-100);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.calculator-breakdown__fill {
  display: block;
  height: 100%;
  width: var(--calculator-bar-pct, 0%);
  background: var(--gold-gradient);
  border-radius: var(--radius-sm);
  transition: width var(--transition-medium);
}

/* ─── 7. Currency-prefix input ─── */
.calculator-input--currency {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--touch);
  background: var(--form-input-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), background var(--transition-theme);
}

.calculator-input--currency:focus-within {
  border-color: var(--color-gold);
  background: var(--form-input-focus);
}

.calculator-input__prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: var(--touch);
  padding: 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-700);
  background: var(--color-gray-100);
  border-right: 1px solid var(--glass-border);
  line-height: 1;
}

.calculator-input--currency .form-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: var(--touch);
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.calculator-input--currency .form-input:focus {
  outline: none;
  border: none;
  background: transparent;
}

/* ─── 8. Savings callout ─── */
.calculator-savings {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-gold);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 0 var(--glass-edge-highlight);
}

.calculator-savings__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-gray-700);
}

.calculator-savings__amount {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-gold);
  white-space: nowrap;
}

[data-theme="light"] .calculator-savings {
  background: var(--color-gray-100);
}

/* ─── 9. Form success / error messages ─── */
.calculator-form-message {
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
}

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

.calculator-form-message--success {
  color: var(--color-white);
  background: var(--glass-bg);
  border-color: var(--glass-border-gold);
}

.calculator-form-message--success .audit-intake-block__title {
  margin-bottom: var(--space-xs);
}

/* ERROR — uses shared --color-danger (main.css). Tint via color-mix so calculators.css invents no hex. */
.calculator-form-message--error {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
}

[data-theme="light"] .calculator-form-message--success {
  color: var(--color-midnight-light);
}

/* ─── 10. Select (extends .form-input; chevron from dashboard .modal__select) ─── */
.calculator-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: var(--touch);
  padding-right: calc(var(--space-md) + 1rem);
  cursor: pointer;
  background-color: var(--form-input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
}

.calculator-select:focus {
  outline: none;
  border-color: var(--color-gold);
  background-color: var(--form-input-focus);
}

[data-theme="light"] .calculator-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234A5568' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

/* ─── 11. Insight callout (tips under input groups) ─── */
.calculator-insight {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-gold);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 0 var(--glass-edge-highlight);
}

.calculator-insight__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-gray-500);
}

/* ─── 12. Reactive vs proactive comparison table ─── */
.calculator-compare {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.calculator-compare__title {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-sm);
}

.calculator-compare__head {
  display: none;
}

.calculator-compare__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--glass-border);
}

.calculator-compare__row:last-child {
  border-bottom: none;
}

.calculator-compare__label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

.calculator-compare__values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.calculator-compare__reactive,
.calculator-compare__proactive {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.calculator-compare__reactive {
  color: var(--color-danger);
}

.calculator-compare__proactive {
  color: var(--color-gold);
}

.calculator-compare__reactive::before,
.calculator-compare__proactive::before {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gray-500);
}

.calculator-compare__reactive::before {
  content: 'Reactive';
}

.calculator-compare__proactive::before {
  content: 'Proactive';
}

.calculator-compare__row--total {
  margin-top: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--glass-border-gold);
  border-bottom: none;
}

.calculator-compare__row--total .calculator-compare__label {
  font-weight: 600;
  color: var(--color-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
}

.calculator-compare__row--total .calculator-compare__reactive,
.calculator-compare__row--total .calculator-compare__proactive {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
}

@media (min-width: 768px) {
  .calculator-compare__head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: var(--space-xs);
  }

  .calculator-compare__col-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: right;
  }

  .calculator-compare__col-label--reactive {
    color: var(--color-danger);
  }

  .calculator-compare__col-label--proactive {
    color: var(--color-gold);
  }

  .calculator-compare__row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-sm);
    flex-direction: unset;
  }

  .calculator-compare__values {
    display: contents;
  }

  .calculator-compare__reactive,
  .calculator-compare__proactive {
    text-align: right;
  }

  .calculator-compare__reactive::before,
  .calculator-compare__proactive::before {
    content: none;
  }
}

/* ─── 13. Gauge layout + legend (Market Reach) ─── */
.calculator-reach-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.calculator-gauge-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}

.calculator-gauge-legend__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

.calculator-gauge-legend__swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-right: var(--space-xs);
}

.calculator-gauge-legend__swatch--reach {
  background: var(--color-gold);
}

.calculator-gauge-legend__swatch--active {
  background: var(--color-gray-300);
}

.calculator-gauge-legend__swatch--passive {
  background: var(--color-gray-100);
  border: 1px solid var(--glass-border);
}

.calculator-gauge-legend__label {
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.calculator-gauge-legend__value {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-white);
  white-space: nowrap;
}

[data-theme="light"] .calculator-gauge-legend__value {
  color: var(--color-midnight-light);
}

@media (min-width: 768px) {
  .calculator-reach-visual {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
  }

  .calculator-gauge {
    margin: 0;
    flex-shrink: 0;
  }

  .calculator-gauge-legend {
    flex: 1;
  }
}

/* ─── 14. Segmented pool bar ─── */
.calculator-pool-bar {
  display: flex;
  width: 100%;
  height: 0.75rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--color-gray-100);
  margin-bottom: var(--space-xs);
}

.calculator-pool-bar__segment {
  display: block;
  height: 100%;
  min-width: 0;
  transition: width var(--transition-medium);
}

.calculator-pool-bar__segment--reach {
  background: var(--gold-gradient);
}

.calculator-pool-bar__segment--active {
  background: var(--color-gray-300);
}

.calculator-pool-bar__segment--passive {
  background: var(--color-gray-100);
}

.calculator-pool-bar__caption {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ─── 15. Dynamic score band ─── */
.calculator-score-band {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
}

.calculator-score-band__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.calculator-score-band__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: currentColor;
  line-height: 1;
}

.calculator-score-band__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.calculator-score-band__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.35;
}

.calculator-score-band__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-gray-500);
}

.calculator-score-band--critical {
  border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.calculator-score-band--poor {
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
}

.calculator-score-band--moderate {
  border-color: var(--glass-border);
  background: var(--color-gray-100);
}

.calculator-score-band--good {
  border-color: var(--glass-border-gold);
  background: var(--glass-bg);
}

[data-theme="light"] .calculator-score-band__title {
  color: var(--color-midnight-light);
}

[data-theme="light"] .calculator-score-band--good {
  background: var(--color-gray-100);
}

/* ─── 16. CTA lead card: lined ticks + section gaps ─── */
#calculatorCtaCard .why-recberry-fit__mark--yes {
  background: transparent;
  border: 1.5px solid var(--color-gold);
  color: var(--color-gold);
}

#calculatorCtaCard > .bento-desc {
  margin-bottom: var(--space-lg);
}

#calculatorCtaCard .why-recberry-fit__list {
  margin-top: 0;
  margin-bottom: var(--space-xl);
}

#calculatorCtaCard #calculatorLeadForm {
  margin-top: 0;
}

#calculatorCtaCard #calculatorLeadForm .form-group {
  margin-bottom: var(--space-md);
}

#calculatorCtaCard #calculatorLeadForm .btn-submit {
  margin-top: var(--space-md);
}

#calculatorCtaCard #calculatorLeadForm > .bento-desc {
  margin-top: var(--space-md);
}

/* ─── 17. Currency select ─── */
.calculator-currency-row {
  margin-bottom: var(--space-md);
}