/* FORST – ammattilaispuolen sisäänkäynti (2.140.0)

   MIKSI OMA TIEDOSTO

   Ammattilaispuoli on oma tuotteensa omalla nimellään ja omalla
   värimaailmallaan. Sen sisäänkäynti ei ole Metsäsuunnitelman
   kirjautumislaatikko toisella logolla vaan eri sivu: kahtia jaettu, tumma
   läpikotaisin, eikä siinä ole valkoista korttia lainkaan.

   Tiedosto koskee VAIN kahta sivua – amm-kirjaudu.html ja amm-kutsu.html.
   Ammattipuolen muut sivut ovat yhä tyyli.css:n varassa eikä niihin ole tässä
   versiossa koskettu. Jos ilme joskus laajenee, se laajenee tästä – ei niin,
   että nämä säännöt vuotavat tyyli.css:ään.

   TIEDOSTO LADATAAN tyyli.css:N JÄLKEEN ja se ylikirjoittaa siitä sen, mitä
   sisäänkäynti tarvitsee toisin: painikkeen, kentät ja kielivalitsimen.
   Kaikki säännöt on rajattu luokkaan .forst tai runkoon body.forst, jottei
   mikään voi osua muualle.

   ============================================================== VÄRIT

   Kuusi arvoa brändiaineistosta. Oranssia käytetään YHTEEN asiaan ruudulla
   kerrallaan – jos se toistuu, se lakkaa ohjaamasta. Tällä sivulla se on
   kirjautumispainike. Karttakuvion oranssi on ohut viiva 85 %:n
   läpinäkyvyydellä eikä täyttö, juuri siksi ettei se kilpaile painikkeen
   kanssa.

   Pohja on #0E1411 eikä palvelun #141B17. Ero on pieni mutta tarkoituksellinen:
   se on FORSTin oma pohja. */
body.forst{
  --forst-yo:#0A0E0C;
  --forst-maasto:#0E1411;
  --forst-paneeli:#141B17;
  --forst-viiva:#23302A;
  --forst-viiva-2:#2F3E36;
  --forst-muste:#E9EFEA;
  --forst-muste-2:#8A9A90;
  --forst-muste-3:#5D6C64;
  --forst-oranssi:#F2622B;
  --forst-oranssi-tumma:#170A04;

  margin:0;background:var(--forst-maasto);color:var(--forst-muste);
  min-height:100dvh;display:block}

/* ============================================================ RUNKO

   Kaksi palstaa: vasemmalla maasto, oikealla asia. Kartta ei ole koriste
   vaan se kertoo mistä palvelussa on kyse – ammattilainen tunnistaa
   korkeuskäyrät ja kuviorajan ennen kuin lukee riviäkään.

   Oikea palsta on kiinteän levyinen ja vasen joustaa: lomake on se, jonka
   mitta on sovittu (kenttä ei saa venyä yli 60 merkin luettavuusrajan),
   ja maasto on se, jolle jää mitä jää. */
.forst-runko{min-height:100dvh;display:grid;
  grid-template-columns:1fr minmax(380px,460px)}

/* --------------------------------------------------------- vasen: maasto */
.forst-maasto{position:relative;overflow:hidden;
  background:var(--forst-maasto) url(/kuvakkeet/forst-maasto.svg) center/cover no-repeat;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:46px 48px}
/* Kaihdin tekee kuvituksesta taustan. Ilman sitä korkeuskäyrät kulkevat
   otsikon läpi juuri siitä kohdasta, jossa ne ovat tiheimmillään. */
.forst-maasto::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(14,20,17,.92) 0%,rgba(14,20,17,.72) 34%,
    rgba(14,20,17,.30) 62%,rgba(14,20,17,.55) 100%)}
.forst-maasto>*{position:relative;z-index:1}

.forst-tunnus{display:block;width:172px;height:auto;color:var(--forst-muste)}
/* Rivin mitta on ch eikä pikseleitä: lause käännetään englanniksi, ja
   käännös on eri mittainen. 22ch pitää sen kolmella rivillä molemmilla
   kielillä – yksi rivi olisi liian leveä luettavaksi ja viisi hajottaisi
   lauseen palasiksi. */
.forst-lause{margin:22px 0 0;max-width:22ch;
  font-size:27px;line-height:1.26;font-weight:650;letter-spacing:-.015em}

/* Kolme kohtaa maaston alareunassa. Ne eivät ole myyntitekstiä vaan
   vastaus kysymykseen "mitä tämä osaa" – siksi ne ovat lyhyitä ja
   ladottu sarakkeiksi kuten taulukon otsikot. */
