/* ===========================================================================
   TELOG PULSE — kirjautumis- ja asennussivun ilme
   ---------------------------------------------------------------------------
   Erillinen tiedosto, koska nämä kaksi sivua eivät käytä layout.php:tä eivätkä
   portaalin ruudukkoa. telog.css tuo värit, kirjasimet ja lehtimuodon.
   =========================================================================== */

body.pulse-sivu{
  min-height:100vh; margin:0; display:flex; align-items:center; justify-content:center;
  padding:34px 20px;
  background-color:var(--yo);
  background-image:none;
  color:#fff;
  position:relative; overflow-x:hidden;
}

/* Syvä pohja: laivastonsininen hallitsee, violetti on aksenttihehku.
   Sama suhde kuin dashboardissa - dia saa olla violetti, työkalu ei. */
body.pulse-sivu::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 60% at 82% 8%, rgba(70,38,117,.55) 0%, rgba(70,38,117,.12) 55%, rgba(70,38,117,0) 80%),
    radial-gradient(90% 80% at 12% 6%, rgba(9,24,51,.92) 0%, rgba(9,24,51,.78) 50%, rgba(1,61,92,.55) 100%);
}
/* Koristelehdet. Sama muoto kuin logossa, hyvin himmeinä. */
body.pulse-sivu::after{
  content:""; position:fixed; z-index:0; pointer-events:none;
  width:420px; height:420px; right:-120px; top:-150px;
  background:rgba(201,195,253,.06);
  clip-path:var(--lehti-clip);
}

.pulse-kortti{
  position:relative; z-index:1; width:100%; max-width:440px;
  background:var(--kortti); color:var(--teksti);
  border-radius:22px; overflow:hidden;
  box-shadow:0 18px 50px rgba(9,24,51,.34), 0 2px 8px rgba(9,24,51,.18);
}
.pulse-kortti.levea{max-width:580px}

/* Tumma yläosa: logo, tuotenimi ja tunnuslause. */
.pulse-ylaosa{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--yo) 0%,#2A1848 52%,var(--indigo) 100%);
  padding:30px 34px 26px;
  text-align:center;
}
.pulse-ylaosa .lehti-koriste{
  position:absolute; width:190px; height:190px; right:-56px; bottom:-86px;
  background:rgba(201,195,253,.13); clip-path:var(--lehti-clip-peili);
}
.pulse-logo{height:28px; width:auto; display:block; margin:0 auto 12px; position:relative}
.pulse-nimi{
  position:relative; margin:0; font-size:20px; line-height:1; font-weight:700; color:#fff;
}
.pulse-lause{
  position:relative; margin:9px 0 0; font-size:13px;
  color:rgba(255,255,255,.62); letter-spacing:.01em;
}

.pulse-sisalto{padding:28px 34px 30px}
.pulse-johdanto{margin:0 0 20px; color:var(--teksti-vaalea); font-size:.95rem; line-height:1.55}

.pulse-kentta{display:block; margin-bottom:15px}
.pulse-kentta > span{display:block; font-size:.84rem; margin-bottom:6px; color:var(--teksti); font-weight:500}
.pulse-kentta input{
  width:100%; padding:11px 13px; font:inherit; font-size:15px;
  border:1px solid var(--raja-tumma); border-radius:10px; background:#fff; color:var(--teksti);
  min-height:46px;
}
.pulse-kentta input:focus{outline:3px solid var(--lavender); outline-offset:1px; border-color:var(--lavender)}
.pulse-parivi{display:grid; grid-template-columns:1fr 1fr; gap:15px}
@media(max-width:520px){.pulse-parivi{grid-template-columns:1fr; gap:0}}

