/* css/kojelauta.css — työtilan paneelit ja niiden sisältö.
   Kehys ja vasen palsta ovat `palsta.css`:ssä, ponnahdusikkuna `ikkuna.css`:ssä, yhteisten
   tehtävien lokerot `taulu.css`:ssä ja chat `chat.css`:ssä.

   Tämä tiedosto vastaa kysymykseen *miltä yksi näkymä näyttää*: paneeli, sen otsikkorivi,
   lohkot, kortit ja lomakkeet. Lohkopaneelien oma ilme — ruudukko,
   väripinnat ja korkeuskatto — on `lohko.css`:ssä. */

.kehys{display:flex;height:100vh;overflow:hidden}

/* ---------- näkymä ----------
   Yksi paneeli, koko työtilan levyinen. Rinnakkaiset sarakkeet kokeiltiin ja hylättiin:
   380 pikselin sarakkeessa yksikään rivi ei mahtunut yhdelle riville, ja neljä yhtä aikaa
   auki olevaa näkymää vastasi kysymykseen jota kukaan ei esitä.

   Sisällöllä on oma lukuleveytensä. Paneeli saa olla leveä, rivi ei: yli 900 pikselin rivin
   alkuun on pitkä matka takaisin. */
/* Väljyys paneelien ympärillä on osa väriä: se on se oranssi joka näkyy. Kapeampi reunus
   tekisi paneeleista ruudun ja oranssista viivan. */
.tyotila{flex:1;min-width:0;display:flex;padding:18px 18px 18px 6px;overflow:hidden}
/* Paneeli kelluu palstan päällä pehmeällä varjolla. Viistetty nurkka kokeiltiin ja
   poistettiin: se oli scifi-teeman muoto, ja se jäi jäljelle teemasta jota ei enää ole —
   pyöreäkulmaisen kerman päällä se luki piirtovirheenä. */
/* `container-type` on paneelissa eikä sen sisuksessa: `@container`-kysely osuu aina
   lähimpään *esivanhempaan* säiliöön, joten sisus ei voi kysyä omaa leveyttään. Ilman tätä
   lohkoja oli kolmessa sarakkeessa myös silloin kun chat-sarake vei kolmanneksen tilasta. */
.ikkuna{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;
  container-type:inline-size;background:var(--surface);border-radius:var(--r3);
  overflow:hidden;box-shadow:var(--paneeli)}

/* Otsikko vasemmalla, sivun teko oikealla. Teko on samalla rivillä eikä sen alla: omalla
   rivillään se oli kolmas rivi ennen kuin ensimmäinen tehtävä näkyi, ja se luettiin listan
   ensimmäiseksi riviksi eikä sivun toiminnoksi. */
.ikkunan-paa{flex:none;display:flex;align-items:flex-start;gap:20px;
  padding:18px 28px 16px;border-bottom:1px solid var(--line)}
.ikkunan-nimi{flex:1;min-width:0}
.ikkunan-toiminnot{flex:none;display:flex;gap:8px;align-items:center}
.ikkunan-paa h2{font-size:20px;font-weight:650;letter-spacing:-.02em}
.ikkunan-tehtava{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ink-3);
  max-width:60ch}
/* Vieritys on vain pystysuuntaan. `overflow-y:auto` yksin ei riitä: kun toinen akseli ei ole
   `visible`, myös `visible` muuttuu `auto`ksi, ja silloin yksikin liian leveä rivi tuo
   vaakavierityspalkin. Sivuttain vieritettävä lista on lista jonka oikea reuna katoaa. */
.ikkunan-sisus{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:28px 28px 52px;
  container-type:inline-size}
/* Sisällön leveys. Kortit ovat ruudukossa, joten leveys saa olla suurempi kuin yhden rivin
   luettava mitta — yksittäinen kortti pysyy kapeana. */
.ikkunan-sisus>*{max-width:1080px}
/* Taulu on poikkeus: lokerot ovat sarakkeita ja käyttävät koko leveyden. */
.ikkunan-sisus>.lokerot{max-width:none}

/* ---------- chat-sarake ----------
   Chat on oma sarakkeensa oikeassa reunassa eikä näkymä johon poistutaan: viesti luetaan
   sen rinnalla mitä ollaan tekemässä, eikä sitä varten tarvitse jättää listaa kesken.
   Leveys on kiinteä ja sisältö saa loput; sarake vierittyy itse. */
