/* Alhovuori M1. Värit: muunnelman 2 tumma vihreä ja sen vaalea pari (F-021).
   Ei koristegrafiikkaa tässä versiossa. */
/* Piilotettu pysyy piilossa, vaikka luokka antaisi näyttötavan (B-026). */
[hidden] { display: none !important; }
:root {
  --bg: #EEF3EF; --pinta: #FFFFFF; --pinta2: #E3EBE6; --raja: #CFDCD4;
  --teksti: #0E1B17; --hiljainen: #3B4E45; --korostus: #1E6B4A; --korostus-teksti: #17583C;
  --sininen: #2A5C9E; --oranssi: #9A5410; --fokus: #1E6B4A;
  --tumma-bg: #0E1B17; --tumma-teksti: #EAF0EC; --tumma-hiljainen: #B9C7BF;
  --h-bg: #EFF1F0; --h-pinta: #FAFBFA; --h-pinta2: #E5E8E6; --h-raja: #D3D8D5; --h-korostus: #4B5953; --h-korostus-teksti: #3F4B46;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1B17; --pinta: #16271F; --pinta2: #1C3127; --raja: #2F4A3E;
    --teksti: #EAF0EC; --hiljainen: #B9C7BF; --korostus: #7FD1A8; --korostus-teksti: #7FD1A8;
    --sininen: #8FB8F0; --oranssi: #F0A55E; --fokus: #7FD1A8;
    --tumma-bg: #16271F;
    --h-bg: #141716; --h-pinta: #1B1F1D; --h-pinta2: #232826; --h-raja: #353C39; --h-korostus: #AEB9B3; --h-korostus-teksti: #AEB9B3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1B17; --pinta: #16271F; --pinta2: #1C3127; --raja: #2F4A3E;
  --teksti: #EAF0EC; --hiljainen: #B9C7BF; --korostus: #7FD1A8; --korostus-teksti: #7FD1A8;
  --sininen: #8FB8F0; --oranssi: #F0A55E; --fokus: #7FD1A8;
  --tumma-bg: #16271F;
  --h-bg: #141716; --h-pinta: #1B1F1D; --h-pinta2: #232826; --h-raja: #353C39; --h-korostus: #AEB9B3; --h-korostus-teksti: #AEB9B3;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 87.5%; }
html[data-koko="pieni"] { font-size: 75%; }
html[data-koko="suuri"] { font-size: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--teksti);
  font: 1.0625rem/1.6 Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--korostus-teksti); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.25; }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: .3em 0 .4em; }
h2 { font-size: 1.45rem; margin-top: 2em; }
h3 { font-size: 1.15rem; }
img { max-width: 100%; height: auto; }
.pieni { font-size: .9rem; color: var(--hiljainen); }

.ohita { position: absolute; left: -9999px; }
.ohita:focus { left: 16px; top: 8px; z-index: 10; background: var(--pinta); padding: 8px 12px; }

.leveys { max-width: 960px; margin: 0 auto; padding: 0 16px; }
main.leveys { padding-bottom: 48px; }

.ylapalkki { background: var(--pinta); border-bottom: 1px solid var(--raja); }
.ylapalkki-rivi { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 10px 16px; max-width: 960px; margin: 0 auto; }
.logo { gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--teksti); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.valikko { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.valikko ul { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 0; padding: 0; }
.valikko a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; text-decoration: none; color: var(--teksti); }
.valikko a:hover { background: var(--pinta2); }
.valikko a[aria-current] { background: var(--pinta2); color: var(--korostus-teksti); font-weight: 700; }
.asetukset { display: flex; gap: 10px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.kieli select { min-height: 44px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--raja); background: var(--pinta); color: var(--teksti); font: inherit; }
.teemat { display: inline-flex; border: 1px solid var(--raja); border-radius: 10px; overflow: hidden; }
.teemat button { min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--teksti); font: inherit; font-size: .9rem; cursor: pointer; }
.teemat button[aria-pressed="true"] { background: var(--korostus); color: var(--bg); font-weight: 700; }

