:root {
  --bg: #ffffff; --pinta: #ffffff; --pinta2: #f5f7f9; --teksti: #0f172a; --himmea: #475569; --hento: #94a3b8;
  --reuna: #e2e8f0; --reuna-vahva: #cbd5e1; --korostus: #0a2f5c; --korostus-hover: #06203f; --korostus-teksti: #ffffff;
  --korostus-vaalea: #eef2f7; --varoitus: #8a5a00; --varoitus-bg: #fdf6e7;
  --virhe: #b42318; --sarja1: #0a2f5c; --sarja2: #b4532a; --sarja3: #2f6fb3;
  --varjo: none; --r: 2px; --leveys: 1120px; --reunus: clamp(20px, 5vw, 48px);
  --fontti: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220; --pinta: #0f172a; --pinta2: #131d33; --teksti: #e8edf4; --himmea: #a3b1c4; --hento: #6b7a90;
    --reuna: #1f2a3d; --reuna-vahva: #2c3a52; --korostus: #8cb4e6; --korostus-hover: #b0cdf0; --korostus-teksti: #0b1220;
    --korostus-vaalea: #16233a; --varoitus: #f2c46b; --varoitus-bg: #2a2314;
    --virhe: #ff8a80; --sarja1: #8cb4e6; --sarja2: #ec9a73; --sarja3: #6fa8e8;
    color-scheme: dark;
  }
}
* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--teksti); font: 16px/1.6 var(--fontti);
  font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }
a { color: var(--korostus); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: .2em 0 .45em; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 1.8em 0 .6em; }
h3 { font-size: 1.0625rem; margin: 1.2em 0 .4em; letter-spacing: -.01em; }
.sisalto { max-width: var(--leveys); margin: 0 auto; padding: 0 var(--reunus); }
.kapea { max-width: 760px; margin-left: 0; }
.sisalto.kapea { margin: 0 auto; }
.yla-otsikko { margin: 0 0 16px; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--korostus); }
.osio-otsikko { margin: 64px 0 0; padding: 0 0 16px; border-bottom: 1px solid var(--teksti); font-size: .8125rem;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.ylapalkki { background: var(--bg); border-bottom: 1px solid var(--reuna); }
.ylapalkki .sisalto { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; }
.logo { font-weight: 500; color: var(--teksti); text-decoration: none; font-size: 1.125rem; letter-spacing: -.01em; }
.logo span { font-weight: 800; color: var(--korostus); }
.valikko { display: flex; gap: 24px; margin-left: auto; flex-wrap: wrap; align-items: center; font-size: .9375rem; }
.valikko a { color: var(--himmea); text-decoration: none; }
.valikko a:hover, .valikko a.aktiivinen { color: var(--teksti); }
.valikko a.aktiivinen { box-shadow: inset 0 -2px 0 var(--korostus); }
.valikko a.nappi { box-shadow: none; }

.nappi { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
  border: 1px solid var(--korostus); border-radius: var(--r); cursor: pointer;
  background: var(--korostus); color: var(--korostus-teksti) !important; text-decoration: none;
  font: inherit; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; transition: background-color .15s ease; }
.nappi:hover { background: var(--korostus-hover); border-color: var(--korostus-hover); }
.nappi.toissijainen { background: transparent; color: var(--teksti) !important; border-color: var(--reuna-vahva); }
.nappi.toissijainen:hover { border-color: var(--teksti); }
.valikko .nappi { min-height: 38px; padding: 0 16px; }
.nappi:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--korostus); outline-offset: 2px; }

main { padding: 40px 0 88px; }
.hero { padding: clamp(32px, 7vw, 88px) 0 clamp(24px, 4vw, 48px); }
.hero h1 { max-width: 16em; }
.hero p.ingressi, .ingressi { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--himmea); max-width: 38em; }

