/* Yksi tiedosto, ei nipputyökalua (ADR 0004).
   Kontrasti ja kosketuskohteiden koko: WCAG 2.2 AA (REQ-UI-004).
   Ilme: Autosoothin brändiohje, luonnos 1 (REQ-UI-007) — Laguuni ja
   pellava, otsikot Literata, teksti Atkinson Hyperlegible. */

/* ═══ Fontit ══════════════════════════════════════════════════════════
 * Omasta alkuperästä (CSP: ei ulkoisia fontteja), suomen merkistöön
 * rajattuina. SIL OFL, lisenssit web/static/fontit/. */
@font-face {
  font-family: "Literata"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/s/fontit/literata-600.woff") format("woff");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/s/fontit/atkinson-next-400.woff") format("woff");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("/s/fontit/atkinson-next-400i.woff") format("woff");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/s/fontit/atkinson-next-700.woff") format("woff");
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/s/fontit/atkinson-mono-400.woff") format("woff");
}

/* ═══ Värit ja mitat ══════════════════════════════════════════════════ */
:root {
  --tausta: #f6f4ef;          /* Pellava */
  --paperi: #ffffff;          /* Valkea */
  --teksti: #17292c;          /* Muste */
  --toissijainen: #3f5357;    /* Kivi 700 */
  --himmea: #5a6d71;          /* Kivi 600: ≥ 4,6:1 kaikilla vaaleilla pinnoilla */
  --viiva: #c5cfce;           /* Kivi 300: jakoviivat, ei kentän reuna */
  --reuna-kentta: #7a8c8e;    /* Kivi 400: kentän reuna ≥ 3:1 (WCAG 1.4.11) */
  --pinta-upotettu: #ebefee;  /* Kivi 100 */
  --korostus: #1f6f6b;        /* Laguuni: valkoinen teksti 5,9:1 */
  --korostus-tumma: #16514e;
  --korostus-pehmea: #e4f0ec; /* Usva */
  --aksentti: #e9926a;        /* Aprikoosi: ei tekstiväri */
  --ok: #29704d;       --ok-pohja: #e3f1e9;  /* 5,1:1 pohjallaan */
  --huomio: #7d560e;   --huomio-pohja: #f6e7c8;
  --este: #b3261e;     --este-pohja: #fbe3e0;
  --tieto: #2d5f8b;    --tieto-pohja: #e2ebf4;
  --painike-teksti: #ffffff;
  --fokus: #1f6f6b;

  --otsikko: "Literata", Georgia, "Times New Roman", serif;
  --leipa: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --sade: .625rem;            /* kentät */
  --sade-painike: .75rem;
  --sade-kortti: 1rem;
  --leveys: 44rem;
  --nav-w: 16rem;
  color-scheme: light;
}

/* Tumma teema: järjestelmän mukaan, ellei käyttäjä ole valinnut toisin
   (REQ-UI-006: `data-teema` sivupalkin teemapainikkeesta). Sama paletti
   kahdesti: mediakyselyn sisään ja valinnan mukaan. */
@media (prefers-color-scheme: dark) {
  :root:not([data-teema="vaalea"]) {
    --tausta: #0e1b1d;          /* Yö */
    --paperi: #162729;          /* Yöpinta */
    --teksti: #e6eeec;          /* Kuutamo */
    --toissijainen: #c3d1cf;
    --himmea: #9fb2b0;          /* Kuutamo 2: 7,0:1 */
    --viiva: #2e4447;
    --reuna-kentta: #6c878a;
    --pinta-upotettu: #1c3133;
    --korostus: #7cc2b8;        /* Laguuni vaalea */
    --korostus-tumma: #a6dad2;
    --korostus-pehmea: #1b3a38;
    --ok: #8ed3ae;       --ok-pohja: #173328;
    --huomio: #e8b866;   --huomio-pohja: #3a2e14;
    --este: #f4a097;     --este-pohja: #3f1e1b;
    --tieto: #a3c8ec;    --tieto-pohja: #182c40;
    --painike-teksti: #0e1b1d;
    --fokus: #7cc2b8;
    color-scheme: dark;
  }
}
:root[data-teema="tumma"] {
  --tausta: #0e1b1d;
  --paperi: #162729;
  --teksti: #e6eeec;
  --toissijainen: #c3d1cf;
  --himmea: #9fb2b0;
  --viiva: #2e4447;
  --reuna-kentta: #6c878a;
  --pinta-upotettu: #1c3133;
  --korostus: #7cc2b8;
  --korostus-tumma: #a6dad2;
  --korostus-pehmea: #1b3a38;
  --ok: #8ed3ae;       --ok-pohja: #173328;
  --huomio: #e8b866;   --huomio-pohja: #3a2e14;
  --este: #f4a097;     --este-pohja: #3f1e1b;
  --tieto: #a3c8ec;    --tieto-pohja: #182c40;
  --painike-teksti: #0e1b1d;
  --fokus: #7cc2b8;
  color-scheme: dark;
}

