/* ==========================================================================
   Opetusportaali — ulkoasu
   Värit ja mitat muuttujina: koko linjan voi vaihtaa tästä yhdestä paikasta.
   ========================================================================== */

:root {
  --ground: #EAEEF2;
  --surface: #FFFFFF;
  --surface-2: #F4F7F9;
  --surface-3: #E8EDF1;
  --line: #D6DEE5;
  --line-soft: #E4EAEF;
  --ink: #16232E;
  --ink-2: #4C5F6E;
  --ink-3: #7E909D;
  --accent: #0D6E63;
  --accent-ink: #0A544C;
  --accent-soft: #DFEFEC;
  --accent-line: #A8D3CC;
  /* Teksti tunnusvärin PÄÄLLÄ. Vaaleassa valkoinen, tummassa lähes musta:
     tumman teeman vaaleampi turkoosi ei kanna valkoista tekstiä luettavasti. */
  --accent-paalla: #FFFFFF;
  --signal: #B4541F;
  --signal-soft: #F7E7DC;
  --ok: #2C7A3F;
  --ok-soft: #DFEEE2;
  --warn: #94670A;
  --warn-soft: #F6EBD2;
  --danger: #A93B36;
  --danger-soft: #F6E0DE;
  --shadow: 0 1px 2px rgba(22,35,46,.06), 0 8px 24px -12px rgba(22,35,46,.22);
  --shadow-soft: 0 1px 2px rgba(22,35,46,.05);
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono", ui-monospace, monospace;

  /* Mitat, jotka kasvavat näytön mukana. Arvot vaihdetaan yhdessä paikassa
     tiedoston lopun "Suuret näytöt" -osiossa. */
  --sisallon-leveys: 1240px;    /* hallinnan sisältösarakkeen enimmäisleveys */
  --palkin-leveys: 264px;       /* opiskelijan linkkipalkki */
  --materiaalin-leveys: 74ch;   /* leipätekstin rivinpituus — ei kasva paljon, koska
                                   liian pitkä rivi on vaikeampi lukea kuin liian lyhyt */
  --materiaalin-fontti: 15.5px; /* ch-yksikkö lasketaan tästä, joten leipätekstin ja
                                   sivunvaihdon on käytettävä samaa kokoa jotta ne
                                   ovat täsmälleen yhtä leveitä */
  --sisallon-pehmuste: 24px;    /* sisältöalueen sisäreunus */
  --sivupalkin-leveys: 340px;   /* hallintasivujen oikea sarake (lomakkeet, tila, listat) */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-teema="vaalea"]) {
    --ground: #0D1418;
    --surface: #141E24;
    --surface-2: #1A252C;
    --surface-3: #223039;
    --line: #2A3A44;
    --line-soft: #223039;
    --ink: #E6EDF1;
    --ink-2: #A5B7C2;
    --ink-3: #758895;
    --accent: #4FBFAE;
    --accent-ink: #85D9CA;
    --accent-soft: #113330;
    --accent-line: #235B54;
    --accent-paalla: #0B1A18;
    --signal: #E39163;
    --signal-soft: #382317;
    --ok: #6FC183;
    --ok-soft: #16301D;
    --warn: #D9AC4E;
    --warn-soft: #33280F;
    --danger: #E28580;
    --danger-soft: #3A1E1D;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-soft: 0 1px 2px rgba(0,0,0,.35);
  }
}

:root[data-teema="tumma"] {
  --ground: #0D1418;
  --surface: #141E24;
  --surface-2: #1A252C;
  --surface-3: #223039;
  --line: #2A3A44;
  --line-soft: #223039;
  --ink: #E6EDF1;
  --ink-2: #A5B7C2;
  --ink-3: #758895;
  --accent: #4FBFAE;
  --accent-ink: #85D9CA;
  --accent-soft: #113330;
  --accent-line: #235B54;
  --accent-paalla: #0B1A18;
  --signal: #E39163;
  --signal-soft: #382317;
  --ok: #6FC183;
  --ok-soft: #16301D;
  --warn: #D9AC4E;
  --warn-soft: #33280F;
  --danger: #E28580;
  --danger-soft: #3A1E1D;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); }

/* ------------------------------------------------------------ yläpalkki */

/* Palkin reunaviiva kulkee laidasta laitaan, mutta sen sisältö asettuu samaan
   linjaan sisältösarakkeen kanssa myös leveällä näytöllä. */
.ylapalkki {
  display: flex; align-items: center; gap: 14px;
  padding-block: 10px;
  padding-inline: max(20px, (100vw - var(--sisallon-leveys)) / 2);
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}

.brandi {
  display: flex; align-items: center; gap: 9px; font-weight: 700;
  letter-spacing: -.02em; font-size: 15px; color: var(--ink); text-decoration: none; flex: none;
}
.brandi i {
  width: 24px; height: 24px; border-radius: 6px; background: var(--accent); display: grid;
  place-items: center; line-height: 1; color: var(--accent-paalla); font-family: var(--font-mono); font-size: 12px;
  font-style: normal; font-weight: 700;
}

/* Täysleveillä sivuilla (kurssinäkymä, kokeen suoritus) myös yläpalkin sisältö
   alkaa näytön reunasta, jotta se on linjassa linkkipalkin kanssa. */
body.sivu-taysleveys .ylapalkki { padding-inline: 20px; }

.ylapalkki nav { display: flex; gap: 2px; flex-wrap: wrap; }
.ylapalkki nav a {
  font-size: 13.5px; color: var(--ink-2); text-decoration: none; padding: 6px 11px;
  border-radius: 6px; display: inline-flex; align-items: center; gap: 6px;
}
.ylapalkki nav a:hover { background: var(--surface-3); color: var(--ink); }
.ylapalkki nav a.paalla { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

.ylapalkki .kayttaja {
  margin-left: auto; display: flex; align-items: center; gap: 9px; flex: none;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3);
}
.nimikirjaimet {
  width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2);
  display: grid; place-items: center; line-height: 1; font-size: 11.5px; font-weight: 700;
  font-family: var(--font-body); border: 1px solid var(--line);
}

