/* vuoreslainen.fi — designsysteemi.
   Vain vaalea teema. Tumma tila oli olemassa, mutta kartan kolmiulotteinen
   maailma — maasto, puut, varjot, rakennusten sävyt — on sävytetty vaaleaa
   pintaa vasten. Kaksi teemaa tarkoittaisi kahta sävytystä ylläpidettävänä,
   ja toinen niistä jäisi tarkistamatta.
   Pohjana kaupunginosakortin prototyyppi (paikallistieto-github/luonnokset).
   Ei kirjastoja, ei rakennusvaihetta. */

:root{
  color-scheme:light;
  --ground:#eef1ed; --sheet:#fbfcfa; --sunk:#f2f5f1;
  --ink:#151a17; --ink-2:#4e5852; --ink-3:#79837c;
  --rule:#d9ded8; --rule-2:#e8ebe6;
  --kuusi:#1f5140; --kuusi-soft:#e3ece7; --puu:#8a5a2b;
  --good:#0ca30c; --warning:#fab219; --critical:#d03b3b;
  --shadow:0 1px 2px rgba(21,26,23,.05),0 8px 24px -12px rgba(21,26,23,.18);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Schibsted Grotesk',system-ui,sans-serif;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:20px 20px 64px;display:flex;flex-direction:column;gap:18px}

/* ---- skip-link ---- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:20;
  background:var(--sheet);color:var(--ink);border:1px solid var(--rule);
  padding:10px 14px;border-radius:3px;font-size:14px;
}
.skip:focus{left:12px;top:12px}

/* ---- navigaatio ---- */
.nav{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;
  padding:6px 2px;font-size:13.5px;
}
.nav .brand{font-weight:700;letter-spacing:-.01em;margin-right:auto}
.nav .brand a{color:var(--ink);text-decoration:none}
.nav a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.nav a:hover{color:var(--ink);border-bottom-color:var(--kuusi)}
.nav [aria-current="page"]{color:var(--ink);font-weight:500;border-bottom-color:var(--kuusi)}

/* ---- arkki ---- */
.sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:4px;box-shadow:var(--shadow);overflow:hidden}

.head{padding:30px 32px 24px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:18px}
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
h1{
  font-family:'Newsreader',Georgia,serif;font-weight:600;
  font-size:clamp(38px,6vw,58px);line-height:1;margin:0;letter-spacing:-.015em;
  text-wrap:balance;
}
.subtitle{font-family:'Newsreader',Georgia,serif;font-size:19px;font-style:italic;color:var(--ink-2)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 24px;margin:0}
.meta div{display:flex;flex-direction:column;gap:2px;min-width:0}
.meta dt{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.meta dd{margin:0;font-size:14px;color:var(--ink)}

/* ---- lähdemerkintä: kortin kantava ajatus ---- */
.prov{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;
  border-bottom:1px solid var(--rule);background:var(--sunk);
}
.prov > div{padding:14px 20px;border-right:1px solid var(--rule-2);display:flex;gap:11px;align-items:flex-start}
.prov > div:last-child{border-right:0}
.prov h2{margin:0 0 1px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink);text-transform:none;display:block}
.prov p{margin:0;font-size:12px;line-height:1.45;color:var(--ink-2)}

.pm{flex:none;width:13px;height:13px;border-radius:50%;margin-top:3px;border:2px solid var(--kuusi)}
.pm-data{background:var(--kuusi)}
.pm-analyysi{background:linear-gradient(90deg,var(--kuusi) 0 50%,transparent 50% 100%)}
.pm-kentta{border-color:var(--puu);border-style:dotted;background:transparent}

.src{font-size:11px;color:var(--ink-3);display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.src .dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--kuusi);flex:none}
.src .d-data{background:var(--kuusi)}
.src .d-analyysi{background:linear-gradient(90deg,var(--kuusi) 0 50%,transparent 50% 100%)}
.src .d-kentta{border-color:var(--puu);border-style:dotted}

/* ---- runko ---- */
.body{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:900px){.body{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}}
.col{display:flex;flex-direction:column;min-width:0}
.col-side{border-top:1px solid var(--rule);background:var(--sunk)}
@media (min-width:900px){.col-side{border-top:0;border-left:1px solid var(--rule)}}

.blk{padding:24px 32px;border-bottom:1px solid var(--rule-2);display:flex;flex-direction:column;gap:16px}
.blk:last-child{border-bottom:0}
.col-side .blk{padding:24px}
h2{
  margin:0;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
}
h2 .sivu{font-weight:500;letter-spacing:0;text-transform:none;font-size:12px;color:var(--ink-3)}
.lead{font-family:'Newsreader',Georgia,serif;font-size:16.5px;line-height:1.5;margin:0;color:var(--ink-2);max-width:60ch}
.note{margin:0;font-size:13px;color:var(--ink-2);line-height:1.45}

/* ---- korjauslinkki: halvin osallistumisen muoto ---- */
.korjaa{
  align-self:flex-start;font-size:12px;color:var(--ink-3);
  text-decoration:none;border-bottom:1px dotted currentColor;
}
.korjaa:hover{color:var(--kuusi);border-bottom-style:solid}

/* ---- lukuruudut ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);border-radius:3px;overflow:hidden}
.stat{background:var(--sheet);padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.stat .v{font-size:27px;line-height:1.05;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* Tabular-nums levittää pilkun ("5 , 73"), joten desimaaliluvuissa normaali. */
.v-desimaali{font-variant-numeric:normal}
/* Lukua ei ole vielä tarkistettu — ei näytetä numerona, jota voisi lainata. */
.stat .v-puuttuu{color:var(--ink-3);font-weight:500}
.stat .k{font-size:12px;color:var(--ink-2);line-height:1.35}
.stat .src{margin-top:4px}