.chatpalsta{flex:none;width:440px;display:flex;padding:18px 18px 18px 6px}
.chatpalsta .ikkuna{flex:1;min-width:0}
.chatpalsta .ikkunan-sisus{padding:16px}
.chatpalsta .ikkunan-sisus>*{max-width:none}
@media (max-width:1340px){ .chatpalsta{width:360px} }

/* ---------- päivä hoidettu ----------
   Se kolmas hetki jota ohjelmasta puuttui: aamu ja keskipäivä olivat, mutta mikään ei
   sanonut milloin voi lopettaa. */
.hoidettu{padding:26px 0 22px}
.hoidettu .iso{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.hoidettu .pieni{margin:5px 0 0;color:var(--ink-3);font-size:13.5px;max-width:56ch}

/* ---------- pikalisäys ----------
   Kenttä on aina auki. Painike joka avaa lomakkeen olisi kolme napautusta muistiinpanon ja
   myyjän välissä, ja hallilla se tarkoittaa ettei muistiinpanoa kirjoiteta.

   Kenttä ei veny koko paneelin levyiseksi: siihen kirjoitetaan yksi lause, ja tuhannen
   pikselin kenttä yhdelle lauseelle näyttää siltä että siihen odotetaan kappaletta. */
.pikalisays{display:flex;gap:6px;align-items:center;margin:0 0 18px}
.pikalisays .kentta{flex:1 1 auto;max-width:560px;min-height:38px}

/* Asetussivu on yksi paneeli, ei työtila. */
.sivu{position:relative;flex:1;min-width:0;margin:18px 18px 18px 6px;
  background:var(--surface);border-radius:var(--r3);overflow-y:auto;overflow-x:hidden;
  padding:28px 28px 48px;box-shadow:var(--paneeli)}
.sivu>*{max-width:640px}

.sivun-otsikko{font-size:19px;font-weight:600;margin:0 0 4px}

/* ---------- lohko ----------
   Otsikko on pieni ja vaimennettu, sisältö täydellä kontrastilla. Lohkolla ei ole omaa
   kehystä: paneeli on kehys, ja toinen sen sisällä olisi laatikko laatikossa. */
/* Otsikkorivin alle yksi lause siitä missä päivä on. Se korvasi kolme lukua, jotka
   toistivat sen minkä lohkot kertoivat heti alla. */
.tilanne{margin:0 0 28px;font-size:14px;color:var(--ink-3)}

.lohko{margin:0 0 40px}
.lohko-paa{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:0 8px}
/* Nimiö on versaali monospace. Se on ilmeen se osa joka ei ole väri, ja siksi sitä on vain
   nimiöissä: monospace-leipäteksti on hitaampi lukea, eikä ilme ole sen hinnan arvoinen. */
.lohko-paa h2{font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lohkovari,var(--ink-3))}

/* Lohkon väri luetaan yhdestä muuttujasta, ja se on kolmessa paikassa: otsikon teksti, sen
   edessä oleva piste ja otsikon alla kulkeva hiusviiva. Ennen väri oli vain pisteessä ja
   otsikko oli sama harmaa kaikissa lohkoissa — kuusi lohkoa allekkain luettiin silloin
   yhdeksi listaksi, jossa on välillä pieniä otsikoita.

   `data-vari` on tilan nimi eikä värin nimi. Vanhat arvot `punainen` ja `sininen` olivat
   jääneet kahden teeman taakse tarkoittamaan aivan muuta sävyä kuin mitä sanoivat. */
.lohko[data-vari="myohassa"]{--lohkovari:var(--r-myohassa)}
.lohko[data-vari="tanaan"]{--lohkovari:var(--r-tanaan)}
.lohko[data-vari="tulossa"]{--lohkovari:var(--r-tulossa)}
.lohko[data-vari="osoitettu"]{--lohkovari:var(--r-odottaa)}
.lohko[data-vari="kuittaamatta"]{--lohkovari:var(--r-valmis)}
/* Omat-näkymän kolme lohkoa ja Valmiit. *Tehtävät* saa saman sävyn kuin *Tulossa* muissa
   näkymissä: molemmissa on eräpäivä, ja väri tarkoittaa samaa kahdessa paikassa. Koeajolla
   on oma sävynsä, koska se on ainoa lohko joka ei ole ajan mukaan. */
