/* ============================================================
   Calculator Page
   Page: .calculator
   Tab navigation + form panels.
   ============================================================ */

/* max-width via main.narrow (04-layout.css) gesetzt */

.calculator > header {
  margin-block-end: var(--gap-block);
}

.calculator > section {
  margin-block-start: var(--gap-block);
}

/* --- Tab bar --- */

.calculator nav[role="tablist"] {
  display: flex;
  gap: var(--space-1);
  margin-block-end: var(--gap-block);
  border-bottom: 0.0625rem solid var(--color-border);
  overflow-x: auto;
}

.calculator [role="tab"] {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  border: none;
  border-bottom: 0.125rem solid transparent;
  background: none;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.calculator [role="tab"][aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

.calculator [role="tab"]:hover {
  color: var(--color-text);
}

/* --- Tab panels --- */

.calculator [role="tabpanel"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--gap-inline);
  padding: var(--padding-card);
  background: var(--color-bg-alt);
  border: 0.0625rem solid var(--color-panel-border);
  border-radius: var(--radius);
}

.calculator [role="tabpanel"] > div:first-child,
.calculator [role="tabpanel"] > output {
  grid-column: 1 / -1;
}

@media (max-width: 44.999rem) {
  .calculator [role="tabpanel"] {
    grid-template-columns: 1fr;
  }
}

/* --- Results --- */

.calculator output {
  display: block;
  margin-block-start: var(--gap-inline);
  padding: var(--padding-card);
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 0.0625rem solid var(--color-border);
}

/* dl nutzt die globale dl > div Flex-Regel (02-base.css) — kein Multi-column,
   kein eigenes Grid hier. dt/dd werden pro Zeile durch den div-Wrapper positioniert. */

.calculator dd {
  font-weight: 600;
}

/* --- Disclaimer (.hint) liegt global in 02-base.css. Hier nur zentrieren. --- */

.calculator > p.hint {
  text-align: right;
  font-size: var(--text-xs);
}