/* ═══ Perusta ═════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

/* Potilaan leipäteksti vähintään 18 px (brändiohje); henkilökunnan
   tiheämmät näkymät 16 px. */
html { font-size: 18px; }
html.henkilokunta { font-size: 16px; }

body {
  margin: 0;
  background: var(--tausta);
  color: var(--teksti);
  font-family: var(--leipa);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

.kuori { max-width: var(--leveys); margin: 0 auto; padding: 1.25rem 1.25rem 4rem; }
.leveä { --leveys: 70rem; }

h1, h2 { font-family: var(--otsikko); font-weight: 600; letter-spacing: -.01em; }
/* Pitkät suomen yhdyssanat ("turvallisuuskysymykset") eivät saa leventää
   sivua puhelimessa. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: clamp(1.75rem, 1.45rem + 1vw, 2.2rem); line-height: 1.15; margin: 1.2rem 0 .5rem; }
h2 { font-size: 1.4rem; line-height: 1.25; margin: 1.9rem 0 .5rem; }
h3 { font-size: 1.1rem; line-height: 1.35; font-weight: 700; margin: 1.4rem 0 .35rem; }
p, li { max-width: 38rem; }
strong, b { font-weight: 700; }
a { color: var(--korostus); text-underline-offset: .15em; }
a:hover { color: var(--korostus-tumma); }

.johdanto { color: var(--toissijainen); margin-top: 0; }
.vihje { color: var(--himmea); font-size: .88rem; margin: .15rem 0 .45rem; }

/* ═══ Kirjautumaton yläpalkki ════════════════════════════════════════ */
header.ylin { background: var(--paperi); border-bottom: 1px solid var(--viiva); }
header.ylin .kuori { padding: .9rem 1.25rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* Lukitus: ikoni ja sanamerkki. Sanamerkki on kuva, jonka kirjaimet ovat
   ääriviivoja (Orbitron), joten logo ei riipu fonteista. Tummalle
   pohjalle oma versio; teemavalinta vaihtaa kuvan. */
.lukitus { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.lukitus .merkki-ikoni { width: 2rem; height: 2rem; flex: none; }
.lukitus .sanamerkki { height: 1.05rem; width: auto; display: block; }
.sanamerkki.sm-tumma { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-teema="vaalea"]) .sanamerkki.sm-vaalea { display: none; }
  :root:not([data-teema="vaalea"]) .sanamerkki.sm-tumma { display: block; }
}
:root[data-teema="tumma"] .sanamerkki.sm-vaalea { display: none; }
:root[data-teema="tumma"] .sanamerkki.sm-tumma { display: block; }

/* Rauhoittuva aalto: kirjautumattomien sivujen alaosassa. Yksi ohut viiva,
   joka päättyy hiljaisuuspisteeseen (brändiohje). */
.aalto { display: block; width: 100%; height: auto; margin: 2.5rem 0 0; color: var(--korostus); }
.aalto .piste { fill: var(--aksentti); }

/* ═══ Kortit, listat, merkinnät ══════════════════════════════════════ */
.kortti {
  background: var(--paperi);
  border: 1px solid var(--viiva);
  border-radius: var(--sade-kortti);
  padding: 1.15rem 1.25rem;
  margin: 1rem 0;
}
.kortti > :first-child { margin-top: 0; }
.kortti h2 { font-size: 1.3rem; }
.kortti h2, .kortti h3 { margin-top: 0; }

.rivi { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.oikealle { margin-left: auto; }

ul.lista { list-style: none; padding: 0; margin: 0; }
ul.lista > li {
  border-bottom: 1px solid var(--viiva);
  padding: .8rem 0;
  max-width: none;
}
ul.lista > li:last-child { border-bottom: 0; }

/* Tilamerkki: täytetty pilleri, teksti tilavärillä (kontrasti ≥ 5:1). */
.merkintä {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 700; line-height: 1.3;
  border-radius: 999px;
  padding: .2rem .65rem;
  background: var(--pinta-upotettu);
  color: var(--toissijainen);
  white-space: nowrap;
}
.merkintä.tehty { background: var(--ok-pohja); color: var(--ok); }
.merkintä.auki { background: var(--korostus-pehmea); color: var(--korostus-tumma); }
.merkintä.este { background: var(--este-pohja); color: var(--este); }
.merkintä.huomio { background: var(--huomio-pohja); color: var(--huomio); }
.merkintä.tieto { background: var(--tieto-pohja); color: var(--tieto); }
.merkinnat { display: flex; flex-wrap: wrap; gap: .35rem; }
/* Työjonon signaali voi olla lause: rivittyy, ei venytä taulukkoa. */
.merkinnat .merkintä { white-space: normal; border-radius: var(--sade); }

/* Ilmoitus: sävytetty pinta, ei reunaviivaa. Punainen vain liput ja
   virheet. */
.ilmoitus {
  background: var(--korostus-pehmea);
  color: var(--teksti);
  border-radius: var(--sade-painike);
  padding: .85rem 1.1rem;
  margin: 1rem 0;
}
.ilmoitus > :first-child { margin-top: 0; }
.ilmoitus > :last-child { margin-bottom: 0; }
.ilmoitus.huomio { background: var(--huomio-pohja); }
.ilmoitus.este { background: var(--este-pohja); }
.ilmoitus.este strong, .ilmoitus.este h2 { color: var(--este); }

/* Koeklinikan nauha (REQ-PUR-006): sivun ylin rivi, sivupalkin ja sisällön
   yläpuolella, ei piilotettavissa. Huomion pohja, ei punaista: kyse ei
   ole virheestä vaan ympäristöstä. */
.koenauha {
  background: var(--huomio-pohja);
  color: var(--teksti);
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
  padding: .45rem 1rem;
  border-bottom: 1px solid var(--viiva);
}

/* ═══ Lomakkeet ══════════════════════════════════════════════════════ */
form { margin: 1rem 0; }
/* `min-width: 0`: selaimen oletus (min-content) levitti ryhmän sisältönsä
   levyiseksi, jolloin askeleellinen asteikko ei rivittynyt ja sivu vieri
   puhelimessa vaakasuunnassa (REQ-UI-006). */
fieldset {
  border: 1px solid var(--viiva); border-radius: var(--sade-kortti);
  margin: 0 0 1.2rem; padding: 1rem 1.1rem; background: var(--paperi);
  min-width: 0;
}
/* Kysymys ryhmän sisällä eikä reunaviivalla: pitkä kysymys kiertyy
   puhelimessa kahdelle riville, ja reunalla se halkaisi viivan. */
legend { float: left; width: 100%; padding: 0; margin: 0 0 .5rem; font-weight: 700; font-size: 1.05rem; line-height: 1.4; }
legend + * { clear: both; }
label { display: block; margin: .6rem 0 .25rem; font-weight: 700; font-size: .95rem; }

input:not([type]), input[type=text], input[type=email], input[type=number], input[type=tel],
input[type=date], input[type=time], input[type=datetime-local], textarea, select {
  font: inherit;
  width: 100%;
  max-width: 34rem;
  min-height: 2.75rem;
  padding: .55rem .75rem;
  border: 1.5px solid var(--reuna-kentta);
  border-radius: var(--sade);
  background: var(--paperi);
  color: var(--teksti);
}
textarea { min-height: 7rem; resize: vertical; }
.viesti-teksti + .luettu { margin-top: -.4rem; text-align: right; }
/* Pystylomakkeessa painike ei liimaudu edellisen kentän reunaan. */
form:not(.rivi) > :is(input:not([type=hidden]), select, textarea) + button { margin-top: .75rem; }

input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible,
a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* Asteikko 0–10 radiopainikkeina: toimii ilman JavaScriptiä (REQ-UI-003). */
.asteikko {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
  gap: .4rem; margin: .4rem 0 .3rem; max-width: 34rem;
}
.asteikko label {
  margin: 0;
  border: 1.5px solid var(--viiva);
  border-radius: var(--sade-painike);
  min-height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--paperi);
  cursor: pointer;
  font-family: var(--mono); font-weight: 400; font-size: 1rem;
}
.asteikko input { position: absolute; opacity: 0; width: 0; height: 0; }
.asteikko label:has(input:checked) {
  background: var(--korostus); color: var(--painike-teksti); border-color: var(--korostus); font-weight: 700;
}
.asteikko label:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.ankkurit { display: flex; justify-content: space-between; gap: 1rem; max-width: 34rem; color: var(--himmea); font-size: .85rem; }
/* Yhdentoista arvon asteikko (0–10 ja VAS 0–100 askeleella 10):
   painikkeet tasaisina riveinä kysymysryhmän leveyden mukaan
   (säiliökysely) — kapeimmillaan 4 + 4 + 3, sitten 6 + 5 ja
   leveimmillään yksi rivi. Sarakemäärä on kiinteä eikä auto-fill, jottei
   viimeinen arvo jää yksin riville. Kun painikkeet rivittyvät, ankkurit
   ovat allekkain: oikean laidan "10 = …" ei osuisi 10:n kohdalle. Ilman
   säiliökyselyä (vanha selain) jää 4 + 4 + 3. Lyhyempi asteikko (ISI
   0–4) pysyy ennallaan.

   0–10: rajat pikseleinä, jotta painike on vähintään 44 px sekä potilaan
   18 px:n että henkilökunnan 16 px:n tekstillä (6 × 44 px + välit =
   300 px, 11 × 44 px + välit = 556 px). 360 px:n puhelimessa 4 + 4 + 3
   (noin 63 px), 390 px:n 6 + 5 (45 px).

   Askeleellinen (REQ-QST-015, `.leveat`): kolminumeroinen arvo tarvitsee
   leveämmän painikkeen, joten rajat ovat n × 2,75rem + välit (potilaalla
   vähintään 49,5 px); 360 ja 390 px:n puhelimessa 4 + 4 + 3.

   Enimmäisleveys 40rem eikä 34rem: henkilökunnan tekstillä 34rem (544 px)
   kapensi yhden rivin painikkeet alle 44 px:n.

   Valitsimet eivät mene päällekkäin (`:not(.leveat)`), ja kaikki voittavat
   puhelimen `.asteikko`-säännön. Luettelo eikä `:is()`: `:is()` saisi
   pisimmän valitsimen painoarvon ja voittaisi `.leveat`-rivisäännön. */
fieldset:has(> .asteikko) { container-type: inline-size; }
.asteikko:not(.leveat):has(> label:nth-child(11)), .asteikko.leveat {
  grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 40rem;
}
.asteikko:not(.leveat):has(> label:nth-child(11)) + .ankkurit,
.asteikko.leveat + .ankkurit { flex-direction: column; gap: .1rem; max-width: 40rem; }
@container (min-width: 300px) {
  .asteikko:not(.leveat):has(> label:nth-child(11)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@container (min-width: 556px) {
  .asteikko:not(.leveat):has(> label:nth-child(11)) { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .asteikko:not(.leveat):has(> label:nth-child(11)) + .ankkurit { flex-direction: row; }
  .asteikko:not(.leveat):has(> label:nth-child(11)) + .ankkurit > :last-child { text-align: right; }
}
@container (min-width: 18.5rem) {
  .asteikko.leveat { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@container (min-width: 34.25rem) {
  .asteikko.leveat { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .asteikko.leveat + .ankkurit { flex-direction: row; }
  .asteikko.leveat + .ankkurit > :last-child { text-align: right; }
}
/* Valinnainen kohta (REQ-QST-017): sanottu tekstinä, ei pelkkänä värinä. */
legend .valinnainen { font-weight: 400; color: var(--himmea); font-size: .88rem; }

.valinnat label {
  display: flex; gap: .6rem; align-items: baseline; font-weight: 400;
  border: 1.5px solid var(--viiva); border-radius: var(--sade-painike);
  padding: .65rem .8rem; margin: .4rem 0; background: var(--paperi); max-width: 34rem;
}
.valinnat label:has(input:checked) { border-color: var(--korostus); background: var(--korostus-pehmea); }
.valinnat input { accent-color: var(--korostus); }

/* ═══ Painikkeet ═════════════════════════════════════════════════════ */
button, .painike {
  font: inherit;
  font-weight: 700;
  background: var(--korostus);
  color: var(--painike-teksti);
  border: 1.5px solid var(--korostus);
  border-radius: var(--sade-painike);
  padding: .55rem 1.2rem;
  min-height: 2.75rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
button:hover, .painike:hover { background: var(--korostus-tumma); border-color: var(--korostus-tumma); color: var(--painike-teksti); }
button.toissijainen, .painike.toissijainen {
  background: var(--paperi); color: var(--korostus); border-color: var(--korostus);
}
button.toissijainen:hover, .painike.toissijainen:hover { background: var(--korostus-pehmea); color: var(--korostus-tumma); }
button:disabled { background: var(--pinta-upotettu); border-color: var(--pinta-upotettu); color: var(--himmea); cursor: not-allowed; }

/* ═══ Taulukot ja luvut ══════════════════════════════════════════════ */
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
/* Leveä taulukko vierii itse; sivu ei vieri vaakasuunnassa. */
.taulukko { overflow-x: auto; max-width: 100%; }
th, td { text-align: left; padding: .6rem .6rem; border-bottom: 1px solid var(--viiva); vertical-align: top; }
thead th {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--toissijainen); background: var(--pinta-upotettu); border-bottom: 0;
}
thead th:first-child { border-top-left-radius: var(--sade); border-bottom-left-radius: var(--sade); }
thead th:last-child { border-top-right-radius: var(--sade); border-bottom-right-radius: var(--sade); }
tbody th { font-weight: 700; color: var(--toissijainen); }
td.luku, th.luku { text-align: right; font-variant-numeric: tabular-nums; }
/* Sähköpostiosoite tai pitkä tunniste rivittyy solussa eikä leikkaudu.
   Vain merkityissä soluissa: kaikkiin soluihin sovellettuna aikaleimakin
   katkesi kapealla näytöllä keskeltä vuosilukua. */
td.rivita { overflow-wrap: anywhere; }
/* Puhelimessa kolmen sarakkeen taulukko mahtuu leveyteen: kapeampi
   solutäyte, ja solun lisätieto (esim. rooli) omalle rivilleen. */
@media (max-width: 30rem) {
  th, td { padding: .55rem .35rem; }
  thead th { letter-spacing: .02em; font-size: .7rem; }
  td .vihje { display: block; }
  /* Avain–arvo-taulukko (ei otsikkoriviä, rivillä otsikkosolu ja arvo):
     tekstiarvo otsikon alle, ettei kapea sarake rivitä sitä kolmelle
     riville; luku pysyy otsikon vieressä. */
  table:not(:has(thead)):has(tr > th:first-child + td:last-child),
  table:not(:has(thead)):has(tr > th:first-child + td:last-child) > tbody { display: block; }
  table:not(:has(thead)):has(tr > th:first-child + td:last-child) tr {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .75rem;
    padding: .5rem .35rem; border-bottom: 1px solid var(--viiva);
  }
  table:not(:has(thead)):has(tr > th:first-child + td:last-child) :is(th, td) { display: block; padding: 0; border: 0; }
  table:not(:has(thead)):has(tr > th:first-child + td:last-child) td:not(.luku) { flex-basis: 100%; }
}
td.luku, .mono { font-family: var(--mono); font-size: .92em; }

.sisalto :is(h1,h2,h3) { max-width: 38rem; }
.sisalto blockquote {
  margin: 1rem 0; padding: .7rem 1rem; border-radius: var(--sade-painike);
  color: var(--toissijainen); background: var(--huomio-pohja);
}

/* Valikon nimi: pitkä sivupalkissa, lyhyt puhelimen alapalkissa. */
.side nav .lyhyt { display: none; }

/* Kuvaaja piirtää nykyvärillä (currentColor): viiva on Laguuni. Leveä
   versio työpöydälle ja tulosteeseen, kapea puhelimeen (tekstit
   luettavan kokoisia molemmissa). */
.kuvaaja {
  display: block; width: 100%; height: auto; margin: .3rem 0 .9rem; color: var(--korostus);
  background: var(--paperi); border: 1px solid var(--viiva); border-radius: var(--sade-painike);
}
.kuvaaja.kapea { display: none; }
@media screen and (max-width: 40rem) {
  .kuvaaja.leve { display: none; }
  .kuvaaja.kapea { display: block; }
}

/* Viikkorytmi: 12 viikkoa pisteinä (brändiohje). Tehty täytettynä,
   nykyinen renkaana. Koriste; sama tieto on tekstinä vieressä. */
.edistyminen { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 1rem; }
.edistyminen .johdanto { margin: 0; }
.viikot { display: inline-flex; gap: .3rem; }
.viikot span {
  width: .6rem; height: .6rem; border-radius: 999px; border: 1.5px solid var(--viiva);
}
.viikot span.tehty { background: var(--korostus); border-color: var(--korostus); }
.viikot span.nyt { border: 2px solid var(--korostus); background: var(--korostus-pehmea); }

/* Katselmointipaketti (REQ-THP-014): luetaan paperilta, merkinnät kynällä. */
.paketti-kohde { border-top: 1px solid var(--viiva); padding-top: .7rem; margin-top: 1.4rem; }
.paketti-kohde h3 { margin-top: .2rem; font-family: var(--otsikko); font-weight: 600; font-size: 1.2rem; }
/* Tekstin omat otsikot pienempinä: ne kuuluvat tarkistettavaan tekstiin,
   mutta paketin rakenne on viikko → kohde. */
.paketti-kohde .sisalto h1 { font-size: 1.15rem; margin: 1rem 0 .3rem; }
.paketti-kohde .sisalto h2 { font-size: 1.02rem; margin: .9rem 0 .25rem; font-family: var(--leipa); font-weight: 700; }
.hyvaksynta {
  margin: 1rem 0 0; padding: .7rem 1rem;
  border: 1.5px dashed var(--viiva); border-radius: var(--sade);
}
.hyvaksynta p { margin: .2rem 0; max-width: none; }
.ruutu {
  display: inline-block; width: 1rem; height: 1rem; margin: 0 .35rem 0 1.2rem;
  border: 1.5px solid var(--teksti); border-radius: .2rem; vertical-align: -.15rem;
}
.ruutu:first-child { margin-left: 0; }
/* REQ-THP-019: merkintä näytöllä; paperin ruudut vain tulosteessa. */
@media screen { .vain-tulosteeseen { display: none; } }
.katselmointi {
  margin: 1rem 0 0; padding: .8rem 1rem;
  background: var(--pinta-upotettu); border: 1px solid var(--viiva); border-radius: var(--sade);
}
.katselmointi p { margin: .25rem 0; max-width: none; }
.katselmointi .painikkeet { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.katselmointi-huomio { margin: .4rem 0; font-style: italic; white-space: pre-line; }
.rivit {
  min-height: 4.6rem; color: var(--himmea);
  background-image: repeating-linear-gradient(transparent 0 1.5rem, var(--viiva) 1.5rem calc(1.5rem + 1px));
}

footer.alin {
  border-top: 1px solid var(--viiva);
  margin-top: 3rem;
  padding-top: 1rem;
  color: var(--himmea);
  font-size: .88rem;
}
footer.alin strong { color: var(--este); }

.piilo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.ohita { position: absolute; left: -999px; }
a.ohita:focus { left: .5rem; top: .5rem; background: var(--paperi); padding: .5rem; z-index: 30; border-radius: var(--sade); }

/* Apuluokat. Tyyliattribuutteja ei käytetä: alustan CSP on
   `style-src 'self'` ilman `unsafe-inline`ia. */
.ei-marginaalia { margin: 0; }
.virheellinen { border-color: var(--este); border-width: 2px; }
.virheteksti { color: var(--este); font-weight: 700; margin: .25rem 0; }
button.pieni, .painike.pieni { min-height: 0; padding: .25rem .7rem; font-size: .88rem; border-radius: var(--sade); }
.viesti-teksti { white-space: pre-wrap; }

/* Kyselyiden tulokset potilassivulla (REQ-QST-025): kysely kerrallaan,
   vastaukset taitettuina. Ei värejä tuloksen mukaan (REQ-QST-011). */
.kyselytulos + .kyselytulos { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--viiva); }
.kyselytulos details.vastaukset { margin: .35rem 0; }
.kyselytulos details.vastaukset th { font-weight: 400; text-align: left; }
input.kapea, select.kapea { width: 8rem; }
/* Luonnollinen leveys, mutta ei yli säiliön: pisin ohjelman nimi
   (Lenire-luonnos) levitti aloituslomakkeen 320 px:n puhelimessa. */
select.luonnollinen, input.luonnollinen { width: auto; max-width: 100%; }

/* Toisen tekijän QR-koodi (REQ-ID-012). Musta valkoisella myös tummassa
   teemassa: SVG:n oma valkoinen tausta pitää sen luettavana. */
.qr svg {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  border-radius: var(--sade);
}

/* Tuloste ja PDF (REQ-SUM-001). Jakson yhteenveto ja pilottiraportti
   tallennetaan PDF:ksi selaimen tulostuksella, joten tulosteessa on vain
   sisältö: ei valikkoa, painikkeita eikä kopiointikenttää. Värit
   vaaleina myös, kun näyttö on tummassa teemassa. */
@media print {
  /* Paperi on aina vaalea: valitsimet samat kuin tummalla teemalla, jotta
     tulostuspaletti voittaa myös järjestelmän tumman tilan. */
  :root, :root:not([data-teema="vaalea"]), :root[data-teema="tumma"] {
    --tausta: #fff; --paperi: #fff; --teksti: #000; --himmea: #333; --toissijainen: #222;
    --viiva: #999; --reuna-kentta: #777; --korostus: #000; --korostus-tumma: #000; --pinta-upotettu: #fff;
    --korostus-pehmea: #fff; --painike-teksti: #fff;
    --huomio: #000; --este: #000; --ok: #000; --tieto: #000;
    --ok-pohja: #fff; --huomio-pohja: #fff; --este-pohja: #fff; --tieto-pohja: #fff;
    color-scheme: light;
  }
  @page { margin: 18mm 16mm; }
  html, html.henkilokunta { font-size: 11pt; }
  body { background: #fff; color: #000; }
  header.ylin, aside.side, footer.alin, a.ohita, nav, form, button, .painike,
  details, .aalto, .ei-tulosteeseen { display: none !important; }
  .kuori, .leveä { max-width: none; padding: 0; }
  .app { display: block; }
  .kortti { border: 0; box-shadow: none; padding: 0; margin: 0 0 1rem; }
  a { color: #000; text-decoration: none; }
  thead th { background: none; }
  h1, h2, h3 { break-after: avoid; }
  /* Uusi viikko uudelle sivulle — ei ensimmäinen, joka jatkaa ohjetta. */
  section.paketti-viikko ~ section.paketti-viikko { break-before: page; }
  .hyvaksynta { break-inside: avoid; }
  tr, li { break-inside: avoid; }
}

/* ═══ Sovelluskehys (REQ-UI-006) ══════════════════════════════════════
 *
 * Sama rakenne kuin Autobaricissa: työpöydällä vasemman laidan
 * sivupalkki, puhelimessa alapalkki. Navigaatio on aina näkyvissä eikä
 * valikon takana — terapeutti siirtyy työjonon ja potilaan välillä koko
 * päivän, ja potilas palaa etusivulle joka käynnillä.
 *
 * Ilman JavaScriptiä (REQ-UI-003): puhelimen "Lisää"-lehti on
 * <details>, teeman vaihto on lomake.
 */
.app {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  min-height: 100vh;
}
.side {
  background: var(--paperi);
  border-right: 1px solid var(--viiva);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  font-size: 16px;
}
.side .brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.35rem 1.25rem 1.1rem;
}
.side .brand .env {
  margin-left: auto; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--huomio); background: var(--huomio-pohja); border-radius: 999px; padding: .1rem .45rem;
}
/* `align-content: start`: ilman sitä grid venyttää rivit korkeuden yli. */
.side nav {
  padding: .5rem .85rem; display: grid; gap: 2px; align-content: start;
  flex: 1; overflow-y: auto;
}
.side nav a, .side details.lisaa > summary {
  display: flex; align-items: center; gap: .7rem;
  min-height: 2.75rem; padding: .45rem .75rem; border-radius: var(--sade);
  color: var(--toissijainen); text-decoration: none; font-size: 1rem;
}
.side nav a:hover { background: var(--pinta-upotettu); color: var(--teksti); }
.side nav a[aria-current="page"] {
  background: var(--korostus-pehmea); color: var(--korostus-tumma); font-weight: 700;
}
.side .ico { width: 1.25rem; height: 1.25rem; flex: none; }
.side nav a .luku {
  margin-left: auto; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  color: var(--painike-teksti); background: var(--korostus); border-radius: 999px;
}
.side .navgroup {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--himmea); padding: 1.1rem .75rem .35rem; font-weight: 700;
}
.side footer {
  border-top: 1px solid var(--viiva); padding: .9rem 1rem 1rem; display: grid; gap: .65rem;
}
.who { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.who .avatar {
  width: 2.4rem; height: 2.4rem; flex: none; border-radius: 999px;
  background: var(--korostus-pehmea); color: var(--korostus-tumma);
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 700;
}
.who .lines { min-width: 0; }
.who .lines b, .who .lines span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who .lines b { font-size: .92rem; font-weight: 700; }
.who .lines span { font-size: .78rem; color: var(--himmea); }
.footactions { display: flex; gap: .4rem; }
.footactions form { margin: 0; }
.footactions form:first-child { flex: 1; }
.side .btn {
  background: var(--paperi); color: var(--toissijainen);
  border: 1px solid var(--viiva); border-radius: var(--sade);
  min-height: 2.5rem; padding: .3rem .7rem; gap: .45rem;
  font-size: .85rem; font-weight: 400; width: 100%; justify-content: flex-start;
}
.side .btn:hover { background: var(--pinta-upotettu); color: var(--teksti); border-color: var(--viiva); }
.side .btn .ico { width: 1.1rem; height: 1.1rem; }
.side details.lisaa { display: none; }
.main { min-width: 0; outline: none; }
/* Sisältö alkaa sivupalkin vierestä eikä keskity jäljelle jäävään tilaan
   (brändiohjeen työpöytämalli). Rivin pituus rajataan edelleen. */
.main .kuori { margin: 0; padding: 2rem 3rem 4rem; }
/* Kehitysmerkki mahtuu sivupalkkiin, vaikka sanamerkki on leveä. */
.side .brand { flex-wrap: wrap; row-gap: .35rem; }
.side .brand .sanamerkki { height: .95rem; }
/* Työjonon nimi yhdellä rivillä: rivi tunnistetaan nimestä. */
table.tyojono td:first-child { white-space: nowrap; }
/* Puhelimessa työjonon rivi on kortti: nimi ja tila, viikko, ja koko
   leveydellä se, mikä nosti potilaan. Viisisarakkeinen taulukko puristi
   perustelun muutaman kirjaimen levyiseksi. Pisteet ovat järjestyksen
   sisäinen luku, eivät tieto terapeutille, joten ne jäävät pois. */
@media screen and (max-width: 40rem) {
  table.jono thead, table.paattyneet thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  table.jono, table.jono tbody, table.paattyneet, table.paattyneet tbody { display: block; }
  table.jono tr, table.paattyneet tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem;
    padding: .85rem .1rem; border-bottom: 1px solid var(--viiva);
  }
  table.jono td, table.paattyneet td { display: block; padding: 0; border: 0; }
  table.jono td:first-child, table.paattyneet td:first-child { white-space: normal; font-weight: 700; }
  table.jono td:nth-child(3) { grid-column: 1 / -1; text-align: left; font-family: var(--leipa);
    font-size: .85rem; color: var(--himmea); }
  table.jono td:nth-child(3)::before { content: "Viikko "; }
  table.jono td:nth-child(3):empty { display: none; }
  table.jono td:nth-child(4) { grid-column: 1 / -1; }
  table.jono td:nth-child(5) { display: none; }
  table.paattyneet td:nth-child(3), table.paattyneet td:nth-child(4) { display: none; }
  table.paattyneet td:nth-child(5)::before { content: "Päättyi "; color: var(--himmea); }

  /* Potilassivun suoritukset ja mittaukset samalla periaatteella. */
  table.suoritukset thead, table.mittaukset thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  table.suoritukset, table.suoritukset tbody, table.mittaukset, table.mittaukset tbody { display: block; }
  table.suoritukset tr {
    display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .3rem .5rem;
    padding: .6rem 0; border-bottom: 1px solid var(--viiva);
  }
  table.suoritukset td, table.mittaukset td { display: block; padding: 0; border: 0; }
  table.suoritukset td:nth-child(3) { grid-column: 2 / -1; }
  table.suoritukset select, table.suoritukset button { margin: .2rem .4rem .2rem 0; }
  table.mittaukset tr {
    display: flex; flex-wrap: wrap; gap: .2rem .9rem;
    padding: .6rem 0; border-bottom: 1px solid var(--viiva);
  }
  table.mittaukset td { text-align: left; }
  table.mittaukset td:first-child { flex-basis: 100%; font-weight: 700; }
  /* Selite solun omasta `data-otsikko`-määreestä eikä sarakkeen
     järjestysnumerosta: ala-asteikkojen nimet tulevat kyselystä, ja
     kiinteät nth-child-selitteet siirtyivät sarakkeen verran sivuun. */
  table.mittaukset td[data-otsikko]::before {
    content: attr(data-otsikko) " "; font-family: var(--leipa); color: var(--himmea);
  }
}

/* Tila-sivun loki puhelimessa: tapahtuma ensin, aika ja kohde alla. */
@media screen and (max-width: 40rem) {
  table.lokilista thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.lokilista, table.lokilista tbody { display: block; }
  table.lokilista tr {
    display: flex; flex-wrap: wrap; gap: .1rem .75rem;
    padding: .55rem 0; border-bottom: 1px solid var(--viiva);
  }
  table.lokilista td { display: block; padding: 0; border: 0; }
  table.lokilista td:nth-child(2) { order: -1; flex-basis: 100%; font-weight: 700; }
  table.lokilista td:nth-child(1), table.lokilista td:nth-child(3) { color: var(--himmea); font-size: .88rem; }
}

/* Sisältölista puhelimessa: nimi koko leveydellä, laji ja tila alla. */
@media screen and (max-width: 40rem) {
  table.sisaltolista thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.sisaltolista, table.sisaltolista tbody { display: block; }
  table.sisaltolista tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem;
    padding: .6rem 0; border-bottom: 1px solid var(--viiva);
  }
  table.sisaltolista td { display: block; padding: 0; border: 0; }
  table.sisaltolista td:first-child { flex-basis: 100%; }
  table.sisaltolista td:nth-child(2) { color: var(--himmea); font-size: .88rem; }
}

/* Potilaan etusivun vaiheet ennen jakson alkua. */
ol.vaiheet { padding-left: 1.3rem; margin: .5rem 0 0; }
ol.vaiheet li { margin: 0 0 .8rem; padding-left: .2rem; }
ol.vaiheet li::marker { font-weight: 700; color: var(--korostus); }

/* Sivun sisäiset pikalinkit (potilassivu). */
nav.sivulla { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0 0 1.25rem; font-size: .92rem; }

/* ═══ Puhelin: alapalkki ════════════════════════════════════════════════
 *
 * Alapalkki eikä yläpalkki: peukalo yltää alalaitaan. Harvemmin käytetyt
 * kohdat "Lisää"-lehden takana — muuten viisi nimeä 375 pikselissä
 * lyhenisi tunnistamattomiksi. Valittu kohta: pilleri ikonin takana.
 */
@media (max-width: 60rem) {
  .app { grid-template-columns: 1fr; }
  .side {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto;
    z-index: 20; border-right: none; border-top: 1px solid var(--viiva);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .side .brand, .side .navgroup, .side footer, .side nav .hallinta { display: none; }
  .side nav {
    display: flex; flex-direction: row; align-items: stretch;
    padding: .3rem .25rem; gap: .125rem; overflow: visible;
  }
  .side nav > a, .side details.lisaa > summary {
    position: relative; flex: 1 1 0; min-width: 0;
    flex-direction: column; gap: .2rem; justify-content: center;
    font-size: .7rem; padding: .3rem .15rem; text-align: center; min-height: 3.4rem;
  }
  .side nav > a[aria-current="page"] { background: transparent; }
  .side nav > a .ico, .side details.lisaa > summary .ico {
    box-sizing: content-box; padding: .22rem 1rem; border-radius: 999px;
  }
  .side nav > a[aria-current="page"] .ico { background: var(--korostus-pehmea); }
  .side nav > a > span:not(.luku) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .side nav > a .pitka { display: none; }
  .side nav > a .lyhyt { display: inline; }
  .side nav > a .luku {
    position: absolute; top: .1rem; left: 50%; margin-left: .55rem;
    min-width: 1.15rem; height: 1.15rem; font-size: .62rem; padding: 0 .3rem;
  }
  .side details.lisaa { display: flex; flex: 1 1 0; min-width: 0; }
  .side details.lisaa > summary { list-style: none; cursor: pointer; width: 100%; }
  .side details.lisaa > summary::-webkit-details-marker { display: none; }
  .side details.lisaa[open] > summary { color: var(--korostus-tumma); font-weight: 700; }
  .side details.lisaa[open] > summary .ico { background: var(--korostus-pehmea); }
  .side details.lisaa .lehti {
    position: fixed; left: .5rem; right: .5rem; bottom: calc(4.3rem + env(safe-area-inset-bottom)); z-index: 25;
    background: var(--paperi); border: 1px solid var(--viiva); border-radius: var(--sade-kortti);
    box-shadow: 0 8px 28px rgb(14 27 29 / .18);
    padding: .6rem; display: grid; gap: 2px;
  }
  .side details.lisaa .lehti a {
    display: flex; flex-direction: row; font-size: 1rem; min-height: 2.75rem;
  }
  .side details.lisaa .lehti a .ico { padding: 0; background: none; }
  .side details.lisaa .lehti .who { padding: .4rem .6rem .7rem; border-bottom: 1px solid var(--viiva); margin-bottom: .3rem; }
  .side details.lisaa .lehti form { margin: .25rem 0 0; }
  .side details.lisaa .lehti .btn { min-height: 2.75rem; font-size: .95rem; }
  .side details.lisaa .lehti .btn .ico { padding: 0; }
  .main .kuori { padding: 1.25rem 1.25rem 6.5rem; }
  /* Lyhyt asteikko (ISI 0–4) yhdellä rivillä; 11 arvon asteikot yllä. */
  .asteikko { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}