/*
 * Lomake: oletustyyli (spec § 6). Mobiili ensin, järjestelmäfontti, vaalea ja tumma tila, ei ulkoisia resursseja.
 *
 * Muokkaus muuttujilla. Etusija: tämä tiedosto → istutuksen theme.css (konffi teema_css) → lomakkeen brandi, jonka
 * lomake.js asettaa <html>-elementin muuttujiksi. Aseta theme.css:ssä muuttujat :root-valitsimeen, esim.
 *   :root { --lomake-vari: #1f6f5c; --lomake-pyoristys: 6px; }
 * CSP: ei inline-tyylejä eikä data:-kuvia. Nuolet ja merkit piirretään reunoilla ja clip-pathilla.
 */

:root {
  --lomake-vari: #3651d4;            /* brändi: napit, valinnat */
  --lomake-vari-teksti: #ffffff;     /* teksti brändivärin päällä */
  --lomake-korostus: var(--lomake-vari);   /* linkit, fokus, reunat (tummassa tilassa vaalennettu) */
  --lomake-tausta: #f3f4f7;
  --lomake-pinta: #ffffff;
  --lomake-teksti: #1a1e26;
  --lomake-heikko: #586070;
  --lomake-reuna: #e0e3e9;           /* koristeelliset erottimet */
  --lomake-reuna-syote: #868e9c;     /* syötteiden reunat: vähintään 3:1 pintaa vasten (WCAG 1.4.11) */
  --lomake-hover: #f1f3f7;
  --lomake-virhe: #c22a1d;
  --lomake-onni: #1f8a4c;
  --lomake-tahti: #f2a614;
  --lomake-tahti-tyhja: #d3d7df;
  --lomake-fontti-jarjestelma: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --lomake-fontti: var(--lomake-fontti-jarjestelma);
  --lomake-pyoristys: 14px;
  --lomake-leveys: 42rem;
  --lomake-varjo: 0 1px 2px rgb(16 24 40 / 0.04), 0 12px 32px rgb(16 24 40 / 0.07);
  color-scheme: light;
}

/* Tumma tila: järjestelmän mukaan (brandi.teema auto) tai pakotettuna (brandi.teema tumma). Sama lohko kahdesti,
   koska CSS ei osaa yhdistää mediakyselyä ja attribuuttia ilman esikääntäjää. */
@media (prefers-color-scheme: dark) {
  :root:not([data-teema="vaalea"]) {
    --lomake-tausta: #0e1014;
    --lomake-pinta: #171a20;
    --lomake-teksti: #e7e9ee;
    --lomake-heikko: #a3aab7;
    --lomake-reuna: #2a2f38;
    --lomake-reuna-syote: #6b7383;
    --lomake-hover: #1f232b;
    --lomake-virhe: #ff8b7e;
    --lomake-onni: #5bd18b;
    --lomake-tahti-tyhja: #3a404c;
    --lomake-varjo: none;
    color-scheme: dark;
  }
}
:root[data-teema="tumma"] {
  --lomake-tausta: #0e1014;
  --lomake-pinta: #171a20;
  --lomake-teksti: #e7e9ee;
  --lomake-heikko: #a3aab7;
  --lomake-reuna: #2a2f38;
  --lomake-reuna-syote: #6b7383;
  --lomake-hover: #1f232b;
  --lomake-virhe: #ff8b7e;
  --lomake-onni: #5bd18b;
  --lomake-tahti-tyhja: #3a404c;
  --lomake-varjo: none;
  color-scheme: dark;
}
/* Tumma pinta: tumma brändiväri vaalennetaan tekstiä ja reunoja varten (napit pitävät alkuperäisen). */
@supports (color: color-mix(in srgb, red, blue)) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-teema="vaalea"]) { --lomake-korostus: color-mix(in srgb, var(--lomake-vari) 55%, #ffffff); }
  }
  :root[data-teema="tumma"] { --lomake-korostus: color-mix(in srgb, var(--lomake-vari) 55%, #ffffff); }
}

/* --- Pohja ------------------------------------------------------------------------------------ */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--lomake-tausta);
  color: var(--lomake-teksti);
  font-family: var(--lomake-fontti);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lomake {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--lomake-leveys);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--lomake-pinta);
}

