/****** TEEMAN VAKIOT JA MUUTTUJAT ******/
:root {
    /* Kirjasimet */
    --leipateksti-kirjasin: "C059", serif;
    --leipateksti-rivin-korkeus: 1.4;
    --leipateksti-yliheitto: 0.18;
    --leipateksti-aliheitto: 0.45;

    --lomake-kirjasin: "Lato", sans-serif;
    --lomake-rivin-korkeus: 1.4;
    --lomake-yliheitto: 0.26;
    --lomake-aliheitto: 0.38;

    --tasalevyinen-kirjasin: "OCRB", monospace;
    --tasalevyinen-rivin-korkeus: 1.4;
    --tasalevyinen-yliheitto: 0.25;
    --tasalevyinen-aliheitto: 0.46;

    --kauno-kirjasin: "Lobster", cursive;
    --kauno-rivin-korkeus: 1.4;
    --kauno-yliheitto: 0.32;
    --kauno-aliheitto: 0.32;

    --pieni-teksti: 0.75rem;

    /* Värit */
    --tekstivari: #000;
    --passiivinen-linkkivari: #008;
    --aktiivinen-linkkivari: #00f;
    --sivun-taustavari: #fff;
    --lomakkeen-taustavari: #bbb;
    --syottokentan-taustavari: #fff;
    --syottokentan-tekstivari: #000;
    --leijuvari: #eee;
    --vaalea-reunavari: #ddd;
    --napin-taustavari: #999;
    --napin-ulkoreuna: #000;
    --tumma-reunavari: #777;
    --aktiivinen-reunavari: #999;
    --aktiivinen-taustavari: #008;
    --aktiivinen-tekstivari: #fff;
    --passiivinen-tekstivari: #444;
    --ylapalkin-taustavari: #1b1b1b;
    --ylapalkin-tekstivari: #999;
    --alapalkin-taustavari: #ccc;
    --alapalkin-tekstivari: #444;

    /* Mittayksiköt */
    --napin-korkeus: 2rem;
    --hiusviivan-leveys: calc(1rem / 16);
    --perusviivan-leveys: calc(1rem * 2 / 16);
    --tuplaviivan-leveys: calc(1rem * 3 / 16);
    --ulkoreunus-x: calc(1rem * 12 / 16);
    --ulkoreunus-y: calc(1rem * 10 / 16);
    --sisareunus-x: calc(1rem * 8 / 16);
    --sisareunus-y: calc(1rem * 4 / 16);
    --napin-pyoristys: 0;
    --leiman-pyoristys: calc(1rem * 6 / 16);
    --kappaleen-sisennys: 2rem;
    --kappalevali: 1rem;
    --sarakevali: 0.5rem;
    --aktiivisen-reunan-leveys: calc(1rem * 4 / 16);
    --ylapalkin-korkeus: 3rem;
    --alapalkin-korkeus: 2rem;
    --sivupalkin-leveys: 15rem;

    /* CSS muuttujien oletusarvot */
    --kappalevali-yla: var(--kappalevali);
    --kappalevali-ala: var(--kappalevali);
    --yliheitto: 0;
    --aliheitto: 0;
    --tekstin-koko: 1rem;
    --rivin-korkeus: 1.2;
    --taustavari: var(--sivun-taustavari);
    --ikonin-taustavari: transparent;
    --ikonin-edustavari: inherit;
}


/****** YLIKIRJOITA SELAINTEN OLETUSTYYLIT ******/

/* Sisällytä kehys elementin kokoon oletuksena */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Poista oletusmarginaali kaikista elementeistä */
* {
    margin: 0;
    padding: 0;
}

/* Salli käyttää prosenttimääreitä pystysuuntaisen tilan määrittämiseen */
html, body {
    height: 100%;
}

/* Oletusvärit */
body {
    background-color: var(--sivun-taustavari);
    color: var(--tekstivari);
}

/* Fontit ja koot */
html, body {
    font-size: 1rem;
    font-weight: 500;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    font-size: var(--tekstin-koko);
}
h1 {
    --tekstin-koko: 1.5rem;
    --kappalevali-yla: 3rem;
}
h2 {
    --tekstin-koko: 1.25rem;
    --kappalevali-yla: 2rem;
}
h3 {
    --tekstin-koko: 1rem;
    --kappalevali-yla: 1rem;
}
h4, h5, h6 {
    --tekstin-koko: 1rem;
    --kappalevali-yla: 1rem;
}
table, form, fieldset, input, button, textarea, select, label {
    font-size: var(--tekstin-koko);
}

/* Käytä leipätekstiä otsikoilla, tekstikappaleilla ja listoilla */
html, body,
h1, h2, h3, h4, h5, h6,
p, ul, ol,
.paragraph {
    --rivin-korkeus: var(--leipateksti-rivin-korkeus);
    --yliheitto: var(--leipateksti-yliheitto);
    --aliheitto: var(--leipateksti-aliheitto);
    font-family: var(--leipateksti-kirjasin);
    line-height: var(--rivin-korkeus);
}

/* Käytä tasalevyistä kirjasinta koodille ja osoitteelle */
code, pre, address, samp, kbd {
    --rivin-korkeus: var(--tasalevyinen-rivin-korkeus);
    --yliheitto: var(--tasalevyinen-yliheitto);
    --aliheitto: var(--tasalevyinen-aliheitto);
    font-family: var(--tasalevyinen-kirjasin);
    line-height: var(--rivin-korkeus);
}

/* Käytä lomakekirjasinta taulukoissa ja lomakkeissa */
table, form, fieldset, input, button, textarea, select, label,
form p, form h1, form h2, form h3, form h4, form h5, form h6,
body > nav, body > header, body > footer, body > sidebar,
body > nav > ul {
    --rivin-korkeus: var(--lomake-rivin-korkeus);
    --yliheitto: var(--lomake-yliheitto);
    --aliheitto: var(--lomake-aliheitto);
    font-family: var(--lomake-kirjasin);
    line-height: var(--rivin-korkeus);
}

/* Käytä kaunokirjainta sivun otsikossa */
.lead {
    --rivin-korkeus: var(--kauno-rivin-korkeus);
    --yliheitto: var(--kauno-yliheitto);
    --aliheitto: var(--kauno-aliheitto);
    --tekstin-koko: 3rem;
    font-family: var(--kauno-kirjasin);
    line-height: var(--rivin-korkeus);
    font-size: var(--tekstin-koko);
}
@media screen and (min-width: 992px) {
    .lead {
        /* Isompi fontti työpöydälle */
        --tekstin-koko: 4rem;
    }
}

/* Estä tekstin valinta klikattavissa elementeissä */
button, a, label, summary {
    user-select: none;
}

/* Lisää marginaalit tekstikappaleisiin */
h1, h2, h3, h4, h5, h6, p,
*:not(nav) > ul, ol, blockquote, address, pre, samp,
.paragraph {
    /* Lisää tyhjää ylä- ja alapuolelle */
    &:not(:first-child):not(:empty) {
        margin-top: var(--kappalevali-yla);
    }
    &:not(:last-child):not(:empty) {
        margin-bottom: var(--kappalevali-ala);
    }
}

/* Keskitä kirjasin laatikon ylä- ja alareunaan */
h1, h2, h3, h4, h5, h6, p,
*:not(nav) > ul, ol, blockquote:not(:has(p, div, h1, h2, h3, h4, h5, h6)), address, pre, samp,
.paragraph {
    &::before,
    &::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        pointer-events: none;
    }
    &::before {
        margin-bottom: calc(var(--tekstin-koko) * var(--yliheitto) * -1 - 1px);
    }
    &::after {
        margin-top: calc(var(--tekstin-koko) * var(--aliheitto) * -1 - 1px);
    }
}

/* Linkit (korostus vain näppäimistöllä siirryttäessä) */
a {
    display: inline-block;
    color: var(--passiivinen-linkkivari);
    text-underline-offset: var(--perusviivan-leveys);
}
a:focus-visible {
    outline: var(--aktiivisen-reunan-leveys) solid var(--aktiivinen-reunavari);
    outline-offset: calc(var(--hiusviivan-leveys) * 1);
}
a:hover:not(:active) {
    color: var(--aktiivinen-linkkivari);
}
a:active,
a:active:hover {
    color: var(--aktiivinen-linkkivari);
    transform: translate(var(--hiusviivan-leveys), var(--hiusviivan-leveys));
}

/* Salli sanan katkaisu keskeltä viimeisenä keinona */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Yhtenäistä listat */
ol > li,
ul > li {
    line-height: inherit;
    margin-left: 2em;
}