/* ---- listarivit ---- */
.rows{display:flex;flex-direction:column;gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);border-radius:3px;overflow:hidden}
.r{background:var(--sheet);padding:11px 14px;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.r .n{font-size:14px;font-weight:500}
.r .d{grid-column:1/-1;font-size:12.5px;color:var(--ink-2);line-height:1.4}
/* Itsestään päivittyvä tieto erottuu: se ei ole tekijän tarkistama vaan tuore. */
.tuore{display:block;margin-top:3px;color:var(--kuusi);font-weight:500}
.r a{color:var(--kuusi)}

/* Tilamerkinnät: väri ei koskaan yksin — merkki ja sana aina mukana. */
.chip{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:2px;padding:2px 7px;color:var(--ink-2);background:var(--sheet);
}
.chip .g{font-size:10px;line-height:1}
.chip-auki{border-color:color-mix(in oklab,var(--good) 45%,var(--rule));color:color-mix(in oklab,var(--good) 62%,var(--ink))}
.chip-tyhja{border-style:dashed;color:var(--ink-3)}
/* Idean elinkaari: idea → tulossa → käynnissä → tehty. Sama logiikka kuin lapuilla. */
.chip-idea{border-style:dashed;color:var(--ink-3)}
.chip-tulossa{border-color:color-mix(in oklab,var(--puu) 55%,var(--rule));color:var(--puu)}
.chip-kaynnissa{border-color:color-mix(in oklab,var(--good) 45%,var(--rule));color:color-mix(in oklab,var(--good) 62%,var(--ink))}
.chip-tehty{border-color:color-mix(in oklab,var(--kuusi) 55%,var(--rule));color:var(--kuusi);background:var(--kuusi-soft)}

/* Toimintolinkki taulun yläreunassa: pyyntö siellä missä katse on. */
.taulu-toimi{margin:0;padding:0 2px;text-align:right;font-size:13px}
.taulu-toimi a{color:var(--kuusi);text-decoration:none;border-bottom:1px solid transparent}
.taulu-toimi a:hover{border-bottom-color:currentColor}

/* Linkit muualle: lista, ei arkkia — sivulla on jo tarpeeksi laatikoita. */
.muualla{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 24px;padding:0 2px}
.muualla div{display:flex;flex-direction:column;gap:1px;font-size:13px}
.muualla a{color:var(--kuusi);font-weight:500;text-decoration:none;border-bottom:1px solid transparent;align-self:flex-start}
.muualla a:hover{border-bottom-color:currentColor}
.muualla span{font-size:12px;color:var(--ink-3)}

/* ---- ideataulu ---- */
.huom{font-size:12px;color:var(--ink-3);margin-left:auto}
.ideat{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(208px,1fr));gap:1px;
  background:var(--rule-2);border:1px solid var(--rule-2);border-radius:3px;overflow:hidden;
}
.idea{
  background:var(--sheet);padding:16px 16px 15px;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
}
.idea .kuva{font-size:23px;line-height:1}
.idea:has(.chip-tehty){background:var(--kuusi-soft)}
.idea h3{margin:0;font-size:14.5px;font-weight:700;letter-spacing:-.005em;line-height:1.3}
.idea p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}

/* ---- täytettävät kohdat ---- */
.ph{border:1px dashed var(--puu);border-radius:3px;padding:12px 14px;background:transparent;display:flex;flex-direction:column;gap:5px}
.ph .h{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--puu)}
.ph p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.45}
.ph ul{margin:2px 0 0;padding-left:17px;font-size:13px;color:var(--ink-2);display:flex;flex-direction:column;gap:3px}

/* ================================================================
   ILMOITUSTAULU
   Osiot on järjestetty tiedon eliniän mukaan, ei tärkeyden.
   Lappu istuu taululla varjolla — ei korkkitekstuuria, ei nuppineuloja.
   ================================================================ */

