/* Varjoeduskunta – tyyli
   Värimaailma on eduskuntatalon julkisivusta: Kalvolan pienirakeinen, tasavärinen punaharmaa graniitti.
   Kehyksessä, logossa ja linkeissä ei ole kylläisiä sinisiä, vihreitä, punaisia tai keltaisia sävyjä,
   koska ne luettaisiin puolueiden väreiksi. Värejä käytetään vain datassa: hyväksy/hylkää-merkitys
   ja puolueiden omat värit niiden logoista. Komponentit käyttävät vain alla olevia semanttisia värejä.
   Fontit ovat palvelun omia tiedostoja (fontit.css), joten sivu ei lataa mitään kolmansilta osapuolilta. */
:root {
  --tausta: #f6f5f2;        /* vaalea kivi */
  --pinta: #ebe8e3;         /* korostetut alueet, kentät */
  --teksti: #231f1d;        /* tumma graniitti */
  --himmea: #5f5753;        /* toissijainen teksti */
  --viiva: #dbd6d0;
  --korostus: #4a3d38;      /* linkit */
  --merkki: #8b6b60;        /* punaharmaa graniitti: logo, nykyinen vaihe, korostusviivat */
  --aktiivinen: var(--merkki);  /* valitun välilehden alleviivaus */
  --yla: var(--tausta);     /* yläpalkki */
  --yla-teksti: var(--teksti);
  --yla-merkki: var(--merkki);
  --yla-reuna: 2px solid var(--merkki);
  --laatikko-reuna: 3px solid var(--merkki);  /* korostettujen laatikoiden yläreuna */
  --hyv: #2f7d5f; --hyl: #b1452f; --tyhja: #9d9894; --poissa: #dcd8d3;
  --f-otsikko: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-teksti: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-tunnus: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --leveys: 720px;
  color-scheme: light;
}

/* puolueiden värit (logoista) */
.p-kok { --puolue: #1d5f8a; } .p-ps { --puolue: #e39d12; } .p-sd { --puolue: #f54b4b; } .p-kesk { --puolue: #1f5a33; }
.p-vihr { --puolue: #5bb33a; } .p-vas { --puolue: #f00a64; } .p-r { --puolue: #ffe27a; } .p-kd { --puolue: #2b67c9; }
.p-liik { --puolue: #b41f79; } .p-tv { --puolue: #8c9399; }

/* perusta */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tausta); color: var(--teksti); font-family: var(--f-teksti); font-size: 1.0625rem; line-height: 1.6; }
a { color: var(--korostus); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--merkki); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-otsikko); text-wrap: balance; margin: 0; }
p, figure { margin: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ohita { position: absolute; left: 8px; top: -48px; background: var(--tausta); padding: 8px 12px; border-radius: 6px; z-index: 10; }
.ohita:focus { top: 8px; }
.himmea { color: var(--himmea); }
.pieni { font-size: 0.875rem; }
.tunnus { font-family: var(--f-tunnus); font-size: 0.85em; letter-spacing: 0.01em; }
.kehys {
  max-width: calc(var(--leveys) + 32px); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.palsta { display: grid; gap: 52px; }
.palsta > section { display: grid; gap: 14px; min-width: 0; }
h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 600; }

/* yläpalkki */
.ylapalkki { background: var(--yla); border-bottom: var(--yla-reuna); }
.ylapalkki-sisus { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-block: 18px; }
.merkki { font-family: var(--f-otsikko); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--yla-teksti); text-decoration: none; }
.merkki span { color: var(--yla-merkki); }
.ylapalkki nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 0.95rem; }
.ylapalkki nav a { color: color-mix(in srgb, var(--yla-teksti) 72%, transparent); text-decoration: none; padding-block: 2px; }
.ylapalkki nav a:hover { color: var(--yla-teksti); }
.ylapalkki nav a[aria-current="page"] { color: var(--yla-teksti); box-shadow: inset 0 -2px 0 var(--yla-merkki); }
main { padding-block: 44px 72px; }
.alapalkki { border-top: 1px solid var(--viiva); background: var(--pinta); }
.alapalkki .kehys { padding-block: 24px 40px; font-size: 0.85rem; color: var(--himmea); display: grid; gap: 4px; }