/* Yhtenäistä tekstityylit */
em {
    font-weight: 700;
    font-style: normal;
}
strong {
    font-weight: bold;
    text-shadow: 0.5px 0 var(--tekstivari);
    letter-spacing: var(--hiusviivan-leveys);
    font-stretch: 200%;
}
i {
    font-style: italic;
}
u {
    text-decoration: underline;
    text-underline-offset: var(--perusviivan-leveys);
}
del {
    text-decoration: line-through;
}
small {
    --tekstin-koko: var(--pieni-teksti);
    font-size: var(--tekstin-koko);
}
sup {
    --tekstin-koko: var(--pieni-teksti);
    font-size: var(--tekstin-koko);
    vertical-align: super;
}
sub {
    --tekstin-koko: var(--pieni-teksti);
    font-size: var(--tekstin-koko);
    vertical-align: sub;
}
mark {
    --taustavari: #F9F871;
}
@media screen {
    mark {
        background-color: var(--taustavari);
        box-shadow: 0 0 0 var(--perusviivan-leveys) var(--taustavari);
        color: var(--tekstivari);
    }
}

/* Sisennä tekstikappaleet */
blockquote, pre, address, samp {
    padding-left: var(--kappaleen-sisennys);
    border-left: var(--sarakevali) solid var(--vaalea-reunavari);
    font-style: normal;
}

/* Erotin on yhden tekstirivin korkuinen */
hr {
    width: calc(100% + var(--ulkoreunus-x) * 2);
    height: 0px;
    margin:
        var(--kappalevali)
        calc(var(--ulkoreunus-x) * -1);
    border-top-width: var(--hiusviivan-leveys);
    border-top-style: solid;
    border-top-color: var(--tumma-reunavari);
    border-left-width: var(--hiusviivan-leveys);
    border-left-style: solid;
    border-left-color: var(--tumma-reunavari);
    border-bottom-width: var(--hiusviivan-leveys);
    border-bottom-style: solid;
    border-bottom-color: var(--vaalea-reunavari);
    border-right-width: var(--hiusviivan-leveys);
    border-right-style: solid;
    border-right-color: var(--vaalea-reunavari);
}
form hr {
    width: calc(100% + var(--ulkoreunus-x) * 2 + var(--hiusviivan-leveys) * 2);
    margin-top: var(--sarakevali);
    margin-bottom: var(--sarakevali);
    margin-left: calc(var(--ulkoreunus-x) * -1 - var(--hiusviivan-leveys));
    margin-right: calc(var(--ulkoreunus-x) * -1 - var(--hiusviivan-leveys));
}

/* Kuva täyttää sille annetun tilan */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
    text-decoration: none;
}

/* Syöttökenttien oletusleveydet */
input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"] {
    min-width: 100px;
    width: 8em;
}
input[type="number"],
input[type="tel"] {
    min-width: 40px;
    width: 4em;
}

/* Ota käyttöön pehmeä vieritys */
html {
    scroll-padding-top: var(--kappalevali);
    scroll-behavior: smooth;
}
body {
}

/* Sivun yleinen asettelu */
body {
    & > header {
        padding: var(--ulkoreunus-y) var(--ulkoreunus-x);
    }
    & > main {
        padding-top: var(--ulkoreunus-y);
        padding-bottom: calc(var(--ulkoreunus-y) + 2rem);
    }
    & > main > article {
        padding: var(--ulkoreunus-y) var(--ulkoreunus-x);
    }
}

/* Sivupalkkiasettelu */
body.sidebar-layout {
    & > header,
    & > nav {
        padding: var(--ulkoreunus-y) var(--ulkoreunus-x);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: var(--sarakevali);
        --taustavari: var(--ylapalkin-taustavari);
        --tekstivari: var(--ylapalkin-tekstivari);
        --passiivinen-linkkivari: var(--ylapalkin-taustavari);
        --aktiivinen-linkkivari: var(--aktiivinen-tekstivari);
        background-color: var(--taustavari);
        color: var(--tekstivari);
        background-image: linear-gradient(to bottom, #222, #111);
        background-repeat: repeat-x;
    }
    & > sidebar {
        display: block;
        padding: var(--ulkoreunus-y) var(--ulkoreunus-x);
    }
    & > main {
        padding-top: var(--ulkoreunus-y);
        padding-bottom: calc(var(--ulkoreunus-y) + 2rem);
        overflow: auto;
    }
    & > main > article {
        padding: var(--ulkoreunus-y) var(--ulkoreunus-x);
    }
    & > footer {
        --taustavari: var(--alapalkin-taustavari);
        --tekstivari: var(--alapalkin-tekstivari);
        --tekstin-koko: var(--pieni-teksti);
        background-color: var(--taustavari);
        color: var(--tekstivari);
        font-size: var(--tekstin-koko);

        padding: var(--ulkoreunus-y) var(--ulkoreunus-x);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: var(--sarakevali);
        justify-content: space-between;
    }
}
@media screen and (min-width: 992px) {
    body.sidebar-layout {
        overflow: hidden;

        & > header,
        & > nav {
            position: absolute;
            left: 0;
            width: 100%;
            top: 0;
            height: var(--ylapalkin-korkeus);
            flex-wrap: nowrap;
        }
        & > sidebar {
            position: absolute;
            left: 0;
            top: var(--ylapalkin-korkeus);
            width: var(--sivupalkin-leveys);
            height: calc(100vh - var(--ylapalkin-korkeus) - var(--alapalkin-korkeus));
            overflow: auto;
        }
        & > main {
            position: absolute;
            top: var(--ylapalkin-korkeus);
            left: var(--sivupalkin-leveys);
            width: calc(100vw - var(--sivupalkin-leveys));
            height: calc(100vh - var(--ylapalkin-korkeus) - var(--alapalkin-korkeus));
            overflow: auto;

            /* Ota käyttöön pehmeä vieritys */
            scroll-padding-top: var(--kappalevali);
            scroll-behavior: smooth;
        }
        & > footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: var(--alapalkin-korkeus);
            flex-wrap: nowrap;
        }
    }
}


/* Leimat */
b {
    display: inline;
    text-shadow: none;
    max-width: 100%;

    /* Valitse tasalevyinen kirjasin, mutta rajoita korkeutta */
    --yliheitto: var(--tasalevyinen-yliheitto);
    --aliheitto: var(--tasalevyinen-aliheitto);
    font-family: var(--tasalevyinen-kirjasin);
    line-height: var(--rivin-korkeus);
    font-size: var(--tekstin-koko);
    font-weight: normal;

    /* Keskitä teksti pystysyynnassa (margin ei toimi inline-elementillä) */
    padding-top: calc((var(--aliheitto) - var(--yliheitto)) * var(--tekstin-koko));
    padding-bottom: calc((var(--yliheitto) - var(--aliheitto)) * var(--tekstin-koko));
}
@media screen {
    b {
        --taustavari: var(--passiivinen-tekstivari);
        --tekstivari: var(--aktiivinen-tekstivari);
        background-color: var(--taustavari);
        color: var(--tekstivari);
        border-radius: var(--leiman-pyoristys);
        padding-left: var(--sarakevali);
        padding-right: var(--sarakevali);
    }
}
a > b,
.btn > b,
input > b,
button > b {
    /* Ohjaa napinpainallus suoraan linkkiin/nappiin */
    pointer-events: none;

    /* Pienennä kirjasimen kokoa */
    --tekstin-koko: var(--pieni-teksti);
}

