/* Verstas — opas puutöihin. 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);
}
.kortti > h2 {
  font-family: var(--mono);
  margin: 0 0 14px;
  font-size: calc(11px * var(--tekstikoko));
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-2);
  font-weight: 400;
}

/* ---------- 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; }

.teksti h3 {
  font-family: var(--display);
  font-size: calc(17px * var(--tekstikoko));
  font-weight: 600;
  margin: 1.6em 0 .5em;
  letter-spacing: -.2px;
}
.teksti h3:first-child { margin-top: 0; }
.teksti a { color: var(--accent); text-underline-offset: 3px; }

/* ---------- 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; }
.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; }

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); }

/* .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; }
}