/* Työkalun tyylit. Kaikki arvot tulevat design/tokens.css:stä — täällä ei ole hex-koodeja.
 *
 * Puhelimen omat värit ovat design/puhelin.css:ssä eivätkä täällä: puhelin esittää
 * WhatsAppia tai tekstiviestisovellusta, ei Nostea. DESIGN.md sääntö 10.
 */

* { box-sizing: border-box; }

/* `hidden` on attribuutti, ei luokka, ja selaimen oma `display:none` tulee UA-tyyleistä —
 * jonka mikä tahansa kirjoitettu `display` voittaa. `.portti { display: grid }` teki siis
 * kirjautumisruudusta pysyvästi näkyvän, ja kirjautuminen näytti jumittavan.
 *
 * Tämä rivi on siksi ennen kaikkea muuta: jokainen `display`-sääntö tässä tiedostossa on
 * mahdollinen sama vika, eikä sitä huomaa ennen kuin jokin piilotettava ei piiloudu. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--pinta-tausta);
  color: var(--muste);
  font: var(--paino-normaali) var(--koko-teksti)/1.55 var(--fontti-teksti);
}

/* ── runko ─────────────────────────────────────────────────────────────────
   Sama kolmiosainen runko joka näkymässä. Oikea palsta on olemassa vain kun
   näkymällä on kontekstia näytettävänä — tyhjä palsta on tilan tuhlausta. */

.runko {
  display: grid;
  grid-template-columns: var(--navi-leveys) minmax(0, 1fr);
  height: 100%;
}
.runko--palsta { grid-template-columns: var(--navi-leveys) minmax(0, 1fr) var(--palsta-leveys); }

/* ── navigaatio ──────────────────────────────────────────────────────────── */

.navi {
  background: var(--pinta-tumma);
  color: var(--muste-kaannetty);
  display: flex; flex-direction: column;
  padding: var(--vali-5) 0 var(--vali-4);
  overflow-y: auto;
}
.navi__logo {
  font: var(--paino-otsikko) 17px/1 var(--fontti-otsikko);
  letter-spacing: .02em; text-transform: uppercase;
  padding: 0 var(--vali-5) var(--vali-5);
}
.navi__ryhma {
  font: var(--paino-vahva) var(--koko-pieni-otsikko)/1 var(--fontti-otsikko);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muste-kaannetty-hillitty);
  padding: var(--vali-5) var(--vali-5) var(--vali-2);
}
.navi__rivi {
  display: flex; align-items: center; gap: var(--vali-2);
  padding: var(--vali-2) var(--vali-5);
  color: var(--muste-kaannetty-hillitty);
  text-decoration: none;
  font-size: var(--koko-teksti);
  border: 0; background: none; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--fontti-teksti);
}
.navi__rivi:hover { color: var(--muste-kaannetty); }
.navi__rivi[aria-current="page"] {
  background: var(--minttu-nav);
  color: var(--muste-kaannetty);
  font-weight: var(--paino-vahva);
}
.navi__spacer { flex: 1 1 auto; }
.navi__jalki {
  padding: var(--vali-4) var(--vali-5) 0;
  border-top: 1px solid var(--viiva-kaannetty);
  margin-top: var(--vali-4);
  color: var(--muste-kaannetty-hillitty);
  font-size: var(--koko-selite);
}
.navi__kone { font-family: var(--fontti-kone); font-size: var(--koko-kone); }
/* Muistutus siitä, ettei numeroa näytetä. Se on lupaus, ei puute. */
.navi__lupaus { margin-top: var(--vali-3); line-height: 1.4; }

/* Odottavien luonnosten määrä — työkalun ainoa huomiomerkki. */
.navi__maara {
  margin-left: auto;
  background: var(--minttu); color: var(--muste);
  font: var(--paino-vahva) var(--koko-kone)/1 var(--fontti-kone);
  padding: 3px 8px; border-radius: var(--pyoristys-pilleri);
}