/* Taulukko */
table {
    /* Taulukko venyy sivusuunnassa täyttäen kaiken tilan */
    table-layout: fixed;
    width: calc(100% + var(--sisareunus-x) * 2);
    border-spacing: 0;
    border-collapse: collapse;

    /* Solun sisältö asettuu muun tekstin tasalle */
    margin-left: calc(-1 * var(--sisareunus-x));
    margin-right: calc(-1 * var(--sisareunus-x));

    /* Erota taulukko edellisestä elementistä */
    &:not(:first-child) {
        margin-top: var(--sarakevali);
    }

    /* Tasoita sarakkeet oletuksena vasemmalle */
    & td,
    & th {
        text-align: left;
        width: auto;
    }

    /* Sarakkeiden välillä on pieni rako */
    & td,
    & th {
        padding: var(--sisareunus-y) var(--sisareunus-x);
    }

    /* Estä solun sisällön jakautuminen monelle riville */
    & td,
    & th {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Rivien välissä on ohut viiva */
    & thead th,
    & thead td,
    & tbody th,
    & tbody td {
        border-bottom-width: var(--hiusviivan-leveys);
        border-bottom-style: solid;
        border-bottom-color: var(--vaalea-reunavari);
    }
    & tbody tr:last-child th,
    & tbody tr:last-child td {
        border-bottom: none;
    }
    & tfoot td,
    & tfoot th {
        border-top-width: var(--hiusviivan-leveys);
        border-top-style: solid;
        border-top-color: var(--vaalea-reunavari);
    }
}
table tbody tr:has(td:first-child > input:checked) {
    background-color: var(--aktiivinen-taustavari);
    color: var(--aktiivinen-tekstivari);
}
table tbody tr.active > td,
table tbody tr.active > th {
    background-color: var(--aktiivinen-taustavari);
    color: var(--aktiivinen-tekstivari);
}

/* Valikkonauha */
nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: var(--sarakevali);
    justify-content: flex-start;
    flex-wrap: wrap;
}
nav .brand {
    --rivin-korkeus: var(--kauno-rivin-korkeus);
    --yliheitto: var(--kauno-yliheitto);
    --aliheitto: var(--kauno-aliheitto);
    --tekstin-koko: 24px;

    font-family: var(--kauno-kirjasin);
    line-height: var(--rivin-korkeus);
    font-weight: bold;
    font-size: var(--tekstin-koko);
    color: #0052bd; /* FIXME: */
    text-shadow:
         1px  1px 2px white,
        -1px -1px 2px white,
        -1px  1px 2px white,
         1px -1px 2px white;
    transform: rotate(-2deg);

    /* Poista ylimääräinen tyhjä brändiniment ylä- ja alapuolelta */
    &::before,
    &::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        pointer-events: none;
    }
    &::before {
        margin-bottom: calc(-1 * var(--tekstin-koko) * var(--yliheitto) - 1px);
    }
    &::after {
        margin-top: calc(-1 * var(--tekstin-koko) * var(--aliheitto) - 1px);
    }
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: var(--sarakevali);
    row-gap: var(--hiusviivan-leveys);
    justify-content: flex-start;
    flex-wrap: wrap;

    & > li {
        margin: 0;
        padding: 0;
    }
    & > li > a {
        display: flex;
        flex-direction: row;
        gap: var(--sarakevali);
        align-items: center;
        height: var(--napin-korkeus);
        padding-left: var(--sisareunus-x);
        padding-right: var(--sisareunus-x);
        padding-top: calc((var(--aliheitto) - var(--yliheitto)) * var(--tekstin-koko));
        padding-bottom: calc((var(--yliheitto) - var(--aliheitto)) * var(--tekstin-koko));
        border-style: solid;
        border-color: transparent;
        border-top-width: var(--hiusviivan-leveys);
        border-left-width: var(--hiusviivan-leveys);
        border-right-width: var(--perusviivan-leveys);
        border-bottom-width: var(--perusviivan-leveys);
        min-height: var(--napin-korkeus);

        text-decoration: none;
        color: inherit;

        &:focus-visible {
            outline: var(--aktiivisen-reunan-leveys) solid var(--aktiivinen-reunavari);
            outline-offset: calc(var(--hiusviivan-leveys) * -1);
        }

        &:hover:not(:active) {
            color: var(--aktiivinen-linkkivari);
        }

        &.active:not(:disabled) {
            color: var(--aktiivinen-tekstivari);
        }

        /* Painallusefekti */
        &:active:not(:disabled):not(.active) {
            color: var(--aktiivinen-linkkivari);
            border-top-width: var(--perusviivan-leveys);
            border-left-width: var(--perusviivan-leveys);
            border-right-width: var(--hiusviivan-leveys);
            border-bottom-width: var(--hiusviivan-leveys);
            transform: none; /* Estää linkin transformaation */
        }
    }
}

/* Hakukenttä */
search {
    display: flex;
    flex-direction: row;
}

/* Alekkainen valinta */
menu,
.menu {
    margin: 0 calc(var(--sisareunus-x) * -1);
    padding: 0;
    list-style-type: none;

    & > li {
        margin: 0;
        padding: 0;
    }
    & > li > a {
        display: flex;
        flex-direction: row;
        gap: var(--sarakevali);
        align-items: center;
        height: var(--napin-korkeus);
        padding-left: var(--sisareunus-x);
        padding-right: var(--sisareunus-x);
        padding-top: calc((var(--aliheitto) - var(--yliheitto)) * var(--tekstin-koko));
        padding-bottom: calc((var(--yliheitto) - var(--aliheitto)) * var(--tekstin-koko));
        border-style: solid;
        border-color: transparent;
        border-top-width: var(--hiusviivan-leveys);
        border-left-width: var(--hiusviivan-leveys);
        border-right-width: var(--perusviivan-leveys);
        border-bottom-width: var(--perusviivan-leveys);
        min-height: var(--napin-korkeus);

        text-decoration: none;
        color: inherit;

        &:focus-visible {
            outline: var(--aktiivisen-reunan-leveys) solid var(--aktiivinen-reunavari);
            outline-offset: calc(var(--hiusviivan-leveys) * -1);
        }

        &:hover {
            background-color: var(--leijuvari);
            color: var(--passiivinen-linkkivari);
        }

        &.active:not(:disabled) {
            background-color: var(--aktiivinen-taustavari);
            color: var(--aktiivinen-tekstivari);
        }

        /* Painallusefekti */
        &:active:not(:disabled):not(.active) {
            background-color: var(--leijuvari);
            border-color: var(--leijuvari);
            color: var(--aktiivinen-linkkivari);
            border-top-width: var(--perusviivan-leveys);
            border-left-width: var(--perusviivan-leveys);
            border-right-width: var(--hiusviivan-leveys);
            border-bottom-width: var(--hiusviivan-leveys);
            transform: none; /* Estää linkin transformaation */
        }
    }
}

/* Haitarielementti */
details {
    /* Lisää marginaali ennen ja jälkeen */
    &:not(:first-child) {
        margin-top: var(--kappalevali-yla);
    }
    &:not(:last-child) {
        margin-bottom: var(--kappalevali-ala);
    }

    /* Sisennä sisäkkäiset haitarit */
    & > details {
        margin-left: var(--kappaleen-sisennys);
    }

    /* Komensoi tekstin keskitys */
    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        pointer-events: none;
        margin-bottom: calc(-1 * var(--tekstin-koko) * var(--yliheitto) - 1px);
    }
}
details > summary {
    cursor: pointer;
    color: var(--passiivinen-linkkivari);
    margin-left: calc(var(--sisareunus-x) * -1);
    margin-right: calc(var(--sisareunus-x) * -1);
    padding-left: var(--sisareunus-x);
    padding-right: var(--sisareunus-x);
    width: fit-content;

    /* Kompensoi tekstin keskitys */
    &::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        pointer-events: none;
        margin-top: calc(-1 * var(--tekstin-koko) * var(--aliheitto) - 1px);
    }

    /* Hiirianimaatio */
    &:hover:not(:active) {
        color: var(--aktiivinen-linkkivari);
    }
    &:active {
        color: var(--aktiivinen-linkkivari);
        transform: translate(var(--hiusviivan-leveys), var(--hiusviivan-leveys));
    }

    /* Korosta otsikko vain näppäimistöllä siirryttäessä */
    &:focus-visible,
    &:focus-visible:hover {
        outline: var(--aktiivisen-reunan-leveys) solid var(--aktiivinen-reunavari);
        outline-offset: 0;
    }

    & > * {
        display: inline-block;
        margin: 0;
    }
}


/****** LOMAKKEET ******/

/* Syöttölomake */
form {
    --taustavari: var(--lomakkeen-taustavari);

    background-color: var(--taustavari);
    width: calc(100% + var(--ulkoreunus-x) * 2 - var(--hiusviivan-leveys) * 2);
    margin: 0 calc(var(--ulkoreunus-x) * -1 + var(--hiusviivan-leveys));
    padding: var(--ulkoreunus-y) var(--ulkoreunus-x);
    border-style: solid;
    border-top-width: var(--hiusviivan-leveys);
    border-top-color: var(--vaalea-reunavari);
    border-left-width: var(--hiusviivan-leveys);
    border-left-color: var(--vaalea-reunavari);
    border-right-width: var(--perusviivan-leveys);
    border-right-color: var(--tumma-reunavari);
    border-bottom-width: var(--perusviivan-leveys);
    border-bottom-color: var(--tumma-reunavari);
    box-shadow:
        var(--hiusviivan-leveys) var(--hiusviivan-leveys) 0 0 var(--napin-ulkoreuna),
        0 0 0 var(--hiusviivan-leveys) var(--tumma-reunavari);
}

