/* Päivärahalaskurin testipenkki
   ------------------------------------------------------------------
   Visuaalinen kieli: vaalea paperitausta, ohuet hiusviivat, neliömäiset
   kulmat ja monospace-nimiöt. Leipäteksti on groteski, mutta kaikki
   koneellinen tieto (tunnukset, numerot, päivämäärät, nimiöt) on
   monospacea — asiantuntija erottaa yhdellä silmäyksellä, mikä on
   selittävää tekstiä ja mikä järjestelmän dataa. */

:root {
    --vari-tausta: #f5f6f7;
    --vari-kortti: #ffffff;
    --vari-reunus: #e2e5e9;
    --vari-reunus-vahva: #c6cbd1;
    --vari-korostus: #ebeef1;
    --vari-teksti: #1c2024;
    --vari-teksti-pehmea: #333a41;
    --vari-hento: #767c84;
    --vari-hento-vaalea: #9aa1a9;
    --vari-ensisijainen: #1f4e79;
    --vari-ensisijainen-tumma: #153a5b;
    --vari-ok: #2d6a4f;
    --vari-varoitus: #8a6a1f;
    --vari-virhe: #a3271b;

    --fontti: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --fontti-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

    --pyoristys: 2px;
    --pyoristys-kortti: 3px;
    --sivun-leveys: 1240px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 40px 80px;
    font-family: var(--fontti);
    font-size: 15px;
    line-height: 1.5;
    background: var(--vari-tausta);
    color: var(--vari-teksti);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--vari-ensisijainen); text-decoration: none; }
a:hover { color: var(--vari-ensisijainen-tumma); text-decoration: underline; }

input, button, select, textarea { font: inherit; color: inherit; }

/* Sivun rakenne ------------------------------------------------------ */

.sivu-otsake {
    max-width: var(--sivun-leveys);
    margin: 0 auto;
    padding: 40px 0 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    border-bottom: 1px solid var(--vari-reunus);
}
.sivu-otsake-teksti { display: flex; flex-direction: column; gap: 8px; }
.sivu-otsake-linkit {
    display: flex; align-items: center; gap: 22px;
    padding-bottom: 4px; font-size: 14px; white-space: nowrap;
}

.sivu-runko { max-width: var(--sivun-leveys); margin: 0 auto; padding-top: 36px; }

/* Kapealla näytöllä otsake latistuu pinoksi eikä sivu pääse vierimään
   vaakasuunnassa — työkalu on pöytäkoneen, mutta ei saa rikkoutua. */
@media (max-width: 760px) {
    body { padding: 0 20px 60px; }
    .sivu-otsake {
        flex-direction: column; align-items: flex-start;
        gap: 16px; padding: 28px 0 20px;
    }
    .sivu-otsake-linkit { padding-bottom: 0; white-space: normal; }
    .sivu-runko { padding-top: 26px; }
    .rivitaulu { display: block; overflow-x: auto; }
}