/* Hero on kaksi riviä. Juliste taululla on sivun visuaalinen ääni, ei otsikko. */
.hero{padding:4px 2px 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.hero h1{font-size:clamp(25px,3.6vw,34px);line-height:1.1}

/* ---- tunnus: etusivun nimi isolla ----
   Sivun nimi on osoite, ja se saa olla sivun ainoa iso ääni. Päätteen sävy
   erottaa sen nimestä ilman toista fonttia tai väriä. */
.tunnus{padding:10px 2px 4px}
.tunnus h1{font-size:clamp(40px,9vw,78px);line-height:.95;letter-spacing:-.03em}
.tunnus .fi{color:var(--ink-3);font-style:italic}

/* ---- olosuhdenauha ----
   Tuore tieto yhdellä rivillä, solut erotettuna ohuella viivalla. Tyhjä solu
   on piilotettu, ja jos kaikki ovat piilossa, koko nauha katoaa. */
.olot{
  display:flex;flex-wrap:wrap;
  background:var(--sheet);border:1px solid var(--rule);border-radius:4px;
  box-shadow:var(--shadow);overflow:hidden;
}
.olot:not(:has(.olo:not([hidden]))){display:none}
.olo{
  margin:0;flex:1 1 auto;min-width:0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;
  padding:10px 16px;border-right:1px solid var(--rule-2);
  font-size:13px;color:var(--ink-2);
}
.olo:last-child{border-right:0}
.olo[hidden]{display:none}
/* Aukiolo on itsestään päivittyvä, ei tekijän tarkistama — sama vihreä
   kuin muualla tuoreella tiedolla. */
.olo-aukiolo{color:var(--kuusi);font-weight:500}

/* ---- kaksi palstaa: tapahtumat ja uutiset ---- */
.palstat{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:840px){.palstat{grid-template-columns:1fr 1fr;gap:26px}}
.palsta{display:flex;flex-direction:column;gap:10px;min-width:0}
.kortit{display:flex;flex-direction:column;gap:9px}
.kortti{
  background:var(--sheet);border:1px solid var(--rule);border-radius:3px;
  padding:13px 15px;display:flex;flex-direction:column;gap:4px;
  box-shadow:0 1px 2px rgba(21,26,23,.05);
}
.kortti h3{margin:0;font-size:14.5px;font-weight:600;line-height:1.35;letter-spacing:-.005em}
.kortti h3 a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.kortti h3 a:hover{border-bottom-color:var(--kuusi)}
.kortti p{margin:0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.kortti .meta{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11.5px;color:var(--ink-3)}
/* Sää: tuoretta tietoa, siksi vihreä ja pieni. Näkyy vain jos
   haku onnistuu — tyhjä elementti poistetaan. */
.olosuhteet{margin:0;display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline}
.olo-arvot{font-size:13.5px;font-weight:500;color:var(--kuusi)}
.olo-lahde{font-size:11.5px;color:var(--ink-3)}

.osio{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding:0 2px;
}
/* Osion otsikko on iso ja serif; lohkon sisäiset h2:t pysyvät pieninä
   versaaleina. Kaksi tasoa, jotta sivulla on järjestys. */
.osio h2{
  font-family:'Newsreader',Georgia,serif;font-weight:600;
  font-size:clamp(19px,2.2vw,23px);letter-spacing:-.01em;text-transform:none;
  color:var(--ink);margin:0;display:block;
}
/* Elinikä osion tunnisteena: kertoo kuinka kauan rivi on totta. */
.elinika{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--puu);border:1px solid currentColor;border-radius:2px;padding:1px 6px;
}

.taulu{
  background:var(--kuusi-soft);border:1px solid var(--rule);border-radius:4px;
  padding:18px;box-shadow:inset 0 1px 3px rgba(21,26,23,.07);
}
/* Kaksi saraketta riittää nykyiselle lappumäärälle. Nosta kolmeen kun
   lappuja on kymmenkunta, muuten kolmas sarake jää tyhjäksi. */
@media (min-width:700px){.taulu{columns:2;column-gap:18px;padding:22px}}

.lappu{
  break-inside:avoid;position:relative;
  background:var(--sheet);border:1px solid var(--rule);border-radius:2px;
  padding:16px 16px 14px;margin:0 0 18px;
  box-shadow:0 1px 2px rgba(21,26,23,.06),0 6px 16px -10px rgba(21,26,23,.22);
  transition:transform .12s,box-shadow .12s;
}
.lappu:nth-child(odd){rotate:-.4deg}
.lappu:nth-child(even){rotate:.3deg}
.lappu:hover{transform:translateY(-1px);box-shadow:0 2px 3px rgba(21,26,23,.07),0 12px 22px -12px rgba(21,26,23,.28)}
.lappu h3{margin:0 0 6px;font-size:15px;font-weight:700;letter-spacing:-.005em;line-height:1.3}
.lappu p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.lappu .kiinnittaja{
  display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:11px;
  padding-top:9px;border-top:1px solid var(--rule-2);
  font-size:11.5px;color:var(--ink-3);
}
/* Maalarinteippi kulmassa. Sama merkki kuin oikealla taululla. */
.lappu::before{
  content:"";position:absolute;top:-7px;left:50%;translate:-50% 0;
  width:46px;height:15px;background:var(--puu);opacity:.28;
  rotate:-1.5deg;border-radius:1px;
}
.lappu-esimerkki::after{
  content:"esimerkki";position:absolute;top:8px;right:10px;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--puu);opacity:.8;
}

/* ---- juliste: kauden kysymys, taulun ainoa iso ääni ---- */
.juliste{
  column-span:all;break-inside:avoid;position:relative;
  background:var(--kuusi);color:var(--paperi,#fbfcfa);
  border:1px solid var(--kuusi);border-radius:2px;
  padding:26px 26px 0;margin:0 0 22px;
  box-shadow:0 1px 2px rgba(21,26,23,.1),0 12px 30px -14px rgba(31,81,64,.5);
}
.juliste .kausi{
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:color-mix(in oklab,var(--sheet) 72%,var(--kuusi));
}
.juliste blockquote{color:var(--sheet)}
.juliste .repaisut{border-top-color:color-mix(in oklab,var(--sheet) 40%,var(--kuusi))}
.juliste .repaisut span{
  color:color-mix(in oklab,var(--sheet) 62%,var(--kuusi));
  border-right-color:color-mix(in oklab,var(--sheet) 32%,var(--kuusi));
}
.juliste blockquote{
  margin:10px 0 0;font-family:'Newsreader',Georgia,serif;font-style:italic;
  font-size:clamp(23px,3.4vw,33px);line-height:1.25;letter-spacing:-.012em;
  text-wrap:balance;max-width:30ch;
}
.juliste p.selite{
  margin:14px 0 0;font-size:13.5px;line-height:1.5;max-width:56ch;
  color:color-mix(in oklab,var(--sheet) 82%,var(--kuusi));
}
.juliste p.selite a{color:var(--sheet)}

/* Repäistävät liuskat. Taululla tästä otetaan tieto mukaan. */
.repaisut{
  display:flex;gap:0;overflow-x:auto;margin:22px -26px 0;
  border-top:1px dashed var(--rule);
}
.repaisut span{
  flex:0 0 auto;padding:9px 13px 12px;
  border-right:1px dashed var(--rule);
  font-size:11px;letter-spacing:.03em;color:var(--ink-3);white-space:nowrap;
}
.repaisut span:last-child{border-right:0}

/* ---- kiinnitä lappu ---- */
.kiinnita{
  border:1px dashed var(--kuusi);border-radius:3px;background:transparent;
  padding:18px 20px;display:flex;flex-direction:column;gap:9px;
}
.kiinnita .suodatin{
  font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:19px;
  line-height:1.35;margin:0;color:var(--ink);max-width:44ch;
}
.kiinnita p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2);max-width:58ch}

