/* VÄRIMAAILMA (2.96.0)

   Kaikki palvelun vihreät ovat samaa sävyä, 131 astetta, ja ne johdetaan
   kahdesta arvosta – uutta vihreää ei keksitä. Jos tarvitaan sävy, otetaan
   porras alta.

     korostukset   #26562e   painikkeet, linkit, mittarin täyttö
     pinnat        #314234   brändin tumma vihreä, valkoisella vaalennettuna:
                             10 % #eaeceb · 17 % #dcdfdc · 21 % #d4d7d4
                             26 % #c9ceca · 32 % #bdc3be · 40 % #adb3ae
                             48 % #9ca49d

   MIKSI POHJA ON VÄRILLINEN. Vanhalla #f5f4f0-pohjalla valkoisen kortin ja
   pohjan kontrastisuhde oli 1,05: kortti ja tausta olivat käytännössä samaa
   väriä, ja reunaviiva oli ainoa erottaja. Nyt suhde on 1,60, jolloin
   korttirakenne lukeutuu itsestään ja reunaviiva on vahvistus.

   MIKSI KOROSTUS TUMMENI. Vanha #2f6b3a jää värillisellä pohjalla lukuun
   4,01, kun luettavuusraja on 4,5. #26562e on sama sävy yhden askeleen
   tummempana: 5,37 pohjalla ja 8,56 valkoisella. Vaihtoehto olisi ollut kaksi
   eri vihreää – vaalea kortilla ja tumma pohjalla – mutta se olisi sääntö,
   joka pitää muistaa joka kerta kun uusi elementti tehdään.

   --accent-raja on tunnisteiden ja ok-ilmoitusten reunus. Ilman sitä pehmeä
   vihreä täyttö on valkoista korttia vasten kontrastiltaan 1,20 eli
   käytännössä näkymätön. Reunus tekee tunnisteen erotettavaksi MUODOSTA
   eikä täytöstä – sama ratkaisu kuin kartan valikon Sulje-napissa.

   --ura on mittareiden tyhjä osa. Se oli aiemmin kovakoodattu (#eceae4 ja
   #eceae5) jokaisessa käyttöpaikassa, eli se ei seurannut värien vaihtoa. */
/* KORTIN SÄVY, SISÄREUNUS JA VIHJELAATIKKO (2.105.0)

   Kolme muutosta, jotka tehtiin mockupin jälkeen (Aleksi 10.–11.9.2026).

   1. --panel ON VALKOINEN. Sitä kokeiltiin lämpimänä luonnonvalkoisena
      (#faf6ee) ja se palautettiin: Aleksi 11.9.2026 "en tykännytkään tuosta
      mikä muutettiin luonnon valkeaksi". Kokeilu on kirjattu tähän siksi,
      ettei sitä tehdä uudelleen vahingossa – väri ei ollut väärin mitattuna
      (muste 17,27 · vaimennettu 7,66 · vihreä 7,94) vaan väärin katsottuna.

   2. --sisareuna on KORTIN SISÄLLÄ olevien laatikoiden reunus. --line on
      kortin ja taustan välinen raja; kortin sisällä se on liian jämerä ja
      tekee näkymästä ruudukon, jossa jokainen laatikko huutaa yhtä kovaa
      kuin kortti jonka sisällä se on. Tämä on noin kolmasosa siitä painosta.

   3. --vihje on kahden ylimmän laatikon väri metsäsuunnitelmasivulla
      (metsätilan valitsin ja tietojen lähde). Ne olivat molemmat
      --accent-soft eli samaa vihreää kuin palvelun muut korostuslaatikot,
      ja kaksi peräkkäistä samanväristä laatikkoa luetaan yhtenä lohkona –
      vaikka toinen on käyttäjän valinta ja toinen kertoo mistä tiedot ovat.
      Sävy on lämmin, kun palvelun vihreä ja harmaa tausta ovat viileitä:
      ero syntyy lämpötilasta eikä kirkkaudesta, joten se erottuu myös
      silloin kun ruudulla paistaa aurinko. */
/* ============================================================================
   TUMMA POHJA (2.139.0 · sävy vaalennettu 2.144.0)

   Sivun tausta on #1A241E. Kortit pysyvät valkoisina. Palvelussa on siis
   kaksi pintaa, ja SAMA TEKSTIVÄRI EI KELPAA MOLEMMILLE: valkoinen teksti
   on pohjalla oikein ja kortissa näkymätön, tumma teksti päinvastoin.

   Ratkaisu on se, että --ink, --muted ja --line EIVÄT OLE KIINTEITÄ VÄREJÄ
   VAAN PINNAN OMINAISUUKSIA. Juuressa ne ovat pohjan arvot (vaalea teksti,
   läpikuultava viiva). Jokainen vaalea pinta – kortti, ikkuna, kenttä –
   ilmoittaa samat muuttujat uudelleen vaaleina, ja koska muuttujat
   PERIYTYVÄT, koko kortin sisältö saa vaaleat arvot ilman että yhtäkään
   olemassa olevaa sääntöä tarvitsee muuttaa. `.muted` on kortissa yhä
   harmaa ja pohjalla vaalea – sama sääntö, eri pinta.

   Siksi tässä tiedostossa ei ole yhtään "tumman teeman" rinnakkaissääntöä.
   Jos uusi vaalea pinta lisätään, se lisätään alla olevaan
   VAALEA PINTA -luetteloon – ei muuta.

   KOLME VÄRIÄ, JOTKA EIVÄT OLE MUUTTUJIA SAMASSA MIELESSÄ:

     --accent (#26562e) on ennallaan. Se on valkoisen kortin väri: painikkeet,
     mittarit, tunnisteet. Tummaa pohjaa vasten se ei lue – siihen on
     --pohja-korostus (#9CC7A4), ja vaalealla pinnalla se on taas --accent.
     Yksi nimi, molemmat pinnat oikein.

     --upote on se, mikä ennen oli var(--bg): kortin SISÄLLÄ oleva upotettu
     laatikko. Kun --bg muuttui tummaksi, ne laatikot olisivat muuttuneet
     mustiksi keskellä valkoista korttia.

     --ghost-* ovat haamupainikkeen kolme väriä. Haamupainike on ainoa
     painike, jonka pinta on sivun pinta: kortissa valkoinen, pohjalla
     läpinäkyvä vaalealla reunuksella.

   SÄVY VAALENNETTU (2.144.0)

   Pohja oli #141B17 (vaaleus 9,2 %). Käyttäjä antoi palautetta, että se on
   liian tumma. Uusi arvo on #1A241E: SAMA 146 asteen vihreä, vain yksi
   vaaleusaskel ylemmäs (12,2 %). Sävyä ei vaihdettu eikä kylläisyyttä
   muutettu, joten mikään muu palvelun väri ei siirtynyt mukana.

   Vaihtoehtoja katsottiin viisi (#1A241E … #384C41) ja Aleksi valitsi
   23.9.2026 hienovaraisimman: "valitaan A hienovarainen. Korjataan sitten
   uudestaan jos tulee palautetta." Jos palautetta tulee lisää, seuraavat
   askeleet ovat #212D26, #28362E, #304037 ja #384C41 – ne on mitattu ja
   kaikki pitävät tekstivärit luettavuusrajan yläpuolella.

   2.163.0 (Aleksi 29.9.2026, vertailu pohjan-savyvaihtoehdot.pdf): "otetaan
   C käyttöön" – #28362E, keskitie. Kontrastit tällä pohjalla: valkoinen
   12,7, vaimennettu 6,8, #9cc7a4 6,7 (raja 4,5). Kartan paneelit
   rgba(40,54,46) ja #map #2F3F38 seuraavat (kartta.css), samoin
   ammattilaisen kuviopaneelin yläosa (.ammotsa).

   MIKÄ TÄSSÄ ON MITATTAVA. Pohjan päällä on kolme tekstiväriä, ja jokainen
   heikkenee kun pohja vaalenee. Uudella pohjalla valkoinen on 16,0,
   vaimennettu (68 %) on 8,1 ja --pohja-korostus #9cc7a4 on 8,5. Raja on
   4,5. Jos pohjaa vaalennetaan vielä, nämä kolme lukua on laskettava
   uudelleen – #9cc7a4 osuu rajaan ensimmäisenä.

   KARTTA SEURAA. kartta.css:n --kartta-pinta ja --kartta-pinta-vahva ovat
   SAMA RGB kuin pohja, vain läpikuultavana, ja #map:n oma tausta on yhden
   askeleen pohjaa vaaleampi. Ne vaalennettiin samassa suhteessa. Jos vain
   toinen tiedosto muutetaan, kartan paneelit alkavat erottua pohjasta
   tummempana laatikkona – juuri sitä varten ne on sidottu toisiinsa.

   FORST-ETUSIVU EI SEURAA. forst.css:n --forst-maasto (#0E1411) on
   tarkoituksella oma, palvelua tummempi pohja. Aleksin valinta 23.9.2026. */
