/* ULKOASU — hyväksytty 2.8.2026. Tämä tiedosto on ULKOASU.md:n token-lohko koodina.
   🔴 Jos jokin sääntö rikkoutuu tässä, korjataan tämä tiedosto — ei sääntöä.

   Viisi asiaa jotka eivät saa muuttua:
   1 · Oranssi = odottaa ihmistä. Vihreä = kone tai valmis. Ei koristekäyttöä.
   2 · Monospace vain tiedostopoluissa ja mallitunnuksissa. Luvut Interillä,
       `font-variant-numeric: tabular-nums`.
   3 · Neljä kiinteää kerrosta: yläpalkki 58 · välilehdet 48 · ctx 238 · alapalkki 62.
   4 · Välilehti pysyy auki kun ympäristö vaihtuu.
   5 · Valikkonappi on oikotie, ei piilotettu valikko.

   ⚠️ simulaatio/index.html oli kuva, ei pohja. Arvot ja rakenne on kopioitu, ei tiedosto. */

:root{
  --musta:#14171A; --musta-2:#1E2328; --musta-3:#2C3238;
  --oranssi:#FF6A13; --oranssi-tumma:#D9550A;
  --oranssi-savy:#FFF2E8; --oranssi-reuna:#FFD9BD;
  --vihrea:#0E8A55; --vihrea-kirkas:#16BC77; --vihrea-savy:#E7F6EE;
  --tausta:#F5F7F4; --kortti:#FFFFFF; --viiva:#E3E8E3; --viiva-2:#EEF1EE;
  --teksti:#191D1B; --vaimea:#6B7671; --vaimein:#98A29D;
  --punainen:#D14343; --punainen-savy:#FDECEC;
  --ylapalkki-h:58px; --valilehdet-h:48px; --ctx:238px; --alapalkki-h:62px;
  /* 🔴 Johdetut mitat. Sisallon reunus lasketaan NAISTA, ei kasin lasketusta
     luvusta. ⚠️ Kasin laskettu luku on oikein sen paivan jonka se
     kirjoitetaan; muuttuja on oikein aina. */
  --valikkonappi-h:56px;
  --turva-ylos:env(safe-area-inset-top, 0px);
  --turva-alas:env(safe-area-inset-bottom, 0px);
  --kuori-ylos:calc(var(--ylapalkki-h) + var(--turva-ylos));
  --kuori-katto:calc(var(--kuori-ylos) + var(--valilehdet-h) + 1px);
  --kuori-lattia:calc(var(--alapalkki-h) + var(--turva-alas));
  --varjo:0 1px 2px rgba(20,23,26,.05), 0 8px 24px rgba(20,23,26,.06);
  --varjo-nosto:0 6px 18px rgba(20,23,26,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--tausta);color:var(--teksti);font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Outfit,Inter,sans-serif;font-weight:600;margin:0;letter-spacing:-.01em}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.86em}
button{font:inherit;cursor:pointer}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,106,19,.35)}
[hidden]{display:none !important}

