/* Liitä: «Mistä tämä liitos saa pitkäsyynsä?» (2.10.2026).
 * Vain paletin muuttujia (verstas.css), joten tumma teema toimii. */
.liitostehtava .valokuva { max-width: 420px; margin: 4px 0 12px; }
.liitoslaskuri { margin: 0 0 6px; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.liitosvalinnat { display: grid; gap: 8px; max-width: 560px; }
/* Yleinen `button` on mono-versaali nappi; vaihtoehto on lause, joten
 * kirjasin ja kirjainkoko palautetaan, ja korkeus on vähintään 44 px. */
button.liitosvalinta {
  font-family: var(--body);
  font-size: calc(14.5px * var(--tekstikoko));
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  justify-content: flex-start;
  min-height: calc(44px * var(--tekstikoko));
  padding: 10px 14px;
  line-height: 1.35;
}
button.liitosvalinta:focus-visible,
#liitosseuraava:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.liitosvalinta.oikein { border-color: var(--water); box-shadow: inset 0 0 0 2px var(--water); }
button.liitosvalinta.vaarin { border-color: var(--varo); color: var(--ink-2); }
button.liitosvalinta:disabled { cursor: default; }
#liitosseuraava { min-height: calc(44px * var(--tekstikoko)); }
@media (prefers-reduced-motion: reduce) {
  button.liitosvalinta:active, #liitosseuraava:active { transform: none; }
}
/* `hidden` häviää yleiselle `button { display: inline-flex }` -säännölle. */
.liitostehtava [hidden] { display: none !important; }