/* otsikkoalueet */
.sivun-yla h1, .asia-yla h1, .sankari h1, .puolue-nimi h1 { font-size: clamp(1.8rem, 1.25rem + 2.2vw, 2.6rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; }
.ingressi { color: var(--himmea); font-size: 1.1rem; max-width: 62ch; }
.sivun-yla { display: grid; gap: 12px; }
.tilannerivi { font-size: 0.95rem; color: var(--himmea); }
.tilannerivi strong { color: var(--teksti); font-variant-numeric: tabular-nums; }
.osio-otsikko { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.osio-otsikko a { font-size: 0.9rem; }
.lisaa { font-size: 0.95rem; }

/* etusivun sankari: teksti ja istuntosali */
.sankari { display: grid; gap: 28px; align-items: center; }
.sankari-teksti { display: grid; gap: 14px; }

/* istuntosalikaavio */
.sali { display: grid; gap: 12px; }
.puolikaari { width: 100%; max-width: 560px; height: auto; justify-self: center; display: block; }
.puolikaari circle { fill: var(--puolue, var(--poissa)); }
.puolikaari .k-hyvaksy { fill: var(--hyv); } .puolikaari .k-hylkaa { fill: var(--hyl); }
.puolikaari .k-tyhjaa { fill: var(--tyhja); } .puolikaari .k-poissa { fill: var(--poissa); }
.pieni-sali .puolikaari { max-width: 380px; justify-self: start; }
.sali figcaption { display: grid; gap: 8px; justify-items: center; text-align: center; }
.pieni-sali figcaption { justify-items: start; text-align: left; }
.sali-otsikko { font-size: 0.85rem; color: var(--himmea); }
.selite { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 0.85rem; }
.pieni-sali .selite { justify-content: flex-start; }
.selite li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.selite strong { font-variant-numeric: tabular-nums; }
.selite a { color: var(--teksti); text-decoration: none; }
.selite a:hover { text-decoration: underline; }
.pallo { width: 10px; height: 10px; border-radius: 50%; background: var(--puolue, var(--poissa)); flex: none; }
.pallo.k-hyvaksy { background: var(--hyv); } .pallo.k-hylkaa { background: var(--hyl); }
.pallo.k-tyhjaa { background: var(--tyhja); } .pallo.k-poissa { background: var(--poissa); }

/* asian yläosa ja välilehdet */
.asia-yla { display: grid; gap: 12px; margin-bottom: 26px; }
.tunnusrivi { font-size: 0.9rem; color: var(--himmea); }
.tunnusrivi a { color: var(--himmea); }
.tilarivi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 0.92rem; }
.teemalinkki { color: var(--himmea); }
.tila { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.tila::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--merkki); flex: none; }
.tila.paatetty::before { background: var(--hyv); }
.tila.hylatty::before { background: var(--hyl); }
.tila.pieni-tila { font-size: 0.82rem; font-weight: 500; color: var(--himmea); }
.valilehdet { display: flex; gap: 26px; border-bottom: 1px solid var(--viiva); margin-bottom: 38px; overflow-x: auto; scrollbar-width: none; }
.valilehdet a { padding-block: 10px; color: var(--himmea); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 0.95rem; }
.valilehdet a:hover { color: var(--teksti); }
.valilehdet a[aria-current="page"] { color: var(--teksti); border-bottom-color: var(--aktiivinen); font-weight: 600; }
.maara { font-size: 0.75rem; color: var(--himmea); font-weight: 500; font-variant-numeric: tabular-nums; }

/* leipäteksti */
.leipa { display: grid; gap: 12px; max-width: 65ch; }