/* ── YLÄPALKKI · 58 px ── */
.ylapalkki{position:fixed;top:0;left:0;right:0;height:var(--kuori-ylos);z-index:60;
  padding-top:var(--turva-ylos);box-sizing:border-box;
  background:var(--musta);color:#fff;display:flex;align-items:center;gap:13px;padding:0 16px}
.brandi{display:flex;align-items:center;gap:9px;min-width:0;font-family:Outfit;font-weight:600;font-size:16px;line-height:1.15}
.pallo{width:27px;height:27px;border-radius:9px;background:linear-gradient(135deg,var(--oranssi),#FF9C4A);
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700;flex:none}
.brandi small{color:#8C948F;font-weight:400;font-size:11px;display:block}
.ymparisto{margin-left:4px;display:flex;align-items:center;gap:8px;min-width:0;background:var(--musta-2);
  border:1px solid var(--musta-3);color:#fff;border-radius:11px;padding:6px 11px;font-size:13.5px;font-weight:500}
.ymparisto:hover{border-color:#454D53}
.piste{width:7px;height:7px;border-radius:50%;background:var(--vihrea-kirkas);flex:none}
.piste.pois{background:var(--vaimein)}
.ylaoikea{margin-left:auto;display:flex;align-items:center;gap:9px;flex:0 0 auto}
.kello{color:#8C948F;font-size:12.5px;white-space:nowrap}
.havain{background:var(--musta-2);border:1px solid var(--musta-3);color:#fff;border-radius:11px;
  width:36px;height:36px;display:grid;place-items:center;position:relative}
.merkkipiste{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--oranssi)}
.kuva{width:33px;height:33px;border-radius:11px;background:var(--vihrea);display:grid;place-items:center;
  color:#fff;font-size:12.5px;font-weight:600;font-family:Outfit;flex:none}
.ctxnappi{display:none;background:var(--musta-2);border:1px solid var(--musta-3);color:#fff;
  border-radius:11px;width:36px;height:36px;place-items:center}

/* ── VÄLILEHDET · 48 px — mitä tästä katson ── */
.valilehdet{position:fixed;top:var(--kuori-ylos);left:0;right:0;z-index:55;height:var(--valilehdet-h);
  background:var(--kortti);border-bottom:1px solid var(--viiva);display:flex;
  padding-left:calc(var(--ctx) + 14px);overflow-x:auto;scrollbar-width:none}
.valilehdet::-webkit-scrollbar{display:none}
.valilehdet button{flex:0 0 auto;background:none;border:0;border-bottom:3px solid transparent;
  color:var(--vaimea);font-weight:500;font-size:14.5px;padding:0 16px;height:100%;
  display:flex;align-items:center;gap:8px}
.valilehdet button:hover{color:var(--teksti)}
.valilehdet button[aria-current="true"]{color:var(--teksti);border-bottom-color:var(--oranssi);font-weight:600}
.valilehdet .lkm{background:var(--oranssi-savy);color:var(--oranssi-tumma);border-radius:20px;
  padding:1px 8px;font-size:11.5px;font-weight:600}
.valilehdet button[aria-current="true"] .lkm{background:var(--oranssi);color:#fff}

/* ── CTX · 238 px — mitä sovellusta katson ── */
.ctx{position:fixed;top:var(--kuori-ylos);bottom:0;left:0;width:var(--ctx);z-index:56;
  background:var(--kortti);border-right:1px solid var(--viiva);padding:16px 12px 24px;overflow:auto}
.ctx .otsake{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--vaimein);
  font-weight:600;padding:0 8px 9px}
.ctx a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;
  color:var(--teksti);text-decoration:none;font-size:14px;margin-bottom:2px}
.ctx a:hover{background:var(--viiva-2)}
.ctx a[aria-current="true"]{background:var(--oranssi-savy);color:var(--oranssi-tumma);font-weight:600}
.ctx .nimi{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rasti{width:8px;height:8px;border-radius:50%;flex:none}
.ctx .selite{padding:4px 10px 0;color:var(--vaimea);font-size:12.5px;line-height:1.5}
.ero{height:1px;background:var(--viiva);margin:13px 6px}

/* ── SISÄLTÖ ── */
main{padding:calc(var(--kuori-katto) + 24px) 26px calc(var(--kuori-lattia) + var(--valikkonappi-h) + 36px) calc(var(--ctx) + 26px);
  max-width:1560px}
.sivuotsikko{margin-bottom:18px}
.sivuotsikko h1{font-size:27px}
.sivuotsikko p{margin:3px 0 0;color:var(--vaimea);font-size:14px;max-width:70ch}

/* ── TILANNE — etusivun kaksi lukua ── */
.tilanne{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.tila{background:var(--kortti);border:1px solid var(--viiva);border-radius:16px;padding:16px 18px;box-shadow:var(--varjo)}
.tila b{display:block;font-family:Outfit;font-size:30px;font-weight:600;line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.tila span{display:block;font-size:12.5px;color:var(--vaimea);margin-top:3px}
.tila.huomio{background:linear-gradient(180deg,#fff 30%,var(--oranssi-savy));border-color:var(--oranssi-reuna)}
.tila.huomio b{color:var(--oranssi-tumma)}
.tila.hyva b{color:var(--vihrea)}
/* 🔴 Mittaamaton ei ole oranssi eikä vihreä: se ei odota sinua eikä ole valmis. */
.tila.eimitattu b{color:var(--vaimein)}

/* ── KORTIT ── */
.kortti{background:var(--kortti);border:1px solid var(--viiva);border-radius:16px;padding:20px;
  box-shadow:var(--varjo);margin-bottom:14px}
.kortti.huomio{border-left:4px solid var(--oranssi)}
.kortti h3{font-size:18px}
.merkit{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.merkki{font-size:11.5px;font-weight:600;border-radius:20px;padding:3px 10px;
  background:var(--viiva-2);color:var(--vaimea);white-space:nowrap;display:inline-block}
.merkki.oranssi{background:var(--oranssi-savy);color:var(--oranssi-tumma)}
.merkki.vihrea{background:var(--vihrea-savy);color:var(--vihrea)}
.merkki.punainen{background:var(--punainen-savy);color:var(--punainen)}
.merkki.musta{background:var(--musta);color:#fff}
.lohko{margin-top:15px;padding-top:14px;border-top:1px solid var(--viiva-2)}
.lohko>b{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--vaimein);font-weight:600;margin-bottom:7px}
.lohko p{margin:0;font-size:14.5px}
.teot{margin-top:17px;display:flex;gap:8px;flex-wrap:wrap}
.nap{border:1px solid var(--viiva);background:var(--kortti);color:var(--teksti);
  border-radius:11px;padding:9px 15px;font-size:14px;font-weight:500}
.nap:hover{border-color:var(--musta-3)}
.nap.paa{background:var(--oranssi);border-color:var(--oranssi);color:#fff;font-weight:600}
.nap.paa:hover{background:var(--oranssi-tumma)}
.nap[disabled],.pika[disabled]{opacity:.45;cursor:not-allowed}
.nap[disabled]:hover,.pika[disabled]:hover{border-color:var(--viiva)}
.polku{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--vaimea)}
.vaimea{color:var(--vaimea)}
.syy{display:block;color:var(--vaimea);font-size:12.3px;margin-top:2px;max-width:38ch;font-weight:400}

/* ── TAULUN LISÄT ──
   ⚠️ KESKUS-1 ja KESKUS-2 kirjoittivat taulukkoluokat samaan aikaan, kumpikin
   omaan osaansa. Jäljelle jäi KESKUS-2:n versio (alempana): se purkaa taulun
   riveiksi puhelimessa, mikä on parempi kuin vaakavieritys — vieritys piilottaa
   sarakkeen eikä kerro siitä. Tässä on vain se mikä puuttui siitä.
   🔴 Älä lisää tähän toista `.taulukortti`-määrittelyä. Kaksi versiota samasta
   asiasta eroaa viikossa. */
/* Luvut tabular-nums-asetuksella, ei monospacella — pysyvät silti sarakkeessa. */
td.n{text-align:right;font-variant-numeric:tabular-nums}
.eimit{color:var(--oranssi-tumma);font-weight:600;font-size:13px}
tr.klik{cursor:pointer}
tr.klik:hover td{background:var(--viiva-2)}

/* ── HUOMIO JA TYHJÄ ── */
.huomiolaatikko{background:var(--oranssi-savy);border:1px solid var(--oranssi-reuna);
  border-radius:16px;padding:18px;margin-bottom:16px}
.huomiolaatikko h3{color:var(--oranssi-tumma);font-size:16.5px;margin-bottom:6px}
.huomiolaatikko p{margin:0;font-size:14px} .huomiolaatikko p+p{margin-top:8px}
/* Tyhjä näkymä kertoo mitä tehdä — «Ei tuloksia» ei ole ohje. */
.tyhja{background:var(--kortti);border:1px dashed var(--viiva);border-radius:16px;padding:22px}
.tyhja h3{font-size:16.5px;margin-bottom:7px}
.tyhja p{margin:0 0 8px;color:var(--vaimea);font-size:14px;max-width:66ch}
.tyhja .merkki{margin-bottom:10px}

/* ── SYÖTE ── */
.syote{display:flex;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.syote input{flex:1;min-width:220px;background:var(--kortti);border:1px solid var(--viiva);
  border-radius:12px;padding:12px 15px;font:inherit;color:var(--teksti)}
.syote input::placeholder{color:var(--vaimein)}
.virhe{color:var(--punainen);font-size:14px;margin:8px 0 0}

/* ── ALAPALKKI · 62 px ── */
.alapalkki{position:fixed;bottom:0;left:var(--ctx);right:0;height:var(--kuori-lattia);z-index:58;
  padding-bottom:var(--turva-alas);box-sizing:border-box;
  background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-top:1px solid var(--viiva);
  display:flex;align-items:center;gap:9px;padding:0 22px}
.pika{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--viiva);
  border-radius:12px;padding:9px 14px;font-size:14px;font-weight:500;color:var(--teksti);white-space:nowrap}
.pika:hover{border-color:var(--musta-3)}
.pika.paa{background:var(--oranssi);border-color:var(--oranssi);color:#fff;font-weight:600}
.oikealle{margin-left:auto;display:flex;gap:10px;align-items:center}

/* ── VALIKKO — oikotie, ei piilotettu valikko ── */
.valikkonappi{position:fixed;right:20px;bottom:calc(var(--kuori-lattia) + 18px);z-index:70;
  width:56px;height:56px;border-radius:19px;border:0;background:var(--musta);color:#fff;
  display:grid;place-items:center;box-shadow:var(--varjo-nosto)}
.valikkonappi:hover{background:var(--musta-2)}
.arkki{position:fixed;right:20px;bottom:calc(var(--kuori-lattia) + 84px);z-index:70;width:272px;
  background:var(--kortti);border:1px solid var(--viiva);border-radius:18px;box-shadow:var(--varjo-nosto);
  padding:8px;display:none}
.arkki.auki{display:block;animation:tulo .18s ease}
.arkki .otsake{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--vaimein);
  font-weight:600;padding:9px 12px 5px}
.arkki button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;
  border:0;border-radius:11px;padding:10px 12px;font-size:14.5px;color:var(--teksti)}
.arkki button:hover{background:var(--viiva-2)}
.ik{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ctxtausta{position:fixed;inset:0;background:rgba(20,23,26,.42);z-index:55;display:none}

@keyframes tulo{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── PORTTI — kirjautuminen ilman kuoren neljää kerrosta ── */
.portti{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--tausta)}
.portti .laatikko{background:var(--kortti);border:1px solid var(--viiva);border-radius:16px;
  box-shadow:var(--varjo);padding:26px;max-width:430px;width:100%}
.portti .brandi{color:var(--teksti);margin-bottom:4px}
.portti .brandi small{color:var(--vaimea)}
.portti h1{font-size:21px;margin:14px 0 4px}

/* ── TABLETTI ── */
@media (max-width:1180px){
  :root{--ctx:196px}
  main{padding-left:calc(var(--ctx) + 18px);padding-right:18px}
}
/* ── PUHELIN — ctx vetäytyy, alapalkki ja valikkonappi jäävät ── */
@media (max-width:820px){
  :root{--ctx:0px;--alapalkki-h:66px}
  .valilehdet{padding-left:8px}
  .ctx{width:266px;transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:var(--varjo-nosto);border-radius:0 18px 0 0}
  .ctx.auki{transform:none}
  .ctxtausta.auki{display:block}
  main{padding:calc(var(--kuori-katto) + 16px) 14px calc(var(--kuori-lattia) + var(--valikkonappi-h) + 28px)}
  .alapalkki{left:0;padding:0 12px;gap:7px;overflow-x:auto;justify-content:flex-start}
  .pika{flex:0 0 auto;font-size:13.5px;padding:9px 12px}
  .oikealle{display:none}
  .valikkonappi{width:52px;height:52px;right:14px;bottom:calc(var(--kuori-lattia) + 14px)}
  .arkki{right:14px;left:14px;width:auto;bottom:calc(var(--kuori-lattia) + 76px)}
  .kello{display:none}
  .ymparisto .nimi{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sivuotsikko h1{font-size:23px}
  .ctxnappi{display:grid}
  .brandi small{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── TAULUKKO — jaettu näkymien kesken (KESKUS-2, osat 6 ja 7) ──
   🔴 Yksi luokka eikä kaksi kopiota näkymätiedostoissa. Sama sääntö jota
   koodipankki saarnaa: kaksi versiota samasta asiasta eroaa viikossa. */
.taulukortti{padding:0;overflow:hidden}
.taulukortti>header{display:flex;align-items:baseline;gap:10px;
  padding:15px 20px;border-bottom:1px solid var(--viiva-2)}
.taulukortti>header h3{margin:0}
.taulukortti table{width:100%;border-collapse:collapse;font-size:14px}
.taulukortti th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--vaimein);padding:10px 20px;
  border-bottom:1px solid var(--viiva-2)}
.taulukortti td{padding:13px 20px;border-bottom:1px solid var(--viiva-2);
  vertical-align:top;line-height:1.5}
.taulukortti tr:last-child td{border-bottom:0}
.taulukortti .ylarivi{display:block;font-size:11px;color:var(--vaimein);margin-bottom:3px}
.taulukortti a.polku{border-bottom:1px solid var(--viiva);word-break:break-all}
.taulukortti a.polku:hover{border-bottom-color:var(--vaimea)}
.sirut{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.lahderivi{margin-top:18px;padding-top:14px;border-top:1px solid var(--viiva);
  font-size:12.5px;color:var(--vaimea);line-height:1.6}
/* Kopioitava lohko. Käyttää .mono-luokkaa, ei omaa kirjasinta. */
.lohkoesikatselu{margin:12px 0 0;padding:12px 14px;background:var(--tausta);
  border:1px solid var(--viiva);border-radius:12px;font-size:11.5px;line-height:1.55;
  color:var(--vaimea);white-space:pre-wrap;max-height:190px;overflow:auto}
.lohkokentta{width:100%;min-height:160px;margin-top:10px;border:1px solid var(--viiva);
  border-radius:12px;padding:12px;font-size:11.5px;background:var(--kortti);
  color:var(--teksti)}

/* Puhelin: taulukko puretaan riveiksi. Kolme saraketta ei mahdu 360 px:iin,
   eikä vaakavieritys ole vastaus — se piilottaa kolmannen sarakkeen. */
@media (max-width:820px){
  .taulukortti table,.taulukortti tbody,.taulukortti tr,.taulukortti td{display:block}
  .taulukortti thead{display:none}
  .taulukortti td{border-bottom:0;padding:3px 16px}
  .taulukortti tr{border-bottom:1px solid var(--viiva-2);padding:12px 0}
  .taulukortti td[data-sarake]::before{content:attr(data-sarake);display:block;
    font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--vaimein);margin-bottom:2px}
}

/* Suodatinnappi joka odottaa avaamista. KESKUS-2, osa 6. */
.sirut .nap[data-piilossa]{display:none}

/* ── KAPEA RUUTU — ylapalkki ei leikkaudu koskaan. KESKUS-2, vika 5 ──
   🔴 Kayttajamerkki ei kutistu eika katoa: se on ainoa merkki siita
   kenena olet kirjautunut, ja vaarana kayttajana tehty toimenpide on
   pahempi kuin puuttuva nappi. Ymparistovalitsin kutistuu ensin. */
@media (max-width:430px){
  .ylapalkki{gap:9px;padding:0 12px}
  .ylapalkki{padding-top:var(--turva-ylos)}
  .brandi small{display:none}
  .brandi{overflow:hidden}
  .ymparisto{padding:6px 9px;overflow:hidden}
  .ymparisto .nimi{display:none}
}