h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.015em; }
@media (max-width: 760px) { h1 { font-size: 24px; } h2 { font-size: 22px; } }
h1:focus { outline: none; }
h2 { margin: 0; font-size: 27px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
h4 {
    margin: 22px 0 8px;
    font-family: var(--fontti-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--vari-hento);
}

/* Monospace-nimiö: osion tunniste, ei otsikko. */
.nimio {
    font-family: var(--fontti-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vari-hento);
}

.hento { color: var(--vari-hento); font-weight: normal; font-size: .88em; }

/* Asettelu ----------------------------------------------------------- */

.palsta-asettelu {
    display: grid;
    grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}
@media (max-width: 1100px) { .palsta-asettelu { grid-template-columns: 1fr; gap: 28px; } }

.syote-palsta, .tulos-palsta { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.kortti {
    background: var(--vari-kortti);
    border: 1px solid var(--vari-reunus);
    border-radius: var(--pyoristys-kortti);
    padding: 20px 22px;
}

/* Lomakkeet ---------------------------------------------------------- */

/* Kenttä on lohko, ei pystyflex. Pystyflexissä jokainen lapsi — myös
   nimiön perässä oleva sulkuvihje "(tyhjä = jatkuu)" — saa oman rivinsä
   ja työntää syötteen alaspäin, jolloin vierekkäisten kenttien rivit
   menevät eri linjaan. Lohkona vihje pysyy nimiön perässä ja vain syöte
   aloittaa uuden rivin. */
.kentta { display: block; font-size: 14px; font-weight: 500; }
.kentta + .kentta { margin-top: 14px; }
.kentta input, .kentta select, .kentta textarea { font-weight: normal; }
.kentta > input, .kentta > select, .kentta > textarea, .kentta > .pvm-kentta {
    display: block; margin-top: 6px;
}
/* Lauseenmittainen vihje omalle rivilleen — sulkuvihje jää nimiön perään. */
.hento-rivi { display: block; margin-top: 2px; }

.kentta-vaaka { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.kentta-vaaka > input, .kentta-vaaka > select, .kentta-vaaka > .pvm-kentta { margin-top: 0; }

input, select, textarea {
    padding: 9px 11px;
    background: var(--vari-kortti);
    border: 1px solid var(--vari-reunus-vahva);
    border-radius: var(--pyoristys);
    font-size: 14px;
}
input[type="date"], input[type="number"] { font-family: var(--fontti-mono); }
input:focus, select:focus, textarea:focus { border-color: var(--vari-ensisijainen); outline: none; }
input[type="checkbox"] { padding: 0; accent-color: var(--vari-ensisijainen); }

.rivitaulu { width: 100%; border-collapse: collapse; }
.rivitaulu th {
    text-align: left; padding: 0 8px 6px 0;
    font-family: var(--fontti-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--vari-hento);
}
.rivitaulu th .hento { text-transform: none; letter-spacing: 0; }
.rivitaulu td { padding: 0 8px 8px 0; vertical-align: top; }
.rivitaulu td:last-child, .rivitaulu th:last-child { padding-right: 0; width: 28px; }
.rivitaulu input, .rivitaulu select { width: 100%; padding: 8px 10px; min-width: 0; }

.nappi {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--vari-reunus-vahva);
    border-radius: var(--pyoristys);
    font-size: 13px;
    cursor: pointer;
}
.nappi:hover:not(:disabled) { border-color: var(--vari-teksti); }
.nappi:disabled { border-color: var(--vari-reunus); color: var(--vari-hento-vaalea); cursor: default; }
.nappi-ensisijainen {
    background: var(--vari-ensisijainen);
    border-color: var(--vari-ensisijainen);
    color: #fff;
    font-weight: 500;
}
/* color toistetaan hoverissa: ilman sitä a:hover (app.css:n yleissääntö, ks. tiedoston alku)
   voittaisi tämän .nappi-ensisijainen-luokan valkoisen tekstin spesifisyydellään linkkinä
   toimiville painikkeille (<a class="nappi nappi-ensisijainen">) — teksti sulautuisi
   tummennettuun taustaan näkymättömiin. Napit (<button>) eivät osu a-sääntöön, joten bugi
   näkyi vain linkkipainikkeissa, kuten "Lähetä testiraportti". */
.nappi-ensisijainen:hover:not(:disabled) {
    background: var(--vari-ensisijainen-tumma); border-color: var(--vari-ensisijainen-tumma); color: #fff;
}
.nappi-ensisijainen:disabled { background: transparent; color: var(--vari-hento-vaalea); }
.nappi-suuri { padding: 12px 26px; font-size: 15px; }
.laske-nappi { align-self: flex-start; letter-spacing: .04em; }
/* Lisäysnappi: katkoviiva kertoo, että rivi vasta syntyy. */
.nappi-lisaa {
    align-self: flex-start;
    border-style: dashed; border-color: #b4bac1;
    white-space: nowrap;
}
.nappi-lisaa:hover { border-style: solid; }
.nappi-poista {
    width: 28px; height: 28px; padding: 0;
    background: none; border: none; border-radius: var(--pyoristys);
    color: var(--vari-hento); font-size: 16px; line-height: 1; cursor: pointer;
}
.nappi-poista:hover { color: var(--vari-virhe); background: var(--vari-korostus); }
.nappi-muokkaa {
    width: 28px; height: 28px; padding: 0;
    background: none; border: none; border-radius: var(--pyoristys);
    color: var(--vari-hento); font-size: 14px; line-height: 1; cursor: pointer;
}
.nappi-muokkaa:hover { color: var(--vari-ensisijainen); background: var(--vari-korostus); }

.linkkinappi {
    padding: 0; border: none; background: none;
    color: var(--vari-ensisijainen); font-size: 13px;
    text-align: left; cursor: pointer;
}
.linkkinappi:hover { text-decoration: underline; }
.linkkinappi.valittu { font-weight: 600; }

.skenaariot { display: flex; flex-wrap: wrap; gap: 8px; }

.parametri-ruudukko { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.parametri-ruudukko .kentta + .kentta { margin-top: 0; }
/* Koko rivin levyinen kenttä ruudukossa (esim. PAR-014-kertymämallin valinta). */
.parametri-ruudukko .kentta-levea { grid-column: 1 / -1; }
.kytkin-ruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 6px; margin: 14px 0; }
.kytkin {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--fontti-mono); font-size: 12px; cursor: help;
}

details > summary { cursor: pointer; font-size: 14px; }
details > summary:hover { color: var(--vari-ensisijainen); }
.virheviesti { color: var(--vari-virhe); font-weight: 500; }

/* Tuloskortti -------------------------------------------------------- */

.tulos-paaluku { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.tulos-arvo { font-family: var(--fontti-mono); font-size: 38px; font-weight: 500; letter-spacing: -.02em; }
.tulos-yksikko { font-size: 15px; color: var(--vari-hento); }
.tulos-keskeytyi { color: var(--vari-hento); }

.badge {
    margin-left: auto; padding: 3px 10px;
    border-radius: var(--pyoristys);
    font-family: var(--fontti-mono); font-size: 11px;
    letter-spacing: .06em; text-transform: uppercase;
}
.badge-ok { background: #e8f1ec; color: var(--vari-ok); }
.badge-virhe { background: #f6e8e6; color: var(--vari-virhe); }

.valitulokset { width: 100%; border-collapse: collapse; font-size: 14px; }
.valitulokset td { padding: 7px 8px; border-top: 1px solid var(--vari-reunus); }
.valitulokset td:first-child { color: var(--vari-hento); }
.valitulokset td:last-child {
    text-align: right; font-family: var(--fontti-mono);
    font-variant-numeric: tabular-nums; font-weight: 500;
}

/* Suoritusloki ------------------------------------------------------- */

.suodattimet { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.suodatin {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--vari-reunus);
    border-radius: var(--pyoristys);
    font-family: var(--fontti-mono); font-size: 11px;
    cursor: pointer; color: var(--vari-hento);
}
.suodatin.valittu { background: var(--vari-kortti); border-color: var(--vari-ensisijainen); color: var(--vari-teksti); }
.suodatin input { display: none; }

.loki { width: 100%; border-collapse: collapse; font-size: 13px; }
.loki td { padding: 7px 6px; border-top: 1px solid var(--vari-reunus); vertical-align: top; }
.loki .vaihe-otsikko td {
    padding-top: 20px; border-top: none;
    font-family: var(--fontti-mono); font-size: 11px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--vari-hento);
}
.loki-merkki { width: 22px; text-align: center; }
.loki-tunnus { width: 76px; font-family: var(--fontti-mono); font-size: 12px; }
.loki-selite { color: var(--vari-teksti-pehmea); line-height: 1.55; }
.loki-saanto { font-weight: 500; margin-bottom: 2px; }

.laji-muutti .loki-merkki { color: var(--vari-ok); }
.laji-eivaikutusta, .laji-eisoveltunut { color: var(--vari-hento); }
.laji-ohitettukytkimella { color: var(--vari-varoitus); }
.laji-ohitettukytkimella .loki-selite { font-style: italic; }
.laji-valvottu .loki-merkki { color: var(--vari-ensisijainen); }
.laji-huomautus { background: #faf6ec; }
.laji-huomautus .loki-merkki { color: var(--vari-varoitus); }
.laji-keskeytyi { background: #f9eeec; font-weight: 500; }
.laji-keskeytyi .loki-merkki { color: var(--vari-virhe); }

.parametrit-taulu { border-collapse: collapse; font-size: 13px; }
.parametrit-taulu td { padding: 3px 16px 3px 0; font-variant-numeric: tabular-nums; }
.parametrit-taulu td:first-child { font-family: var(--fontti-mono); font-size: 12px; }

.kaiku { font-size: 13px; color: var(--vari-hento); }
.tyhja-tila { color: var(--vari-hento); }
.tyhja-tila p { margin: 0 0 10px; line-height: 1.6; }
.tyhja-tila p:last-child { margin-bottom: 0; }

/* Bugiraportin vienti ja tuonti -------------------------------------- */

.raportti-napit { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.raportti-ilmoitus { font-size: 13px; font-weight: 500; margin: 12px 0 0; }
.raportti-esikatselu { margin-top: 14px; font-size: 13px; }
.raportti-json {
    max-height: 18rem; overflow: auto; margin: 10px 0 0;
    background: #fafbfc; border: 1px solid var(--vari-reunus); border-radius: var(--pyoristys);
    padding: 12px; font-family: var(--fontti-mono); font-size: 12px; white-space: pre;
}
.tuonti { margin-top: 16px; font-size: 14px; }
.tuonti-kentta { width: 100%; font-family: var(--fontti-mono); font-size: 12px; }

/* Työssäoloehdon vaiheistettu syöttö ---------------------------------- */

.vaihe-asettelu {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
@media (max-width: 1100px) { .vaihe-asettelu { grid-template-columns: 1fr; gap: 32px; } }

.vaihe-sivupalsta {
    display: flex; flex-direction: column; gap: 34px;
    position: sticky; top: 24px;
}
@media (max-width: 1100px) { .vaihe-sivupalsta { position: static; } }

.vaihenavi { display: flex; flex-direction: column; gap: 2px; }
.vaihenavi .nimio { padding-bottom: 12px; }
.vaihenavi-askel {
    display: flex; align-items: flex-start; gap: 10px;
    width: 100%; padding: 9px 10px;
    background: transparent;
    border: none; border-left: 2px solid transparent;
    border-radius: 0 var(--pyoristys) var(--pyoristys) 0;
    font-size: 14px; color: #525a62;
    text-align: left; cursor: pointer;
}
.vaihenavi-askel:hover { background: var(--vari-korostus); }
.vaihenavi-askel.valittu {
    background: var(--vari-kortti);
    border-left-color: var(--vari-ensisijainen);
    color: var(--vari-teksti); font-weight: 500;
}
.vaihenavi-numero {
    flex: none; padding-top: 2px;
    font-family: var(--fontti-mono); font-size: 12px;
    color: var(--vari-hento-vaalea);
}
.vaihenavi-askel.valittu .vaihenavi-numero { color: var(--vari-ensisijainen); }
.vaihenavi-otsikko { flex: 1; line-height: 1.35; }
/* Avoimien tulkintojen määrä: sama okra kuin vaiheen tulkintalohkossa. */
.vaihenavi-merkki {
    flex: none; padding-top: 3px;
    font-family: var(--fontti-mono); font-size: 11px;
    color: var(--vari-varoitus); cursor: help;
}

/* Aina näkyvä sähköpostilähetys vaihenavigaation alla — erottuu tavallisista .nappi-painikkeista koko leveydellään. */
.nappi-leveys-taysi { display: block; width: 100%; text-align: center; box-sizing: border-box; }

.sivupalsta-lohko {
    display: flex; flex-direction: column; gap: 12px;
    padding-top: 26px;
    border-top: 1px solid var(--vari-reunus);
}
.sivupalsta-lohko p { margin: 0; font-size: 13px; line-height: 1.55; color: #5f666e; }
.sivupalsta-lohko .parametri-ruudukko { grid-template-columns: 1fr; gap: 10px; margin: 0; }
.sivupalsta-lohko .kentta { font-size: 13px; }
.sivupalsta-lohko .kentta input { width: 100%; }

.vaihe-palsta { display: flex; flex-direction: column; min-width: 0; }

.vaihe-otsikko { margin: 10px 0 0; max-width: 22ch; }

.vaihe-selite {
    margin-top: 30px; max-width: 900px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px;
}
@media (max-width: 760px) { .vaihe-selite { grid-template-columns: 1fr; gap: 22px; } }
.vaihe-selite section { display: flex; flex-direction: column; gap: 8px; }
.vaihe-selite p { margin: 0; line-height: 1.6; color: var(--vari-teksti-pehmea); text-wrap: pretty; }

/* Avoimet tulkinnat: kohdat, joissa lakia on jouduttu tulkitsemaan.
   Suljettuna oletuksena — lukija kohtaa ensin sen, mikä on varmaa. */
.tulkinnat { margin-top: 26px; max-width: 900px; border-top: 1px solid var(--vari-reunus); }
.tulkinnat-avain {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 13px 0;
    background: none; border: none;
    text-align: left; cursor: pointer;
}
.tulkinnat-piste {
    flex: none; width: 6px; height: 6px;
    border-radius: 50%; background: var(--vari-varoitus);
}
.tulkinnat-nimi { font-size: 14px; font-weight: 500; }
.tulkinnat-luku { font-family: var(--fontti-mono); font-size: 12px; color: var(--vari-hento); }
.tulkinnat-tayte { flex: 1; }
.tulkinnat-tila { font-size: 13px; color: #5f666e; }
.tulkinnat-lista {
    margin: 0 0 20px; padding: 0 0 0 22px;
    display: flex; flex-direction: column; gap: 12px;
}
.tulkinnat-lista li { font-size: 14px; line-height: 1.6; color: #3f464e; text-wrap: pretty; }

/* Syötekortti — sivun ainoa kohta, jossa käyttäjältä odotetaan tekoa.
   Selitteet, yhteenveto ja välitulokset ovat luettavaa tietoa ja jäävät
   taustalle; vain syöte saa valkoisen pohjan ja sinisen reunaraidan.
   Raita on sama merkki kuin valitulla vaiheella navigaatiossa: sama väri
   tarkoittaa samaa asiaa, "tässä olet ja tähän toimit". */
.vaihe-syote {
    margin-top: 34px; max-width: 620px;
    padding: 16px 22px 20px;
    display: flex; flex-direction: column; gap: 12px;
    background: var(--vari-kortti);
    border: 1px solid var(--vari-reunus);
    border-left: 3px solid var(--vari-ensisijainen);
    border-radius: 0 var(--pyoristys-kortti) var(--pyoristys-kortti) 0;
}
.vaihe-syote-nimio { color: var(--vari-ensisijainen); }
/* Ensimmäinen väliotsikko ei saa liimautua kortin nimiöön — molemmat ovat
   monospacea, ja ilman väliä ne lukeutuvat yhdeksi kaksiriviseksi otsikoksi. */
.vaihe-syote > h4:first-of-type { margin-top: 8px; }
.vaihe-syote > p.hento { margin: -2px 0 2px; line-height: 1.55; }
.vaihe-syote .rivitaulu + .nappi-lisaa { margin-top: -2px; }

/* Viimeinen vaihe ei kerää syötettä vaan näyttää tuloksen: ei korostusta
   eikä kehotetta, ja oletustaulukko tarvitsee koko leveyden. */
.vaihe-syote-tulos {
    max-width: 900px;
    padding: 30px 0 0;
    background: none;
    border: none; border-top: 1px solid var(--vari-reunus);
    border-radius: 0;
}

/* Rivilista: tallennetut rivit tekstinä, muokkaus erillisessä tilassa.
   Tallenna/Poista ovat selkeitä tapahtumia, joista vaiheen yhteenveto
   päivittyy — ja valmiit rivit ovat luettavampia tekstinä kuin
   kenttärivistönä. */
.rivilista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rivilista:empty { display: none; }
.rivilista-rivi {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 0;
    border-bottom: 1px solid var(--vari-reunus);
    font-size: 14px;
}
.rivilista-rivi:first-child { border-top: 1px solid var(--vari-reunus); }
.rivilista-teksti { flex: 1; line-height: 1.55; color: var(--vari-teksti-pehmea); }
.rivilista-pvm { font-family: var(--fontti-mono); font-size: 13px; }
.rivilista-puute { color: var(--vari-virhe); }
.rivilista-muokkaus {
    margin: 8px 0;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 14px;
    background: var(--vari-kortti);
    border: 1px solid var(--vari-reunus-vahva);
    border-radius: var(--pyoristys-kortti);
}
.rivilomake {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px; align-items: start;
    max-width: 520px;
}
.rivilomake .kentta + .kentta { margin-top: 0; }
/* Vihje ei saa siirtää syöterivin paikkaa. Rivilomakkeessa vihje asettuu
   kentän alle (order), jolloin vierekkäisten kenttien syöterivit pysyvät
   linjassa myös kun toisen vihje on niin pitkä että se rivittyy. */
.rivilomake .kentta { display: flex; flex-direction: column; }
.rivilomake .kentta > input,
.rivilomake .kentta > select,
.rivilomake .kentta > .pvm-kentta { order: 1; }
.rivilomake .kentta > .hento { order: 2; margin-top: 4px; line-height: 1.45; }
.rivilomake-koko { grid-column: 1 / -1; }
/* Päivämäärä ja euromäärä eivät levene koko lohkon mittaan vain siksi,
   että kenttä sattuu olemaan yksin rivillään — valitsimet saavat levetä. */
.rivilomake-koko > .pvm-kentta, .rivilomake-koko > input { max-width: 246px; }
.rivilomake-napit { display: flex; gap: 8px; }

/* Vakuutuslajin lohko: tunnus erottaa kolme samannäköistä taulukkoa. */
.tulotaulu {
    display: flex; flex-direction: column; gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--vari-reunus);
}
.tulotaulu-otsake { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tulotaulu-tunnus {
    font-family: var(--fontti-mono);
    font-size: 14px; font-weight: 500;
    letter-spacing: .02em;
}
.tulotaulu-tyhja { margin: 0; font-size: 13px; color: var(--vari-hento); }

/* Yhteenveto toistaa jo annetut tiedot — se ei pyydä mitään, joten se ei
   myöskään saa näyttää syötekorttia painavammalta. Ei kehystä, ei pohjaa. */
.vaihe-yhteenveto {
    margin-top: 30px; max-width: 620px;
    display: flex; flex-direction: column; gap: 10px;
}
.vaihe-yhteenveto ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.vaihe-yhteenveto li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.6; color: var(--vari-teksti-pehmea); }
.vaihe-yhteenveto li::before {
    content: ""; flex: none;
    width: 4px; height: 4px; border-radius: 50%;
    background: #b4bac1; transform: translateY(-3px);
}
.vaihe-puute { color: var(--vari-virhe); }
.vaihe-yhteenveto-huomio { margin: 2px 0 0; font-size: 13px; color: var(--vari-hento); font-style: italic; }

.vaihe-saannot {
    margin-top: 26px; max-width: 900px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.saantotunnus {
    font-family: var(--fontti-mono); font-size: 12px;
    color: #5f666e;
    border-bottom: 1px solid #d5d9de;
    padding-bottom: 1px;
}

/* Peräkkäiset tunnukset (esim. "TOE-013 TOE-022 PAR-011") tarvitsevat välin:
   ilman sitä ne renderöityvät kiinni toisiinsa yhdeksi merkkijonoksi. */
.saantotunnus + .saantotunnus { margin-left: 8px; }

/* Avattava sääntötunnus: sama ulkoasu kuin tavallisella tunnuksella, mutta
   katkoviiva alla kertoo että takana on sisältöä (vihje + kortti). Nappi
   ilman nappityylejä — se on tekstiä, joka sattuu olemaan klikattava. */
button.saantotunnus-avattava {
    padding: 0 0 1px; margin: 0;
    background: none; border: none;
    border-bottom: 1px dashed var(--vari-reunus-vahva);
    line-height: inherit;
    cursor: help;
}
button.saantotunnus-avattava:hover {
    color: var(--vari-ensisijainen);
    border-bottom-color: var(--vari-ensisijainen);
}
button.saantotunnus-avattava:focus-visible {
    outline: 1px solid var(--vari-ensisijainen); outline-offset: 2px;
}

/* Sääntökorttidialogi ------------------------------------------------- */

.dialogi-tausta {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 48px 24px;
    background: rgba(20, 24, 28, .34);
}
@media (max-width: 760px) { .dialogi-tausta { padding: 16px 12px; } }

.dialogi {
    width: 100%; max-width: 820px; max-height: 100%;
    display: flex; flex-direction: column;
    background: var(--vari-kortti);
    border: 1px solid var(--vari-reunus-vahva);
    border-radius: var(--pyoristys-kortti);
    box-shadow: 0 18px 48px rgba(20, 24, 28, .22);
}
.dialogi:focus { outline: none; }

.dialogi-otsake {
    flex: none;
    display: flex; align-items: flex-start; gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--vari-reunus);
}
.dialogi-otsikko { margin: 6px 0 0; font-size: 17px; font-weight: 600; }
.dialogi-sulje {
    margin-left: auto; flex: none;
    width: 30px; height: 30px; padding: 0;
    background: none; border: none; border-radius: var(--pyoristys);
    color: var(--vari-hento); font-size: 16px; line-height: 1; cursor: pointer;
}
.dialogi-sulje:hover { color: var(--vari-teksti); background: var(--vari-korostus); }

.dialogi-sisalto { flex: 1; overflow-y: auto; padding: 4px 24px 24px; }

.dialogi-alaosa {
    flex: none;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 24px;
    background: var(--vari-tausta);
    border-top: 1px solid var(--vari-reunus);
}

/* Kortin markdown-sisältö. Otsikkotasot noudattavat testipenkin omaa
   hierarkiaa: kortin H1 on jo dialogin otsikkona, joten se piilotetaan. */
.kortti-teksti > h1 { display: none; }
.kortti-teksti h2 {
    margin: 26px 0 10px; font-size: 11px; font-weight: 500;
    font-family: var(--fontti-mono);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--vari-hento);
}
.kortti-teksti h3 { margin: 18px 0 8px; font-size: 14px; }
.kortti-teksti p { margin: 0 0 12px; line-height: 1.65; color: var(--vari-teksti-pehmea); text-wrap: pretty; }
.kortti-teksti ul, .kortti-teksti ol { margin: 0 0 12px; padding-left: 22px; }
.kortti-teksti li { margin-bottom: 6px; line-height: 1.6; color: var(--vari-teksti-pehmea); }
.kortti-teksti code {
    padding: 1px 4px;
    background: var(--vari-korostus); border-radius: var(--pyoristys);
    font-family: var(--fontti-mono); font-size: 12px;
}
.kortti-teksti pre {
    margin: 0 0 14px; padding: 12px 14px; overflow-x: auto;
    background: #fafbfc; border: 1px solid var(--vari-reunus); border-radius: var(--pyoristys);
    font-family: var(--fontti-mono); font-size: 12px; line-height: 1.55;
}
.kortti-teksti pre code { padding: 0; background: none; }
.kortti-teksti table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; }
.kortti-teksti th {
    text-align: left; padding: 0 10px 6px 0;
    font-family: var(--fontti-mono); font-size: 11px; font-weight: 500;
    letter-spacing: .06em; text-transform: uppercase; color: var(--vari-hento);
    border-bottom: 1px solid var(--vari-reunus);
}
.kortti-teksti td {
    padding: 7px 10px 7px 0; vertical-align: top; line-height: 1.55;
    border-bottom: 1px solid var(--vari-reunus);
}
.kortti-teksti blockquote {
    margin: 0 0 14px; padding: 2px 0 2px 14px;
    border-left: 2px solid var(--vari-reunus-vahva);
    color: var(--vari-hento);
}
.kortti-teksti hr { margin: 20px 0; border: none; border-top: 1px solid var(--vari-reunus); }
/* Kortin sisäinen dokumenttilinkki: kohde ei ole saatavilla dialogissa, joten
   viite näkyy tekstinä — ristiviitenapit alalaidassa vievät toiseen korttiin. */
.kortti-teksti .korttilinkki { color: var(--vari-teksti); }

.vaihe-navi {
    margin-top: 46px; padding-top: 22px; max-width: 900px;
    display: flex; align-items: center; gap: 14px;
    border-top: 1px solid var(--vari-reunus);
}
.vaihe-navi .nappi { padding: 10px 18px; font-size: 14px; }
.vaihe-navi-tayte { flex: 1; }
.vaihe-navi-laskuri { font-family: var(--fontti-mono); font-size: 12px; color: var(--vari-hento); }

/* Laskennan tila: näkymän tärkein varaus — laskentaa ei vielä ole. */
.laskennan-tila {
    margin: 44px 0 0; max-width: 640px;
    font-size: 13px; line-height: 1.6; color: var(--vari-hento);
    text-wrap: pretty;
}

.tulos-paikka {
    padding: 18px 20px;
    background: var(--vari-kortti);
    border: 1px dashed var(--vari-reunus-vahva);
    border-radius: var(--pyoristys-kortti);
}
.tulos-paikka h4 { margin-top: 0; }
.tulos-paikka p { margin: 0 0 8px; }
.tulos-paikka p:last-child { margin-bottom: 0; }

.oletukset { width: 100%; border-collapse: collapse; font-size: 13px; }
.oletukset th {
    text-align: left; padding: 0 10px 8px 0;
    font-family: var(--fontti-mono); font-size: 11px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--vari-hento);
    border-bottom: 1px solid var(--vari-reunus);
}
.oletukset td { padding: 10px 10px 10px 0; border-top: 1px solid var(--vari-reunus); vertical-align: top; line-height: 1.55; }
.oletukset td:first-child { font-weight: 500; }
.oletukset th:last-child, .oletukset td:last-child { padding-right: 0; }

.lisakentta-rivi td { padding-bottom: 14px; }

/* Blazorin vakiotyylit ----------------------------------------------- */

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--vari-ok); }
.invalid { outline: 1px solid var(--vari-virhe); }
.validation-message { color: var(--vari-virhe); }
#blazor-error-ui {
    background: #faf6ec; border-top: 2px solid var(--vari-varoitus);
    bottom: 0; left: 0; right: 0; position: fixed; padding: 12px 40px; display: none; z-index: 1000;
    font-size: 14px;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 10px; }

/* Työssäoloehto: välitulokset, kuukausitaulukko ja tulos ------------- */

.vaihe-valitulos {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--vari-korostus);
    border-left: 2px solid var(--vari-reunus-vahva);
}
.vaihe-valitulos ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }

.kuukausitaulu { width: 100%; border-collapse: collapse; font-size: 13px; }
.kuukausitaulu th {
    text-align: left; padding: 0 10px 6px 0;
    font-family: var(--fontti-mono); font-size: 11px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: var(--vari-hento);
    border-bottom: 1px solid var(--vari-reunus);
}
.kuukausitaulu td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--vari-reunus); vertical-align: top; }
.kuukausitaulu td:first-child { font-family: var(--fontti-mono); white-space: nowrap; }
.kuukausitaulu .kuukausi-merkki { width: 28px; text-align: center; font-weight: 600; }
.kuukausitaulu .kuukausi-luku { font-family: var(--fontti-mono); text-align: right; white-space: nowrap; }
.kuukausitaulu tr.kelpaa .kuukausi-merkki { color: var(--vari-ok); }
.kuukausitaulu tr.hylatty { color: var(--vari-hento); }
.kuukausitaulu tr.hylatty .kuukausi-merkki { color: var(--vari-virhe); }