/* Syöttökenttä */
input-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-shrink: 1;
    flex-grow: 1;
    max-width: 100%;

    /* Tulosta kentän otsikko pienemmällä fontilla */
    & > label:not(:has(input)) {
        --tekstin-koko: var(--pieni-teksti);
        font-size: var(--tekstin-koko);
        width: 100%;
        flex-grow: 0;
        flex-shrink: 0;

        /* Poista ylimääräinen tyhjä tekstin ylä- ja alapuolelta */
        &::before,
        &::after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            pointer-events: none;
        }
        &::before {
            margin-bottom: calc(-1 * var(--tekstin-koko) * var(--yliheitto) - 1px);
        }
        &::after {
            margin-top: calc(-1 * var(--tekstin-koko) * var(--aliheitto) - 1px);
        }

        /* Jätä tekstin alle hieman tyhjää tilaa */
        margin-bottom: calc(var(--sarakevali) * 0.5);
    }

    /* Maalaa otsikko harmaalla, jos ensimmäinen kenttä on passiivinen */
    &:has(label + input:disabled) {
        & > label:not(:has(input)) {
            color: var(--passiivinen-tekstivari);
        }
    }

    /* Yksittäinen radio tai valintaruutu täyttää rivin */
    & > label:has(input) {
        width: 100%;
        flex-grow: 0;
        flex-shrink: 0;
    }

    /* Rivi */
    & > flex-row {
        width: 100%;
        flex-grow: 1;
        flex-shrink: 1;
    }

    /* Syöttökentät rivillä */
    & > * > input[type="text"],
    & > * > input[type="password"],
    & > * > input[type="search"],
    & > * > input[type="email"],
    & > * > input[type="number"],
    & > * > input[type="tel"] {
        flex-grow: 1;
        flex-shrink: 1;
    }

    /* Yksikkö tai muu teksti kentän yhteydessä */
    span {
        display: block;
        align-self: center;
        white-space: nowrap;
    }
}

/* Lisää rakoa syöttökenttien välille */
*:not(flex-row) > input-group {
    &:not(:first-child) {
        margin-top: var(--sarakevali);
    }
    &:not(:last-child) {
        margin-bottom: var(--sarakevali);
    }
}

/* Monirivinen teksti */
/* FIXME: */

/* Nappi */
.btn,
a.btn,
input[type="submit"]:not(.btn-link),
input[type="button"]:not(.btn-link),
button:not(.btn-link) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--sisareunus-x) / 2);
    flex-wrap: nowrap;
    text-decoration: none;
    background-color: var(--napin-taustavari);
    color: var(--tekstivari);
    box-shadow: 0 0 0 var(--hiusviivan-leveys) var(--napin-ulkoreuna);
    margin: var(--hiusviivan-leveys);
    border-radius: var(--napin-pyoristys);
    border-style: solid;
    border-top-width: var(--hiusviivan-leveys);
    border-top-color: var(--vaalea-reunavari);
    border-left-width: var(--hiusviivan-leveys);
    border-left-color: var(--vaalea-reunavari);
    border-right-width: var(--perusviivan-leveys);
    border-right-color: var(--tumma-reunavari);
    border-bottom-width: var(--perusviivan-leveys);
    border-bottom-color: var(--tumma-reunavari);
    height: calc(var(--napin-korkeus) - var(--hiusviivan-leveys) * 2);
    padding-left: var(--sisareunus-x);
    padding-right: var(--sisareunus-x);

    /* Keskitä teksti pystysuunnassa ... */
    --offset-top: calc((var(--aliheitto) - var(--yliheitto)) * var(--tekstin-koko));
    padding-top: var(--offset-top);
    padding-bottom: calc((var(--yliheitto) - var(--aliheitto)) * var(--tekstin-koko));

    /* ... mutta korjaa ikonin keskitys */
    & > i[class^="icon-"],
    & > i[class*=" icon-"] {
        margin-top: calc(var(--offset-top) * -1);
    }

    &:not(:disabled) {
        cursor: pointer;
    }

    &:disabled {
        background-color: var(--taustavari);
        color: var(--passiivinen-tekstivari);
        box-shadow: 0 0 0 var(--hiusviivan-leveys) var(--passiivinen-tekstivari);
    }

    /* Korosta reunus vain näppäimistöllä liikuttaessa */
    &:focus-visible {
        outline: var(--aktiivisen-reunan-leveys) solid var(--aktiivinen-reunavari);
        outline-offset: var(--hiusviivan-leveys);
    }

    &:hover:not(:disabled):not(:active) {
        background-color: var(--vaalea-reunavari);
        color: var(--tekstivari);
    }

    /* Painallusefekti */
    &:active:not(:disabled),
    &:active:hover:not(:disabled) {
        color: var(--tekstivari);
        background-color: var(--leijuvari);
        border-top-width: var(--perusviivan-leveys);
        border-top-color: var(--tumma-reunavari);
        border-left-width: var(--perusviivan-leveys);
        border-left-color: var(--tumma-reunavari);
        border-right-width: var(--hiusviivan-leveys);
        border-right-color: var(--vaalea-reunavari);
        border-bottom-width: var(--hiusviivan-leveys);
        border-bottom-color: var(--vaalea-reunavari);
    }
}

/* Linkkinappi */
form a:not(.btn),
a.btn-link,
button.btn-link,
input.btn-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--sisareunus-x) * 0.5);
    flex-wrap: nowrap;
    text-decoration: none;
    margin: var(--hiusviivan-leveys);
    border-radius: var(--napin-pyoristys);
    height: calc(var(--napin-korkeus) - var(--hiusviivan-leveys) * 2);
    background-color: transparent;
    border-color: transparent;
    border-style: solid;
    border-top-width: var(--hiusviivan-leveys);
    border-left-width: var(--hiusviivan-leveys);
    border-right-width: var(--perusviivan-leveys);
    border-bottom-width: var(--perusviivan-leveys);
    box-shadow: none;
    padding: 0 var(--sisareunus-x);
    color: var(--passiivinen-linkkivari);

    &:not(:disabled) {
        cursor: pointer;
    }

    &:disabled {
        color: var(--passiivinen-tekstivari);
    }

    /* Korosta reunus vain näppäimistöllä liikuttaessa */
    &:focus-visible {
        outline: var(--aktiivisen-reunan-leveys) solid var(--aktiivinen-reunavari);
        outline-offset: calc(var(--tuplaviivan-leveys) * -1);
    }

    &:hover:not(:disabled):not(:active) {
        background-color: transparent;
        border-color: transparent;
        color: var(--aktiivinen-linkkivari);
    }

    &:active:not(:disabled) {
        background-color: transparent;
        border-color: transparent;
        color: var(--aktiivinen-linkkivari);
        border-top-width: var(--perusviivan-leveys);
        border-left-width: var(--perusviivan-leveys);
        border-right-width: var(--hiusviivan-leveys);
        border-bottom-width: var(--hiusviivan-leveys);
        transform: none; /* Estää linkin transformaation */
    }
}