.lohko[data-vari="kiinnitetty"]{--lohkovari:var(--r-tanaan)}
.lohko[data-vari="koeajo"]{--lohkovari:var(--r-koeajo)}
.lohko[data-vari="tehtava"]{--lohkovari:var(--r-tulossa)}
.lohko[data-vari="muistiinpano"]{--lohkovari:var(--r-muistio)}
.lohko[data-vari="valmis"]{--lohkovari:var(--r-valmis)}

.lohko[data-vari] h2::before{content:'';display:inline-block;width:7px;height:7px;
  border-radius:50%;margin-right:7px;vertical-align:middle;background:var(--lohkovari)}
/* ---------- lohkon raahaus ----------
   Lohko tarttuu otsikostaan. Koko lohkon pinta olisi väärä kahva: kortit ovat sen sisällä ja
   ne avataan napauttamalla, joten raahaus veisi sen eleen.

   Raahattava lohko jää paikalleen puoliksi läpinäkyvänä eikä katoa. Kadonneen lohkon
   paikalle jää aukko, ja silloin ruudukko hyppää joka kerta kun osoitin liikkuu. */
.lohko[data-lohko] .lohko-paa{cursor:grab}
.lohko[data-lohko] .lohko-paa:active{cursor:grabbing}
.lohko.raahataan{opacity:.45}
/* Otsikon selitekupla ei saa aueta kesken raahauksen. */
.lohko.raahataan .selitekupla{display:none}

/* Viiva katkaisee pystysuoran virran: se kertoo missä lohko alkaa ennen kuin otsikkoa on
   luettu. Se on hiusviiva eikä palkki — lohkolla ei ole omaa kehystä, koska paneeli on jo
   kehys. */
.lohko[data-vari] .lohko-paa{padding-bottom:7px;
  border-bottom:1px solid var(--lohkovari)}
.lohko-paa .luku{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-3)}
/* Selitepainike lohkon otsikkorivin oikeassa laidassa. Se on vaimea kunnes siihen osoittaa:
   selite luetaan kerran, eikä painike saa kilpailla huomiosta rivien kanssa. */
/* Kortit ruudukkoon. Koko rivin levyinen kortti neljälle sanalle on rivi eikä kortti, ja
   leveällä näytöllä siitä tulee kahdeksansataa pikseliä tyhjää otsikon perään. Sarakkeiden
   määrä seuraa kortin vähimmäisleveyttä. */
.lohko-runko{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px;align-items:start}

/* ---------- lohkon vakiokorkeus ----------
   **Jokainen lohko on saman korkuinen.** Korkeus on `--lohkon-korkeus`, ei sisällön mitta,
   ja kun kortteja on enemmän kuin korkeuteen mahtuu, lohko vierittyy itse. Pelkkä katto
   (`max-height`) esti yhtä vilkasta lohkoa venyttämästä koko riviä, mutta jätti rivit
   keskinään eri korkuisiksi — eri kokoiset paneelit luetaan eri asioiksi, vaikka ne ovat
   sama asia eri tiloissa. Hinta on tyhjä tila vähissä lohkoissa.

   Mitta on korkeus eikä korttien lukumäärä, koska kortit ovat eri korkuisia. Reunus
   oikealla on vierityspalkille: ilman sitä palkki piirtyy korttien päälle. */
/* `align-content:start` on kiinteän korkeuden pari. Ruudukko jakaa yli jäävän korkeuden
   riveilleen, joten kaksi korttia 420 pikselin lohkossa ajautui lohkon ylä- ja alalaitaan
   ja väliin jäi sata pikseliä tyhjää. Kortit alkavat yläreunasta, ja tyhjä jää alle. */
.lohkopaneelit .lohko-runko{height:var(--lohkon-korkeus);align-content:start;
  overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-width:thin}
.lohko-runko>.tyhja{grid-column:1/-1}