.tulos-tayttyy { border-left: 3px solid var(--vari-ok); }
.tulos-ei-tayty { border-left: 3px solid var(--vari-virhe); }
.tulos-paikka .tulos-arvo { font-size: 30px; }

/* Päivämääräkenttä (PvmKentta): suomalainen muoto 18.8.2026 ---------- */

.pvm-kentta { position: relative; display: block; }
.pvm-kentta input.pvm { width: 100%; padding-right: 36px; font-family: var(--fontti-mono); }
input.pvm::placeholder { color: var(--vari-hento-vaalea); font-family: var(--fontti-mono); }
input.pvm-virhe, input.pvm-virhe:focus { border-color: var(--vari-virhe); }

.pvm-valitsin {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: var(--pyoristys);
    color: var(--vari-hento); cursor: pointer;
}
.pvm-valitsin:hover { color: var(--vari-teksti); background: var(--vari-korostus); }

/* Kalenterivalitsimen pudotusvalikko: itse piirretty, malli otetusta
   _kassan MUI-kalenterista (sininen otsakenauha, pyöreä valintaympyrä). */
.pvm-tausta { position: fixed; inset: 0; z-index: 40; background: transparent; }

.pvm-kalenteri {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 41;
    width: 264px;
    background: var(--vari-kortti);
    border: 1px solid var(--vari-reunus);
    border-radius: var(--pyoristys-kortti);
    box-shadow: 0 10px 28px rgba(20, 24, 28, .16);
    overflow: hidden;
}
.pvm-kalenteri-otsake { padding: 14px 18px; background: var(--vari-ensisijainen); color: #fff; }
.pvm-kalenteri-vuosi { font-size: 12px; letter-spacing: .04em; opacity: .82; }
.pvm-kalenteri-paiva { margin-top: 2px; font-size: 19px; font-weight: 600; }

.pvm-kalenteri-runko { padding: 10px 12px 12px; }
.pvm-kalenteri-navi { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pvm-kalenteri-kuukausi { font-size: 13px; font-weight: 500; }
.pvm-kalenteri-nuoli {
    width: 26px; height: 26px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 50%;
    font-size: 16px; line-height: 1; color: var(--vari-hento); cursor: pointer;
}
.pvm-kalenteri-nuoli:hover { color: var(--vari-teksti); background: var(--vari-korostus); }

.pvm-kalenteri-viikonpaivat {
    display: grid; grid-template-columns: repeat(7, 1fr);
    margin-bottom: 2px;
    font-family: var(--fontti-mono); font-size: 10px; letter-spacing: .04em;
    text-transform: uppercase; text-align: center; color: var(--vari-hento);
}
.pvm-kalenteri-ruudukko { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.pvm-kalenteri-paivanappi {
    width: 100%; aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 50%;
    font-size: 13px; color: var(--vari-teksti); cursor: pointer;
}
.pvm-kalenteri-paivanappi:hover { background: var(--vari-korostus); }
.pvm-kalenteri-paivanappi.muu-kuukausi { color: var(--vari-hento-vaalea); }
.pvm-kalenteri-paivanappi.tanaan { box-shadow: inset 0 0 0 1px var(--vari-ensisijainen); }
.pvm-kalenteri-paivanappi.valittu,
.pvm-kalenteri-paivanappi.valittu:hover { background: var(--vari-ensisijainen); color: #fff; font-weight: 600; }
/* Kuukausi/vuosi-nappi avaa vuosiruudukon: vuoden vaihtaminen ei vaadi
   12 kuukauden rullaamista. Nuolet siirtävät ruudukkoa sivullisen
   kerrallaan, joten mikään vuosi ei jää tavoittamattomiin. */
.pvm-kalenteri-vaihto {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px;
    background: none; border: none; border-radius: var(--pyoristys);
    font-size: 13px; font-weight: 500; cursor: pointer;
}
.pvm-kalenteri-vaihto:hover { background: var(--vari-korostus); }
.pvm-kalenteri-kaari { font-size: 9px; color: var(--vari-hento); }

.pvm-kalenteri-vuodet {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 4px; padding: 4px 0 2px;
}
.pvm-kalenteri-vuosinappi {
    padding: 8px 0;
    background: none; border: none; border-radius: 999px;
    font-family: var(--fontti-mono); font-size: 13px;
    color: var(--vari-teksti); cursor: pointer;
}
.pvm-kalenteri-vuosinappi:hover { background: var(--vari-korostus); }
.pvm-kalenteri-vuosinappi.tanaan { box-shadow: inset 0 0 0 1px var(--vari-ensisijainen); }
.pvm-kalenteri-vuosinappi.valittu,
.pvm-kalenteri-vuosinappi.valittu:hover { background: var(--vari-ensisijainen); color: #fff; font-weight: 600; }


/* Kirjautuminen ------------------------------------------------------
   Julkaistun testipenkin kirjautumissivu. Tarkoituksella pelkistetty:
   sivu ei kerro mitään sovelluksen sisällöstä, joten siinä ei ole
   navigaatiota, otsakenauhaa eikä selittäviä tekstejä. */

.kirjautuminen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 40px 0;
}

.kirjautumislomake {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--vari-kortti);
    border: 1px solid var(--vari-reunus);
    border-radius: var(--pyoristys-kortti);
    padding: 32px 28px;
}

.kirjautumislomake h1 { font-size: 24px; margin-bottom: 4px; }
.kirjautumislomake .kentta + .kentta { margin-top: 0; }
.kirjautumislomake input[type="password"] { width: 100%; }

.kirjautumisvirhe {
    margin: 0;
    color: var(--vari-virhe);
    font-size: 14px;
}