/* ── otsikkorivi ja työalue ──────────────────────────────────────────────── */

.tyo { display: flex; flex-direction: column; min-width: 0; height: 100%; }

.otsikkorivi {
  background: var(--pinta-kortti);
  border-bottom: 1px solid var(--viiva);
  padding: var(--vali-4) var(--vali-5);
  display: flex; align-items: center; gap: var(--vali-4);
  flex: 0 0 auto;
}
.otsikkorivi__nimi {
  font: var(--paino-otsikko) var(--koko-nayton-otsikko)/1.1 var(--fontti-otsikko);
  letter-spacing: .02em; text-transform: uppercase; margin: 0;
}
.otsikkorivi__kone {
  font-family: var(--fontti-kone); font-size: var(--koko-kone);
  color: var(--muste-vaimea); margin-top: 3px;
}
.otsikkorivi__teot { margin-left: auto; display: flex; align-items: center; gap: var(--vali-2); }

.alue { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--vali-5); }

.palsta {
  background: var(--pinta-kortti);
  border-left: 1px solid var(--viiva);
  box-shadow: var(--varjo-palsta);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.palsta__otsikko {
  font: var(--paino-vahva) var(--koko-pieni-otsikko)/1 var(--fontti-otsikko);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muste-vaimea);
  padding: var(--vali-4) var(--vali-4) var(--vali-2);
}
.palsta__sisalto { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 var(--vali-4) var(--vali-4); }

/* ── napit ───────────────────────────────────────────────────────────────── */

.nappi {
  font: var(--paino-vahva) var(--koko-teksti)/1 var(--fontti-teksti);
  padding: 9px 14px; border-radius: var(--pyoristys-nappi);
  border: 1px solid var(--viiva-vahva); background: var(--pinta-kortti); color: var(--muste);
  cursor: pointer;
}
.nappi:hover { border-color: var(--muste); }
.nappi:disabled { opacity: .5; cursor: default; }
/* Ensisijainen on mintulla täytetty. Yksi per kortti — jos niitä on kaksi, kumpikaan ei ole. */
.nappi--ensi { background: var(--minttu); border-color: var(--minttu); color: var(--muste); }
.nappi--tumma { background: var(--pinta-tumma); border-color: var(--pinta-tumma); color: var(--muste-kaannetty); }
/* Tuhoava teko ei ole nappi joka näyttää ensisijaiselta. */
.nappi--hillitty { border-color: transparent; background: none; color: var(--muste-hillitty); }
.nappi--hillitty:hover { color: var(--muste); border-color: transparent; }
.nappi--pieni { padding: 5px 10px; font-size: var(--koko-tiivis); }

/* ── segmentoitu valitsin ────────────────────────────────────────────────── */

.segmentti { display: inline-flex; background: var(--pinta-harmaa); border-radius: var(--pyoristys-nappi); padding: 2px; }
.segmentti__nappi {
  border: 0; background: none; cursor: pointer;
  font: var(--paino-keski) var(--koko-tiivis)/1 var(--fontti-teksti);
  color: var(--muste-hillitty); padding: 7px 12px; border-radius: 6px;
}
.segmentti__nappi[aria-pressed="true"] {
  background: var(--pinta-kortti); color: var(--muste); font-weight: var(--paino-vahva);
  box-shadow: var(--varjo-kortti);
}

/* ── kentät ──────────────────────────────────────────────────────────────── */

.nimio {
  display: block;
  font: var(--paino-vahva) var(--koko-pieni-otsikko)/1 var(--fontti-otsikko);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muste-vaimea);
  margin-bottom: var(--vali-2);
}
.kentta {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--viiva-vahva); border-radius: var(--pyoristys-nappi);
  background: var(--pinta-kortti); color: var(--muste);
  font: var(--paino-normaali) var(--koko-teksti)/1.5 var(--fontti-teksti);
}
.kentta:focus { outline: 2px solid var(--vihrea-teksti); outline-offset: -1px; }
.kentta--kone { font-family: var(--fontti-kone); font-size: var(--koko-kone); }
textarea.kentta { resize: vertical; }