.forst-kohdat{display:flex;gap:34px;flex-wrap:wrap;margin-top:26px}
.forst-kohta{min-width:0}
.forst-kohta b{display:block;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--forst-muste-3)}
.forst-kohta span{display:block;margin-top:5px;font-size:14px;line-height:1.45;
  color:var(--forst-muste-2)}

/* Maastomerkintä. Vihreä piste ja versaali teksti: sama muoto kuin palvelun
   omissa tilamerkeissä, ei uusi merkkikieli. */
.forst-merkki{display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  padding:5px 12px;border-radius:999px;
  border:1px solid var(--forst-viiva-2);background:rgba(10,14,12,.5);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:var(--forst-muste-2)}
.forst-merkki i{width:7px;height:7px;border-radius:50%;background:#7FA98C;flex:none}

/* --------------------------------------------------------- oikea: lomake */
.forst-lomake{background:var(--forst-paneeli);
  border-left:1px solid var(--forst-viiva);
  display:flex;flex-direction:column;justify-content:center;
  padding:46px 44px;position:relative}
.forst-lomake .sisus{width:100%;max-width:360px;margin:0 auto}
.forst-lomake h1{margin:0 0 6px;font-size:21px;font-weight:650;
  letter-spacing:-.01em;color:var(--forst-muste)}
.forst-lomake .johdanto{margin:0 0 24px;font-size:14px;line-height:1.5;
  color:var(--forst-muste-2)}

/* Kielivalitsin lomakepuolen yläkulmaan. Alatunnistetta tällä sivulla ei
   ole (Aleksin päätös 22.9.2026) – tietosuojaseloste on kirjautumisen
   takana, ja ammattilainen on saanut tunnuksensa organisaatioltaan. */
.forst-kieli{position:absolute;top:18px;right:20px;z-index:2}
.forst-kieli select{color-scheme:dark;height:32px;padding:0 10px;
  border-radius:8px;border:1px solid var(--forst-viiva-2);
  background:rgba(255,255,255,.05);color:var(--forst-muste-2);
  font-size:13px;font-family:inherit;width:auto}

/* KENTÄN NIMI ON VERSAALI PIKKUOTSIKKO eikä tavallinen selite. Se on
   brändiaineiston oma tapa merkitä kenttä, ja se erottaa lomakkeen
   Metsäsuunnitelman lomakkeista ilman että mitään muuta tarvitsee muuttaa. */
.forst-kentta{margin-bottom:16px}
.forst-kentta label{display:block;margin:0 0 7px;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--forst-muste-3)}
.forst-kentta input{width:100%;box-sizing:border-box;height:48px;padding:0 14px;
  border:1px solid var(--forst-viiva-2);border-radius:10px;
  background:var(--forst-yo);color:var(--forst-muste);
  font-size:16px;font-family:inherit}
/* 16 px on se raja, jonka alle iOS zoomaa kenttään kohdistettaessa. Kentät
   ovat tässä koossa siksi eikä siksi että ne näyttäisivät isoilta. */
.forst-kentta input::placeholder{color:var(--forst-muste-3)}
.forst-kentta input:focus{outline:0;border-color:var(--forst-oranssi);
  box-shadow:0 0 0 1px var(--forst-oranssi)}

/* PAINIKE ON SIVUN AINOA ORANSSI ASIA. Korkeus 48 px: hansikas ei osu
   pienempään, ja tämä sivu avataan myös maastossa. */
