/* Lämpö — lämpöpumppulaskuri. Yhteinen ulkoasu.
 *
 * PELTOVIRTA-TEEMA. Tämä sivusto linkitetään peltovirta.com:n etusivulta,
 * joten se käyttää samaa palettia ja samoja kirjasimia kuin sisarsivut
 * (peltovirta.com, pelit.peltovirta.com): okra, vesi ja turve,
 * Superclarendon otsikoissa ja Avenir Next leipätekstissä. Ylälaidassa on
 * sama perhepalkki ja sama merkki — kolme vakoa jotka puro katkaisee.
 *
 * PALETTI ON TASAN KAHDESSA PAIKASSA: `:root` ja tumma media query.
 * Kaikki muu väri johdetaan niistä `var()`- ja `color-mix()`-arvoilla,
 * eikä yhtään heksalukua kirjoiteta kolmanteen paikkaan. Tarkistin laskee
 * esiintymät ja punastuu kolmannesta. Syy on kokemus: kolmas paikka
 * löytyy vasta kun teema on jo eriytynyt.
 *
 * Sovelluskehys (kiinteä ylapalkki + vierivä .sisalto) on tarkoituksellinen
 * poikkeus Peltovirran tavallisesta dokumenttivirrasta. Syy on
 * todennettavuus: kun sivu ei koskaan ole ikkunaa korkeampi, kuvakaappaus
 * näyttää sen mitä käyttäjä näkee, ja laskurit pysyvät näkyvissä kun
 * arvoja säätää.
 */

:root {
  --display: "Superclarendon", "Bookman Old Style", Rockwell, "Roboto Slab", Georgia, serif;
  --body: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: Menlo, "SF Mono", ui-monospace, monospace;

  --ground: #e2e7e6;
  --ground-2: #d8dedc;
  --kohotus: #edf0ef;
  --ink: #16201e;
  --ink-2: #4d5a57;
  --accent: #855c15;
  --water: #1e4e49;
  --varo: #8a2f1c;
  --hair: rgba(22, 32, 30, 0.14);
  --hair-strong: rgba(22, 32, 30, 0.32);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0d1413;
    --ground-2: #151f1d;
    --kohotus: #1c2725;
    --ink: #dde4e1;
    --ink-2: #94a19e;
    --accent: #d5a44c;
    --water: #52a096;
    --varo: #e08b74;
    --hair: rgba(221, 228, 225, 0.2);
    --hair-strong: rgba(221, 228, 225, 0.38);
  }
}

/* ---------- johdetut sävyt ----------
 * Ei yhtään uutta heksalukua. `color-mix` sekoittaa korostuksen pohjaan,
 * joten sävyt kääntyvät oikein päin itsestään kun teema vaihtuu: tummassa
 * pohja on tumma, joten sama sekoitus tuottaa vaaleamman tuloksen.
 * Piirroksissa tämä on ratkaisevaa — vuosirenkaat katosivat kerran
 * rungon sisään juuri siksi, että sävy oli kirjoitettu käsin. */
:root {
  --varjo: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .05);
  --pehmea: color-mix(in srgb, var(--accent) 12%, var(--ground));

  --puu: color-mix(in srgb, var(--accent) 30%, var(--ground));
  --puu-tumma: color-mix(in srgb, var(--accent) 72%, var(--ground));
  --mitta: var(--accent);
  --apuviiva: var(--ink-2);
}

@media (prefers-color-scheme: dark) {
  :root { --varjo: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .3); }
}

/* Yksi kerroin tekstin koolle. HUOM NIMI: `--tekstikoko`, EI `--teksti` —
 * jälkimmäinen on toisessa projektissa tekstin VÄRI, ja samanniminen
 * kerroin korvaisi sen luvulla 1. */
:root { --tekstikoko: 1; }
:root[data-teksti="iso"]   { --tekstikoko: 1.18; }
:root[data-teksti="isoin"] { --tekstikoko: 1.38; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; background: var(--ground); color: var(--ink); }