/* Syöttökenttä */
input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="tel"] {
    --rivin-korkeus: var(--tasalevyinen-rivin-korkeus);
    font-family: var(--tasalevyinen-kirjasin);
    line-height: var(--rivin-korkeus);
    position: relative;
    display: block;
    background-color: var(--syottokentan-taustavari);
    color: var(--syottokentan-tekstivari);
    outline: 0;
    border-radius: var(--napin-pyoristys);
    border-style: solid;
    border-top-width: var(--hiusviivan-leveys);
    border-top-color: var(--tumma-reunavari);
    border-left-width: var(--hiusviivan-leveys);
    border-left-color: var(--tumma-reunavari);
    border-right-width: var(--perusviivan-leveys);
    border-right-color: var(--vaalea-reunavari);
    border-bottom-width: var(--perusviivan-leveys);
    border-bottom-color: var(--vaalea-reunavari);
    height: var(--napin-korkeus);
    box-shadow: var(--hiusviivan-leveys) var(--hiusviivan-leveys) 0 var(--napin-ulkoreuna) inset;
    padding-left: var(--sisareunus-x);
    padding-right: var(--sisareunus-x);

    /* Keskitä teksti pystysyynnassa */
    padding-top: calc((var(--aliheitto) - var(--yliheitto)) * var(--tekstin-koko));
    padding-bottom: calc((var(--yliheitto) - var(--aliheitto)) * var(--tekstin-koko));

    &:disabled {
        border-top-width: var(--hiusviivan-leveys);
        border-left-width: var(--hiusviivan-leveys);
        border-right-width: var(--hiusviivan-leveys);
        border-bottom-width: var(--hiusviivan-leveys);
        background-color: var(--taustavari);
        color: var(--passiivinen-tekstivari);
        box-shadow: 0 0 0 var(--hiusviivan-leveys) var(--passiivinen-tekstivari) inset;
    }

    &:focus-visible {
        border-top-width: var(--perusviivan-leveys);
        border-top-color: var(--tumma-reunavari);
        border-left-width: var(--perusviivan-leveys);
        border-left-color: var(--tumma-reunavari);
        border-right-width: var(--hiusviivan-leveys);
        border-right-color: var(--vaalea-reunavari);
        border-bottom-width: var(--hiusviivan-leveys);
        border-bottom-color: var(--vaalea-reunavari);
        outline: none;

        /* Rajoita korostus leveys 2 pikseliin, jotta ei kavenna syötettä */
        box-shadow:
            var(--hiusviivan-leveys) var(--hiusviivan-leveys) 0 var(--napin-ulkoreuna) inset,
            var(--perusviivan-leveys) var(--perusviivan-leveys) 0 var(--aktiivinen-reunavari) inset,
            calc(var(--perusviivan-leveys) * -1) calc(var(--perusviivan-leveys) * -1) 0 var(--aktiivinen-reunavari) inset;
    }

    &:hover:not(:disabled):not(:focus) {
        background-color: var(--leijuvari);
    }

    &::selection {
        background-color: var(--aktiivinen-taustavari);
        color: var(--aktiivinen-tekstivari);
    }
}

/* Pudotuslista */
select {
    max-width: 100%;
    appearance: none;
    border: none;
    padding:
        0
        calc(var(--sisareunus-x) + 1em)
        0
        var(--sisareunus-x);
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: inherit;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='26' viewBox='0 0 26 26' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M8 8 l 5 11 l 5 -11z'/></svg>");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    color: var(--tekstivari);
    background-color: var(--napin-taustavari);
    outline: 0;
    border-radius: var(--napin-pyoristys);
    border-style: solid;
    border-top-width: var(--hiusviivan-leveys);
    border-top-color: var(--vaalea-reunavari);
    border-left-width: var(--hiusviivan-leveys);
    border-left-color: var(--vaalea-reunavari);
    border-right-width: var(--perusviivan-leveys);
    border-right-color: var(--tumma-reunavari);
    border-bottom-width: var(--perusviivan-leveys);
    border-bottom-color: var(--tumma-reunavari);
    box-shadow: 0 0 0 var(--hiusviivan-leveys) var(--napin-ulkoreuna);
    margin: var(--hiusviivan-leveys);
    height: calc(var(--napin-korkeus) - var(--hiusviivan-leveys) * 2);
    position: relative;

    &:not(:disabled) {
        cursor: pointer;
    }

    &:disabled {
        background-image: url("data:image/svg+xml;utf8,<svg fill='%23444' height='26' viewBox='0 0 26 26' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M8 8 l 5 11 l 5 -11z'/></svg>");
        background-color: var(--taustavari);
        color: var(--passiivinen-tekstivari);
        box-shadow: 0 0 0 var(--hiusviivan-leveys) var(--passiivinen-tekstivari);
        opacity: 1;
    }

    &:focus {
        outline: 0;
    }
    &:focus-visible {
        outline: var(--aktiivisen-reunan-leveys) solid var(--aktiivinen-reunavari);
        outline-offset: var(--hiusviivan-leveys);
    }

    &:hover:not(:disabled):not(:active) {
        background-color: var(--vaalea-reunavari);
    }

    &:active:not(:disabled) {
        outline: 0;
        background-color: var(--leijuvari);
        border-top-width: var(--perusviivan-leveys);
        border-top-color: var(--tumma-reunavari);
        border-left-width: var(--perusviivan-leveys);
        border-left-color: var(--tumma-reunavari);
        border-right-width: var(--hiusviivan-leveys);
        border-right-color: var(--vaalea-reunavari);
        border-bottom-width: var(--hiusviivan-leveys);
        border-bottom-color: var(--vaalea-reunavari);
    }
}
select option {
    background-color: var(--syottokentan-taustavari);
    color: var(--tekstivari);

    &:checked {
        background-color: var(--aktiivinen-taustavari);
        color: white;
    }
    &:disabled {
        color: var(--tumma-reunavari);
    }
}

/* Valintaruutu 3D */
input[type="checkbox"] {
    display: block;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    border-style: solid;
    border-top-width: var(--hiusviivan-leveys);
    border-top-color: var(--vaalea-reunavari);
    border-left-width: var(--hiusviivan-leveys);
    border-left-color: var(--vaalea-reunavari);
    border-right-width: var(--perusviivan-leveys);
    border-right-color: var(--tumma-reunavari);
    border-bottom-width: var(--perusviivan-leveys);
    border-bottom-color: var(--tumma-reunavari);
    border-radius: 0;
    background-color: var(--napin-taustavari);
    box-shadow: 0 0 0 var(--hiusviivan-leveys) var(--napin-ulkoreuna);
    color: var(--passiivinen-linkkivari);
    outline: none;
    margin-left: var(--hiusviivan-leveys);
    margin-right: var(--hiusviivan-leveys);

    &:checked {
        border-top-width: var(--perusviivan-leveys);
        border-top-color: var(--tumma-reunavari);
        border-left-width: var(--perusviivan-leveys);
        border-left-color: var(--tumma-reunavari);
        border-right-width: var(--hiusviivan-leveys);
        border-right-color: var(--vaalea-reunavari);
        border-bottom-width: var(--hiusviivan-leveys);
        border-bottom-color: var(--vaalea-reunavari);
    }
    &:checked::after {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "✓";
        font-weight: 700;
        text-align: center;
        padding-right: var(--hiusviivan-leveys);
        line-height: calc(1rem - var(--hiusviivan-leveys));
    }

    &:disabled {
        outline: var(--hiusviivan-leveys) solid var(--passiivinen-tekstivari);
        background-color: var(--taustavari);
    }
    &:disabled:checked::after {
        color: var(--passiivinen-tekstivari);
    }
}
*:not(label) > input[type="checkbox"]:focus-visible {
    outline: var(--aktiivisen-reunan-leveys) solid var(--aktiivinen-reunavari);
    outline-offset: var(--hiusviivan-leveys);
}
label:has(input[type="checkbox"]:focus-visible) {
    outline: var(--aktiivisen-reunan-leveys) solid var(--aktiivinen-reunavari);
    outline-offset: calc(var(--hiusviivan-leveys) * -1);
}
*:not(:active) > input[type="checkbox"]:hover:not(:disabled):not(:active) {
    background-color: var(--vaalea-reunavari);
}
input[type="checkbox"]:active:not(:disabled),
label:active > input[type="checkbox"]:not(:disabled) {
    background-color: white;
    color: var(--aktiivinen-linkkivari);
}

/* Radionappi 3D */
input[type="radio"] {
    display: block;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    border-style: solid;
    border-radius: 100%;
    overflow: hidden;
    background-color: var(--napin-taustavari);
    border-width: var(--tuplaviivan-leveys);
    border-top-color: var(--vaalea-reunavari);
    border-left-color: var(--vaalea-reunavari);
    border-right-color: var(--tumma-reunavari);
    border-bottom-color: var(--tumma-reunavari);
    outline: none;
    box-shadow: 0 0 0 var(--hiusviivan-leveys) var(--napin-ulkoreuna);
    margin-left: var(--hiusviivan-leveys);
    margin-right: var(--hiusviivan-leveys);

    &:checked {
        background-color: var(--aktiivinen-taustavari);
    }
    &:checked {
        border-top-color: var(--tumma-reunavari);
        border-left-color: var(--tumma-reunavari);
        border-right-color: var(--vaalea-reunavari);
        border-bottom-color: var(--vaalea-reunavari);
    }
    &:checked::before {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        content: "■";
        text-align: center;
        font-size: 2rem;
        line-height: calc(1rem - var(--tuplaviivan-leveys) * 2);
        color: var(--aktiivinen-taustavari);
    }

    &:disabled {
        outline: var(--hiusviivan-leveys) solid var(--passiivinen-tekstivari);
        outline-offset: 0;
    }
    &:disabled:not(:checked) {
        background-color: transparent;
    }
    &:disabled:checked {
        background-color: var(--passiivinen-tekstivari);
    }
    &:disabled:checked::before {
        color: var(--passiivinen-tekstivari);
    }

    &:hover:not(:disabled):not(:checked):not(:active) {
        background-color: var(--vaalea-reunavari);
    }
}
*:not(label) > input[type="radio"]:not(:disabled):focus-visible {
    outline: var(--aktiivisen-reunan-leveys) solid var(--aktiivinen-reunavari);
    outline-offset: var(--hiusviivan-leveys);
}
label:has(input[type="radio"]:focus-visible) {
    outline: var(--aktiivisen-reunan-leveys) solid var(--aktiivinen-reunavari);
    outline-offset: calc(var(--hiusviivan-leveys) * -1);
}
input[type="radio"]:active:not(:checked):not(:disabled),
label:active > input[type="radio"]:not(:checked):not(:disabled) {
    border-top-color: var(--tumma-reunavari);
    border-left-color: var(--tumma-reunavari);
    border-right-color: var(--vaalea-reunavari);
    border-bottom-color: var(--vaalea-reunavari);
    background-color: white;
}