/* ---------- rivin taustaväri ----------
   Rivin tausta kertoo tilan tai lajin ennen kuin tekstiä on luettu. Sävyt ovat
   `perusta.css`:n signaalikaistalla; tässä on vain se mikä luokka lukee minkä muuttujan.

   Ensin tämä oli kolmen pikselin raita vasemmassa laidassa. Se ei toiminut: raita näytti
   eksyneeltä viivalta, ei rivin ominaisuudelta. Pinta luetaan yhdellä silmäyksellä, viiva
   pitää huomata. */
/* Jokainen tehtävä on oma korttinsa: reuna, pyöristys ja oma pinta. Ennen rivit olivat
   pelkkiä värialueita jotka koskettivat toisiaan, ja pitkä rivi luettiin lohkona.

   Pinta on kaikilla korteilla sama läpikuultava valkoinen, ja **tila kerrotaan vasemmalla
   reunalla**. Aiemmin jokaisella tilalla oli oma värinen pintansa; se oli kerman ajalta,
   ja petrolilla kymmenen eri väristä korttia oli kymmenen laikkua. Yksi materiaali ja
   värillinen reuna kertoo saman ilman että ruutu hajoaa.

   Vasen reuna on 5 px eikä 3: se on kortin ainoa väri, ja se kertoo tilan silloinkin kun
   kortti on rivin päässä eikä naapuria ole vieressä vertailtavaksi. */
.rivin-ylin{border:1px solid rgba(255,255,255,.10);
  border-left:5px solid rgba(255,255,255,.28);border-radius:var(--r2);
  background:rgba(255,255,255,.08);color:var(--frame-ink);
  transition:background .12s,border-color .12s}
.rivin-ylin:hover{background:rgba(255,255,255,.12)}
.rivin-ylin.v-myohassa{border-left-color:var(--r-myohassa)}
.rivin-ylin.v-tanaan{border-left-color:var(--r-tanaan)}
.rivin-ylin.v-tulossa{border-left-color:var(--r-tulossa)}
.rivin-ylin.v-koeajo{border-left-color:var(--r-koeajo)}
.rivin-ylin.v-muistiinpano{border-left-color:var(--r-muistio)}
.rivin-ylin.v-valmis{border-left-color:var(--r-valmis)}
/* Kaksi *Seuraavat tehtävät* -lohkoa piirtää yhteisten tehtävien rivejä, ja ne ovat eri
   asia: *sinulle osoitettu* odottaa sinun kuittaustasi, *odottaa kuittausta* odottaa toista.
   Ennen ne olivat kaikki `v-taulu`, eli sama väri. */
.rivin-ylin.v-osoitettu{border-left-color:var(--r-odottaa)}
.rivin-ylin.v-kuittaamatta{border-left-color:var(--r-valmis)}

/* Osoitin kirkastaa taustaa hieman. Vaalealla pohjalla vastaava ele oli tummentaminen;
   pimeällä pinnalla tummempi on kauempana eikä lähempänä, ja rivi näyttäisi painuvan
   kasaan osoittimen alla. */

.rivin-ylin .tanaan-rivi:hover,.rivin-ylin .rivin-paa:hover{background:none}

/* Kortin sisältö täyttää kortin. Ennen tässä oli valintaruutu rivin kulmassa; se poistui,
   koska ruutu on muoto eikä sana eikä kertonut mitä se tekee — sama teko on nyt avatun rivin
   ikkunassa painikkeena. */
.rivin-ylin{display:flex;align-items:flex-start}
.rivin-ylin>.rivin-paa,.rivin-ylin>.tanaan-rivi{flex:1;min-width:0}

/* ---------- rivit ----------
   Rivien välissä ei ole viivaa. Erotus on tyhjä tila ja se että osoitin nostaa rivin omalle
   pinnalleen. */
.tanaan-rivi,.rivin-paa{display:flex;align-items:flex-start;gap:12px;width:100%;
  padding:10px 12px;border:0;border-radius:var(--r1);background:none;cursor:pointer;
  text-align:left;font:inherit;color:inherit;transition:background .09s}
/* Henkilörivi kiertyy omalle rivilleen tekstipalstan ja nuolen alle. Pystyväli tulee
   `.henkilo`n omasta ylämarginaalista, joten rivien väli on sama kuin muuallakin kortissa. */