/* ── kortit ja pinot ─────────────────────────────────────────────────────── */

.pino { display: flex; flex-direction: column; gap: var(--vali-3); }
.kortti {
  background: var(--pinta-kortti); border: 1px solid var(--viiva);
  border-radius: var(--pyoristys-kortti); padding: var(--vali-4);
}
.kortti--nostettu { box-shadow: var(--varjo-kortti); border-color: transparent; }
.kortti__nimi { font: var(--paino-vahva) 14px/1.3 var(--fontti-teksti); }
.kortti__hillitty { color: var(--muste-hillitty); font-size: var(--koko-tiivis); }
.kone { font-family: var(--fontti-kone); font-size: var(--koko-kone); color: var(--muste-vaimea); }

/* ── putki ───────────────────────────────────────────────────────────────── */

/* Sarakkeet kutistuvat kun tila loppuu. Kiinteällä leveydellä kuusi saraketta vaatii noin
   1680 px, eli viimeiset jäivät läppärillä ruudun reunan taakse — ja juuri niissä on se,
   mitä pitäisi tehdä seuraavaksi. Vaakavieritys ei kelpaa: näkymän koko idea on, että
   tilanne näkyy yhdellä silmäyksellä. */
.putki { display: flex; gap: var(--vali-3); align-items: flex-start; min-height: 100%; }
.sarake {
  flex: 1 1 var(--sarake-vaihe); min-width: 0;
  display: flex; flex-direction: column; gap: var(--vali-2);
}
.sarake--jono { flex: 1.4 1 var(--sarake-jono); }
.sarake__otsikko, .putkikortti { min-width: 0; }
.putkikortti { overflow-wrap: anywhere; }
.sarake__otsikko {
  font: var(--paino-vahva) var(--koko-sarake-otsikko)/1 var(--fontti-otsikko);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muste-vaimea);
  display: flex; align-items: center; gap: var(--vali-2);
}
.sarake__laatikko {
  border-radius: var(--pyoristys-laatikko); padding: 10px;
  display: flex; flex-direction: column; gap: 6px; min-height: 80px;
}
/* Vain ensimmäinen sarake on täytetty: viesti lähtee ulos vain siitä. */
.sarake--jono .sarake__laatikko { background: var(--minttu-tausta); border: 1.5px solid var(--minttu); }
.sarake__selite { font-size: var(--koko-selite); color: var(--muste-hillitty); }

/* Kortti on silmäiltävä, ei luettava.
 *
 * Kuudessa sarakkeessa on kymmenen korttia, ja putken koko idea on että tilanne näkyy
 * yhdellä silmäyksellä ilman vieritystä. Siksi kortin sisällä mennään yhtä askelta
 * pienemmällä kuin muualla työkalussa: nimi on yhä kortin suurin asia, mutta kone ja
 * repliikit kutistuvat. Koko keskustelu on hiiren alla, joten kortille ei tarvitse
 * mahduttaa luettavaa tekstiä. */
.putkikortti {
  background: var(--pinta-kortti); border: 1px solid var(--viiva);
  border-radius: var(--pyoristys-kortti); padding: var(--vali-2) 10px;
  cursor: pointer; text-align: left; width: 100%; font-family: var(--fontti-teksti);
  display: flex; flex-direction: column; gap: 2px;
}
.putkikortti:hover { border-color: var(--muste); }

/* Yli budjetin venynyt odotus. Reuna eikä täyttö: kortti on yhä sama kortti samassa
   sarakkeessa, ja se on tarkoitus — muistutus on havainto, ei uusi vaihe. Sama keltainen
   kuin "ei toimitustietoa", koska kyse on samasta asiasta: aika kuluu eikä kukaan tiedä. */