.alapalkki { border-top: 1px solid var(--raja); color: var(--hiljainen); font-size: .9rem; padding: 24px 16px; text-align: center; }

.avaus { padding: 32px 0 8px; }
.ylaotsikko { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--korostus-teksti); margin: 0; }
.johdanto { font-size: 1.1rem; color: var(--hiljainen); max-width: 46em; }
.tiedot { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 16px 0; }
.tiedot dt { font-weight: 700; }
.tiedot dd { margin: 0; color: var(--hiljainen); }

.polku { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; counter-reset: v; }
.polku li { background: var(--pinta); border: 1px solid var(--raja); border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: baseline; }
.numero { font-weight: 800; color: var(--korostus-teksti); }

.otsikkorivi { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.tilaselite { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 0; font-size: .85rem; color: var(--hiljainen); }
.tila { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.tila-linjattu { color: var(--korostus-teksti); }
.tila-luonnos, .tila-ehdotus { color: var(--sininen); }
.tila-avoin { color: var(--oranssi); }
.tila-tulossa { color: var(--hiljainen); }
.kortti.tulossa { background: var(--pinta2); color: var(--hiljainen); border-style: dashed; }
.kortti.tulossa .kortti-nimi { color: var(--hiljainen); }

.lisat { max-width: 46em; }
.kohdat { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.kohta { display: block; height: 100%; background: var(--pinta); border: 1px solid var(--raja); border-radius: 12px; padding: 14px; text-decoration: none; color: var(--teksti); transition: border-color .15s; }
.kohta:hover, .kohta:focus-visible { border-color: var(--korostus); }
.kohta.on-vaikutus { border-color: var(--sininen); box-shadow: inset 4px 0 0 var(--sininen); }
.kohta.on-riippuvuus { border-color: var(--oranssi); box-shadow: inset 4px 0 0 var(--oranssi); }
.kohta-rivi { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.kohta-nimi { font-weight: 700; }

.kortit { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.kortti { box-sizing: border-box; height: 100%; background: var(--pinta); border: 1px solid var(--raja); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.kortti-rivi { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.kortti-nimi { font-weight: 800; font-size: 1.1rem; margin: 0; }
.kortti p { margin: 0; }
.lue { margin-top: auto; display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; }
.lue + .lue { margin-top: 0; }

.tumma-osio { background: var(--tumma-bg); color: var(--tumma-teksti); border-radius: 16px; padding: 24px 20px; margin: 40px 0 0; }
.tumma-osio h2 { margin-top: 0; }
.tumma-osio a { color: #7FD1A8; }
.tumma-osio .johdanto, .tumma-osio .pieni { color: var(--tumma-hiljainen); }
.kysymykset { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.kysymykset li { border: 1px solid #2F4A3E; border-radius: 12px; padding: 12px 14px; }
.kysymykset.vaalea li { border-color: var(--raja); background: var(--pinta); }
.kysymykset h3 { margin: 0 0 4px; font-size: 1.05rem; }
.kysymykset p { margin: 0; }

.murupolku { font-size: .9rem; margin: 20px 0 0; color: var(--hiljainen); }
.murupolku a { display: inline-flex; min-height: 44px; align-items: center; }
.kohtasivu .leipa, .tekstisivu, .kartta { max-width: 46em; }
.riippuvuudet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; margin: 24px 0; }
.laatikko { background: var(--pinta); border: 1px solid var(--raja); border-radius: 12px; padding: 14px 16px; }
.laatikko h2 { margin: 0 0 6px; font-size: 1rem; }
.laatikko ul { margin: 0; padding-left: 1.2em; }
.riippuu { border-left: 4px solid var(--oranssi); }
.vaikuttaa { border-left: 4px solid var(--sininen); }

.osallistu { margin-top: 32px; background: var(--pinta); border: 1px solid var(--raja); border-radius: 12px; padding: 16px; }
.osallistu h2 { margin-top: 0; }
.osallistu details.lisapohdinta { margin: 16px 0; border: 1px dashed var(--raja); border-radius: 10px; padding: 4px 14px; background: var(--bg); }
.osallistu details.lisapohdinta summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.napit { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.osallistu button, .profiili button, .osallistu textarea { font: inherit; }
.osallistu button, .profiili button { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--raja); background: var(--pinta2); color: var(--teksti); }
.osallistu button.toissijainen { background: transparent; min-height: 36px; padding: 0 10px; font-size: .9rem; }
.osallistu button:disabled { opacity: .6; cursor: not-allowed; }
.osallistu textarea { width: 100%; min-height: 88px; padding: 8px; border-radius: 8px; border: 1px solid var(--raja); background: var(--bg); color: var(--teksti); }
.osallistu label { font-weight: 700; display: block; margin-bottom: 4px; }

.metatiedot { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: .9rem; background: var(--pinta); border: 1px solid var(--raja); border-radius: 12px; padding: 12px 16px; }
.metatiedot dt { font-weight: 700; }
.metatiedot dd { margin: 0; }
.huomio { border-left: 4px solid var(--korostus); padding: 4px 12px; color: var(--hiljainen); }

.taulukko { overflow-x: auto; margin: 16px 0; }
.taulukko table { border-collapse: collapse; font-size: .92rem; }
/* Leveällä näytöllä taulukko saa levitä tekstipalstaa leveämmäksi oikealle,
   mutta ei yli ikkunan (palstan vasen reuna + 960 px leveyden laskelma). */
@media (min-width: 1000px) {
  main .taulukko { width: min(calc(50vw + 432px), 1360px); }
}
.taulukko th, .taulukko td { border: 1px solid var(--raja); padding: 6px 8px; text-align: left; vertical-align: top; }
.taulukko th { background: var(--pinta2); }
.kaavio { margin: 20px 0; background: #FFFFFF; border: 1px solid var(--raja); border-radius: 12px; padding: 12px; overflow-x: auto; }
.kaavio img { display: block; margin: 0 auto; }
.ei-linkkia { color: inherit; }
.lahde { font-size: .9em; }
blockquote { margin: 16px 0; padding: 4px 16px; border-left: 4px solid var(--raja); color: var(--hiljainen); }
code { background: var(--pinta2); padding: 1px 4px; border-radius: 4px; }
pre { background: var(--pinta2); padding: 12px; border-radius: 8px; overflow-x: auto; }

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .asetukset { margin-left: 0; }
  .tiedot, .metatiedot { grid-template-columns: 1fr; }
  .tiedot dd, .metatiedot dd { margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* M2: tavat toimia, näkökulmat ja riippuvuustaulukko (F-009) */
.nakokulmat { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--raja); border-radius: 10px; overflow: hidden; margin: 4px 0 12px; }
.nakokulmat button { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--teksti); font: inherit; cursor: pointer; }
.nakokulmat button[aria-pressed="true"] { background: var(--korostus); color: var(--bg); font-weight: 700; }
.riippuvuustaulu th[scope="row"] { white-space: nowrap; }
.riippuvuustaulu tbody tr:target { outline: 3px solid var(--fokus); }

/* M3: osallistuminen (F-015, F-016), näkyy vain kun kytkin on päällä */
.osallistu button[aria-pressed="true"] { background: var(--korostus); color: var(--bg); font-weight: 700; }
.osallistu input { width: 100%; min-height: 44px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--raja); background: var(--bg); color: var(--teksti); font: inherit; margin-bottom: 8px; }
.kommentit { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.kommentit li { border-top: 1px solid var(--raja); padding-top: 8px; }
.kommentit p { margin: 0 0 4px; }
.aloitus { border: 1px solid var(--korostus); border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.aloitus .ohje h2 { font-size: 1.05rem; }
.osallistu label.valinta { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.osallistu label.valinta input { width: auto; min-height: 0; margin: 0; }
.kommentit .vastaukset { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--raja); display: grid; gap: 8px; }
.kommentit .vastaukset li { border-top: 0; padding-top: 0; }
.kommentti-toiminnot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* F-037: reaktiot kommentteihin. */
.reaktiot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.osallistu button.reaktio-nappi { min-height: 36px; padding: 0 10px; border-radius: 8px; background: transparent; font-size: .85rem; cursor: pointer; }
.osallistu button.reaktio-nappi[aria-pressed="true"] { border: 2px solid var(--korostus); background: transparent; color: var(--teksti); font-weight: 700; }
.reagoijat { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; }
.vastauslomake { display: grid; gap: 6px; margin: 6px 0; }
.vastauslomake textarea { min-height: 4em; }
.kommentit .poistettu { font-style: italic; color: var(--hiljainen); }
.huomautus { border-left: 4px solid var(--korostus); background: var(--pinta); padding: 10px 14px; border-radius: 6px; }
.merkitse { min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--raja); background: transparent; color: var(--teksti); font: inherit; font-size: .85rem; margin: -4px 0 8px; cursor: pointer; }
.merkinnat-linkki { margin-left: 10px; }
.merkitse[aria-pressed="true"] { border-color: var(--korostus); color: var(--korostus); font-weight: 700; }
/* Ulkoiset linkit erottuvat sisäisistä: katkoviiva ja nuoli. */
a.ulkoinen { text-decoration-style: dashed; }
a.ulkoinen::after { content: "\2197"; display: inline-block; margin-left: .15em; font-size: .85em; text-decoration: none; }
.nakymaton { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.testikausi { margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--oranssi); border-radius: 8px; font-weight: 700; }
.osallistu fieldset.tyyppi { border: 0; padding: 0; margin: 0 0 8px; }
.osallistu fieldset.tyyppi legend { font-weight: 700; margin-bottom: 4px; }

.kanta-merkki { display: inline-block; margin-right: .35em; line-height: 1; }

/* Profiilin tunnus (F-027): yksivärinen Noto Emoji (SIL OFL, fontit/), jotta
   valittu väri näkyy. Fontti sisältää vain sallitut emojit. */
@font-face { font-family: "Alhovuori Tunnus"; src: url("/fontit/noto-emoji-tunnus.woff2") format("woff2"); font-display: swap; }
.tunnus { font-family: "Alhovuori Tunnus", sans-serif; font-size: 1.15em; line-height: 1; margin-right: .3em; color: var(--tv, var(--teksti)); }
.v-punainen { --tv: #D64541; } .v-oranssi { --tv: #E07B24; } .v-keltainen { --tv: #C79A00; } .v-vihrea { --tv: #2E9E5B; }
.v-turkoosi { --tv: #12989F; } .v-sininen { --tv: #3D72D9; } .v-violetti { --tv: #8B5CD6; } .v-pinkki { --tv: #D44C98; }
.profiili fieldset { border: 1px solid var(--raja); border-radius: 12px; padding: 12px; margin: 16px 0; }
.profiili [data-emojit], .profiili [data-varit] { display: flex; flex-wrap: wrap; gap: 6px; }
.profiili fieldset label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--raja); border-radius: 10px; cursor: pointer; padding: 0 8px; }
.profiili fieldset label:has(input:checked) { border-color: var(--korostus); box-shadow: 0 0 0 2px var(--korostus); }
.profiili fieldset input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.profiili fieldset label:has(input:focus-visible) { outline: 2px solid var(--korostus); outline-offset: 2px; }
.profiili [data-emojit] .tunnus { font-size: 1.5rem; margin: 0; }
.profiili .vari-pallo { width: 18px; height: 18px; border-radius: 50%; background: var(--tv); margin-right: 6px; }

/* F-028: tunnukselle sama vaalea tausta molemmissa teemoissa. */
.logo-kuva { width: 72px; height: 48px; object-fit: contain; padding: 4px; flex-shrink: 0; background: #f5f2e9; border-radius: 8px; }

/* F-027: profiili teemavalinnan jälkeen, myös kosketusnäytölle. */
.profiililinkki { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--teksti); border: 1px solid var(--raja); border-radius: 10px; }
.profiililinkki:hover { background: var(--pinta2); }

/* F-029: yhteinen testikäyttöilmoitus heti valikkorivin alla. */
.testikausi-ylhaalla:has(.testikausi) { padding-top: 12px; padding-bottom: 12px; }
.profiili .poisto label.valinta { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.profiili .poisto label.valinta input { width: auto; }
.profiili button.vaarallinen { border-color: #C0392B; color: #C0392B; background: transparent; font-weight: 700; }
/* Profiilisivu (F-032). */
.profiili-paa { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.profiili-paa h1 { margin: 0; overflow-wrap: anywhere; }
.profiili-paa p { margin: 0; }
.profiili-ylaotsikko { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hiljainen); }
.profiili-kuva { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--pinta2); border: 1px solid var(--raja); font-size: 2.4rem; margin: 0; }
.profiili-kuva.kirjain { font-size: 1.8rem; font-weight: 800; color: var(--korostus-teksti); }
.profiili-kuva[hidden] { display: none; }
.profiili-valikko { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 8px; }
.profiili-valikko a { padding: 6px 12px; border: 1px solid var(--raja); border-radius: 999px; font-size: .9rem; text-decoration: none; color: var(--teksti); background: var(--pinta); }
.profiili-valikko a:hover { border-color: var(--korostus); }
.paneeli { background: var(--pinta); border: 1px solid var(--raja); border-radius: 12px; padding: 4px 20px 20px; margin: 16px 0; scroll-margin-top: 16px; }
.paneeli h2 { font-size: 1.15rem; margin: 16px 0 12px; }
.profiili fieldset { margin: 0 0 16px; }
.profiili fieldset.tunnukset { border: 0; padding: 0; }
.profiili .esikatselu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profiili [data-esikatselu] { font-weight: 700; font-size: 1.1rem; }
.profiili .napit { display: flex; flex-wrap: wrap; gap: 8px; }
.profiili button.ensisijainen { background: var(--korostus); border-color: var(--korostus); color: var(--bg); font-weight: 700; }
.profiili button:disabled { opacity: .55; cursor: not-allowed; }
.nimimerkki-vaihto label { display: block; font-weight: 600; margin-bottom: 6px; }
.nimimerkki-vaihto .rivi { display: flex; flex-wrap: wrap; gap: 8px; }
.nimimerkki-vaihto input { min-height: 44px; min-width: 0; flex: 1 1 12rem; max-width: 22rem; padding: 0 12px; border-radius: 10px; border: 1px solid var(--raja); background: var(--bg); color: var(--teksti); font: inherit; }
.nimimerkki-vaihto p { margin: 8px 0 0; }
.omat-lista { list-style: none; margin: 0; padding: 0; }
.omat-lista li { border-top: 1px solid var(--raja); padding: 12px 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.omat-lista li:first-child { border-top: 0; }
.omat-lista li p { flex-basis: 100%; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.omat-lista .omat-paikka { font-weight: 700; }
.omat-lista time { color: var(--hiljainen); }
.omat-lista .syote-lainaus { color: var(--hiljainen); border-left: 3px solid var(--raja); padding-left: 10px; }
.sivutus { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; border-top: 1px solid var(--raja); padding-top: 12px; }
.paneeli.vaara { border-color: #C0392B66; }
.profiili .paneeli.poisto { margin-top: 32px; padding-top: 4px; border-top: 1px solid #C0392B66; }
.profiili .poistolinkki { margin-top: 32px; }
.profiili .poistolinkki a { color: var(--hiljainen); }
.oma-nimi { font-size: 1.15rem; font-weight: 700; color: var(--teksti); text-decoration: none; }
.oma-nimi:hover { text-decoration: underline; }
.oma-nimi .tunnus { margin-right: .25em; }
/* F-033: kiinnostava tapa toimia Alhovuorelle. */
.kiinnostava { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -4px 0 8px 8px; vertical-align: top; max-width: 100%; }
.kiinnostava[hidden] { display: none; }
.kiinnostava-nappi { min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--raja); background: transparent; color: var(--teksti); font: inherit; font-size: .85rem; cursor: pointer; }
.kiinnostava-nappi[aria-pressed="true"] { border-color: var(--oranssi); color: var(--oranssi); font-weight: 700; }
.kiinnostava-ketka { margin: 0; }
.kiinnostavat { border: 1px solid var(--raja); border-radius: 10px; padding: 4px 14px 10px; margin: 12px 0; }
.kiinnostavat h3 { font-size: 1rem; margin: 10px 0 6px; }
.kiinnostavat ul { margin: 0; padding-left: 1.2em; }
.nappilinkki { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--raja); background: var(--pinta2); color: var(--teksti); text-decoration: none; }
.nappilinkki.vaarallinen { border-color: #C0392B; color: #C0392B; background: transparent; font-weight: 700; }
/* Edellinen ja seuraava kohta (F-050). */
.kohtaselaus { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0; }
.kohtaselaus a { display: flex; flex-direction: column; max-width: 48%; padding: 8px 12px; border: 1px solid var(--raja); border-radius: 8px; background: var(--pinta); text-decoration: none; color: var(--teksti); }
.kohtaselaus a:hover { border-color: var(--korostus); }
.kohtaselaus .seuraava { text-align: right; margin-left: auto; }

/* Ehdotus erottuu, muut sivut ovat hillitympiä (F-054). */
.harmaa {
  --bg: var(--h-bg); --pinta: var(--h-pinta); --pinta2: var(--h-pinta2); --raja: var(--h-raja);
  --korostus: var(--h-korostus); --korostus-teksti: var(--h-korostus-teksti);
}
body.harmaa h1, body.harmaa h2 { font-weight: 600; }
body.ehdotus .kohta, body.ehdotus .kortti:not(.tulossa) { background: color-mix(in srgb, var(--korostus) 7%, var(--pinta)); }
.ehdotuslaatikko { border: 1px solid color-mix(in srgb, var(--korostus) 40%, transparent); border-radius: 18px; padding: 4px 20px 20px; margin-top: 16px;
  background: color-mix(in srgb, var(--korostus) 3%, var(--bg)); }
.kehotus { margin: 16px 0 0; }
.painike { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 10px; background: var(--korostus); color: var(--bg); font-weight: 800; text-decoration: none; }
.painike:hover { text-decoration: underline; }
section.toissijainen { background: var(--bg); border-radius: 16px; padding: 4px 16px 16px; margin-top: 40px; }
section.toissijainen .kortti { padding: 12px; }
section.toissijainen .kortti-nimi { font-size: 1rem; }
section.toissijainen h2 { font-weight: 600; }

/* Ehdotukset-alavalikko (F-054): toimii ilman JavaScriptiä. */
.alavalikko { position: relative; }
.alavalikko summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 8px; cursor: pointer; list-style: none; color: var(--teksti); }
.alavalikko summary::-webkit-details-marker { display: none; }
.alavalikko summary::after { content: "▾"; font-size: .8em; }
.alavalikko[open] summary::after { content: "▴"; }
.alavalikko summary:hover, .alavalikko[open] summary { background: var(--pinta2); }
.alavalikko summary.nykyinen { background: var(--pinta2); color: var(--korostus-teksti); font-weight: 700; }
.alavalikko ul { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 220px; display: block; margin: 0; padding: 6px; list-style: none;
  background: var(--pinta); border: 1px solid var(--raja); border-radius: 10px; box-shadow: 0 6px 20px rgb(0 0 0 / .18); }
.alavalikko li a { display: flex; width: 100%; }
@media (max-width: 600px) {
  .alavalikko ul { position: static; box-shadow: none; margin-top: 4px; }
  .alavalikko[open] { flex-basis: 100%; }
}