/* ================================================================
   KARTTASIVU — kartta täyttää ikkunan, teksti on kortti sen päällä
   ================================================================ */
.kartta-sivu{overflow:hidden}
.kartta-taysi{position:fixed;inset:0;height:100vh;height:100dvh}

.kartta-ui{
  position:fixed;z-index:900;
  background:var(--sheet);border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 1px 2px rgba(21,26,23,.08),0 10px 26px -14px rgba(21,26,23,.4);
}
/* ---- lepotila ----
   Kartta kelpaa taustakuvaksi näytölle, jota kukaan ei koske. Kun mitään ei
   ole tapahtunut hetkeen, säätimet häipyvät ja jäljelle jää
   maisema. Ensimmäinen kosketus tuo ne takaisin. */
.iso-tyokalut,.iso-kytkimet{transition:opacity .35s}
body[data-lepo="true"] .iso-tyokalut,
body[data-lepo="true"] .iso-kytkimet,
body[data-lepo="true"] .nauha{
  opacity:0;pointer-events:none;transition:opacity 1.6s;
}
/* Toinen näkymä samasta alueesta. Paluulinkin alle, ei oikeaan reunaan:
   siellä on jo kerrosvalikko ja rakennuksen tiedot. */
.paluu-toinen{top:51px;color:var(--ink-2)}
.paluu-toinen:hover{color:var(--ink)}

/* Selite kapeana nauhana, ei laatikkona. */
.nauha{
  left:12px;bottom:12px;max-width:calc(100% - 24px);
  padding:7px 12px;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;
  font-size:11.5px;color:var(--ink-2);
}
.nauha span{display:inline-flex;align-items:center;gap:6px}

/* Historialiuku: näkyy vain kun vanha kartta on määritelty. */
.kerrokset{
  right:12px;top:12px;padding:10px 14px;width:216px;
  display:flex;flex-direction:column;gap:10px;
  max-height:calc(100vh - 24px);overflow-y:auto;
}
.kerros-saatin[hidden]{display:none}
.kerros-saatin{display:flex;flex-direction:column;gap:5px}
.kerros-saatin label,.kerros-valinnat legend{
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);padding:0;
}
.kerros-saatin input[type=range]{width:100%;accent-color:var(--kuusi);margin:0}
.kerros-saatin span{font-size:12px;color:var(--ink-2)}
.kerros-valinnat{
  border:0;border-top:1px solid var(--rule-2);margin:0;padding:9px 0 0;
  display:flex;flex-direction:column;gap:7px;
}
.kerros-lohko{display:flex;flex-direction:column;gap:7px}
.kerros-lohko[hidden]{display:none}
.kerros-ryhma{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--puu);margin-top:4px;
}
.kerros-ryhma:first-child{margin-top:0}
.kerros-valinnat label{
  display:flex;gap:8px;align-items:flex-start;font-size:12.5px;cursor:pointer;
  color:var(--ink);line-height:1.35;
}
.kerros-valinnat input{margin:2px 0 0;accent-color:var(--kuusi);flex:none}
.kerros-valinnat small{display:block;color:var(--ink-3);font-size:11px}
.kaava-vaihe{
  display:inline-block;margin:2px 0;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--puu);
}
.kerros-linkki{
  font-size:11.5px;color:var(--kuusi);margin-left:22px;
  text-decoration:none;border-bottom:1px dotted currentColor;align-self:flex-start;
}
.kerros-linkki:hover{border-bottom-style:solid}
.lajivalitsin{
  font-family:inherit;font-size:12px;width:100%;
  padding:4px 6px;margin-left:22px;max-width:calc(100% - 22px);
  border:1px solid var(--rule);border-radius:2px;
  background:var(--sheet);color:var(--ink);
}
.lajivalitsin[hidden]{display:none}
.nauha b{font-variant-numeric:tabular-nums;color:var(--ink)}

/* Asuinalueiden nimet: kartan orientaatio, ei klikattava kohde. */
.alue-nimi{
  background:none;border:0;box-shadow:none;padding:0;
  font-family:'Schibsted Grotesk',system-ui,sans-serif;font-weight:700;
  text-transform:uppercase;white-space:nowrap;
  color:var(--kuusi);
  text-shadow:0 0 3px var(--sheet),0 0 6px var(--sheet),0 0 10px var(--sheet);
}
.alue-nimi::before{display:none}
.alue-taso-2{font-size:12.5px;letter-spacing:.14em;opacity:.95}
.alue-taso-3{font-size:10.5px;letter-spacing:.1em;opacity:.7;font-weight:500}

/* Maiseman vanhat nimet: serifkursiivi ruskealla erottaa ne nykyisistä
   asuinalueiden nimistä, jotka ovat vihreää versaalia. */
.vanha-nimi{
  background:none;border:0;box-shadow:none;padding:0;
  font-family:'Newsreader',Georgia,serif;font-style:italic;
  font-size:12.5px;font-weight:500;white-space:nowrap;
  color:var(--puu);
  text-shadow:0 0 3px var(--sheet),0 0 6px var(--sheet),0 0 10px var(--sheet);
}
.vanha-nimi::before{display:none}
.vanha-asutus{font-weight:600;font-size:13px}
.p-vanhanimi{
  background:none;border:0;width:auto;height:auto;border-radius:0;
  font-family:'Newsreader',Georgia,serif;font-style:italic;
  font-size:13px;color:var(--puu);
}
.p-vanhanimi::before{content:"Aa"}

/* Kohteiden nimet lähellä. */
.kohde-nimi{
  background:none;border:0;box-shadow:none;padding:0;
  font-size:11.5px;font-weight:500;color:var(--ink);white-space:nowrap;
  text-shadow:0 0 3px var(--sheet),0 0 6px var(--sheet),0 0 9px var(--sheet);
}
.kohde-nimi::before{display:none}