.kortti { background: var(--pinta); border: 1px solid var(--reuna); border-radius: var(--r); padding: 24px; }
.ruudukko { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kaksi { display: grid; gap: 32px; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
@media (max-width: 800px) { .kaksi { grid-template-columns: 1fr; } }

/* Ominaisuuslista: ruudukko, check-merkit, 1px erottimet */
.ominaisuudet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ominaisuudet li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; padding: 28px 28px 32px 0;
  border-bottom: 1px solid var(--reuna); }
.ominaisuudet li:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--reuna); }
.ominaisuudet h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.ominaisuudet p { margin: 0; color: var(--himmea); }
.check { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--korostus); stroke-width: 2; stroke-linecap: square; }
@media (max-width: 900px) {
  .ominaisuudet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ominaisuudet li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .ominaisuudet li:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--reuna); }
}
@media (max-width: 640px) {
  .ominaisuudet { grid-template-columns: 1fr; }
  .ominaisuudet li, .ominaisuudet li:nth-child(even) { padding: 24px 0; border-left: 0; }
}

/* Toimintakehote */
.toiminto { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; margin-top: 64px;
  padding: clamp(24px, 4vw, 40px); background: var(--pinta2); border: 1px solid var(--reuna); border-left: 3px solid var(--korostus); }
.toiminto h2 { margin: 0 0 6px; }
.toiminto p { margin: 0; color: var(--himmea); }
.toiminto .nappi::after { content: '→'; margin-left: 12px; font-weight: 500; }
@media (max-width: 720px) { .toiminto { grid-template-columns: 1fr; } .toiminto .nappi { justify-self: start; } }

label { display: block; font-size: .875rem; font-weight: 600; margin: 14px 0 6px; }
label small { font-weight: 400; color: var(--himmea); }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=date], input[type=search], textarea, select {
  width: 100%; min-height: 42px; padding: .5em .75em; border: 1px solid var(--reuna-vahva); border-radius: var(--r);
  background: var(--pinta); color: var(--teksti); font: inherit; }
input:hover, select:hover { border-color: var(--himmea); }
.valinta { display: flex; gap: 8px; align-items: center; font-weight: 400; }
details.lisaa summary { cursor: pointer; margin-top: 16px; color: var(--korostus); font-weight: 600; }

.luvut { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--reuna); border-left: 1px solid var(--reuna); }
.luku { background: var(--pinta); padding: 14px 16px; border-right: 1px solid var(--reuna); border-bottom: 1px solid var(--reuna); }
.luku .nimi { font-size: .8125rem; color: var(--himmea); }
.luku .arvo { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.luku.paa { background: var(--korostus); color: var(--korostus-teksti); }
.luku.paa .nimi { color: var(--korostus-teksti); opacity: .8; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--reuna); vertical-align: top; }
thead th, tr:first-child th { font-size: .8125rem; font-weight: 600; color: var(--himmea); border-bottom-color: var(--teksti); }
td.num, th.num { text-align: right; white-space: nowrap; }
.taulu-rulla { overflow-x: auto; }

.huomio { background: var(--varoitus-bg); color: var(--teksti); border: 1px solid var(--reuna); border-left: 3px solid var(--varoitus);
  padding: 14px 16px; margin: 20px 0; }
.virhe { color: var(--virhe); font-size: .9rem; }
.himmea { color: var(--himmea); }
.pieni { font-size: .875rem; }

.hinnat td:last-child { font-weight: 700; }
.kaavio { width: 100%; height: auto; display: block; }
.kaavio text { fill: var(--himmea); font-size: 11px; }
.selite { display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--himmea); }
.selite i { display: inline-block; width: 12px; height: 3px; vertical-align: middle; margin-right: 6px; }