.putkikortti--kylma { border-color: var(--huomio-reuna); border-left-width: 3px; }
.putkikortti--kylma:hover { border-color: var(--huomio-teksti); }

.putkikortti .kortti__nimi { font-size: var(--koko-teksti); line-height: 1.25; }
.putkikortti .kortti__hillitty { font-size: var(--koko-selite); line-height: 1.35; }
.putkikortti .kone { font-size: 11px; line-height: 1.35; }
/* Kapeassa sarakkeessa huomiomerkki on monirivinen. Oletus on yksirivinen pilleri, ja se
   työntäisi tekstin kortin reunan yli. */
.putkikortti .huomio {
  display: flex; align-items: flex-start; text-align: left;
  font-size: 10.5px; line-height: 1.3; padding: 3px 6px; margin-top: 2px;
}

/* Sääntöjen tai luokittelun havaitsema ihmispyyntö. Huomioväri eikä mintun sävy: tämä on
   asia, joka odottaa ihmistä, eikä minttu ole tässä työkalussa huomion väri. */
.kortti__pyynto {
  font: var(--paino-vahva) var(--koko-selite)/1.35 var(--fontti-teksti);
  color: var(--huomio-teksti);
}

/* ── viestiketju työkalun puolella ───────────────────────────────────────── */

.ketju { display: flex; flex-direction: column; gap: var(--vali-3); }
.kupla {
  max-width: 88%; padding: var(--vali-3);
  border-radius: var(--pyoristys-kupla);
  font-size: var(--koko-viesti); line-height: 1.5; overflow-wrap: anywhere;
}
.kupla--meilta { align-self: flex-end; background: var(--minttu-tausta); }
.kupla--heilta { align-self: flex-start; background: var(--pinta-kortti); border: 1px solid var(--viiva); }
/* Ei lähetetty: luonnos tai kuivaharjoitus. Katkoviiva erottaa sen lähteneestä. */
.kupla--eilahtenyt { background: none; border: 1px dashed var(--viiva-vahva); color: var(--muste-hillitty); }
.kupla__loki {
  margin-top: var(--vali-2);
  font-family: var(--fontti-kone); font-size: var(--koko-kone); color: var(--muste-vaimea);
}
.ketju__paiva {
  align-self: center; font-family: var(--fontti-kone); font-size: var(--koko-kone);
  color: var(--muste-vaimea);
}

/* ── luonnoskortti ───────────────────────────────────────────────────────── */

.luonnos {
  background: var(--minttu-tausta); border: 1.5px solid var(--minttu);
  border-radius: var(--pyoristys-laatikko); padding: var(--vali-4);
}
.luonnos__otsikko {
  font: var(--paino-vahva) var(--koko-pieni-otsikko)/1 var(--fontti-otsikko);
  letter-spacing: .12em; text-transform: uppercase; color: var(--vihrea-teksti);
  margin-bottom: var(--vali-3);
}
.luonnos__sisalto {
  background: var(--pinta-kortti); border-radius: var(--pyoristys-nappi);
  padding: var(--vali-3); font-size: var(--koko-viesti); line-height: 1.5;
}
.luonnos__teot { display: flex; gap: var(--vali-2); align-items: center; margin-top: var(--vali-3); flex-wrap: wrap; }
.luonnos__muistutus { font-size: var(--koko-selite); color: var(--muste-hillitty); }
/* Hyväksytty siirtyy mustaan tilaan: se ei ole enää muokattavissa, vaan odottaa lähtöä. */
.hyvaksytty {
  background: var(--pinta-tumma); color: var(--muste-kaannetty);
  border-radius: var(--pyoristys-laatikko); padding: var(--vali-4);
}
.hyvaksytty .luonnos__sisalto { background: rgba(255,255,255,.08); color: var(--muste-kaannetty); }
.hyvaksytty .luonnos__otsikko { color: var(--minttu); }