.lomake *,
.lomake *::before,
.lomake *::after {
  box-sizing: inherit;
}

.lomake [hidden] {
  display: none !important;
}

.lomake a {
  color: var(--lomake-korostus);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.lomake a:hover {
  text-decoration-thickness: 2px;
}

.lomake img {
  max-width: 100%;
  height: auto;
}

.lomake :focus-visible {
  outline: 3px solid var(--lomake-korostus);
  outline-offset: 2px;
}

.lomake-sisalto {
  flex: 1 0 auto;
  padding: 1.75rem 1.25rem 2.5rem;
}

@media (min-width: 46rem) {
  body {
    padding: 3rem 1.5rem;
  }

  .lomake {
    min-height: 0;
    border: 1px solid var(--lomake-reuna);
    border-radius: calc(var(--lomake-pyoristys) * 1.5);
    box-shadow: var(--lomake-varjo);
    overflow: clip;   /* pyöristys myös tilarivin kulmiin; clip ei riko tilarivin sticky-asemointia */
  }

  .lomake-sisalto {
    padding: 2.75rem 3rem 3rem;
  }
}

.lomake-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Natiivi input pysyy paikallaan näkymättömänä (ruudunlukija ja fokus osuvat oikeaan kohtaan), visuaali on sisaruksessa. */
.lomake-vh-syote {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* --- Yläosa ----------------------------------------------------------------------------------- */

.lomake-logo {
  display: block;
  max-height: 2.75rem;
  width: auto;
  margin: 0 0 1.75rem;
}

.lomake-otsikko {
  margin: 0 0 0.75rem;
  font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.125rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.lomake-otsikko:focus {
  outline: none;   /* ohjelmallinen fokus (kiitos, muokkaus): ruudunlukija lukee otsikon, rengas olisi turha */
}

.lomake-ingressi {
  color: var(--lomake-heikko);
  font-size: 1.0625rem;
}

.lomake-ingressi > :first-child,
.lomake-html > :first-child,
.lomake-tausta > :first-child,
.lomake-lopputeksti > :first-child {
  margin-top: 0;
}

.lomake-ingressi > :last-child,
.lomake-html > :last-child,
.lomake-tausta > :last-child,
.lomake-lopputeksti > :last-child {
  margin-bottom: 0;
}

.lomake-meta {
  margin: 1rem 0 0;
  color: var(--lomake-heikko);
  font-size: 0.875rem;
}

.lomake-tiedote,
.lomake-kayttaja {
  margin: 1.75rem 0 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--lomake-reuna);
  border-left: 4px solid var(--lomake-korostus);
  border-radius: calc(var(--lomake-pyoristys) * 0.6);
  background: var(--lomake-hover);
  font-size: 0.9375rem;
}

.lomake-lataa {
  margin: 4rem 0;
  color: var(--lomake-heikko);
  text-align: center;
}

/* --- Kentät ----------------------------------------------------------------------------------- */

.lomake-lomake {
  margin-top: 1.25rem;
}

.lomake-kentat {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lomake-kentta {
  min-width: 0;
  margin: 0;
  padding: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--lomake-reuna);
}

.lomake-kentat > .lomake-kentta:first-child,
.lomake-valiotsikko + .lomake-kentta {
  border-top: 0;
}

.lomake-kentat > .lomake-kentta:first-child {
  padding-top: 0.75rem;
}

.lomake-kysymys {
  display: block;
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: pretty;
}

/* Legendin marginaali ei toimi kaikissa selaimissa: kellutus tekee siitä tavallisen lohkon. */
legend.lomake-kysymys {
  float: left;
  width: 100%;
}

legend.lomake-kysymys + * {
  clear: left;
}

.lomake-pakollinen {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0 0.5rem;
  border: 1px solid var(--lomake-reuna-syote);
  border-radius: 999px;
  color: var(--lomake-heikko);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  vertical-align: 0.1em;
  white-space: nowrap;
}

.lomake-ohje {
  margin: -0.375rem 0 0.875rem;
  color: var(--lomake-heikko);
  font-size: 0.9375rem;
}

.lomake-valiotsikko {
  margin: 2.5rem 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lomake-kentat > .lomake-valiotsikko:first-child {
  margin-top: 1rem;
}

.lomake-valiotsikko::before {
  content: "";
  display: block;
  width: 2rem;
  height: 3px;
  margin-bottom: 0.75rem;
  border-radius: 3px;
  background: var(--lomake-korostus);
}

.lomake-html {
  padding: 1.25rem 0 0;
  color: var(--lomake-teksti);
}

/* --- Syötteet --------------------------------------------------------------------------------- */

.lomake-syote {
  display: block;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--lomake-reuna-syote);
  border-radius: calc(var(--lomake-pyoristys) * 0.7);
  background: var(--lomake-pinta);
  color: var(--lomake-teksti);
  font: inherit;
  font-size: max(1rem, 16px);   /* alle 16 px: iOS zoomaa kenttään */
  line-height: 1.45;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.lomake-syote::placeholder {
  color: var(--lomake-heikko);
  opacity: 0.8;
}

.lomake-syote:focus {
  border-color: var(--lomake-korostus);
  outline: none;
  box-shadow: 0 0 0 3px var(--lomake-korostus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lomake-korostus) 28%, transparent);
}

.lomake-syote:disabled {
  opacity: 0.75;
  cursor: default;
}

textarea.lomake-syote {
  min-height: 6.5rem;
  resize: vertical;
}

.lomake-kommentti-syote {
  min-height: 4.5rem !important;
}

.lomake-numero {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lomake-numero .lomake-syote {
  max-width: 11rem;
}

.lomake-yksikko {
  color: var(--lomake-heikko);
  font-weight: 500;
}

/* Pudotusvalikon nuoli reunoilla piirrettynä: data:-kuvaa CSP ei salli. */
.lomake-pudotus {
  position: relative;
}

.lomake-pudotus::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.125rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--lomake-heikko);
  border-bottom: 2px solid var(--lomake-heikko);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.lomake-pudotus select {
  padding-right: 2.75rem;
  cursor: pointer;
}

/* --- Valinnat riveinä (radio, monivalinta) ---------------------------------------------------- */

.lomake-vaihtoehdot {
  display: grid;
  gap: 0.5rem;
}

.lomake-vaihtoehto {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--lomake-reuna);
  border-radius: calc(var(--lomake-pyoristys) * 0.7);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.lomake-vaihtoehto input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--lomake-vari);
  cursor: inherit;
}