/* vaiheet yleiskatsauksessa */
.askeleet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
@media (min-width: 620px) { .askeleet { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.askeleet li { display: grid; gap: 2px; align-content: start; padding-top: 12px; border-top: 4px solid var(--viiva); }
.askeleet li.valmis { border-top-color: var(--teksti); }
.askeleet li.nyt { border-top-color: var(--merkki); }
.askel-nimi { font-size: 0.88rem; font-weight: 600; line-height: 1.3; hyphens: manual; }
.askeleet li.tuleva .askel-nimi { color: var(--himmea); font-weight: 500; }
.askel-pvm { font-family: var(--f-tunnus); font-size: 0.78rem; color: var(--himmea); font-variant-numeric: tabular-nums; }

/* päätös */
.paatoslause { font-size: 1.15rem; }
.paatoslause strong { font-variant-numeric: tabular-nums; }
.palkki { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--poissa); min-width: 48px; }
.p-hyv { background: var(--hyv); } .p-hyl { background: var(--hyl); } .p-tyhja { background: var(--tyhja); } .p-poissa { background: var(--poissa); }
.kannat-lyhyt { display: grid; gap: 6px; margin: 4px 0 0; font-size: 0.95rem; }
.kannat-lyhyt div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 12px; }
.kannat-lyhyt dt { font-weight: 600; }
.kannat-lyhyt dd { margin: 0; }
.k-hyvaksy { color: var(--hyv); } .k-hylkaa { color: var(--hyl); } .k-poissa, .k-tyhjaa, .k-jakautunut { color: var(--himmea); }

/* puolesta ja vastaan */
.kannat { display: grid; gap: 28px; }
@media (min-width: 640px) { .kannat { grid-template-columns: 1fr 1fr; } }
.kanta { display: grid; gap: 8px; align-content: start; min-width: 0; }
.kanta.puolesta h3 { color: var(--hyv); }
.kanta.vastaan h3 { color: var(--hyl); }
.kanta ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.lahde { font-size: 0.85rem; color: var(--himmea); }

/* oma kanta */
.oma { background: var(--pinta); border-radius: 14px; padding: 24px; border-top: var(--laatikko-reuna); }
.napit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.napit button { font: inherit; font-size: 0.95rem; font-weight: 600; padding: 12px 6px; border-radius: 10px; border: 1px solid var(--viiva); background: var(--tausta); color: var(--teksti); cursor: pointer; }
.napit button:hover { border-color: var(--himmea); }
.napit button[aria-pressed="true"][data-kanta="hyväksy"] { background: var(--hyv); border-color: var(--hyv); color: var(--tausta); }
.napit button[aria-pressed="true"][data-kanta="hylkää"] { background: var(--hyl); border-color: var(--hyl); color: var(--tausta); }
.napit button[aria-pressed="true"][data-kanta="tyhjää"] { background: var(--tyhja); border-color: var(--tyhja); color: var(--tausta); }
.vertailu { display: grid; gap: 6px; font-size: 0.95rem; }
.vertailu:empty { display: none; }

/* listat */
.rivilista, .teemalista, .puoluelista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--viiva); }
.rivilista > li, .teemalista > li, .puoluelista > li { border-bottom: 1px solid var(--viiva); }
.rivi { display: grid; gap: 3px; padding-block: 14px; color: var(--teksti); text-decoration: none; }
.rivi:hover .rivi-otsikko, .rivi:hover .teema-nimi { color: var(--korostus); }
.rivi-yla { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 12px; font-size: 0.85rem; color: var(--himmea); }
.rivi-otsikko { font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.rivi-meta { font-size: 0.85rem; color: var(--himmea); }
.rivi-tulos { display: grid; grid-template-columns: minmax(48px, 220px) auto; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--himmea); font-variant-numeric: tabular-nums; margin-top: 4px; }
.tyhja-tulos { padding: 32px 0; text-align: center; color: var(--himmea); }
.teema-nimi { font-family: var(--f-otsikko); font-weight: 700; font-size: 1.15rem; }
.teema-kuvaus { color: var(--himmea); font-size: 0.95rem; max-width: 62ch; }

/* suodattimet */
.suodattimet { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 4px; }
.kentta { display: grid; gap: 4px; flex: 1 1 150px; min-width: 0; }
.kentta.haku { flex-basis: 100%; }
.kentta label { font-size: 0.8rem; color: var(--himmea); }
.kentta input, .kentta select { font: inherit; font-size: 0.95rem; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--viiva); background: var(--tausta); color: var(--teksti); width: 100%; }
.kentta input { background: var(--pinta); border-color: transparent; }