:root{
  --bg:#28362E; --panel:#fff;
  /* pohjan arvot – nämä ovat voimassa kaikkialla paitsi vaaleilla pinnoilla */
  --ink:#fff; --muted:rgba(255,255,255,.68); --line:rgba(255,255,255,.15);
  --ura:rgba(255,255,255,.16);
  --pohja-pinta:rgba(255,255,255,.05); --pohja-raja:rgba(255,255,255,.16);
  --pohja-korostus:#9cc7a4;
  /* YLÄPALKIN TEKSTI (2.139.1)

     Aleksi 22.9.2026: "ylävalikon tekstit pitää laittaa selvemmiksi nyt on
     liian ohuet. kiinteistörajat ja selitteen teksti on hyvä paksuinen."

     Palkissa oli kolme eri painoa samalla rivillä: kytkimen nimi 600,
     pudotusvalikon arvo 500 ja painikkeen teksti 400. Vaalea kirjain
     tummalla pohjalla ohenee vielä optisesti lisää, koska valo vuotaa
     tummaan taustaan – sama teksti, joka valkoisella pohjalla on riittävä,
     on tummalla ohut. Siksi palkin teksti on 600 kaikkialla.

     Kaksi muuttujaa eikä yksi kiinteä väri: palkissa on kaksi tilaa, ja
     ero niiden välillä on nimenomaan se, mitä muuttuja säilyttää. Jos
     jonkin kohdan väri kirjoitetaan suoraan, se jää seuraavalla kerralla
     muuttamatta – juuri niin syntyi ne kolme painoa. */
  --palkki-teksti:rgba(255,255,255,.85); --palkki-teksti-nyt:#fff;
  --palkki-pinta:rgba(255,255,255,.1);
  --ghost-tausta:transparent; --ghost-teksti:#fff;
  --ghost-raja:rgba(255,255,255,.3);
  --sisareuna:#e2e5e2; --upote:#f1f3f1; --kortin-raja:#d6dad6;
  --vihje:#faf5ec; --vihje-raja:#e3d6bb; --vihje-teksti:#6b5729;
  --accent:#26562e; --accent-soft:#e4ece5; --accent-raja:#c9decd;
  --warn:#b4661d; --err:#a33a2a; --blue:#1f6feb;
  /* NAPPIEN VÄRIT AMMATTILAISPUOLELLA (2.162.0), ks. tiedoston loppu.
     Tumman pohjan arvot tässä; vaaleat pinnat vaihtavat ne *-vaalea-arvoihin
     (samat lohkot, joissa --muted vaihtuu). */
  --toiminto:#f3a45c; --peru:#ff9c8e;
  --auki-tausta:rgba(156,199,164,.2); --auki-raja:#9cc7a4; --auki-teksti:#fff;
  --toiminto-vaalea:#b45309; --peru-vaalea:#a33a2a; --auki-tausta-vaalea:#e4ece5;
  /* yhteinen ohjainkorkeus ja tekstikoko kaikille painikkeille ja kentille */
  --nappi-korkeus:38px; --nappi-teksti:13.5px;
  --kirjasin:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* VAALEA PINTA.

   Luettelossa ovat vain ULOIMMAT vaaleat pinnat. Sisältö perii muuttujat,
   joten korttien sisällä olevia laatikoita ei tarvitse luetella – eikä saa
   luetella turhaan, koska luettelo on se paikka, josta myöhemmin katsotaan
   mitkä pinnat ovat vaaleita.

   color:var(--ink) on välttämätön eikä toisto: pelkkä muuttujan ilmoitus ei
   vaihda elementin omaa väriä, koska se peritään body:ltä (valkoinen).
   Myöhemmät säännöt (esim. .tabs button{color:var(--muted)}) voittavat tämän
   normaalisti ja saavat nyt oikean, vaalean pinnan harmaan. */
.card,.login-box,.ikkuna,.tasopalkki,.dropzone,.valinta-tois,.tasokortti,
.sarakepaneeli,.kaaviovihje,.valintapalkki,.msg,.tabs button,
input,select,textarea,
table.kortiksi tr,.kiintlista tr{
  --ink:#0f1410; --muted:var(--muted-vaalea,#47514a);--toiminto:var(--toiminto-vaalea);--peru:var(--peru-vaalea);--auki-tausta:var(--auki-tausta-vaalea);--auki-raja:var(--accent);--auki-teksti:var(--accent); --line:#adb3ae; --ura:#dcdfdc;
  --pohja-korostus:var(--accent);
  --ghost-tausta:#fff; --ghost-teksti:var(--accent); --ghost-raja:var(--accent);
  color:var(--ink);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
/* LEIPÄTEKSTI 15 PX (2.96.0)

   Nosto koskee vain sitä tekstiä, jolla ei ole omaa kokoa: kappaleita,
   listoja ja korttien sisältöä. Taulukot (13 px), kenttien selitteet ja
   .small (12,5 px), tunnisteet (11,5 px) ja yläpalkin linkit (13,5 px)
   pitävät omansa – niiden nosto on eri päätös ja vaatii asettelun
   mittaamisen uudelleen.

   Yläpalkki EI kasva tästä, koska siinä on kaikki koot määritelty erikseen.
   Se on tarkistettu: #top{min-height:59px} pitää yhä paikkansa. */
body{font:15px/1.5 var(--kirjasin);
  color:var(--ink);background:var(--bg);display:flex;flex-direction:column}
/* mikään elementti ei saa pudota selaimen omaan kirjasimeen */
button,input,select,textarea,.btn{font-family:var(--kirjasin)}

/* ============================================================================
   KOSKETUSNÄYTÖLLÄ TEKSTI EI MAALAUDU (2.106.1)

   Aleksi 11.9.2026 kuvakaappauksen kanssa: napautus osui sanaan kartalla, ja
   ruudun alareunaan nousi Googlen hakupalkki ("kuviota – Katso hakutulokset
   napauttamalla"), joka jätti jälkeensä mustan kaistaleen.

   SE EI OLE PALVELUN VIRHE VAAN CHROMEN OMINAISUUS: "Kosketa ja hae"
   (Touch to Search). Chrome tarjoaa hakua, kun napautus osuu MAALATTAVAAN
   sanaan. Sitä ei voi estää tapahtumaa kuuntelemalla – palkki nousee ennen
   kuin sivu näkee mitään – mutta se ei laukea lainkaan, jos sanaa ei voi
   maalata. Sama rivi poistaa myös vahingossa syntyvät maalaukset ja iOS:n
   pitkän painalluksen valikon.

   VAIN KOSKETUSNÄYTÖILLÄ. pointer:coarse tarkoittaa sormea: puhelinta ja
   tablettia, myös sovellusta. Hiirellä ongelmaa ei ole – hiiri maalaa vain
   vetämällä, ei napauttamalla – joten tietokoneella kaikki teksti on
   maalattavissa kuten ennen. Kahden laitteen eri sääntö on tässä oikein:
   vika on sormen ja napautuksen yhdistelmässä, ei tekstissä.

   POIKKEUKSET OVAT NE PAIKAT, JOISSA MAALAUS ON TARKOITUS. Kentät ja
   tekstilaatikot: niissä maalaus on osa kirjoittamista, ja ilman tätä riviä
   sanan kaksoisnapautus ja kohdistimen siirto lakkaisivat toimimasta
   puhelimessa. .valittava on jakolinkin osoite: jos leikepöytä ei ole
   käytettävissä, osoite maalataan koodista, jotta sen voi kopioida käsin
   (ks. kartta/jakolinkki.js) – lukittuna se maalaus ei näkyisi.

   Käyttäjä voi halutessaan kytkeä toiminnon pois myös Chromen omista
   asetuksista, mutta se koskee vain hänen omaa puhelintaan. Tämä koskee
   kaikkia. */
@media (pointer:coarse){
  body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  input,textarea,select,[contenteditable],.valittava{
    -webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
}
/* Linkin väri seuraa pintaa: kortissa --accent, tummalla pohjalla vaaleampi
   vihreä. Yksikään sivu ei siis merkitse linkkejään erikseen sen mukaan,
   kummalla pinnalla ne ovat. */
a{color:var(--pohja-korostus)}
h1,h2,h3{margin:0 0 10px}
h1{font-size:20px} h2{font-size:17px} h3{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}

/* yläpalkki */
/* Palkki ei ole oma pintansa vaan hiukan vaaleampi kohta pohjaa. Valkoinen
   palkki tumman sivun päällä olisi kirkkain asia ruudulla, vaikka se on
   navigaatiota eikä sisältöä. */
.top{display:flex;align-items:center;gap:14px;padding:10px 18px;background:var(--pohja-pinta);
  border-bottom:1px solid rgba(255,255,255,.12);flex-wrap:wrap;z-index:1000}

/* VUOSILUSTOT EIVÄT OLE PALKISSA (2.139.1)

   Ne olivat siinä yhden version ajan. Aleksi 22.9.2026: "vuosilustot
   pakkautuu nurkkaan."

   Syy on mitta eikä maku. Kuvio on 1280 × 54 ja se venytetään palkin
   leveyteen, joten 390 pikselin ruudulla vaakasuhde on kolmasosa siitä,
   mille kuvio piirrettiin: lustot litistyvät pystysuunnassa kasaan ja
   näyttävät kulmaan puristetulta viivanipulta – eivät vuosilustoilta.
   Kuvio on radiaalinen, eikä radiaalista kuviota voi venyttää yhteen
   suuntaan ilman että se lakkaa esittämästä sitä mitä se esittää.

   Vaihtoehto olisi ollut piilottaa se kapealla ruudulla. Silloin palkissa
   olisi kaksi eri ilmettä saman palvelun kahdella laitteella eikä kumpikaan
   olisi se, joka muistetaan. Kuvio on nyt yhdessä paikassa, puolen
   valinnassa, jossa se mahtuu kokonaan näkyviin.

   Palkin läpikuultava tausta jää: se erottaa palkin sivusta ilman kuviota. */
.top .brand{font-weight:650;font-size:16px;margin-right:6px}
.top .brand span{color:var(--pohja-korostus)}
/* FORST-TUNNUS YLÄPALKISSA (2.140.0)

   Vain ammattilaispuolella. Tunnus on kuva eikä tekstiä, koska sen O on
   piirretty vuosilustoista – sitä ei saa ladotuksi kirjasimella.

   Kuvan väri on tiedostossa (#E9EFEA) eikä currentColor: <img> ei peri
   CSS:n color-arvoa. Palkki on aina tumma, joten yksi väri riittää.

   Korkeus on kiinteä ja leveys auto, jotta tunnus ei veny jos palkki
   kaventuu. Brändiohjeen pienin koko on 90 px leveä; palkissa tunnus on
   104 px, eli juuri sen yli. */
.top .forst-brand{display:flex;align-items:center;line-height:0}
.top .forst-brand img{height:20px;width:auto;display:block}
@media (max-width:560px){.top .forst-brand img{height:17px}}

/* Nimi on linkki omiin metsätiloihin. Se näyttää yhä otsikolta: alleviivaus
   tulee vasta osoittaessa, jottei palkkiin tule kolmatta linkkityyliä. */
.top a.brand{text-decoration:none;color:inherit;cursor:pointer}
.top a.brand:hover{text-decoration:underline}
/* PALKKI RIVITTYY, LINKKI EI (2.83.0).

   Kun palkkiin tuli viides linkki (2.82.0), se ei enää mahtunut puhelimen
   ruudulle. nav ei rivittynyt, joten selain teki ainoan mahdollisen: katkoi
   sanat linkkien SISÄLTÄ. "Lähetä palautetta" oli kahdella rivillä ja
   silti yli reunan, ja koko sivu sai vaakavierityksen – kartta ja
   kuvioluettelo mukaan lukien.

   Nyt rivittyy nav ja pysyy koossa linkki. Se on oikea järjestys: linkin
   teksti on nimi, ja kahtia katkaistu nimi luetaan hitaammin kuin kokonainen
   nimi seuraavalta riviltä. */
.top nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
/* Ominaisuuksien linkit tulevat span-kääreen sisällä, koska ne haetaan
   palvelimelta vasta palkin piirtämisen jälkeen (ks. public/js/yhteinen.js).
   Ilman tätä riviä kääre on nav:in ainoa flex-kohde ja sen sisällä linkit
   ovat tavallista tekstiä: pystypehmuste ei kasvata riviä, joten linkki jäi
   kolme pikseliä ylemmäs ja viisi pikseliä matalammaksi kuin naapurinsa –
   ja väli naapuriin puuttui, koska nav:in gap ei ulotu kääreen sisään.
   display:flex tekee kääreestä läpinäkyvän: linkit asettuvat samalle
   riville ja samaan tasoon kuin Omat metsätilat ja Usein kysyttyä. */
.top nav>span{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
/* Linkki on 600 eikä --muted: ks. --palkki-teksti :root-lohkossa. */
.top nav a{padding:6px 11px;border-radius:7px;text-decoration:none;
  color:var(--palkki-teksti);font-size:13.5px;font-weight:600;
  display:inline-flex;align-items:center;line-height:1.35;white-space:nowrap}
/* VOIMASSA OLEVA KOHTA ON LIHAVOITU VALKOINEN (2.139.1)

   Aleksi 22.9.2026: "tee myös niin, että valittu välilehti ei muutu
   vihreäksi vaan boldatuksi valkoiseksi."

   Vihreä oli väärä merkki kahdesta syystä. Palvelussa vihreä tarkoittaa
   korostusta – painiketta, tunnistetta, jotain johon painetaan – ja
   voimassa oleva välilehti on ainoa palkin kohta, johon EI ole mitään
   syytä painaa. Ja tummalla pohjalla vihreä on himmeämpi kuin valkoinen,
   joten avoinna oleva sivu luki palkin vaimeimpana kohtana.

   Laatikko jää lihavoinnin rinnalle (Aleksin valinta): lihavointi kertoo
   missä ollaan luettaessa, laatikko kauempaa vilkaistessa.

   OSOITTIMEN ALLA SAMA LAATIKKO MUTTA EI LIHAVOINTIA. Osoitin kertoo
   missä sormi tai hiiri on, lihavointi kertoo mikä sivu on auki – kaksi
   eri asiaa, jotka eivät saa näyttää samalta. */
.top nav a:hover{background:var(--palkki-pinta);color:var(--palkki-teksti-nyt)}
.top nav a.on{background:var(--palkki-pinta);color:var(--palkki-teksti-nyt);font-weight:700}
/* YLÄPALKILLE VARATAAN TILA ETUKÄTEEN (2.90.0)

   Yläpalkki piirretään vasta kun palvelin on kertonut kuka on kirjautuneena.
   Siihen asti #top oli nollan korkuinen, ja kun palkki ilmestyi, KOKO SIVU
   HYPPÄSI 55 PIKSELIÄ ALASPÄIN. Mitattu 7.9.2026 puhelimen verkolla: hyppy
   tapahtui 383 ms kohdalla, ja Googlen mittari CLS sai arvon 0,564 – yli
   viisinkertainen "hyvän" rajaan (0,1) nähden.

   Sillä on väliä sormella: jos peukalo on juuri silloin matkalla nappia
   kohti, se osuu väärään.

   min-height on LATTIA, ei korkeus. Jos palkki on korkeampi – työpöydällä
   pitkä sähköpostiosoite voi rivittää sen kahdelle riville, ja
   ammattilaispuolen palkki rivittyy puhelimessa – tila kasvaa normaalisti
   eikä mitään leikkaudu. Silloin hyppy pienenee muttei katoa, ja se on
   tietoinen kompromissi: tarkka korkeus vaatisi palkin mittaamista
   etukäteen, mikä ei ole mahdollista ennen kuin nimi tiedetään.

   Mitatut korkeudet 7.9.2026 (Omat metsätilat):

       leveys ≤560 px   55 px    kapea pehmuste (ks. media 560)
       leveys  561+     59 px

   Nämä luvut ovat mittaustulos, eivät arvio. Jos palkin pehmustetta tai
   painikkeiden korkeutta muutetaan, nämä on mitattava uudelleen. */
/* flex:none ON OSA VARAUSTA, EI KOSMETIIKKAA (2.95.0)

   body on pystysuora flex-säiliö, jonka korkeus on 100 %. Sen lapset saavat
   siis kutistua, ja flex-lapsen automaattinen vähimmäiskoko (min-height:auto)
   on se, mikä normaalisti estää kutistumisen sisällön alle.

   Yllä oleva min-height KORVAA sen automaattisen vähimmäiskoon. Siitä
   hetkestä lähtien #top sai kutistua 59 pikseliin – ja kutistuikin, koska
   .wrap on aina korkeampi kuin ruutu. Metsänomistajan palkki mahtuu yhdelle
   riville, joten mikään ei muuttunut. Ammattilaisen palkki rivittyy
   puhelimessa kolmelle riville, ja se on 129 px korkea 390 pikselin
   ruudulla: 74 pikseliä jäi #topin ulkopuolelle, ja sivun ensimmäinen kortti
   piirtyi sen päälle. Käyttäjän nimi ja KIRJAUDU ULOS -painike jäivät kortin
   alle – puhelimella ammattilainen ei päässyt kirjautumaan ulos lainkaan.

   Aleksi 7.9.2026: "tarkista ammattilaisen kännykkäväkymät. Ne ovat vähän
   miten sattuu ja kaikkea on päällekkäin."

   flex:none palauttaa sen, minkä min-height otti pois: palkki ei kutistu
   sisältönsä alle. min-height jää lattiaksi, eli varaus ennen palkin
   saapumista säilyy. Molempia tarvitaan – kumpikaan yksin ei riitä. */
#top{min-height:59px;flex:none}

/* PUHELINVALIKON KÄÄRÖ JA NAPPI (2.89.0)

   Työpöydällä molemmat ovat olemattomia: kääre on display:contents, joten
   sen lapset ovat palkin suoria flex-kohteita täsmälleen kuten ennen
   kääretä, ja nappi on piilossa. Yksikään yllä oleva sääntö ei siis muutu
   eikä selainversio liiku pikseliäkään.

   Kaikki valikkoon liittyvä on alempana @media (max-width:700px) -lohkossa.
   Se on tahallista: jos joku joskus poistaa sen lohkon, jäljelle jää
   toimiva työpöytäpalkki eikä puolinainen valikko. */
.ylavalikko{display:contents}
.valikkonappi{display:none;background:none;border:1px solid var(--line);border-radius:9px;
  width:42px;height:38px;padding:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px}
.valikkonappi span{display:block;width:19px;height:2px;border-radius:2px;background:var(--ink)}
.valikkonappi:hover{border-color:var(--pohja-korostus)}
.valikkonappi:hover span{background:var(--pohja-korostus)}
/* Erotinviiva on olemassa vain valikossa. Työpöytäpalkissa se olisi
   pystyviiva keskellä riviä. */
.valikkoviiva{display:none}

.spacer{flex:1}
/* Nimi ja sähköpostiosoite ovat tieto siitä kuka on kirjautuneena, eivät
   kohta johon mennään: paino pysyy tavallisena. Väri on silti vaaleampi
   kuin --muted (68 %), koska sekin oli tummalla pohjalla liian hiljainen
   luettavaksi – Aleksin valinta 22.9.2026. */
.who{font-size:13px;color:rgba(255,255,255,.8)}
/* Nimi on linkki omalle tilille, mutta se ei saa näyttää linkiltä palkin
   muiden linkkien joukossa: alleviivaus tulee vasta osoittimen alla. */
.who a{color:inherit;text-decoration:none}
.who a:hover,.who a.on{color:var(--ink);text-decoration:underline}

/* perusosat */
.wrap{max-width:1180px;margin:0 auto;padding:22px 18px 60px;width:100%}
/* Kortin reunus on vaaleampi kuin --line. Harmaa pohja tarvitsi jämerän
   rajan erottuakseen kortista; tumma pohja erottuu itsestään, ja sama
   harmaa piirtyisi nyt renkaaksi valkoisen kortin ympärille. */
.card{background:var(--panel);border:1px solid var(--kortin-raja);border-radius:12px;padding:18px;margin-bottom:16px}
.card.tight{padding:14px 16px}

/* SUPISTUVA OSIO (2.89.0, ylläpito)

   Kiinni oleva osio PIILOTTAA sisältönsä, ei poista sitä: id:t, lomakkeet ja
   taulukot ovat yhä sivulla, ja niitä täyttävät skriptit toimivat myös
   kiinni. Ks. js/sivut/yllapito-osiot.js.

   !important on tässä perusteltu poikkeus. Osa ylläpidon lohkoista säätää
   omaa näkyvyyttään suoraan tyyliattribuutista (esim. arvion tiedot,
   salasanalaatikko), ja inline-tyyli voittaa aina tyylitiedoston. Ilman
   !importantia juuri ne lohkot jäisivät näkyviin kiinni olevaan osioon –
   eli ne, jotka ovat siellä kaikkein isoimpia. Näkyvyys palautuu
   elementin omaan hallintaan heti kun luokka poistuu. */
.supistuva>h2{cursor:pointer;user-select:none;display:flex;align-items:center;gap:9px;
  margin:0;padding:2px 0}
.supistuva>h2::before{content:'';flex:none;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.supistuva.kiinni>h2::before{transform:rotate(-45deg) translate(-1px,1px)}
.supistuva>h2:hover{color:var(--accent)}
.supistuva>h2:hover::before{border-color:var(--accent)}
.supistuva>h2:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.supistuva.kiinni{padding-bottom:14px}
.supistuva.kiinni>*:not(h2){display:none!important}
/* KIINTEISTÖN SIVUN OSIOT (2.146.1). Sama ajatus kuin yllä, mutta osio
   nimetään tunnisteella ja otsikkona on <h3> – joskus nappirivin sisällä.
   Kiinni ollessa näkyy ensimmäinen lapsi eli otsikko tai otsikkorivi
   nappeineen. Ks. js/sivut/amm-osiot.js. */
.osio-otsikko{cursor:pointer;user-select:none;display:flex;width:fit-content;max-width:100%;align-items:center;gap:9px}
.osio-otsikko::before{content:'';flex:none;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.osio-kiinni .osio-otsikko::before{transform:rotate(-45deg) translate(-1px,1px)}
.osio-otsikko:hover{color:var(--accent)}
.osio-otsikko:hover::before{border-color:var(--accent)}
.osio-otsikko:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.osio.osio-kiinni>*:not(:first-child){display:none!important}
.osio.osio-kiinni>h3:first-child{margin-bottom:0}
/* 2.162.1: perustietojen kortti kiinni – nimi ja sen alla tunnus · kunta. */
#perustietoKortti.osio-kiinni>#alaotsikko{display:block!important}
#perustietoKortti>h2.osio-otsikko{margin-bottom:4px}
/* 2.147.0: supistetun osion otsikkorivi. Nappi (Lisää työaika) on aina
   oikeassa reunassa samalla rivillä – ennen .toimet ei ollut flex, ja
   nappi osui otsikon alle tai kiinni siihen. Kuviotietojen napit piiloon
   supistettuna (Aleksi). Muistiinpanojen alkusanat näkyvät vain
   supistettuna: auki ollessa teksti on jo kentässä. */
.osio-rivi{display:flex!important;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
/* Kapealla näytöllä nappi rivittyy otsikon alle – silloinkin oikeaan reunaan. */
.osio-rivi>:last-child{margin-left:auto}
#kuviotiedot.osio-kiinni .toimet-tasa{display:none!important}
/* Aleksi: "otetaan se lisää työaika nappula pois supistuksesta se löytyy
   sitten kun laajentaa". */
#tyoaikaKortti.osio-kiinni [data-t="avaaTyoaikaLomake"]{display:none!important}
.osio-otsikko .rivimerkki{text-transform:none;letter-spacing:0;margin-left:4px;vertical-align:1px}
.osio-esikatselu{text-transform:none;letter-spacing:0;font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:60vw}
.osio:not(.osio-kiinni) .osio-esikatselu{display:none}
#muistiinpano{resize:vertical;min-height:90px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:14px}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.right{text-align:right}

/* Painikkeet ja kentät ovat kaikki saman korkuisia ja käyttävät samaa kirjasinta
   samassa koossa. --nappi-korkeus on koko käyttöliittymän yhteinen ohjainkorkeus:
   jos sitä muuttaa, kaikki painikkeet, valinnat ja tekstikentät seuraavat mukana.
   Luokka .small kaventaa vain sivureunuksia, ei muuta korkeutta eikä kirjasinkokoa. */
button,.btn,input,select,textarea{
  font-family:var(--kirjasin);font-size:var(--nappi-teksti);line-height:1.25}
button,.btn{height:var(--nappi-korkeus);padding:0 14px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;border-radius:var(--nappi-kulma,8px);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
button:hover,.btn:hover{filter:brightness(1.08)}
button:disabled{opacity:.45;cursor:default;filter:none}
/* Haamupainike on ainoa painike, jonka pinta on sivun pinta: valkoisessa
   kortissa valkoinen, tummalla pohjalla läpinäkyvä vaalealla reunuksella.
   Valkoinen haamupainike tummalla pohjalla olisi ruudun kirkkain asia –
   eli näyttäisi tärkeämmältä kuin vieressä oleva päänappi. */
button.ghost,.btn.ghost{background:var(--ghost-tausta);color:var(--ghost-teksti);
  border-color:var(--ghost-raja)}
/* Palkissa haamupainike on navigaation veroinen kohta, joten sillä on sama
   paino kuin linkeillä. Muualla palvelussa se on kortin sisällä valkoisella
   ja pysyy tavallisena – siellä ohuus ei ole ongelma. */
.top button.ghost,.top .btn.ghost{font-weight:600}
button.danger,.btn.danger{background:var(--err);border-color:var(--err);color:#fff}
button.warn,.btn.warn{background:var(--warn);border-color:var(--warn);color:#fff}
button.small,.btn.small{padding:0 10px;font-size:var(--nappi-teksti)}
input,select,textarea{padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);width:100%}
input:not([type=checkbox]):not([type=radio]),select{height:var(--nappi-korkeus)}
input[type=checkbox],input[type=radio]{width:auto;margin:0 4px 0 0;vertical-align:-1px}
textarea{min-height:90px;resize:vertical}
label{display:block;font-size:12.5px;color:var(--muted);margin:10px 0 4px}
.field{margin-bottom:6px}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  border-bottom:1px solid var(--line);padding:7px 8px;white-space:nowrap}
td{padding:8px;border-bottom:1px solid #eff0ef;vertical-align:middle}
tr:hover td{background:#f9f9f9}
td.num,th.num{text-align:right}

/* TUNNISTEILLA ON REUNUS (2.96.0)

   Tunniste on aina valkoisen kortin sisällä, ja sen pehmeä täyttö on
   valkoista vasten kontrastiltaan noin 1,20 – eli käytännössä näkymätön.
   Se on ollut niin alusta asti; värillinen pohja ei aiheuta sitä eikä
   korjaa sitä.

   Reunus tekee tunnisteen erotettavaksi MUODOSTA eikä täytöstä. Pehmuste
   kaventuu pikselin verran reunuksen leveyden verran, jotta tunnisteen koko
   ei muutu – sama pilleri kuin ennen, nyt näkyvänä. */
.tag{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11.5px;
  font-weight:600;border:1px solid transparent}
.tag.pending{background:#fff3df;border-color:#f0dcae;color:#8a5b16}
.tag.active{background:var(--accent-soft);border-color:var(--accent-raja);color:var(--accent)}
.tag.disabled{background:#eaeceb;border-color:#d4d7d4;color:var(--muted)}
.tag.rejected{background:#fbe6e2;border-color:#f0c4bb;color:var(--err)}
.tag.admin{background:#e5edfb;border-color:#c9d5ef;color:#1f4fa8}

.msg{padding:10px 12px;border-radius:8px;margin:10px 0;font-size:13px;display:none}
.msg.on{display:block}
.msg.err{background:#fbe6e2;border:1px solid #f0c4bb;color:var(--err)}
.msg.ok{background:var(--accent-soft);border:1px solid var(--accent-raja);color:var(--accent)}
.msg.info{background:#fff8e8;border:1px solid #f0dcae;color:#7a5a1c}

/* kirjautumissivu */
/* Kirjautumattomien sivujen laatikon leveys on muuttujassa, koska alatunniste
   piirretään laatikon ALLE samaan pinoon. Jos leveys olisi vain login-boxissa,
   alatunniste levittäytyisi sen ohi ja kaksi valkoista laatikkoa eri
   levyisinä näyttäisi virheeltä. Sivu voi vaihtaa leveyden asettamalla
   --laatikko login-wrapiin. */
/* SISÄÄNKÄYNNIN VIHREÄ ON TUMMEMPI (2.139.0)

   Aleksin päätös 22.9.2026: "Pidetään #26562e, mockupin #1D3822 vain
   sisäänkäynnissä."

   Kirjautumattomilla sivuilla vihreää on koko laatikon verran – puolen
   valinnan pääkortti, kirjautumispainike, palvelun nimi – ja se on sivun
   ainoa väripinta tummaa pohjaa vasten. #26562e hyppää siinä koossa irti
   pohjasta; #1D3822 on niin lähellä pohjan sävyä, että kortti lukee
   samaan maailmaan kuuluvana. Kirjautuneella puolella vihreää on kerrallaan
   yhden painikkeen verran valkoisessa kortissa, ja siellä #1D3822 lukisi
   mustana – siksi ero on juuri tässä eikä kaikkialla.

   Muuttuja asetetaan kääreeseen eikä yksittäisiin sääntöihin, jotta sivun
   kaikki vihreä vaihtuu yhtä aikaa eikä kahta vihreää voi jäädä rinnakkain. */
.login-wrap,.kutsuwrap{--accent:#1d3822}

.login-wrap{--laatikko:430px;
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.login-box{width:100%;max-width:var(--laatikko);background:var(--panel);border:1px solid var(--kortin-raja);
  border-radius:14px;padding:26px;box-shadow:0 6px 30px rgba(0,0,0,.06)}
.login-box h1{font-size:22px;margin-bottom:4px}
/* Puolimerkintä kirjautumissivuilla.

   Sama sähköpostiosoite voi olla sekä metsänomistajana että ammattilaisena,
   joten sivun on kerrottava kummalla ollaan. Ilman tätä oikea salasana
   näyttäisi väärältä eikä käyttäjä tietäisi miksi. */
.puolimerkki{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:14px 0 2px;padding:8px 12px;border-radius:8px;
  background:var(--accent-soft);border:1px solid var(--accent-raja);
  color:var(--accent);font-weight:650;font-size:13.5px}
.puolimerkki a{font-weight:400;font-size:12.5px;color:var(--muted)}
.puolimerkki.amm{background:#eef2fb;border-color:#c9d5ef;color:#2c4a86}

/* PUOLEN VALINTA: PAINOTETTU (2.96.0)

   Metsänomistaja on täytetty pääkortti, asiantuntija rivi sen alla. Perustelu
   on rakenteellinen eikä maun asia: ammattilaispuolelle EI VOI luoda tunnusta
   itse, joten puolet eivät ole samanarvoisia sisäänkäynteinä, vaikka ne oli
   piirretty sellaisiksi.

   Aiemmin kortit olivat vierekkäin ja kumpikin valkoinen valkoisella pohjalla.
   Puhelimessa ne menivät allekkain ja kahden 104 pikselin lustoalueen takia
   sivu oli noin 780 pikseliä pitkä – kahden vaihtoehdon valinta ei mahtunut
   ruudulle kerralla. Nyt mahtuu.

   Kumpikin on <a>, ei nappi: molemmat vievät toiselle sivulle. */
.puolenvalinta{margin-top:20px}

.valinta-paa{position:relative;overflow:hidden;display:block;text-align:center;
  padding:86px 18px 22px;border-radius:14px;background:var(--accent);color:#fff;
  border:1px solid rgba(255,255,255,.16);
  text-decoration:none;transition:box-shadow .15s,transform .15s}
.valinta-paa:hover{box-shadow:0 6px 20px rgba(0,0,0,.3);transform:translateY(-2px)}
/* Teksti on kuvion päällä, joten sillä on varjo. Ilman varjoa lustonauha
   kulkee kirjainten läpi ja otsikon ääriviiva katoaa juuri siitä kohdasta,
   jossa nauha on leveimmillään. */
.valinta-paa b{display:block;font-size:20px;letter-spacing:-.01em;position:relative;
  z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.valinta-paa>span{display:block;font-size:14.5px;line-height:1.45;position:relative;
  z-index:2;margin-top:4px;opacity:.96;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* Tumma kaihdin kortin oikeassa alakulmassa eli tekstin kohdalla. Maski
   häivyttää lustot vasemmalta oikealle, mutta kortin alareuna on kapein
   kohta ja sinne osuu silti nauhoja; kaihdin tekee niistä taustaa.

   Erillinen kerros eikä gradientti taustassa: tausta on jo kortin oma
   vihreä, ja kaksi taustaa samassa säännössä tarkoittaisi, että väri
   katoaisi kaihtimen alta. */
.valinta-paa::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(78% 120% at 62% 76%,rgba(10,16,11,.58) 0%,
    rgba(10,16,11,.34) 46%,rgba(10,16,11,0) 80%)}

/* Vuosilustot pääkortin yläreunassa. Kuvake olisi symboli, joka ei kerro
   valinnasta mitään mitä teksti ei jo sano – lustot ovat pelkkä muoto.
   Metsänomistajalla ne ovat väljät, ammattilaisella tiheät.

   Maski on välttämätön eikä koriste: ilman sitä renkaat kulkisivat otsikon
   läpi ja tekisivät siitä lukukelvottoman. Selain joka ei tue maskia näyttää
   renkaat matalalla opacityllä – luettavuus säilyy silloinkin. */
/* Kuvio on oma tiedostonsa eikä merkinnässä (2.139.0). Polkuja on
   viisitoista ja niitä on noin 23 000 merkkiä: sivun merkinnässä ne
   latautuisivat uudelleen joka kerta, omana tiedostonaan ne jäävät
   välimuistiin kertaalleen. Sama ratkaisu kuin yläbannerissa.

   100% 100% eikä contain: SVG:ssä on preserveAspectRatio="none", eli kuvio
   on tarkoituskin venyttää kortin mittoihin. Kortti on puhelimessa matalampi
   ja leveämpi kuin työpöydällä, eikä lustoilla ole "oikeaa" muotoa, jonka
   vääristyminen näkyisi.

   Maski häivyttää kuvion vasemmalta oikealle ennen otsikkoa. Ilman sitä
   nauha kulkee kirjainten läpi ja otsikon ääriviiva katoaa juuri siitä
   kohdasta, jossa nauha on leveimmillään. */
.valinta-paa::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url(/kuvakkeet/lustot-kortti.svg) left top/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 26%,rgba(0,0,0,.45) 46%,
    rgba(0,0,0,.18) 62%,transparent 82%);
          mask-image:linear-gradient(100deg,#000 0%,#000 26%,rgba(0,0,0,.45) 46%,
    rgba(0,0,0,.18) 62%,transparent 82%)}

.valinta-tois{margin-top:11px;display:flex;align-items:center;gap:11px;
  padding:17px 14px;border:2px solid var(--line);border-radius:12px;
  background:var(--panel);text-decoration:none;color:var(--ink);
  transition:border-color .15s,box-shadow .15s}
.valinta-tois:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.08)}
/* ASIANTUNTIJAN TUNNUS ON FORSTIN O (2.140.0)

   Piirros tulee tiedostosta maskina eikä kuvana. Syy on väri: tunnus on
   tässä valkoisella kortilla ja sen on oltava kortin vihreä, mutta <img>
   ei peri CSS:n color-arvoa – currentColor muuttuisi siinä mustaksi.
   Maski ottaa tiedostosta muodon ja tausta antaa värin.

   56 PIKSELIÄ EIKÄ 42. Brändiohje sanoo, että lustoisen O:n pienin koko on
   90 px; sen alle lustot alkavat sulautua. 90 px veisi riviltä kaksinkertaisen
   tilan nykyiseen nähden, joten Aleksi valitsi 22.9.2026 välimuodon: 56 px
   on mitattu se koko, jossa yhdeksäntoista lustoa vielä erottuvat
   tavallisella näytöllä. Alle sen kannattaa käyttää brändin omaa
   umpirengasta (favicon), ei tätä. */
.valinta-tois .lustot-pieni{width:56px;height:56px;flex:none;display:block;
  background:var(--accent);opacity:.85;
  -webkit-mask:url(/kuvakkeet/forst-o.svg) center/contain no-repeat;
          mask:url(/kuvakkeet/forst-o.svg) center/contain no-repeat}
.valinta-tois .teksti{flex:1;min-width:0}
.valinta-tois b{display:block;font-size:16.5px;letter-spacing:-.01em}
.valinta-tois .teksti>span{display:block;font-size:13px;color:var(--muted);
  line-height:1.3}
/* Erotinpiste on oma elementtinsä, jottei käännösavaimeen tule välimerkkiä:
   sanasto etsii tekstiä sellaisenaan, ja "Ammattilaisen työkalut · Vain
   kutsulinkillä" olisi eri avain kuin kumpikaan puolisko. */
.valinta-tois .teksti i{font-style:normal;padding:0 5px}
.valinta-tois .vakanen{width:17px;height:17px;flex:none;color:var(--muted)}
/* YLÄPALKKI PUHELIMELLA.

   Viisi linkkiä ei mahdu 360 pikselin ruudulle yhdelle riville millään
   kirjasinkoolla, joten kysymys on vain siitä, kuinka monelle riville ne
   menevät. Tiiviimpi pehmuste ja puoli pistettä pienempi kirjasin riittävät
   pitämään ne kahdella rivillä kolmen sijaan – ja rivi palkissa on rivi
   pois kartalta.

   Painikkeiden kosketusala EI pienene alle 32 pikselin: pehmuste kaventuu
   vain sivuilta, koska sormi osuu vaakasuunnassa väljemmin kuin pystyyn. */
@media (max-width:560px){
  /* Palkin pehmuste kapenee, joten myös varattu tila kapenee. Ks. #top
     ylempänä: luvut on mitattu, ei arvattu. */
  #top{min-height:55px}
  .top{gap:8px;padding:8px 12px}
  .top nav{gap:3px}
  .top nav a{padding:7px 8px;font-size:13px}
  /* Sähköpostiosoite katkeaa mieluummin kuin työntää palkkia leveämmäksi.
     Se on pitkä yhtenäinen sana, jota selain ei muuten katkaise. */
  .who{overflow-wrap:anywhere}
  /* KIELIVALITSIN OMALLE RIVILLEEN (2.96.0)

     Valitsin on kirjautumattomilla sivuilla laatikon oikeassa yläkulmassa.
     Selaimessa se on oikein: laatikko on kapea ja keskitetty, joten kulma on
     tyhjä. Puhelimessa laatikko täyttää ruudun leveyden, ja sama kulma on
     laatikon PÄÄLLÄ – valitsin leikkaa laatikon kulman ja on samalla sivun
     kirkkain kohta, vaikka on sen vähäpätöisin asia.

     Omalla rivillään se on yhä ensimmäisenä ylhäällä mutta ei enää minkään
     päällä. Se on jo DOM:issa ennen laatikkoa, joten järjestystä ei tarvitse
     muuttaa – vain irrottaa absoluuttisesta asemoinnista. */
  .login-wrap .kielipalkki{position:static;width:100%;max-width:var(--laatikko);
    display:flex;justify-content:flex-end;margin-bottom:9px}

  /* Pääkortti matalammaksi puhelimessa, jottei sivu veny turhaan. Lustot
     täyttävät kortin (preserveAspectRatio="none"), joten ne seuraavat
     korkeutta itsestään eikä niille tarvita omaa mittaa. */
  .valinta-paa{padding-top:70px}
}

/* PUHELINVALIKKO (2.89.0)

   Puhelimessa palkkiin jää vain palvelun nimi ja valikkonappi. Kaikki muu –
   linkit, nimi, kieli ja uloskirjaus – siirtyy napin alta avautuvaan
   paneeliin. Mikään niistä ei ole uutta merkintää: paneeli on sama
   `.ylavalikko`-kääre, joka on työpöydällä display:contents.

   TÄMÄ LOHKO ON 560 PIKSELIN LOHKON JÄLKEEN TAHALLAAN. Siellä säädetään
   `.top nav a` pienemmäksi työpöytäpalkkia varten; valikossa linkit ovat
   sitä vastoin täysleveitä rivejä. Myöhempi ja tarkempi valitsin voittaa,
   joten järjestystä ei saa vaihtaa.

   Raja on 700 px eikä 560 px: palkki ahtautuu jo ennen kuin se rivittyy, ja
   vaakasuunnassa oleva puhelin on tavallisin paikka, jossa kahdeksan linkkiä
   näyttää sotkulta. Kartan oma valikko käyttää rajaa 900 px – rajat ovat
   tarkoituksella eri, koska kartalla koko näyttö on karttaa ja palkki on
   siellä työkalurivi eikä navigaatio. */
@media (max-width:700px){
  /* KAIKKI SÄÄNNÖT ON RAJATTU .top-valikko-LUOKKAAN.

     Ensimmäisessä versiossa nämä olivat pelkän .top:in varassa. Se osui
     jokaiseen yläpalkkiin palvelussa – myös ammattilaispuolen palkkiin,
     joka ei tunne valikkoa lainkaan. Sen flex-wrap muuttui nowrapiksi,
     palkki venyi 390 pikselin ruudulla 547 pikseliin ja sivulle tuli
     vaakavieritys. Mitattu 7.9.2026, ks. MUISTIO v2.89.0.

     Sääntö tästä eteenpäin: yläpalkin puhelinsäännöt kuuluvat
     .top-valikko-luokkaan, eivät .top:iin. */
  .top.top-valikko{position:relative;flex-wrap:nowrap;gap:10px}
  .top-valikko .valikkonappi{display:flex;margin-left:auto}

  /* Kääre lakkaa olemasta läpinäkyvä ja muuttuu paneeliksi.

     VAALEA PINTA VASTA TÄSSÄ, ei tiedoston alun luettelossa. Luokka
     top-valikko on merkinnässä aina – myös työpöydällä, jossa kääre on
     display:contents eli olematon. Jos muuttujat ilmoitettaisiin siellä,
     ne olisivat voimassa myös työpöytäpalkissa: nimi, kielivalitsin,
     voimassa oleva välilehti ja uloskirjaus saisivat vaalean pinnan
     harmaat ja vihreät suoraan tummalle palkille. Mitattu 22.9.2026:
     .who oli #47514a mustaa palkkia vasten ja voimassa oleva välilehti
     #26562e – kumpaakaan ei voinut lukea. Paneeli on valkoinen vain
     silloin kun se on paneeli. */
  .top-valikko .ylavalikko{--ink:#0f1410;--muted:var(--muted-vaalea,#47514a);--toiminto:var(--toiminto-vaalea);--peru:var(--peru-vaalea);--auki-tausta:var(--auki-tausta-vaalea);--auki-raja:var(--accent);--auki-teksti:var(--accent);--line:#adb3ae;
    --pohja-korostus:var(--accent);
    --ghost-tausta:#fff;--ghost-teksti:var(--accent);--ghost-raja:var(--accent);
    color:var(--ink);
    display:none;position:absolute;top:calc(100% + 6px);right:10px;
    flex-direction:column;align-items:stretch;gap:0;
    width:min(300px,calc(100vw - 20px));max-height:calc(100dvh - 70px);overflow-y:auto;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 12px 34px rgba(0,0,0,.18);padding:6px;z-index:3000}
  body.ylavalikko-auki .top-valikko .ylavalikko{display:flex}

  /* Työpöydän välike työntäisi paneelin sisällön erilleen. */
  .top-valikko .ylavalikko .spacer{display:none}

  /* Järjestys tehdään order-arvoilla eikä siirtämällä elementtejä, jottei
     työpöydän DOM-järjestykseen tarvitse koskea.

       1  kenen valikko tämä on          nimi ja sähköposti
       2  minne täältä pääsee            sivujen linkit
       3  millä kielellä                 kielivalitsin
       4  ulos                           oman viivansa takana

     Uloskirjaus on alimpana eikä ylimpänä (Aleksin alkuperäinen ehdotus):
     valikon yläreuna on se, johon peukalo osuu vahingossa, ja uloskirjaus
     on ainoa kohta jota ei voi perua. */
  /* Nimen väri on palkissa kiinteä vaalea (ks. .who ylempänä), koska palkki
     on aina tumma. Paneeli on valkoinen, joten väri on palautettava – muuten
     nimi ja sähköpostiosoite ovat valkoista valkoisella. */
  .top-valikko .ylavalikko .who{order:1;padding:9px 11px 10px;font-size:12.5px;line-height:1.45;
    color:var(--muted);
    border-bottom:1px solid var(--line);margin-bottom:4px;overflow-wrap:anywhere}
  .top-valikko .ylavalikko nav{order:2;flex-direction:column;align-items:stretch;gap:2px;flex-wrap:nowrap}
  .top-valikko .ylavalikko nav>span{flex-direction:column;align-items:stretch;gap:2px;flex-wrap:nowrap}
  /* Linkki on valikossa täysleveä rivi, ei nappula: koko rivin leveydeltä
     osuva kosketusala on se, mitä sormella etsitään. 42 px on sama kuin
     kartan valikossa. */
  .top-valikko .ylavalikko nav a{padding:0 11px;height:42px;font-size:14.5px;border-radius:8px;
    white-space:normal;color:var(--ink)}
  /* Paneelissa voimassa oleva kohta on lihavoitu vihreä eikä lihavoitu
     valkoinen: pinta on valkoinen, joten valkoinen teksti ei ole tarjolla.
     Merkitys on sama – lihavointi kertoo mikä sivu on auki – ja väri tulee
     siitä, mikä kyseisellä pinnalla on korostus. */
  .top-valikko .ylavalikko nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:700}
  /* Valikkopaneeli on valkoinen, mutta yllä oleva .top nav a:hover on
     kirjoitettu tummalle palkille (vaalea sumu, vaalea vihreä). Paneelissa
     se olisi näkymätön tausta ja lukukelvoton teksti. */
  .top-valikko .ylavalikko nav a:hover{background:var(--accent-soft);color:var(--accent)}
  /* AMMATTILAISPUOLEN LINKIT SAMAAN MUOTOON (2.95.0)

     Ammattilaisen linkit ovat .ammnavi, ja niissä on yksi ero
     metsänomistajan linkkeihin: voimassa oleva sivu on <span> eikä <a>,
     koska siitä ei ole minne mennä. Yllä oleva sääntö osuu vain <a>:hin,
     joten ilman tätä avoinna oleva välilehti olisi valikossa kapea nappula
     muiden ollessa täysleveitä rivejä.

     Nämä ovat ainoat ammattilaiskohtaiset valikkosäännöt. Kaikki muu –
     paneeli, järjestys, viiva, uloskirjaus – tulee samoista säännöistä kuin
     metsänomistajalla, koska amm-runko.js käyttää samoja luokkia. */
  .top-valikko .ylavalikko nav.ammnavit{margin-left:0}
  .top-valikko .ylavalikko .ammnavi{display:flex;flex-direction:row;align-items:center;
    width:100%;height:42px;min-height:42px;padding:0 11px;font-size:14.5px;
    border-radius:8px;white-space:normal;color:var(--ink)}
  .top-valikko .ylavalikko .ammnavi.nyt{background:var(--accent-soft);color:var(--accent);font-weight:700}

  /* Valitsin on paneelissa valkoisella pinnalla, joten se on taas tavallinen
     vaalea valitsin. Ilman tätä se olisi valkoisessa paneelissa tumma
     laatikko, jonka teksti on valkoinen läpikuultavaa harmaata vasten. */
  .top-valikko .ylavalikko .kielivalitsin{order:3;width:100%;margin:6px 0 0;height:38px;
    color-scheme:light;background:#fff;color:var(--ink);border-color:var(--line)}
  /* Avautuva luettelo samoin vaaleaksi. color-scheme riittäisi useimmille
     selaimille, mutta ei kaikille – ks. AVAUTUVA LUETTELO SAA OMAT
     VÄRINSÄ (2.145.0). Tässä värit sattuvat olemaan samat, joihin luettelo
     ilman mitään sääntöä päätyisikin; sääntö on silti kirjoitettu, ettei
     seuraava tekstivärin muutos katoa luettelosta huomaamatta. */
  .top-valikko .ylavalikko .kielivalitsin option,
  .top-valikko .ylavalikko .kielivalitsin optgroup{background:#fff;color:var(--ink)}
  .top-valikko .ylavalikko .valikkoviiva{order:4;display:block;height:1px;background:var(--line);margin:10px 2px 8px}
  .top-valikko .ylavalikko>button[data-t="kirjauduUlos"]{order:5;width:100%;height:42px}
}

/* NAPIT YHDELLE RIVILLE PUHELIMESSA (2.95.0, ammattilaispuoli)

   Aleksi 7.9.2026: "nappuloita voi olla niin, että on kaksi vierekkäin ja
   yksi heti niiden alapuolella. Näyttää paremmalta jos ne olisi kauniisti
   rivissä."

   Mitattu 360 pikselin ruudulla: kolme nappia jakautui 2+1 ja ne olivat eri
   levyisiä (118 / 83, sitten 111 yksin). Syy: .toimet ei ole flex-rivi
   lainkaan, joten napit rivittyvät kuin teksti – ja inline-tyylien gap ja
   flex-wrap eivät tee mitään.

   Kolmesta vaihtoehdosta Aleksi valitsi yhden rivin ja lyhyemmät tekstit.
   Kolme täyspitkää tekstiä ei mahdu 360 pikselin ruudulle: pelkkä "Merkitse
   tarkistetuksi" tarvitsee 156 px, ja kolmelle napille on tilaa 272 px.

   PITKÄ JA LYHYT TEKSTI OVAT MOLEMMAT SIVULLA, ja CSS valitsee kumpi
   näkyy. Vaihtoehto olisi ollut vaihtaa teksti JavaScriptillä, mutta
   silloin teksti riippuisi ikkunan koosta latausHETKELLÄ eikä sen
   nykyisestä koosta – puhelimen kääntäminen vaakatasoon jättäisi väärän
   tekstin. Molemmat käännetään erikseen (kieli-sanasto.js).

   LUOKKA ON .toimet-tasa EIKÄ .toimet. Sama syy kuin 2.89.0:n
   .top-valikko-luokalla: .toimet on 17 paikassa palvelua, ja näistä
   säännöistä on sovittu vain ammattilaispuolen kolmelle nappiriville.
   Jaettuun luokkaan kirjoitettu sääntö osuu myös sinne minne et katso. */
.lyhyt{display:none}

/* .toimet ei ole flex-rivi missään, ja sen inline-tyyleissä on gap ja
   flex-wrap – arvoja, jotka eivät tee mitään ilman display:flexiä. Siksi
   näiden ryhmien välike-div (`<div class="spacer" style="flex:1">`) ei
   työntänyt oikean reunan nappeja oikealle vaan KATKAISI RIVIN: paluulinkki
   jäi omalle rivilleen ja muut napit sen alle myös työpöydällä.

   Tämä sääntö tekee ryhmästä sen mitä sen inline-tyylit jo olettivat.
   Vain .toimet-tasa – ei .toimet, joka on 17 paikassa palvelua. */
.toimet-tasa{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

@media (max-width:560px){
  .toimet-tasa{flex-wrap:nowrap}
  /* Välike työntäisi napit erilleen; yhdellä rivillä sille ei ole tehtävää. */
  .toimet-tasa>.spacer{display:none}
  /* flex:1 1 0 antaa jokaiselle napille saman leveyden sisällöstä
     riippumatta – juuri se, mitä "kauniisti rivissä" tarkoittaa.
     min-width:0 sallii kutistumisen; ilman sitä napin oletusvähimmäiskoko
     on sen sisällön leveys, ja rivi venyisi taas yli ruudun. */
  .toimet-tasa>button,.toimet-tasa>.btn{flex:1 1 0;min-width:0;
    padding-left:6px;padding-right:6px;white-space:nowrap}
  .toimet-tasa .pitka{display:none}
  .toimet-tasa .lyhyt{display:inline}
}

.tabs{display:flex;gap:6px;margin:16px 0 6px}
.tabs button{flex:1;background:#fff;color:var(--muted);border-color:var(--line)}
.tabs button.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

/* tilakortit */
.tila{display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:border-color .12s}
.tila:hover{border-color:var(--accent)}
.tila .nimi{font-weight:650;font-size:16px}
.tila .luvut{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:4px}
.tila .luvut b{color:var(--ink);font-weight:600}
.dropzone{border:2px dashed var(--line);border-radius:12px;padding:26px;text-align:center;color:var(--muted);background:#fff}
.dropzone.hot{border-color:var(--accent);background:var(--accent-soft)}
.progress{height:6px;background:var(--ura);border-radius:99px;overflow:hidden;margin-top:8px}
.progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}

/* Kapeilla ruuduilla taulukot mahtuvat ruudun leveyteen, jottei sivua tarvitse
   vierittää sivusuunnassa. Sarakkeet kaventuvat ja pitkät sanat katkeavat. */
@media (max-width:700px){
  .wrap table{table-layout:fixed;font-size:12px}
  .wrap th,.wrap td{padding:6px 4px;word-break:break-word;overflow-wrap:anywhere}
  .wrap th{font-size:10.5px}
  .row>div{min-width:0 !important}

  /* ---- Leveä taulukko korteiksi ----

     Kymmentä saraketta ei saa mahtumaan puhelimen pystyruudulle millään
     kirjasinkoolla. Sen sijaan jokainen rivi muuttuu omaksi kortikseen, jossa
     sarakkeen otsikko ja arvo ovat allekkain. Otsikot liittää soluihin
     js/sivut/yllapito-mobiili.js – ilman sitä kortit olisivat nimettömiä
     lukuja. Luokan 'kortiksi' asettaa sama koodi, joten taulukko joka ei ole
     käynyt siellä pysyy tavallisena taulukkona eikä hajoa. */
  table.kortiksi{table-layout:auto;font-size:13px;display:block}
  table.kortiksi thead{display:none}
  table.kortiksi tbody,table.kortiksi tr,table.kortiksi td{display:block;width:100%}
  table.kortiksi tr{border:1px solid var(--line);border-radius:10px;
    margin:0 0 9px;padding:9px 11px;background:var(--panel)}
  table.kortiksi tr:hover td{background:transparent}
  /* Otsikko asetellaan vasempaan reunukseen absoluuttisesti eikä flex-osana:
     solun sisällä voi olla useampi lohko (esim. nimi ja sähköposti allekkain),
     ja flex-asettelu vetäisi ne vierekkäin yhdelle riville. */
  table.kortiksi td{border:0;display:block;position:relative;
    padding:3px 0 3px 37%;min-height:20px}
  table.kortiksi td::before{content:attr(data-label);position:absolute;left:0;top:4px;
    width:34%;color:var(--muted);font-size:11px;text-transform:uppercase;
    letter-spacing:.04em;line-height:1.45;overflow-wrap:anywhere}
  /* Solu jonka yli on venytetty (rivin lisätiedot, "ei tuloksia") saa koko
     leveyden eikä otsikkosaraketta. */
  table.kortiksi td.yli{padding-left:0}
  table.kortiksi td.yli::before{content:none}
  /* Tyhjä solu veisi vain tilaa – kortissa ei tarvitse näyttää tyhjää riviä. */
  table.kortiksi td:empty{display:none}
  /* Luvut ovat taulukossa oikealla, kortissa vasemmalla otsikon vieressä. */
  table.kortiksi td.num,table.kortiksi td.right{text-align:left}
  /* Korttinäkymässä rivi on itse kortti, joten taulukon oma reunus ja
     leikkaus ovat tiellä. */
  .card:has(> table.kortiksi){padding:0;border:0;background:transparent;overflow:visible}
}

/* HUOM. tähän ei saa laittaa body{overflow-x:hidden}: yhdessä säännön
   html,body{height:100%} kanssa se tekisi bodystä kiinteän korkuisen
   vieritysalueen, jolloin pitkä sivu ei enää vierity pystysuunnassa.
   Leveyden ylivuoto estetään korjaamalla ylivuotavat elementit itse. */

/* Hunajapurkki: piilossa ihmiseltä ja ruudunlukijalta, mutta lomakkeessa mukana
   niin että automaatti täyttää sen ja paljastuu. */
.hunaja{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Haitari (UKK). Käytetään selaimen omaa <details>-elementtiä, jotta se toimii
   myös ilman JavaScriptiä ja ruudunlukuohjelmat ymmärtävät sen oikein. */
/* Haitari on UKK-sivulla ja kirjautumissivulla AINA suoraan pohjalla, ei
   koskaan kortin sisällä. Siksi se ei ole vaalea pinta vaan läpikuultava
   laatikko pohjan päällä – kolmetoista valkoista laatikkoa allekkain tekisi
   tummasta sivusta vaalean sivun. */
.haitari{border:1px solid var(--pohja-raja);border-radius:10px;overflow:hidden;
  background:var(--pohja-pinta)}
.haitari + .haitari{margin-top:8px}
.haitari > summary{
  cursor:pointer;list-style:none;padding:12px 40px 12px 14px;position:relative;
  font-weight:600;font-size:14px;line-height:1.45}
.haitari > summary::-webkit-details-marker{display:none}
.haitari > summary::after{
  content:'';position:absolute;right:16px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.haitari[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
.haitari > summary:hover{background:rgba(255,255,255,.08)}
.haitari[open] > summary{background:rgba(255,255,255,.08);color:var(--pohja-korostus)}
.haitari .vastaus{padding:2px 16px 14px;font-size:13.5px;line-height:1.65;color:var(--ink)}
.haitari .vastaus p{margin:0 0 9px}
.haitari .vastaus p:last-child{margin-bottom:0}
.haitari .vastaus ul{margin:0 0 9px;padding-left:20px}
/* Tietosuojaselosteen luettelot. Ylläpito kirjoittaa ne viivalla alkavina
   riveinä (ks. js/sivut/tietosuoja.js), joten tyyli on sivulla eikä
   tekstissä. */
.tsseloste ul{margin:0 0 10px;padding-left:22px}
.tsseloste li{margin-bottom:4px}
.tsseloste p{margin:0 0 10px}
.tsseloste p:last-child,.tsseloste ul:last-child{margin-bottom:0}
.ukk-ryhma{margin-bottom:22px}
.ukk-ryhma > h2{margin-bottom:10px}

/* Alatunniste */
/* Alatunniste on pohjaa, ei laatikko. Valkoinen palkki sivun pohjalla olisi
   tummalla sivulla kirkas raita sen alla, mitä luetaan. */
.alatunniste{border-top:1px solid var(--pohja-raja);background:transparent;
  padding:20px 18px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.7}
.alatunniste .omistaja{color:var(--ink);font-weight:600}
.alatunniste a{color:var(--muted)}
.alatunniste .rivi{max-width:640px;margin:0 auto}

/* Kirjautumattomilla sivuilla alatunniste on laatikon alla. Ennen se oli
   toinen valkoinen laatikko, koska sivun pohja oli vaalea eikä tekstiä
   olisi muuten erottanut kortin pohjasta. Tummalla pohjalla se on tekstiä
   pohjalla – kaksi laatikkoa peräkkäin lukisi kahtena sisältönä, vaikka
   alempi on pelkkä tekijänoikeusrivi. */
.login-wrap .alatunniste{width:100%;max-width:var(--laatikko);margin-top:16px;
  border:0;background:transparent}
.login-wrap .alatunniste .rivi{max-width:none}

/* Vahvistusikkuna. Käytetään selaimen confirm()-ikkunan sijasta silloin, kun
   käyttäjälle pitää selittää seuraukset – confirmiin ei voi muotoilla tekstiä. */
.peite{position:fixed;inset:0;background:rgba(20,22,20,.45);z-index:4000;
  display:flex;align-items:center;justify-content:center;padding:20px}
.ikkuna{background:var(--panel);border-radius:12px;max-width:460px;width:100%;
  padding:20px;box-shadow:0 12px 40px rgba(0,0,0,.25);max-height:90vh;overflow:auto}
.ikkuna h2{margin-bottom:10px}
.ikkuna .teksti{font-size:13.5px;line-height:1.65}
.ikkuna .teksti p{margin:0 0 9px}
.ikkuna .teksti ul{margin:0 0 9px;padding-left:20px}
.ikkuna .napit{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.ikkuna .rasti{display:flex;gap:8px;align-items:flex-start;margin-top:12px;
  font-size:13px;color:var(--ink)}
.ikkuna .rasti input{margin-top:3px}
.ikkuna .varoitus{background:#fdf0ea;border:1px solid #eec4b6;color:var(--err);
  border-radius:8px;padding:10px 12px;font-size:13px;margin:4px 0 10px}

/* Kuviosivun jonomerkki. Sama sanoma kuin koealasivun merkissä, ja siksi
   samannäköinen – mutta oma luokkansa: .tila on tässä tiedostossa jo varattu
   yhteiskäytön tilakortille. */
.jonotila{display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600}
.jonotila.odottaa{background:#fff5e5;border:1px solid #f0d9ac;color:#7a5a1c}
.jonotila.hylatty{background:#fdeceb;border:1px solid #f0b8b4;color:#8f2f27;
  cursor:pointer}

/* Torjuttu maastokirjaus: luvut näkyviin sellaisenaan. Rivitys on pakko
   sallia, koska runko on yhtenä pitkänä rivinä eikä puhelimessa ole
   vaakavieritystä – leikkautunut luku olisi sama kuin kadonnut luku. */
.ikkuna .hylattyosa{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.ikkuna .hylattyosa:first-child{border-top:0;padding-top:0;margin-top:0}
.ikkuna .hylattyosa h3{font-size:13px;margin:0 0 3px;word-break:break-all}
.ikkuna .hylattyosa p{color:var(--muted);font-size:12px;margin:0 0 6px}
.ikkuna .hylattyosa pre{background:var(--upote);border:1px solid var(--line);
  border-radius:6px;padding:8px;font-size:11.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;margin:0}

/* Yhteiskäyttö: tilan valinta ja jaon merkki */
.tila{position:relative}
.tila.valittu{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.tila .valinta{position:absolute;top:12px;right:12px;display:flex;align-items:center;
  gap:6px;font-size:12px;color:var(--muted);cursor:pointer;margin:0}
.tila .valinta input{width:17px;height:17px;cursor:pointer}
.tila .nimi{padding-right:96px}
/* Kuvioluettelon valintasarake. Kapea sarake ja kunnollisen kokoinen rasti:
   tämä luettelo katsotaan usein puhelimelta, ja 13 pikselin oletusrasti on
   hansikkaalla mahdoton osua. */
.kValintaSolu{width:34px;text-align:center;padding-right:0}
.kValintaSolu input{width:18px;height:18px;cursor:pointer;margin:0}
.valintapalkki{position:sticky;top:0;z-index:900;background:var(--accent-soft);
  border:1px solid var(--accent);border-radius:10px;padding:10px 14px;margin-bottom:14px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jako-rivi{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 0;border-bottom:1px solid var(--line)}
.jako-rivi:last-child{border-bottom:none}

/* Kielivalitsin kirjautumissivulla: oikeaan yläkulmaan, pois lomakkeen tieltä */
.kielipalkki{position:absolute;top:14px;right:16px;z-index:10}
.login-wrap{position:relative}
/* Kielivalitsin on ainoa ohjain, joka on kirjautumattomilla sivuilla suoraan
   tummalla pohjalla eikä laatikon sisällä. Valkoisena se olisi sivun
   kirkkain kohta ennen kuin mitään on vielä luettu.

   color-scheme:dark ei ole koriste: ilman sitä selain piirtää valikon oman
   avautuvan luettelon vaaleaksi ja perii siihen elementin valkoisen tekstin,
   jolloin kielten nimet katoavat juuri siinä hetkessä kun niitä luetaan. */
/* Kaksi kielivalitsinta, sama sääntö: yläpalkissa ja kirjautumattomien
   sivujen oikeassa yläkulmassa se on suoraan tummalla pohjalla. Valkoisena
   se olisi ruudun kirkkain kohta ennen kuin mitään on vielä luettu.

   color-scheme:dark ei ole koriste: ilman sitä selain piirtää valikon oman
   avautuvan luettelon vaaleaksi ja perii siihen elementin valkoisen tekstin,
   jolloin kielten nimet katoavat juuri siinä hetkessä kun niitä luetaan.

   Puhelinvalikon valkoisessa paneelissa sama valitsin palautetaan vaaleaksi
   (ks. @media 700 px). */
.top select,.kielipalkki select{color-scheme:dark;background:var(--pohja-pinta);
  border-color:var(--pohja-raja);color:rgba(255,255,255,.88)}

/* AVAUTUVA LUETTELO SAA OMAT VÄRINSÄ (2.145.0)

   MIKSI color-scheme YKSIN EI RIITÄ.

   Yllä oleva color-scheme:dark oli pitkään ainoa suoja, ja sen piti pitää
   selaimen oma avautuva luettelo tummana. 23.9.2026 tuli käyttäjältä
   kuvakaappaus, jossa kartan yläpalkin Kehitysluokka-valitsin oli auki:
   luettelo oli VAALEA ja tyhjän näköinen. Näkyvissä oli vain korostettu
   rivi, koska selain piirtää sen omilla järjestelmäväreillään – kaikki
   muut rivit olivat valkoista valkoisella.

   Syy on se, että option peri valitsimen valkoisen tekstin eikä sillä
   ollut omaa väriä lainkaan (mitattu: color rgba(255,255,255,.88),
   background rgba(0,0,0,0)). Kun selain jostain syystä ei sovella
   color-scheme:ä luetteloon, mikään ei jää suojaamaan. Aleksilla itsellään
   vikaa ei ollut – se riippuu selaimesta ja käyttöjärjestelmästä.

   Nyt keinoja on kaksi ja ne varmistavat toisensa: jos selain ohittaa
   color-scheme:n, nämä värit hoitavat asian, ja jos se ohittaa
   option-värit (macOS piirtää luettelon itse), color-scheme hoitaa.

   LUETTELO ON TUMMA EIKÄ VAALEA, JA SE ON HARKITTU. Päinvastainen olisi
   riskialtis: valitsimen valkoinen teksti periytyy luetteloon joka
   tapauksessa, joten selaimessa joka noudattaa option-värejä muttei
   taustoja vaalea luettelo palauttaisi täsmälleen tämän saman vian.
   Tummaan tähtäävässä ratkaisussa huonoin mahdollinen lopputulos on
   nykytila, ei sitä pahempi.

   KOLME VALITSINTA YHDESSÄ SÄÄNNÖSSÄ, vaikka .forst-kieli tyylitellään
   muuten css/forst.css:ssä. Tämä sääntö ei koske minkään sivun asettelua
   vaan selaimen piirtämää luetteloa, ja se on kaikilla kolmella sama asia.
   Jaettuna se on juuri se, joka jää yhdestä paikasta päivittämättä. */
.top select option,.kielipalkki select option,.forst-kieli select option,
.top select optgroup,.kielipalkki select optgroup,.forst-kieli select optgroup{
  background:var(--bg);color:#fff}

/* Käyttäjätaso: tallennustilan mittari omilla tiloilla.

   Mittari on tarkoituksella vaatimaton: se kertoo tilanteen mutta ei huuda.
   Väri muuttuu vasta kun raja on lähellä (80 %) tai täynnä. */
.tasopalkki{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;margin-bottom:14px;font-size:12.5px;color:var(--muted)}
.tasopalkki .nimi{font-weight:600;color:var(--ink)}
/* Omat lisät tason nimen perässä. Kevyempi kuin nimi itse: se on tarkennus
   siihen, ei toinen otsikko. */
.tasopalkki .nimi .lisat{font-weight:500;color:var(--accent)}
.tasopalkki .mittari{flex:1;min-width:150px;max-width:260px}
.tasopalkki .mittari .luku{display:flex;justify-content:space-between;margin-bottom:3px}
.tasopalkki .ura{height:6px;background:var(--ura);border-radius:4px;overflow:hidden}
.tasopalkki .taytto{height:100%;background:var(--accent);border-radius:4px;transition:width .3s}
.tasopalkki.lahella .taytto{background:var(--warn)}
.tasopalkki.taynna .taytto{background:var(--err)}
.tasopalkki.lahella{border-color:#e8c86a;background:#fbfbfb}
.tasopalkki.taynna{border-color:#f0c4bb;background:#f7f7f7}
.tasopalkki .spacer{flex:1}
.tasoikkuna .rajat{background:#f9f9f9;border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;margin:10px 0;font-size:13px}
/* gap (2.145.0): ilman sitä pitkä hintarivi painui otsikkoa vasten ja
   luki "Lisämaksu48,00 € …". space-between jakaa vain YLIMÄÄRÄISEN tilan,
   ja kun arvo täyttää rivin, ylimääräistä ei ole. Otsikko ei myöskään saa
   kutistua tai rivittyä sanan keskeltä. */
.tasoikkuna .rajat div{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.tasoikkuna .rajat div>span:first-child{flex:none}
.tasoikkuna .hinta{font-size:15px;font-weight:600;color:var(--ink);text-align:right}
.tasoikkuna textarea{min-height:80px}
.tasopalkki .jaljella{margin-top:3px;font-size:11.5px;color:var(--muted)}
.tasopalkki.taynna .jaljella{color:var(--err);font-weight:600}
.tasopalkki.lahella .jaljella{color:var(--warn);font-weight:600}

/* ---- Mitä uutta -ikkuna ----
   Hieman leveämpi kuin tavallinen vahvistusikkuna, koska muutoslista on
   kaksisarakkeinen: merkki vasemmalla, teksti oikealla. Pitkä historia
   vierii ikkunan sisällä eikä venytä ikkunaa ruudun ulkopuolelle. */
.uutisikkuna{max-width:600px}
.uutisikkuna .teksti{max-height:60vh;overflow-y:auto}
.uutisversio{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.uutisversio:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none}
/* Yleinen h3 on versaali osioetiketti. Tässä otsikko on kokonainen lause,
   joten versaali lukisi huutamiselta – palautetaan tavalliseksi otsikoksi. */
.uutisversio h3{margin:0 0 2px;font-size:15px;text-transform:none;
  letter-spacing:normal;color:var(--ink);font-weight:600}
.uutislista{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.uutislista li{display:flex;gap:9px;align-items:flex-start}
.uutismerkki{flex:none;display:inline-block;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:600;margin-top:1px;min-width:66px;text-align:center}
.uutismerkki.korjaus{background:#fdf0ea;color:#a8452a}
.uutismerkki.uusi{background:var(--accent-soft);color:var(--accent)}
.uutismerkki.parannus{background:#eef2f6;color:#3f5871}
@media (max-width:520px){
  .uutislista li{flex-direction:column;gap:3px}
  .uutismerkki{min-width:0}
}

/* ---- Alatunnisteen "Uutta" ----
   Suppea yhteenveto: kolme viimeisintä riviä päivämäärineen. Vasemmalle
   tasattu, koska päivämääräsarake tekee siitä luettavan – muu alatunniste
   on keskitetty, mutta luettelo ei luetu keskitettynä. */
.uutisalue{max-width:520px;margin:0 auto 18px;padding-bottom:16px;
  border-bottom:1px solid var(--line);text-align:left}
.uutisalue h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);text-align:center}
.uutisalue ul{list-style:none;margin:0;padding:0}
.uutisalue li{display:flex;gap:12px;padding:3px 0;align-items:baseline}
.uutisalue .pvm{flex:none;width:46px;color:var(--muted);font-variant-numeric:tabular-nums}
.uutisalue .teksti{color:var(--ink)}
.uutisalue .kaikki{margin-top:9px;text-align:center}
.uutisalue .kaikki a{color:var(--pohja-korostus);text-decoration:underline}
.alatunniste .versiorivi{margin-top:10px;font-size:11.5px;opacity:.75}
/* Puhelimessa päivämäärä pysyy omassa sarakkeessaan mutta kapeampana.
   Pystyyn pinottuna lista venyi kaksinkertaiseksi eikä lukemisesta tullut
   helpompaa. */
@media (max-width:480px){
  .uutisalue{max-width:none}
  .uutisalue li{gap:9px}
  .uutisalue .pvm{width:40px;font-size:11.5px}
}

/* ---- Ylläpito: kartan ulkoasu ----
   Nappiluettelo on järjestettävä, joten jokainen rivi on kolme saraketta:
   rasti ja nimi, huomautus, siirtonuolet. Nuolet pysyvät oikeassa reunassa
   samalla kohdalla riippumatta nimen pituudesta. */
.nappilista .nappirivi{display:grid;grid-template-columns:1fr auto auto;align-items:center;
  gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.nappilista .nappirivi:last-child{border-bottom:0}
.nappilista label{display:flex;align-items:center;gap:7px;margin:0}
.nappilista .nuolet{display:flex;gap:4px}
.nappilista .nuolet button{width:32px;min-width:32px;padding:0;justify-content:center}

/* Väripaletti: kaksi palstaa työpöydällä, yksi kapealla ruudulla. */
.varilista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:4px 18px}
.varilista .varirivi{display:flex;align-items:center;gap:9px;margin:0;padding:4px 0}
.varilista input[type=color]{width:42px;height:28px;padding:0;border:1px solid var(--line);
  border-radius:6px;background:none;cursor:pointer;flex:none}
.varilista .varirivi>span:first-of-type{flex:1;min-width:0}

/* Väritystapojen paletit avattavina osioina. Viisi palettia yhtaikaa auki
   tekisi asetussivusta lähes neljäkymmentä väririviä pitkän. */
.varipaletti{border-bottom:1px solid var(--line);padding:8px 0}
.varipaletti:last-child{border-bottom:0}
.varipaletti>summary{cursor:pointer;font-weight:600;font-size:13.5px;
  display:flex;align-items:center;gap:8px;list-style:none}
.varipaletti>summary::-webkit-details-marker{display:none}
.varipaletti>summary::before{content:"▸";color:var(--accent)}
.varipaletti[open]>summary::before{content:"▾"}
.varipaletti .varilista{margin-top:8px;padding-left:16px}

/* ---- Yhteiskäytön luettelo ----
   Ryhmä = yksi henkilö, taulukko = hänelle annetut tilat. Ryhmä erottuu
   omaksi laatikokseen, jotta kahden henkilön rivit eivät sekoitu toisiinsa.
   Taulukko muuttuu kapealla ruudulla korteiksi js/sivut/yllapito-mobiili.js:n
   tapaan – tässä se tehdään suoraan tyyleillä, koska omat tilat -sivulla ei
   ole ylläpidon taulukkomekanismia. */
.jakoryhma{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px;background:#f9f9f9}
.jakoryhma-otsikko{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:6px}
/* Pieni tilamerkki: linkin voimassaolo, jaon tila. Tässä eikä kartta.css:ssä,
   koska sama merkki näkyy sekä karttasivulla että omilla sivuilla. */
.merkki{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;padding:3px 7px;border-radius:5px;white-space:nowrap;
  background:var(--accent-soft);color:var(--accent)}
.merkki.pois{background:#eff0ef;color:var(--muted)}

table.jakotaulu{width:100%;border-collapse:collapse;font-size:13px}
table.jakotaulu th{text-align:left;font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);padding:6px 8px 6px 0;font-weight:600}
table.jakotaulu td{padding:7px 8px 7px 0;border-top:1px solid var(--line);vertical-align:top}
table.jakotaulu th.num,table.jakotaulu td.num{text-align:right;padding-right:14px}
table.jakotaulu td:last-child,table.jakotaulu th:last-child{text-align:right;padding-right:0;width:1%;white-space:nowrap}

@media (max-width:700px){
  /* Rivi kortiksi: sarakeotsikko solun eteen, arvo perään. Sama ratkaisu kuin
     ylläpidossa, mutta tässä otsikot ovat tiedossa etukäteen. */
  table.jakotaulu thead{display:none}
  table.jakotaulu,table.jakotaulu tbody,table.jakotaulu tr,table.jakotaulu td{display:block;width:auto}
  table.jakotaulu tr{border-top:1px solid var(--line);padding:8px 0}
  table.jakotaulu tr:first-child{border-top:0}
  table.jakotaulu td{border:0;padding:2px 0 2px 34%;position:relative;min-height:18px}
  table.jakotaulu td::before{content:attr(data-otsikko);position:absolute;left:0;top:2px;
    width:32%;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
  table.jakotaulu td:first-child{padding-left:0}
  table.jakotaulu td:first-child::before{content:none}
  table.jakotaulu td.num{text-align:left;padding-right:0}
  table.jakotaulu td:last-child{text-align:left;padding-left:0;padding-top:6px;width:auto}
}

/* Ylläpitäjän palkki ammattilaispuolella. Tarkoituksella eri värinen kuin
   mikään muu palvelussa: sen tehtävä on muistuttaa, ettei katsota omia
   tietoja vaan jonkun toisen organisaation. */
.yllapitopalkki{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;background:#fdf3e3;border:1px solid #e6c78a;
  border-radius:10px;padding:10px 14px;margin-bottom:16px;
  font-size:13px;color:#7a5312}
.yllapitopalkki b{color:#5c3d0b}
.yllapitopalkki .toimet{gap:8px;margin:0}

/* Organisaatiovalinnan rivit. */
.orgvalinta{display:flex;flex-direction:column;gap:8px}
.orgvalinta button{display:flex;align-items:center;justify-content:space-between;
  gap:12px;width:100%;text-align:left}
.orgvalinta .lisa{font-weight:400;opacity:.75;font-size:12.5px}

/* ------------------------------------------------- ammattilaispuolen sivut

   Maastokäyttö ohjaa mitoitusta: samaa listaa selataan puhelimella
   kylmässä ja kirkkaassa valossa. Kosketusalueet ovat vähintään 44 px ja
   tekstin kontrasti pidetään täytenä – harmaata käytetään vain
   toissijaiseen tietoon, ei siihen mitä pitää lukea. */
.ammnavit{display:flex;gap:4px;margin-left:6px}
.ammnavi{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;
  border-radius:8px;font-size:13.5px;font-weight:600;text-decoration:none;
  color:var(--palkki-teksti)}
/* Sama kuin .top nav a:n kohdalla: nämä ovat yläpalkissa eli tummalla
   pohjalla. Puhelinvalikon valkoisessa paneelissa on omat, tarkemmat
   sääntönsä (ks. @media 700 px), joten ne eivät mene sekaisin. */
a.ammnavi:hover{background:var(--palkki-pinta);color:var(--palkki-teksti-nyt)}
.ammnavi.nyt{background:var(--palkki-pinta);color:var(--palkki-teksti-nyt);font-weight:700}

/* Suodatinrivi. Kentät kutistuvat mutta eivät katoa: piilotettu suodatin
   jää päälle huomaamatta ja lista näyttää tyhjältä ilman syytä. */
.suodattimet{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
/* Työmaat-sivun tyyppirastit (2.162.0) */
.tyyppirastit{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:12px}
.tyyppirastit:empty{display:none}
.tyyppirastit-otsikko{font-size:12.5px;color:var(--muted);margin-right:4px}
.tyyppirasti{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13.5px;color:var(--ink);cursor:pointer}
.tyyppirasti input{margin:0}
.tyyppirasti-tyhja{width:18px;height:14px;border:1.5px dashed var(--muted);border-radius:3px;display:inline-block}
.suodattimet label{display:flex;flex-direction:column;gap:4px;font-size:12px;
  color:var(--muted);font-weight:600}
.suodattimet input,.suodattimet select{min-height:var(--nappi-korkeus);min-width:130px}
.suodattimet .kapea input{min-width:84px}
.suodattimet .kapea{flex-direction:row;align-items:center;gap:6px}

/* Kiinteistölista. Taulukko työpöydällä, kortit puhelimessa – sama data,
   eri muoto. Vaihto tehdään CSS:llä eikä kahdella piirrolla, jottei
   selaimeen jää kahta erilaista totuutta samasta rivistä. */
.kiintlista{width:100%;border-collapse:collapse;font-size:13.5px}
.kiintlista th{text-align:left;font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);font-weight:700;
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.kiintlista td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.kiintlista tbody tr{cursor:pointer}
.kiintlista tbody tr:hover{background:var(--accent-soft)}
.kiintlista .luku{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Yhteenvetorivi taulukon alla.

   Rivi ei ole yksi tietue lisää vaan niiden summa, joten se erottuu:
   paksumpi viiva yläpuolella, lihavointi ja hiljainen tausta. Ilman eroa se
   luettaisiin riviksi, jolta puuttuu nimi. Osoitin ei muutu – riviä ei voi
   napsauttaa, koska se ei vie mihinkään. */
.kiintlista tfoot tr.yhteenveto{cursor:default;background:var(--panel,#f9f9f9)}
.kiintlista tfoot tr.yhteenveto td{font-weight:650;border-top:2px solid var(--line);
  border-bottom:none}
.kiintlista tfoot tr.yhteenveto:hover{background:var(--panel,#f9f9f9)}
/* Lajiteltava sarakeotsikko.

   Otsikko on painike, joten sen on myös näytettävä siltä: osoitin muuttuu
   ja tausta korostuu. Nuoli on vain voimassa olevassa sarakkeessa – jos
   niitä olisi jokaisessa, voimassa olevaa ei erottaisi. */
/* Rivi, joka vie jonnekin. Kiinteistölistan rivit ovat aina klikattavia,
   mutta kuvioluettelo on myös taulukko – tämä luokka kertoo kummasta on
   kyse, jottei kaikista taulukoista tule vahingossa painikkeita. */
.kiintlista tbody tr.klikattava{cursor:pointer}
.kiintlista th.lajiteltava{cursor:pointer;user-select:none}
.kiintlista th.lajiteltava:hover{background:var(--accent-soft);color:var(--text)}
.kiintlista th.lajiteltava:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.kiintlista th.lajittelee{color:var(--accent)}
.kiintlista .lajinuoli{margin-left:4px;font-size:9px;vertical-align:1px}
.kiintlista .tunnus{font-weight:650;white-space:nowrap}
/* Puutavaralajit toimenpiderivin sisällä. Omana sarakkeenaan kuusi–kymmenen
   lajia veisi koko taulukon leveyden, joten ne latautuvat pystyyn yhteen
   soluun. Rivinvaihdot ovat elementeissä eivätkä merkeissä, jotta
   kielimoduuli löytää nimet kokonaisina tekstisolmuina. */
.puutavarat{display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.puutavara{white-space:nowrap}
.puutavara b{font-variant-numeric:tabular-nums}
.kiintlista .tyhja{color:var(--muted)}

/* Rivin merkit: kesken oleva otanta ja päivitetyt kuviotiedot. Nämä eivät
   ole omia sarakkeitaan, koska ne ovat poikkeuksia – sarake niille olisi
   melkein aina tyhjä ja veisi tilaa siltä mitä oikeasti luetaan. */
/* Väkänen nuolen sijaan kaikissa nappien ja linkkien suuntamerkeissä
   (2.156.0, Aleksi: "älä lisää nappiin nuolta vaan käytä väkästä
   kaikkialla"). Sama muoto kuin kartta.css:n .vakanen; i-elementille, koska
   valinta.html käyttää samaa luokkanimeä SVG-kuvakkeelle. :where pitää
   tarkkuuden nollassa, jotta karttasivuilla kartta.css:n väkäset voittavat. */
:where(i.vakanen){display:inline-block;width:7px;height:7px;flex:none;vertical-align:.12em;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);opacity:.7}
:where(i.vakanen.vasen){transform:rotate(-135deg);margin:0 6px 0 2px}
:where(i.vakanen.oikea){margin:0 2px 0 6px}
.rivimerkki{display:inline-block;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:5px;
  margin-left:6px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.rivimerkki.kesken{background:#fdf1e0;color:#8a5410}
/* 2.165.0: laskennallisen tiedon merkki (puuttuu tai ei kuluvan vuoden). */
.rivimerkki.laskenta{background:#e8eefa;color:#1f4f8b}
.laskentamerkki{margin-top:10px;padding:8px 10px;border-radius:8px;background:#e8eefa;color:#1f4f8b;font-size:13.5px}

/* TIIVIS TIETUE (2.141.0)

   Puhelimessa kiinteistölista ei ole enää taulukko korteiksi taitettuna vaan
   oma kaksirivinen tietue: nimi ja pinta-ala ylärivillä, asiakas ja kunta
   alla. Mitattu ero on iso – kortti oli 118 px, tämä on 54 px – ja syy on
   yksinkertainen: korttimuodossa jokaisen arvon edessä luki sen sarakkeen
   nimi, eli neljä selitettä toistui jokaisella kiinteistöllä.

   Sama muoto on kiinteistöryhmien luettelossa (nimi ja kiinteistömäärä), nyt
   myös työpöydällä: kahden sarakkeen taulukko ei kertonut mitään, mitä rivi
   ei kerro.

   Merkinnät (otanta kesken, päivitetty) ovat väripalloja eivätkä tekstiläpän
   kokoisia: teksti ei mahdu nimen viereen ilman että nimi katkeaa, ja nimi on
   se, jolla rivi tunnistetaan. Selite on title-attribuutissa. */
.tiivislista{display:flex;flex-direction:column}
.tiivisrivi{display:flex;gap:10px;align-items:center;padding:7px 4px;
  border-top:1px solid var(--ura);cursor:pointer}
.tiivisrivi:first-child{border-top:0}
.tiivisrivi:hover{background:var(--accent-soft)}
/* Maastomerkinnän rivi on linkki (2.146.0, js/sivut/amm-merkintakortti.js):
   sama ulkoasu kuin data-t-rivillä, ilman linkin alleviivausta. */
a.tiivisrivi{color:inherit;text-decoration:none}
.merkintarivi-kuva{flex:none;width:34px;display:flex;justify-content:center}
/* Maastomerkinnän merkki (tyyli A, Aleksin valinta): ryhmän väri täyttää
   ympyrän. Täällä eikä kartta.css:ssä, koska sama merkki on sekä kartalla
   että kiinteistön sivun luettelossa. Paksu valkoinen reunus ja varjo ovat
   ainoa suoja samanväristä kuviota vasten – ks. kartta/merkintatyypit.js. */
.merkinta-merkki{position:relative;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;border:2.4px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.55);flex:none;
  box-sizing:border-box}
.merkinta-merkki svg{display:block}
.merkinta-lukko{position:absolute;right:-6px;bottom:-6px;width:46%;height:46%;border-radius:50%;
  background:#1b1b1b;border:1.6px solid #fff;display:flex;align-items:center;justify-content:center}
.merkinta-lukko svg{width:70%;height:70%}
.merkinta-nayte{display:block;flex:none}
.rivimerkki.salainen{background:#f4f1fa;color:#5a2f8f;border-color:#ddd2ef}
.tiivisrivi:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tiivisrivi .karttaRuutu{flex:none;width:18px;height:18px;margin:0}
.tiivissisus{flex:1;min-width:0}
.tiivisnimi{display:flex;align-items:baseline;gap:8px}
.tiivisnimi b{font-size:14.5px;font-weight:650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tiivisnimi .luku{margin-left:auto;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Alarivi kutistuu, ylärivi ei: asiakkaan nimi saa katketa, tilan nimi ei.
   Teksti on omassa kuoressaan, koska sen perässä voi olla merkintälätkä
   (mitattu, otanta kesken) – ilman kuorta lätkä leikkautuisi rivin reunasta
   sen sijaan että teksti lyhenisi. */
.tiivislisa{display:flex;gap:6px;font-size:11.5px;color:var(--muted);min-width:0;
  white-space:nowrap}
.tiivislisa .teksti{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tiivislisa .rivimerkki{margin-left:0;font-size:10px;padding:1px 5px}
.valintakuori{flex:none;display:flex;align-items:center}
.tiivisrivi .kValinta{flex:none;width:18px;height:18px;margin:0}
.merkkipallo{width:8px;height:8px;border-radius:50%;background:var(--accent);
  flex:none;display:inline-block;margin-right:6px;vertical-align:1px}
.merkkipallo.kesken{background:#d08a2a}
.merkkipallo.laskenta{background:#1f4f8b}
/* Nuoli kertoo, että rivi vie jonnekin. Piirretty reunoista eikä merkistä:
   nuolimerkin koko ja asemointi vaihtelevat selaimittain. */
.karttanappi{flex:none;width:40px;height:40px;min-height:0;padding:0;display:inline-flex;
  align-items:center;justify-content:center;border-radius:10px}
.kiintlista td.karttasolu,.kiintlista th.karttasolu{width:52px;text-align:right;padding-left:4px}
.kiintlista td.karttasolu .karttanappi{width:34px;height:34px}
.tiivisnuoli{width:15px;height:15px;flex:none;
  border-right:2px solid var(--line);border-top:2px solid var(--line);
  transform:rotate(45deg) scale(.5)}
.lisanappi{flex:none;min-height:30px;padding:0 10px;font-size:13px;line-height:1}
.ryhmatoimet{display:flex;gap:8px;flex-wrap:wrap;padding:0 4px 10px}

/* Hakupalkki ja suodatinlohko. Palkki on vain puhelimessa; työpöydällä
   kaikki kentät mahtuvat näkyviin eikä painikkeen takana ole mitään. */
.tiivishaku{display:none;gap:8px;align-items:center;margin-top:12px}
.tiivishaku input{flex:1;min-width:0;min-height:42px}
.tiivishaku button{min-height:42px;white-space:nowrap}
.suodinlkm{display:none;margin-left:6px;background:var(--accent);color:#fff;
  border-radius:999px;min-width:18px;height:18px;font-size:11px;font-weight:700;
  padding:0 5px;align-items:center;justify-content:center}
.suodinlkm.on{display:inline-flex}

/* Kiinteistön perustiedot: puhelimessa lukurivit, työpöydällä lomake.
   Työpöydällä lukurivit ovat piilossa – siellä viisi kenttää mahtuu
   rinnakkain eikä muokkaustila maksaisi mitään. */
#perustiedotLuku{display:none}

@media (max-width:760px){
  .tiivishaku{display:flex}
  .vain-tyopoyta{display:none}
  #perustiedotLuku{display:block}
  /* Vain kiinteistösivun kortti: kuviosivulla on samanniminen lomake, joka
     piiloutui puhelimessa eikä perustietoja voinut muokata (2.169.0). */
  #perustietoKortti #perustiedot,#perustiedotToimet{display:none}
  #perustietoKortti.muokkaus #perustiedotLuku{display:none}
  #perustietoKortti.muokkaus #perustiedot{display:block}
  #perustietoKortti.muokkaus #perustiedotToimet{display:flex}
  /* Suodatinkentät ovat olemassa myös kiinni ollessaan – selain lukee niistä
     arvot – mutta piilossa, kunnes Suodata avaa ne. */
  #suodatinlohko{display:none}
  #suodatinlohko.auki{display:block}
  .kiintlista,.kiintlista tbody,.kiintlista tr,.kiintlista td{display:block;width:100%}
  .kiintlista thead{display:none}
  .kiintlista tr{border:1px solid var(--line);border-radius:12px;background:var(--panel);
    margin-bottom:10px;padding:12px 14px}
  .kiintlista td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:14px}
  /* Sarakkeen nimi kortin sisällä: ilman sitä pelkkä luku ei kerro mitään. */
  .kiintlista td::before{content:attr(data-otsikko);color:var(--muted);
    font-size:12px;font-weight:600;flex:none}
  .kiintlista td.paarivi{font-size:16px;font-weight:650;padding-bottom:6px}
  .kiintlista td.paarivi::before{content:none}
  .kiintlista .luku{text-align:right}
  /* Toimenpidekortti (2.156.0): nimi ja "Tehty 11.4.2006" samalla rivillä,
     kertymä yhtenä oikealle tasattuna lohkona. */
  .kiintlista td.paarivi .tp-tila{display:inline;font-size:13px;font-weight:500;
    color:var(--muted);white-space:nowrap;align-self:center}
  .kiintlista .kertymaarvo{display:block;text-align:right;min-width:0;flex:1 1 0;white-space:normal}
  .kiintlista td.vain-tyopoyta{display:none}
  /* CSV-lataus on työpöydän työtä (Aleksi 25.9.2026): Työajat-sivu ja
     asiakassivun Työajat-osio. */
  #csvLinkki{display:none}
}
.tp-tila{display:none}

/* Sarakevalitsin: pudotusvalikon sijaan paneeli, koska valintoja on
   kaksitoista eikä niitä voi lukea kapeasta valikosta. */
.sarakepaneeli{border:1px solid var(--line);border-radius:12px;background:var(--panel);
  padding:14px 16px;margin-top:10px}
.sarakepaneeli .rasti{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr));
  gap:8px 16px;margin-top:10px}
.sarakepaneeli label{display:flex;align-items:center;gap:8px;min-height:32px;
  font-size:13.5px;cursor:pointer}

/* Listan loppu: latausviesti ja "näytä lisää" -varamekanismi.
   IntersectionObserver hoitaa vierityksen, mutta nappi on aina näkyvissä –
   se on ainoa keino jos vieritystä ei tapahdu (lyhyt lista isolla näytöllä)
   tai jos selain ei tue tarkkailijaa. */
.listanloppu{display:flex;justify-content:center;padding:18px 0;min-height:60px}
.listanloppu button{min-height:44px;padding:0 22px}

/* Nimi–arvo -parit kortissa (kiinteistön yhteenveto, asiakkaan yhteystiedot).
   Taulukon sijaan rivit, koska pareja on vähän ja ne luetaan puhelimella:
   taulukko pakottaisi vaakavieritykseen kapealla näytöllä. */
.tiedot .rivi{display:flex;justify-content:space-between;gap:16px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.tiedot .rivi:last-child{border-bottom:0}
.tiedot .rivi span{color:var(--muted)}
.tiedot .rivi b{font-weight:650;text-align:right;font-variant-numeric:tabular-nums}

/* ---- Tasokortit ----

   Sama kortti kahdessa paikassa: kutsusivulla (kutsu.html) ihmiselle, jolla ei
   vielä ole tunnusta, ja Oma tili -sivulla kirjautuneelle. Siksi tyylit ovat
   täällä eivätkä kummankaan sivun sisällä – kaksi kopiota eroaisi ensimmäisen
   muutoksen jälkeen.

   Vierekkäin kun tilaa on, allekkain kun ei. Ei vaakavieritystä: puhelimessa
   se olisi käyttökelvoton. */
/* Kortit ovat SAMAN KORKUISIA, vaikka toisessa olisi rivi vähemmän. Eri
   korkuiset laatikot lukisivat kuin eriarvoiset tarjoukset, ja rivien
   laskeminen vaikeutuisi kun ne eivät ala samalta korkeudelta. Tyhjä tila
   jää kortin alaosaan, ja avauspainike on kaikissa samalla rivillä. */
.tasokortit{display:grid;gap:12px;margin-top:14px;align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.tasokortti{border:1px solid var(--sisareuna);border-radius:12px;
  padding:16px;background:var(--panel);display:flex;flex-direction:column}
/* SAMA KORTTI KUIN KAUPASSA (2.105.0).

   Tausta oli --bg eli sivun harmaa, jolloin kortti näytti valkoisen kortin
   sisällä sammuneelta – ja kaupassa sama taso näytettiin valkoisella
   tuotekortilla. Sama asia kahdessa asussa tarkoittaa, että käyttäjä
   opettelee sen kahdesti; ja kun hinnat ovat eri näköisiä eri sivuilla, hän
   myös epäilee ovatko ne samat hinnat. Nyt pinta, pyöristys, reunus ja
   oman tason korostus ovat samat kuin kaupan .tuotekortti-kortissa. */
.tasokortti.oma{border-color:var(--accent);box-shadow:0 0 0 2px rgba(38,86,46,.12)}
/* Tason nimi on nimi eikä osioetiketti: yleinen h3 on versaali ja harmaa,
   ja se teki nimestä otsikkorivin kortin sisällä. */
.tasokortti h3{margin:0 0 4px;font-size:15px;text-transform:none;
  letter-spacing:0;color:var(--ink);font-weight:650}
./* Sama pilleri kuin kaupan "käytössäsi"-tunniste, ei paljas versaaliteksti. */
.tasokortti .rooli{display:inline-block;align-self:flex-start;font-size:12px;
  font-weight:650;color:var(--accent);background:var(--accent-soft);
  border:1px solid var(--accent-raja);border-radius:999px;padding:3px 10px;
  margin-bottom:8px}
./* Hinta samalla painolla kuin kaupassa (.hintarivi .summa, 19 px / 650):
   sama luku samassa koossa molemmilla sivuilla, tai lukija epäilee lukua. */
.tasokortti .hinta{font-size:19px;font-weight:650;color:var(--ink);margin-bottom:4px;
  font-variant-numeric:tabular-nums}
.tasokortti ul{margin:8px 0 12px;padding-left:18px;font-size:13.5px}
.tasokortti li{margin:2px 0}
/* Painike kortin alareunaan: margin-top:auto työntää sen alas riippumatta
   siitä, montako riviä kortissa on. */
.tasokortti .avaus{margin-top:auto;width:100%}
/* Pitkä tasokuvaus kortin sisällä. Kapeampi riviväli kuin leipätekstissä ei
   käy: teksti on tarkoitettu luettavaksi, ei silmäiltäväksi. */
/* ---- Metsän arvon kaavion vihje (2.110.0) ----

   Laatikko on HTML:ää eikä SVG:tä, koska teksti rivittyy ja mitoittuu itse.
   SVG:ssä sama vaatisi rivinvaihtojen laskemista käsin.

   pointer-events:none on välttämätön eikä koriste: laatikko piirtyy hiiren
   viereen, ja jos se ottaisi osoittimen vastaan, se veisi sen kaaviolta ja
   vihje vilkkuisi auki ja kiinni sitä mukaa kuin hiiri osuu sen reunaan. */
.kaaviovihje{position:absolute;z-index:5;pointer-events:none;
  background:var(--panel,#fff);border:1px solid var(--line,#dcd9d2);border-radius:10px;
  padding:8px 10px;font-size:13px;line-height:1.45;
  /* Leveys rajattu: kaavio on puhelimella noin 400 px, ja rajaamaton
     laatikko peittäisi siitä koko yläosan. Selite saa katketa kahdelle
     riville, luku ei – luku on se, mitä laatikosta luetaan. */
  min-width:140px;max-width:min(230px,72%);
  box-shadow:0 4px 14px rgba(0,0,0,.12)}
.kaaviovihje .muted{color:var(--muted)}
.kaaviovihje b{white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .kaaviovihje{font-size:12.5px;padding:7px 9px}
}

/* ---- Metsän arvon esittelysivun sisältöluettelo (2.127.0) ----

   Kuusi ryhmää siitä, mitä maksullisella puolella on. Kahdessa sarakkeessa
   ne mahtuvat yhteen ruutuun; yhdessä sarakkeessa lista olisi niin pitkä,
   ettei ostopainike näkyisi samaan aikaan sen kanssa.

   auto-fit ja minmax eikä kiinteä kaksi saraketta: kapealla ruudulla
   sarakkeita on yksi ilman erillistä media-kyselyä, ja 260 px on se leveys,
   jolla otsikko ja luettelokohta eivät vielä katkea kesken sanan. */
.esittelyruudukko{display:grid;gap:14px 28px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* Luettelon kohdat ovat lauseita eivätkä otsikoita, joten ne rivittyvät –
   mutta sana ei saa katketa keskeltä kapeallakaan ruudulla. */
.esittelyruudukko li{overflow-wrap:break-word}

.tasokuvaus{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.55}
.tasokuvaus h4{margin:12px 0 3px;font-size:13.5px;color:var(--accent)}
.tasokuvaus h4:first-child{margin-top:0}
.tasokuvaus p{margin:0 0 8px}
.tasokuvaus p:last-child{margin-bottom:0}

/* ---- Ylläpidon ilmoitus käyttäjälle ----

   Sama ikkuna kuin muutkin, mutta osiot erottuvat toisistaan: voimassa voi
   olla useampi ilmoitus, ja ne näytetään samassa ikkunassa peräkkäin. Ilman
   erotinta kaksi viestiä lukisi yhtenä. */
.ilmoitusikkuna .ilmoitusosa + .ilmoitusosa{margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line)}
.ilmoitusikkuna .ilmoitusosa h3{margin:0 0 6px;font-size:15px;text-transform:none;
  letter-spacing:0;color:var(--ink);font-weight:650}
.ilmoitusikkuna .ilmoitusosa p{margin:0;white-space:normal}

/* ---- Tilauksen tilanne Oma tili -sivulla ----

   Oma laatikkonsa tasokorttien alla: se ei ole yhden tason ominaisuus vaan
   tieto käyttäjän omasta sopimuksesta, eikä siksi kuulu minkään kortin
   sisään. Päättynyt tilaus saa varoitusvärin, koska se on ainoa tilanne,
   jossa käyttäjän kannattaa tehdä jotain. */
.tilaus{margin-top:14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--upote);font-size:13.5px}
.tilaus b{font-weight:650}
.tilaus .rivi{margin:0 0 4px}
.tilaus .rivi:last-child{margin-bottom:0}
.tilaus.paattynyt{border-color:#e8c86a;background:#fbfbfb}
.tilaus .napit{margin-top:10px}

/* Oma tili → kauppa. Erillinen laatikko napin alla: se ei ole kolmas
   painike samassa rivissä vaan eri asia – tasovalikoiman selaaminen tapahtuu
   kaupassa, ei tällä sivulla. Rivi kietoutuu kapealla ruudulla, jottei
   painike valu reunan yli. */
.kauppavinkki{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px}
.kauppavinkki>div{flex:1;min-width:180px}

/* ---- Laskutustila ja työaikataulukko (2.148.0) ----

   Kolme tilaa kolmella värillä: harmaa ei laskuteta, oranssi laskutettava
   (odottaa laskua – sama väri kuin "kesken" muualla), vihreä laskutettu.
   Vihreä on palvelun oma aksenttiväri, joten laskutettu näyttää
   "valmiilta" samalla tavalla kuin muuallakin. */
.rivimerkki.laskutettu{background:var(--accent);color:#fff}
.rivimerkki.harmaa{background:#eef0ee;color:#56605a}
/* Taulukko vierii omassa kuoressaan: yhdeksän saraketta ei mahdu
   puhelimeen, eikä sivu saa vieriä sivuttain. */
.taulukuori{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tyoaikataulu td,.tyoaikataulu th{white-space:nowrap}
.tyoaikataulu td.valinta,.tyoaikataulu th.valinta{width:1%;padding-right:2px}
.tyoaikataulu input[type=checkbox]{width:17px;height:17px;margin:0;display:block}
.tyoaikataulu td.pvm,.tyoaikataulu td.num{font-variant-numeric:tabular-nums}
.tyoaikataulu a{color:inherit;text-decoration:none;border-bottom:1px solid var(--accent-raja)}
.tyoaikataulu a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.tyoaikataulu .kuvausrivi{font-size:11.5px;color:var(--muted);max-width:280px;
  overflow:hidden;text-overflow:ellipsis}
.tyoaikataulu tr.valittu td{background:var(--accent-soft)}
.tyoaikataulu .rivimerkki{margin-left:0}
/* Toimintopalkki pysyy näkyvissä pitkää listaa vieritettäessä: valinta
   tehdään alempana, ja painikkeet on silti saatava käsiin. */
.joukkopalkki{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px 14px;
  align-items:center;justify-content:space-between;padding:8px 10px;margin:0 0 10px;
  background:var(--panel);border:1px solid var(--accent-raja);border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.06)}
.joukkopalkki[hidden]{display:none}
.joukkoluku{font-size:13px;font-variant-numeric:tabular-nums}
.joukkotoimet{display:flex;flex-wrap:wrap;gap:6px}
/* Summat oikeassa reunassa, yksi tila riviä kohti (2.156.0): luvut ovat
   yhteenveto, ja oikea reuna on se, josta summaa etsitään. */
.tilasummat{display:grid;grid-template-columns:auto auto;justify-content:end;align-items:center;
  gap:6px 8px;font-size:13.5px;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.tilasummat:empty{display:none}
/* Merkit ja arvot omissa sarakkeissaan, jotta eurot asettuvat allekkain. */
.tilasumma{display:contents}
.tilasumma>.rivimerkki{justify-self:stretch}
/* Tilapillerit samanlevyisiksi (2.156.0, Aleksi 25.9.2026: "jos on
   päällekkäisiä rivejä … ne ovat pystysuorassa samalla kohdalla"). Leveys
   on pisimmän tavallisen tilan (LASKUTETTAVA) mukainen; päivämäärällinen
   "Laskutettu 24.9.2026" on pidempi, mutta kaikki työaikarivit ovat silloin
   saman mittaisia, koska päivämäärä on aina samaa muotoa. */
.rivimerkki.tilapilleri{min-width:8.6em;text-align:center;box-sizing:border-box}
.tilasumma-arvot{white-space:nowrap;text-align:right}
.tilasumma .rivimerkki{margin-left:0}
/* Asiakkaat-luettelo: rivi on linkki kuten kiinteistöluettelossa. */
table.asiakaslista tbody tr{cursor:pointer}
table.asiakaslista td.num,table.asiakaslista th.num{font-variant-numeric:tabular-nums}
table.asiakaslista td.nolla{color:var(--muted)}
/* Joka toinen rivi eri sävyllä kuten työmaissa (2.156.0, Aleksi 25.9.2026). */
table.asiakaslista tbody tr:nth-child(even) td{background:var(--upote)}
@media (max-width:700px){
  /* Nimi saa tilaa eikä katkea kesken sanan ("Arvometsä|n asiakas"). */
  .wrap table.asiakaslista th:first-child{width:33%}
  .wrap table.asiakaslista th:nth-child(2){width:15%}
  .wrap table.asiakaslista th:nth-child(3){width:32%}
  .wrap table.asiakaslista th{letter-spacing:.01em;white-space:nowrap}
  table.asiakaslista .pitka{display:none}
  table.asiakaslista .lyhyt{display:inline}
  .wrap table.asiakaslista td:first-child{overflow-wrap:normal;word-break:normal;hyphens:auto}
}
/* Asiakkaan muistiinpano: rivinvaihdot säilyvät, koska muistiinpano on
   usein lista ("portti lukossa / soita ensin"). */
.asiakasmuistio{margin-top:10px;padding:10px 12px;border-radius:8px;background:var(--upote);
  font-size:13.5px;white-space:pre-wrap;overflow-wrap:anywhere}
/* Asiakkaan kiinteistöt: tunnus ei saa katketa kesken (410-403-/7-1),
   joten puhelimessa taulukko vierii omassa kuoressaan. */
.kiinteistotaulu td,.kiinteistotaulu th{white-space:nowrap}
/* Asiakkaan kiinteistöt puhelimessa: kaksi riviä, ei taulukkoa (2.156.0). */
.akt-lista{display:none}
.akt-rivi{display:block;padding:10px 4px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.akt-rivi:nth-child(even){background:var(--upote)}
.akt-yla{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.akt-yla b{color:var(--accent);min-width:0;overflow-wrap:anywhere}
.akt-yla .luku{white-space:nowrap;font-variant-numeric:tabular-nums}
.akt-ala{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.akt-yhteensa{display:flex;justify-content:space-between;gap:12px;padding:10px 4px 2px;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .akt-lista{display:block}
  .akt-taulu{display:none}
}
/* Työmaan tila (2.149.0): kesken oranssi, valmis vaalean vihreä,
   laskutettu vihreä – sama kieli kuin työaikojen laskutustilassa. */
.rivimerkki.tila-kesken{background:#fdf1e0;color:#8a5410}
.rivimerkki.tila-valmis{background:var(--accent-soft);color:var(--accent)}
.rivimerkki.tila-laskutettu{background:var(--accent);color:#fff}
/* Työmaan toteuma (2.153.0, luonnos A): "Tehty kokonaan" vihreällä,
   "Osittain" ruskealla ja nimetyt luvut alla. Puhelimessa tila ja
   tarkennus ovat omalla rivillään, jottei rivi ruuhkaudu. */
.toteuma{font-size:12.5px;font-weight:650;white-space:nowrap}
.toteuma.ok{color:var(--accent)}
.toteuma.osa,.toteumaluvut .osa,.tiivisauki .osa{color:#8a5410}
.toteumaluvut{display:grid;grid-template-columns:auto auto;gap:1px 12px;margin:6px 0 0;
  font-size:12px;width:max-content;font-variant-numeric:tabular-nums}
.toteumaluvut dt{color:var(--muted)}
.toteumaluvut dd{margin:0;text-align:right;font-weight:650}
.toteumasyy{font-size:12px;color:var(--muted);margin-top:3px;max-width:240px}
.tiivistila{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:5px;min-width:0}
.tiivistila .rivimerkki{margin-left:0}
.tiivistila .toteuma{font-size:12px}
/* Taulukon sisäinen pieni toiminto (2.149.0): "Muuta", "Hyväksy".
   Tekstilinkin näköinen, koska rivillä on jo monta nappia painavampaa
   asiaa – ja samalla rivillä toistuva kehysnappi olisi raskas. */
button.linkkinappi{height:auto;padding:0;margin-left:4px;background:none;border:0;color:var(--accent);
  font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
button.linkkinappi:hover{filter:none;color:#1a3d20}
.tyomaataulu td .rivimerkki{margin-left:0}
.joukkohuomio{flex-basis:100%;font-size:12.5px;color:#8a5410;margin-top:4px}
/* HELPPOLUKUISUUS JA RIVIEN EROTTELU (2.153.0, Aleksi: "muista
   helppolukuisuus ja rivien erottelu"). Toteuma tekee riveistä eri
   korkuisia, joten raja ei yksin riitä erottamaan niitä: joka toinen rivi
   on sävytetty, sisältö alkaa rivin yläreunasta (monirivinen tila luetaan
   samalta korkeudelta kuin nimi) ja väliä on enemmän. */
.tyomaataulu{font-size:13.5px}
.tyomaataulu td{vertical-align:top;padding:12px 8px;border-bottom:1px solid var(--line)}
.tyomaataulu tbody tr:nth-child(even) td{background:var(--upote)}
.tyomaataulu tbody tr.valittu td{background:var(--accent-soft)}
.tyomaataulu td.valinta{padding-top:13px}
.toteumaluvut dt,.toteumaluvut dd{padding:2px 0;border-bottom:1px dotted var(--line)}
.toteumaluvut{font-size:12.5px;gap:0}
.toteumaluvut dt{padding-right:16px}
.tyomaalista .tiivisrivi{padding:12px 8px;border-top:1px solid var(--line)}
.tyomaalista .tiivisrivi:nth-child(even){background:var(--upote)}
.tyomaalista .tiivisrivi.valittu{background:var(--accent-soft)}
/* Työlajin lomake (2.150.0): nimi ja kolme hintaa ruudukkona. Puhelimessa
   kaksi saraketta, jolloin hinnat ovat pareittain eivätkä pitkänä
   pinona. Laskutetaan-rasti on tekstinsä vieressä – aiemmin .kapea venytti
   sen kentän levyiseksi ja teksti jäi kauas ruudusta. */
/* Organisaatio-sivu (2.152.0): kutsunappi otsikon rinnalla, roolien
   selitys käyttäjäluettelon yllä ja rivin kaksi nappia vierekkäin. */
.org-otsake{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.org-otsake h2{margin-bottom:2px}
.roolit{border:1px solid var(--sisareuna,var(--line));border-radius:10px;padding:10px 12px;
  margin:0 0 14px;background:var(--upote,#f1f3f1);line-height:1.5}
.roolit p{margin:0 0 4px}
.roolit p:last-child{margin:0}
.jasen-toimet{white-space:nowrap}
.jasen-toimet button+button{margin-left:6px}
/* Käyttäjät puhelimessa kortteina (2.156.0). */
.jasenkortit{display:none}
.jasenkortti{padding:12px 4px;border-bottom:1px solid var(--line)}
.jasenkortti:nth-child(even){background:var(--upote)}
.jk-nimi{margin-bottom:6px;overflow-wrap:anywhere}
.jk-rivi{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:36px}
.jk-rivi select{width:auto;min-width:10.5em;max-width:65%}
.jk-toimet{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
@media (max-width:760px){
  .jasenkortit{display:block}
  .jasentaulu{display:none}
}
.tyolajilomake{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 12px;align-items:end}
.tyolajilomake .tl-nimi{grid-column:1/-1;max-width:420px}
.tyolajilomake input[type=text]{width:100%}
.tyolajilomake .tl-rasti{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);
  margin:10px 0 6px}
.tyolajilomake .tl-rasti input{width:20px;height:20px;margin:0;flex:none}
#tyolajiLista .tiivisrivi{cursor:default}
#tyolajiLista .tiivisrivi .tiivislisa{white-space:normal}
/* Laajentuva tiivis lista puhelimessa (2.150.0): Työmaat ja Työajat.
   Nuoli kääntyy alas avoimella rivillä; avattu osa on nimi–arvo-pareina
   kuten kiinteistön lukurivit. */
.laajentuva .tiivisrivi{align-items:flex-start}
.laajentuva .valintakuori{padding-top:3px}
.laajentuva .tiivisnuoli{margin-top:6px;transition:transform .15s}
.laajentuva .tiivisnuoli.alas{transform:rotate(135deg) scale(.5)}
.laajentuva .tiivisrivi.valittu{background:var(--accent-soft)}
.laajentuva .tiivisrivi.auki{background:#f7f9f7}
.tiivisauki{margin-top:8px;display:grid;gap:6px;font-size:13px}
.tiivisauki>div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  border-top:1px solid var(--ura);padding-top:6px}
.tiivisauki>div>span{color:var(--muted)}
.tiivisauki b{font-weight:600;text-align:right;overflow-wrap:anywhere}
.tiivisauki a{color:var(--accent)}
.tiivis-kaikki{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);margin:0 0 6px 4px}
.tiivis-kaikki input{width:18px;height:18px;margin:0}
@media (prefers-reduced-motion:reduce){.laajentuva .tiivisnuoli{transition:none}}

/* ===================================================================
   AMMATTILAISPUOLEN NAPIT JA LUETTAVUUS (2.162.0, Aleksi 29.9.2026)

   body.amm on kaikilla ammattilaisen sivuilla (amm-*.html, ei kirjautumis-
   eikä kutsusivulla). Metsänomistajan puoli pysyy ennallaan.

   VÄRIT KERTOVAT MITÄ NAPISTA TAPAHTUU (Aleksin säännöt):
   - täysi vihreä = päätoiminto (Tallenna, Lähetä) – ennallaan
   - vihreä reuna + vaalea vihreä pohja = auki / päällä (aria-expanded,
     aria-pressed): "klikattu auki"
   - punainen reuna + teksti = Sulje, Peruuta (js/amm-napit.js merkitsee
     ne luokalla nappi-peru tekstin perusteella)
   - täysi punainen = poisto (danger, vaarallinen) – ennallaan
   - täysi oranssi, valkoinen teksti (2.162.1) = kaikki muut toiminnot
     (haamupainikkeet), myös Takaisin ja kuvakenapit:
     valikon tai lomakkeen avaavat ja toiminnon käynnistävät. Sävy on
     tummempi kuin kartan valintaoranssi, jotta napit eivät sekoitu
     valittuihin kuvioihin.
   Neutraalia nappia ei ole (Aleksin valinta). Yläpalkki on poikkeus: se on
   navigaatiota tummalla pohjalla, ja sen napit pysyvät palkin värisinä.

   LUETTAVUUS (Aleksi: "tekstit ja napit vähän hentoja"): nappien teksti
   600 ja reuna 1,5 px; harmaat tekstit tummemmiksi (--muted-vaalea);
   pienet tekstit +0,5–1 px; arvot lihavoitu tietoriveillä. */
body.amm{--muted-vaalea:#2c352f;--muted:rgba(255,255,255,.8);--nappi-kulma:999px}
body.amm button,body.amm .btn{font-weight:600;border-width:1.5px}
/* 2.162.1 (Aleksi 29.9.2026): toiminnot TÄYSI oranssi, valkoinen teksti –
   sivuilla, kartan paneelissa ja kuvakenapeissa. Sävy on sama tummalla ja
   vaalealla pohjalla (valkoinen teksti 5:1). Vihreäreunaisia on vain
   Aleksin nimeämät (nappi-vihrea): Kiinteistöryhmät, Sarakkeet ja Merkitse
   tarkistetuksi. Takaisin-napit ovat toimintoja (oranssi), eivät Sulje. */
body.amm button.ghost,body.amm .btn.ghost{background:#b45309;color:#fff;border-color:#b45309}
body.amm button.nappi-vihrea,body.amm .btn.nappi-vihrea{
  background:var(--ghost-tausta);color:var(--accent);border-color:var(--accent)}
body.amm button[aria-expanded="true"],body.amm button[aria-pressed="true"],
body.amm .btn[aria-expanded="true"],body.amm .btn[aria-pressed="true"]{
  background:var(--auki-tausta);color:var(--auki-teksti);border-color:var(--auki-raja)}
body.amm button.nappi-peru,body.amm .btn.nappi-peru{
  background:var(--ghost-tausta);color:var(--peru);border-color:var(--peru)}
body.amm button.danger,body.amm .btn.danger{background:var(--err);border-color:var(--err);color:#fff}
/* Roskakorit täysi punainen (Aleksi 2.162.1). */
body.amm button.jalkiroska{background:var(--err);color:#fff;border-radius:6px}
body.amm button.jalkiroska:hover{background:#8a2f22;color:#fff}
body.amm .top button.ghost,body.amm .top .btn.ghost,
body.amm .top button.nappi-peru,body.amm .top .btn.nappi-peru{
  background:var(--ghost-tausta);color:var(--ghost-teksti);border-color:var(--ghost-raja)}
/* Kartan napit (+, − ja omat): tumma laatta kuten ennen, oranssi reuna;
   päällä oleva vihreä. */
body.amm .leaflet-bar a.kartta-nappi,body.amm .leaflet-touch .leaflet-control-zoom.leaflet-bar a,
body.amm .leaflet-control-zoom.leaflet-bar a{border:2px solid #e8892e}
body.amm .leaflet-bar a.kartta-nappi.on{border-color:#9cc7a4}
/* Luettavuus */
body.amm table{font-size:14px}
body.amm th{font-size:12.5px}
body.amm label{font-size:13.5px}
body.amm .small:not(button):not(.btn){font-size:13px}
body.amm table.kv td:last-child{font-weight:600}

/* NAPPIUUDISTUS (2.164.0, Aleksi 29.9.2026 – päätökset MUISTIOssa).
   Päädyt täysin pyöreät (--nappi-kulma yllä: vain napit, joilla ei ole omaa
   kulmaa – kentät, rivit ja koealan askelnapit pitävät omansa). Väkäset
   isommat ja täydellä värillä. Kuvakenapit pyöreät 32 px reunalla.
   Tekstilinkit 13,5 px. */
body.amm .vakanen{width:9px;height:9px;border-width:2.5px;opacity:1}
body.amm button.kuvakenappi,body.amm .btn.kuvakenappi{width:32px;height:32px;min-width:32px;min-height:0;padding:0;
  border-radius:50%;background:var(--ghost-tausta);color:var(--toiminto);border-color:var(--toiminto);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
body.amm button.kuvakenappi.roska{color:var(--peru);border-color:var(--peru)}
body.amm button.kuvakenappi svg{display:block}
body.amm button.kuvakenappi:disabled{opacity:.35}
/* Kiinteistöluettelon karttanappi pysyy täytenä oranssina (Aleksi), mutta
   saman kokoisena pyöreänä kuin muut kuvakenapit. */
body.amm .kiintlista td.karttasolu .karttanappi,body.amm .karttanappi{width:32px;height:32px;border-radius:50%;padding:0}
/* Kuvake isommaksi ja vahvemmaksi (Aleksi 30.9.2026: "kuvake niin pienellä
   ettei siitä saa selvää", 2.166.0). Nappi pysyy 32 px:n ympyränä. */
body.amm .karttanappi svg{width:21px;height:21px;min-width:21px;flex:none;stroke-width:2.2}
body.amm .tekstilinkki,body.amm .linkkinappi{font-size:13.5px}
body.amm button.tekstilinkki{height:auto;min-height:0;padding:0;border:0;background:none;color:var(--accent);
  text-decoration:underline;font-weight:600;border-radius:0}
/* Takaisin-napit kaikkialla täysi oranssi (myös kartan palkissa ja
   puhelimen valikossa, jotka ovat muuten palkin värisiä). */
body.amm .top a.btn.paluu,body.amm .top>a.paluu{background:#b45309;border-color:#b45309;color:#fff;border-radius:999px}


/* TOIMENPITEEN LISÄYS (2.166.0) – js/toimenpidelisays.js. Ikkuna on
   tavallista leveämpi, koska ketjussa on useita rivejä. */
.ikkuna:has(.tpl-vaihtoehdot){max-width:560px;max-height:calc(100vh - 32px);overflow-y:auto}
.tpl-vaihtoehdot{display:flex;flex-direction:column;gap:6px;margin:8px 0 10px}
.tpl-vaihtoehto{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;cursor:pointer;line-height:1.45}
.tpl-vaihtoehto input{margin-top:3px}
.tpl-vaihtoehto:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.tpl-vaihtoehto.estetty{opacity:.6;cursor:not-allowed}
.rivimerkki.estetty{background:#fde8e6;color:#8a1f11}
.tpl-rivit{display:flex;flex-direction:column;gap:8px}
.tpl-rivi{border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.tpl-rivi-ots{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tpl-rivi-ots select{flex:1;min-width:0}
.tpl-kentat{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tpl-kentta{display:flex;flex-direction:column;gap:2px;min-width:0}
.tpl-kentat .tpl-kentta input{width:110px}
.tpl-info{margin-top:6px}
.tpl-info input{width:100%}
.tpl-puutavara{margin-top:4px}
.tpl-rajoitus,.tpl-vahva{margin:0 0 8px}
.tpl-muut{margin:0 0 8px}

/* Puhelimen ikkunoiden alanapit 44 px (nappiohje kohta 6, Aleksi
   30.9.2026: kaikki ammattilaisen ikkunat, 2.166.0). */
@media (max-width:760px){
  body.amm .ikkuna .napit button{height:44px;min-height:44px}
}

/* Lisää toimenpide -nappi (2.167.0): kuvake ja teksti rinnakkain kaikissa
   paikoissa (kuviosivu, kartan kuviotiedot). Kuvake napin tekstin värinen. */
button.toimenpidenappi{display:inline-flex;align-items:center;gap:6px}
button.toimenpidenappi svg{width:17px;height:17px;flex:none;color:inherit}
/* Laskettu kenttä välähtää (2.169.0, kuviosivun runkoluku ↔ ppa). */
@keyframes laskettuValahdys{from{background:var(--accent-soft,#e4ece5)}to{background:transparent}}
input.laskettu{animation:laskettuValahdys 1.2s ease-out}
@media (prefers-reduced-motion:reduce){input.laskettu{animation:none}}

/* ELINYMPÄRISTÖHUOMAUTUS (2.170.0, js/elinymparistot.js). Sama laatikko
   kuviosivulla, kartan arkissa ja lisäysikkunassa. 10 § punaisella
   reunalla, muu arvokas keltaisella. */
.ey-huomautus{border:1px solid #e0b400;border-left:5px solid #e0b400;background:#fff8dc;color:#2b2400;
  border-radius:10px;padding:10px 12px;margin:10px 0;font-size:14px;line-height:1.4;text-align:left}
.ey-huomautus.ey-10{border-color:#c0392b;background:#fdecea;color:#3b0d08}
.ey-huomautus ul{margin:6px 0 6px 0;padding:0;list-style:none}
.ey-huomautus li{display:flex;gap:6px;align-items:flex-start;margin:3px 0}
.ey-huomautus small{opacity:.8}
.ey-huomautus .ey-ohje{font-size:13px;margin:4px 0 8px}
.ey-huomautus .ey-kartta{margin:2px 0 8px;display:inline-flex}
.ey-huomautus .ey-kuittaus{display:flex;gap:8px;align-items:flex-start;font-weight:700;padding-top:8px;
  border-top:1px solid rgba(0,0,0,.15);cursor:pointer}
.ey-huomautus .ey-kuittaus input{width:22px;height:22px;flex:none;margin:0}
.ey-tarkistamatta{margin:6px 0}
.rivimerkki.ey-merkki{background:#fff3bf;color:#5c4400;border:1px solid #e0b400;white-space:nowrap}
.rivimerkki.ey-merkki.ey-m10{background:#fdecea;color:#8e1b10;border-color:#c0392b}
.ey-tp{font-size:12px;font-weight:600;white-space:nowrap}
.ey-tp.ey-ok{color:#1d6b30}
.ey-tp.ey-avoin{color:#8e1b10}
.ey-tp.ey-odottaa{color:#6b5a00}
.toimi-ey{margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.jaksot-otsikko .ey-merkki{margin-left:6px}

/* PUUTAVARALAJITAULUKKO (2.171.0, js/puutavarataulukko.js): kertymäarvion
   alla, sama lisäysikkunassa ja kartan lomakkeessa. Neljä saraketta:
   nimi, m³/ha (muokattava), m³ kuviolta, nollaus. */
.pt-taulukko{margin-top:8px;border:1px solid var(--line,#d5dbd5);border-radius:10px;overflow:hidden;text-align:left}
.pt-otsikot,.pt-rivi{display:grid;grid-template-columns:minmax(0,1fr) 86px 78px 40px;gap:8px;align-items:center;padding:6px 10px}
.pt-otsikot{font-size:11px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;color:#5b665d;background:#f1f4f1}
.pt-otsikot span:nth-child(2),.pt-otsikot span:nth-child(3),.pt-kuviolta{text-align:right}
.pt-rivi{border-top:1px solid #e6eae6;font-size:14px}
.pt-rivi.pt-eka{border-top:1px solid #c9d1c9}
.pt-nimi{min-width:0;font-weight:600}
.pt-nimi small{display:block;font-weight:400;font-size:12px;color:#5b665d}
.pt-rivi input[type=number]{width:100%;height:38px;font-size:16px;text-align:right;padding:0 8px;margin:0}
.pt-kuviolta{font-variant-numeric:tabular-nums;color:#3d473f}
.pt-rivi.pt-nolla .pt-n,.pt-rivi.pt-nolla .pt-kuviolta{color:#8a938b;text-decoration:line-through}
/* X-nappi (2.173.0): punainen ääriviiva kuten muissa poisto- ja
   sulkunapeissa; kuvake keskitetään ruudukolla, ei tekstin rivikorkeudella. */
.pt-rivi button.pt-nollaa,body.amm .pt-rivi button.pt-nollaa{width:36px;min-width:0;height:36px;padding:0;margin:0;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--peru,#a12b1c);border:1.5px solid var(--peru,#a12b1c);cursor:pointer;line-height:0}
.pt-rivi button.pt-nollaa svg{display:block}
.pt-rivi button.pt-nollaa:hover{background:#fdecea}
/* Nuolinäppäimet pois toimenpiteiden lisäyksen lukukentistä (2.173.0,
   Aleksi 5.10.2026). Numeronäppäimistö puhelimessa säilyy (inputmode). */
.tpl-rivit input[type=number],.tpa-arkki input[type=number],.pt-taulukko input[type=number],.ml-alue input[type=number]{
  -moz-appearance:textfield;appearance:textfield}
.tpl-rivit input[type=number]::-webkit-outer-spin-button,.tpl-rivit input[type=number]::-webkit-inner-spin-button,
.tpa-arkki input[type=number]::-webkit-outer-spin-button,.tpa-arkki input[type=number]::-webkit-inner-spin-button,
.pt-taulukko input[type=number]::-webkit-outer-spin-button,.pt-taulukko input[type=number]::-webkit-inner-spin-button,
.ml-alue input[type=number]::-webkit-outer-spin-button,.ml-alue input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}

/* USEAN PUULAJIN UUDISTAMINEN (2.172.0, js/toimenpidelisays.js): puulaji,
   osuus prosentteina, hehtaarit ja poisto samalla rivillä. */
.ml-alue{margin-top:8px;text-align:left}
.ml-rivi{display:grid;grid-template-columns:minmax(0,1fr) 92px 62px 36px;gap:8px;align-items:center;margin-bottom:6px}
.ml-rivi select{width:100%;min-width:0;margin:0}
/* Kapealla ruudulla puulajin valinta omalle rivilleen, jotta nimi mahtuu. */
@media (max-width:640px){
  .ml-rivi.ml-lisa select{grid-column:1/-1}
  .ml-rivi.ml-lisa .ml-osuus{grid-column:2}
}
.ml-nimi{font-weight:600;min-width:0}
.ml-osuus{display:flex;align-items:center;gap:4px;margin:0}
.ml-osuus input[type=number]{width:100%;height:38px;font-size:16px;text-align:right;padding:0 6px;margin:0}
.ml-ha{font-size:13px;color:#3d473f;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ml-summa{font-size:13px;color:#3d473f;margin:2px 0 8px}
.ml-summa.virhe{color:#a12b1c;font-weight:600}
.tp-osuus{font-weight:400;color:#3d473f;white-space:nowrap}

/* Toimenpiteen poisto "Merkitse tehdyksi" -napin vieressä (2.173.0). */
.tp-toimet{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
button.kuvakenappi.roska.tp-poista,button.kuvakenappi.roska.jp-roska{width:32px;height:32px;min-width:32px;min-height:0;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex:none;background:transparent;color:var(--peru,#b3261e);border:1.5px solid var(--peru,#b3261e)}

/* PEFC-tarkistuksen tulos kiinteistön perustiedoissa (2.173.0). */
.rivimerkki.pefc-on{background:#e3f0e4;color:#1f5a28;border-color:#9cc7a2;margin-left:0}
.rivimerkki.pefc-ei{background:#f1efea;color:#6a655c;border-color:#cfc9bd;margin-left:0}

/* Loogisuustarkistuksen löydökset (2.174.0, js/loogisuus.js). */
.lg-lista{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.lg-rivi{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;border:1px solid var(--line,#ddd);background:#fff;flex-wrap:wrap}
.lg-taso{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;background:#8a6d1a}
.lg-v{border-color:#e3b5ae;background:#fbf1ef}
.lg-v .lg-taso{background:var(--err,#a63a2a)}
.lg-h{border-color:#e6d9ad;background:#fbf8ec}
.lg-teksti{flex:1 1 240px;min-width:0;font-size:14px;line-height:1.4}
.lg-teksti small{color:var(--muted,#777);margin-left:4px}
.lg-korjaa{flex:none}
.lg-otsikko{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.lg-otsikko .lg-sulje{margin-left:auto}
.lg-kuvio{margin-top:12px}
#loogisuusTulos{border-top:1px solid var(--line,#ddd);padding-bottom:4px}

/* PUHELIMEN KORJAUKSET (2.177.1, Aleksin kuvat 6.10.2026) */
@media (max-width:760px){
  /* Toimenpidekortin puutavaralajit menivät kortin reunan yli: rivit saavat
     rivittyä, luku pysyy yhtenä palana. */
  .kiintlista .puutavarat{flex:1 1 0;min-width:0;text-align:right;gap:4px}
  .kiintlista .puutavara{white-space:normal;overflow-wrap:anywhere}
  .kiintlista .puutavara b{white-space:nowrap}
  /* Puustolomakkeen Yhteensä-laatikko: tfoot jäi taulukon alaosaksi ja
     kutistui sisältönsä levyiseksi. Sama leveys kuin puulajikorteilla ja
     paksu reunus korostukseksi. */
  .kiintlista tfoot{display:block;width:100%}
  .kiintlista tr.yhteenveto{border:3px solid var(--accent);margin-bottom:10px}
  /* Kuviotiedot-osion neljä nappia eivät mahdu yhdelle riville: 2 + 2. */
  #kuviotiedot .toimet-tasa{flex-wrap:wrap}
  #kuviotiedot .toimet-tasa>button,#kuviotiedot .toimet-tasa>.btn{flex:1 1 40%}
}

/* ===================================================================
   RAPORTIT (2.178.0, amm-raportit.html)

   Aleksin hyväksymä luonnos 6.10.2026: tumma pohja, valkoiset kortit,
   osiot pillereinä, luvut taulukoina. Raportti ei saa näyttää
   perinteisen metsäsuunnitelman kopiolta – palvelun oma ilme.
   Kehitysluokkien värit tulevat kartan värityksestä (kartta/varit.js).
   =================================================================== */
.rap-otsake{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;color:#fff}
.rap-otsake h1{margin:2px 0 0;font-size:26px;font-weight:700;line-height:1.2}
.rap-ala{color:rgba(255,255,255,.8);font-size:14px;margin-top:3px}
.rap-paluu{display:inline-flex;align-items:center;margin-bottom:8px;text-decoration:none}
.rap-kansi{display:none}
.rap-suodattimet label.haku{flex:2 1 240px}
.rap-suodattimet label.haku input{width:100%}
.rap-suodattimet label{color:#2c352f}
#listaHuomio a{color:#26562e;font-weight:650}
.rap-napit{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rap-osiot{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
body.amm button.rap-osio{background:#fff;color:#2c352f;border-color:#fff;height:auto;min-height:34px;padding:6px 14px;font-size:13.5px}
body.amm button.rap-osio.on{background:#e4ece5;color:#26562e;border-color:#26562e}
.rap-kortti{color:#0f1410}
.rap-kortti>h2,.rap-vali{margin:0 0 14px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#2c352f;font-weight:700}
.rap-kortti h2.rap-vali{margin-top:22px}
.rap-luvut{display:grid;grid-template-columns:repeat(6,1fr)}
.rap-luvut .luku{padding:2px 16px;border-left:1px solid #d5d9d5;min-width:0}
.rap-luvut .luku:first-child{border-left:0;padding-left:0}
.rap-luvut .n{font-size:27px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.rap-luvut .y{font-size:14px;font-weight:600;color:#47514a}
.rap-luvut .t{font-size:12.5px;color:#47514a;margin-top:3px}
.rap-kaksi{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:16px}
.rap-kaksi>.card{margin:0;min-width:0}
.rap-palkki{display:flex;height:34px;border-radius:8px;overflow:hidden;margin:4px 0 14px;background:#eef1ee}
.rap-palkki i{display:block;height:100%}
/* YKSI TAULUKKOMALLI (js/sivut/amm-raportit.js, taulu()). Isolla näytöllä
   kaikki sarakkeet; puhelimessa nimi + kaksi lukua, loput rivin alla. */
.rap-taulu{width:100%;border-collapse:collapse;font-size:14px}
.rap-taulu th{text-align:left;font-size:12px;color:#3d463f;padding:6px 8px;border-bottom:1.5px solid #7d877f;font-weight:700;line-height:1.2}
.rap-taulu td{padding:8px;border-bottom:1px solid #d9ddd9;font-variant-numeric:tabular-nums;color:#0f1410}
.rap-taulu .r{text-align:right;white-space:nowrap}
/* Kahden kortin rivillä sarakkeita on paljon: otsikko saa rivittyä ja
   täyte on pienempi, jotta taulukko ja sen viivat pysyvät kortin sisällä. */
.rap-kaksi .rap-taulu th.r{white-space:normal}
.rap-kaksi .rap-taulu th,.rap-kaksi .rap-taulu td{padding-left:5px;padding-right:5px}
.rap-kaksi .rap-taulu th:first-child,.rap-kaksi .rap-taulu td:first-child{padding-left:0}
.rap-taulu .pieni,.rap-taulu .v,.rap-taulu tr.lisa,.rap-taulu small.ala{display:none}
.rap-taulu td.k{white-space:nowrap}
.rap-taulu tr.sum td{font-weight:700;border-top:1.5px solid #7d877f;border-bottom:0}
.rap-taulu tr.kausi td{font-weight:700;background:#eef2ee;border-bottom:1px solid #c3cbc4}
.rap-taulu tr.kiire td.n{color:#a33a2a}
.rap-taulu tr.tyhja td{color:#3d463f;font-weight:600}
.rap-taulu .sis{display:inline-block;padding-left:18px}
.rap-taulu a{color:#26562e;font-weight:700}
.rap-taulu td small{color:#3d463f}
.rap-nimi{display:flex;align-items:flex-start;gap:8px}
.rap-pallo{display:inline-block;flex:none;width:11px;height:11px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.rap-nimi .rap-pallo{margin:4px 0 0}
.rap-ura{background:#f0f2f0;border-radius:5px;height:16px;display:flex;overflow:hidden;min-width:60px}
.rap-ura i{display:block;height:100%}
.rap-palkit td.r:nth-child(2){width:50%}
.rap-palkit td.r:nth-child(3){color:#3d463f;width:52px}
.rap-palkit td.r:nth-child(4){font-weight:600}
.rap-selite{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:#3d463f;margin-top:10px}
.rap-lahde{font-size:13px;color:#3d463f;margin-top:12px;line-height:1.5}
.rap-huom{color:rgba(255,255,255,.8);font-size:13px;margin:8px 0 16px}
/* Kuviokirja */
.rap-kuvio{display:grid;grid-template-columns:74px 1fr;border:1px solid #d5d9d5;border-radius:10px;margin-bottom:8px;overflow:hidden;break-inside:avoid}
.rap-kuvio .nro{background:#e4ece5;padding:10px 12px}
.rap-kuvio .nro a{color:#26562e;font-weight:700;font-size:18px;text-decoration:none}
.rap-kuvio .nro small{display:block;font-size:12px;font-weight:600;color:#47514a}
.rap-kuvio .sis{padding:9px 14px;min-width:0;overflow-x:auto}
.rap-kuvio .per{font-size:13px;color:#47514a;margin-bottom:5px}
.rap-kuvio .rap-taulu{font-size:13px}
.rap-kuvio .rap-taulu td,.rap-kuvio .rap-taulu th{padding:3px 6px}
.rap-kuvio .lisa{font-size:12.5px;color:#47514a;margin-top:6px}
.rap-tp{display:inline-block;background:#fdf0e3;color:#8a4207;border-radius:6px;padding:2px 8px;font-size:12.5px;font-weight:600;margin:6px 6px 0 0}
.rap-tp.kiire{background:#fbe6e2;color:#a33a2a}
/* Luettelo, lomake ja hinnasto */
a.rap-linkki{color:inherit;text-decoration:none}
/* Otsikko alkaa tilan nimellä ja sen on näyttävä kokonaan: rivittyy, ei katkea. */
.rap-linkki .tiivisnimi{display:block}
.rap-linkki .tiivisnimi b{white-space:normal;overflow:visible;text-overflow:clip;display:block}
#luettelo .toimet-tasa>button{flex:0 0 auto;min-width:auto}
.rap-lomake{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:8px}
.rap-lomake label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:#2c352f}
.rap-lomake label.leveä{grid-column:1/-1}
.rap-valinta{max-height:420px;overflow-y:auto;border:1px solid #d5d9d5;border-radius:10px;margin-top:8px}
.rap-kiinteisto{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #e3e6e3;cursor:pointer;color:#0f1410}
.rap-kiinteisto:first-child{border-top:0}
.rap-kiinteisto:hover{background:#f1f4f1}
.rap-kiinteisto input{flex:none;width:18px;height:18px;margin:0}
.rap-kiinteisto .n{flex:1;min-width:0}
.rap-kiinteisto .n small{display:block;font-size:12.5px;color:#47514a}
.rap-kiinteisto .l{font-size:12.5px;color:#47514a;white-space:nowrap}
.rap-kiinteisto.tyhja .n b{font-weight:500}
.rap-hinnasto input{width:96px;text-align:right;min-height:34px;height:34px}
.rap-hinnasto td{padding:5px 8px}
.rap-tulosteotsikko{display:none}
/* Vain ruudulla: A4-tuloste on selaimelle kapea näyttö, ja ilman tätä
   rajausta PDF sai puhelimen asettelun (2.179.0). */
@media screen and (max-width:860px){
  .rap-luvut{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .rap-luvut .luku{padding:0 10px 0 0;border-left:0}
  .rap-luvut .n{font-size:22px}
  .rap-kaksi{grid-template-columns:1fr}
  .rap-otsake h1{font-size:21px}
  .rap-lomake{grid-template-columns:1fr}
  .rap-kuvio{grid-template-columns:58px 1fr}
  .rap-kiinteisto .l{display:none}
  .rap-napit{width:100%}
  .rap-napit>button:not(.kuvakenappi){flex:1 1 0;min-width:0;padding:0 8px}
}
/* PUHELIN (Aleksi 7.10.2026): jokainen taulukko samalla rivimallilla –
   nimi, kaksi lukusaraketta samoilla leveyksillä ja avausväkänen. Muut
   sarakkeet aukeavat rivin alle nimi–arvo-pareina. Ei sivuvieritystä,
   sanat eivät katkea. Tulosteessa käytetään aina ison näytön taulukkoa. */
@media screen and (max-width:700px){
  .rap-kortti{padding:14px 12px 12px}
  .rap-kortti>h2,.rap-kortti h2.rap-vali{font-size:15px;letter-spacing:0;text-transform:none;color:#0f1410;margin-bottom:8px}
  .rap-taulu{table-layout:fixed;font-size:15px}
  .rap-taulu td{font-size:15px}
  .rap-taulu th{text-transform:none;letter-spacing:0;font-size:12px}
  .rap-taulu .x,.rap-taulu .iso{display:none}
  .rap-taulu .pieni{display:inline}
  .rap-taulu th.v,.rap-taulu td.v{display:table-cell;width:16px;padding:0;text-align:right}
  .rap-taulu th.r{width:70px}
  .rap-taulu th.r:nth-last-child(2){width:84px}
  /* Yksikkö summarivillä pienempänä, jotta luku mahtuu sarakkeeseensa. */
  .rap-taulu .yks{font-size:11.5px;font-weight:600}
  .rap-taulu th.k{width:40px}
  .rap-taulu th,.rap-taulu td{padding-left:0;padding-right:6px}
  .rap-taulu td{height:42px;padding-top:7px;padding-bottom:7px;line-height:1.3;overflow-wrap:normal;word-break:normal}
  .rap-taulu td.r:nth-last-child(2){font-weight:600}
  .rap-taulu small.ala{display:block;font-size:13px;color:#3d463f;margin-top:1px;font-weight:400}
  .rap-taulu .sis{padding-left:14px}
  .rap-taulu tr.kausi td:first-child,.rap-taulu tr.auki td:first-child,.rap-taulu tr.lisa td{padding-left:8px}
  .rap-taulu tr.kausi .sis{padding-left:0}
  .rap-taulu tr.avattava{cursor:pointer}
  .rap-taulu td.v i{display:inline-block;width:7px;height:7px;border-right:1.5px solid #6b746d;border-bottom:1.5px solid #6b746d;transform:rotate(45deg);margin:0 3px 3px 0}
  .rap-taulu tr.auki td.v i{transform:rotate(225deg);margin-bottom:-2px}
  .rap-taulu tr.auki td{background:#f4f6f4;border-bottom:0}
  .rap-taulu tr.auki+tr.lisa{display:table-row}
  .rap-taulu tr.lisa td{background:#f4f6f4;height:auto;padding:0 22px 10px 22px}
  .rap-taulu .parit{display:grid;grid-template-columns:1fr auto;gap:5px 10px;font-size:14px}
  .rap-taulu .parit span{color:#3d463f}
  .rap-taulu .parit b{text-align:right;font-weight:600}
  .rap-palkit td.r:nth-child(2){width:auto}
  .rap-kuvio{display:block}
  .rap-kuvio .nro{display:flex;align-items:baseline;gap:10px;background:none;padding:10px 12px 0}
  .rap-kuvio .nro a{background:#e4ece5;border-radius:6px;padding:1px 9px}
  .rap-kuvio .nro small{font-size:15px;font-weight:700;color:#0f1410}
  .rap-kuvio .sis{padding:6px 12px 12px;overflow:visible}
  .rap-kuvio .per{font-size:13.5px}
  .rap-kuvio .rap-taulu{font-size:15px}
  .rap-kuvio .rap-taulu td,.rap-kuvio .rap-taulu th{padding:7px 6px 7px 0}
  .rap-tp{font-size:13.5px;padding:4px 9px}
  .rap-osio{min-height:36px}
}
/* TULOSTUS = PDF (2.179.0, Aleksi 7.10.2026: "viimeistelty PDF-tulostusasu")

   Ruutunäkymästä tulostetaan oma A4-asu: kansisivu, sen jälkeen osiot
   peräkkäin ison näytön taulukoilla. Sivu vaihtuu vain kuviokirjan alussa;
   muuten sisältö jatkuu, mutta kortti, taulukon rivi tai kuvio ei katkea
   kesken ja otsikko ei jää sivun viimeiseksi riviksi. Sivunumero ja
   suunnitelman nimi tulevat sivun alareunaan (@page). Selaimen omaa ylä- ja
   alatunnistetta ei voi poistaa koodista – se otetaan pois tulostusikkunan
   asetuksesta, ja sivu kertoo sen käyttäjälle. */
@page{size:A4;margin:16mm 14mm 18mm;
  @bottom-right{content:counter(page) " / " counter(pages);font:9pt Arial,sans-serif;color:#47514a}
  @bottom-left{content:"FORST";font:700 8pt Arial,sans-serif;letter-spacing:.3em;color:#47514a}}
@page :first{@bottom-right{content:""}@bottom-left{content:""}}
@media print{
  body.raporttisivu{background:#fff !important;color:#0f1410;font-size:10pt}
  body.raporttisivu #top,body.raporttisivu #yllapitoPalkki,body.raporttisivu #alatunniste,body.raporttisivu #msg,
  body.raporttisivu .rap-napit,body.raporttisivu .rap-osiot,body.raporttisivu .rap-paluu,body.raporttisivu .rap-otsake{display:none !important}
  body.raporttisivu .wrap{max-width:none;padding:0;margin:0}
  body.raporttisivu *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.raporttisivu a{color:inherit !important;text-decoration:none}
  /* Kansi */
  body.raporttisivu .rap-kansi{display:flex;flex-direction:column;height:255mm;break-after:page;color:#0f1410}
  .rap-kansi .org{font-size:11pt;font-weight:700;letter-spacing:.04em;color:#26562e;border-bottom:2pt solid #26562e;padding-bottom:6pt}
  .rap-kansi .paa{margin-top:52mm}
  .rap-kansi .laji{font-size:12pt;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#47514a}
  .rap-kansi h1{font-size:34pt;line-height:1.1;margin:6pt 0 4pt;font-weight:700}
  .rap-kansi .vuodet{font-size:20pt;font-weight:600;color:#26562e}
  .rap-kansi table{width:100%;border-collapse:collapse;margin-top:16mm;font-size:10.5pt}
  .rap-kansi th{text-align:left;font-size:8pt;letter-spacing:.08em;text-transform:uppercase;color:#47514a;border-bottom:1pt solid #7d877f;padding:4pt 6pt 4pt 0}
  .rap-kansi td{padding:5pt 6pt 5pt 0;border-bottom:.5pt solid #d9ddd9}
  .rap-kansi .r{text-align:right}
  .rap-kansi tr.sum td{font-weight:700;border-bottom:0;border-top:1pt solid #7d877f}
  .rap-kansi .luvut{display:grid;grid-template-columns:repeat(4,1fr);gap:8pt;margin-top:12mm}
  .rap-kansi .luvut div{border-left:2pt solid #26562e;padding-left:8pt}
  .rap-kansi .luvut b{display:block;font-size:17pt}
  .rap-kansi .luvut span{font-size:8.5pt;color:#47514a}
  .rap-kansi .tiedot{margin-top:auto;display:grid;grid-template-columns:auto 1fr;gap:4pt 14pt;font-size:10.5pt}
  .rap-kansi .tiedot span{color:#47514a}
  /* Sisältö */
  body.raporttisivu .card{border:0;border-radius:0;padding:0;margin:0 0 9mm;background:none;break-inside:avoid}
  body.raporttisivu .rap-kirja{break-inside:auto}
  body.raporttisivu .rap-kortti>h2,body.raporttisivu .rap-kortti h2.rap-vali{font-size:8.5pt;letter-spacing:.12em;margin:0 0 5pt;color:#26562e;break-after:avoid}
  body.raporttisivu .rap-kortti h2.rap-vali{margin-top:8mm}
  body.raporttisivu .rap-tulosteotsikko{display:block;font-size:16pt;margin:0 0 6mm;padding-bottom:4pt;border-bottom:2pt solid #26562e;color:#0f1410;break-after:avoid}
  body.raporttisivu .rap-osa{margin-top:10mm}
  body.raporttisivu .rap-osa:first-of-type{margin-top:0}
  body.raporttisivu .rap-osa[data-osio="kirja"],body.raporttisivu .rap-osa[data-osio="toimet"]{break-before:page;margin-top:0}
  body.raporttisivu .rap-kaksi{display:block}
  body.raporttisivu .rap-luvut{grid-template-columns:repeat(6,1fr)}
  body.raporttisivu .rap-luvut .n{font-size:15pt}
  body.raporttisivu .rap-luvut .luku{padding:0 8pt}
  body.raporttisivu .rap-taulu{font-size:9pt}
  body.raporttisivu .rap-taulu th{font-size:7.5pt;padding:3pt 5pt}
  body.raporttisivu .rap-taulu td{padding:3.5pt 5pt}
  body.raporttisivu .rap-taulu thead{display:table-header-group}
  body.raporttisivu .rap-taulu tr{break-inside:avoid}
  body.raporttisivu .rap-palkki{height:14pt}
  body.raporttisivu .rap-ura{height:9pt}
  body.raporttisivu .rap-lahde,body.raporttisivu .rap-selite{font-size:8pt;margin-top:5pt}
  body.raporttisivu .rap-huom{color:#47514a;font-size:8pt}
  body.raporttisivu .rap-kuvio{break-inside:avoid;margin-bottom:5pt;grid-template-columns:46pt 1fr}
  body.raporttisivu .rap-kuvio .nro{padding:5pt 7pt}
  body.raporttisivu .rap-kuvio .nro a{font-size:12pt}
  body.raporttisivu .rap-kuvio .sis{overflow:visible;padding:5pt 8pt}
  body.raporttisivu .rap-kuvio .per{font-size:8pt;margin-bottom:3pt}
  body.raporttisivu .rap-kuvio .rap-taulu{font-size:8pt}
  body.raporttisivu .rap-kuvio .rap-taulu td,body.raporttisivu .rap-kuvio .rap-taulu th{padding:1.5pt 4pt}
  body.raporttisivu .rap-tp{font-size:8pt;padding:1pt 5pt;margin-top:3pt}
  body.raporttisivu .rap-kuvio .lisa{font-size:8pt}
}

/* ===================================================================
   KATSELIJATUNNUKSET (2.180.0)

   SININEN = NÄKYY ASIAKKAALLE. Väriä #0f5f7a ei käytetä palvelussa
   muualla, jotta jaettu tila erottuu heti (Aleksi 7.10.2026: merkintä,
   "joka ei jää huomaamatta"). Sama väri kiinteistösivun palkissa,
   kiinteistölistan merkissä ja asiakaskortin tilarivillä.
   =================================================================== */
.jakopalkki{background:#0f5f7a;color:#fff;border-radius:10px;padding:11px 14px;display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.jakopalkki svg{flex:none}
.jakopalkki b{font-size:15px;display:block}
.jakopalkki small{display:block;color:rgba(255,255,255,.9);font-size:13px}
.jakopalkki .t{flex:1;min-width:180px}
body.amm .jakopalkki a.btn{background:#fff;color:#0f5f7a;border-color:#fff}
.jakomerkki{margin-left:6px;display:inline-flex;align-items:center;gap:5px;background:#0f5f7a;color:#fff;border-radius:6px;padding:2px 8px;font-size:12px;font-weight:700;white-space:nowrap;vertical-align:1px}
.kats-rivi{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #dfe3df;flex-wrap:wrap}
.kats-rivi:first-child{border-top:0}
.kats-rivi .n{flex:1;min-width:160px}
.kats-rivi small{display:block;color:#47514a;font-size:12.5px}
.kats-rivi input[type=checkbox]{width:18px;height:18px;flex:none;margin:0}
.kats-tila{font-size:12px;font-weight:700;border-radius:6px;padding:2px 8px;white-space:nowrap}
.kats-tila.active,.kats-tila.valmis{background:#e4ece5;color:#26562e}
.kats-tila.odottaa,.kats-tila.kesken{background:#fdf0e3;color:#8a4207}
.kats-tila.suljettu{background:#fbe6e2;color:#a33a2a}
.kats-koodi{font-family:ui-monospace,Consolas,monospace;font-size:17px;font-weight:700;letter-spacing:.08em;background:#eef2ee;border-radius:8px;padding:4px 10px;color:#0f1410}
.kats-linkki{display:flex;gap:8px;align-items:center;background:#eef2ee;border-radius:8px;padding:8px 10px;margin-top:8px;flex-wrap:wrap}
.kats-linkki code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12.5px}
.kats-kutsu{display:flex;gap:8px;flex-wrap:wrap}
.kats-kutsu input{flex:1;min-width:200px}
/* Katselijan omat sivut */
body.katselija .vain-amm{display:none !important}
.kats-org{color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin:4px 0 8px;opacity:.9}
.kats-tila h2{margin:0;font-size:18px}
.kats-tila h2 a{color:inherit;text-decoration:none}
.kats-paa{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.kats-napit{display:flex;gap:8px;flex-wrap:wrap}
.kats-luvut{display:flex;gap:26px;margin-top:10px;flex-wrap:wrap}
.kats-luvut b{font-size:19px;display:block;font-variant-numeric:tabular-nums}
.kats-luvut span{font-size:12.5px;color:#47514a}
.kats-kuviot tr.avattava{cursor:pointer}
.kats-kuviot tr.avattava:hover td{background:#f4f6f4}
.kats-kuviot tr.kats-kuvio{display:none}
.kats-kuviot tr.kats-kuvio.auki{display:table-row}
.kats-kuviot tr.kats-kuvio td{padding:6px 0 12px;background:#f4f6f4;height:auto}
.kats-kuviot tr.kats-kuvio .rap-kuvio{margin:0 8px;background:#fff}
.kats-kuviot td.v,.kats-kuviot th.v{display:table-cell;width:18px;padding:0;text-align:right}
.kats-kuviot td.v i{display:inline-block;width:7px;height:7px;border-right:1.5px solid #6b746d;border-bottom:1.5px solid #6b746d;transform:rotate(45deg);margin:0 4px 3px 0}
.kats-kuviot tr.auki td.v i{transform:rotate(225deg);margin-bottom:-2px}
.rap-kuvio .nro .nrob{color:#26562e;font-weight:700;font-size:18px}
/* Katselijan kartta: yläpalkki, valintapalkki ja kartta täyttävät ruudun. */
body.kats-karttasivu{display:flex;flex-direction:column;height:100vh;height:100dvh;margin:0}
.kats-karttapalkki{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px 16px;background:#fff;border-bottom:1px solid #dfe3df}
.kats-karttapalkki label{display:flex;align-items:center;gap:6px;font-size:13px;color:#47514a;margin:0}
.kats-karttapalkki select{width:auto;min-width:0;padding:6px 8px}
.kats-kartta{flex:1;min-height:260px;background:#e8ece8}
.kats-selite{position:absolute;left:10px;bottom:22px;z-index:500;background:rgba(255,255,255,.94);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#0f1410;box-shadow:0 1px 5px rgba(0,0,0,.3);max-width:60vw}
.kats-selite span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.kats-selite i{width:13px;height:13px;border-radius:3px;border:1px solid rgba(0,0,0,.25);flex:none}
.kats-selite i.tyomaa{background:transparent;border:3px solid #0f1410}
.kats-numero{font-size:12px;font-weight:700;color:#0f1410;text-align:center;line-height:18px;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;background:none;border:0}
.kats-merkki{background:none;border:0}
.kats-ikkuna{font-size:13.5px;min-width:170px}
.kats-ikkuna>b{font-size:15px}
.kats-ikkuna .tiedot{margin:6px 0}
.kats-ikkuna .rivi{display:flex;justify-content:space-between;gap:14px;padding:2px 0}
.kats-ikkuna .rivi span{color:#47514a}
@media (max-width:700px){.kats-karttapalkki{padding:8px 12px}.kats-karttapalkki .spacer{display:none}}
.kats-rivi .jakomerkki{margin-left:0}
@media screen and (max-width:700px){.kats-kuviot tr.kats-kuvio td{padding:4px 0 10px}.kats-kuviot tr.kats-kuvio .rap-kuvio{margin:0}}
/* ETSI KARTALTA (2.182.0): koko ruudun kartta kiinteistölistan päällä. */
.lisaystavat{display:flex;flex-direction:column;gap:10px;margin-top:6px}
body.amm .lisaystavat button{padding:14px 16px;font-size:16px;text-align:center}
.kiintkartta{position:fixed;inset:0;z-index:3500;background:#fff;display:flex;flex-direction:column}
.kiintkartta-palkki{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px 14px;background:#2a352e;color:#fff}
.kiintkartta-palkki b{font-size:16px}
.kiintkartta-ohje{flex:1;min-width:180px;font-size:14px;color:rgba(255,255,255,.92)}
.kiintkartta-kartta{flex:1;min-height:200px;background:#e8ece8}
.kiintkartta.rajat .kiintkartta-kartta{cursor:pointer}
.kiintkartta.rajat .leaflet-grab{cursor:pointer}
body.kiintkartta-auki{overflow:hidden}

/* KUVION SIVUN TIIVISTYS (2.183.0, Aleksin kuvat 7.10.2026)
   1) Perustiedot: valikot ruudukkona, ei arvon toistoa valikon alla.
   2) Tarkistuksen korjausnappi rivittyy eikä mene laatikon reunan yli
      (sama nappi kuvion sivulla ja kiinteistön Kuviotietojen tarkistuksessa).
   3) Toimenpiteen puutavaralajit oikeana taulukkona. */
.perusruudukko{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 14px}
.perusruudukko label{margin:0;font-size:13px;font-weight:600;min-width:0}
.perusruudukko select{display:block;width:100%;min-width:0;margin-top:3px}
table.puutavarat{display:table;width:100%;min-width:230px;border-collapse:collapse;font-size:13px;
  font-variant-numeric:tabular-nums}
table.puutavarat th,table.puutavarat td{display:table-cell;width:auto;text-align:right;padding:3px 0 3px 10px;
  border:0;border-bottom:1px solid var(--line);white-space:nowrap;background:none}
table.puutavarat th{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
table.puutavarat th:first-child,table.puutavarat td:first-child{text-align:left;padding-left:0}
table.puutavarat td:first-child{white-space:normal}
table.puutavarat tr{cursor:default}
table.puutavarat tr.sum td{font-weight:700;border-bottom:0;border-top:1.5px solid #7d877f}
table.puutavarat td::before{content:none !important}
.tp-selite{margin-top:10px;font-size:13px}
.tp-selite summary{cursor:pointer;font-weight:600;color:var(--accent)}
.tp-selite p{margin:6px 0 0}
.lg-korjaa{flex:0 1 auto;max-width:100%;height:auto;min-height:var(--nappi-korkeus,34px);white-space:normal;
  text-align:center;line-height:1.25;padding-top:5px;padding-bottom:5px}
@media (max-width:860px){
  .perusruudukko{grid-template-columns:1fr 1fr}
  .perusruudukko label.koko{grid-column:1/-1}
  .kiintlista table.puutavarat{display:table;flex:none;text-align:left}
  .kiintlista table.puutavarat thead{display:table-header-group}
  .kiintlista table.puutavarat tbody{display:table-row-group;width:auto}
  .kiintlista table.puutavarat tr{display:table-row;width:auto;border:0;border-radius:0;background:none;
    padding:0;margin:0;box-shadow:none}
  .kiintlista table.puutavarat th,.kiintlista table.puutavarat td{display:table-cell;width:auto;
    padding:3px 0 3px 10px;border-bottom:1px solid var(--line)}
  .kiintlista table.puutavarat th:first-child,.kiintlista table.puutavarat td:first-child{padding-left:0}
  .kiintlista table.puutavarat tr.sum td{border-bottom:0}
  .kiintlista td.tp-puutavara{display:block}
  .kiintlista td.tp-puutavara::before{display:block;margin-bottom:2px}
  .lg-korjaa{flex:1 1 100%;border-radius:14px}
}
/* Nimisarake saa kaiken tilan, lukusarakkeet vain tarvitsemansa.
   table-layout:auto on pakollinen: puhelimessa .wrap table on fixed
   (rivi ~912), ja silloin lukusarakkeet kutistuivat nollaan ja luvut
   piirtyivät päällekkäin (Aleksin kuva 8.10.2026, 2.183.1). */
table.puutavarat,.wrap table.puutavarat{table-layout:auto}
table.puutavarat th:first-child,table.puutavarat td:first-child,
.kiintlista table.puutavarat th:first-child,.kiintlista table.puutavarat td:first-child{width:100%}

/* 2.184.0 (Aleksi 8.10.2026) */
/* Kuvion sivun ylärivi: paluunappi vasemmalla, pyöreä karttanappi oikealla
   (sama täysi oranssi ympyrä kuin kiinteistöluettelossa, paluunapin korkuinen). */
.kuvio-ylarivi{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
body.amm .kuvio-ylarivi .karttanappi{width:var(--nappi-korkeus,38px);height:var(--nappi-korkeus,38px);min-width:var(--nappi-korkeus,38px)}
/* Tarkistuksen viiva vain kun tuloksia on – ennen se oli kiinni Tarkista
   tiedot -napissa myös tyhjänä. Tulosten yläpuolelle rako. */
#loogisuusTulos:empty{display:none}
#loogisuusTulos{margin-top:12px;padding-top:2px}
/* Kartan kuviopaneelin elinympäristömerkit kuvauksineen, allekkain (2.184.0). */
.ey-kohteet{flex:1 1 100%;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.rivimerkki.ey-merkki.ey-kuvaus{white-space:normal;max-width:100%;line-height:1.35;text-align:left;margin:0}
.rivimerkki.ey-kuvaus b{font-weight:800;white-space:nowrap;margin-right:2px}
.rivimerkki.ey-merkki.ey-kuvaus{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600}

/* Ammattilaisen poiston ikkunat (2.185.0, js/jasenpoisto.js). */
button.kuvakenappi.roska.jp-roska svg{display:block}
.jp-otsikko{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px}
.jp-lista{margin:0 0 10px;padding-left:20px;line-height:1.5}
.jp-este{background:#fbf1ef;border:1px solid #e3b5ae;border-radius:10px;padding:10px 12px;line-height:1.45;margin-bottom:8px;color:var(--ink)}
.jp-este b{color:#8e1b10}

/* LEIMIKOT (2.186.0, js/leimikkonakyma.js): kartan välilehti, organisaation
   sivu ja ostajan jakolinkki. */
.lm-lista{font-size:14px}
.lm-rivi{display:grid;grid-template-columns:18px minmax(160px,2fr) 96px 64px 64px 92px minmax(90px,1fr) 86px;gap:10px;align-items:center;
  padding:10px 16px;border-bottom:1px solid var(--sisareuna,#e2e5e2);font-variant-numeric:tabular-nums;cursor:pointer;color:var(--ink)}
.lm-rivi:hover,.lm-rivi:focus-visible{background:var(--accent-soft);outline:none}
.lm-rivi.auki{background:#f4f8f4}
.lm-rivi .r{text-align:right}
.lm-rivi.lm-otsikot{cursor:default;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  padding-top:6px;padding-bottom:6px;border-bottom-color:var(--line)}
.lm-rivi.lm-otsikot:hover{background:none}
.lm-nimi{min-width:0}.lm-nimi b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lm-nimi small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.lm-nimi .rivimerkki{margin-left:2px;font-size:10.5px;padding:0 5px}
.lm-nuoli{color:var(--muted)}
.tila-pilleri{border-radius:99px;padding:2px 9px;font-size:12px;font-weight:700;display:inline-block;white-space:nowrap}
.tila-pilleri.lm-kaynnissa{background:#fff3e0;color:#7a4300;border:1px solid #e0a35a}
.tila-pilleri.lm-valmis{background:#e3f0e4;color:#1f5a28;border:1px solid #9cc7a2}
.lm-auki{padding:14px 16px 16px 44px;border-bottom:1px solid var(--line);background:#fbfcfb}
.lm-ruudut{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(240px,1fr);gap:14px}
.lm-laatikko{border:1px solid var(--sisareuna,#e2e5e2);border-radius:10px;padding:12px;background:#fff;min-width:0}
.lm-laatikko h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;color:#2c352f}
.lm-laatikko h4:not(:first-child){margin-top:14px}
.lm-taulu{overflow-x:auto}
table.lm-matriisi{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.lm-matriisi th{font-size:11px;color:var(--muted);text-align:right;padding:3px 0 3px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.lm-matriisi td{text-align:right;padding:3px 0 3px 10px;border-bottom:1px solid #eef0ee;white-space:nowrap}
.lm-matriisi th:first-child,.lm-matriisi td:first-child{text-align:left;padding-left:0}
.lm-matriisi tr.lm-ala td{color:var(--muted)}
.lm-matriisi tr.lm-summa td{font-weight:700;border-top:1.5px solid #7d877f;border-bottom:0}
.lm-huom{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45}
.lm-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13.5px}.lm-kv span{color:var(--muted)}
.lm-muistiinpano{font-size:13.5px;border:1px dashed #b9c0ba;border-radius:8px;padding:8px;white-space:pre-wrap}
.lm-lomake{display:flex;flex-direction:column;gap:8px}
.lm-kentta{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted);font-weight:600;margin:0}
.lm-kentta input,.lm-kentta select,.lm-kentta textarea{width:100%;font-weight:400;color:var(--ink)}
.lm-kaksi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lm-napit-oik{display:flex;justify-content:flex-end}
.lm-jaot{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lm-jaot li{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:13px}
.lm-jaot small{display:block;color:var(--muted);font-size:12px}
.lm-toimet{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.lm-toimet .lm-oikea{margin-left:auto;display:inline-flex;gap:8px;align-items:center}
body.amm .lm-toimet .lm-reuna{background:transparent;color:var(--toiminto,#b45309);border:1.5px solid var(--toiminto,#b45309)}
.lm-rastit{display:flex;flex-direction:column;gap:4px;margin:4px 0 8px}
.lm-otsikko-pieni{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:8px}
.lm-linkki{background:var(--accent-soft);border-radius:10px;padding:10px;font-size:13px;word-break:break-all;margin-top:10px}
svg.lm-kartta{width:100%;height:auto;background:#f4f6f2;border:1px solid var(--sisareuna,#e2e5e2);border-radius:10px}
svg.lm-kartta path{fill:rgba(224,120,0,.28);stroke:#b45309;stroke-width:1.4}
svg.lm-kartta text{font-size:12px;font-weight:700;fill:#2c352f;text-anchor:middle;dominant-baseline:middle}
svg.lm-kartta .lm-jana path{fill:none;stroke:#1b231e;stroke-width:2}
svg.lm-kartta .lm-jana text{font-size:11px;font-weight:600}
@media (max-width:760px){
  .lm-rivi{grid-template-columns:16px 1fr auto;row-gap:2px}
  .lm-rivi>span:nth-child(n+4){display:none}
  .lm-rivi.lm-otsikot{display:none}
  .lm-auki{padding-left:12px}
  .lm-ruudut{grid-template-columns:1fr}
}
/* Leimikon esite (2.186.0): PDF-tuloste ja ostajan sivu. */
.lm-esite{background:#fff;color:#0f1410;border-radius:12px;padding:22px 26px;max-width:900px;margin:0 auto}
.lm-esite h1{font-size:24px;margin:0 0 6px}
.lm-esite h2{font-size:15px;margin:22px 0 8px;letter-spacing:.02em}
.lm-esite header p{margin:2px 0}
.lm-esite-luvut{display:flex;gap:26px;flex-wrap:wrap;margin:16px 0}
.lm-esite-luvut b{display:block;font-size:22px;font-variant-numeric:tabular-nums}.lm-esite-luvut span{color:var(--muted-vaalea,#47514a);font-size:12.5px}
table.lm-esite-taulu{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.lm-esite-taulu th{text-align:left;font-size:11px;color:#47514a;border-bottom:1px solid #adb3ae;padding:4px 8px 4px 0}
.lm-esite-taulu td{border-bottom:1px solid #eef0ee;padding:4px 8px 4px 0}
.lm-esite footer{margin-top:22px;border-top:1px solid #d6dad6;padding-top:8px}
.lm-esite .muted{color:#47514a}
.lm-esite-napit{display:flex;justify-content:flex-end;max-width:900px;margin:0 auto 10px}
.lm-avaus{max-width:480px;margin:30px auto}
body.lm-ostaja .top{background:var(--bg)}
@media print{
  body.lm-tulostus #top,body.lm-tulostus #alatunniste,body.lm-ostaja .top,body.lm-ostaja #alatunniste,.lm-esite-napit,#msg{display:none !important}
  body.lm-tulostus,body.lm-ostaja{background:#fff !important}
  .lm-esite{padding:0;max-width:none;border-radius:0}
  .lm-esite h2{break-after:avoid}
  svg.lm-kartta{break-inside:avoid}
  .wrap{padding:0 !important;max-width:none !important}
}
.lm-matriisi th{text-transform:none;letter-spacing:0}
.lm-esite{--ink:#0f1410;--muted:#47514a;--line:#adb3ae;--sisareuna:#e2e5e2}
.lm-esite-taulu td{white-space:nowrap}.lm-esite-taulu td:nth-child(3){white-space:normal}
@media print{ .lm-esite .lm-taulu,.lm-esite table{break-inside:avoid} }
table.lm-esite-taulu{min-width:620px}
table.lm-matriisi{min-width:420px}
@media print{ table.lm-esite-taulu,table.lm-matriisi{min-width:0} }
@media (max-width:760px){ .lm-esite{padding:16px} .lm-esite-luvut{gap:16px} }
.lm-esite-taulu th{white-space:nowrap;text-transform:none;letter-spacing:0;font-size:11.5px}