@media (hover: hover) {
  .lomake-vaihtoehto:hover {
    background: var(--lomake-hover);
  }
}

.lomake-vaihtoehto:has(input:checked) {
  border-color: var(--lomake-korostus);
  background: var(--lomake-hover);
  background: color-mix(in srgb, var(--lomake-korostus) 8%, var(--lomake-pinta));
}

.lomake-vaihtoehto:has(input:disabled:not(:checked)) {
  opacity: 0.55;
  cursor: default;
}

/* --- Chip-napit (valinta napit, kyllä/ei) ----------------------------------------------------- */

.lomake-napit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lomake-nappivalinta {
  position: relative;
  display: inline-flex;
}

.lomake-nappivalinta > span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 1.5px solid var(--lomake-reuna-syote);
  border-radius: 999px;
  background: var(--lomake-pinta);
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .lomake-nappivalinta:hover > span {
    background: var(--lomake-hover);
  }
}

.lomake-nappivalinta:active > span {
  transform: scale(0.97);
}

.lomake-nappivalinta input:checked + span {
  border-color: var(--lomake-vari);
  background: var(--lomake-vari);
  color: var(--lomake-vari-teksti);
}

/* Valinnan merkki: tila ei ole pelkän värin varassa (WCAG 1.4.1). */
.lomake-nappivalinta input:checked + span::before {
  content: "";
  width: 0.375em;
  height: 0.75em;
  margin: -0.15em 0.6em 0 0;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.lomake-nappivalinta input:focus-visible + span {
  outline: 3px solid var(--lomake-korostus);
  outline-offset: 2px;
}

.lomake-nappivalinta input:disabled + span {
  cursor: default;
}

/* --- Tähdet ----------------------------------------------------------------------------------- */

.lomake-tahdet {
  display: inline-flex;
  flex-direction: column;
  max-width: 100%;
}

.lomake-tahdet-rivi {
  display: flex;
  gap: 0.125rem;
  margin-left: -0.25rem;   /* tähden sisäinen tyhjä tila: ensimmäinen tähti tasaan tekstin kanssa */
}

.lomake-tahti {
  position: relative;
  display: grid;
  flex: 0 1 2.875rem;      /* 46 px kosketusalue; 10 tähteä kapealla näytöllä kutistuu (≥ 24 px, WCAG 2.5.8) */
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lomake-tahti-pohja {
  display: grid;
  width: 88%;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 10px;
}

.lomake-tahti-kuva {
  display: block;
  width: 86%;
  aspect-ratio: 1;
  background: var(--lomake-tahti-tyhja);
  clip-path: polygon(50% 3%, 61.8% 35.5%, 97% 36.5%, 69.2% 58.4%, 79.4% 93%, 50% 72.8%, 20.6% 93%, 30.8% 58.4%, 3% 36.5%, 38.2% 35.5%);
  transition: background-color 0.15s ease, transform 0.25s cubic-bezier(0.3, 1.7, 0.5, 1);
}

.lomake-tahti.on .lomake-tahti-kuva {
  background: var(--lomake-tahti);
}

.lomake-tahti input:checked ~ .lomake-tahti-pohja .lomake-tahti-kuva {
  transform: scale(1.12);
}

/* Fokusrengas pohjaan, ei tähteen: clip-path leikkaisi renkaan pois. */
.lomake-tahti input:focus-visible + .lomake-tahti-pohja {
  outline: 3px solid var(--lomake-korostus);
  outline-offset: 0;
}

/* Esikatselu hiirellä: tähdet osoitettuun asti. Vaatii :has()-tuen, ilman sitä valinta toimii silti. */
@media (hover: hover) {
  .lomake-tahdet-rivi:has(.lomake-tahti:hover input:enabled) .lomake-tahti .lomake-tahti-kuva {
    background: var(--lomake-tahti-tyhja);
  }

  .lomake-tahdet-rivi:has(.lomake-tahti:hover input:enabled) .lomake-tahti:is(:hover, :has(~ .lomake-tahti:hover)) .lomake-tahti-kuva {
    background: var(--lomake-tahti);
    opacity: 0.75;
  }
}

.lomake-tahti:has(input:disabled) {
  cursor: default;
}

.lomake-tahdet-paat,
.lomake-tahdet-selite {
  margin: 0.25rem 0 0;
  color: var(--lomake-heikko);
  font-size: 0.8125rem;
}

.lomake-tahdet-paat {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.lomake-tahdet-selite {
  min-height: 1.3em;
  font-weight: 500;
}

/* --- Lisätieto ja kommentti ------------------------------------------------------------------- */

.lomake-lisat {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin-top: 0.375rem;
}

.lomake-linkkinappi {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--lomake-korostus);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lomake-linkkinappi:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.lomake-linkkinappi:disabled {
  color: var(--lomake-heikko);
  cursor: default;
  text-decoration: none;
}

.lomake-avaa::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.125rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s ease;
}

.lomake-avaa[aria-expanded="true"]::after {
  transform: translateY(15%) rotate(-135deg);
}

.lomake-lisaa::before {
  content: "+";
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1;
}

.lomake-tausta {
  margin-top: 0.25rem;
  padding: 0.875rem 1rem;
  border-radius: calc(var(--lomake-pyoristys) * 0.6);
  background: var(--lomake-hover);
  font-size: 0.9375rem;
  animation: lomake-esiin 0.2s ease-out;
}

.lomake-tausta ul,
.lomake-tausta ol {
  padding-left: 1.25rem;
}

.lomake-kommentti {
  margin-top: 0.5rem;
  animation: lomake-esiin 0.2s ease-out;
}

.lomake-kommentti-otsikko {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--lomake-heikko);
  font-size: 0.875rem;
  font-weight: 500;
}

@keyframes lomake-esiin {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* --- Virheet ---------------------------------------------------------------------------------- */

.lomake-virhe {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.625rem 0 0;
  color: var(--lomake-virhe);
  font-size: 0.9375rem;
  font-weight: 500;
  animation: lomake-esiin 0.2s ease-out;
}

.lomake-virhe::before {
  content: "!";
  display: inline-grid;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1em;
  place-items: center;
  border-radius: 50%;
  background: var(--lomake-virhe);
  color: var(--lomake-pinta);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

.lomake-kentta.on-virhe .lomake-syote,
.lomake-kentta.on-virhe .lomake-vaihtoehto,
.lomake-kentta.on-virhe .lomake-nappivalinta > span {
  border-color: var(--lomake-virhe);
}

/* --- Lähetys ja lopputeksti ------------------------------------------------------------------- */

.lomake-toiminnot {
  margin-top: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--lomake-reuna);
}

/* Hinnallinen lomake: yhteissumma viivan alla napin yläpuolella (lomake.js paivitaYhteensa). */
.lomake-yhteensa {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
}

.lomake-yhteensa-summa {
  font-variant-numeric: tabular-nums;
}

.lomake-yhteensa-lisa {
  color: var(--lomake-heikko);
  font-size: 0.875rem;
}

/* Upotus (palautewidget): mitä isäntäsivun konteksti liittää vastaukseen, "konteksti"-napin takana (alarivi). */
.lomake-liitetaan-lista {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
  color: var(--lomake-heikko);
  font-size: 0.8125rem;
}

.lomake-nappi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.875rem 1.75rem;
  border: 0;
  border-radius: var(--lomake-pyoristys);
  background: var(--lomake-vari);
  color: var(--lomake-vari-teksti);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
  transition: transform 0.1s ease, filter 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .lomake-nappi:hover {
    filter: brightness(1.07);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 6px 18px rgb(0 0 0 / 0.12);
  }
}

.lomake-nappi:active {
  transform: translateY(1px);
}

.lomake-nappi:disabled {
  cursor: progress;
  opacity: 0.7;
}

.lomake-nappi[aria-busy="true"]::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: lomake-pyori 0.7s linear infinite;
}