.rivin-paa{flex-wrap:wrap;row-gap:0}
.rivin-paa>.henkilorivi,.rivin-paa>.meta{flex:0 0 100%}
/* Tänään-kortti on pystysuora eikä venytä osiaan (`align-items:flex-start`), joten
   henkilörivi jäisi tekstin levyiseksi eikä oikea tasaus näkyisi lainkaan. */
.tanaan-rivi>.henkilorivi,.tanaan-rivi>.meta{align-self:stretch}

/* Kortin työnjako: vasemmassa laidassa auto ja otsikko — se mistä rivi tunnistetaan —
   oikeassa kaikki muu: eräpäivä, tila ja kenen käsissä rivi on. Kaksi laitaa on kaksi
   luettavaa saraketta; kaikki vasemmalla oli yksi pinon mittainen lause. */
.lohko .meta{text-align:right}
.tanaan-rivi{flex-direction:column;gap:1px}
.tanaan-rivi:hover,.rivin-paa:hover{background:rgba(255,255,255,.07)}
/* Auton tunnus otsikon yllä. Versaali monospace, sama nimiökieli kuin lohkojen otsikoissa:
   se on tunniste eikä lause, ja tasalevyisenä rekisterinumerot ovat allekkain samassa
   linjassa kortista toiseen. */
.auto{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.10em;color:var(--ink-3);margin-bottom:3px}
.tanaan-rivi .otsikko,.rivin-paa .otsikko{display:block;font-size:14px;font-weight:500;
  line-height:1.35}
.rivin-teksti{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.otsikko.tehty{color:var(--ink-3);text-decoration:line-through}
.tanaan-rivi.myohassa .otsikko{color:var(--punainen)}
.nuoli{flex:none;margin-top:2px;font-size:10px;color:var(--ink-3)}

.rivi .teksti{padding:2px 8px 8px;color:var(--ink-2);font-size:13px;white-space:pre-wrap}
.rivi .alkupera{padding:0 8px 8px;color:var(--ink-3);font-size:12px}

/* ---------- henkilö rivillä ----------
   Nimikirjaimet, nimi ja rooli **yhden laatan sisällä**. Ne ovat yksi tieto — *kuka ja mitä
   hän teki* — ja erillisinä ne olivat kolme irrallista palasta: pallo, teksti ja oma
   pillerinsä. Yhtenä laattana ryhmä on yksi kohde jonka silmä poimii. */
/* Kääre hoitaa asettelun, laatta ulkoasun. */
.henkilorivi{display:flex;min-width:0;margin-top:5px}
.henkilo{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--ink-2);min-width:0;max-width:100%;padding:3px 10px 3px 3px;
  border-radius:999px;background:var(--surface-3)}