.pulse-nappi{
  width:100%; min-height:50px; margin-top:6px;
  background:var(--petrol); color:#fff; border:0; border-radius:11px;
  font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.pulse-nappi:hover{background:var(--petrol-tumma); transform:translateY(-1px)}
.pulse-nappi.toissijainen{
  background:#fff; color:var(--teksti); border:1px solid var(--raja-tumma);
  min-height:42px; font-size:13.5px; font-weight:500; width:auto; padding:0 15px; margin:0 0 4px;
}
.pulse-nappi.toissijainen:hover{background:#F4F7F8; border-color:var(--petrol); color:var(--petrol)}
/* Vali edelliseen lohkoon. Oli aiemmin style-maareena asennus.php:ssa. */
.pulse-nappi.valjempi{margin-top:16px}

.pulse-virhe{
  display:flex; align-items:flex-start; gap:11px;
  background:rgba(192,71,58,.09); border:1px solid rgba(192,71,58,.28);
  color:#8E2F25; border-radius:11px; padding:12px 14px; margin-bottom:18px; font-size:14px;
}
.pulse-virhe .merkki{
  width:18px; height:18px; flex:0 0 auto; margin-top:1px;
  background:var(--punainen); clip-path:var(--lehti-clip);
}
.pulse-ok{
  display:flex; align-items:flex-start; gap:11px;
  background:rgba(44,122,75,.09); border:1px solid rgba(44,122,75,.26);
  color:#1E5B37; border-radius:11px; padding:12px 14px; margin-bottom:18px; font-size:14px;
}
.pulse-ok .merkki{
  width:18px; height:18px; flex:0 0 auto; margin-top:1px;
  background:var(--vihrea); clip-path:var(--lehti-clip);
}

.pulse-vihje{
  margin:18px 0 0; font-size:12.5px; color:var(--teksti-vaalea);
  line-height:1.5; text-align:center;
}
.pulse-vihje.vasen{text-align:left}
.pulse-alaviite{
  position:relative; z-index:1; margin:20px 0 0; text-align:center;
  font-size:12px; color:rgba(255,255,255,.42);
}

/* ===========================================================================
   TELOG PULSE — sovelluskehys (yläpalkki, etusivu)
   Luokkaetuliite pp- pitää nämä erillään vanhoista telog.css:n luokista,
   joita käyttäjähallinta, loki ja päivityssivu yhä käyttävät.
   =========================================================================== */

body.pulse-sovellus{
  margin:0; background:var(--tausta); background-image:none;
  color:var(--teksti); font-family:Inter,"Segoe UI",system-ui,sans-serif;
}
/* Yläkaistan --yla-* -muuttujat ovat assets/savyt.css:ssä, eivät täällä.
   Syy: samat arvot tarvitaan myös työkalukehyksen iframessa, johon tätä
   tiedostoa ei voi ladata (se tyylittelisi pienoisohjelman uusiksi). Yksi
   paletti kahdelle dokumentille — muuten sävyn korjaus tehtäisiin ennen
   pitkää vain toiseen. Sivut lataavat savyt.css:n pulse.css:n rinnalla. */
.pp-rajaus{max-width:1280px; margin:0 auto; padding:0 28px}

/* ---------- kiinteä yläpalkki ---------- */
.pp-palkki{
  position:sticky; top:0; z-index:70; background:var(--yo); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 6px 22px rgba(9,24,51,.22);
}
.pp-palkki-sisa{
  max-width:1280px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; gap:22px; min-height:66px;
}
/* min-height 40: logo on sivuston ainoa jatkuva paluu etusivulle, joten se on
   myos kosketuskohde. Palkki on 66 px korkea, joten tama ei muuta ulkoasua. */
.pp-logo{display:flex; align-items:center; gap:13px; text-decoration:none; color:#fff; min-height:40px}
.pp-logo img{height:30px; width:auto; display:block}
.pp-tuotenimi{
  font-size:20px; padding-left:13px; line-height:1;
  border-left:1px solid rgba(255,255,255,.26); position:relative;
}
.pp-lause{font-size:12px; color:rgba(255,255,255,.55)}

/* ---------- tuotenimen sanamerkki ----------
   Sama sääntö yläpalkissa (.pp-tuotenimi) ja kirjautumis- ja asennussivun
   otsikossa (.pulse-nimi). Koko tulee säiliöstä, joten mitat ovat em-yksiköissä.

   Logon tuntu tulee kolmesta asiasta: kaksi painoa samassa sanassa, tiukka
   välistys ja korostusväri loppuosassa. Kumpikin tausta on aina tumma
   (yläpalkki ei vaihdu sävyn mukana, vain kaista sen alla), joten valkoinen
   ja lavender-reuna toimivat molemmissa. Fontti on paikallinen Bricolage
   Grotesque, koska CSP sallii vain font-src 'self'. */
.nimi-alku,.nimi-loppu{font-family:"Bricolage Grotesque",Inter,sans-serif; letter-spacing:-.045em}
.nimi-alku{font-weight:700; color:#fff}
.nimi-loppu{font-weight:400; color:var(--lavender-reuna); margin-left:.02em}
/* Ensimmäinen kirjain on Telogin logon t (assets/telog-t.png, leikattu
   telog-logo.png:stä 11.9.2026): poikkiviiva vain vasemmalle ja liila lehti
   oikealla. Kuva eikä fontti, jotta muoto on täsmälleen brändin.
   Korkeus .70em = Bricolage Grotesquen l-kirjaimen korkeus (mitattu), jolloin
   t:n ja e:n suhde on sama kuin logossa (x-korkeus / nousu = .74). Leveys
   kuvan suhteesta 51:99. Tyhjä inline-block asettuu alareunastaan
   perusviivalle, joten erillistä pystysäätöä ei tarvita.
   Kuva on valkoinen: sanamerkki on vain tummilla pohjilla (yläpalkki,
   kirjautumis- ja asennussivun yläosa). */
.nimi-t{display:inline-block; width:.361em; height:.70em; margin-right:.035em;
  background:url('telog-t.png') no-repeat 0 100% / contain}

.pp-palkki-oikea{margin-left:auto; display:flex; align-items:center; gap:10px}
.pp-paluu{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:7px 13px;
  color:rgba(255,255,255,.82); text-decoration:none; border-radius:10px; font-size:13.5px;
}
.pp-paluu:hover{background:rgba(255,255,255,.11); color:#fff}
.pp-paluu svg{width:14px; height:14px; transform:rotate(180deg)}
.pp-rooli{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:7px 12px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  border-radius:10px; font-size:13.5px; white-space:nowrap; color:#fff;
}
.pp-rooli svg{width:16px; height:16px}

.pp-valikkoalue{position:relative}
.pp-asetusnappi{
  display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; min-height:40px;
  background:transparent; border:1px solid rgba(255,255,255,.20); border-radius:10px;
  cursor:pointer; color:#fff;
}
.pp-asetusnappi:hover{background:rgba(255,255,255,.12)}
.pp-ratas{display:flex}
.pp-ratas svg{width:17px; height:17px; opacity:.82}
.pp-nappula{
  width:30px; height:30px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--lavender); color:#fff; font-weight:700; font-size:12px;
  clip-path:var(--lehti-clip);
}
.pp-nappula.iso{width:42px; height:42px; font-size:15px}

.pp-pudotus{
  position:absolute; top:calc(100% + 9px); right:0; min-width:280px; z-index:90;
  background:#fff; color:var(--teksti); border:1px solid var(--raja);
  border-radius:14px; box-shadow:0 12px 30px rgba(9,24,51,.18), 0 2px 6px rgba(9,24,51,.10);
  padding:8px;
  /* Valikko vierittyy itse, jos se ei mahdu ruutuun. overscroll-behavior estää
     vierityksen valumisen taustalle valikon ala- ja yläreunassa. */
  max-height:calc(100vh - 90px); max-height:calc(100dvh - 90px);
  overflow-y:auto; overscroll-behavior:contain;
}
/* Tausta ei vieritä valikon ollessa auki. Luokan asettaa layout.php:n
   valikkoskripti. scrollbar-gutter pitää vierityspalkin paikan varattuna, jotta
   sivu ei hyppää sivusuunnassa kun palkki katoaa. */
html.pp-valikko-auki{overflow:hidden; scrollbar-gutter:stable}
.pp-pudotus-kayttaja{display:flex; align-items:center; gap:12px; padding:10px; border-bottom:1px solid var(--raja); margin-bottom:4px}
.pp-pudotus-kayttaja b{display:block; font-size:14px}
.pp-pudotus-kayttaja small{font-size:12px; color:var(--teksti-vaalea)}
.pp-pudotus-otsake{
  margin:8px 10px 5px; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--teksti-vaalea); font-weight:700;
}
.pp-pudotus-viiva{height:1px; background:var(--raja); margin:7px 4px}
/* Alustan versio valikon alalaidassa (vain portaalia hallitseville). Pieni ja
   vaimea: tieto ylläpitäjälle, ei toiminto. */
.pp-pudotus-versio{margin:2px 4px 6px; padding:0 8px; font-size:11.5px; color:var(--teksti-vaalea)}
.pp-pudotus-rivi{
  display:flex; align-items:center; gap:11px; min-height:42px; padding:9px 10px;
  border-radius:9px; font-size:14px; color:var(--teksti); text-decoration:none;
}
.pp-pudotus-rivi:hover{background:#F1F5F8}
.pp-pudotus-rivi svg{width:17px; height:17px; color:var(--teksti-vaalea); flex:0 0 auto}
/* Uloskirjautuminen on POST-lomake (logout.php), mutta näyttää valikkoriviltä.
   :hover-sääntö yllä on spesifisempi kuin button.pp-pudotus-rivi, joten
   taustan nollaus ei kumoa korostusta. */
.pp-ulos-lomake{margin:0}

/* ---------- Tietokanta-sivu (tietokanta.php) ---------- */
.tk-yhteenveto{display:flex; flex-wrap:wrap; gap:8px 24px; margin:0 0 12px; font-size:14px; color:var(--teksti-vaalea)}
.tk-yhteenveto b{color:var(--teksti); font-variant-numeric:tabular-nums}
.tk-taulu{padding:18px 0; border-top:1px solid var(--raja)}
.tk-taulu:first-of-type{border-top:0; padding-top:4px}
.tk-taulu-otsake{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px}
.tk-taulu-otsake h3{margin:0; font-size:15px}
.tk-taulu-otsake code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px}
.tk-taulu .loki-taulu-kuori{margin-top:0}
.tk-kuvaus{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:12px}
.tk-kuvaus .kt-kentta{flex:1 1 320px; margin:0}
/* Ohjelmittainen Tietokanta-sivu (20.9.2026): paluulinkki, haku ja taulun
   tiedot avattavina. Kortti pitää sisällään yhden taulun, joten .tk-taulun
   oma yläviiva ei ole tarpeen. */
.tk-paluu{margin:0 0 14px; font-size:14px}
/* Rivin toiminto oikeaan reunaan, nappi kokonaisena rivinä kapealla. */
.tk-avaa{text-align:right; white-space:nowrap}
.tk-avaa .painike{display:inline-flex}
#tk-ohjelmat tbody tr:hover{background:rgba(9,24,51,.03)}
.tk-haku{max-width:420px; margin:0 0 12px}
.tk-taulu-tiedot{margin-top:6px}
.tk-taulu-tiedot summary{cursor:pointer; font-size:13.5px; color:var(--teksti-vaalea); min-height:32px}
.tk-taulu-tiedot > *{margin-top:12px}
.kt-kortti > .tk-taulu{padding:0; border-top:0}
/* Työkalun asetukset: palautuspisteiden alaotsikko ja versioon palaamisen
   valinta "Vain koodi / Myös tiedot" (asenna.php). */
.kt-alaotsikko{margin:18px 0 8px; font-size:14px; font-weight:600}
.kt-pistevalinta{min-height:32px; max-width:100%; padding:4px 8px; font:inherit; font-size:13px;
  border:1px solid var(--raja-tumma); border-radius:8px; background:#fff; color:var(--teksti)}
/* Koko kannan palautusohje: avautuva, koska sitä tarvitaan harvoin. */
.tk-ohje{margin-top:16px; border-top:1px solid var(--raja); padding-top:12px}
.tk-ohje summary{cursor:pointer; font-weight:600; min-height:32px}
.tk-ohje ol{margin:10px 0 10px 1.2em; padding:0; line-height:1.6; font-size:14px}
.tk-ohje code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px}
button.pp-pudotus-rivi{width:100%; border:0; background:none; font:inherit; font-size:14px; cursor:pointer; text-align:left}

/* ---------- tumma yläosa ---------- */
.pp-yla{position:relative; overflow:hidden; background:var(--yla-pohja); color:var(--yla-teksti)}

/* Taustakuva. Kuva on kaistan pohjalla, huntu sen päällä, sisältö ylimpänä —
   sama kerrostus kuin mockupissa (alusta-mockup-v3.html, .yla-kuva).

   Osoitteita on tasan kaksi ja molemmat ovat tässä kiinteinä: CSP kieltää
   inline-tyylit, joten osoitetta ei voi antaa PHP:stä. Itse tuodun kuvan
   SISÄLTÖ vaihtuu, sen osoite ei — siksi se tarjoillaan taustakuva.php:llä.
   Polut ovat suhteessa tähän tiedostoon (assets/), joten ../ on portaalin juuri.

   Läpinäkyvyys on muuttuja, koska sen on pakko vaihtua sävyn mukana: tummalla
   kaistalla .42 on oikein, mutta vaalealla sama arvo veisi tekstin kontrastin
   alle luettavan. */
.pp-yla-kuva{
  position:absolute; inset:0; pointer-events:none;
  background-image:url('telog-toimisto.jpg');
  background-size:cover; background-position:center 58%;
  opacity:var(--yla-kuva-lapinakyvyys);
}
body.oma-taustakuva .pp-yla-kuva{background-image:url('../taustakuva.php')}
body.ei-taustakuvaa .pp-yla-kuva{display:none}

.pp-yla-huntu{position:absolute; inset:0; background:var(--yla-huntu)}
/* Metallinen kiilto (Mikan valinta 19.9.2026, "maltillinen"): viisto
   valojuova hunnun päällä ja ohut vaalea yläreuna, kuten kirjautumissivulla.
   Pseudoelementteinä, jotta sivuihin ei tarvita uutta merkintää; molemmat
   ovat sisällön alla (.pp-rajaus on myöhemmin ja position:relative). */
.pp-yla-huntu::after{content:""; position:absolute; inset:0; background:var(--yla-kiilto)}
.pp-yla::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--yla-reuna); z-index:1}
.pp-yla-lehti{position:absolute; display:block; pointer-events:none; background:var(--yla-lehti)}
.pp-yla-lehti.a{width:300px; height:300px; right:-80px; top:-120px; clip-path:var(--lehti-clip)}
.pp-yla-lehti.b{width:190px; height:190px; right:210px; top:26px; clip-path:var(--lehti-clip-peili); background:var(--yla-lehti-b)}
/* Alareunan 22 px on sisältöpaneelin alku (.pp-yla::after), joten tumma osa
   pysyy entisen korkuisena: 26 + 22. */
.pp-yla .pp-rajaus{position:relative; padding-top:16px; padding-bottom:48px}

/* SISÄLTÖ NOUSEE KAISTAN PÄÄLLE, kuten kirjautumiskortti tumman pohjan päällä.
   Kaistan alareunaan piirretään sivun taustan värinen, yläkulmistaan
   pyöristetty kaistale varjoineen, ja kaistaa seuraava sisältö nostetaan sen
   kohdalle. Ei omaa elementtiä: toimii jokaisella sivulla, jolla .pp-yla on. */
.pp-yla::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:22px; z-index:1;
  background:var(--tausta); border-radius:22px 22px 0 0;
  /* Varjo vain ylöspäin: siirtymä -12, sumeus 20 ja levitys -8 summautuvat
     alareunassa nollaan. Alaspäin leviävä varjo leikkautuisi kaistan
     overflow:hidden-reunaan ja näkyisi suorana viivana paneelin alla. */
  box-shadow:0 -12px 20px -8px rgba(9,24,51,.22), inset 0 1px 0 var(--yla-paneeliraja);
}
.pp-yla + .pp-rajaus{position:relative; z-index:2; margin-top:-22px}