@keyframes lomake-pyori {
  to {
    transform: rotate(360deg);
  }
}

.lomake-nappi--toissijainen {
  background: transparent;
  color: var(--lomake-korostus);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

@media (hover: hover) {
  .lomake-nappi--toissijainen:hover {
    filter: none;
    background: var(--lomake-hover);
    box-shadow: inset 0 0 0 1.5px currentColor;
  }
}

@media (min-width: 46rem) {
  .lomake-nappi {
    width: auto;
    min-width: 15rem;
  }
}

.lomake-lopputeksti,
.lomake-tietosuoja {
  margin: 1.5rem 0 0;
  color: var(--lomake-heikko);
  font-size: 0.875rem;
}

.lomake-tietosuoja {
  margin-top: 0.75rem;
}

/* Honeypot: ruudun ulkopuolella eikä display:none, jota osa boteista osaa varoa. */
.lomake-hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Tilarivi (alareuna) ---------------------------------------------------------------------- */

.lomake-tila {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 0.5rem 1.25rem;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--lomake-reuna);
  background: var(--lomake-pinta);
  color: var(--lomake-heikko);
  font-size: 0.8125rem;
  line-height: 1.4;
}

@media (min-width: 46rem) {
  .lomake-tila {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}

.lomake-tila-rivi {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.125rem 1rem;
  margin: 0;
}

.lomake-tallennus {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.lomake-tallennus[data-laji="ok"]::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--lomake-onni);
}

