/* 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;
  --maa:#d5ddd0; --maa-upotettu:#dae1d5;
  --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}
/* display:flex yllä kumoaisi hidden-attribuutin, joten se sanotaan tässä. */
.blk[hidden]{display:none}
.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}

/* ---- selaimen omat eleet pois kartan päältä ----
   Kangas esti ne (#iso, touch-action:none), mutta sen päällä olevat laatikot
   ja napit eivät: jos nipistyksen toinen sormi osui korttiin, nappiin tai
   oppaaseen, selain zoomasi koko sivun kartan sijaan. Sivu on
   overflow:hidden, joten zoomattu sivu vie kiinteät säätimet ruudun
   ulkopuolelle eikä niihin pääse enää käsiksi.

   touch-action ei periydy, mutta se leikkautuu: esi-isän `none` estäisi
   myös laatikoiden oman vierityksen. Siksi kaksi ryhmää eikä yksi sääntö
   bodylle — vierivät laatikot saavat pan-y:n, joka sallii vierityksen mutta
   ei nipistystä. */
.kartta-sivu .iso-ylavasen,.kartta-sivu .iso-tyokalut,.kartta-sivu .iso-kytkimet,
.kartta-sivu .iso-lahdenappi,.kartta-sivu .iso-kohteet,.kartta-sivu .iso-aika,
.kartta-sivu .iso-lataus{touch-action:none}
.kartta-sivu .iso-tiedot,.kartta-sivu .nauha,
.kartta-sivu .iso-opas{touch-action:pan-y}
.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);
}
/* 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}
/* Kuvallinen kortti on leveämpi. 280 px riittää nimelle ja parille riville,
   mutta taideteos jäi siinä peukalonkynneksi — ja teoksen katsominen on koko
   kerroksen tarkoitus. Leveys tulee kortin sisällöstä (:has) eikä JS:stä
   asetetusta luokasta: sääntö on siellä missä muukin ulkoasu. */
.iso-tiedot:has(img){max-width:min(420px,calc(100% - 24px))}
.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}
/* Kuvaajan nimi ja lisenssi kuvan alle: CC-BY-SA vaatii ne, joten ne
   eivät ole valinnainen koriste. Pienin luettava koko, ei korostusta. */
.kuvalahde{font-size:11px;color:var(--ink-3);margin-top:-4px}
/* Kuva näytetään kokonaan: coverilla rajattu opastaulu on lukukelvoton ja
   veistoksesta näkyy keskiosa. Katto on korkeampi kuin muualla kortissa, koska
   taideteos on kortin sisältö eikä koriste — mutta ei rajaton, ettei pystykuva
   työnnä kortin muita rivejä ruudun ulkopuolelle. */
.iso-tiedot img.kuva-kokonaan{
  max-height:min(320px,42vh);object-fit:contain;background:var(--sunk);
}
/* Kuvanappi on pelkkä kosketuskohde kuvan ympärillä: ei omaa ulkoasua, jotta
   kortti näyttää samalta kuin ennen — vain napautus tekee nyt eri asian. */
.kuvanappi{
  display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;font:inherit;color:inherit;
}
.kuvanappi:focus-visible{outline:2px solid var(--kuusi);outline-offset:2px}

/* Suurennettu kuva. Dialogi hoitaa taustan ja Escin itse; tämä asettaa vain
   koon ja poistaa selaimen oletuskehyksen. */
.kuvaikkuna{
  max-width:96vw;max-height:96vh;width:auto;padding:0;border:0;
  background:none;overflow:hidden;cursor:zoom-out;
}
.kuvaikkuna img{display:block;max-width:96vw;max-height:96vh;object-fit:contain}
.kuvaikkuna::backdrop{background:rgba(21,26,23,.86)}

/* Aukiolotila kortin otsikon alla. Ei omaa väriä auki/kiinni mukaan: teksti
   kertoo sen, ja liikennevalo lisäisi paletin ulkopuolisen sävyn. */
