/* Calculator styles, shared by the home page and the country pages.
   Tokens come from page.css, so this file only describes the widget. */

.calc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 26px 0;
  /* Apple has exactly one shadow and never puts it under a card, and this one
     was removed on that authority. It went back: that rule holds there because
     alternating full-bleed surfaces carry the hierarchy instead, and this
     project bans those outright — so the removal took half a pair and left the
     calculator flatter with nothing standing in for the lift. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 40px -24px rgba(0, 0, 0, .22);
}

.calc-field { display: flex; flex-direction: column; gap: 7px }
.calc-field label {
  font-size: 11px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
.calc-field input,
.calc-field select {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 17px; padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--rule); background: var(--raised); color: var(--ink);
  width: 100%;
  /* Measured at 45 on a phone, which is under the 48 this project holds and
     over the 44 the guidelines publish — the exact near-miss the higher
     number exists to catch. Stated rather than left to whatever the font
     and the padding happen to add up to. */
  min-height: 48px;
}
.calc-field select { font-family: Newsreader, Georgia, serif }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }

/* One column on a narrow phone.

   Two fields side by side fit an English label. "Betriebsausgaben" is one
   word and does not shrink, so on a 320-point screen the second field ran
   past the right edge and the page scrolled sideways — on the German landing
   page, which exists to convert German visitors. */
@media (max-width: 380px) {
  .calc-row { grid-template-columns: 1fr }
}

.field-help { font-size: 13.5px; color: var(--ink-3); margin: 0; line-height: 1.45 }
#regime-questions { display: flex; flex-direction: column; gap: 18px }

.result {
  background: var(--brand-wash); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.result-rate {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(42px, 7vw, 54px);
  font-weight: 700; line-height: 1; color: var(--brand); letter-spacing: -.03em;
}
/* A sentence does not want the size a percentage wants. */
.result-rate.is-phrase { font-size: clamp(26px, 4.2vw, 34px); letter-spacing: -.01em }

.result-cap { font-size: 15px; color: var(--ink-2); margin: 0 }
.result-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.result-grid div { display: flex; flex-direction: column; gap: 2px }
.result-grid .k {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.result-grid .v {
  font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 500;
}

.lines { display: flex; flex-direction: column; gap: 9px; font-size: 15px }
.line { display: flex; justify-content: space-between; gap: 16px; align-items: baseline }
.line .k { color: var(--ink-2) }
.line .v { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums }
.line.total { border-top: 1px solid var(--rule); padding-top: 10px; font-weight: 600 }
.line.total .v { color: var(--brand) }

/* An ordinary caveat is a note, not an alert.
 *
 * It was a tinted card with a coloured bar down its left edge, which is a
 * pattern worth avoiding on its own merits and is also, as of 2026, one of
 * the more reliable signs a page was generated rather than designed. A rule
 * above and quiet text says the same thing in the language the rest of the
 * page already speaks. The stale-year warning below keeps its box, because
 * that one is genuinely an alert. */
.flag {
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
  padding: 12px 0 0;
  margin-top: 12px;
}

details.work { border-top: 1px solid var(--rule); padding-top: 14px }
details.work summary {
  cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--ink-2); list-style: none;
  /* 23 points tall before this. It is the control that opens the working,
     which is the thing this page is arguing with, so it has to be reachable
     with a thumb. Raised from 44 to 48: 44 is the published floor and this
     project uses 48, and it measured 45 in the browser. */
  padding: 11px 0; min-height: 48px; display: flex; align-items: center;
}
details.work summary::-webkit-details-marker { display: none }
details.work summary::before { content: "▸ "; color: var(--ink-3) }
details.work[open] summary::before { content: "▾ " }
details.work .lines { margin-top: 14px }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--r); font-weight: 600; font-size: 16px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  font-family: inherit;
}
.btn:hover { opacity: .86 }
.btn-primary { background: var(--brand); color: var(--brand-ink) }

/* Hover is a desktop luxury; the press is the one every reader gets.

   Order matters here and the first version of this got it wrong: written
   above `.btn-primary`, the `:active` rule has the same specificity and
   loses to the later one, so the button would have gone on looking exactly
   as unpressed as before. It sits after its own base rule now. */
.btn:active { opacity: 1 }
.btn-primary:active { background: var(--brand-press); border-color: var(--brand-press) }

/* A stale-year warning outranks the ordinary caveats around it. */
.flag.stale {
  background: var(--warn-wash);
  border: 1px solid var(--warn);
  border-radius: var(--r);
  color: var(--ink);
  padding: 12px 14px;
}