.alapalkki { border-top: 1px solid var(--reuna); padding: 20px 0; color: var(--hento); font-size: .8125rem; }
.alapalkki .sisalto { display: flex; gap: 8px 24px; flex-wrap: wrap; align-items: center; }
.alapalkki .sisalto > :last-child { margin-left: auto; }
.alapalkki .pieni { font-size: .75rem; }
.alapalkki .himmea { color: var(--hento); }
.alapalkki a { color: var(--himmea); text-decoration: none; }
.alapalkki a:hover { color: var(--teksti); text-decoration: underline; }
.lomake { max-width: 420px; }
.lomake .nappi { width: 100%; margin-top: 18px; }
.ilmoitus { background: var(--korostus-vaalea); border: 1px solid var(--reuna); border-left: 3px solid var(--korostus); padding: 12px 16px; margin-bottom: 20px; }
.ohje-nappi { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; padding: 0;
  border: 1px solid var(--himmea); border-radius: 50%; background: none; color: var(--himmea);
  font: 700 11px/1 inherit; cursor: pointer; vertical-align: 1px; }
.ohje-nappi:hover, .ohje-nappi[aria-expanded=true] { border-color: var(--sarja1); color: var(--sarja1); }
.ohje { margin: 0 0 6px; padding: 8px 10px; border-left: 3px solid var(--sarja1); background: var(--korostus-vaalea);
  font-size: .85rem; line-height: 1.45; color: var(--teksti); }
.valitsin { display: inline-flex; border: 1px solid var(--reuna-vahva); border-radius: var(--r); overflow: hidden; margin: 4px 0 8px; }
.valitsin button { border: 0; background: none; color: var(--himmea); font: inherit; font-size: .85rem; padding: 5px 12px; cursor: pointer; }
.valitsin button[aria-pressed=true] { background: var(--korostus); color: var(--korostus-teksti); font-weight: 600; }
.tavoitteet { margin: 16px 0 4px; padding: 4px 12px 12px; border: 1px solid var(--reuna); border-radius: var(--r); }
.tavoitteet legend { padding: 0 6px; font-weight: 700; font-size: .95rem; }
.tavoitteet legend small { font-weight: 400; color: var(--himmea); }
.mallivalitsin { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 50;
  display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; overflow-x: auto; max-width: calc(100% - 16px); white-space: nowrap;
  padding: 6px 8px; border-radius: 2px; background: #111; color: #eee; font: 13px/1.2 system-ui, sans-serif;
  border: 1px solid #333; }
.mallivalitsin span { padding: 0 6px; opacity: .7; }
@media (max-width: 600px) { .mallivalitsin span { display: none; } .mallivalitsin a { padding: 5px 8px; font-size: 12px; } }
.mallivalitsin a { color: #eee; text-decoration: none; padding: 5px 10px; border-radius: 2px; }
.mallivalitsin a.valittu { background: #fff; color: #111; font-weight: 600; }
.tunnistus-kuvat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 16px; }
@media (max-width: 720px) { .tunnistus-kuvat { grid-template-columns: 1fr; } }
.kamera h3 { margin: 0 0 4px; }
.kamera > p { margin: 0 0 10px; }
.kamera-ruutu { position: relative; overflow: hidden; background: #0b1220; border: 1px solid var(--reuna-vahva); }
.kamera[data-muoto=vaaka] .kamera-ruutu { aspect-ratio: 4 / 3; }
.kamera[data-muoto=pysty] .kamera-ruutu { aspect-ratio: 3 / 4; max-height: 70vh; margin: 0 auto; }
.kamera-ruutu video, .kamera-ruutu .kamera-kuva { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kamera-ruutu video.peili { transform: scaleX(-1); }
.kamera-maski { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kamera-maski path { fill: rgba(11, 18, 32, .55); }
.kamera-maski .kehys { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 8 6; }
.kamera-kuva:not([hidden]) ~ .kamera-maski, .kamera-ruutu:has(.kamera-kuva:not([hidden])) .kamera-maski { display: none; }
.kamera-aloitus { position: absolute; inset: 0; display: grid; place-items: center; }
.kamera-napit { display: flex; gap: 12px; margin-top: 12px; }
.kamera-tila { min-height: 1.4em; margin: 8px 0 0; color: var(--himmea); }
.tunnistus-tarkistus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 800px) { .tunnistus-tarkistus { grid-template-columns: 1fr; } }
.tunnistus-tarkistus img { width: 100%; height: auto; border: 1px solid var(--reuna); background: var(--pinta2); }
.asetukset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 800px) { .asetukset { grid-template-columns: 1fr; } }
.asetukset h2 { margin-top: 0; font-size: 1.15rem; }
.varakoodit { padding: 12px 16px; border: 1px solid var(--reuna); background: var(--pinta2); font-size: .9rem; }
.kayttoonotto { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--reuna); }
.kayttoonotto li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--reuna); }
.kayttoonotto .valmis { color: var(--himmea); }
.kayttoonotto .tila { width: 20px; height: 20px; border: 1px solid var(--reuna-vahva); display: grid; place-items: center; }
.kayttoonotto .valmis .tila { background: var(--korostus); border-color: var(--korostus); }
.kayttoonotto .valmis .tila svg { stroke: var(--korostus-teksti); }
/* Tilin valikko yläpalkin oikeassa reunassa */
.tilivalikko { position: relative; }
.tilivalikko summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px;
  border: 1px solid var(--reuna-vahva); border-radius: var(--r); cursor: pointer; color: var(--teksti); font-weight: 600; }