/* Leafletin oma attribuutio pois kortin alta */
.kartta-sivu .leaflet-bottom.leaflet-right{margin-bottom:0}

/* ---- kartta kortin sisällä (etusivu, jos joskus tarvitaan) ---- */
.kartta{height:clamp(320px,58vh,560px);border:1px solid var(--rule);border-radius:3px}
.leaflet-container{font-family:inherit;font-size:13px;background:var(--sunk)}
.leaflet-popup-content{font-size:13px;line-height:1.45}

/* ---- kartan paikka kortissa ---- */
.mapslot{border:1px dashed var(--rule);border-radius:3px;background:var(--sheet);padding:12px;display:flex;flex-direction:column;gap:10px}
.mapslot svg{display:block;width:100%;height:auto;border-radius:2px;background:var(--sunk)}
.layers{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-2)}
.layers span{display:flex;align-items:center;gap:8px}
.sw{width:14px;height:9px;border-radius:2px;flex:none}

ul.plain{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
ul.plain li{display:flex;flex-direction:column;gap:2px;font-size:13.5px}
ul.plain .who{font-weight:500}
ul.plain .what{font-size:12.5px;color:var(--ink-2);line-height:1.4}
ul.plain a{color:var(--kuusi)}

/* ---- arkin alareuna ja sivun footer ---- */
.foot{padding:20px 32px;background:var(--sunk);border-top:1px solid var(--rule);font-size:12px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between}
.sivufoot{
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  padding:0 2px;font-size:12px;color:var(--ink-3);
}
.sivufoot a{color:var(--ink-3)}

:focus-visible{outline:2px solid var(--kuusi);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- selitteen värimerkit ----
   Poistuivat vahingossa kun kartan tietolaatikko purettiin; selite palasi
   nauhana mutta merkit jäivät. Muoto ja koko erottavat, ei pelkkä väri. */
.pallo{width:11px;height:11px;border-radius:50%;flex:none;border:1.5px solid var(--kuusi)}
.p-kohtaamispaikka{background:var(--kuusi)}
.p-kauppa{background:var(--kuusi);width:9px;height:9px}
.p-leikkipaikka{background:color-mix(in oklab,var(--kuusi) 50%,transparent);width:8px;height:8px}
.p-pysakki{background:var(--puu);border-color:var(--puu);width:7px;height:7px}

/* ---- bussit reaaliajassa ----
   Leafletin divIcon-oletus on valkoinen laatikko — nollataan kuori. */
.bussikuori{background:none;border:0}
.bussi{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:18px;border-radius:3px;
  background:var(--puu);color:var(--sheet);
  font-size:11px;font-weight:700;letter-spacing:.02em;
  border:1.5px solid var(--sheet);box-shadow:0 1px 3px rgba(21,26,23,.35);
}
.p-bussi{background:var(--puu);border:0;border-radius:2px;width:13px;height:9px}

/* ---- ulkoilukohteet ----
   Kolmio: pyöreä on palvelu, neliö teos, vinoneliö luontohavainto. */
.ulkoilumerkki{
  width:0;height:0;background:none;border:0;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-bottom:11px solid var(--puu);
  filter:drop-shadow(0 1px 1px rgba(21,26,23,.35));
}

/* ---- uimavesien lämpötilat ----
   Luku itse on merkki: lämpötila on koko syy katsoa. */
.uimakuori{background:none;border:0}
.uimamerkki{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:20px;border-radius:10px;
  background:var(--sheet);color:var(--kuusi);
  border:1.5px solid var(--kuusi);
  font-size:11px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 1px 3px rgba(21,26,23,.3);
}

/* ---- taideteokset ----
   Neliö: pyöreä on palvelu, vinoneliö luontohavainto. */
.taidemerkki{
  background:var(--kuusi);border:2px solid var(--sheet);border-radius:2px;
  box-shadow:0 1px 2px rgba(21,26,23,.3);
}
.p-taide{background:var(--kuusi);border:0;border-radius:2px;width:9px;height:9px}

/* ---- luontohavainnot ----
   Vinoneliö erottaa havainnon pyöreistä kohteista muodosta, ei väristä.
   Leafletin divIcon-oletus on valkoinen laatikko reunuksella — nollataan. */
.alue-piste{background:none;border:0}
.p-luonto{background:var(--puu);border:0;border-radius:1px;width:8px;height:8px;rotate:45deg}
.luontomerkki-monta{border-width:2px}
.luontomerkki{
  background:var(--puu);border:1.5px solid var(--sheet);border-radius:1px;
  rotate:45deg;opacity:.92;box-shadow:0 1px 2px rgba(21,26,23,.25);
}

/* ---- väestökasvun kuvio ----
   Yksi sarja, yksi sävy. Pylväät ovat ohuita ja kiinni perusviivassa,
   akseli on vaisu, ja arvo on vain ensimmäisessä ja viimeisessä. */
.kasvu-hero{margin:0;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.kasvu-hero strong{
  font-family:'Newsreader',Georgia,serif;font-weight:600;
  font-size:clamp(30px,4.5vw,44px);line-height:1;letter-spacing:-.02em;color:var(--kuusi);
}
.kasvu-hero span{font-size:13.5px;color:var(--ink-2);max-width:52ch}
.kasvu-kuva{margin:0;display:flex;flex-direction:column;gap:8px}
.kasvu-kuva svg{display:block;width:100%;height:auto}
.kasvu-kuva figcaption{font-size:12.5px;line-height:1.45;color:var(--ink-3);max-width:70ch}
.kasvu-pylvas{fill:var(--kuusi)}
.kasvu-pylvas:hover{fill:color-mix(in oklab,var(--kuusi) 82%,var(--ink))}
/* Kartan aika-akselin valitsema vuosi. Sama sävy kuin kartalla valmistuneilla. */
.kasvu-pylvas-korostus{fill:var(--puu)}
.kasvu-akseli{stroke:var(--rule);stroke-width:1}
.kasvu-vuosi{fill:var(--ink-3);font-size:10px;font-family:'Schibsted Grotesk',sans-serif}
.kasvu-arvo{fill:var(--ink);font-size:11px;font-weight:700;font-family:'Schibsted Grotesk',sans-serif}
.kasvu-taulu summary{
  cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
}
.kasvu-taulu summary:hover{color:var(--kuusi)}
.kasvu-taulu .rows{margin-top:10px}

/* ================================================================
   ISOMETRINEN KARTTA — canvas täyttää ikkunan, UI on sen päällä
   ================================================================ */
/* Tällä sivulla ei ole vieritettävää sivua — kartta on koko näkymä — joten
   kaikki eleet kuuluvat kartalle. Emosivustolla kartta on lohko tekstin
   keskellä ja pystyveto vierittää; tämä on se kohta, jossa kopio eroaa. */
#iso{
  display:block;width:100%;height:100%;
  cursor:grab;touch-action:none;outline:none;
}
#iso:active{cursor:grabbing}
#iso:focus-visible{outline:2px solid var(--kuusi);outline-offset:-2px}

.iso-lataus{
  left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
  padding:10px 16px;font-size:13px;color:var(--ink-2);
}
.iso-lataus[hidden]{display:none}

/* Napsautetun rakennuksen tiedot. Oikea alakulma, selite vasemmalla. */
.iso-tiedot{
  right:12px;bottom:12px;max-width:min(280px,calc(100% - 24px));
  padding:9px 13px;display:flex;flex-direction:column;gap:1px;
  font-size:12.5px;line-height:1.4;color:var(--ink-2);
}
.iso-tiedot[hidden]{display:none}
.iso-tiedot strong{font-size:13px;color:var(--ink)}
.iso-tiedot small{color:var(--ink-3);font-size:11.5px}
/* Taideteoksen kuva kortissa: oma webp-kopio, linkki vuores.fi:n teossivulle. */
.iso-tiedot img{display:block;width:100%;max-height:180px;object-fit:cover;border-radius:6px;margin-top:6px}
/* Selausnuolet kuvan alla. */
.iso-tiedot .iso-nuolet{margin-top:8px}

/* Selitteen merkit ovat neliöitä: kartalla on rakennuksia, ei pisteitä.
   Värit tulevat JS:stä samasta paletista kuin kartta, jotta selite ei voi
   ajautua eri väriseksi kuin se mitä se selittää. */
.iso-selite-rivi .pallo,.kartta-sivu .nauha .pallo{border-radius:1px;border-width:1px}

/* Värityksen valitsin aika-akselin paneelissa. */
.iso-valitsin{
  font-family:inherit;font-size:12px;width:100%;
  padding:4px 6px;border:1px solid var(--rule);border-radius:2px;
  background:var(--sheet);color:var(--ink);
}

/* Lähderivi on pitkä: oma rivi, vaisumpi sävy kuin luvut. */
.iso-lahde{display:block;width:100%;color:var(--ink-3)}

/* ---- kartta sivun sisällä ----
   Historia-sivulla kartta on lohko eikä kokoruutu, joten sen päällä olevat
   laatikot ovat absolute kehyksen sisällä eivätkä fixed ikkunaan. */
/* Korkeus suoraan, ei aspect-ratiota: nämä ovat flex-lapsia, ja kuvasuhde
   tekisi min-content-leveydestä suhde × korkeus, jolloin kartta leviäisi
   kortin reunojen yli kapealla ruudulla. */
.iso-alue{position:relative;min-width:0}
.iso-kehys{
  position:relative;margin:0;overflow:hidden;min-width:0;
  height:clamp(320px,54vh,560px);
  background:var(--ground);border:1px solid var(--rule);border-radius:3px;
}
.iso-alue .kartta-ui{position:absolute;z-index:2}

/* Rae ja etäisyyshäivytys ovat kartan pintaa, eivät piirrosta. Ne eivät muutu
   kun karttaa siirretään, joten ne kuuluvat CSS:ään eivätkä canvasin
   piirtosilmukkaan: selain kompositoi ne kerran, kun canvasilla ne olisivat
   koko ruudun täyttö jokaisella ruudulla. Molemmat ovat kartan yläpuolella
   mutta käyttöliittymän alapuolella (z-index 1 vs. 2), ja läpäisevät hiiren.

   HÄIVYTYS. Kaukana oleva metsä on haaleampi kuin lähellä oleva — ilma on
   väliaineena harmaa. Projektio on ortografinen, joten etäisyys on suoraan
   ruudun pystyakseli ja yläreuna on aina kaukaisin. Väri tulee muuttujasta,
   joten se seuraa teemaa ilman että JS lukee sitä.

   RAE. Tasaiset täytöt ovat ruudulla täydellisen sileitä tavalla, jollaista
   painetussa kartassa ei ole. Kohina on SVG:n feTurbulence data-URI:na eli
   selaimen oma suodin — ei kuvatiedostoa, ei ulkoista pyyntöä. `soft-light`
   säilyttää värin ja muuttaa vain valoisuutta; tavallinen läpikuultavuus
   vetäisi koko kartan harmaata kohti. */
.iso-kehys::before,.iso-kehys::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
}
.iso-kehys::before{
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--ground) 34%,transparent) 0,transparent 72%);
}
.iso-kehys::after{
  mix-blend-mode:soft-light;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23r)'/%3E%3C/svg%3E");
}
.iso-alue:fullscreen{display:flex;flex-direction:column;height:100%;background:var(--ground)}
.iso-alue:fullscreen .iso-kehys{
  flex:1;height:auto;min-height:0;border:0;border-radius:0;
}