.lomake-tallennus[data-laji="virhe"],
.lomake-ilmoitus[data-laji="virhe"] {
  color: var(--lomake-virhe);
  font-weight: 500;
}

.lomake-edistys {
  font-variant-numeric: tabular-nums;
}

.lomake-ilmoitus {
  margin: 0 0 0.25rem;
  color: var(--lomake-teksti);
  font-size: 0.875rem;
}

.lomake-ilmoitus:empty {
  display: none;
}

.lomake[data-tila="lataa"] .lomake-tila {
  visibility: hidden;
}

/* --- Kiitosruutu ------------------------------------------------------------------------------ */

.lomake-kiitos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
}

.lomake-kiitos .lomake-otsikko {
  margin: 1rem 0 0.25rem;
}

.lomake-kiitos-teksti {
  max-width: 30rem;
  margin: 0;
  color: var(--lomake-heikko);
}

.lomake-kiitos-kuva {
  max-width: min(14rem, 70%);
  margin-top: 0.5rem;
}

.lomake-kiitos .lomake-toiminnot {
  margin-top: 1.75rem;
  padding-top: 0;
  border-top: 0;
}

.lomake-merkki {
  width: 4.5rem;
  height: 4.5rem;
  fill: none;
  stroke: var(--lomake-onni);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lomake-merkki-ympyra,
.lomake-merkki-koukku {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: lomake-piirra 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.lomake-merkki-koukku {
  animation-delay: 0.45s;
  animation-duration: 0.35s;
}

@keyframes lomake-piirra {
  to {
    stroke-dashoffset: 0;
  }
}

.lomake-konfetti {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
}

.lomake-konfetti span {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 2px;
}

.lomake-konfetti span.pyorea {
  border-radius: 50%;
}

/* --- Viestisivu (ei löydy, suljettu, kirjautuminen, virhe) ja noscript ------------------------ */

.lomake-viesti {
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.lomake-viesti::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.5rem;
  border: 3px solid var(--lomake-korostus);
  border-radius: 50%;
  opacity: 0.35;
}

.lomake-viesti h1 {
  margin: 0 0 0.625rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lomake-viesti p {
  max-width: 28rem;
  margin: 0 auto;
  color: var(--lomake-heikko);
}

@media (min-width: 46rem) {
  .lomake-viesti {
    padding: 4.5rem 3rem;
  }
}

.lomake-noscript {
  margin: 4rem 1.5rem;
  color: var(--lomake-heikko);
  text-align: center;
}

/* --- Upotus (?upotus=1, iframe isäntäsivun overlayssa) ----------------------------------------- */
/* Isäntä antaa kehyksen ja otsikon, joten sivun tausta, reunat, varjo ja otsakealue jäävät pois. Otsikko pysyy
   ruudunlukijalle (sama piilotus kuin .lomake-vh). Attribuutti tulee palvelimelta (sivu_kuori), ei JS:ltä. */

html[data-upotus] body {
  padding: 0;
  background: transparent;
}

html[data-upotus] .lomake {
  max-width: none;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Kompakti (Teemu 8.10. #21): overlay kutistuu sisällön mukaan ('koko'-viesti), joten turhat välit ja erottimet
   pois. Yläosa näkyy yhtenä rivinä (logo + otsikko), jotta istutuksen brändi näkyy myös popupissa (#20). Oikea reuna
   jättää tilaa isännän sulkunapille. Tallennus- ja edistysrivi jää pois, virheilmoitus näkyy. */
html[data-upotus] .lomake-sisalto {
  padding: 0.875rem 1rem 1rem;
}

html[data-upotus] .lomake-ylaosa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  padding-right: 2.25rem;
}

html[data-upotus] .lomake-logo {
  max-height: 1.75rem;
  margin: 0;
}

html[data-upotus] .lomake-otsikko {
  margin: 0;
  font-size: 1.1875rem;
}

html[data-upotus] .lomake-ingressi {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  padding: 0;
  border: 0;
  color: var(--lomake-heikko);
  font-size: 0.9375rem;
}

html[data-upotus] .lomake-ingressi > :first-child {
  margin-top: 0;
}

html[data-upotus] .lomake-ingressi > :last-child {
  margin-bottom: 0;
}

html[data-upotus] .lomake-lomake {
  margin-top: 0.75rem;
}

html[data-upotus] .lomake-kentta {
  padding: 0.5rem 0;
  border-top: 0;
}

html[data-upotus] .lomake-kysymys {
  margin-bottom: 0.375rem;
}

html[data-upotus] .lomake-toiminnot {
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 0;
}

html[data-upotus] .lomake-tietosuoja {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}

/* Toistuva käyttäjä (lomake.js upotusAsettelu, Teemu 9.10.): ohje Ohje-napin takana. Rivin sisäiset napit ovat tekstin
   kokoisia, eivät erillisiä kosketusnappeja. */
html[data-upotus] .lomake-ylaosa .lomake-avaa,
html[data-upotus] .lomake-tietosuoja .lomake-linkkinappi {
  min-height: 1.5rem;
  padding: 0;
  font-size: inherit;
}

html[data-upotus] .lomake-ylaosa .lomake-avaa {
  font-size: 0.875rem;
}

/* Mobiilinäppäimistön yläpuolella tila on pieni: tekstialue saa kutistua kolmeen riviin (lomake.js TEKSTIALUE_MIN). */
html[data-upotus] textarea.lomake-syote {
  min-height: 4.5rem;
}

/* Tekstikentän alla yksi rivi (lomake.js alarivi, Teemu 10.10. v37): "-nimi" vasemmalla, "konteksti" oikeassa
   reunassa, erittely rivin alla. Nimen napautus vaihtaa sen paikallaan kentäksi (piirraNimiTiivis). */
html[data-upotus] .lomake-alarivi {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 1.75rem;
  color: var(--lomake-heikko);
  font-size: 0.875rem;
}

html[data-upotus] .lomake-kentta.lomake-nimi-tiivis {
  flex: 1;
  min-width: 0;
  padding: 0;
}

html[data-upotus] .lomake-alarivi .lomake-linkkinappi {
  min-height: 1.75rem;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
}

html[data-upotus] .lomake-nimi-nappi {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nimi on linkki kuten paneelin muut (Teemu 11.10. #2266): korostusväri. Valitsin rivin harmaan sääntöä tarkempi. */
html[data-upotus] .lomake-alarivi .lomake-nimi-nappi {
  color: var(--lomake-korostus);
}

html[data-upotus] .lomake-nimi-nappi.on-tyhja {
  opacity: 0.65;
}

/* 1rem: alle 16 px:n kenttä zoomaa iOS Safarissa fokuksessa. */
html[data-upotus] .lomake-nimi-tiivis .lomake-syote {
  width: min(16rem, 100%);
  min-height: 1.75rem;
  padding: 0.125rem 0.5rem;
  font-size: 1rem;
}

html[data-upotus] .lomake-alarivi .lomake-liitetaan {
  flex: none;
  margin-left: auto;
}

html[data-upotus] .lomake-liitetaan::after {
  content: " ▸";
}

html[data-upotus] .lomake-liitetaan[aria-expanded="true"]::after {
  content: " ▾";
}

html[data-upotus] .lomake-tietosuoja-lisat {
  display: block;
  margin-top: 0.25rem;
}

html[data-upotus] .lomake-tila {
  position: static;
  padding: 0 1rem;
  border-top: 0;
}

html[data-upotus] .lomake-tila-rivi {
  display: none;
}

/* Yhteydenottolomake isännän sivun osana (lomake.js data-sivun-osa, SOPIMUS § 8, #2540): ei omaa pintaa, joten isännän
   tausta näkyy lomakkeen läpi. Kentät pitävät pintansa (--lomake-pinta), jotta ne erottuvat. */
html[data-sivun-osa] .lomake,
html[data-sivun-osa] .lomake-tila {
  background: transparent;
}

/* Sivun osana otsikko on isännän sivun oma (h1 toistuisi), ja lomakkeen tekstit alkavat samasta reunasta kuin isännän
   teksti, joten sisäinen reunatäyte (overlayn kompakti padding yllä) ja sulkunapin tila yläosan oikealla pois. Otsikko
   jää ruudunlukijalle (kuten .lomake-vh). Kiitos (.lomake-kiitos) ei muutu: sen otsikko on sisältöä, ei sivun toistoa. */
html[data-sivun-osa] .lomake-sisalto:not(.lomake-kiitos) {
  padding: 0;
}

html[data-sivun-osa] .lomake-ylaosa {
  padding-right: 0;
}

html[data-sivun-osa] .lomake-ylaosa .lomake-otsikko {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Selain maalaa kehykseen läpinäkymättömän taustan (tummana #121212), kun kehyksen dokumentin color-scheme eroaa
   isännän iframe-elementin color-schemestä. Isäntä ei yleensä julista sitä (= light), joten sivun osa pitää lightin
   myös tummalla teemalla: värit tulevat muuttujista, vain selaimen omat osat (esim. valintalistan avautuva lista)
   jäävät vaaleiksi. Specificity (0,2,0) ja paikka tiedoston lopussa voittavat tumman tilan säännöt. */
:root[data-sivun-osa] {
  color-scheme: light;
}

/* --- Liikkeen vähentäminen -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .lomake *,
  .lomake *::before,
  .lomake *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .lomake-konfetti {
    display: none;
  }
}