/* Radio- tai valintaruudun otsikko */
label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: var(--sarakevali);
    margin-left: calc(-1 * var(--sarakevali));
    margin-right: var(--sarakevali);
    min-height: var(--napin-korkeus);
    padding: var(--sisareunus-y) var(--sarakevali);
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    border-color: transparent;
    border-style: solid;
    border-top-width: var(--hiusviivan-leveys);
    border-left-width: var(--hiusviivan-leveys);
    border-right-width: var(--perusviivan-leveys);
    border-bottom-width: var(--perusviivan-leveys);

    /* Keskitä teksti pystysyynnassa */
    padding-top: calc((var(--aliheitto) - var(--yliheitto)) * var(--tekstin-koko));
    padding-bottom: calc((var(--yliheitto) - var(--aliheitto)) * var(--tekstin-koko));

    /* Keskitä radio/checkbox pystysyynnassa */
    & input[type="radio"],
    & input[type="checkbox"] {
        margin-top: calc((var(--aliheitto) - var(--yliheitto)) * var(--tekstin-koko) * -1);
    }
}
label:has(input[type="radio"]:not(:disabled)),
label:has(input[type="checkbox"]:not(:disabled)) {
    cursor: pointer;
}
label:has(input[type="radio"]:disabled),
label:has(input[type="checkbox"]:disabled) {
    color: var(--passiivinen-tekstivari);
}
label:has(input[type="radio"]:not(:disabled):not(:checked)):hover:not(:active),
label:has(input[type="checkbox"]:not(:disabled)):hover:not(:active) {
    color: var(--passiivinen-linkkivari);
}
*:not(tabs) > label:has(input[type="radio"]:not(:disabled)):active,
label:has(input[type="checkbox"]:not(:disabled)):active {
    color: var(--aktiivinen-linkkivari);
    border-top-width: var(--perusviivan-leveys);
    border-left-width: var(--perusviivan-leveys);
    border-right-width: var(--hiusviivan-leveys);
    border-bottom-width: var(--hiusviivan-leveys);
}

/* Laatikko */
fieldset {
    border: 0;
    max-width: 100%;

    /* Keskitä otsikko pystysuunnassa */
    & > legend::before,
    & > legend::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        pointer-events: none;
    }
    & > legend::before {
        margin-bottom: calc(-1 * var(--tekstin-koko) * var(--yliheitto) - 1px);
    }
    & > legend::after {
        margin-top: calc(-1 * var(--tekstin-koko) * var(--aliheitto) - 1px);
    }

    /* Lisää väliä laatikon ylä- ja alapuolelle */
    &:not(:first-child) {
        margin-top: var(--sarakevali);
    }
}

/* Välilehdet */
/* FIXME: välilehdet alas */
tabs {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--ulkoreunus-x) + var(--hiusviivan-leveys));
    margin-right: calc(-1 * var(--ulkoreunus-x) + var(--hiusviivan-leveys));

    /* Lisää rako edellisen elementin väliin */
    &:first-child {
        margin-top: var(--hiusviivan-leveys);
    }
    &:not(:first-child) {
        margin-top: calc(var(--kappalevali) + var(--hiusviivan-leveys));
    }

    & > tab {
        display: none;
        position: relative;
        width: 100%;
        flex-grow: 1;
        align-self: flex-end;
        order: 99;
        border-style: solid;
        border-top-width: var(--hiusviivan-leveys);
        border-top-color: var(--vaalea-reunavari);
        border-left-width: var(--hiusviivan-leveys);
        border-left-color: var(--vaalea-reunavari);
        border-right-width: var(--perusviivan-leveys);
        border-right-color: var(--tumma-reunavari);
        border-bottom-width: var(--perusviivan-leveys);
        border-bottom-color: var(--tumma-reunavari);
        padding: var(--ulkoreunus-y) var(--ulkoreunus-x);

        box-shadow:
            var(--hiusviivan-leveys) var(--hiusviivan-leveys) 0 0 var(--napin-ulkoreuna),
            0 0 0 var(--hiusviivan-leveys) var(--tumma-reunavari);
    }

    & > label:has(input[type="radio"]) {
        margin-left: 0;
        margin-right: 0;
        border-style: solid;
        border-radius: var(--leiman-pyoristys) var(--leiman-pyoristys) 0 0;
        border-width: var(--hiusviivan-leveys);
        border-color: var(--tumma-reunavari);
        background-color: var(--napin-taustavari);
        padding-top: calc(var(--perusviivan-leveys) + var(--hiusviivan-leveys));
        padding-left: var(--ulkoreunus-x);
        padding-right: var(--ulkoreunus-x);
    }

    & > label:has(input[type="radio"]:checked) {
        background-color: var(--lomakkeen-taustavari);
        height: calc(var(--napin-korkeus) + var(--hiusviivan-leveys) * 2);
        margin-bottom: calc(var(--hiusviivan-leveys) * -2);
        z-index: 2;
        border-style: solid;
        border-width: var(--hiusviivan-leveys);
        border-top-color: var(--vaalea-reunavari);
        border-left-color: var(--vaalea-reunavari);
        border-right-color: var(--taustavari);
        border-bottom-width: 0;
        padding-top: 0;
        box-shadow:
            var(--hiusviivan-leveys) calc(var(--hiusviivan-leveys) * -1) 0 0 var(--tumma-reunavari),
            calc(var(--hiusviivan-leveys) * -1) calc(var(--hiusviivan-leveys) * -1) 0 0 var(--tumma-reunavari);
    }

    & > label:has(input[type="radio"]:not(:checked)):hover:not(:active) {
        background-color: var(--vaalea-reunavari);
    }

    & > label:has(input[type="radio"]:not(:checked)):active {
        background-color: white;
    }

    & > label:has(input[type="radio"]:checked) + tab {
        display: block;
    }

    /* Piilota radionappi */
    & > label > input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
    }
}
tabs > label:has(> input[type="radio"]:not(:disabled):focus-visible) {
    outline: var(--aktiivisen-reunan-leveys) solid var(--aktiivinen-reunavari);
    outline-offset: calc(var(--aktiivisen-reunan-leveys) * -1 - var(--hiusviivan-leveys));
}
tabs > label:has(> input[type="radio"]:not(:disabled)):active {
    transform: translate(0, calc(var(--hiusviivan-leveys) * -1));
    height: calc(var(--napin-korkeus) + var(--hiusviivan-leveys) * 2);
    margin-bottom: calc(var(--hiusviivan-leveys) * -2);
    z-index: 2;
    border-style: solid;
    border-width: var(--hiusviivan-leveys);
    border-top-color: var(--vaalea-reunavari);
    border-left-color: var(--vaalea-reunavari);
    border-right-color: var(--taustavari);
    border-bottom-width: 0;
    padding-top: 0;
    box-shadow:
        var(--hiusviivan-leveys) calc(var(--hiusviivan-leveys) * -1) 0 0 var(--tumma-reunavari),
        calc(var(--hiusviivan-leveys) * -1) calc(var(--hiusviivan-leveys) * -1) 0 0 var(--tumma-reunavari);
}


/****** APULUOKAT ******/