body {
  font-family: var(--body);
  font-size: calc(16px * var(--tekstikoko));
  line-height: 1.55;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
::selection { background: var(--accent); color: var(--ground); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app {
  height: 100%;
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- perhepalkki: tämä sivu kuuluu Peltovirtaan ----------
 * Sama merkintä kuin Automatkan sivuilla. Kosketusalue on 2,75rem
 * (n. 44 px) vaikka teksti on 0,68rem: navigointielementti puhelimessa,
 * ja pieni linkki on pieni maali. */
.perhe {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: max(0.5rem, env(safe-area-inset-top)) 0.9rem 0.35rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.perhe svg { flex: none; width: 1.15rem; height: 1.15rem; }
.perhe b { font-weight: 400; color: var(--accent); }
.perhe-linkki {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  margin: -0.55rem 0;
  color: inherit;
  text-decoration: none;
}
.perhe-linkki:hover b,
.perhe-linkki:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- ylapalkki ---------- */

.ylapalkki {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 14px 10px;
  border-bottom: 1px solid var(--hair-strong);
}
.ylapalkki h1 {
  font-family: var(--display);
  font-size: calc(clamp(16px, 4.6vw, 21px) * var(--tekstikoko));
  margin: 0;
  letter-spacing: -.2px;
  font-weight: 600;
}
.ylapalkki .alaotsikko {
  display: block;
  font-family: var(--mono);
  font-size: calc(10px * var(--tekstikoko));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 2px;
}
.ylapalkki .tila { margin-left: auto; display: flex; gap: 8px; align-items: center; }

a.vs-back {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: calc(22px * var(--tekstikoko)); line-height: 1;
  color: inherit;
  background: var(--kohotus);
  border: 1px solid var(--hair);
}
a.vs-back:active { transform: scale(.94); }

/* ---------- vierivä sisältö ----------
 * min-height:0 on pakollinen: flex-lapsen oletus on min-height:auto,
 * jolloin säiliö ei kutistu sisältöään pienemmäksi. */
.sisalto {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 40px;
}

.kortti {
  background: var(--kohotus);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 18px;
  margin: 0 0 12px;
  box-shadow: var(--varjo);
}
/* ---------- osion otsikko ----------
 * ★ HIERARKIA OLI NURIN, JA SE OLI KOKO SIVUSTON «TIETOKIRJAMAISUUDEN»
 * suurin yksittäinen syy. Osio-otsikko oli 11 px himmeä monospace-versaali
 * ja alaotsikko `.teksti h3` 17 px Superclarendon täydellä värillä: silmä
 * ei löytänyt osiorajoja lainkaan, vaan näki yhden pitkän tekstipinon.
 *
 * Mono-versaali on hyvä merkintä pikkuotsikolle (`label`, `th`, `.merkki`,
 * `.kysymys`) mutta väärä osiotasolle, joka on sivun tärkein jäsennys.
 * Suhde on nyt 19 / 15,5 = 1,23 — riittävä porras ilman että sivusta
 * tulee otsikkoluettelo. Tarkistin lukee molemmat koot CSS:stä ja
 * vaatii h2 > h3, joten hierarkia ei voi enää kääntyä huomaamatta. */
.kortti > h2 {
  font-family: var(--display);
  margin: 0 0 10px;
  font-size: calc(19px * var(--tekstikoko));
  letter-spacing: -.2px;
  color: var(--ink);
  font-weight: 600;
}

/* ---------- leipäteksti ----------
 * Avenir Next, rivinmitta rajattu KAPPALEELLA eikä säiliöllä: kortissa on
 * myös taulukoita ja piirroksia, jotka saavat käyttää koko leveyden. */
.teksti p, .teksti li {
  font-size: calc(15.5px * var(--tekstikoko));
  line-height: 1.62;
  max-width: 62ch;
}
.teksti p { margin: 0 0 .85em; }
.teksti p:last-child { margin-bottom: 0; }
.teksti ul, .teksti ol { margin: 0 0 .9em; padding-left: 1.3em; }
.teksti li { margin: 0 0 .4em; }

/* Alaotsikko jää osiotason ALAPUOLELLE — ks. `.kortti > h2` yllä. */
.teksti h3 {
  font-family: var(--display);
  font-size: calc(15.5px * var(--tekstikoko));
  font-weight: 600;
  margin: 1.5em 0 .45em;
  letter-spacing: -.2px;
}
.teksti h3:first-child { margin-top: 0; }
.teksti a { color: var(--accent); text-underline-offset: 3px; }

/* Työn järjestys katalogikortin sisällä. Numerointi on osa sisältöä —
 * askeleet ovat järjestyksessä eivätkä listana — joten `ol` eikä `ul`. */
.liitos .askeleet {
  margin: 2px 0 0;
  padding-left: 1.15em;
}
.liitos .askeleet li { margin: 0 0 .3em; }
.liitos .askeleet li:last-child { margin-bottom: 0; }

/* ---------- luvun sisääntulo: tilanne ja kysymys ----------
 * Tilanne on isolla otsikkokirjasimella mutta ei otsikko: se on se
 * verstastilanne, jossa lukija seisoo. Kysymys sen alla on pieni ja
 * korostusvärinen — se on merkintä eikä lause, ja sen tehtävä on kertoa
 * yhdellä silmäyksellä vastaako luku siihen mitä lukija tuli hakemaan.
 * Molemmat piirtää `verstas.js` datasta; sivuilla ei ole näistä merkkausta. */
.tilanne {
  font-family: var(--display);
  font-size: calc(16.5px * var(--tekstikoko));
  line-height: 1.5;
  margin: 0 0 5px;
  max-width: 54ch;
}
.kysymys {
  font-family: var(--mono);
  font-size: calc(11px * var(--tekstikoko));
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--accent);
  margin: 0 0 16px;
}

/* Seurauskortti erottuu vesireunuksesta: se ei ole uusi mekanismi vaan
 * se, mitä luvun mekanismista seuraa työtavassa. */
.kortti.seuraus { border-left: 3px solid var(--water); }
.seuraus .vie {
  font-family: var(--mono);
  font-size: calc(11.5px * var(--tekstikoko));
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  color: var(--ink-2);
}

/* ---------- mekanismilaatikko ----------
 * Se yksi lause, josta luvun kaikki muut ohjeet seuraavat. Jos luvussa on
 * useampi kuin yksi, luku on jaettava kahtia. */
.mekanismi {
  border-left: 3px solid var(--accent);
  background: var(--pehmea);
  padding: 13px 15px;
  margin: 16px 0;
}
.mekanismi p {
  margin: 0;
  font-size: calc(15.5px * var(--tekstikoko));
  line-height: 1.55;
  max-width: 58ch;
}

/* Lähdeviite mitan vieressä. Oma tyylinsä eikä osa .pieniteksti-ä, jotta
 * puuttuvan lähteen huomaa: sille on paikka. */
.lahde {
  display: block;
  font-size: calc(11.5px * var(--tekstikoko));
  line-height: 1.5;
  color: var(--ink-2);
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  max-width: 70ch;
}
.lahde b { color: var(--ink); font-weight: 600; }

.kaava {
  font-family: var(--mono);
  font-size: calc(13px * var(--tekstikoko));
  background: var(--ground-2);
  border-left: 3px solid var(--water);
  padding: 12px 14px;
  margin: 14px 0;
  overflow-x: auto;
}

/* ---------- lomake ---------- */

label {
  display: block;
  font-family: var(--mono);
  font-size: calc(10px * var(--tekstikoko));
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-2);
  margin: 0 0 5px;
}

input[type=text], input[type=number], select {
  width: 100%;
  font-family: var(--body);
  font-size: calc(16px * var(--tekstikoko));   /* alle 16px saa iOS:n zoomaamaan */
  padding: 9px 11px;
  border: 1px solid var(--hair-strong);
  border-radius: 3px;
  background: var(--ground);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.rivi { display: flex; gap: 8px; align-items: flex-end; margin: 0 0 10px; }
.rivi > * { flex: 1; min-width: 0; }

button, .nappi {
  font-family: var(--mono);
  font-size: calc(11px * var(--tekstikoko));
  letter-spacing: .1em;
  text-transform: uppercase;
  min-height: calc(min(40px, 6.5vh) * var(--tekstikoko));
  padding: 0 14px;
  border-radius: 3px;
  border: 1px solid var(--hair-strong);
  background: var(--kohotus);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
button:active, .nappi:active { transform: scale(.97); }
button.pieni { min-height: calc(min(32px, 5.2vh) * var(--tekstikoko)); padding: 0 10px; }
button.on { background: var(--accent); color: var(--ground); border-color: transparent; }

.napit { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- tuloslaatikot ---------- */

.parit { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pari {
  background: var(--ground-2);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 11px 13px;
}
.pari b {
  display: block;
  font-family: var(--display);
  font-size: calc(21px * var(--tekstikoko));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.4px;
  line-height: 1.15;
}
.pari span {
  display: block;
  font-family: var(--mono);
  font-size: calc(9.5px * var(--tekstikoko));
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: 4px;
}
.pari.laaja { grid-column: 1 / -1; }
.pari.huomio { border-color: var(--accent); background: var(--pehmea); }

/* ---------- yleiset ---------- */

.himmea { color: var(--ink-2); }
.pieniteksti { font-size: calc(12.5px * var(--tekstikoko)); color: var(--ink-2); line-height: 1.5; }

/* Etusivun hakuosumat reittisivujen riveiltä. Lista eikä kortteja: nämä
   ovat vastauksia yhteen kysymykseen, eivät selattavaa sisältöä. */
.osumakortti h3:first-child { margin-top: 0; }
.osumakortti h3 { margin: 1.1em 0 .3em; }
.osumat { list-style: none; margin: 0; padding: 0; }
.osumat li { padding: 7px 0; border-bottom: 1px solid var(--hair); }
.osumat li:last-child { border-bottom: 0; padding-bottom: 0; }
.osumat a { font-weight: 600; }
.osumat .himmea { display: block; font-family: var(--mono); font-size: calc(11px * var(--tekstikoko)); }
.virhe { color: var(--varo); font-weight: 600; }

/* Huomautus ≠ virhe, ja ero on tarkoituksellinen. Suomen talvi vie puun
 * kaavan pätevyysalueen alapuolelle täysin normaaleissa oloissa, joten
 * ilmoitus näkyy oletusarvoillakin. Punaisena se lukisi «sivu on rikki».
 * Punainen varataan sille, mitä käyttäjän on korjattava. */
.huomautus {
  border-left: 3px solid var(--water);
  background: var(--ground-2);
  padding: 10px 13px;
  font-size: calc(12.5px * var(--tekstikoko));
  line-height: 1.5;
  color: var(--ink-2);
}
.huomautus b { color: var(--ink); }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--hair); font-size: calc(13px * var(--tekstikoko)); }
th {
  font-family: var(--mono);
  font-size: calc(9.5px * var(--tekstikoko));
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-2);
  font-weight: 400;
}
td.luku, th.luku { text-align: right; }

/* Leveä sisältö vierii omassa laatikossaan — sivu itse ei koskaan vaakavieri. */
.vieritin { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

/* ---------- piirrokset ---------- */

figure { margin: 18px 0; }
figure svg { display: block; width: 100%; height: auto; }

/* Kaavion leveyskatto. SVG skaalautuu viewBoxinsa mukana JA NIIN SKAALAUTUU
 * SEN TEKSTI: yhdellä leveällä kuvalla ei voi palvella molempia päitä.
 * Ratkaisu on kaksi kapeaa kuvaa leveän sijaan ja katto leveydelle. */
figure svg.kaavio { max-width: 26rem; margin: 0 auto; }

/* Lasketut kaaviot. Hajontapaneelit ovat kapeampia kuin muut kaaviot,
 * koska niitä on kaksi vierekkäin leveällä ruudulla ja allekkain
 * kapealla — leveä yksittäiskuva puristaisi selitteet lukukelvottomiksi
 * puhelimessa, mikä on tässä projektissa jo kertaalleen maksettu virhe. */
figure svg.hajonta { max-width: 19rem; }
@media (min-width: 620px) {
  #hajonnat { display: flex; gap: 14px; align-items: flex-start; }
  #hajonnat svg.hajonta { flex: 1 1 0; max-width: none; }
}
svg .piste  { fill: var(--accent); fill-opacity: .8; }
svg .palkki { fill: var(--accent); }
svg .palkki.toinen { fill: var(--water); }
svg .maali    { fill: var(--accent); }
svg .kuultava { fill: var(--water); }
svg .vyohyke { fill: var(--pehmea); }
svg .vyohyke.varo { fill: var(--accent); fill-opacity: .18; }
svg .vyohyke.laho { fill: var(--accent); fill-opacity: .4; }

figcaption {
  font-size: calc(12.5px * var(--tekstikoko));
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: 10px;
  max-width: 66ch;
}

svg .runko  { fill: var(--puu); stroke: var(--puu-tumma); stroke-width: 1.5; }
svg .rengas { fill: none; stroke: var(--puu-tumma); stroke-width: 1; opacity: .8; }
svg .apu    { fill: none; stroke: var(--apuviiva); stroke-width: 1; stroke-dasharray: 4 3; }
svg .mittaviiva { fill: none; stroke: var(--mitta); stroke-width: 1.2; }
svg .nuoli  { fill: none; stroke: var(--mitta); stroke-width: 1.8; }
svg text    { fill: var(--ink); font-family: var(--body); font-size: 11px; }
svg text.pieni { font-size: 9.5px; fill: var(--ink-2); }
svg text.mitta { fill: var(--mitta); font-weight: 700; }

/* ---------- hakemiston kortit ---------- */

a.luku-linkki {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--kohotus);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  padding: 15px 17px;
  margin: 0 0 10px;
  box-shadow: var(--varjo);
}
a.luku-linkki h3 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0 0 5px;
  font-size: calc(17px * var(--tekstikoko));
}
a.luku-linkki p { margin: 0; font-size: calc(13.5px * var(--tekstikoko)); color: var(--ink-2); line-height: 1.5; }
a.luku-linkki .merkki {
  display: inline-block;
  font-family: var(--mono);
  font-size: calc(9.5px * var(--tekstikoko));
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  margin-top: 9px;
}

/* ---------- katalogi ----------
 * Datataulukon näkymä: yksi kortti per rivi, samat kentät samassa
 * järjestyksessä joka kerta. Se on koko pointti — kun rakenne on sama,
 * rivejä voi verrata silmäilemällä eikä lukemalla. */

.katalogi { display: flex; flex-direction: column; gap: 10px; }

.liitos {
  background: var(--kohotus);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--water);
  border-radius: 3px;
  padding: 15px 17px;
  box-shadow: var(--varjo);
}
.liitos > header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.liitos h3 { font-family: var(--display); font-weight: 600; margin: 0; font-size: calc(16.5px * var(--tekstikoko)); }
.liitos .ryhma {
  font-family: var(--mono);
  font-size: calc(9.5px * var(--tekstikoko));
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
}
.liitos .vaikeus { margin-left: auto; font-size: calc(12px * var(--tekstikoko)); color: var(--ink-2); letter-spacing: 1px; }
.liitos .syy {
  display: inline-block;
  font-family: var(--mono);
  font-size: calc(10px * var(--tekstikoko));
  background: var(--ground-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 2px 10px;
  color: var(--ink-2);
  margin: 3px 0 9px;
}
.liitos dl { margin: 0; }
.liitos dt {
  font-family: var(--mono);
  font-size: calc(9.5px * var(--tekstikoko));
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-2);
  margin: 10px 0 2px;
}
.liitos dd { margin: 0; font-size: calc(14px * var(--tekstikoko)); line-height: 1.5; max-width: 62ch; }
.liitos .valineet { margin: 11px 0 0; font-size: calc(11.5px * var(--tekstikoko)); color: var(--ink-2); }

/* ---------- KOKEMUSREKISTERI ----------
 *
 * Kokemussivu ei ole luku: se ei mittaa mitään, vaan kertoo mitä on itse
 * tehty ja mikä siinä meni pieleen. Rekisterin säännöt ja perustelu ovat
 * `yhteinen/kokemus.js`:ssä.
 *
 * ★ VÄRI ON MERKINTÄ EIKÄ KORISTE. Luvun tunnus on `--accent` eli
 * puunruskea; kokemus saa `--water`in, saman värin kuin seurauskortti.
 * Jako on tarkoituksellinen ja se on koko rekisterin näkyvä puoli: ruskea
 * reunus lupaa mitatun ja lähteistetyn, sininen ei lupaa. Kumpaakaan väriä
 * ei kirjoiteta tähän heksana — paletti on kahdessa paikassa ja
 * `paletti.js` vahtii sitä. */
.kortti.kokemuskortti { border-left: 3px solid var(--water); }
.katalogi article.kokemusrivi { border-left: 3px solid var(--water); }
a.luku-linkki.kokemus { border-left-color: var(--water); }
a.luku-linkki.kokemus .merkki { color: var(--water); }

/* Rekisterin selittävä kortti etusivulla. Se on lukukorttien seassa mutta
 * ei ole kortti, joten se erottuu kapeampana ja ilman varjoa. */
.rekisteriselite {
  border-left: 3px solid var(--water);
  background: transparent;
  box-shadow: none;
  padding: 4px 0 4px 14px;
  margin: 18px 0 12px;
}
.rekisteriselite p { margin: 0; font-size: calc(13.5px * var(--tekstikoko)); color: var(--ink-2); line-height: 1.55; }
.rekisteriselite .merkki {
  display: block;
  font-family: var(--mono);
  font-size: calc(9.5px * var(--tekstikoko));
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--water);
  margin: 0 0 5px;
}