.henkilo .merkki{width:20px;height:20px;font-size:9px}
.henkilo .nimi{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Lappu on laatan sisällä, joten sillä ei ole omaa pintaa: pilleri pillerin sisällä on
   kaksi reunaa saman asian ympärillä. Väri jää tekstiin. */
.henkilo .lappu{flex:none;background:none;padding:0 0 0 2px;font-size:11.5px;
  color:var(--ink-3)}
.henkilo .lappu.punainen{color:var(--punainen)}
.henkilo .lappu.keltainen{color:var(--keltainen)}
.henkilo .lappu.vihrea{color:var(--vihrea)}
.henkilo .lappu.sininen{color:var(--sininen)}

/* Kuvake ottaa värinsä tekstiltä (`currentColor`) ja on tarkennerivin kirjainkorkuinen:
   suurempana se olisi kuva rivillä, pienempänä viiva katoaisi. */
.kuvakekuori{display:inline-flex;align-items:center;vertical-align:-3px}
.kuvake{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* Kortilla henkilörivi on **oikeassa reunassa**. Kortin vasen reuna on otsikon reuna, ja
   nimi sen alla luettiin otsikon jatkoksi; oikeaan laitaan siirrettynä se on oma tietonsa
   eikä osa lausetta. Ikkunassa rivi jää vasemmalle — siellä se on tekstiä muun tekstin
   seassa, ei kortin nurkkatieto. */
.lohko .henkilorivi{justify-content:flex-end}
/* Ensisijainen täytettynä, loput vaaleina ääriviivoina, poisto punareunaisena oikeassa
   laidassa. Poistokin on painike eikä teksti: se on harvinaisin toiminto rivillä, mutta
   harvinainen ei tarkoita näkymätöntä. */
.rivin-napit{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:0 8px 10px 11px}
.rivin-napit .vali{flex:1}
.nappi.vaarallinen{color:var(--punainen);background:var(--surface);
  border-color:var(--punainen-pehmea)}
.nappi.vaarallinen:hover{background:var(--punainen-pehmea);border-color:var(--punainen)}

.loki{margin:4px 8px 0;padding:8px 10px;border-radius:var(--r1);
  background:var(--surface-2)}
.loki-rivi{display:flex;gap:9px;font-size:12px;color:var(--ink-2);padding:1px 0}
.loki-rivi .aika{color:var(--ink-3);white-space:nowrap}

/* ---------- työkalurivi ----------
   Pikalisäys ja suodin ovat yksi ryhmä otsikkopaneelin alla: molemmat ovat työkaluja saman
   listan yläpuolella. Niiden omat marginaalit nollataan ryhmän sisällä — muuten ruudukon
   rivinväli ja marginaali laskettiin yhteen, ja kahden työkalurivin väliin jäi enemmän tilaa
   kuin kahden lohkon väliin.

   Sääntö on `.pikalisays`- ja `.tyokalut`-sääntöjen **jälkeen** tässä tiedostossa: yhtä
   tarkat valitsimet ratkaistaan järjestyksessä, ja aiemmin tämä hävisi sille jonka se yritti
   kumota. */
.tyorivi{display:flex;flex-direction:column;gap:6px;margin:0 0 2px}
.tyorivi>.pikalisays,.tyorivi>.tyokalut{margin:0}

.tyokalut{display:flex;gap:8px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
.tyokalut>.suodin{flex:1;min-width:200px}
.suodin{display:flex;gap:6px;flex-wrap:wrap}
.suodin .kentta{min-height:32px;font-size:13px;padding:6px 9px}
/* Haku vie jäljelle jäävän tilan; valinnat ovat sisältönsä levyisiä. Kolme yhtä leveää
   alasvetovalikkoa vierekkäin oli sama virhe kuin lomakkeessa: leveys tuli asettelusta eikä
   sisällöstä. */
.suodin .haku{flex:1 1 220px;min-width:160px;max-width:340px}
.suodin .valinta{flex:0 0 auto;width:auto;min-width:0}

/* ---------- lomake ---------- */
/* Lomake on kaksipalstainen ruudukko. Kenttä on niin leveä kuin sen sisältö, ei niin leveä
   kuin lomake: päivämäärä ja valinta vievät puolikkaan, otsikko ja kuvaus koko rivin.
   Pystypino jossa jokainen kenttä oli sata prosenttia ei ollut päätös vaan se mitä
   `width:100%` teki kun asettelua ei annettu. */
.lomake{margin:0 0 16px;padding:12px;background:var(--surface-2);border-radius:var(--r2);
  display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;align-items:start;
  max-width:680px}
/* Auton kolme kenttää yhtenä rivinä: ne ovat yksi tieto kolmessa osassa, ja lomakkeen
   kahdessa palstassa kolmas putosi omalle rivilleen niin että se näytti erilliseltä
   kysymykseltä. Kenttärivi vie lomakkeessa kaksi palstaa, joten auton rivin sisällä sen
   leveys nollataan — muuten kolme kaksipalstaista kenttää putoaa allekkain. */
.autokentat{grid-column:span 2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 12px}
.autokentat>.kentta-rivi{grid-column:auto}
/* Auton kentät kirjoittavat versaalilla. `text-transform` on ulkoasu; sääntö on
   `KOJE.isoiksi()` tallennuksessa. Vihje jää pieniksi kirjaimiksi, jotta sen erottaa
   kirjoitetusta tekstistä. */
.autokentta{text-transform:uppercase}
.autokentta::placeholder{text-transform:none}
/* Asiakkaan kentät vierekkäin kuten auton: yksi tieto osissa. Vain koeajolla. */
.asiakaskentat{grid-column:span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px}
.asiakaskentat>.kentta-rivi{grid-column:auto}
/* Kenttäryhmän nimiö, kenttien omia vaimeampi: se on ryhmän nimi eikä kysymys. */
.kenttaryhman-nimio{grid-column:span 2;margin:2px 0 -4px;color:var(--ink-3);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* Muistutuksen pikavalinnat eräpäivän alla. Rivi on matala ja painikkeet pieniä: nämä ovat
   oikopolku kalenteriin eivätkä oma kysymyksensä, ja täysimittaisina ne olisivat lomakkeen
   näkyvimmät painikkeet — tallennuksen edellä. */
.pikapaivat{grid-column:span 2;display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  margin-top:-4px}
.kentta-rivi{grid-column:span 2;display:flex;flex-direction:column;gap:4px}
.kentta-rivi.kapea{grid-column:span 1}
/* Päivä ja kello vierekkäin: kalenteri vie jäljelle jäävän tilan, kellonaikaluettelo on
   sisältönsä levyinen. Yhtä leveinä ne näyttäisivät kahdelta samanlaiselta kysymykseltä. */
.erakentat{display:flex;gap:6px;align-items:center}
.erakentat input[type="date"]{flex:1 1 auto;min-width:0}
.erakentat select{flex:0 0 auto;width:auto}
.era-valinta{display:flex;align-items:center;gap:8px}

.kentta-rivi.vaaka{flex-direction:row;align-items:center;gap:8px}
.kentta-rivi .nimio{color:var(--ink-2);font-size:12px;font-weight:600}
/* Puuttuva kenttä kerrotaan lomakkeessa, painikkeen vieressä. Ruudun yläreunan virhepalkki
   on liian kaukana siitä mihin katse on: ikkunassa se jää kokonaan huomaamatta. */
.lomakevirhe{grid-column:span 2;margin:0;padding:9px 12px;background:var(--punainen-pehmea);
  border-left:3px solid var(--punainen);color:var(--punainen);font-size:13px;font-weight:600}
.kentta.puuttuu{border-color:var(--punainen);
  box-shadow:0 0 0 3px rgba(194,38,31,.16), inset 0 1px 2px rgba(74,54,26,.06)}
.lomakkeen-napit{grid-column:span 2;display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}

/* ---------- kapea ruutu ----------
   Palsta kääntyy yläriviksi ja paneelit menevät allekkain. */
/* Kapealla ruudulla palstoja on yksi: puolikas 320 pikselin ruudulla ei ole kenttä. */
@media (max-width:640px){
  .lomake{grid-template-columns:1fr}
  .autokentat{grid-template-columns:1fr}
  /* Kortilta jää pois nimi ja roolilappu (*Kirjoitti*, *Kuittaamatta*, *Osoitti*). Kapealla
     ruudulla ne veivät oman rivinsä jokaisesta kortista, ja lista luetaan otsikoista — kenen
     nimi rivillä on selviää avaamalla rivi. Kiire jää, koska se on ainoa tieto joka muuttaa
     lukujärjestystä: se kuuluu tarkenneriviin eikä henkilöriviin. */
  .lohko .henkilorivi{display:none}
}

/* Kapealla ruudulla palsta kääntyy yläriviksi. Palstan omat säännöt ovat `palsta.css`:ssä
   samassa media-lohkossa: sama raja, kaksi tiedostoa, eri vastuu. */
@media (max-width:900px){
  .tyotila{padding:10px;overflow:visible}
  /* Chat on oma sivunsa: se korvaa työtilan eikä ole sen alapuolella. Alapuolella se oli
     koko päivän tehtävälistan takana, eikä mikään kertonut että siellä on jotain. */
  .chatpalsta{width:auto;padding:10px}
  body.chat-auki .tyotila{display:none}
  /* Korkeus on ruudun korkeus miinus yläpalkki. `dvh` on tärkeä juuri tässä: puhelimen
     osoiterivi piilottaa osan `vh`:sta, ja kirjoituskenttä jäisi sen alle. */
  .chatpalsta .ikkuna{max-height:none;height:calc(100vh - 64px);height:calc(100dvh - 64px)}
  .ikkuna{flex:1 1 auto}
  .ikkunan-paa{padding:13px 16px 11px}
  .ikkunan-sisus{overflow:visible;padding:16px}
  .sivu{margin:10px;padding:18px 16px 36px}
}