/* käsittelyn aikajana */
ol.aikajana { list-style: none; margin: 0; padding: 0; }
.vaihe { position: relative; padding: 0 0 28px 30px; display: grid; gap: 2px; }
.vaihe::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--viiva); }
.vaihe:last-child { padding-bottom: 0; }
.vaihe:last-child::before { display: none; }
.vaihe.valmis::before { background: var(--teksti); }
.piste { position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--viiva); background: var(--tausta); }
.vaihe.valmis .piste { background: var(--teksti); border-color: var(--teksti); }
.vaihe.nyt .piste { background: var(--merkki); border-color: var(--merkki); box-shadow: 0 0 0 4px color-mix(in srgb, var(--merkki) 25%, transparent); }
.v-otsikko { display: flex; align-items: center; gap: 8px; }
.v-nimi { font-weight: 600; }
.vaihe.tuleva .v-nimi { color: var(--himmea); font-weight: 500; }
.nyt-merkki { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teksti); background: color-mix(in srgb, var(--merkki) 25%, transparent); padding: 1px 6px; border-radius: 4px; }
.v-pvm { font-family: var(--f-tunnus); font-size: 0.8rem; color: var(--himmea); font-variant-numeric: tabular-nums; }
.v-tiedot { margin: 6px 0 0; padding-left: 18px; color: var(--himmea); font-size: 0.92rem; display: grid; gap: 2px; overflow-wrap: anywhere; }

/* sisältö */
ol.lait, .linkkilista { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
ol.lait li::marker { color: var(--himmea); }
.laki { display: block; overflow-wrap: anywhere; }
.laki-tila { display: block; font-size: 0.85rem; color: var(--himmea); }
.sanat { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--himmea); font-size: 0.92rem; }

/* äänestykset */
.taulukko { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--viiva); }
thead th { font-size: 0.8rem; color: var(--himmea); font-weight: 500; }
td.luku, th.luku { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody th { font-weight: 500; }
.edustajaruudukko { display: grid; gap: 24px 32px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.edr { display: grid; gap: 6px; align-content: start; }
.edr ul { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.edr li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--viiva); }
.aani { font-size: 0.82rem; }
ul.muut { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--viiva); }
ul.muut li { display: grid; gap: 2px; padding-block: 10px; border-bottom: 1px solid var(--viiva); }
.muut-otsikko { font-size: 0.95rem; }

/* puolueet */
.puoluemerkki { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #ffffff; border: 1px solid var(--viiva); flex: none; overflow: hidden; }
.puoluemerkki img { max-width: 78%; max-height: 78%; object-fit: contain; display: block; }
.monogrammi { font-family: var(--f-otsikko); font-weight: 800; font-size: 0.8rem; color: #ffffff; background: var(--puolue); width: 100%; height: 100%; display: grid; place-items: center; letter-spacing: 0.02em; }
.iso-merkki { width: 76px; height: 76px; border-radius: 16px; }
.puoluerivi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 16px; padding-block: 14px; color: var(--teksti); text-decoration: none; }
.puoluerivi .puoluemerkki { grid-row: span 2; }
.puoluerivi-nimi { font-family: var(--f-otsikko); font-weight: 700; font-size: 1.1rem; }
.puoluerivi:hover .puoluerivi-nimi { color: var(--korostus); }
.puoluerivi-luvut { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 0.88rem; color: var(--himmea); font-variant-numeric: tabular-nums; }
.puoluerivi-luvut strong { color: var(--teksti); }
.hallitusmerkki { font-family: var(--f-teksti); font-size: 0.72rem; font-weight: 500; color: var(--teksti); background: color-mix(in srgb, var(--merkki) 25%, transparent); padding: 1px 6px; border-radius: 4px; margin-left: 4px; white-space: nowrap; vertical-align: 2px; }
.matriisi td.luku { background: color-mix(in srgb, var(--korostus) calc(var(--osuus, 0) * 34%), transparent); padding-right: 8px; padding-left: 8px; }
.matriisi th, .matriisi td { font-size: 0.85rem; }
.ministerit { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ministerit li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 12px; font-size: 0.95rem; }
.ministeri-ryhma { font-weight: 600; }

/* puoluesivu: puolueen oma väri yläosassa */
.puolue-yla { display: grid; gap: 18px; padding: 20px 22px 22px; border-radius: 16px; background: color-mix(in srgb, var(--puolue) 12%, var(--tausta)); border-top: 6px solid var(--puolue); }
.puolue-yla .tunnusrivi a { color: var(--himmea); }
.puolue-nimi { display: flex; align-items: center; gap: 18px; }
.faktat { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 20px; margin: 0; }
.faktat dt { font-size: 0.8rem; color: var(--himmea); }
.faktat dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.nimilista { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.pylvaat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pylvaat li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 3.2rem; align-items: center; gap: 12px; font-size: 0.92rem; }
.pylvas { height: 10px; border-radius: 5px; background: var(--pinta); overflow: hidden; }
.pylvas span { display: block; height: 100%; background: var(--puolue); }
.pylvas-arvo { text-align: right; font-variant-numeric: tabular-nums; }
.edustajalista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 24px; }
.edustajalista li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--viiva); font-size: 0.92rem; }