/* Fontit */
.serif {
    --rivin-korkeus: var(--leipateksti-rivin-korkeus);
    --yliheitto: var(--leipateksti-yliheitto);
    --aliheitto: var(--leipateksti-aliheitto);
    font-family: var(--leipateksti-kirjasin);
    line-height: var(--rivin-korkeus);
}
.sans {
    --rivin-korkeus: var(--lomake-rivin-korkeus);
    --yliheitto: var(--lomake-yliheitto);
    --aliheitto: var(--lomake-aliheitto);
    font-family: var(--lomake-kirjasin);
    line-height: var(--rivin-korkeus);
}
.mono {
    --rivin-korkeus: var(--tasalevyinen-rivin-korkeus);
    --yliheitto: var(--tasalevyinen-yliheitto);
    --aliheitto: var(--tasalevyinen-aliheitto);
    font-family: var(--tasalevyinen-kirjasin);
    line-height: var(--rivin-korkeus);
}
.cursive {
    --rivin-korkeus: var(--kauno-rivin-korkeus);
    --yliheitto: var(--kauno-yliheitto);
    --aliheitto: var(--kauno-aliheitto);
    font-family: var(--kauno-kirjasin);
    line-height: var(--rivin-korkeus);
}


/* Fontin lisämääreet */
.normal {
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none;
}
.italic {
    font-style: italic;
}
.bold {
    font-weight: bold;
}
.heavy {
    text-shadow: 1px 0 var(--tekstivari);
    letter-spacing: 1px;
    font-weight: bold;
    font-stretch: 200%;
}
.underline {
    text-decoration: underline;
    text-underline-offset: var(--perusviivan-leveys);
}
.uppercase {
    text-transform: uppercase;
}

/* Fontin koko */
.small {
    --tekstin-koko: var(--pieni-teksti);
    font-size: var(--tekstin-koko);
}
.normal {
    --tekstin-koko: 1rem;
    font-size: var(--tekstin-koko);
}
.medium {
    --tekstin-koko: 1.5rem;
    font-size: var(--tekstin-koko);
}
.large {
    --tekstin-koko: 3rem;
    font-size: var(--tekstin-koko);
}
.huge {
    --tekstin-koko: 100px;
    font-size: var(--tekstin-koko);
}

/* Sanan katkaisu */
.break-all {
    word-break: break-all;
}
.break-word {
    word-break: break-word;
}

/* Riviasettelu */
flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: var(--sarakevali);
    row-gap: var(--sarakevali);
    justify-content: flex-start;
    flex-wrap: wrap;

    /* Sijoita linkkinapit vierekkäin ilman reunusta */
    & > a:not(.btn),
    & > .btn-link {
        margin-left: calc(var(--sisareunus-x) * -0.5);
        margin-right: calc(var(--sisareunus-x) * -0.5);
    }
    & > a:not(.btn):first-child,
    & > .btn-link:first-child {
        margin-left: 0;
    }
    & > a:not(.btn):last-child,
    & > .btn-link:last-child {
        margin-right: 0;
    }

    /* Älä sisennä peräkkäisiä elementtejä */
    & > * {
        --kappalevali: 0;
    }
}
*:not(input-group) > flex-row {
    /* Lisää tyhjää ylä- ja alapuolelle */
    &:not(:first-child) {
        margin-top: var(--sarakevali-yla);
    }
    &:not(:last-child) {
        margin-bottom: var(--sarakevali-ala);
    }
}

/* Venytä */
.flex-stretch {
    align-items: stretch;
}

/* Estä kappalejako riviasettelussa */
.flex-nowrap {
    flex-wrap: nowrap;
}

/* Sarake-asettelu */
flex-col,
.flex-col {
    display: flex;
    flex-direction: column;
    align-items: start;
    column-gap: 0;
    row-gap: var(--sarakevali);
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 100%;
}

/* Sarakkeiden leveydet */
.basis-full {
    flex-basis: 250px;
}
.basis-1\/6 {
    flex-basis: calc(250px / 6);
}
.basis-1\/4 {
    flex-basis: calc(250px / 4);
}
.basis-1\/3 {
    flex-basis: calc(250px / 3);
}
.basis-1\/2 {
    flex-basis: calc(250px / 2);
}
.basis-2\/3 {
    flex-basis: calc(250px * 2 / 3);
}
.basis-3\/4 {
    flex-basis: calc(250px * 3 / 4);
}
.basis-5\/6 {
    flex-basis: calc(250px * 5 / 6);
}

/* Tasaus */
.left {
    text-align: left;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}

/* Marginaalit */
.mt-0,
.my-0,
.m-0 {
    --kappalevali-yla: 0rem;
    margin-top: var(--kappalevali-yla);
}
.mt-1,
.my-1,
.m-1 {
    --kappalevali-yla: 0.5rem;
    margin-top: var(--kappalevali-yla);
}
.mt-2,
.my-2,
.m-2 {
    --kappalevali-yla: 1rem;
    margin-top: var(--kappalevali-yla);
}
.mt-3,
.my-3,
.m-3 {
    --kappalevali-yla: 1.5rem;
    margin-top: var(--kappalevali-yla);
}
.mt-4,
.my-4,
.m-4 {
    --kappalevali-yla: 2rem;
    margin-top: var(--kappalevali-yla);
}
.mb-0,
.my-0,
.m-0 {
    --kappalevali-ala: 0.0rem;
    margin-bottom: var(--kappalevali-ala);
}
.mb-1,
.my-1,
.m-1 {
    --kappalevali-ala: 0.5rem;
    margin-bottom: var(--kappalevali-ala);
}
.mb-2,
.my-2,
.m-2 {
    --kappalevali-ala: 1rem;
    margin-bottom: var(--kappalevali-ala);
}
.mb-3,
.my-3,
.m-3 {
    --kappalevali-ala: 1.5rem;
    margin-bottom: var(--kappalevali-ala);
}
.mb-4,
.my-4,
.m-4 {
    --kappalevali-ala: 2rem;
    margin-bottom: var(--kappalevali-ala);
}
.ml-0,
.mx-0,
.m-0 {
    margin-left: 0rem;
}
.ml-1,
.mx-1,
.m-1 {
    margin-left: 0.5rem;
}
.ml-2,
.mx-2,
.m-2 {
    margin-left: 1rem;
}
.ml-3,
.mx-3,
.m-3 {
    margin-left: 1.5rem;
}
.ml-4,
.mx-4,
.m-4 {
    margin-left: 2rem;
}
.mr-0,
.mx-0,
.m-0 {
    margin-right: 0rem;
}
.mr-1,
.mx-1,
.m-1 {
    margin-right: 0.5rem;
}
.mr-2,
.mx-2,
.m-2 {
    margin-right: 1rem;
}
.mr-3,
.mx-3,
.m-3 {
    margin-right: 1.5rem;
}
.mr-4,
.mx-4,
.m-4 {
    margin-right: 2rem;
}