/* flex-wrap ja overflow-wrap: muokkausnakymassa h1 on kayttajatunnus eli
   sahkopostiosoite. Ilman naita pitka osoite leikkautuisi .pp-yla:n
   overflow:hidden -saannon alle jaljettomiin. */
.pp-konteksti{display:flex; align-items:center; gap:11px; min-height:40px; font-size:14px; flex-wrap:wrap}
.pp-yla h1.pp-konteksti-nimi{min-width:0; overflow-wrap:anywhere}
.pp-lehtipiste{width:14px; height:14px; flex:0 0 auto; background:var(--yla-piste); clip-path:var(--lehti-clip)}
.pp-konteksti-nimi{
  font-family:"Bricolage Grotesque",sans-serif; font-size:16px; font-weight:600;
  letter-spacing:-.01em; color:var(--yla-teksti);
}
.pp-erotin{width:4px; height:4px; border-radius:50%; background:var(--yla-vaimea); flex:0 0 auto}
.pp-tuoreus{color:var(--yla-vaimea); font-size:13.5px}

/* Alasivujen kaista: sama rakenne, mutta otsikko on h1 ja siksi suurempi.
   Etusivun .pp-konteksti-nimi on span ("Koko yritys") ja pysyy 16 pikselissä. */
.pp-yla h1.pp-konteksti-nimi{margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em}
.pp-yla-teksti{
  position:relative; margin:11px 0 0; max-width:80ch;
  font-size:14.5px; line-height:1.55; color:var(--yla-himmea);
}

.pp-tyhja-tilannekuva{
  margin-top:14px; padding:22px 24px; border:1px dashed var(--yla-raja);
  border-radius:20px; background:var(--yla-kortti);
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
}
.pp-tyhja-merkki{
  width:46px; height:46px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--yla-merkki); clip-path:var(--lehti-clip);
}
.pp-tyhja-merkki svg{width:22px; height:22px; color:var(--yla-merkki-ikoni)}
.pp-tyhja-tilannekuva h2{margin:0 0 7px; font-size:17px; font-weight:600; color:var(--yla-teksti)}
.pp-tyhja-tilannekuva p{margin:0; font-size:14.5px; color:var(--yla-himmea); max-width:76ch; line-height:1.55}
.pp-varjot{display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-top:16px}
.pp-varjo{border:1px dashed var(--yla-raja-heikko); border-radius:11px; padding:11px 13px}
.pp-varjo b{display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--yla-vaimea); font-weight:700}
.pp-varjo i{display:block; height:22px; margin-top:8px; border-radius:6px; background:var(--yla-raita)}

/* ---------- sisältö ---------- */
.pp-sisalto{display:block}
/* Alasivujen sisältökaista. .pp-rajaus antaa sivutäytön ja 1280 px:n leveyden,
   tämä lisää pystyrytmin. Longhand-arvot, koska .pp-rajaus on shorthand. */
.pp-sivu{padding-top:26px; padding-bottom:40px}
.pp-osio{margin:26px 0 26px}
.pp-osio-otsikko{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 14px}
.pp-osio-otsikko h2{
  margin:0; font-size:19px; font-weight:600; display:flex; align-items:center; gap:11px;
  font-family:"Bricolage Grotesque",sans-serif;
}
.pp-osio-otsikko h2.pieni{font-size:17px}
.pp-osio-lehti{width:20px; height:20px; flex:0 0 auto; background:var(--lavender); clip-path:var(--lehti-clip)}
.pp-selite{margin:14px 0 0; font-size:13.5px; color:var(--teksti-vaalea); max-width:80ch}
.pp-selite.pieni{font-size:12.5px; margin-top:16px}
/* Luettelo leipätekstin seassa (tietosuoja.php). Sama koko ja väri kuin
   .kt-vihje, jotta kappale ja luettelo ovat samaa tekstiä. */
.pp-luettelo{margin:0 0 12px; padding-left:20px; font-size:13.5px; line-height:1.55; color:var(--teksti-vaalea); max-width:80ch}
.pp-luettelo li{margin:0 0 6px}

/* Kortit joustavana rivinä, ei kiinteänä neljän sarakkeen ruudukkona
   (25.9.2026). Kategoriat pilkkovat listan pieniin ryhmiin, ja kiinteällä
   ruudukolla viiden kortin kategoria vei kaksi riviä joista toisella oli
   kolme tyhjää paikkaa. Nyt rivi ottaa niin monta korttia kuin leveyteen
   mahtuu, ja vajaan rivin kortit levenevät täyttämään sen.
   max-width estää yksinäisen kortin venymisen koko leveydeltä: 156 px korkea
   ja 1200 px leveä kortti näyttäisi bannerilta, ei kortilta. */
/* justify-content:center koskee KÄYTÄNNÖSSÄ vain vajaata riviä: täydellä
   rivillä ei ole jaettavaa tilaa, koska kortit venyvät. Vajaalla rivillä
   kortit ovat max-widthin rajoittamia, ja jäljelle jäävä tyhjä jakautuu
   tasan molemmille puolille — se näyttää harkitulta, kun taas oikeaan
   reunaan jäävä aukko näyttää siltä että jotain puuttuu. */