/* omat kannat */
.nav-maara { display: inline-block; min-width: 1.4em; padding: 0 5px; margin-left: 2px; border-radius: 999px; background: color-mix(in srgb, var(--yla-merkki) 24%, var(--yla)); color: var(--yla-teksti); font-size: 0.72rem; font-weight: 700; text-align: center; line-height: 1.5; font-variant-numeric: tabular-nums; }
.nav-maara[hidden] { display: none; }
.oma-kutsu { background: var(--pinta); border-radius: 14px; padding: 20px 24px; border-top: var(--laatikko-reuna); gap: 6px !important; }
.oma-kutsu h2 { font-size: 1.1rem; }
.edistyminen-rivi { font-size: 0.9rem; color: var(--himmea); margin-top: 4px; }
.taso { background: var(--pinta); border-radius: 14px; padding: 22px 24px; border-top: var(--laatikko-reuna); gap: 8px !important; }
.taso-maara { font-size: 1rem; color: var(--himmea); }
.taso-maara strong { font-family: var(--f-otsikko); font-size: 2.6rem; font-weight: 800; color: var(--teksti); line-height: 1; margin-right: 4px; font-variant-numeric: tabular-nums; }
.taso-nimi { font-family: var(--f-otsikko); font-weight: 700; font-size: 1.15rem; }
.edistyminen { height: 8px; border-radius: 4px; background: var(--tausta); overflow: hidden; }
.edistyminen span { display: block; height: 100%; background: var(--merkki); transition: width .3s; }
.oma-pylvaat li { grid-template-columns: 9rem minmax(0, 1fr) 6.5rem; }
.edustajavertailu { margin: 0; padding-left: 22px; display: grid; gap: 0; }
.edustajavertailu li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--viiva); font-size: 0.95rem; }
.edustajavertailu li.himmea { display: list-item; border: 0; }
.ev-nimi { font-weight: 600; }
.ev-arvo { font-variant-numeric: tabular-nums; text-align: right; min-width: 6.5rem; }
.oma-sali .puolikaari { max-width: 520px; }
.tyhjenna-rivi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.92rem; }
.tyhjenna-rivi span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toissijainen, .vaara { font: inherit; font-size: 0.9rem; padding: 8px 14px; border-radius: 10px; cursor: pointer; border: 1px solid var(--viiva); background: var(--tausta); color: var(--teksti); }
.vaara { background: var(--hyl); border-color: var(--hyl); color: var(--tausta); font-weight: 600; }

