/* Kielikoetreeni: yhteinen tyylitiedosto. Mobiili ensin, toimii 375 px:n leveydellä ilman vaakavieritystä.
   Värit: Tasokolmen paletti (brandi/tasokolme/paletti.ts ja TASOKOLME_BRANDI.md luku 2.2), jonka Kielikoetreeni peri.
   Taulu = brändiväri, lakka = harvinainen korostus (yksi nappi näkymässä), liitu = neutraalit.
   Kontrastit: brandi/vaariauditti.ts ja kielikoetreeni/sivu/vaariauditti.ts (29.10.2026). */
:root {
  --tausta: #F5F7F6;          /* liitu-50 */
  --pinta: #FFFFFF;           /* kortti */
  --pinta-2: #EBF0EE;         /* liitu-100: luonnosbanneri, tehtävän laatikko */
  --kentta: #FFFFFF;          /* lomakekentän tausta */
  --teksti: #202D29;          /* liitu-900, 13,3:1 */
  --hiljainen: #4B5753;       /* liitu-700, 7,0:1 */
  --raja: #DBE1DF;            /* liitu-200: erottimet, ei kenttien reunoiksi */
  --reuna-kentta: #858F8B;    /* liitu-500, 3,1–3,3:1 */
  --korostus: #17624E;        /* taulu-700: linkit ja päänappi */
  --korostus-hover: #0C4B3D;  /* taulu-800 */
  --nappi-teksti: #FFFFFF;
  --valittu: #E1F4E9;         /* taulu-100: suostumus, valittu tila */
  --lakka: #FC9A5E;           /* lakka-400: vain yksi nappi näkymässä */
  --lakka-hover: #FFA86A;
  --lakka-teksti: #121C19;    /* liitu-950, 8,2:1 lakalla */
  --lakka-merkki: #D56927;    /* lakka-500: nauhoituksen merkkivalo (grafiikka, 3,6:1) */
  --virhe: #B02B27;
  --sade-sm: 6px;
  --sade: 12px;
  --leveys: 44rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tausta: #121C19;        /* liitu-950 */
    --pinta: #202D29;         /* liitu-900 */
    --pinta-2: #37433F;       /* liitu-800 */
    --kentta: #121C19;        /* liitu-950 */
    --teksti: #EBF0EE;        /* liitu-100 */
    --hiljainen: #DBE1DF;     /* liitu-200: liitu-300 jäi kortilla Lc 72:een, tavoite 75 (VARITEORIA 6) */
    --raja: #37433F;          /* liitu-800 */
    --reuna-kentta: #858F8B;  /* liitu-500, 4,3:1 kortilla */
    --korostus: #C9E8D8;      /* taulu-200: taulu-300 jäi kortilla Lc 73:een, tavoite 75 */
    --korostus-hover: #E1F4E9;/* taulu-100 */
    --nappi-teksti: #121C19;
    --valittu: #063129;       /* taulu-900 */
    --lakka-merkki: #FC9A5E;
    --virhe: #FCC0B8;         /* OKLCH 0,86 0,07 27, Lc 76 kenttäpohjalla */
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tausta);
  color: var(--teksti);
  font-family: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

a { color: var(--korostus); text-underline-offset: 0.15em; }
a:hover { color: var(--korostus-hover); }

.ohita {
  position: absolute; left: 0.5rem; top: -4rem;
  background: var(--pinta); color: var(--korostus);
  padding: 0.5rem 1rem; border-radius: var(--sade-sm); z-index: 10;
}
.ohita:focus { top: 0.5rem; }

.luonnos {
  background: var(--pinta-2);
  border-bottom: 1px solid var(--reuna-kentta);
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  text-align: center;
}

header.yla { background: var(--pinta); border-bottom: 1px solid var(--raja); }
header.yla .sisalto {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.merkki { display: block; line-height: 0; }
.merkki img { display: block; height: 2rem; width: auto; }
nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; }
nav a { font-size: 0.95rem; display: inline-block; padding: 0.35rem 0; }
nav a[aria-current="page"] { font-weight: 700; }