/* Selite ei mahdu kartan päälle pienessä lohkossa: se on kuvateksti. */
.iso-selite-rivi{
  display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;
  margin:0;font-size:11.5px;color:var(--ink-2);
}
.iso-selite-rivi span{display:inline-flex;align-items:center;gap:6px}
.iso-selite-rivi b{font-variant-numeric:tabular-nums;color:var(--ink)}

.iso-tyokalut{position:absolute;right:12px;top:12px;display:flex;gap:6px;z-index:900}
.iso-tyokalut .iso-nappi{
  min-width:32px;background:var(--sheet);
  box-shadow:0 1px 2px rgba(21,26,23,.08),0 10px 26px -14px rgba(21,26,23,.4);
}

/* Kerroskytkimet työkalurivin alla: pystypino oikeassa reunassa. Pois
   kytketty kerros näkyy napissa haaleana ja harmaana — tila näkyy ilman
   selitettä. */
.iso-kytkimet{
  position:absolute;right:12px;top:54px;display:flex;flex-direction:column;
  gap:6px;z-index:900;
}
.iso-kytkimet .iso-nappi{
  min-width:32px;background:var(--sheet);
  box-shadow:0 1px 2px rgba(21,26,23,.08),0 10px 26px -14px rgba(21,26,23,.4);
}
.iso-kytkimet svg{display:block;margin:0 auto}
.iso-kytkimet .iso-nappi[aria-pressed="false"]{opacity:.45;filter:grayscale(1)}