/* ── merkit ──────────────────────────────────────────────────────────────── */

.merkki {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fontti-kone); font-size: var(--koko-kone); color: var(--muste-vaimea);
}
.pallo { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.pallo--taysi { background: var(--vihrea-teksti); }
.pallo--ontto { border: 1.5px solid var(--viiva-vahva); }
/* Kolmas tila lähetetyn ja perillä olevan välissä. Oma väri, ei mintun sävy. */
.huomio {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--huomio-tausta); border: 1px solid var(--huomio-reuna);
  color: var(--huomio-teksti); border-radius: var(--pyoristys-merkki);
  padding: 2px 8px; font-family: var(--fontti-kone); font-size: var(--koko-kone);
}
.tarkistus { display: flex; align-items: center; gap: var(--vali-2); font-size: var(--koko-tiivis); }
.tarkistus__ympyra {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 11px;
  background: var(--minttu); color: var(--muste);
}
.tarkistus__ympyra--puuttuu { background: var(--huomio-tausta); color: var(--huomio-teksti); }

/* ── taulukko ────────────────────────────────────────────────────────────── */

.taulukko { width: 100%; border-collapse: collapse; }
.taulukko th {
  text-align: left; padding: var(--vali-2) var(--vali-3);
  font: var(--paino-vahva) 10px/1 var(--fontti-otsikko);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muste-vaimea);
  border-bottom: 1px solid var(--viiva);
}
.taulukko td { padding: var(--vali-3); border-bottom: 1px solid var(--viiva-kevyt); font-size: var(--koko-teksti); }
.taulukko tr.klikattava { cursor: pointer; }
.taulukko tr.klikattava:hover td { background: var(--pinta-hillitty); }

/* ── ilmoitukset ja tyhjä tila ───────────────────────────────────────────── */

.ilmoitus {
  border-radius: var(--pyoristys-nappi); padding: var(--vali-3);
  font-size: var(--koko-teksti); background: var(--pinta-hillitty); color: var(--muste-hillitty);
}
.ilmoitus--huomio { background: var(--huomio-tausta); border: 1px solid var(--huomio-reuna); color: var(--huomio-teksti); }
.tyhja { text-align: center; padding: var(--vali-6) var(--vali-4); }
.tyhja__iso { font: var(--paino-otsikko) 18px/1.3 var(--fontti-otsikko); text-transform: uppercase; letter-spacing: .02em; }
.tyhja__otsikko {
  font: var(--paino-vahva) var(--koko-osion-otsikko)/1 var(--fontti-otsikko);
  letter-spacing: .10em; text-transform: uppercase; color: var(--muste-vaimea);
  margin: var(--vali-5) 0 var(--vali-3);
}

/* ── portti ──────────────────────────────────────────────────────────────── */

.portti { display: grid; place-items: center; height: 100%; padding: var(--vali-5); }
.portti__laatikko { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--vali-3); }

/* ── puhelin ───────────────────────────────────────────────────────────────
 *
 * Rakenne on täällä, värit design/puhelin.css:ssä. Tästä alaspäin ollaan
 * vastaanottajan sovelluksessa: ei Nosteen värejä, ei mintua.
 */

.puhelin {
  width: 100%; max-width: 380px; margin: 0 auto;
  height: 100%; min-height: 420px;
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--varjo-kortti);
}
.puhelin--wa { background: var(--wa-tausta); }
.puhelin--sms { background: var(--sms-tausta); }

.puhelin__palkki { flex: 0 0 auto; padding: 10px 14px; }
.puhelin--wa .puhelin__palkki { background: var(--wa-palkki); color: var(--wa-saapuva); }
.puhelin--sms .puhelin__palkki { background: var(--sms-palkki); color: var(--sms-teksti); border-bottom: 1px solid var(--sms-reuna); }
.puhelin__nimi { font-weight: var(--paino-vahva); font-size: 14.5px; }
.puhelin__tila { font-size: 11.5px; opacity: .8; }