.sisalto { max-width: var(--leveys); margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
main { padding-bottom: 3rem; }

h1, h2, h3 { line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.85rem; margin: 1.75rem 0 0.75rem; }
h2 { font-size: 1.4rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.12rem; margin: 1.5rem 0 0.4rem; }
.johdanto { font-size: 1.15rem; margin-top: 0; }
.ylarivi { margin: 1.75rem 0 0; }
.otsikko-ylarivin-alla { margin-top: 0.25rem; }
.tulos-otsikko { margin-top: 1rem; }
.hiljainen { color: var(--hiljainen); }

.kortti {
  background: var(--pinta);
  border: 1px solid var(--raja);
  border-radius: var(--sade);
  padding: 1.25rem 1rem;
  margin: 1.25rem 0;
}
@media (min-width: 34rem) { .kortti { padding: 1.5rem; } }
.kortti > :first-child { margin-top: 0; }
.kortti > :last-child { margin-bottom: 0; }

.huomio {
  border-left: 4px solid var(--korostus);
  background: var(--pinta);
  padding: 0.75rem 1rem;
  margin: 1.25rem 0;
  border-radius: 0 var(--sade-sm) var(--sade-sm) 0;
}
.huomio p { margin: 0.35rem 0; }

/* Napit. Päänappi = taulu. Lakka-nappi vain kerran näkymässä (VARITEORIA 3.1). */
button, .nappi {
  display: inline-block;
  font: inherit; font-weight: 700;
  background: var(--korostus); color: var(--nappi-teksti);
  border: 2px solid transparent; border-radius: var(--sade);
  padding: 0.75rem 1.3rem; min-height: 3rem;
  cursor: pointer; text-decoration: none; text-align: center;
}
button:hover, .nappi:hover { background: var(--korostus-hover); color: var(--nappi-teksti); }
.nappi.lakka { background: var(--lakka); color: var(--lakka-teksti); }
.nappi.lakka:hover { background: var(--lakka-hover); color: var(--lakka-teksti); }
button.toissijainen, .nappi.toissijainen {
  background: transparent; color: var(--korostus); border-color: var(--korostus);
}
button.toissijainen:hover, .nappi.toissijainen:hover { background: var(--valittu); color: var(--korostus); }
button:disabled { opacity: 0.6; cursor: default; }
.napit { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.napit > * { flex: 1 1 100%; }
@media (min-width: 34rem) { .napit > * { flex: 0 1 auto; } }

:focus-visible { outline: 3px solid var(--korostus); outline-offset: 2px; }
.nappi.lakka:focus-visible { outline-color: var(--teksti); }

/* Lomakkeet */
label { display: block; font-weight: 700; margin: 1.1rem 0 0.3rem; }
.ohje { display: block; font-weight: 400; font-size: 0.95rem; color: var(--hiljainen); margin-top: 0.15rem; }
input[type="email"], input[type="text"], select {
  width: 100%; font: inherit; color: inherit;
  background-color: var(--kentta);
  border: 1px solid var(--reuna-kentta); border-radius: var(--sade-sm);
  padding: 0.6rem 0.7rem; min-height: 3rem;
}

.suostumus {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-weight: 400; background: var(--valittu);
  border-radius: var(--sade); padding: 0.8rem; margin-top: 1.25rem;
}
.suostumus input { margin-top: 0.3rem; width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--korostus); }
/* Hyväksy kaikki ja sen alla erilliset valinnat yhdessä laatikossa (lomake.js), sama malli kuin Maalämpöarviossa. */
.suostumukset { background: var(--valittu); border-radius: var(--sade); padding: 0.8rem; margin-top: 1.25rem; }
.suostumukset .suostumus { background: none; padding: 0; margin: 0.7rem 0 0; }
.suostumukset .suostumus.kaikki { margin-top: 0; padding-bottom: 0.7rem; border-bottom: 1px solid var(--raja); font-weight: 700; }
form button[type="submit"] { width: 100%; margin-top: 1.25rem; }
@media (min-width: 34rem) { form button[type="submit"] { width: auto; } }

.virheet {
  border: 2px solid var(--virhe); color: var(--virhe); background: var(--kentta);
  border-radius: var(--sade); padding: 0.6rem 1rem; margin-top: 1rem;
}
.virheet ul { margin: 0.25rem 0; padding-left: 1.2rem; }
.virheet p { margin: 0.25rem 0; }

/* Piilokenttä roskapostia vastaan: ihminen ei näe sitä, botti täyttää. */
.hunaja { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* Etusivu */
.alku .napit { margin-bottom: 0.5rem; }
.sisaltolista { list-style: none; padding: 0; margin: 0; }
.sisaltolista li { border-top: 1px solid var(--raja); padding: 0.9rem 0; }
.sisaltolista li:first-child { border-top: 0; padding-top: 0; }
.sisaltolista strong { display: block; }
.sisaltolista.kortti, .viikot.kortti { padding: 0.5rem 1rem; }
@media (min-width: 34rem) { .sisaltolista.kortti, .viikot.kortti { padding: 0.75rem 1.5rem; } }
.sisaltolista.kortti li:first-child, .viikot.kortti li:first-child { padding-top: 0.9rem; }
.hinta { font-size: 1.9rem; font-weight: 700; margin: 0.1rem 0; font-variant-numeric: tabular-nums; }
.hinnat { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .hinnat { grid-template-columns: 1fr 1fr; } }
.hinnat .kortti { margin: 0; }
.ilmaiset { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .ilmaiset { grid-template-columns: 1fr 1fr; } }
.ilmaiset .kortti { margin: 0; display: flex; flex-direction: column; }
.ilmaiset .kortti p { flex: 1 0 auto; }
.lahde { font-size: 0.9rem; color: var(--hiljainen); }

/* Koepäivälaskuri */
.luvut { display: grid; gap: 0.75rem; margin: 1rem 0; }
@media (min-width: 34rem) { .luvut { grid-template-columns: 1fr 1fr; } }
.luku { border: 1px solid var(--raja); border-radius: var(--sade); padding: 0.75rem 1rem; }
.luku .arvo { display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tiedot { margin: 0; }
.tiedot div { border-top: 1px solid var(--raja); padding: 0.6rem 0; }
.tiedot div:first-child { border-top: 0; padding-top: 0; }
.tiedot dt { color: var(--hiljainen); font-size: 0.95rem; }
.tiedot dd { margin: 0; font-weight: 700; }
.viikot { list-style: none; padding: 0; margin: 0; }
.viikot li { border-top: 1px solid var(--raja); padding: 0.85rem 0; }
.viikot li:first-child { border-top: 0; }
.viikot .aika { display: block; font-size: 0.95rem; color: var(--hiljainen); }
.viikot .ilmo { display: block; margin-top: 0.35rem; font-weight: 700; }

/* Puhetehtävä */
.tehtava h2 { margin-top: 0; font-size: 1.3rem; }
.tehtavateksti {
  background: var(--pinta-2); border-radius: var(--sade-sm);
  padding: 0.9rem 1rem; margin: 0.75rem 0; font-size: 1.12rem;
}
.tehtavateksti p { margin: 0.4rem 0; }
.tehtavateksti ul { margin: 0.4rem 0 0.6rem; padding-left: 1.3rem; }
.ajat { margin: 0.5rem 0 0; padding: 0; list-style: none; color: var(--hiljainen); font-size: 0.95rem; }
.vaihe { margin-top: 1.25rem; border-top: 1px solid var(--raja); padding-top: 1rem; }
.vaihe h3 { margin-top: 0; }
.ajastin { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 0.25rem 0; }
.palkki { height: 0.5rem; background: var(--raja); border-radius: 999px; overflow: hidden; }
.palkki span { display: block; height: 100%; width: 100%; background: var(--korostus); transform-origin: left; }
.nauhoittaa { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.nauhoittaa::before {
  content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--lakka-merkki);
  animation: vilkku 1.2s ease-in-out infinite;
}
@keyframes vilkku { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .nauhoittaa::before { animation: none; } }
audio { width: 100%; margin: 0.5rem 0; }
.tarkistus { list-style: none; padding: 0; margin: 0.5rem 0; }
.tarkistus li { margin: 0.35rem 0; }
.tarkistus label { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; margin: 0; }
.tarkistus input { margin-top: 0.3rem; width: 1.2rem; height: 1.2rem; flex: none; accent-color: var(--korostus); }

/* Tietosuojaseloste */
.ehtoteksti h2 { font-size: 1.2rem; margin-top: 1.9rem; }
.ehtoteksti ul { padding-left: 1.3rem; }
.ehtoteksti li { margin: 0.35rem 0; }
.taulukko { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--raja); }

footer.ala {
  border-top: 1px solid var(--raja); background: var(--pinta);
  font-size: 0.95rem; color: var(--hiljainen); padding: 1.5rem 0 2rem;
}
footer.ala p { margin: 0.35rem 0; }
footer.ala a { display: inline-block; margin: 0 1rem 0.35rem 0; padding: 0.2rem 0; }
.ala .laki { font-size: 0.82rem; }