.iso-tiedot .iso-tila{font-weight:600;color:var(--ink)}

/* ---- merkinnät ----
   Tilalippu kertoo saman kuin merkin muoto kartalla. Väri tulee samasta
   paletista kuin merkki, jotta kortti ja kartta eivät voi ajautua eri
   väriseksi. */
.iso-lippu{
  align-self:flex-start;margin-bottom:2px;padding:1px 7px;
  border:1px solid currentColor;border-radius:999px;
  font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
}
.iso-lippu-vanhenee{color:color-mix(in oklab,var(--warning) 70%,var(--ink))}
.iso-lippu-vastattu{color:var(--kuusi)}
.iso-lippu-muisto{color:var(--puu)}
/* Jonossa oleva ehdotus: katkoviiva kertoo saman kuin merkin rengas kartalla. */
.iso-lippu-odottaa{color:var(--ink-3);border-style:dashed}

/* Vahvistuskysymys: kolme nappia, iso kosketuskohde. */
.iso-tiedot .kysy{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.iso-tiedot .kysy > span{font-weight:600;color:var(--ink)}
.iso-tiedot .kysy .napit{display:flex;flex-wrap:wrap;gap:6px}
.iso-tiedot .kysy .iso-nappi{font-size:12px;padding:6px 10px}

/* Ehdotuslomake kortissa. Kentät ovat kapeita, koska kortti on kapea — pitkä
   selitys kuuluu labeliin eikä placeholderiin, joka katoaa kirjoitettaessa. */
.iso-lomake{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.iso-lomake .napit{display:flex;gap:6px}
.iso-lomake .iso-nappi{font-size:12px;padding:6px 10px}
/* Valittu laji kartan merkkiväreillä: havainto kuusi, muisto puu — sama väri
   jolla merkintä lopulta piirretään kartalle. */
.iso-lomake [data-laji][aria-pressed="true"]{
  border-color:var(--kuusi);color:var(--kuusi);font-weight:600;
}
.iso-lomake [data-laji="muisto"][aria-pressed="true"]{
  border-color:var(--puu);color:var(--puu);
}
.iso-kentta{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--ink-3)}
.iso-kentta[hidden]{display:none}
.iso-kentta input,.iso-kentta textarea{
  font:inherit;font-size:12.5px;color:var(--ink);background:var(--sheet);
  border:1px solid var(--rule);border-radius:6px;padding:5px 7px;width:100%;
  resize:vertical;
}
.iso-kentta input:focus-visible,.iso-kentta textarea:focus-visible{outline:2px solid var(--kuusi);outline-offset:1px}

/* ---- kysely ----
   Palkki on napin oma tausta: yksi elementti, ei erillistä ristikkoa. Ennen
   äänestystä palkkeja ei näytetä, jotta ensimmäinen vastaaja ei näe mitä
   "pitäisi" vastata. */
/* Vasen ylälaita on kartan ainoa vapaa nurkka: työkalut ovat oikealla, selite
   alhaalla vasemmalla. Nurkan yläreunan ottaa tehtävänappi, joka on
   pysyvä sisäänkäynti; kysely on ohimenevä ja väistyy sen alle. */
/* Otsikko ja sulkunappi samalle riville. Nappi on pieni mutta kosketuskohde on
   iso: sulkeminen ei ole se mitä kartalla ensisijaisesti tehdään, mutta sen
   pitää onnistua ensimmäisellä yrityksellä. */
.iso-sulje{
  flex:none;margin:-4px -4px 0 0;padding:4px 8px;
  background:none;border:0;border-radius:4px;
  font:inherit;font-size:15px;line-height:1;color:var(--ink-3);cursor:pointer;
}
.iso-sulje:hover{color:var(--ink)}
.iso-sulje:focus-visible{outline:2px solid var(--kuusi);outline-offset:1px}
/* Kortin kulman ×: kelluu sisällön päällä, joten korttien rivirakenteeseen
   ei tarvitse koskea. Otsikko väistää oikealta. */
.iso-sulje-kulma{position:absolute;top:3px;right:3px;margin:0}
.iso-tiedot strong{padding-right:20px}
.iso-aani{
  position:relative;display:flex;justify-content:space-between;gap:8px;
  padding:6px 9px;border:1px solid var(--rule);border-radius:6px;
  background:var(--sheet);font:inherit;font-size:12.5px;color:var(--ink);
  cursor:pointer;overflow:hidden;text-align:left;
}
.iso-aani::before{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--osuus,0%);
  background:var(--kuusi-soft);
}
.iso-aani > *{position:relative}
.iso-aani:hover:not(:disabled){border-color:var(--kuusi)}
.iso-aani:disabled{cursor:default}
.iso-aani[aria-pressed="true"]{border-color:var(--kuusi);font-weight:600}
.iso-aani b{font-variant-numeric:tabular-nums;color:var(--ink-3)}
/* Talonmaalauksen välivaihe: arvottu nimimerkki ja asuinalueen valinta.
   Nimimerkkiä ei kirjoiteta vaan arvotaan — siksi nappi eikä kenttä. */