/* Kehykset */
flex-card {
    min-width: 100px;
    min-height: 100px;
    padding: var(--ulkoreunus-y) var(--ulkoreunus-x);
    border-radius: var(--leiman-pyoristys);
    display: flex;
    flex-direction: column;
    row-gap: var(--sarakevali);
}
flex-card:not(.center) {
    align-items: start;
    justify-content: stretch;
}
flex-card.center {
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Värit */
@media screen {
    .orange {
        --taustavari: #FF6943;
        --tekstivari: #fff;
        --valo: #ff0;
        --varjo: #833;
    }
    .brown {
        --taustavari: #FFB63E;
        --tekstivari: #000;
        --valo: #ff0;
        --varjo: #840;
    }
    .black {
        --taustavari: #222;
        --tekstivari: #fff;
        --valo: #888;
        --varjo: #000;
    }
    .white {
        --taustavari: #eee;
        --tekstivari: #222;
        --valo: #fff;
        --varjo: #888;
    }
    .red {
        --taustavari: #991C00;
        --tekstivari: #fff;
        --valo: #f80;
        --varjo: #800;
    }
    .green {
        --taustavari: #006742;
        --tekstivari: #fff;
        --valo: #0f0;
        --varjo: #040;
    }
    .blue {
        --taustavari: #00a;
        --tekstivari: #fff;
        --valo: #0ff;
        --varjo: #006;
    }
    .magenta {
        --taustavari: #B1008B;
        --tekstivari: #fff;
        --valo: #f0f;
        --varjo: #000;
    }
    .cyan {
        --taustavari: #278198;
        --tekstivari: #fff;
        --valo: #0ff;
        --varjo: #088;
    }
    .yellow {
        --taustavari: #F9F871;
        --tekstivari: #000;
        --valo: #ff0;
        --varjo: #880;
    }
    .gray {
        --taustavari: #bbb;
        --tekstivari: #000;
        --valo: #fff;
        --varjo: #666;
    }

    .orange,
    .brown,
    .black,
    .white,
    .red,
    .green,
    .blue,
    .magenta,
    .cyan,
    .yellow,
    .gray {
        color: var(--tekstivari);

        /* Älä lisää taustaväriä ikoniin tai linkkiin */
        &:not(i[class^="icon-"]):not(i[class*=" icon-"]):not(a) {
            background-color: var(--taustavari);
        }

        /* Lisää reunus tekstikappaleeseen ja otsikkoon */
        &:is(p, pre, h1, h2, h3, h4, h5, h6, div, ul, ol) {
            padding: var(--ulkoreunus-y) var(--ulkoreunus-x);
            border-radius: var(--leiman-pyoristys);
        }

        /* Lisää tekstin reunaväri leimaan */
        &:is(b, mark, p) {
            --vaalea-reunavari: color-mix(in srgb, var(--taustavari) 60%, var(--valo));
            --tumma-reunavari: color-mix(in srgb, var(--taustavari) 60%, var(--varjo));
            text-shadow:
                calc(var(--hiusviivan-leveys) * -1) calc(var(--hiusviivan-leveys) * -1) 0 var(--tumma-reunavari),
                var(--hiusviivan-leveys) var(--hiusviivan-leveys) 0 var(--vaalea-reunavari);
        }

        /* Lisää reunaväri nappiin */
        &:is(.btn),
        &:is(input[type="submit"]):not(.btn-link),
        &:is(input[type="button"]):not(.btn-link),
        &:is(input[type="checkbox"]),
        &:is(input[type="radio"]),
        &:is(button):not(.btn-link),
        &:is(select) {
            --napin-taustavari: var(--taustavari);
            --vaalea-reunavari: color-mix(in srgb, var(--taustavari) 60%, var(--valo));
            --tumma-reunavari: color-mix(in srgb, var(--taustavari) 60%, var(--varjo));
            --passiivinen-linkkivari: var(--tekstivari);
            --aktiivinen-linkkivari: var(--tekstivari);
            --leijuvari: color-mix(in srgb, var(--taustavari) 50%, var(--valo));

            /* Korosta teksti värillisestä taustasta */
            text-shadow:
                calc(var(--hiusviivan-leveys) * -1) calc(var(--hiusviivan-leveys) * -1) 0 var(--tumma-reunavari),
                var(--hiusviivan-leveys) var(--hiusviivan-leveys) 0 var(--vaalea-reunavari);
        }

        /* Väritä linkkinapin ikoni */
        &:is(a):not(.btn),
        &:is(.btn-link) {
            --ikonin-taustavari: var(--tekstivari);
            --ikonin-edustavari: var(--taustavari);
            // FIXME: --aktiivinen-linkkivari:
        }

        /* Väritä itsenäinen ikoni */
        &:is(i[class^="icon-"]),
        &:is(i[class*=" icon-"]) {
            --ikonin-taustavari: var(--tekstivari);
            --ikonin-edustavari: var(--taustavari);
            // FIXME: --aktiivinen-linkkivari:
        }
    }
}


/****** ANIMAATIOT ******/

@keyframes blinker {
    from { box-shadow: inset 0 0 0 red; }
    50% { box-shadow: inset 0 0 10px red; }
    to { box-shadow: inset 0 0 0 red; }
}


/****** IKONIT ******/

/* Väritä ikonin tausta */
*:not(:disabled) > i[class^="icon-"]::before,
*:not(:disabled) > i[class*=" icon-"]::before {
    color: var(--ikonin-edustavari);
    text-shadow:
         1px  1px 0 var(--ikonin-taustavari),
        -1px  1px 0 var(--ikonin-taustavari),
         1px -1px 0 var(--ikonin-taustavari),
        -1px -1px 0 var(--ikonin-taustavari);
}



/****** TULOSTUS ******/

@media print {
    /* Poista värit linkeistä */
    a, button.btn-link, input.btn-link {
        background-color: white !important;
        color: #000 !important;
        text-shadow: none;
    }

    /* Poista väri korostuskynästä */
    mark {
        background-color: inherit;
        box-shadow: none;
        color: inherit;
    }

    /* Piilota ylä- ja alatunnisteet */
    header, footer, sidebar {
        display: none !important;
    }
}



/* FIXME: roskaa? */
/* Kyllä/ei painike */
/*
input[type="checkbox"] {
    display: block;
    width: 4rem;
    min-width: 4rem;
    height: 1.5rem;
    margin: var(--hiusviivan-leveys);
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    border-width: var(--perusviivan-leveys);
    border-style: solid;
    border-top-color: var(--vaalea-reunavari);
    border-left-color: var(--vaalea-reunavari);
    border-right-color: var(--tumma-reunavari);
    border-bottom-color: var(--tumma-reunavari);
    outline: var(--hiusviivan-leveys) solid var(--tekstivari);
    outline-offset: 0;

    &:checked:not(:disabled) {
        border-top-color: var(--tumma-reunavari);
        border-left-color: var(--tumma-reunavari);
        border-right-color: var(--vaalea-reunavari);
        border-bottom-color: var(--vaalea-reunavari);
    }

    &:focus:not(:disabled) {
        outline: var(--perusviivan-leveys) solid var(--tekstivari);
        outline-offset: calc(var(--hiusviivan-leveys) * -1);
    }

    &::before {
        display: block;
        text-align: center;
        width: calc(4rem - var(--perusviivan-leveys) * 2);
        height: calc(1.5rem - var(--perusviivan-leveys) * 2);
        font-size: 0.75rem;
        padding: 0 var(--sisareunus-x);
        line-height: calc(1.5rem - var(--perusviivan-leveys) * 2);
    }
    &:not(:checked)::before {
        content: "Ei";
    }
    &[data-unchecked]:not(:checked)::before {
        content: attr(data-unchecked);
    }
    &:not(:checked):not(:disabled)::before {
        color: var(--tekstivari);
        background-color: var(--napin-taustavari);
    }
    &:checked::before {
        content: "Kyllä";
    }
    &[data-checked]:checked::before {
        content: attr(data-checked);
    }
    &:checked:not(:disabled)::before {
        color: var(--aktiivinen-tekstivari);
        background-color: var(--aktiivinen-taustavari);
        text-shadow: 0 0 var(--tuplaviivan-leveys) var(--aktiivinen-tekstivari);
    }
    &:hover:not(:checked):not(:disabled)::before {
        background-color: var(--leijuvari);
    }

    &:disabled {
        color: var(--passiivinen-tekstivari);
        background-color: var(--lomakkeen-taustavari);
        border-top-color: var(--lomakkeen-taustavari);
        border-left-color: var(--lomakkeen-taustavari);
        border-right-color: var(--lomakkeen-taustavari);
        border-bottom-color: var(--lomakkeen-taustavari);
    }
    &:disabled::before {
        color: var(--passiivinen-tekstivari);
    }
}
*/

/* Perinteinen radionappi */
/*
input[type="radio"] {
    display: block;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    border-radius: 100%;
    margin-bottom: calc(var(--hiusviivan-leveys) * -1);
    overflow: hidden;
    background-color: var(--syottokentan-taustavari);
    outline: var(--hiusviivan-leveys) solid var(--tekstivari);
    outline-offset: 0;

    &:checked {
        background-color: var(--aktiivinen-taustavari);
        border-color: var(--syottokentan-taustavari);
        border-width: var(--tuplaviivan-leveys);
        border-style: solid;
    }
    &:checked:not(:disabled) {
        border-color: var(--syottokentan-taustavari);
    }
    &:checked:disabled {
        border-color: var(--lomakkeen-taustavari);
    }

    &:checked::before {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        content: "◉";
        text-align: center;
        font-size: 1rem;
        line-height: calc(1rem - var(--tuplaviivan-leveys) * 2);
        color: var(--aktiivinen-taustavari);
    }
    &:focus {
        outline: var(--perusviivan-leveys) solid var(--tekstivari);
        outline-offset: calc(var(--hiusviivan-leveys) * -1);
    }
    &:disabled {
    }
    &:disabled:not(:checked) {
        background-color: transparent;
        border-width: 0;
    }
    &:checked:disabled::before {
        line-height: 1rem;
    }
    &:hover:not(:disabled):not(:focus):not(:checked) {
        background-color: var(--leijuvari);
    }
}
*/