/* puolueen historia */
.historiakaavio { margin: 0; }
.viivakaavio { width: 100%; height: auto; display: block; }
.viivakaavio .ruudukko { stroke: var(--viiva); stroke-width: 1; }
.viivakaavio .akseli { fill: var(--himmea); font-family: var(--f-teksti); font-size: 11px; }
.viivakaavio .viiva { fill: none; stroke: var(--puolue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.viivakaavio .piste { fill: var(--puolue); stroke: var(--tausta); stroke-width: 1.5; }
.viivakaavio .ennuste { stroke: var(--puolue); stroke-width: 2; stroke-dasharray: 4 4; }
.viivakaavio .nyt { fill: var(--tausta); stroke: var(--puolue); stroke-width: 2.5; }
.viivakaavio .arvo { fill: var(--teksti); font-family: var(--f-teksti); font-size: 12px; font-weight: 600; }
.peili { margin: 0; padding-left: 18px; display: grid; gap: 4px; max-width: 65ch; }
.peili strong { font-variant-numeric: tabular-nums; }
.taulukkotiedot summary { cursor: pointer; color: var(--korostus); font-size: 0.92rem; }
.taulukkotiedot table { max-width: 280px; margin-top: 8px; }
.kaari { list-style: none; margin: 0; padding: 0; border-left: 2px solid color-mix(in srgb, var(--puolue) 60%, var(--viiva)); display: grid; gap: 16px; }
.kaari li { position: relative; padding-left: 20px; display: grid; gap: 2px; max-width: 68ch; }
.kaari li::before { content: ""; position: absolute; left: -6px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--puolue); }
.kaari-otsikko { font-family: var(--f-otsikko); font-weight: 700; }

/* teemasivu */
.aikakaari { list-style: none; margin: 0; padding: 0; display: grid; }
.aikakaari li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 20px; position: relative; padding-bottom: 22px; }
.aikakaari li::before { content: ""; position: absolute; left: calc(7.5rem + 31px); top: 14px; bottom: -4px; width: 2px; background: var(--viiva); }
.aikakaari li:last-child { padding-bottom: 0; }
.aikakaari li:last-child::before { display: none; }
.aikakaari-aika { font-family: var(--f-tunnus); font-size: 0.85rem; color: var(--merkki); text-align: right; padding-top: 2px; font-variant-numeric: tabular-nums; font-weight: 500; }
.aikakaari-sisalto { position: relative; padding-left: 36px; display: grid; gap: 2px; max-width: 62ch; }
.aikakaari-sisalto::before { content: ""; position: absolute; left: 4px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--tausta); border: 2px solid var(--merkki); }
.aikakaari-otsikko { font-family: var(--f-otsikko); font-weight: 700; font-size: 1.05rem; }
.jannitteet { display: grid; gap: 16px; margin: 0; }
.jannitteet div { display: grid; gap: 2px; max-width: 65ch; }
.jannitteet dt { font-family: var(--f-otsikko); font-weight: 700; }
.jannitteet dd { margin: 0; }
.teemasivu h3 { margin-top: 8px; color: var(--himmea); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.seurattavaa { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.teemasirut { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.teemasirut a { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--pinta); color: var(--teksti); text-decoration: none; font-size: 0.9rem; }
.teemasirut a:hover { background: color-mix(in srgb, var(--merkki) 25%, var(--pinta)); }
@media (max-width: 560px) {
  .aikakaari li { grid-template-columns: minmax(0, 1fr); padding-left: 30px; }
  .aikakaari li::before { left: 7px; top: 12px; }
  .aikakaari-aika { text-align: left; }
  .aikakaari-sisalto { padding-left: 0; position: static; }
  .aikakaari-sisalto::before { left: 0; top: 4px; }
}

/* hallitusten kaari */
.kaari-nyt { background: var(--pinta); border-radius: 14px; padding: 22px 24px; border-top: var(--laatikko-reuna); gap: 10px !important; }
.kaari-luku { font-family: var(--f-otsikko); font-size: 1.7rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kaari-muutos { color: var(--merkki); }
.kaarikaavio { margin: 0; display: grid; gap: 4px; }
.kk-rivit { list-style: none; margin: 0; padding: 0; }
.kk-rivi, .kk-asteikko { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 8.5rem; grid-template-areas: "nimi rata luvut"; align-items: center; gap: 2px 16px; }
.kk-rivi { padding-block: 8px; border-top: 1px solid var(--viiva); }
.kk-nimi { grid-area: nimi; font-size: 0.9rem; line-height: 1.35; }
.kk-nimi .tunnus { display: block; color: var(--himmea); }
.kk-rata { grid-area: rata; position: relative; height: 24px; }
.kk-asteikko .kk-rata { height: 1.3em; }
.kk-asteikko .kk-rata span { position: absolute; transform: translateX(-50%); font-size: 0.75rem; color: var(--himmea); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-asteikko .kk-rata span:first-child { transform: none; }
.kk-asteikko .kk-rata span:last-child { transform: translateX(-100%); }
.kk-viiva { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--viiva); }
.kk-viiva.puolet { background: var(--himmea); opacity: 0.55; }
.kk-vali { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: color-mix(in srgb, var(--korostus) 40%, transparent); }
.kk-alku, .kk-loppu { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; }
.kk-alku { background: var(--tausta); border: 2px solid var(--himmea); }
.kk-loppu { background: var(--korostus); }
.kaynnissa .kk-loppu { background: var(--merkki); }
.kaynnissa .kk-vali { height: 0; margin-top: -1px; background: none; border-top: 2px dashed color-mix(in srgb, var(--merkki) 70%, transparent); border-radius: 0; }
.kk-luvut { grid-area: luvut; font-size: 0.88rem; text-align: right; color: var(--himmea); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-luvut strong { color: var(--teksti); }
.kk-selite { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.85rem; color: var(--himmea); padding-top: 10px; border-top: 1px solid var(--viiva); }
.kk-selite > span { display: inline-flex; align-items: center; gap: 7px; }
.kk-merkki { position: static; display: inline-block; margin: 0; flex: none; }
.kk-merkki.kk-puolet { width: 2px; height: 14px; border-radius: 0; background: var(--himmea); opacity: 0.55; }
.hallitustaulukko th a { display: inline-flex; align-items: center; gap: 8px; color: var(--teksti); text-decoration: none; }
.hallitustaulukko th a:hover { color: var(--korostus); text-decoration: underline; }
.kaudet { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.kausi { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--viiva); max-width: 68ch; }
.kausi-yla { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; }
.kausi-yla h3 { font-size: 1.1rem; font-weight: 700; }
.kausi-yla .tunnus { color: var(--himmea); font-weight: 500; margin-right: 4px; }
.kausi-muutos { font-size: 0.9rem; color: var(--himmea); font-variant-numeric: tabular-nums; }
.kausi-muutos strong { color: var(--teksti); }
.kausi-puolueet { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.92rem; }
.kausi-puolueet li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.kausi-puolueet .luku { color: var(--himmea); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kausi-puolueet .luku strong { color: var(--teksti); }
@media (max-width: 560px) {
  .kk-rivi, .kk-asteikko { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nimi luvut" "rata rata"; }
  .kk-nimi .tunnus { display: inline; margin-right: 4px; }
}

/* eduskuntatyö ja valiokunnat */
.artikkeli .leipa ul, .artikkeli .leipa ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.vaiheluettelo li::marker { color: var(--merkki); font-weight: 700; font-family: var(--f-tunnus); }
.valiotsikko { margin-top: 10px; }
.istuinrivi { display: flex; justify-content: space-between; gap: 18px; max-width: 560px; }
.istuinryhma { display: flex; flex-wrap: wrap; gap: 5px; }
.istuin { width: 18px; height: 18px; border-radius: 50%; background: var(--puolue, var(--poissa)); }
.istuinrivi-selite { display: flex; justify-content: space-between; max-width: 560px; font-size: 0.8rem; color: var(--himmea); }
.teemataulukko th[scope="row"] a, .teemataulukko td a { color: var(--teksti); }
.teemataulukko td { font-size: 0.9rem; }
.pylvaat.leveat li { grid-template-columns: 16rem minmax(0, 1fr) 2.5rem; }
.valiokuntarivi { font-size: 0.95rem; color: var(--himmea); }
.valiokuntalista li { grid-template-columns: 6rem minmax(0, 1fr); }
@media (max-width: 560px) {
  .pylvaat.leveat li { grid-template-columns: minmax(0, 1fr) 2.5rem; }
  .pylvaat.leveat .pylvas { grid-column: 1 / -1; grid-row: 2; }
  .valiokuntalista li { grid-template-columns: minmax(0, 1fr); }
}

/* tietoa */
.periaatteet { display: grid; gap: 16px; margin: 0; }
.periaatteet div { display: grid; gap: 2px; }
.periaatteet dt { font-family: var(--f-otsikko); font-weight: 700; }
.periaatteet dd { margin: 0; color: var(--himmea); max-width: 65ch; }

@media (max-width: 560px) {
  .ministerit li, .kannat-lyhyt div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .oma-pylvaat li { grid-template-columns: 6.5rem minmax(0, 1fr) 5.8rem; }
  .edustajavertailu li { grid-template-columns: minmax(0, 1fr) auto; }
  .ev-ryhma { grid-column: 1; grid-row: 2; font-size: 0.85rem; }
  .pylvaat li { grid-template-columns: 7rem minmax(0, 1fr) 3rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .napit button, .rivi-otsikko, .teema-nimi, .puoluerivi-nimi { transition: background-color .15s, border-color .15s, color .15s; }
}