/* Kokoruudun kartta: kehys täyttää main-elementin, ei omaa korkeutta. */
.kartta-taysi.iso-alue{display:flex;flex-direction:column}
.iso-kehys-taysi{flex:1;height:auto;min-height:0;border:0;border-radius:0}

/* ---- tilavalikko ----
   Nappi vasemmalla ylhäällä, paneeli liukuu vasemmalta. Kapealla ruudulla
   paneeli on koko leveys: kartta on kosketuskäytössä ja tilat ovat isoja
   painikkeita, ei pientä listaa. */
.valikkonappi{
  top:12px;left:12px;z-index:1000;
  display:flex;align-items:center;gap:9px;
  padding:9px 14px;font-size:13px;font-weight:500;color:var(--ink);
  cursor:pointer;font-family:inherit;
}
.valikkonappi:hover{border-color:var(--kuusi)}
.valikkoviivat{
  width:16px;height:11px;flex:none;
  border-top:2px solid currentColor;border-bottom:2px solid currentColor;
  position:relative;
}
.valikkoviivat::after{
  content:'';position:absolute;left:0;top:calc(50% - 1px);
  width:100%;border-top:2px solid currentColor;
}

.tilavalikko{
  position:fixed;z-index:1001;top:0;left:0;bottom:0;width:min(320px,86vw);
  background:var(--sheet);border-right:1px solid var(--rule);
  box-shadow:0 0 40px -10px rgba(21,26,23,.45);
  display:flex;flex-direction:column;
}
.tilavalikko[hidden]{display:none}
.tilavalikko-otsikko{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--rule-2);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);
}
.tilalista{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px}
.tilanappi{
  display:flex;flex-direction:column;gap:2px;text-align:left;
  padding:12px 14px;border:1px solid var(--rule);border-radius:3px;
  background:var(--sheet);color:var(--ink);font-family:inherit;font-size:14px;
  cursor:pointer;line-height:1.3;
}
.tilanappi small{font-size:11.5px;color:var(--ink-3)}
.tilanappi:hover{border-color:var(--kuusi)}
.tilanappi[aria-current="true"]{
  border-color:var(--kuusi);background:var(--kuusi-soft);font-weight:600;
}
.tilanappi[disabled]{opacity:.5;cursor:default}
.tilanappi[disabled]:hover{border-color:var(--rule)}
.tilavalikko-jalki{
  padding:12px 16px;border-top:1px solid var(--rule-2);
  display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;
}
.tilavalikko-jalki a{color:var(--ink-2)}

/* Aika-akseli: sama laatikko ja liuku kuin kartan kerrosvalikossa. */
.iso-aika{width:196px;gap:9px}
.iso-varitys-paneeli{width:196px}
.iso-varitys-paneeli[hidden],.iso-aika[hidden]{display:none}
/* Kokoruudulla säätimet ovat oikeassa reunassa, työkalujen alla. */
.kartta-taysi .iso-aika,.kartta-taysi .iso-varitys-paneeli{right:12px;top:54px}
/* Työkalut ovat oikeassa ylänurkassa, joten akseli väistyy niiden alle. */
.iso-alue .iso-aika{right:12px;top:54px;max-height:calc(100% - 66px)}

/* Kapealla ruudulla akseli ei mahdu kartan päälle peittämättä sitä: se
   putoaa kartan alle omaksi riviksi ja liuku levenee koko leveydelle. */
@media (max-width:680px){
  .iso-alue .iso-aika{
    position:static;width:auto;max-height:none;margin-top:10px;
    flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;
  }
  .iso-alue .iso-aika .kerros-saatin{flex:1 1 200px}
  .iso-alue .iso-aika small{flex:1 1 100%}
}
.iso-aika[hidden]{display:none}
.iso-nappi{
  font-family:inherit;font-size:12px;font-weight:500;
  padding:6px 10px;border:1px solid var(--rule);border-radius:2px;
  background:var(--sunk);color:var(--ink);cursor:pointer;
}
.iso-nappi:hover{border-color:var(--kuusi);color:var(--kuusi)}
.iso-nappi:focus-visible{outline:2px solid var(--kuusi);outline-offset:1px}
.iso-aika small{font-size:11px;line-height:1.35;color:var(--ink-3)}
.iso-aika small[hidden]{display:none}

