@import url("./heating-calculator.css?v=1");
@import url("./solar-calculator.css?v=1");

.calculator-page {
  color-scheme: light;
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 32px);
  --surface: hsl(var(--card));
  --surface-soft: hsl(var(--secondary));
  --heading: hsl(var(--foreground));
  --label: hsl(var(--secondary-foreground));
  --line: hsl(var(--border));
  --divider: hsl(var(--border));
  --hover: hsl(var(--accent));
  --mint: hsl(var(--accent));
  --registry-line: hsl(var(--primary) / .4);
  --green: hsl(var(--primary));
  --green-text: hsl(var(--accent-foreground));
  --focus: hsl(var(--ring));
  --danger: hsl(var(--brand));
  --panel-shadow: hsl(var(--foreground) / .055);
}

.dark .calculator-page { color-scheme: dark; }
.calculator-page > h1 { font-size: clamp(28px, 4vw, 48px); font-weight: 700; line-height: 1.12; }
.calculator-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-block: 20px; }
.calculator-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.calculator-choice:has([aria-current]) { border-color: var(--focus); background: var(--mint); }
.calculator-choice h2 { font-size: clamp(17px, 2vw, 22px); font-weight: 700; }
.calculator-choice p { color: hsl(var(--muted-foreground)); font-size: 14px; }
.calculator-related { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.calculator-choice a:hover { color: hsl(var(--primary)); }
.calculator-tool { scroll-margin-top: 110px; }
.calculator-tool[hidden] { display: none; }

.calculator-page .hc {
  --muted: hsl(var(--muted-foreground));
  --hc-pump: hsl(var(--chart-1));
  --hc-pellet: hsl(var(--chart-5));
  --hc-direct: hsl(var(--chart-2));
  --hc-wood: hsl(var(--chart-3));
  --hc-gas: hsl(var(--chart-4));
}
.calculator-page .hc-hero {
  color: hsl(var(--card-foreground));
  border-color: var(--line);
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--surface), var(--mint));
  box-shadow: 0 10px 28px var(--panel-shadow);
}
.calculator-page .hc-hero::before { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); }
.calculator-page .hc-hero h2 { color: var(--heading); font-size: clamp(28px, 4.2vw, 53px); font-weight: 700; line-height: 1.08; letter-spacing: -.04em; }
.calculator-page .hc-hero p { color: hsl(var(--muted-foreground)); }
.calculator-page .hc-hero-mark { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .35); background: hsl(var(--primary) / .06); box-shadow: 0 0 0 16px hsl(var(--primary) / .05); }
.calculator-page .hc-card { border-radius: var(--radius); }
.calculator-page .hc-card h3 { font-size: clamp(21px, 2.2vw, 29px); line-height: 1.15; letter-spacing: -.035em; font-weight: 700; }
.calculator-page .hc-card h4 { color: var(--heading); font-size: 14px; font-weight: 700; }
.calculator-page .hc input[type="range"], .calculator-page .hc select { width: 100%; }
.calculator-page .hc input[type="number"], .calculator-page .hc select { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.calculator-page .hc select { min-height: 44px; padding: 6px 8px; }
.calculator-page .hc :is(button, select, input[type="number"]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.calculator-page .hc-results h3 { scroll-margin-top: 110px; }
.calculator-page .pv-sources a { text-decoration: underline; }
.calculator-page .pv [data-tone="better"] { --pv-impact-bg: var(--mint); --pv-impact-border: var(--registry-line); }
.calculator-page .pv [data-tone="worse"] { --pv-impact-bg: color-mix(in srgb, var(--danger) 9%, var(--surface)); --pv-impact-border: color-mix(in srgb, var(--danger) 42%, var(--line)); --pv-impact-text: var(--heading); }

@media (min-width: 861px) and (min-height: 450px) {
  .calculator-page .hc-results { top: max(110px, calc((100dvh - var(--hc-results-height, 100dvh)) / 2)); max-height: calc(100dvh - 126px); }
}
@media (max-width: 640px) { .calculator-picker { grid-template-columns: minmax(0, 1fr); } }