.iso-nimimerkki{display:flex;align-items:center;justify-content:space-between;gap:8px}
.iso-nimimerkki span{font-weight:600;color:var(--ink)}
.iso-arvo{
  flex:none;padding:3px 8px;border:1px solid var(--rule);border-radius:6px;
  background:var(--sheet);font:inherit;font-size:11px;color:var(--ink-2);
  cursor:pointer;
}
.iso-arvo:hover{border-color:var(--kuusi)}
.iso-alue{
  padding:5px 6px;border:1px solid var(--rule);border-radius:6px;
  background:var(--sheet);font:inherit;font-size:12.5px;color:var(--ink);
}

/* Käyttäjätunnus kopioitavaksi, kun ylläpitäjän oikeus puuttuu. Kenttä eikä
   teksti, koska se on tarkoitettu valittavaksi ja liitettäväksi konsoliin. */
.iso-tunnus{
  font:inherit;font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink);background:var(--sunk);border:1px solid var(--rule);
  border-radius:4px;padding:5px 7px;width:100%;
}
/* 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)}

/* Ensikäyttövihje: yksi rivi alalaidassa keskellä, pois ensikosketuksesta. */
/* ---- opas ----
   Alhaalla keskellä, kartan päällä muttei sen tilalla: laatikko on kapea ja
   matala, ja Vuores näkyy sen ympäriltä. Oman talon tunnistaminen on se mikä
   saa vastaamaan, joten kartta ei saa hävitä kehotuksen alle.

   Alalaita eikä keskelle: keskellä oleva laatikko on este, alalaidassa oleva
   on tarjous. Kortti (iso-tiedot) on oikeassa alanurkassa, joten opas väistyy
   kapealla ruudulla sen yläpuolelle. */
.iso-opas{
  left:50%;bottom:calc(var(--reuna-ala,12px) + 14px);transform:translateX(-50%);
  width:min(400px,calc(100% - 24px));padding:12px 34px 12px 15px;
  display:flex;flex-direction:column;gap:3px;z-index:950;
}
.iso-opas[hidden]{display:none}
.opas-yla{
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);
}
/* Kysymys on laatikon sisältö: se saa olla isompi kuin kortin otsikko, koska
   se on ainoa asia jota tässä pyydetään lukemaan. */