/* Kohdeselaimen nuolet: iso kosketuskohde, luku niiden välissä. */
.iso-kohteet{width:212px}
.iso-kohteet[hidden]{display:none}
.iso-nuolet{display:flex;align-items:center;justify-content:space-between;gap:8px}
.iso-nuolet .iso-nappi{min-width:44px;font-size:15px;line-height:1}
.iso-nuolet span{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* Kokoruudulla selite on alhaalla vasemmalla ja kortti sen yläpuolella:
   samalla rivillä kortti jäisi selitteen alle piiloon. */
.kartta-sivu .iso-tiedot{bottom:66px}
.iso-liikenne,.iso-saa{width:224px}
.iso-liikenne[hidden],.iso-saa[hidden]{display:none}
.iso-liikenne small,.iso-saa small{font-size:11px;line-height:1.35;color:var(--ink-3)}

/* ---- tilapaneelien sijoittelu ----
   Työpöydällä pystypino oikeassa reunassa työkalujen alla. Säiliö ei ota
   klikkauksia vastaan, vain paneelit itse — muuten näkymätön laatikko estäisi
   kartan raahaamisen. */
.iso-paneelit{
  position:absolute;right:12px;top:54px;width:224px;z-index:900;
  display:flex;flex-direction:column;gap:10px;
  max-height:calc(100% - 66px);overflow-y:auto;pointer-events:none;
}
/* Tarkkuus on nostettava: .iso-alue .kartta-ui asettaa position:absolute,
   ja absoluuttinen lapsi on ulkona asettelusta — levy kutistui padding-arvoon. */
.iso-paneelit > .kartta-ui{pointer-events:auto;position:static;width:auto}
/* Paneelit ovat oletuksena kiinni kaikilla ruuduilla: kartta on se mitä
   tullaan katsomaan, laatikot avataan kun niitä tarvitaan. */
.iso-paneelit[data-piilossa="true"]{display:none}
.paneelinappi{
  position:fixed;right:10px;bottom:10px;z-index:1000;
  padding:10px 14px;font-size:13px;font-weight:500;color:var(--ink);
  font-family:inherit;cursor:pointer;
}
.paneelinappi:hover{border-color:var(--kuusi)}

/* Kapea ruutu: paneelit alalaidan levyksi. Kartta on pieni, ja laatikot
   söivät siitä puolet.

   Reunat lasketaan turva-alueista: sivu on `viewport-fit=cover`, joten kartta
   ulottuu lovien ja kotipalkin alle mutta säätimet eivät. Ilman näitä
   alarivin napit jäisivät iPhonen kotipalkin alle. */
@media (max-width:680px){
  :root{
    --reuna-yla:calc(10px + env(safe-area-inset-top));
    --reuna-ala:calc(10px + env(safe-area-inset-bottom));
    --reuna-vasen:calc(10px + env(safe-area-inset-left));
    --reuna-oikea:calc(10px + env(safe-area-inset-right));
  }

  .iso-paneelit{
    right:0;left:0;top:auto;bottom:0;width:auto;
    max-height:50vh;padding:0 10px 56px;gap:8px;
  }

  /* Kaikki säätimet alariviin: peukalo yltää alas, ei ruudun ylälaitaan.
     Ylälaita jää tilannetiedolle. Kytkimet vasemmalle vaakariviin — pystypino
     oikeassa yläkulmassa peitti säärivin lopun. Kosketuskohde on 44 px,
     pienempään ei osu sormella. */
  .iso-tyokalut{
    top:auto;bottom:var(--reuna-ala);right:var(--reuna-oikea);left:auto;gap:8px;
  }
  .iso-kytkimet{
    top:auto;bottom:var(--reuna-ala);left:var(--reuna-vasen);right:auto;
    flex-direction:row;gap:8px;
  }
  .iso-tyokalut .iso-nappi,.iso-kytkimet .iso-nappi{
    min-width:44px;min-height:44px;padding:8px;font-size:15px;
  }
  /* Selite on tällä sivulla pelkkä lähderivi, joka on jo piilotettu:
     jäljelle jäisi tyhjä laatikko kartan päälle. */
  .kartta-sivu .nauha{display:none}

  /* Kohdekortti alas, työkalurivin yläpuolelle. Korkeus katkaistaan, jotta
     kuvallinen teoskortti ei peitä koko karttaa. */
  .kartta-sivu .iso-tiedot{
    left:var(--reuna-vasen);right:var(--reuna-oikea);
    bottom:calc(var(--reuna-ala) + 52px);top:auto;max-width:none;
    max-height:50dvh;overflow-y:auto;
  }
}

/* Korjauslinkki rakennuksen kortissa: sama muoto kuin muualla sivustolla. */
.iso-tiedot .korjaa{margin-top:6px;font-size:11.5px}
.iso-kutsu{width:240px}
.iso-kutsu[hidden]{display:none}
.iso-kutsu small{font-size:11.5px;line-height:1.4;color:var(--ink-2)}
.iso-kutsu #iso-kutsu-luku{font-weight:600;color:var(--puu)}

/* Täydennettävää: luku ja sen selitys, ei kaaviota. */
.iso-taydenna{width:250px}
.iso-taydenna[hidden]{display:none}
.taydenna-lista{display:flex;flex-direction:column;gap:9px}
.taydenna-rivi{display:grid;grid-template-columns:1fr auto;gap:1px 8px}
.taydenna-nimi{font-size:12.5px;font-weight:500;color:var(--ink)}
.taydenna-rivi b{font-size:12.5px;color:var(--puu);font-variant-numeric:tabular-nums}
.taydenna-rivi small{grid-column:1/-1;font-size:11px;line-height:1.35;color:var(--ink-3)}
.iso-taydenna > small{font-size:11.5px;line-height:1.4;color:var(--ink-2)}