/* Varoitus laskennan pätevyysalueesta: sama laatikko kuin `.mekanismi`,
 * mutta varoitusvärisellä reunuksella. */
.mekanismi.varoitus { border-left-color: var(--varo); }
.varo-teksti {
  color: var(--varo);
  font-family: var(--mono);
  font-size: calc(11px * var(--tekstikoko));
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* .hide viimeisenä JA !important: samalla spesifisyydellä myöhempi
 * display-sääntö voittaisi sen. */
.hide { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01s !important; transition-duration: .01s !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * KAAVAN OMAT — säätimet, piirustukset ja sahauslista
 *
 * Yhtään heksalukua ei kirjoiteta tänne: paletti on tiedoston alussa
 * `:root`issa ja tumman teeman lohkossa, ja kaikki alla johdetaan niistä.
 * ═══════════════════════════════════════════════════════════════════════ */

.saatimet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px 18px; }
.saadin { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.saadin > span { font-size: 0.82rem; color: var(--ink-2); letter-spacing: 0.02em; }
.saadin input[type="number"], .saadin select {
  font: inherit; font-family: var(--body); padding: 7px 9px; min-width: 0;
  background: var(--kohotus); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 7px;
}
.saadin input[type="number"]:focus-visible, .saadin select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.saadin.valinta { flex-direction: row; align-items: center; gap: 9px; }
.saadin.valinta > span { font-size: 0.95rem; color: var(--ink); }

/* Piirustukset. Osat ovat läpikuultavia, jotta takana oleva näkyy —
 * takalevy ei saa peittää koko kuvaa. */
.kuvarivi { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
/* Kuvat ovat luonnollisen kokoisiaan eivätkä tasalevyisiä palstoja:
 * mittakaava on jo laskettu niin että ne mahtuvat riviin. Tasalevyinen
 * palsta puristaisi leveän kuvan ja kasvattaisi kapean. */
.kuvarivi > figure { margin: 0; flex: 0 0 auto; min-width: 0; max-width: 100%; }
.kuvarivi figcaption { font-size: 0.82rem; color: var(--ink-2); margin-top: 4px; }
/* Kuvalla on oma pikselikokonsa (ks. piirto.js), joten sitä ei venytetä
 * vaan enintään kutistetaan. Muuten kapea sivukuva kasvaisi leveän
 * etukuvan levyiseksi ja yhteinen mittakaava katoaisi. */
svg.piirustus { width: auto; height: auto; max-width: 100%; font-family: var(--body); font-size: 11px; }
svg.piirustus .osa { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--ink); stroke-width: 1; }
svg.piirustus .osa.rima { fill: color-mix(in srgb, var(--water) 30%, transparent); }
svg.piirustus .tunnus { fill: var(--ink-2); font-size: 9px; }
svg.piirustus .mitta line { stroke: var(--water); stroke-width: 1; }
svg.piirustus .mitta text { fill: var(--water); font-size: 10px; }

svg.sahauskuva { width: 100%; height: auto; font-family: var(--body); }
svg.aksonometria { width: auto; height: auto; max-width: 100%; }
/* Kolme sävyä samasta väristä: muoto erottuu ilman valaistuslaskentaa,
 * ja kaikki kolme johdetaan paletista eikä kirjoiteta erikseen. */
svg.aksonometria .ylapinta { fill: color-mix(in srgb, var(--accent) 42%, transparent); stroke: var(--ink); stroke-width: 0.6; }
svg.aksonometria .etupinta { fill: color-mix(in srgb, var(--accent) 26%, transparent); stroke: var(--ink); stroke-width: 0.6; }
svg.aksonometria .sivupinta { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--ink); stroke-width: 0.6; }

svg.levykuva { width: auto; height: auto; max-width: 100%; font-family: var(--body); }
svg.levykuva .levy { fill: var(--ground-2); stroke: var(--hair-strong); stroke-width: 1; }
svg.levykuva .levypala { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--ink); stroke-width: 0.8; }
/* Käännetty pala on eri väri: se on sallittu vain lukitsemattomille, ja
 * katsojan on nähtävä heti kumpia levyllä on. */