.iso-opas strong{font-size:15px;line-height:1.3;color:var(--ink);font-weight:600}
.iso-opas small{font-size:11.5px;line-height:1.4;color:var(--ink-2)}
.iso-opas .napit{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
/* Tekemisen nappi erottuu: se on se yksi asia jota tässä pyydetään. */
.iso-opas .opas-tee{
  border-color:var(--kuusi);background:var(--kuusi-soft);
  color:var(--kuusi);font-weight:600;
}
.iso-opas .iso-sulje{position:absolute;top:6px;right:8px}


/* 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}

/* ---- lähdenappi ----
   Selitteen avaaja vasemmassa alanurkassa: pyöreä i, ei riviä kartan
   alalaidassa. */
.iso-lahdenappi{
  left:12px;bottom:12px;z-index:900;
  width:28px;height:28px;padding:0;border-radius:50%;
  font-family:inherit;font-size:13px;font-weight:600;font-style:italic;
  color:var(--ink-2);cursor:pointer;
}
.iso-lahdenappi:hover,.iso-lahdenappi[aria-expanded="true"]{
  border-color:var(--kuusi);color:var(--kuusi);
}
.iso-lahdenappi:focus-visible{outline:2px solid var(--kuusi);outline-offset:1px}
/* Lähdemerkintä on työpöydällä i-napin takana (selite), joten rivi on siellä
   piilossa. Puhelimessa päinvastoin: rivi näkyy, nappi ei. */
.iso-krediitti{display:none}

/* Selite avautuu suoraan i-napin oikealle puolelle, samalle riville. */
.kartta-sivu .nauha{left:48px;bottom:12px;max-width:calc(100% - 60px)}
.nauha[hidden]{display:none}

/* ---- vasen ylänurkka ----
   Paluu tauluun ja taidekutsu samassa rivissä. Rivi asemoi, lapset eivät:
   .kartta-ui on position:fixed, joten se kumotaan tässä — muuten napit
   kasautuisivat päällekkäin samaan nurkkaan. */
.iso-ylavasen{
  position:fixed;left:12px;top:var(--reuna-yla,12px);z-index:900;
  display:flex;align-items:center;gap:8px;
}
/* display:flex ohittaisi [hidden]:n oletuksen display:none. Taidereitti
   piilottaa rivin omaksi ajakseen, ks. js/taidereitti.js. */
.iso-ylavasen[hidden]{display:none}
/* Kahden luokan tarkkuus, jotta se voittaa .kartta-ui:n position:fixedin. */
.iso-ylavasen .iso-taulu,.iso-ylavasen .iso-taide{position:static}

/* ---- paluu ilmoitustaululle ----
   Peilikuva taulun ylänurkan Kartta-napista: sama muoto, sama koko, toiseen
   suuntaan. Teksti eikä pelkkä kuvake, koska kuvake yksin ei kerro mihin
   ollaan menossa — "takaisin minne?" on juuri se mitä linkin pitää vastata. */
.iso-taulu{
  height:32px;padding:0 12px 0 9px;border-radius:16px;
  display:flex;align-items:center;gap:6px;
  font:600 13px/1 var(--sans);color:var(--ink-2);text-decoration:none;
}
.iso-taulu svg{flex:none}
.iso-taulu:hover{border-color:var(--kuusi);color:var(--kuusi)}
.iso-taulu:focus-visible{outline:2px solid var(--kuusi);outline-offset:1px}

/* ---- taidekutsu ----
   Paluulinkin vieressä. Luku on osa kutsua — "88" on se mikä saa
   napauttamaan, ei paletti. */
.iso-taide{
  height:32px;padding:0 10px 0 8px;border-radius:16px;
  display:flex;align-items:center;gap:5px;
  color:var(--ink-2);cursor:pointer;
}
.iso-taide[hidden]{display:none}
.iso-taide svg{display:block;flex:none}
.iso-taide .luku{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.iso-taide:hover{border-color:var(--kuusi);color:var(--kuusi)}
.iso-taide:focus-visible{outline:2px solid var(--kuusi);outline-offset:1px}
/* Kehitys piirtää menneisyyttä, joten nykyhetken säätimet eivät kuulu sen
   päälle. Kehityksen omat kohteet ovat kaavoja ja ne näkyvät vain viimeisellä
   Kaavassa-askeleella (kohdeNakyy) — tehtävänappi merkitsisi havainnon vuoden
   2013 Vuorekseen. Piilotus on tyylitiedostossa eikä skriptissä: se on
   näkyvyyttä eikä logiikkaa, ja uusi tila on tähän yksi rivi lisää. */
body[data-tila="kehitys"] .iso-taide,
body[data-tila="kehitys"] .iso-opas{display:none}

/* 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:720px){
  .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ä. Sama paikka
   kuin aika-akselilla — työkalunappien alla oikeassa reunassa, ei niiden
   päällä. Kumpaakaan ei ole näkyvissä yhtä aikaa: eri tilat. */
.iso-kohteet{width:212px}
.kartta-taysi .iso-kohteet,.iso-alue .iso-kohteet{right:52px;top:54px}
.iso-kohteet[hidden]{display:none}
.iso-kohteet strong{font-size:13px;color:var(--ink);line-height:1.3}
.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{width:224px}
.iso-liikenne[hidden]{display:none}
.iso-liikenne 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.

   Raja on 720 eikä 680, koska taidereitti (css/taidereitti.css ja
   js/taidereitti.js ruudunKohta) käyttää sitä lukua. Kahdella rajalla
   681–720 pikselin ruutu sai reitin puhelinasettelun mutta kartan
   työpöytäsäätimet — määrittelemätön välitila, jota kukaan ei suunnitellut. */
@media (max-width:720px){
  :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));
    /* Aika-akselin suurin korkeus kapealla ruudulla: liuku, vuosiluku,
       toistonappi ja huomautuksen 56 pikselin ikkuna. Luku on kiinteä, jotta
       työkalurivin ja kohdekortin nostot eivät ole arvauksia — mitään ei jää
       akselin alle silloinkaan kun se on täysimittainen. Jos akselille
       lisätään säätimiä, tätä on kasvatettava saman verran. */
    --aika-korkeus:190px;
  }

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

  /* Puhelimessa jää yksi nappi: oma sijainti. Zoom on nipistys ja
     kaksoisnapautus, kääntö kahden sormen kierto (js/isometria.js,
     kosketustila) — nappirivi teki saman toisen kerran ja peitti alalaidan
     siitä kartasta, jota tullaan katsomaan. Yhdeksän säädintä oli
     työpöytäasettelu siirrettynä alas, ei puhelimelle suunniteltu.

     Taidenappi ("88") lähtee samasta syystä kuin kohdeluettelo aikanaan:
     teosmerkit näkyvät nyt kartalla heti (ks. ruutukerroin), ja merkin
     napautus vie samaan taidereittiin. Kartta kertoo itse sen minkä nappi
     kertoi — luettelo on sittemmin poistettu kokonaan. */
  .iso-tyokalut,.iso-ylavasen .iso-taide{display:none}

  .iso-kytkimet{
    top:auto;bottom:var(--reuna-ala);left:var(--reuna-vasen);right:auto;
    flex-direction:row;gap:8px;
  }
  .iso-kytkimet .iso-nappi{
    min-width:44px;min-height:44px;padding:8px;font-size:15px;
  }
  /* Vieritys pysyy laatikossa: ilman tätä paneelin päädyssä jatkuva veto
     tarttuu sivuun ja iOS:ssä alkaa kumilenkki kartan päällä. */
  .kartta-sivu .iso-tiedot,.kartta-sivu .nauha,.iso-paneelit{
    overscroll-behavior:contain;
  }
  /* ---- alalaidan kerrokset ----
     Kapealla ruudulla kaikki on alalaidassa, koska peukalo yltää sinne. Siksi
     korkeudet on sovittava yhdessä, ei laatikko kerrallaan: aiemmin lähdenappi
     ja kohdekortti olivat molemmat 52 pikselissä ja i-nappi jäi kortin päälle.

       rivi 0   (reuna-ala)  sijainti vasemmalla · paluukehote keskellä · i oikealla
       kerros 1 (+52)        paneelit: kortti, opas, selite

     Kerroksia oli kolme, kun alalaidassa oli kaksi nappiriviä ja lähdenappi
     omalla rivillään. Yhden napin jälkeen ne mahtuvat samalle riville, ja
     paneelit nousevat 104:stä 52:een — 52 pikseliä lisää karttaa jokaisessa
     näkymässä.

     Jos alalaitaan lisätään rivi, tätä luetteloa kasvatetaan — ei yksittäistä
     laatikkoa. */
  /* Alle 16 pikselin kenttä laukaisee iOS Safarin automaattizoomin, joka
     sotkee koko näkymän lomaketta täytettäessä. */
  .iso-kentta input,.iso-kentta textarea{font-size:16px}
  /* Lähdenappi pois puhelimesta, ja selite sen mukana. Nappi luki säätimenä:
     kartalla oli kolme säädintä, joista yksi ei tehnyt kartalle mitään vaan
     avasi tekstiä. Lisenssiehto ei vaadi nappia vaan nimeämisen, ja se on nyt
     rivinä alalaidassa (.iso-krediitti). Selitteen värikoodit ja merkkien
     nimet jäävät työpöydälle, jossa niille on tilaa. */
  .iso-lahdenappi,.kartta-sivu .nauha{display:none}

  /* Lähderivi oikeaan alalaitaan. Pieni ja haalea: se on tarkistettavaa
     tietoa, ei luettavaa — sen kuuluu olla löydettävissä eikä huomiota
     vievä. pointer-events:none, jottei se varasta napautuksia kartalta. */
  .iso-krediitti{
    display:block;position:absolute;z-index:900;pointer-events:none;
    right:var(--reuna-oikea);bottom:var(--reuna-ala);margin:0;
    /* Yksi rivi: kaksirivinen lähdeviite alkaa lukea sisältönä. Vasemmalle
       jää sijaintinapin tila. */
    left:calc(var(--reuna-vasen) + 52px);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;
    text-align:right;font:400 9.5px/1.3 var(--sans);color:var(--ink-3);
    text-shadow:0 1px 2px var(--sheet),0 0 3px var(--sheet);
  }
  .kartta-sivu .nauha{
    left:var(--reuna-vasen);right:var(--reuna-oikea);max-width:none;
    bottom:calc(var(--reuna-ala) + 52px);max-height:35dvh;overflow-y:auto;
  }

  /* Opas samalle kerrokselle kuin kortti, koko leveydeltä: 400 pikselin
     laatikko keskitettynä jätti puhelimella reunoille tyhjät kaistat ja
     näytti irralliselta kartan päällä. */
  .iso-opas{
    left:var(--reuna-vasen);right:var(--reuna-oikea);
    width:auto;transform:none;
    bottom:calc(var(--reuna-ala) + 52px);
  }
  /* Kortti ja opas eivät mahdu samaan kerrokseen, eikä niiden kuulukaan:
     kortti on vastaus siihen mitä opas juuri pyysi. Kun kortti on auki, opas
     väistyy — ja palaa itsestään kun kortti suljetaan. */
  .kartta-sivu:has(#iso-tiedot:not([hidden])) .iso-opas{display:none}

  /* Teoskuva matalammaksi kuin työpöydällä. Kortti on kapealla ruudulla
     katkaistu 50 dvh:hon, ja 42 vh:n kuva täytti sen niin ettei kortin
     loppuun — lähde, linkit ja selausnuolet — päässyt ilman vieritystä.
     Kuva on yhä kortin isoin osa, ja napautus suurentaa sen koko ruudulle. */
  .iso-tiedot img.kuva-kokonaan{max-height:26dvh}

  /* Kohdeselain ylälaitaan. Oikeassa reunassa se valui ruudun yli: 212
     pikselin laatikko ja 52 pikselin siirto eivät mahdu 390 pikselin ruudulle,
     ja oikea nuoli jäi näkymättömiin. Alalaitaan se ei voi mennä, koska siellä
     on kortti — ja selain ja kortti ovat auki yhtä aikaa. */
  .kartta-taysi .iso-kohteet,.iso-alue .iso-kohteet{
    left:var(--reuna-vasen);right:var(--reuna-oikea);
    top:calc(var(--reuna-yla) + 52px);width:auto;
  }

  /* ---- aika-akseli kapealla ruudulla ----
     Sama sääntö kuin muillakin säätimillä: peukalo yltää alas. Akseli on
     Kehityksen päätyökalu ja sitä vieritetään sormella, joten se ottaa
     alalaidan koko leveydeltä eikä jää oikean ylänurkan kapeaksi pystylaatikoksi.

     Yläpuolella oleva sääntö (.iso-alue .iso-aika) pudottaa akselin kartan
     alle omaksi riviksi. Se pätee /historian sivulla, jossa kartta on
     tekstin seassa; kokoruudun kartassa "kartan alla" ei ole mitään, joten
     se kumotaan tässä. */
  .kartta-taysi .iso-aika{
    position:absolute;left:var(--reuna-vasen);right:var(--reuna-oikea);
    top:auto;bottom:var(--reuna-ala);width:auto;margin:0;
    /* Korkeus on katto eikä mitta: kun huomautusta ei ole — ja viimeisenä
       vuotena ei ole — laatikko kutistuu sisältöönsä eikä jätä tyhjää.
       Nostot alla käyttävät kattoa, joten mikään ei jää alle silloinkaan
       kun laatikko on täysimittainen. */
    height:auto;max-height:var(--aika-korkeus);overflow:hidden;
    /* Asettelu kirjoitetaan tässä kokonaan auki, vaikka yllä oleva
       /historia-sääntö sattuisi antamaan saman tuloksen: kaksi sääntöä joilla
       on sama tarkkuus on huono paikka nojata siihen kumpi tuli myöhemmin. */
    flex-flow:row wrap;align-items:flex-end;gap:8px 14px;
  }
  /* Liuku omalle riville koko leveydeltä, vuosiluku ja toistonappi seuraavalle. */
  .kartta-taysi .iso-aika .kerros-saatin{flex:1 1 100%}
  /* Huomautus on ainoa venyvä osa, joten se saa kiinteän ikkunan ja vierii sen
     sisällä. Ilman rajaa pisin teksti — metsäaskeleen viisi virkettä — kasvaisi
     laatikon katon yli ja loppu jäisi leikkautumaan näkymättömiin. */
  .kartta-taysi .iso-aika small{flex:1 1 100%;max-height:56px;overflow-y:auto}

  /* Kohdekortti nousee aika-akselin yli. Nosto koskee vain Kehitystä: muissa
     tiloissa akselia ei ole eikä alalaita ole varattu. Työkalurivi oli tässä
     ennen mukana; puhelimessa sitä ei enää ole. */
  body[data-tila="kehitys"].kartta-sivu .iso-tiedot{
    bottom:calc(var(--reuna-ala) + var(--aika-korkeus) + 8px);
  }

  /* Kohdekortti alas, nappirivin yläpuolelle. Korkeus katkaistaan, jotta
     kuvallinen teoskortti ei peitä koko karttaa: 50 dvh jätti kartalle vain
     kolmanneksen, ja se kolmannes oli väärä — valittu kohde jäi kortin alle
     (ks. kohdekohta js/isometria.js:ssä, joka nostaa sen näkyviin). */
  .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:42dvh;overflow-y:auto;
  }

  /* ---- kosketuskohteet ----
     Sormi tarvitsee 44 pikseliä. Nämä jäivät työpöytämitoilleen, kun muut
     säätimet kasvatettiin: kortin × oli 26×23, ylärivin napit 32 korkeita ja
     korjauslinkit 17. */
  .iso-sulje{
    min-width:44px;min-height:44px;padding:0;
    display:flex;align-items:center;justify-content:center;
  }
  .iso-sulje-kulma{top:0;right:0}
  .iso-opas .iso-sulje{top:2px;right:2px}
  /* Otsikko väistää ×:n uutta leveyttä, ettei pitkä nimi mene sen alle. */
  .iso-tiedot strong{padding-right:44px}
  .iso-ylavasen .iso-taulu{height:44px;border-radius:22px}
  .iso-nuolet .iso-nappi{min-height:44px}
  .iso-opas .napit .iso-nappi{min-height:44px}
  /* Laatikko kasvaa 44:ään, mutta alleviivaus pysyy tekstissä kiinni: ilman
     tätä katkoviiva valuisi tyhjän kosketusalueen alalaitaan. */
  .iso-tiedot .korjaa{
    min-height:44px;display:inline-flex;align-items:center;border-bottom:0;
    text-decoration:underline dotted;text-underline-offset:3px;
  }
}