.roolimerkki {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; flex: none;
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line);
}
.roolimerkki.opettaja {
  background: var(--warn-soft); color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}
.roolimerkki.opiskelija { background: var(--surface-3); color: var(--ink-2); border-color: var(--line); }

/* Teemakytkin. Valinta muistetaan selaimessa; jos sitä ei ole tehty, seurataan
   käyttöjärjestelmän asetusta. */
.teemanappi {
  width: 30px; height: 30px; flex: none; cursor: pointer; padding: 0;
  display: grid; place-items: center; line-height: 1; font-size: 14px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 7px;
}
.teemanappi:hover { background: var(--surface-3); color: var(--ink); }
.teemanappi:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------------------------------------------------------- runko */

.runko { padding: 22px 20px 60px; max-width: var(--sisallon-leveys); margin: 0 auto; }
.runko.leveä, .runko.levea { max-width: none; }

.sivuotsikko { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.sivuotsikko h1 { margin: 0; font-size: 22px; letter-spacing: -.025em; font-weight: 700; }
.sivuotsikko .oikealle { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.aliteksti { color: var(--ink-3); font-size: 13.5px; margin: 0 0 18px; }

h2 { font-size: 18px; letter-spacing: -.015em; margin: 26px 0 10px; }
h3 { font-size: 15.5px; letter-spacing: -.01em; margin: 20px 0 8px; }

/* --------------------------------------------------------------- viestit */

.viesti {
  border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface);
  border-radius: 8px; padding: 11px 14px; margin-bottom: 14px; font-size: 14px; color: var(--ink-2);
}
.viesti.virhe { border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.viesti.varoitus { border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.viesti.ok { border-left-color: var(--ok); }

/* --------------------------------------------------------------- kortit */

.kortti {
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 16px;
  box-shadow: var(--shadow-soft);
}
.kortti + .kortti { margin-top: 14px; }
.kortti__otsikko {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 10px;
}
.kortti--tiivis { padding: 4px 0; }

/* Otsikko kortin sisällä, kun kortti on sivun pääsisältö eikä sen yläpuolella
   tarvita erillistä otsikkolohkoa. */
.kortti__ylaosa { padding: 14px 18px 14px; border-bottom: 1px solid var(--line); }
.kortti__ylaosa h1 { margin: 0; font-size: 20px; letter-spacing: -.025em; font-weight: 700; }
.kortti__ylaosa p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3); }

.pinta { display: grid; gap: 14px; }
.jako-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Pääsisältö + sivupalkki. Sivupalkki on kiinteän levyinen, koska siinä on
   lomakkeita ja tilatietoja joiden ei tarvitse levitä — kaikki lisätila menee
   vasemmalle taulukolle. minmax(0, 1fr) estää leveää taulukkoa venyttämästä
   saraketta ulos ruudukosta (vieritys hoituu .vieritys-kääreessä). */
.jako-3 { display: grid; grid-template-columns: minmax(0, 1fr) var(--sivupalkin-leveys); gap: 16px; }
.rivi-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rivi { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Kapea lomake sivulle, jolla on vain muutama kenttä (esim. osion asetukset). */
.osiolomake { max-width: 560px; }

/* -------------------------------------------------------------- painikkeet */

.nappi {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 7px 14px; border-radius: 7px; display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; line-height: 1.3;
}
.nappi:hover { background: var(--surface-3); }
.nappi:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nappi[disabled] { opacity: .5; cursor: default; }
.nappi--ensisijainen { background: var(--accent); border-color: var(--accent); color: var(--accent-paalla); }
.nappi--ensisijainen:hover { background: var(--accent-ink); }
.nappi--vaara { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.nappi--vaara:hover { background: var(--danger-soft); }
.nappi--haamu { background: transparent; border-color: transparent; color: var(--ink-2); }
.nappi--haamu:hover { background: var(--surface-3); }
.nappi--pieni { font-size: 12.5px; padding: 5px 10px; }

.kuvakenappi {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center;
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0; text-decoration: none;
}
.kuvakenappi:hover { background: var(--surface-3); }
.kuvakenappi:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kuvakenappi--paalla { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.kuvakenappi--pois {
  background: var(--signal-soft); color: var(--signal);
  border-color: color-mix(in srgb, var(--signal) 35%, transparent);
}
.kuvakenappi--vaara { color: var(--danger); }
.kuvakenappi--vaara:hover { background: var(--danger-soft); }

/* --------------------------------------------------------------- merkit */

.merkki {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2);
  background: var(--surface-2); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.merkki--ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.merkki--varoitus { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.merkki--piilotettu { background: var(--signal-soft); color: var(--signal); border-color: color-mix(in srgb, var(--signal) 35%, transparent); }
.merkki--korostus { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.merkki--vaara { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

/* -------------------------------------------------------------- lomakkeet */

.kentta { display: grid; gap: 5px; margin-bottom: 14px; }
.kentta label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.kentta .ohje { font-size: 12px; color: var(--ink-3); }

.syote, select.syote, textarea.syote {
  font-family: var(--font-body); font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 11px; width: 100%;
}
.syote:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.syote--mono { font-family: var(--font-mono); letter-spacing: .04em; }
textarea.syote { line-height: 1.55; resize: vertical; }
.syote--koodi { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }

fieldset { border: 0; padding: 0; margin: 0; }

/* --------------------------------------------------------------- taulukot */

table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
  padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.luku { font-variant-numeric: tabular-nums; text-align: right; }
.vieritys { overflow-x: auto; }

.tyhja {
  padding: 34px 20px; text-align: center; color: var(--ink-3); font-size: 14px;
}

/* ------------------------------------------------------------------ luvut */

.luvut { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.luku-kortti { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 13px 15px; }
.luku-kortti b { display: block; font-size: 26px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.luku-kortti span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}

.palkki { height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; min-width: 60px; }
.palkki i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.palkki i.matala { background: var(--danger); }
.palkki i.keski { background: var(--warn); }

/* ------------------------------------------------------- kirjautumissivu */

.kirjautuminen {
  min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; background: var(--surface-2);
}
.kirjautuminen__laatikko { width: 100%; max-width: 380px; }
.kirjautuminen .brandi { margin-bottom: 20px; font-size: 18px; }

/* ------------------------------------------------------ kurssin kaksijako */

/* Kurssinäkymä on koko selaimen levyinen: linkkipalkki on kiinni näytön
   vasemmassa reunassa, jotta se on aina samassa paikassa. Palkki venyy
   sarakkeen mittaiseksi (ei align-items: start), jolloin sen vaalea tausta ja
   reunaviiva jatkuvat sivun alalaitaan asti. Vieritettävä ja paikallaan pysyvä
   osa on sisemmässä kääreessä. */
.kaksijako {
  display: grid; grid-template-columns: var(--palkin-leveys) 1fr;
  min-height: calc(100vh - 49px);
}
.linkkipalkki {
  background: var(--surface); border-right: 1px solid var(--line);
}
.linkkipalkki__sisus {
  position: sticky; top: 49px;
  max-height: calc(100vh - 49px); overflow-y: auto;
  padding: 16px 0 28px;
}

/* Mobiilin hampurilaispainike. Työpöydällä piilossa, koska palkki on aina auki. */
.palkkinappi {
  display: none; width: 100%; cursor: pointer;
  align-items: center; gap: 10px;
  padding: 13px 16px; font-family: var(--font-body); font-size: 14px; font-weight: 600;
  background: var(--surface); color: var(--ink); border: 0;
  border-bottom: 1px solid var(--line); text-align: left;
}
.palkkinappi:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.palkkinappi__viivat { display: grid; gap: 3.5px; flex: none; }
.palkkinappi__viivat i { display: block; width: 17px; height: 2px; border-radius: 1px; background: var(--ink-2); }
.palkkinappi__tila { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* Sisältö ei leviä koko 4K-näytön poikki, vaikka palkki onkin reunassa. */
.sisaltoalue {
  padding: 24px var(--sisallon-pehmuste) 60px; min-width: 0;
  max-width: calc(var(--sisallon-leveys) - var(--palkin-leveys));
}

.linkkipalkki__otsikko {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 16px; margin: 0 0 8px;
}
.linkkilista { display: flex; flex-direction: column; }
.linkkilista__osio {
  font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 14px 16px 5px; letter-spacing: .01em;
}
.linkkilista a {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  border-left: 3px solid transparent; padding: 7px 16px;
}
.linkkilista a:hover { background: var(--surface-2); color: var(--ink); }
.linkkilista a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.linkkilista a.paalla {
  background: var(--accent-soft); color: var(--accent-ink); border-left-color: var(--accent); font-weight: 600;
}
.linkkilista .kuvake { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); flex: none; width: 14px; }
.linkkilista a.paalla .kuvake { color: var(--accent); }
.linkkilista .tila { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ok); flex: none; }
.linkkilista .tila.kesken { color: var(--warn); }
.linkkipalkki__jalkiosa {
  padding: 18px 16px 0; border-top: 1px solid var(--line-soft); margin-top: 14px;
}
.linkkipalkki__jalkiosa .nimi {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px;
}

.murupolku {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-bottom: 12px;
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
}
/* Sivunvaihto on saman levyinen kuin leipäteksti, jotta "seuraava"-painike ei
   karkaa kauas oikealle leveällä näytöllä. */
.sivunvaihto {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: var(--materiaalin-fontti);   /* sama kuin leipätekstillä, jotta ch-leveys täsmää */
  max-width: var(--materiaalin-leveys);
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line-soft);
}

/* ------------------------------------------------- yhtenäinen materiaali */

.materiaali { max-width: var(--materiaalin-leveys); font-size: var(--materiaalin-fontti); color: var(--ink); }
.materiaali h1 { font-size: 24px; letter-spacing: -.025em; margin: 0 0 10px; }
.materiaali h2 { font-size: 19px; letter-spacing: -.02em; margin: 28px 0 8px; }
.materiaali h3 { font-size: 16px; margin: 22px 0 6px; }
.materiaali p { margin: 0 0 14px; color: var(--ink-2); }
.materiaali ul, .materiaali ol { margin: 0 0 14px; padding-left: 22px; color: var(--ink-2); }
.materiaali li { margin-bottom: 5px; }
.materiaali code {
  font-family: var(--font-mono); font-size: .88em; background: var(--surface-3);
  padding: 1px 5px; border-radius: 4px;
}
.materiaali pre {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6; margin: 0 0 16px;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 13px 15px; overflow-x: auto; color: var(--ink);
}
.materiaali pre code { background: none; padding: 0; font-size: 1em; }
.materiaali img { max-width: 100%; height: auto; border-radius: 8px; }

/* Kuva selitteellä: figure kutistuu kuvan levyiseksi, jolloin kuvateksti on
   yhtä leveä kuin kuva eikä leijaile sen alla omana palstanaan. */
.materiaali figure:has(img) { width: fit-content; max-width: 100%; }
.materiaali figure img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.materiaali figure:has(figcaption) img { border-radius: 8px 8px 0 0; }

/* Piirretty kaavio: <figure class="kaavio"><svg>…</svg><figcaption>…</figcaption></figure>
   SVG skaalautuu palstan leveyteen ja käyttää samoja väri­muuttujia kuin muu
   sivu, joten kaavio toimii myös tummassa teemassa ja tarkentuu 4K-näytöllä. */
.materiaali figure.kaavio { width: 100%; max-width: 680px; }
.materiaali figure.kaavio svg {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2);
}
.materiaali figure.kaavio:has(figcaption) svg { border-radius: 8px 8px 0 0; }

/* Koodilohko selitteellä: <figure><pre>…</pre><figcaption>…</figcaption></figure>
   Selite kiinnittyy koodin alalaitaan, jotta on yksiselitteistä mihin lohkoon
   se liittyy — irrallinen kappale koodin alla näyttäisi seuraavalta tekstiltä. */
.materiaali figure { margin: 0 0 16px; }
.materiaali figure pre { margin: 0; border-radius: 8px 8px 0 0; }
/* Nuolimerkki on absoluuttisesti sijoitettu, ei flex-kohde: flex tekisi
   jokaisesta inline-elementistä (code, b) oman sarakkeensa ja pilkkoisi
   selitetekstin palstoiksi. */
.materiaali figcaption {
  position: relative;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 9px 15px 10px 34px;
}
.materiaali figcaption::before {
  content: "↑";
  position: absolute; left: 14px; top: 9px;
  color: var(--accent); font-weight: 700;
}
.materiaali figcaption code { background: var(--surface-3); }
.materiaali table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.materiaali th, .materiaali td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
.materiaali th { background: var(--surface-2); }
.materiaali blockquote {
  margin: 0 0 16px; padding: 10px 16px; border-left: 3px solid var(--accent);
  background: var(--surface-2); border-radius: 0 8px 8px 0; color: var(--ink-2);
}

/* "Lisätietoa" — toimii ilman JS:ää haitarina, JS:n kanssa modaalina */
.materiaali details.lisatieto {
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: 8px; padding: 10px 14px; margin: 0 0 16px;
}
.materiaali details.lisatieto > summary {
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent-ink);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.materiaali details.lisatieto > summary::-webkit-details-marker { display: none; }
.materiaali details.lisatieto > summary::before {
  content: "i"; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-paalla);
  display: grid; place-items: center; flex: none;
}
.materiaali details.lisatieto[open] > summary { margin-bottom: 8px; }

/* Modaalitilassa avaava linkki näyttää tekstilinkiltä */
.lisatieto-linkki {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: 5px;
}
.lisatieto-linkki:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ lataustila

   Pitkäkestoiset toiminnot (esim. varmuuskopion tuonti, jossa käsitellään
   kymmeniä kuvia) peittävät sivun, jotta käyttäjä näkee työn olevan kesken
   eikä ehdi klikata mitään toista kertaa.
   ------------------------------------------------------------------------- */

.latausverho {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; gap: 16px;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(2px);
}
.latausverho__sisus { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 24px; }
.latausverho__teksti { font-size: 15px; font-weight: 600; color: var(--ink); }
.latausverho__ohje { font-size: 13px; color: var(--ink-3); max-width: 42ch; }

.pyorija {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: pyori .8s linear infinite;
}

/* Painikkeen sisäinen pieni pyörijä */
.nappi .pyorija { width: 15px; height: 15px; border-width: 2px; }

@keyframes pyori { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pyorija { animation-duration: 2.4s; }
}

/* --------------------------------------------------------------- modaali */

.modaali {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px;
  background: rgba(22,35,46,.5);
}
.modaali[hidden] { display: none; }
/* Laatikossa ei ole omaa pehmustetta: otsikko, sisältö ja toimintopalkki
   kantavat omansa, jolloin otsikon taustaväri ja toimintopalkin viiva
   ulottuvat reunasta reunaan. */
.modaali__laatikko {
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow); max-width: 620px; width: 100%; max-height: 86vh;
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}

.modaali__otsikko {
  display: flex; align-items: center; gap: 14px; flex: none;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  padding: 13px 22px;
}
.modaali__otsikko h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }

.modaali__sisus { padding: 20px 22px; overflow-y: auto; }
.modaali__sisus > :first-child { margin-top: 0; }
.modaali__sisus > :last-child { margin-bottom: 0; }

.modaali__jalkiosa {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap;
  flex: none; border-top: 1px solid var(--line); padding: 14px 22px;
}

.modaali__sulje {
  margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 20px;
  line-height: 1; color: var(--ink-3); padding: 2px 6px; border-radius: 6px;
}
.modaali__sulje:hover { background: var(--surface-3); color: var(--ink); }
.modaali__sulje:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Varmistusmodaalin leipäteksti on tavallista tekstiä, ei materiaalia */
.modaali__teksti { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.modaali__teksti p { margin: 0 0 10px; }
.modaali__teksti p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- sisällön järjestely */

/* Rivi on sarakkeittain: kahva, linkin nimi, tarkennusteksti ja toiminnot.
   flex-wrap hoitaa kapean näytön: sarakkeet menevät allekkain, kun ne eivät
   enää mahdu vierekkäin. */
.jarjestysrivi {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; margin-bottom: 7px;
}
.jarjestysrivi.osio { background: var(--surface-2); }
.jarjestysrivi.himmea { background: var(--surface-2); border-style: dashed; }
.jarjestysrivi.raahataan { opacity: .4; }
.jarjestysrivi.kohde { border-color: var(--accent); border-style: solid; }
.jarjestysrivi__kahva {
  font-family: var(--font-mono); color: var(--ink-3); cursor: grab; font-size: 14px;
  flex: none; letter-spacing: -2px; user-select: none;
}
.jarjestysrivi__nimi { flex: 1 1 240px; min-width: 0; font-weight: 600; font-size: 14px; }
.jarjestysrivi__nimi a { color: inherit; text-decoration: none; }
.jarjestysrivi__nimi a:hover { text-decoration: underline; }
.jarjestysrivi__meta {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3);
}
.jarjestysrivi__toiminnot { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none; }
.sisennys { padding-left: 26px; }

/* --------------------------------------------------------------- vaiheet */

.vaiheet { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.vaiheet span, .vaiheet a {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 14px 5px 6px; font-size: 13px; color: var(--ink-2);
}
/* line-height: 1 on tässä olennainen: peritty 1.6 tekee riviboksista glyyfiä
   selvästi korkeamman, jolloin numero asettuu ympyrässä ylös eikä keskelle. */
.vaiheet .numero {
  width: 21px; height: 21px; border-radius: 50%; background: var(--surface-3); color: var(--ink-3);
  display: grid; place-items: center; line-height: 1;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.vaiheet .paalla { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.vaiheet .paalla .numero { background: var(--accent); color: var(--accent-paalla); }

/* ------------------------------------------------------- kysymykset ja vastaukset */

.tyypit { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tyypit a {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  padding: 5px 11px; border-radius: 6px;
}
.tyypit a:hover { background: var(--surface-3); }
.tyypit a.paalla { background: var(--accent); border-color: var(--accent); color: var(--accent-paalla); font-weight: 600; }

.vaihtoehto {
  display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; padding: 9px 12px; margin-bottom: 6px; font-size: 14px;
}
.vaihtoehto.oikein { border-color: var(--accent-line); background: var(--accent-soft); }
.vaihtoehto.vaarin { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-soft); }
.vaihtoehto .teksti { flex: 1; min-width: 0; }
.vaihtoehto .pisteet { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); flex: none; }
.vaihtoehto input[type="text"] { border: 0; background: none; font: inherit; color: inherit; width: 100%; padding: 2px 0; }
.vaihtoehto input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

label.valinta {
  display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 7px; padding: 10px 13px; margin-bottom: 7px; font-size: 14.5px; cursor: pointer;
}
label.valinta:hover { background: var(--surface-2); }
label.valinta:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
label.valinta input { accent-color: var(--accent); width: 17px; height: 17px; flex: none; }
label.valinta.valittu { border-color: var(--accent-line); background: var(--accent-soft); }

.kysymyslaatikko {
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 18px 20px; margin-bottom: 14px;
}
.kysymyslaatikko__ylaosa {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.kysymyslaatikko__numero {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.kysymyslaatikko h3 { margin: 0 0 12px; font-size: 16.5px; letter-spacing: -.01em; }
.kysymyslaatikko.arvioitu-oikein { border-left: 3px solid var(--ok); }
.kysymyslaatikko.arvioitu-vaarin { border-left: 3px solid var(--danger); }
.kysymyslaatikko.arvioitu-osin { border-left: 3px solid var(--warn); }
.kysymyslaatikko.odottaa { border-left: 3px solid var(--ink-3); }

.parivalinta { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.parivalinta .vasen {
  font-family: var(--font-mono); font-size: 13px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 12px;
}
.parivalinta .nuoli { color: var(--ink-3); }

/* --------------------------------------------------------------- tuloste */

.arkki {
  background: #fff; color: #16232E; border: 1px solid var(--line); border-radius: 4px;
  padding: 28px 30px; box-shadow: var(--shadow); max-width: 640px; margin: 0 auto;
}

/* ----------------------------------------------------------- kuvapankki */

.kuvaruudukko {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.kuvakortti {
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column;
}
.kuvakortti.muokattavana { border-color: var(--accent); }
.kuvakortti > img {
  width: 100%; height: 150px; object-fit: contain; display: block;
  background: var(--surface-3); border-bottom: 1px solid var(--line);
}
.kuvakortti__tiedot { padding: 11px 13px 0; display: grid; gap: 5px; }
.kuvakortti__nimi {
  font-size: 13.5px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.kuvakortti__meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.kuvakortti__tiedot .merkki { justify-self: start; }
.kuvakortti__toiminnot {
  padding: 11px 13px 13px; margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap;
}
.kuvakortti__lomake { padding: 11px 13px 13px; }

/* Editorin kuvavalitsin modaalissa */
.kuvavalitsin {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
}
.kuvavalitsin button {
  cursor: pointer; padding: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-align: left;
  display: flex; flex-direction: column;
}
.kuvavalitsin button:hover { border-color: var(--accent); }
.kuvavalitsin button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kuvavalitsin button img {
  width: 100%; height: 96px; object-fit: contain; display: block; background: var(--surface-3);
}
.kuvavalitsin button span {
  font-size: 11.5px; color: var(--ink-2); padding: 6px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------- editorit */

.editori-valilehdet { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.editori-valilehdet button {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink-3);
  padding: 8px 14px;
}
.editori-valilehdet button.paalla { color: var(--accent-ink); border-bottom-color: var(--accent); }
.editori-valilehdet button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.editori-tyokalut {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: var(--surface-2);
  border: 1px solid var(--line); border-top: 0;
}
.editori-tyokalut button {
  font-family: var(--font-body); font-size: 12.5px; cursor: pointer; background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; color: var(--ink-2);
}
.editori-tyokalut button:hover { background: var(--surface-3); color: var(--ink); }
.editori-tyokalut button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.editori-tyokalut .erotin { width: 1px; background: var(--line); margin: 2px 4px; }

/* Editoriruutu käyttää .materiaali-tyylejä, jotta sisältö näyttää samalta kuin
   opiskelijalle — mutta ei sen rivinpituusrajaa: laatikon pitää täyttää koko
   sarake, muuten kehys katkeaa keskelle tyhjää. */
.wysiwyg {
  max-width: none;
  min-height: 420px; max-height: 70vh; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; padding: 18px 20px;
}
.wysiwyg:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

textarea.lahdekoodi {
  width: 100%; min-height: 420px; font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 8px 8px; padding: 14px 16px; resize: vertical;
}
textarea.lahdekoodi:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------------------------------------------------------- suuret näytöt

   Sisältösarake leviää portaittain ja typografia kasvaa mukana. Sarake ei
   koskaan täytä koko näyttöä: 4K:lla reunoille jää tarkoituksella tilaa, koska
   silmän on raskasta seurata riviä laidasta laitaan. Leipätekstin rivinpituus
   kasvaa vähiten, koska se on luettavuuden kannalta se kriittisin mitta.
   ------------------------------------------------------------------------- */

@media (min-width: 1500px) {
  :root {
    --sisallon-leveys: 1400px;
    --sisallon-pehmuste: 30px;
  }
}

@media (min-width: 1800px) {
  :root {
    --sisallon-leveys: 1600px;
    --palkin-leveys: 288px;
    --materiaalin-leveys: 80ch;
    --materiaalin-fontti: 16.5px;
    --sisallon-pehmuste: 34px;
    --sivupalkin-leveys: 380px;
  }

  body { font-size: 17px; }

  .runko { padding: 28px 24px 70px; }
  .sivuotsikko h1 { font-size: 25px; }
  .aliteksti { font-size: 14.5px; }
  .kortti { padding: 19px; }
  .kortti__otsikko { font-size: 11.5px; }

  table.data { font-size: 14.5px; }
  table.data th { font-size: 11px; padding: 10px 14px; }
  table.data td { padding: 11px 14px; }
  .mono { font-size: 13.5px; }

  .nappi { font-size: 14.5px; padding: 8px 16px; }
  .nappi--pieni { font-size: 13.5px; padding: 6px 12px; }
  .syote, select.syote, textarea.syote { font-size: 15px; padding: 9px 12px; }
  .kentta label { font-size: 13.5px; }
  .kentta .ohje { font-size: 12.5px; }
  .merkki { font-size: 11.5px; padding: 4px 9px; }

  .luku-kortti { padding: 15px 18px; }
  .luku-kortti b { font-size: 30px; }
  .luku-kortti span { font-size: 11px; }

  .linkkilista a { font-size: 14.5px; padding: 8px 18px; }
  .linkkipalkki__otsikko { font-size: 11px; }
  .materiaali h1 { font-size: 27px; }
  .materiaali pre { font-size: 13.5px; }

  .kysymyslaatikko { padding: 20px 24px; }
  .kysymyslaatikko h3 { font-size: 17.5px; }
  label.valinta { font-size: 15.5px; padding: 11px 15px; }
}

@media (min-width: 2200px) {
  :root {
    --sisallon-leveys: 1840px;
    --palkin-leveys: 310px;
    --sisallon-pehmuste: 40px;
    --sivupalkin-leveys: 400px;
  }
}

@media (min-width: 2800px) {
  :root {
    --sisallon-leveys: 2100px;
    --materiaalin-leveys: 84ch;
    --materiaalin-fontti: 17.5px;
  }

  body { font-size: 18px; }

  .sivuotsikko h1 { font-size: 28px; }
  table.data { font-size: 15.5px; }
  .mono { font-size: 14.5px; }
  .luku-kortti b { font-size: 34px; }
  .materiaali h1 { font-size: 30px; }
  .linkkilista a { font-size: 15.5px; }
}

/* ------------------------------------------------------------ esitystila

   Luokassa projektorilta katsottava näkymä: pelkkä sisältö, isompi kirjasin ja
   kaikki säädöt piilossa oikeassa reunassa. Kirjasinkoot ovat em-yksiköissä
   suhteessa --esitys-fonttiin, jolloin yksi muuttuja skaalaa koko sisällön.
   ------------------------------------------------------------------------- */

:root { --esitys-fontti: 19px; }

body.esitys { background: var(--ground); }

.esitys__sisalto {
  max-width: 78ch; margin: 0 auto; padding: 56px 28px 96px;
  font-size: var(--esitys-fontti);
}
.esitys__sisalto .materiaali { max-width: none; font-size: 1em; }
.esitys__sisalto .materiaali h1 { font-size: 1.85em; margin-bottom: .5em; }
.esitys__sisalto .materiaali h2 { font-size: 1.32em; margin: 1.4em 0 .4em; }
.esitys__sisalto .materiaali h3 { font-size: 1.12em; margin: 1.2em 0 .3em; }
.esitys__sisalto .materiaali p,
.esitys__sisalto .materiaali ul,
.esitys__sisalto .materiaali ol { font-size: 1em; margin-bottom: .8em; }
.esitys__sisalto .materiaali pre { font-size: .8em; }
.esitys__sisalto .materiaali table { font-size: .88em; }
.esitys__sisalto .materiaali figcaption { font-size: .82em; }
.esitys__sisalto .materiaali figure.kaavio { max-width: none; }

.esitys__ohje {
  position: fixed; left: 20px; bottom: 14px; margin: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  pointer-events: none; opacity: .75;
}

/* --- reunavalikko --- */

.esitysvalikko {
  position: fixed; right: 0; top: 50%; z-index: 60;
  display: flex; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line); border-right: 0;
  border-radius: 10px 0 0 10px; box-shadow: var(--shadow);
  transform: translate(calc(100% - 26px), -50%);
  transition: transform .18s ease;
}
.esitysvalikko:hover, .esitysvalikko:focus-within { transform: translate(0, -50%); }

.esitysvalikko__kahva {
  display: grid; align-content: center; justify-items: center; gap: 4px;
  width: 26px; flex: none; background: var(--surface-2);
  border-right: 1px solid var(--line); border-radius: 9px 0 0 9px;
}
.esitysvalikko__kahva i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }

.esitysvalikko__napit { display: grid; gap: 4px; padding: 8px; }

.esitysnappi {
  display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; text-align: left;
  color: var(--ink-2); background: none; border: 1px solid transparent; border-radius: 7px;
  padding: 8px 12px; min-width: 150px;
}
.esitysnappi:hover { background: var(--surface-3); color: var(--ink); }
.esitysnappi:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.esitysnappi[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink);
}
.esitysnappi > [aria-hidden] {
  width: 20px; flex: none; text-align: center; font-size: 15px; line-height: 1;
}

/* --- korostus --- */

.esitys__sisalto.korostustila .materiaali > * { cursor: pointer; }
.esitys__sisalto.korostustila .materiaali > *:hover {
  outline: 2px dashed var(--accent-line); outline-offset: 6px;
}

/* Kun jokin lohko on korostettu, muut himmenevät — huomio ohjautuu yhteen
   kohtaan ilman että mitään katoaa näkyvistä. */
.esitys__sisalto.korostuksia .materiaali > * { opacity: .28; transition: opacity .15s ease; }
.esitys__sisalto.korostuksia .materiaali > .korostettu {
  opacity: 1;
  background: var(--accent-soft);
  box-shadow: 0 0 0 10px var(--accent-soft);
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .esitysvalikko { transition: none; }
}

@media (max-width: 900px) {
  .esitys__sisalto { padding: 32px 18px 80px; }
  .esitysvalikko { transform: translate(calc(100% - 26px), -50%); }
}

/* ------------------------------------------------------------- responsiivi */

/* Kiinteä sivupalkki alkaisi ahdistaa pääsisältöä kapealla näytöllä, joten
   sarakkeet menevät allekkain jo ennen varsinaista mobiilirajaa. */
@media (max-width: 1100px) {
  .jako-3 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Yläpalkin sisältö ei mahdu yhdelle riville kapealla näytöllä: navigaatio
     rivittyy omalle rivilleen ja käyttäjätunnus jätetään pois — nimikirjaimet
     ja rooli riittävät kertomaan kenenä ollaan kirjautuneena. */
  .ylapalkki { flex-wrap: wrap; row-gap: 8px; }
  .ylapalkki nav { order: 3; width: 100%; }
  .ylapalkki .kayttaja .mono { display: none; }

  .kaksijako { grid-template-columns: 1fr; }
  .linkkipalkki { border-right: 0; border-bottom: 1px solid var(--line); }
  .linkkipalkki__sisus { position: static; max-height: none; }
  .sisaltoalue { max-width: none; }

  /* Linkkilista piiloon oletuksena: muuten se työntäisi sisällön kauas alas
     pienellä ruudulla. Hampurilaispainike avaa ja sulkee sen. */
  .palkkinappi { display: flex; }
  .linkkipalkki .linkkipalkki__sisus { display: none; }
  .linkkipalkki.auki .linkkipalkki__sisus { display: block; }
  .linkkipalkki.auki { border-bottom-width: 1px; }
  .jako-2, .jako-3, .rivi-2 { grid-template-columns: 1fr; }
  .sisaltoalue { padding: 20px 16px 50px; }
  .parivalinta { grid-template-columns: 1fr; }
  .parivalinta .nuoli { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .ylapalkki, .linkkipalkki, .sivunvaihto, .nappi { display: none !important; }
  body { background: #fff; }
}

/* Liitetyn tai raahatun kuvan esikatselu kuvapankin latauslomakkeessa. */
.liitetty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--pyoristys-pieni);
  background: var(--surface-3);
}

.liitetty img {
  width: 74px;
  height: 56px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.liitetty__tiedot {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  font-size: 12.5px;
}

.liitetty__tiedot b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liitetty__tiedot span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}

/* Raahaus lomakkeen päälle: koko kortti on pudotusalue. */
[data-kuvapudotus].pudotus-yllä {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Yläpalkin oma nimi vie asetuksiin. Linkki kattaa sekä tunnuksen että
   nimikirjaimet, jotta osumapinta on riittävän iso myös kosketuksella. */
.omalinkki {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px 3px 8px;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}

.omalinkki:hover,
.omalinkki:focus-visible {
  background: var(--surface-2);
  border-color: var(--line);
}

.omalinkki:hover .nimikirjaimet,
.omalinkki:focus-visible .nimikirjaimet {
  border-color: var(--accent-line);
  color: var(--accent-ink);
}

@media (max-width: 900px) {
  /* Kapealla näytöllä tunnus jää pois, nimikirjaimet riittävät linkiksi. */
  .omalinkki .mono { display: none; }
  .omalinkki { padding-left: 4px; }
}