svg.levykuva .levypala.kierretty { fill: color-mix(in srgb, var(--water) 30%, transparent); }
svg.levykuva .levyteksti { fill: var(--ink); font-size: 9px; }
svg.levykuva .syynuoli line { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 3; }
svg.levykuva .syynuoli text { fill: var(--ink-2); font-size: 9px; }
svg.sahauskuva .lauta { fill: var(--ground-2); stroke: var(--hair-strong); stroke-width: 1; }
svg.sahauskuva .pala { fill: color-mix(in srgb, var(--accent) 34%, transparent); stroke: var(--ink); stroke-width: 0.8; }
svg.sahauskuva .jaannos { fill: color-mix(in srgb, var(--varo) 20%, transparent); stroke: var(--varo); stroke-width: 0.8; stroke-dasharray: 3 2; }
svg.sahauskuva .lautanimi { fill: var(--ink-2); font-size: 11px; }
svg.sahauskuva .palanimi { fill: var(--ink); font-size: 10px; }

/* Arviolaatikko. Väri kertoo tason, mutta teksti kertoo saman — väri
 * yksin ei ole tieto. */
.arvio { border-left: 3px solid var(--hair-strong); padding: 10px 14px; border-radius: 0 8px 8px 0;
         background: var(--kohotus); margin: 12px 0; }