.tilivalikko summary::-webkit-details-marker { display: none; }
.tilivalikko-nimi { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tilivalikko-kuvake { width: 16px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
.tilivalikko[open] summary { border-color: var(--teksti); }
.tilivalikko-sisalto { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px;
  background: var(--pinta); border: 1px solid var(--reuna-vahva); padding: 6px 0; }
.tilivalikko-sisalto a, .tilivalikko-sisalto button { display: block; width: 100%; padding: 9px 16px; text-align: left;
  color: var(--teksti); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.tilivalikko-sisalto a:hover, .tilivalikko-sisalto button:hover { background: var(--pinta2); }
.tilivalikko-sisalto form { border-top: 1px solid var(--reuna); margin-top: 6px; padding-top: 6px; }
.tilivalikko-otsikko { padding: 8px 16px 4px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--himmea);
  overflow: hidden; text-overflow: ellipsis; }
.tilivalikko-otsikko:first-child { text-transform: none; letter-spacing: 0; font-weight: 400; }
@media (max-width: 640px) {
  .ylapalkki .sisalto { flex-wrap: nowrap; }
  .valikko .vain-leveana { display: none; }
  .tilivalikko-nimi { display: none; }
  .tilivalikko summary { padding: 0 10px; }
}
.lyhyesti { margin: 24px 0 32px; padding: 20px 24px; background: var(--pinta2); border: 1px solid var(--reuna); border-left: 3px solid var(--korostus); }
.lyhyesti-otsikko { margin: 0 0 8px; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--korostus); }
.lyhyesti ul { margin: 0; padding-left: 20px; }
.lyhyesti li { margin: 6px 0; }
.lyhyesti-pvm { margin: 12px 0 0; font-size: .8125rem; color: var(--himmea); }
.ukk details { border-bottom: 1px solid var(--reuna); padding: 16px 0; }
.ukk summary { cursor: pointer; font-weight: 700; font-size: 1.0625rem; }
.ukk details p { margin: 10px 0 0; color: var(--teksti); }
.oppaat-lista { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--teksti); }
.oppaat-lista li { border-bottom: 1px solid var(--reuna); }
.oppaat-lista a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding: 20px 0; color: inherit; text-decoration: none; }
.oppaat-lista a:hover h2 { color: var(--korostus); text-decoration: underline; }
.oppaat-lista h2 { margin: 0; font-size: 1.15rem; }
.oppaat-lista p { margin: 0; grid-column: 1; color: var(--himmea); }
.oppaat-lista time { grid-row: 1; grid-column: 2; font-size: .8125rem; color: var(--himmea); white-space: nowrap; }