.pp-kortit{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
/* 170 px eikä 210 (Mikan pyyntö 25.9.2026): leveimmällä kaistalla (1224 px)
   riviin mahtuu kuusi korttia. Seitsemäs ei mahdu, eikä pidäkään — sitä
   kapeammaksi kortti ei enää kerro nimeä ja kuvausta. */
.pp-kortit > *{flex:1 1 170px; min-width:0; max-width:calc(50% - 7px)}
/* Tasapainoiset rivit (Mikan pyyntö 25.9.2026). Kuusi korttia on yksi rivi,
   mutta seitsemäs jäisi yksin toiselle riville. Näillä määrillä perusleveys
   nostetaan niin, ettei rivi täyty kuuteen asti:
     7, 8            → 4 riviin  (4+3, 4+4)
     9, 10, 13, 14   → 5 riviin  (5+4, 5+5, 5+4+4, 5+5+4)
   11 ja 12 jäävät oletukseen, koska 6+5 ja 6+6 ovat jo tasapainoiset.
   max() pitää huolen siitä, että kapealla näytöllä kortti ei silti kutistu
   alle 170 pikselin — siellä rivissä on vähemmän.
   :where() nollaa tarkkuuden, jotta kapean näytön sääntö (yksi kortti
   riviin) voittaa järjestyksellä eikä tarkkuudella. */
.pp-kortit > :where(:first-child:nth-last-child(7)),
.pp-kortit > :where(:first-child:nth-last-child(7)) ~ *,
.pp-kortit > :where(:first-child:nth-last-child(8)),
.pp-kortit > :where(:first-child:nth-last-child(8)) ~ *{flex-basis:max(170px, 22%)}
.pp-kortit > :where(:first-child:nth-last-child(9)),
.pp-kortit > :where(:first-child:nth-last-child(9)) ~ *,
.pp-kortit > :where(:first-child:nth-last-child(10)),
.pp-kortit > :where(:first-child:nth-last-child(10)) ~ *,
.pp-kortit > :where(:first-child:nth-last-child(13)),
.pp-kortit > :where(:first-child:nth-last-child(13)) ~ *,
.pp-kortit > :where(:first-child:nth-last-child(14)),
.pp-kortit > :where(:first-child:nth-last-child(14)) ~ *{flex-basis:max(170px, 17%)}
/* Hallintanäkymän ruutu: kortti ja sen järjestysnapit. Napit ovat kortin
   ULKOPUOLELLA, koska lomaketta ei voi upottaa <a>-elementtiin — sisäkkäinen
   nappi ei olisi klikattavissa eikä merkintä olisi kelvollista. */
.pp-kortti-kehys{display:flex; flex-direction:column; gap:8px}
.pp-kortti-kehys .pp-kortti{flex:1}
.kt-jarjestys-mini{display:flex; align-items:center; justify-content:center; gap:8px}
.kt-jarjestys-numero{
  font-size:11px; font-weight:700; color:var(--teksti-vaalea);
  min-width:20px; text-align:center;
}
.pp-kortti{
  position:relative; overflow:hidden; background:var(--kortti); border:1px solid var(--raja);
  border-radius:16px; padding:14px; box-shadow:var(--varjo);
  text-decoration:none; color:inherit; display:flex; flex-direction:column; min-height:118px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.pp-kortti:hover{transform:translateY(-3px); border-color:var(--raja-tumma)}
/* Ikonirivi: ikoni ja tilamerkki vierekkäin (25.9.2026). Merkki on rivin
   oikealla puolella eikä omana rivinään, jolloin kortti on sen rivin verran
   matalampi ilman että mitään jää pois. */
.pp-kortti-yla{display:flex; align-items:center; gap:9px; margin-bottom:9px; min-width:0}
.pp-kortti-yla .pp-kortti-ikoni{margin-bottom:0}
.pp-kortti-ikoni{
  width:34px; height:34px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--kortti-vari); color:#fff; margin-bottom:10px; clip-path:var(--lehti-clip);
}
.pp-kortti-ikoni svg{width:17px; height:17px}

/* ---------- ikonilehden väri ----------
   Väri erottaa työkalut toisistaan silmäyksellä, kun niitä on ruudullinen.
   Sama ajatus kuin mockupissa (--kortti-vari), mutta värin valitsee
   pääkäyttäjä eikä se seuraa teknistä tyyppiä.

   Luokka on KORTISSA eikä lehdessä, jotta muuttuja on kortin muidenkin osien
   käytettävissä. Luokka eikä style-määre: CSP kieltää inline-tyylit.

   Kaikissa valkoinen ikoni yltää grafiikan 3:1-rajaan (heikoin on laventeli
   3,97:1) PAITSI keltaisessa, jossa valkoinen jäisi 1,9:1 — siinä ikoni on
   tumma (7,8:1). Brändin sävyä ei tummennettu sitä varten. */
.pp-kortti{--kortti-vari:var(--petrol)}
.pp-kortti.vari-indigo{--kortti-vari:var(--indigo)}
.pp-kortti.vari-lavender{--kortti-vari:var(--lavender)}
.pp-kortti.vari-yo{--kortti-vari:var(--yo)}
.pp-kortti.vari-keltainen{--kortti-vari:var(--keltainen)}
.pp-kortti.vari-vihrea{--kortti-vari:var(--vihrea)}
.pp-kortti.vari-keltainen .pp-kortti-ikoni{color:var(--yo)}

/* VÄRISÄVY (Mikan valinta 19.9.2026, korttityyli D). Kortissa on työkalun
   värinen pehmeä sävy, värillinen reuna ja alareunassa ohut värijuova.
   Sävy on vahvimmillaan ikonin kohdalla ja häipyy valkoiseen ennen tekstiä:
   täydellä 12 %:n sävyllä kuvausteksti (--teksti-vaalea) jäisi osalla
   väreistä AA-rajan alle (mitattu 4,24–4,47:1), häivytettynä se on tekstin
   kohdalla lähes valkoisella. Tyhjät ja pois kytketyt kortit jäävät
   neutraaleiksi, koska niiden ulkoasu kertoo tilan. */
.pp-kortti:not(.tyhja):not(.ei-kaytossa){
  background:linear-gradient(160deg, color-mix(in srgb, var(--kortti-vari) 12%, #fff) 0%, #fff 55%);
  border-color:color-mix(in srgb, var(--kortti-vari) 22%, #fff);
}
.pp-kortti:not(.tyhja):not(.ei-kaytossa)::before{
  content:""; position:absolute; left:17px; right:17px; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:var(--kortti-vari); opacity:.55; pointer-events:none;
}
a.pp-kortti:hover{box-shadow:0 10px 26px rgba(9,24,51,.14)}
@media (prefers-reduced-motion: reduce){ a.pp-kortti, a.pp-kortti:hover{transition:none; transform:none} }
.pp-kortti h3{margin:0 0 4px; font-size:15px; font-weight:600; line-height:1.28}
/* Kuvaus kahteen riviin: kortit ovat samalla rivillä yhtä korkeita, joten
   yksi pitkä kuvaus kasvattaisi koko rivin. */
.pp-kortti p{
  margin:0; font-size:12.5px; line-height:1.4; color:var(--teksti-vaalea); flex:1;
  overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.pp-kortti-ala{display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0}
.pp-tila{font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; padding:4px 10px; border-radius:7px}
/* Kortissa merkki on tunniste eikä sisältöä, joten se saa olla pienempi kuin
   taulukoissa ja listoissa, joissa .pp-tila on rivin oma tieto. */
.pp-kortti .pp-tila{font-size:10px; letter-spacing:.04em; padding:3px 7px; border-radius:6px}
/* #1E5B37 eika #1E7A4C: sama merkitys kuin telog.css:n .kt-tila-aktiivinen,
   ja vaaleampi savy jai kontrastiin 4,49:1 eli juuri AA-rajan alle. */
.pp-tila.kaytossa{background:rgba(44,122,75,.13); color:#1E5B37}
.pp-tila.tulossa{background:rgba(136,117,185,.14); color:#5D4E96}
/* Pois kytketty työkalu näkyy vain hallinnassa, ei etusivulla. */
.pp-tila.pois{background:rgba(93,107,125,.14); color:#4A5665}
/* Oikeassa YLÄkulmassa eikä alakulmassa (25.9.2026): matalassa kortissa
   alalaidassa on nyt kuvausteksti, jonka päälle nuoli jäisi. Ikonirivin
   oikea laita on vapaa, koska tilamerkki on ikonin vieressä. */
.pp-nuoli{
  position:absolute; right:12px; top:12px; width:26px; height:26px;
  background:var(--petrol); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translate(6px,-6px); transition:opacity .16s ease, transform .16s ease;
  clip-path:var(--lehti-clip);
}
.pp-nuoli svg{width:13px; height:13px}
a.pp-kortti:hover .pp-nuoli{opacity:1; transform:none}
/* Pois kytketty työkalu hallintanäkymässä. Katkoviiva ja harmaa lehti kertovat
   tilan myös ilman tagin lukemista. Himmennys on LEHDESSÄ eikä koko kortissa:
   himmennetty teksti olisi jäänyt kontrastiin, jota ei voi lukea. Sama
   väripari kuin .pp-kortti.tyhja-tilassa. */
.pp-kortti.ei-kaytossa{border-style:dashed; background:#FAFBFC}
.pp-kortti.ei-kaytossa .pp-kortti-ikoni{background:var(--raja); color:var(--teksti-vaalea)}
.pp-kortti.tyhja{
  border-style:dashed; border-color:var(--raja-tumma); background:rgba(255,255,255,.55);
  box-shadow:none; align-items:center; justify-content:center; text-align:center;
}
.pp-kortti.tyhja .pp-kortti-ikoni{background:var(--raja); color:var(--teksti-vaalea)}
.pp-kortti.tyhja b{font-size:14px; font-weight:600; color:var(--teksti-vaalea)}
.pp-kortti.tyhja > span:last-child{font-size:12.5px; color:var(--teksti-vaalea); margin-top:3px}

/* ---------- alarivi: järjestelmät + vinkki ---------- */
/* Ei align-items:start (Mikan huomio 25.9.2026): kortit ovat vierekkäin ja
   eri korkuisina ne näyttävät siltä että toinen on kesken. Rivin korkeuden
   määrää se kummassa on enemmän sisältöä — käytännössä linkkilaatikko, jonka
   korkeus kasvaa linkkien määrän mukana — ja toinen venyy samaan mittaan. */
.pp-alarivi{display:grid; grid-template-columns:1.62fr 1fr; gap:22px; margin-bottom:40px}
/* Venyvän paneelin sisältö: linkit ylös ja selite alas, jottei ylijäävä tila
   jää keskelle. */
.pp-paneeli{background:var(--kortti); border:1px solid var(--raja); border-radius:20px;
  box-shadow:var(--varjo); padding:18px; display:flex; flex-direction:column}
.pp-paneeli h3{margin:0 0 8px; font-size:13px; font-weight:600}
.pp-paneeli > .pp-selite{margin-top:auto}
/* 190 px eikä 168: kahdelle riville rivittyvä nimi tarvitsee hieman leveyttä,
   jottei jokainen nimi katkea heti (25.9.2026). Kapealla näytöllä sarakkeita
   on silti yksi. */
/* Työkalujen kategoriaotsikko etusivulla (25.9.2026). Pienempi kuin osion
   otsikko: tämä jaottelee saman osion sisällä eikä aloita uutta osiota. */
.pp-kategoria{margin:22px 0 10px; font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--teksti-vaalea); text-transform:uppercase}
.pp-kategoria:first-of-type{margin-top:4px}
.pp-linkit{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; margin-bottom:14px}
/* Matalampi kuin työkalukortti (Mikan huomio 25.9.2026): linkki ei ole
   sisältöä vaan oikotie ulos portaalista, joten se ei saa viedä saman
   verran tilaa kuin työkalu. Leveys pysyy 190 px:ssä, koska se ei ole liikaa
   vaan nimen rivityksen vaatima vähimmäismitta — pienennys on pystysuunnassa,
   jossa se myös näkyy. */
.pp-linkki{
  display:flex; align-items:center; gap:9px; min-height:38px;
  border:1px solid var(--raja); border-radius:11px; padding:6px 10px;
  text-decoration:none; color:inherit; font-size:13.5px; font-weight:500; background:#FBFDFD;
}
.pp-linkki:hover{border-color:var(--petrol); background:#fff}
.pp-tunnus{
  width:26px; height:26px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--petrol); color:#fff; font-size:11px; font-weight:700; clip-path:var(--lehti-clip);
}
.pp-tunnus svg{width:13px; height:13px}
.pp-linkki.tyhja{border-style:dashed; border-color:var(--raja-tumma); background:transparent; color:var(--teksti-vaalea); font-weight:400}
.pp-linkki.tyhja .pp-tunnus{background:var(--raja); color:var(--teksti-vaalea)}

/* Linkin nimi: pitkä järjestelmän nimi ei saa työntää ulos-ikonia riviltä
   eikä levittää ruudukon saraketta. min-width:0 on pakollinen, koska
   flex-lapsi ei muuten suostu kutistumaan sisältöään pienemmäksi.

   Nimi rivittyy kahdelle riville (Mikan huomio 25.9.2026): yhdelle riville
   katkaistuna moni nimi jäi muotoon "Tapauks…", eikä linkeistä voinut erottaa
   toisiaan. Kaksi riviä riittää käytännössä aina; sitä pidempi katkaistaan yhä
   kolmella pisteellä. line-clamp vaatii -webkit-box-näyttötavan myös muissa
   kuin WebKit-selaimissa — nimi on vakiintunut, tuki ei ole.
   overflow-wrap:anywhere katkaisee myös yhden pitkän sanan, joka muuten
   työntäisi ulos-ikonin ulos ruudusta. */
.pp-linkki-nimi{
  min-width:0; overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  line-height:1.3; overflow-wrap:anywhere;
}
/* Logo samassa lehtimuodossa kuin kirjainmerkki, jotta rivi näyttää samalta
   riippumatta siitä kummalla se on.

   object-fit:contain EIKÄ cover. Ohje sanoo rajaamaan kuvan neliöksi, ja
   neliölle nämä kaksi tekevät saman asian. Ero näkyy vasta silloin kun ohjetta
   ei noudateta: cover leikkaa leveästä sanalogosta palan keskeltä, jolloin
   ruudulla on tunnistamaton kirjainsilppu eikä mikään kerro miksi. contain
   kutistaa saman logon kokonaisena — pieneksi, mutta tunnistettavaksi. */
/* 24 px eikä 26: kuva on .lehti-kehys-kääreen sisällä (telog.css), jonka
   1 px täyte kummaltakin puolelta tekee kokonaisuudesta taas 26 px eli saman
   kuin kirjainmerkki. Rivin asettelu ei siis muutu, vaikka lehteen tuli
   ääriviiva. display:block poistaa inline-kuvan perusviivan alle jäävän raon
   kääreen sisältä. */
.pp-linkki-logo{
  width:24px; height:24px; flex:0 0 auto; object-fit:contain; display:block;
  clip-path:var(--lehti-clip); background:#fff;
}
/* Ulkoisen linkin merkki. Näkyy vasta hoverissa kuten mockupissa, mutta
   näppäimistölle myös fokuksessa — muuten merkki katoaisi juuri siltä joka ei
   käytä hiirtä. Ruudunlukijalle on erillinen .vain-lukija-teksti. */
.pp-linkki-ulos{margin-left:auto; flex:0 0 auto; display:flex; color:var(--teksti-vaalea);
  opacity:0; transition:opacity .14s ease}
.pp-linkki-ulos svg{width:14px; height:14px}
.pp-linkki:hover .pp-linkki-ulos,
.pp-linkki:focus-visible .pp-linkki-ulos{opacity:1}

/* Hallintanäkymän rivi: linkki ja sen järjestysnapit. Sama ratkaisu ja sama
   syy kuin työkalukorteissa — lomaketta ei voi upottaa <a>-elementtiin. */
.pp-linkki-kehys{display:flex; flex-direction:column; gap:7px}
.pp-linkki-kehys .pp-linkki{flex:1}

/* ---------- Mitä uutta ----------
   Korvasi vinkkilaatikon 7.9.2026. Sama tumma kortti samassa paikassa, koska
   se on etusivun ainoa vastapaino vaaleille paneeleille; vain sisältö vaihtui
   kirjoitetusta automaattiseksi. */
/* Flex-pylväs, jotta kortti voi venyä linkkilaatikon korkuiseksi ilman että
   ylijäävä tila jää sisällön keskelle: lista ylös, kehotus alas. */
.pp-uutta{
  position:relative; overflow:hidden; border-radius:20px; padding:20px; color:#fff;
  background:linear-gradient(140deg,var(--indigo) 0%,#31184F 55%,var(--yo) 100%);
  box-shadow:var(--varjo); display:flex; flex-direction:column;
}
.pp-uutta::after{
  content:""; position:absolute; right:-50px; bottom:-60px; width:190px; height:190px;
  background:rgba(201,195,253,.15); clip-path:var(--lehti-clip-peili);
}
.pp-uutta-yla{display:flex; align-items:center; gap:11px; margin-bottom:14px; position:relative}
.pp-uutta-merkki{
  width:34px; height:34px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--lavender-reuna); color:var(--indigo); clip-path:var(--lehti-clip);
}
.pp-uutta-merkki svg{width:18px; height:18px}
.pp-uutta-yla b{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--lavender-reuna); font-weight:600}

/* flex:1 eikä margin-top:auto alakehotuksessa: ylijäävä tila kuuluu listan
   perään, ja auto-marginaali olisi nollannut kehotuksen oman välin silloin
   kun tilaa ei ole. */
.pp-uutta-lista{list-style:none; margin:0; padding:0; position:relative; flex:1 0 auto}
.pp-uutta-lista li{
  display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.pp-uutta-lista li:first-child{padding-top:0}
.pp-uutta-lista li:last-child{border-bottom:0; padding-bottom:0}
/* Nimi on linkki työkaluun: uutuudesta pitää päästä itse asiaan yhdellä
   klikkauksella, muuten tieto on pelkkä ilmoitus. */
.pp-uutta-lista a{color:#fff; font-size:15px; font-weight:600; text-decoration:none}
.pp-uutta-lista a:hover{text-decoration:underline}
.pp-uutta-lista span{grid-column:1; font-size:13px; color:rgba(255,255,255,.78)}
/* .74 eikä .6: pieni teksti tummalla pohjalla, sama peruste kuin sävyjen
   --yla-vaimea-korjauksessa. */
.pp-uutta-lista time{grid-row:1; grid-column:2; font-size:12px; color:rgba(255,255,255,.74); white-space:nowrap}

.pp-uutta-tyhja{margin:0; font-size:14px; color:rgba(255,255,255,.84); position:relative;
  line-height:1.55; flex:1 0 auto}
.pp-uutta-ala{
  margin:16px 0 0; padding-top:14px; position:relative;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:13px; color:rgba(255,255,255,.78); line-height:1.5;
}
.pp-uutta-ala a{color:var(--lavender-reuna); font-weight:600}

/* ===========================================================================
   DASHBOARD
   12 saraketta (DASHBOARD-SUUNNITELMA.md). Perustelu on Mikan oma esimerkki:
   1x2 liikennevalo on 1920 px:n naytolla 160 px levea ja siihen mahtuu varin
   rinnalle vaadittu teksti. 24 sarakkeella se olisi 67 px.

   Rivimaaraa EI kiinniteta kymmeneen: grid-auto-rows tayttaa ruudun kun
   sisaltoa on ja sallii vierityksen kun sita on enemman. Kiintea katto
   tuottaisi "ei mahdu" -tilanteen heti kymmenella ruudulla.
   =========================================================================== */
.dash-ruudukko{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(72px,auto); gap:16px; margin-bottom:28px;
}
/* Leveydet ja korkeudet luokkina, koska CSP kieltaa inline-tyylit. */
.dash-ruutu.w1{grid-column:span 1}   .dash-ruutu.w2{grid-column:span 2}
.dash-ruutu.w3{grid-column:span 3}   .dash-ruutu.w4{grid-column:span 4}
.dash-ruutu.w5{grid-column:span 5}   .dash-ruutu.w6{grid-column:span 6}
.dash-ruutu.w7{grid-column:span 7}   .dash-ruutu.w8{grid-column:span 8}
.dash-ruutu.w9{grid-column:span 9}   .dash-ruutu.w10{grid-column:span 10}
.dash-ruutu.w11{grid-column:span 11} .dash-ruutu.w12{grid-column:span 12}
.dash-ruutu.h1{grid-row:span 1} .dash-ruutu.h2{grid-row:span 2}
.dash-ruutu.h3{grid-row:span 3} .dash-ruutu.h4{grid-row:span 4}
.dash-ruutu.h5{grid-row:span 5} .dash-ruutu.h6{grid-row:span 6}
.dash-ruutu.h7{grid-row:span 7} .dash-ruutu.h8{grid-row:span 8}

.dash-ruutu{
  display:flex; flex-direction:column; gap:10px; min-width:0;
  background:var(--kortti); border:1px solid var(--raja); border-radius:18px;
  box-shadow:var(--varjo); padding:15px 17px; text-decoration:none;
  color:var(--teksti); transition:border-color .15s ease, transform .15s ease;
}
.dash-ruutu:hover{border-color:var(--kortti-vari,var(--petrol)); transform:translateY(-2px)}
.dash-ruutu:focus-visible{outline:3px solid var(--lavender); outline-offset:2px}

.dash-yla{display:flex; flex-direction:column; gap:2px; min-width:0}
.dash-yla b{font-size:14px; font-weight:600; line-height:1.3}
/* Lahde nakyy aina: sama luku voi tulla kahdesta tyokalusta, ja yleiskuvassa
   on tiedettava kumpi sen omistaa. */
.dash-lahde{font-size:11.5px; color:var(--teksti-vaalea)}

.dash-sisalto{flex:1; display:flex; flex-direction:column; justify-content:center; min-width:0; gap:7px}
.dash-luku{font-family:"Bricolage Grotesque",Inter,sans-serif; font-size:32px;
  font-weight:600; line-height:1.05; letter-spacing:-.02em}
.dash-luku.pieni{font-size:19px}
.dash-ei-arvoa{font-size:13px; color:var(--teksti-vaalea)}

.dash-valo-rivi{display:flex; align-items:center; gap:10px; min-width:0}
.dash-valo{width:15px; height:15px; flex:0 0 auto;
  clip-path:var(--lehti-clip); border-radius:60% 0 60% 0; background:var(--raja-tumma)}
.dash-valo.vihrea{background:var(--vihrea)}
.dash-valo.keltainen{background:var(--keltainen)}
.dash-valo.punainen{background:var(--punainen)}
.dash-valo.harmaa{background:var(--raja-tumma)}
.dash-valo-teksti{font-size:15px; font-weight:600; min-width:0}
.dash-valo.iso{width:19px; height:19px}

/* ---------- luku varilla ---------- */
.dash-luku-lohko{display:flex; align-items:center; gap:10px; min-width:0}
.dash-luku.vari-punainen{color:var(--punainen)}
.dash-luku.vari-keltainen{color:#7A5310}
.dash-luku.vari-vihrea{color:#1E5B37}
/* Alateksti tekee luvusta itsenaisen: "12" ei kerro mitaan, "12 kpl
   kirjaamatta" kertoo. */
.dash-alateksti{font-size:12.5px; color:var(--teksti-vaalea); line-height:1.4}

/* ---------- rengas, osuuspalkki ja pylvaat ----------
   Kaikki SVG:na ja mitat attribuutteina, EI style-maareena: portaalin CSP on
   style-src 'self' ilman 'unsafe-inline':a. Siksi esim. palkin leveys on
   rectin width-attribuutti eika prosenttileveys tyylissa. */
.dash-rengas-rivi{display:flex; align-items:center; gap:14px; min-width:0}
.dash-rengas{width:88px; height:88px; flex:0 0 auto}
.dash-rengas-luku{font-size:19px; font-weight:600; fill:var(--teksti);
  font-family:"Bricolage Grotesque",Inter,sans-serif}
.dash-ruutu.kaistalla .dash-rengas-luku{fill:var(--yla-teksti)}

.dash-jakauma{display:flex; flex-direction:column; gap:10px; min-width:0}
.dash-jakauma-palkki{width:100%; height:12px; border-radius:6px; overflow:hidden; display:block}

.dash-pylvaat{display:flex; flex-direction:column; gap:5px; min-width:0}
.dash-pylvaat-kuva{width:100%; height:52px; display:block}
.dash-pylvaat-paat{display:flex; justify-content:space-between;
  font-size:11px; color:var(--teksti-vaalea)}
.dash-ruutu.kaistalla .dash-pylvaat-paat{color:var(--yla-vaimea)}

.dash-selite{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1}
.dash-selite-rivi{display:flex; align-items:center; gap:8px; min-width:0; font-size:12px}
.dash-selite-vari{display:flex; flex:0 0 auto}
.dash-selite-vari svg{width:10px; height:10px; display:block}
.dash-selite-nimi{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dash-selite-arvo{margin-left:auto; font-weight:600; white-space:nowrap}
.dash-selite-arvo small{font-weight:400; color:var(--teksti-vaalea)}
.dash-ruutu.kaistalla .dash-selite-arvo small{color:var(--yla-vaimea)}

/* Kapea ruutu (2 saraketta): selite renkaan alle, ei viereen. */
.dash-ruutu.w2 .dash-rengas-rivi,
.dash-ruutu.w1 .dash-rengas-rivi{flex-direction:column; align-items:stretch; gap:9px}
.dash-ruutu.w2 .dash-rengas,
.dash-ruutu.w1 .dash-rengas{width:64px; height:64px; margin:0 auto}

.dash-liput{display:flex; flex-direction:column; gap:7px; min-width:0}
.dash-lippu{display:flex; align-items:flex-start; gap:9px; min-width:0}
.dash-lippu .dash-valo{width:12px; height:12px; margin-top:3px}
.dash-lippu-teksti{font-size:13px; line-height:1.35; min-width:0}
.dash-lippu-teksti small{display:block; font-size:11.5px; color:var(--teksti-vaalea)}
.dash-ei-lippuja{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600}
.dash-lisaa{font-size:12px; color:var(--teksti-vaalea)}

/* Taulukko span-elementeilla eika <table>:lla: koko ruutu on <a>, ja taulukko
   linkin sisalla ei ole kelvollista HTML:aa. */
.dash-taulukko{display:flex; flex-direction:column; gap:3px; min-width:0; font-size:12.5px}
.dash-tr{display:flex; gap:10px; min-width:0}
.dash-td{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dash-td:first-child{flex:1.6}
.dash-otsikot .dash-td{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teksti-vaalea); font-weight:700}

.dash-ala{display:flex; align-items:center; gap:10px; margin-top:auto;
  padding-top:9px; border-top:1px solid var(--raja)}
.dash-aika{font-size:11.5px; color:var(--teksti-vaalea)}
/* Puuttuva data on eri asia kuin vanha data. Se sanotaan varilla, mutta myos
   sanoilla ("Ei tuotua dataa"), koska vari ei ole ainoa merkitsin. */
.dash-vanha{color:#7A5310; font-weight:600}
.dash-nuoli{margin-left:auto; display:flex; color:var(--teksti-vaalea)}
.dash-nuoli svg{width:15px; height:15px}
.dash-ruutu:hover .dash-nuoli{color:var(--petrol)}
.dash-virhe small{display:block; margin-top:4px; font-size:11.5px; overflow-wrap:anywhere}

/* ---------- dashboardin muokkaustila (V5) ----------
   Muokkaustilassa ruutu on kehyksen sisalla: kehys ottaa ruudukon paikan
   (w/h), ja napit ovat linkin ulkopuolella, koska lomake linkin sisalla ei
   ole kelvollista HTML:aa. */
.dash-tyokalurivi{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px}
.dash-viesti{margin:0 0 14px; padding:10px 14px; border-radius:10px; font-size:14px;
  background:var(--kortti); border:1px solid var(--raja)}
.dash-viesti.ok{border-color:var(--vihrea)}
.dash-viesti.virhe{border-color:var(--punainen)}
.dash-ruutu-kehys{display:flex; flex-direction:column; gap:6px; min-width:0}
.dash-ruutu-kehys > .dash-ruutu{flex:1}
.dash-ruutu-kehys.w1{grid-column:span 1}   .dash-ruutu-kehys.w2{grid-column:span 2}
.dash-ruutu-kehys.w3{grid-column:span 3}   .dash-ruutu-kehys.w4{grid-column:span 4}
.dash-ruutu-kehys.w5{grid-column:span 5}   .dash-ruutu-kehys.w6{grid-column:span 6}
.dash-ruutu-kehys.w7{grid-column:span 7}   .dash-ruutu-kehys.w8{grid-column:span 8}
.dash-ruutu-kehys.w9{grid-column:span 9}   .dash-ruutu-kehys.w10{grid-column:span 10}
.dash-ruutu-kehys.w11{grid-column:span 11} .dash-ruutu-kehys.w12{grid-column:span 12}
.dash-ruutu-kehys.h1{grid-row:span 1} .dash-ruutu-kehys.h2{grid-row:span 2}
.dash-ruutu-kehys.h3{grid-row:span 3} .dash-ruutu-kehys.h4{grid-row:span 4}
.dash-ohjaimet{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.dash-ohjaimet form{margin:0}
.dash-orpo{border-style:dashed; cursor:default}
.dash-orpo:hover{transform:none}
.dash-muokkaus-otsikko{font-size:16px; margin:6px 0 12px}
.dash-rakentaja{margin-top:26px}
.dash-rakentaja-nakyma{font-size:13.5px; line-height:1.5}
.dash-rakentaja-rivi{display:grid; grid-template-columns:2fr 1.5fr 1fr 1fr; gap:12px}
.dash-kentat{border:1px solid var(--raja); border-radius:12px; padding:12px 14px; margin:14px 0 0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px 14px}
.dash-kentat[hidden]{display:none}
.dash-kentat legend{font-size:12px; font-weight:600; padding:0 6px; color:var(--teksti-vaalea)}
.dash-valintaruutu{display:flex; align-items:center; gap:8px; font-size:13.5px}
.dash-virheet{margin:10px 0; padding:10px 14px 10px 30px; border-radius:10px;
  border:1px solid var(--punainen); font-size:13.5px}
.dash-esikatselu{margin-top:4px}
@media (max-width:900px){ .dash-rakentaja-rivi{grid-template-columns:1fr 1fr} }
.dash-vihjeet{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 14px}

/* ---------- keskitetty tuonti (paivita.php) ---------- */
.tuonti-rivi{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0}
.tuonti-rivi input[type=file]{max-width:260px; font-size:13px}
.tuonti-paneeli{margin-top:20px; border:1px solid var(--raja); border-radius:14px;
  background:var(--kortti); overflow:hidden}
.tuonti-paneeli-otsake{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid var(--raja)}
.tuonti-tila{margin-left:auto; font-size:13px; color:var(--teksti-vaalea)}
.tuonti-kehys{display:block; width:100%; height:78vh; border:0}

.kt-nakymat{margin:8px 0 0; padding-left:18px; font-size:13.5px; line-height:1.5}
.kt-nakymat small{display:block; color:var(--teksti-vaalea)}

/* ---------- tietomallin ketju (tietokanta.php) ----------
   "Mista tama luku tulee": kuka kirjoittaa, kuka lukee ja mihin luku paatyy.
   Kaksi saraketta, jotta otsake ja arvo ovat samalla rivilla; kapealla
   naytolla allekkain. */
.tk-ketju{display:grid; grid-template-columns:max-content 1fr; gap:4px 14px;
  margin:10px 0 0; font-size:13px; line-height:1.5}
.tk-ketju dt{color:var(--teksti-vaalea)}
.tk-ketju dd{margin:0; min-width:0; overflow-wrap:anywhere}
.tk-ketju code{font-size:12.5px}
@media (max-width:700px){ .tk-ketju{grid-template-columns:1fr; gap:2px} }

/* ---------- ruudut etusivun tummalla yläkaistalla ----------
   Sama piirto, eri pinta. Vaalea kortti tummalla kaistalla nayttaisi
   irralliselta laatikolta, joten kaistalla ruutu kayttaa kaistan omia
   --yla-* -varejä. Ne vaihtuvat kayttajan savyvalinnan mukaan, myos vaaleiksi,
   joten mitaan varia ei kirjoiteta tahan kiinteasti. */
.dash-ruudukko.kaistalla{margin:14px 0 0; gap:13px}
.dash-ruutu.kaistalla{
  background:var(--yla-kortti); border-color:var(--yla-raja-heikko);
  color:var(--yla-teksti); box-shadow:none;
}
.dash-ruutu.kaistalla:hover{border-color:var(--yla-raja); transform:translateY(-2px)}
.dash-ruutu.kaistalla .dash-lahde,
.dash-ruutu.kaistalla .dash-aika,
.dash-ruutu.kaistalla .dash-lisaa,
.dash-ruutu.kaistalla .dash-ei-arvoa,
.dash-ruutu.kaistalla .dash-lippu-teksti small,
.dash-ruutu.kaistalla .dash-otsikot .dash-td{color:var(--yla-vaimea)}
.dash-ruutu.kaistalla .dash-ala{border-top-color:var(--yla-raja-heikko)}
.dash-ruutu.kaistalla .dash-nuoli{color:var(--yla-vaimea)}
.dash-ruutu.kaistalla:hover .dash-nuoli{color:var(--yla-teksti)}
/* Puuttuva data kaistalla: keltainen ei erotu kaikilla savyilla, joten
   kaytetaan kaistan omaa tekstivaria ja lihavointia. Sana kertoo asian
   joka tapauksessa - vari ei ole ainoa merkitsin. */
.dash-ruutu.kaistalla .dash-vanha{color:var(--yla-teksti); font-weight:700}
.dash-ruutu.kaistalla .dash-luku{font-size:28px}
/* Merkitysvarit kaistan omina savyina: sivuston tumma vihrea #1E5B37 olisi
   tummalla kaistalla lahes lukukelvoton. Merkitys sailyy, kirkkaus vaihtuu. */
.dash-ruutu.kaistalla .dash-luku.vari-vihrea{color:var(--yla-vihrea)}
.dash-ruutu.kaistalla .dash-luku.vari-keltainen{color:var(--yla-keltainen)}
.dash-ruutu.kaistalla .dash-luku.vari-punainen{color:var(--yla-punainen)}

.pp-tilannekuva-ala{margin:13px 0 0; position:relative}
.pp-tilannekuva-ala a{color:var(--yla-teksti); font-size:13.5px; font-weight:600;
  text-decoration:none; border-bottom:1px solid var(--yla-raja); padding-bottom:2px}
.pp-tilannekuva-ala a:hover{border-bottom-color:var(--yla-teksti)}

.dash-tyhja{
  background:var(--kortti); border:1px dashed var(--raja-tumma); border-radius:20px;
  padding:44px 26px; text-align:center; margin-bottom:28px;
}
.dash-tyhja-merkki{display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin:0 auto 15px;
  background:var(--tausta); color:var(--teksti-vaalea); clip-path:var(--lehti-clip)}
.dash-tyhja-merkki svg{width:24px; height:24px}
.dash-tyhja h2{margin:0 0 7px; font-size:18px; font-weight:600}
.dash-tyhja p{margin:0 auto 14px; font-size:14.5px; color:var(--teksti-vaalea); max-width:62ch; line-height:1.55}

/* Kapealla naytolla ruudukko linearisoidaan. Kaksi tilaa riittaa: taysi
   ruudukko ja yksi sarake. Valitila olisi tyota naytonleveydelle, jolla ei ole
   yhtaan kayttajaa (DASHBOARD-SUUNNITELMA.md, "Mita EI tehda"). */
@media(max-width:900px){
  .dash-ruudukko{grid-template-columns:1fr; gap:13px}
  .dash-ruutu[class*="w"]{grid-column:1 / -1}
  .dash-ruutu[class*="h"]{grid-row:auto}
  /* Muokkaustilan kehys linearisoituu samoin kuin ruutu. */
  .dash-ruutu-kehys[class*="w"]{grid-column:1 / -1}
  .dash-ruutu-kehys[class*="h"]{grid-row:auto}
}

/* ---------- alapalkki ---------- */
.pp-alapalkki{border-top:1px solid var(--raja); background:#fff; margin-top:10px}
.pp-alapalkki-sisa{
  max-width:1280px; margin:0 auto; padding:16px 28px; display:flex; gap:18px;
  align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--teksti-vaalea);
}
.pp-alapalkki-sisa > span:last-child{margin-left:auto}
.pp-luokitus{display:inline-flex; align-items:center; gap:9px}
.pp-luokitus .pp-lehtipiste{width:11px; height:11px; background:var(--keltainen)}

/* ---------- sävyvalitsin asetusvalikossa ---------- */
/* Kiinteä rivikorkeus: ilman sitä "Telog-sininen" katkeaa kahdelle riville ja
   tekee ylärivistä korkeamman kuin alarivistä. */
.pp-savyt{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:66px; gap:7px; padding:2px 10px 8px; margin:0}
.pp-savy{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px;
  padding:7px 4px; cursor:pointer;
  border:2px solid var(--raja); border-radius:10px; background:#fff;
  font:inherit; font-size:11px; line-height:1.25; text-align:center; color:var(--teksti-vaalea);
}
.pp-savy:hover{border-color:var(--raja-tumma)}
.pp-savy:focus-visible{outline:3px solid var(--lavender); outline-offset:1px}
/* aria-current eika aria-pressed: viisi savya ovat toisensa poissulkevia
   vaihtoehtoja, joista yksi on aina voimassa. aria-pressed lupaisi vipunapin,
   jonka voi vapauttaa - tata ei voi. */
.pp-savy[aria-current="true"]{border-color:var(--lavender); color:var(--indigo); font-weight:600}
.pp-savy-nayte{width:100%; height:20px; border-radius:5px; border:1px solid rgba(9,24,51,.10)}
/* Kielivalinta käyttää sävyvalinnan nappeja ilman värinäytettä: matalampi
   rivi ja kaksi saraketta. */
.pp-savyt.pp-kielet{grid-template-columns:repeat(2,1fr); grid-auto-rows:38px}
/* Näytteiden värit ovat CSS:ssä eivätkä style-määreenä, koska askeleen 4 CSP
   kieltää inline-tyylit. */
.savy-yo{background:linear-gradient(135deg,#091833,#0b2b45)}
.savy-violetti{background:linear-gradient(135deg,#462675,#31184F)}
.savy-sininen{background:linear-gradient(135deg,#00557C,#013D5C)}
.savy-liila{background:linear-gradient(135deg,#EDEAFB,#D6D0F4)}
.savy-vaalea{background:linear-gradient(135deg,#ffffff,#E9EEF2)}

/* Savyjen --yla-* -arvot ovat assets/savyt.css:ssa. Vain alla oleva
   SAANTO jaa tanne, koska se ei ole muuttuja vaan tyyli. */
/* Vaaleilla sävyillä kaistan ja sisällön raja on sisältöpaneelin yläreunan
   viiva (--yla-paneeliraja, savyt.css): kaistan pohja ja sivun tausta ovat
   lähes samaa sävyä, joten pelkkä varjo ei erottaisi niitä. Aiempi
   border-bottom poistui, koska paneeli peittää kaistan alareunan. */

@media(max-width:1060px){
  .pp-varjot{grid-template-columns:repeat(2,1fr)}
  .pp-alarivi{grid-template-columns:1fr}
}
@media(max-width:820px){ .pp-lause{display:none} }
@media(max-width:660px){
  .pp-rajaus,.pp-palkki-sisa,.pp-alapalkki-sisa{padding-left:18px; padding-right:18px}
  /* Kapealla näytöllä yksi kortti riviin: 50 %:n katto ei saa jakaa riviä
     kahdeksi liian kapeaksi kortiksi. */
  .pp-kortit > *{flex-basis:100%; max-width:100%}
  .pp-varjot{grid-template-columns:1fr}
  .pp-tyhja-tilannekuva{grid-template-columns:1fr; padding:18px}
  /* Sama kuin paluulinkissä: rooli katoaa näkyvistä, ei ruudunlukijalta. */
  .pp-rooli span{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
  .pp-yla h1.pp-konteksti-nimi{font-size:20px}
}
/* Kapea puhelin. Ylapalkin sisallon minimileveys ylitti nakyman, jolloin KOKO
   sivu levisi nakymaa leveammaksi ja kaikki teksti valui oikeasta reunasta ulos.
   Palkki on ainoa kohta jota ei voi katkaista riville, joten se kavennetaan. */
@media(max-width:560px){
  .pp-palkki-sisa{gap:12px; padding-left:16px; padding-right:16px; min-height:60px}
  .pp-logo{gap:10px}
  .pp-logo img{height:26px}
  .pp-tuotenimi{font-size:18px; padding-left:10px}
  /* Teksti piiloon näkyvistä mutta EI saavutettavuuspuusta: se on linkin ainoa
     nimi, ja display:none jättäisi ruudunlukijalle nimettömän linkin. */
  .pp-paluu span{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
  .pp-paluu{padding:7px 10px; gap:0}
  .pp-palkki-oikea{gap:7px}
  .pp-rooli{padding:7px 10px; gap:0}
  .pp-alapalkki-sisa{gap:8px}
  .pp-alapalkki-sisa > span:last-child{margin-left:0}
  .pp-pudotus{min-width:0; width:min(300px,calc(100vw - 32px))}
  .pp-savyt{grid-template-columns:repeat(2,1fr)}
  .pp-rajaus,.pp-alapalkki-sisa{padding-left:16px; padding-right:16px}
}
@media(prefers-reduced-motion:reduce){ *{transition:none !important} }