.forst-nappi{width:100%;height:48px;margin-top:6px;
  border:1px solid var(--forst-oranssi);border-radius:10px;
  background:var(--forst-oranssi);color:var(--forst-oranssi-tumma);
  font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.forst-nappi:hover{filter:brightness(1.07)}
.forst-nappi:disabled{opacity:.45;cursor:default;filter:none}

/* Toissijainen painike: sama muoto, ei väriä. Kutsusivun "Kirjaudu sisään"
   valmis-tilassa on tällainen – siinä ei ole enää mitään kiirettä. */
.forst-nappi.hiljainen{background:transparent;color:var(--forst-muste);
  border-color:var(--forst-viiva-2);text-decoration:none}

/* Rivillä on vain paluulinkki. flex-end eikä space-between: tyhjä paikka
   vasemmalla näyttäisi siltä, että sieltä puuttuu jotain – ja ammattilaisella
   EI ole "unohtuiko salasana" -polkua, koska salasanan nollaa organisaation
   pääkäyttäjä. Se lukee lomakkeen alla omana lauseenaan. */
.forst-rivi{display:flex;justify-content:flex-end;gap:14px;flex-wrap:wrap;
  margin-top:14px;font-size:13.5px}
.forst-rivi a{color:var(--forst-muste-2);text-decoration:none}
.forst-rivi a:hover{color:var(--forst-muste);text-decoration:underline}

.forst-selite{margin:22px 0 0;padding-top:18px;
  border-top:1px solid var(--forst-viiva);
  font-size:13px;line-height:1.6;color:var(--forst-muste-3)}

/* VIESTI ON YHÄ .msg EIKÄ OMA LUOKKANSA.

   yhteinen.js:n viesti()-funktio kirjoittaa elementille className = 'msg on
   <laji>', eli se pyyhkii mitä tahansa muuta luokkaa. Oma luokka katoaisi
   ensimmäisen virheilmoituksen yhteydessä – eli juuri silloin kun sen
   pitäisi näkyä.

   Värit ovat omat, koska tämän sivun pohja on tumma: tyyli.css:n vaalea
   virhelaatikko olisi ruudun kirkkain asia ja kilpailisi painikkeen kanssa
   juuri silloin kun painiketta pitää painaa uudelleen. */
body.forst .msg{display:none;margin:0 0 16px;padding:11px 13px;border-radius:9px;
  font-size:13.5px;line-height:1.5;border:1px solid transparent;color:var(--forst-muste-2)}
body.forst .msg.on{display:block}
body.forst .msg.err{background:rgba(242,98,43,.12);border-color:rgba(242,98,43,.45);
  color:#F7A183}
body.forst .msg.ok{background:rgba(127,169,140,.12);border-color:rgba(127,169,140,.4);
  color:#A7C9B1}
body.forst .msg.info{background:rgba(255,255,255,.05);border-color:var(--forst-viiva-2);
  color:var(--forst-muste-2)}

/* ====================================================== PUHELIN (≤820 px)

   Kartta jää taustalle koko ruudun mitalta ja lomake nousee alareunaan,
   peukalon ulottuville. Maastossa kirjaudutaan yhdellä kädellä, ja se käsi
   pitää puhelinta alareunasta.

   Tunnus ja lause jäävät ylös kartan päälle: ne kertovat mihin ollaan
   kirjautumassa, ja ne luetaan kerran – lomakkeeseen kosketaan. */
@media (max-width:820px){
  /* Kuvitus on rungossa eikä maastopalstassa: lomake nousee sen päälle
     pyöristetyin kulmin, ja kuvion on jatkuttava lomakkeen alle asti.

     TAUSTA ON KIINNI YLÄREUNASSA (center top). Kuvituksen kuvio on sen
     alalaidassa, ja ylhäältä rajattuna se jää lomakkeen alle näkymättömiin.
     Se on tarkoitus eikä puute: brändisääntö sanoo, että ruudulla on yksi
     oranssi asia kerrallaan, ja puhelimessa se on kirjautumispainike.
     Työpöydällä tilaa on molemmille, ja siellä kuvio näkyy. */
  .forst-runko{grid-template-columns:1fr;grid-template-rows:1fr auto;
    background:var(--forst-maasto) url(/kuvakkeet/forst-maasto.svg) center top/cover no-repeat}
  .forst-maasto{background:none;padding:26px 20px 0;justify-content:flex-start;
    min-height:0}
  .forst-maasto::after{background:linear-gradient(180deg,rgba(14,20,17,.86) 0%,
    rgba(14,20,17,.45) 45%,rgba(14,20,17,.75) 100%)}
  .forst-tunnus{width:124px}
  .forst-lause{font-size:19px;max-width:18ch;margin-top:16px}
  /* Kolme kohtaa ja maastomerkintä jäävät pois puhelimesta. Ne ovat
     vastaus kysymykseen "mitä tämä osaa", eikä sitä kysytä enää siinä
     vaiheessa kun palvelu avataan puhelimella metsässä – ja niiden tila on
     juuri se, jonka lomake tarvitsee peukalon ulottuvilta. */
  .forst-kohdat,.forst-merkki{display:none}

  .forst-lomake{border-left:0;border-top:1px solid var(--forst-viiva);
    border-radius:18px 18px 0 0;padding:26px 20px calc(24px + env(safe-area-inset-bottom));
    box-shadow:0 -14px 40px rgba(10,14,12,.6)}
  .forst-lomake .sisus{max-width:none}
  /* Kielivalitsin ruudun kulmaan eikä lomakkeen kulmaan: lomake on
     puhelimessa alhaalla, ja siellä valitsin olisi peukalon reitillä. */
  .forst-kieli{position:fixed;top:14px;right:14px}
}

/* Matala vaakaruutu (puhelin kyljellään): kuvitukselle ei ole tilaa
   lainkaan, joten lomake saa koko sivun. */
@media (max-height:520px) and (max-width:900px){
  .forst-maasto{display:none}
  .forst-runko{grid-template-rows:1fr}
  .forst-lomake{border-radius:0;justify-content:flex-start;padding-top:20px}
  .forst-kieli{top:14px;right:16px}
}