.arvio.hyva { border-left-color: var(--water); }
.arvio.rajalla { border-left-color: var(--accent); }
.arvio.notkuu { border-left-color: var(--varo); }
.arvio b { font-family: var(--display); }
.arvio .luku { font-size: 1.5rem; font-family: var(--display); }

.korjaukset { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.korjaukset li { background: var(--ground-2); border-radius: 7px; padding: 9px 12px; font-size: 0.92rem; }
.korjaukset b { color: var(--accent); }

.vihje { background: color-mix(in srgb, var(--accent) 12%, var(--kohotus));
         border-radius: 8px; padding: 11px 14px; margin: 12px 0; font-size: 0.94rem; }
.vihje b { font-family: var(--display); }

/* Leveä taulukko vierii OMASSA laatikossaan. Ilman tätä koko sivu vierii
 * puhelimessa sivusuunnassa, ja se on vika joka ei näy millään luvulla
 * eikä työpöytäruudulla. */
.taulukkokehys { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.lista { width: 100%; min-width: 340px; border-collapse: collapse; font-size: 0.92rem; }
table.lista th, table.lista td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--hair); }
table.lista th:first-child, table.lista td:first-child { text-align: left; }
table.lista th { color: var(--ink-2); font-weight: 600; font-size: 0.82rem; }
table.lista tfoot td { font-weight: 700; border-bottom: none; }
table.lista td.mitta { font-family: var(--mono); font-size: 0.88rem; }