/* Kapeimman puhelimen oma sääntö poistettu: se kutisti napit 42 pikseliin,
   koska alalaidassa oli kuusi nappia kahdessa ryhmässä ja ne menivät
   päällekkäin 360 pikselin ruudulla. Yhden napin jälkeen 360 pikselissä on
   noin 300 tyhjää, joten sääntöä ei ole mitä sovittaa — ja kosketuskohde
   pysyy suositellussa 44:ssä myös kapeimmalla laitteella. */

/* 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)}

/* ---- tehtäväsivu ----
   Palkki ja luku. Pelkkää tekstiä ja yhtä täyttöä: sivun tehtävä on kertoa
   mitä on tekemättä, eikä siihen tarvita kuvia eikä pisteitä. */
.tehtavat{display:flex;flex-direction:column;gap:22px}
.tehtava{display:flex;flex-direction:column;gap:7px}
.tehtava-yla{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.tehtava h3{margin:0;font-size:15.5px;font-weight:500;letter-spacing:-.01em;margin-right:auto}
.tehtava-luku{font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.tehtava-luku b{font-size:15px;color:var(--ink)}
/* Palkki on matala ja leveä: se kertoo suhteen, ei tarkkaa lukua — tarkka luku
   on sen alla numeroina, koska palkista ei saa luettua 23 prosenttia. */
.palkki{height:6px;border-radius:3px;background:var(--maa-upotettu);overflow:hidden}
.palkki span{display:block;height:100%;background:var(--kuusi);border-radius:3px}
.tehtava-tila{margin:0;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---- värimittaus ----
   Kuva täyttää leveyden, ja mittausristi asemoidaan sen päälle prosentteina
   jotta se pysyy paikallaan kun kuva skaalautuu. */
.varimittari{position:relative;line-height:0}
.varimittari canvas{
  width:100%;height:auto;max-height:70vh;object-fit:contain;
  border:1px solid var(--rule);border-radius:3px;background:var(--sunk);
  cursor:crosshair;
}
.risti{
  position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;
  border:2px solid #fff;border-radius:50%;
  box-shadow:0 0 0 2px rgba(21,26,23,.55);pointer-events:none;
}
.risti[hidden]{display:none}

.tulosrivi{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nayte{
  width:44px;height:44px;border-radius:3px;border:1px solid var(--rule);
  background:var(--sunk);flex:0 0 auto;
}
.heksa{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:22px;letter-spacing:.02em;margin-right:auto;
}
/* Luuppi näyttää mitatun alan sellaisenaan, joten pikselit eivät saa
   pehmentyä: interpolointi näyttäisi tasaisemman pinnan kuin mitattu oli. */
.luuppi{
  width:120px;height:120px;image-rendering:pixelated;
  border:1px solid var(--rule);border-radius:3px;
}
.luuppi[hidden]{display:none}
.huomio{color:var(--puu)}