.puhelin__virta {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; padding: 12px;
}
.puhelin__tyhja { font-size: var(--koko-selite); text-align: center; padding: var(--vali-5) 0; }
.puhelin--wa .puhelin__tyhja { color: var(--wa-vaimea); }
.puhelin--sms .puhelin__tyhja { color: var(--sms-vaimea); }

.bub { max-width: 80%; padding: 7px 11px; font-size: 14.2px; line-height: 1.42; overflow-wrap: anywhere; }
.bub--sisaan { align-self: flex-start; }
.bub--ulos { align-self: flex-end; }
.bub--korjattava { cursor: pointer; }
.bub--korjattava:hover { filter: brightness(.97); }
.bub--hiljaa { background: transparent !important; font-style: italic; box-shadow: none; }

.puhelin--wa .bub { color: var(--wa-teksti); border-radius: 8px; }
.puhelin--wa .bub--sisaan { background: var(--wa-saapuva); border-top-left-radius: 0; }
.puhelin--wa .bub--ulos { background: var(--wa-oma); border-top-right-radius: 0; }
.puhelin--wa .bub__meta { color: var(--wa-vaimea); }
.bub__kuittaus { color: var(--wa-kuittaus); }

.puhelin--sms .bub { color: var(--sms-teksti); border-radius: 18px; }
.puhelin--sms .bub--sisaan { background: var(--sms-saapuva); border: 1px solid var(--sms-reuna); }
.puhelin--sms .bub--ulos { background: var(--sms-oma); border: 1px solid var(--sms-reuna); }
.puhelin--sms .bub__meta { color: var(--sms-vaimea); }

.bub__meta { float: right; margin: 6px 0 -2px 8px; font-size: 11px; }

.puhelin__rivi {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end; padding: 8px; flex-wrap: wrap;
}
.puhelin--wa .puhelin__rivi { background: var(--wa-palkki); }
.puhelin--sms .puhelin__rivi { background: var(--sms-palkki); border-top: 1px solid var(--sms-reuna); }
.puhelin__syote {
  flex: 1 1 140px; resize: none; min-height: 40px; max-height: 120px;
  padding: 10px 15px; border: 0; border-radius: var(--pyoristys-pilleri);
  font: var(--paino-normaali) 14.2px/1.42 var(--fontti-teksti);
  background: var(--wa-saapuva); color: var(--wa-teksti);
}
.puhelin--sms .puhelin__syote { background: var(--sms-oma); color: var(--sms-teksti); box-shadow: inset 0 0 0 1px var(--sms-reuna); }

/* ── ohje ──────────────────────────────────────────────────────────────────
   Pitkä luettava teksti. Kapeampi palsta kuin muu työalue: rivi, joka on
   sata merkkiä pitkä, luetaan huonommin kuin kuudenkymmenen. */

.ohje { max-width: 62ch; }
.ohje__h1 {
  font: var(--paino-otsikko) var(--koko-nayton-otsikko)/1.2 var(--fontti-otsikko);
  text-transform: uppercase; letter-spacing: .02em; margin: 0 0 var(--vali-4);
}
.ohje__h2 {
  font: var(--paino-vahva) var(--koko-osion-otsikko)/1.3 var(--fontti-otsikko);
  text-transform: uppercase; letter-spacing: .10em; color: var(--muste-vaimea);
  margin: var(--vali-6) 0 var(--vali-2);
}
.ohje__kappale { margin: 0 0 var(--vali-3); font-size: var(--koko-viesti); line-height: 1.6; }
.ohje__lista { margin: 0 0 var(--vali-3); padding-left: var(--vali-5); }
.ohje__lista li { margin-bottom: var(--vali-2); font-size: var(--koko-viesti); line-height: 1.6; }