.avainluvut { display: flex; flex-wrap: wrap; gap: 20px; margin: 10px 0; }
.avainluku { min-width: 92px; }
.avainluku .arvo { font-family: var(--display); font-size: 1.35rem; display: block; }
.avainluku .nimi { font-size: 0.78rem; color: var(--ink-2); display: block; }

.virhelaatikko { border-left: 3px solid var(--varo); background: var(--kohotus);
                 padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 12px 0; }
.virhelaatikko ul { margin: 6px 0 0; padding-left: 18px; }

/* ═══════════════════════════════════════════════════════════════════════
 * LÄMMÖN OMAT
 * Ei yhtään heksalukua: paletti on tiedoston alun :root-lohkoissa.
 * ═══════════════════════════════════════════════════════════════════════ */

.saatimet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px 18px; }
.saadin { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.saadin > span { font-size: 0.82rem; color: var(--ink-2); letter-spacing: 0.02em; }
.saadin input, .saadin select {
  font: inherit; font-family: var(--body); padding: 7px 9px; min-width: 0;
  background: var(--kohotus); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 7px;
}
.saadin input:focus-visible, .saadin select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Kulutustaulukko: kuukaudet riveinä, vuodet sarakkeina. */
.taulukkokehys { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.kulutus { border-collapse: collapse; width: 100%; min-width: 320px; font-size: 0.92rem; }
table.kulutus th, table.kulutus td { padding: 3px 6px; border-bottom: 1px solid var(--hair); text-align: right; }
table.kulutus th:first-child, table.kulutus td:first-child { text-align: left; color: var(--ink-2); }
table.kulutus th { font-size: 0.78rem; color: var(--ink-2); font-weight: 600; }
table.kulutus input {
  width: 100%; min-width: 68px; font: inherit; font-family: var(--mono); font-size: 0.86rem;
  text-align: right; padding: 4px 6px; background: var(--kohotus); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 5px;
}
table.kulutus input.poikkeava { border-color: var(--varo); }
table.kulutus td.astevrk { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-2); }

.avainluvut { display: flex; flex-wrap: wrap; gap: 20px; margin: 12px 0; }
.avainluku { min-width: 96px; }
.avainluku .arvo { font-family: var(--display); font-size: 1.4rem; display: block; }
.avainluku .nimi { font-size: 0.78rem; color: var(--ink-2); display: block; }
.avainluku .vali { font-size: 0.78rem; color: var(--ink-2); font-family: var(--mono); display: block; }

.arvio { border-left: 3px solid var(--hair-strong); padding: 10px 14px; border-radius: 0 8px 8px 0;
         background: var(--kohotus); margin: 12px 0; }
.arvio.hyva { border-left-color: var(--water); }
.arvio.varo { border-left-color: var(--accent); }
.arvio.huono { border-left-color: var(--varo); }
.arvio ul { margin: 6px 0 0; padding-left: 18px; }

.vihje { background: color-mix(in srgb, var(--accent) 12%, var(--kohotus));
         border-radius: 8px; padding: 11px 14px; margin: 12px 0; font-size: 0.94rem; }
.vihje b { font-family: var(--display); }

svg.kuvaaja { width: 100%; height: auto; font-family: var(--body); }
svg.kuvaaja .akseli { stroke: var(--hair-strong); stroke-width: 1; }
svg.kuvaaja .apuviiva { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 3 3; }
svg.kuvaaja .teksti { fill: var(--ink-2); font-size: 10px; }
svg.kuvaaja .piste { fill: color-mix(in srgb, var(--accent) 70%, transparent); stroke: var(--ink); stroke-width: 0.6; }
svg.kuvaaja .piste.poikkeava { fill: color-mix(in srgb, var(--varo) 70%, transparent); stroke: var(--varo); }
svg.kuvaaja .suora { stroke: var(--water); stroke-width: 2; fill: none; }
svg.kuvaaja .pylvas { fill: color-mix(in srgb, var(--water) 45%, transparent); }
svg.kuvaaja .pylvas.saasto { fill: color-mix(in srgb, var(--accent) 55%, transparent); }