/* Puhuja kuplan yläpuolella. Ei monospacea: tämä on nimilappu, ei koneen tietoa. */
.kuplarivi { display: flex; flex-direction: column; gap: 3px; max-width: 88%; }
.kuplarivi--meilta { align-self: flex-end; align-items: flex-end; }
.kuplarivi--heilta { align-self: flex-start; align-items: flex-start; }
.kuplarivi .kupla { max-width: 100%; }
.kupla__kuka {
  font: var(--paino-vahva) var(--koko-pieni-otsikko)/1 var(--fontti-otsikko);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muste-vaimea);
}

/* Napit tummalla pinnalla.
 *
 * `nappi--hillitty` on tummaa tekstiä läpinäkyvällä taustalla, ja mustan kortin päällä se
 * on mustaa mustalla: nappi on olemassa mutta näkymätön. Sama vian luokka kuin
 * `[hidden]`-attribuutin kanssa — mikään ei ole rikki, se vain ei näy. Tummalle pinnalle
 * tulevat napit tarvitsevat siksi omat muunnoksensa. */
.nappi--kaannetty {
  background: none; color: var(--muste-kaannetty);
  border-color: var(--viiva-kaannetty);
}
.nappi--kaannetty:hover { border-color: var(--muste-kaannetty); }
.nappi--kaannetty-hillitty {
  background: none; border-color: transparent;
  color: var(--muste-kaannetty-hillitty);
}
.nappi--kaannetty-hillitty:hover { color: var(--muste-kaannetty); border-color: transparent; }

/* ── viestit aikajärjestyksessä ────────────────────────────────────────────
   Aika vasemmalla omana sarakkeenaan, jotta silmä voi juosta sitä pitkin
   lukematta tekstejä. */

.virta { display: flex; flex-direction: column; }
.virta__paiva {
  font: var(--paino-vahva) var(--koko-pieni-otsikko)/1 var(--fontti-otsikko);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muste-vaimea);
  padding: var(--vali-4) 0 var(--vali-2);
}
.virta__rivi {
  display: grid; grid-template-columns: 52px 68px minmax(0, 1fr);
  gap: var(--vali-3); align-items: start;
  width: 100%; text-align: left; cursor: pointer;
  border: 0; border-top: 1px solid var(--viiva-kevyt); background: none;
  padding: var(--vali-3) var(--vali-2);
  font-family: var(--fontti-teksti); color: var(--muste);
}
.virta__rivi:hover { background: var(--pinta-hillitty); }
.virta__aika { font-family: var(--fontti-kone); font-size: var(--koko-kone); color: var(--muste-vaimea); }
.virta__kuka {
  font: var(--paino-vahva) var(--koko-pieni-otsikko)/1.4 var(--fontti-otsikko);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muste-vaimea);
}
.virta__sisalto { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.virta__teksti { font-size: var(--koko-viesti); line-height: 1.45; overflow-wrap: anywhere; }
.virta__meta { display: flex; flex-wrap: wrap; gap: var(--vali-2); align-items: center; }

/* Viimeisimmät repliikit putken kortilla. Kaksi riviä tekstiä enintään: kortti on
   silmäiltävä, ei luettava. Viisi viimeistä repliikkiä on kortin title-attribuutissa. */
.viimeisimmat {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--viiva-kevyt);
  display: flex; flex-direction: column; gap: 3px;
}
.viimeisin { display: block; font-size: var(--koko-selite); line-height: 1.35; }
.viimeisin__kuka {
  font: var(--paino-vahva) 9.5px/1 var(--fontti-otsikko);
  letter-spacing: .10em; text-transform: uppercase; color: var(--muste-vaimea);
  margin-right: 5px;
}
.viimeisin__aika { font-family: var(--fontti-kone); font-size: 10.5px; color: var(--muste-vaimea); margin-right: 5px; }
.viimeisin__teksti {
  color: var(--muste-hillitty);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}