/* Yksi tiedosto, ei nipputyökalua (ADR 0004).
   Kontrasti ja kosketuskohteiden koko: WCAG 2.2 AA (REQ-UI-004). */

:root {
  --tausta: #fbfaf8;
  --paperi: #ffffff;
  --teksti: #1c1b19;
  --himmea: #5d5b56;
  --viiva: #ddd9d2;
  --korostus: #1f5f5b;
  --korostus-tumma: #164542;
  --huomio: #8a4b10;
  --este: #8a1c1c;
  --ok: #1f5f2b;
  --leveys: 44rem;
}

* { box-sizing: border-box; }

html { font-size: 17px; }

body {
  margin: 0;
  background: var(--tausta);
  color: var(--teksti);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

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

header.ylin {
  border-bottom: 1px solid var(--viiva);
  background: var(--paperi);
}
header.ylin .kuori { padding: .8rem 1.1rem; display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
header.ylin a.merkki { font-weight: 700; text-decoration: none; color: var(--korostus-tumma); letter-spacing: .01em; }
header.ylin nav { margin-left: auto; display: flex; gap: .9rem; flex-wrap: wrap; }
header.ylin nav a { color: var(--himmea); text-decoration: none; padding: .25rem 0; }
header.ylin nav a:hover, header.ylin nav a[aria-current] { color: var(--korostus-tumma); text-decoration: underline; }

h1 { font-size: 1.7rem; line-height: 1.2; margin: 1.4rem 0 .4rem; }
h2 { font-size: 1.25rem; margin: 1.8rem 0 .4rem; }
h3 { font-size: 1.05rem; margin: 1.3rem 0 .3rem; }
p, li { max-width: 38rem; }
a { color: var(--korostus-tumma); }

.johdanto { color: var(--himmea); margin-top: 0; }

.kortti {
  background: var(--paperi);
  border: 1px solid var(--viiva);
  border-radius: .5rem;
  padding: 1rem 1.1rem;
  margin: 1rem 0;
}
.kortti h2, .kortti h3 { margin-top: 0; }

.rivi { display: flex; gap: .8rem; align-items: baseline; 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: .7rem 0;
  max-width: none;
}
ul.lista > li:last-child { border-bottom: 0; }

.merkintä {
  display: inline-block;
  font-size: .8rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  border: 1px solid var(--viiva);
  border-radius: 1rem;
  padding: .1rem .55rem;
  color: var(--himmea);
  white-space: nowrap;
}
.merkintä.tehty { border-color: var(--ok); color: var(--ok); }
.merkintä.auki { border-color: var(--korostus); color: var(--korostus); }
.merkintä.este { border-color: var(--este); color: var(--este); }
.merkintä.huomio { border-color: var(--huomio); color: var(--huomio); }

.ilmoitus {
  border-left: 3px solid var(--korostus);
  background: var(--paperi);
  padding: .8rem 1rem;
  margin: 1rem 0;
}
.ilmoitus.este { border-left-color: var(--este); }
.ilmoitus.huomio { border-left-color: var(--huomio); }

form { margin: 1rem 0; }
fieldset { border: 1px solid var(--viiva); border-radius: .4rem; margin: 0 0 1.2rem; padding: .9rem 1rem; }
legend { font-weight: 700; padding: 0 .35rem; }
label { display: block; margin: .5rem 0 .2rem; }
.vihje { color: var(--himmea); font-size: .9rem; margin: .1rem 0 .4rem; }

input[type=text], input[type=email], input[type=number], input[type=date], textarea, select {
  font: inherit;
  width: 100%;
  max-width: 34rem;
  padding: .5rem .6rem;
  border: 1px solid var(--viiva);
  border-radius: .35rem;
  background: var(--paperi);
  color: var(--teksti);
}
textarea { min-height: 7rem; resize: vertical; }

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

/* Asteikko 0–10 radiopainikkeina: toimii ilman JavaScriptiä (REQ-UI-003). */
.asteikko { display: flex; gap: .3rem; flex-wrap: wrap; margin: .3rem 0 .2rem; }
.asteikko label {
  margin: 0;
  border: 1px solid var(--viiva);
  border-radius: .35rem;
  min-width: 2.6rem;
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paperi);
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.asteikko input { position: absolute; opacity: 0; width: 0; height: 0; }
.asteikko label:has(input:checked) { background: var(--korostus); color: #fff; border-color: var(--korostus); }
.asteikko label:has(input:focus-visible) { outline: 3px solid var(--korostus); outline-offset: 2px; }
.ankkurit { display: flex; justify-content: space-between; max-width: 34rem; color: var(--himmea); font-size: .85rem; }

.valinnat label {
  display: flex; gap: .55rem; align-items: baseline;
  border: 1px solid var(--viiva); border-radius: .35rem;
  padding: .55rem .7rem; margin: .35rem 0; background: var(--paperi); max-width: 34rem;
}
.valinnat label:has(input:checked) { border-color: var(--korostus); background: #f2f7f6; }

button, .painike {
  font: inherit;
  font-family: ui-sans-serif, system-ui, sans-serif;
  background: var(--korostus);
  color: #fff;
  border: 1px solid var(--korostus-tumma);
  border-radius: .35rem;
  padding: .55rem 1rem;
  min-height: 2.75rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
button.toissijainen, .painike.toissijainen { background: var(--paperi); color: var(--korostus-tumma); }
button:hover { background: var(--korostus-tumma); }

table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--viiva); vertical-align: top; }
th { font-family: ui-sans-serif, system-ui, sans-serif; font-size: .85rem; color: var(--himmea); font-weight: 600; }
td.luku, th.luku { text-align: right; font-variant-numeric: tabular-nums; }

.sisalto :is(h1,h2,h3) { max-width: 38rem; }
.sisalto blockquote {
  border-left: 3px solid var(--huomio);
  margin: 1rem 0; padding: .1rem 1rem; color: var(--himmea); background: var(--paperi);
}

.kuvaaja { width: 100%; height: auto; background: var(--paperi); border: 1px solid var(--viiva); border-radius: .4rem; }

footer.alin {
  border-top: 1px solid var(--viiva);
  margin-top: 3rem;
  padding-top: 1rem;
  color: var(--himmea);
  font-size: .9rem;
}
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: 10; }

@media (prefers-color-scheme: dark) {
  :root {
    --tausta: #16150f;
    --paperi: #1e1d17;
    --teksti: #ece9e1;
    --himmea: #a5a196;
    --viiva: #38352c;
    --korostus: #5fbdb4;
    --korostus-tumma: #8ad6cd;
    --huomio: #e0a463;
    --este: #f08b8b;
    --ok: #86d29a;
  }
  button, .painike { color: #10100c; }
  .valinnat label:has(input:checked) { background: #1d2a28; }
  .asteikko label:has(input:checked) { color: #10100c; }
}

/* Apuluokat. Tyyliattribuutteja ei käytetä: alustan CSP on
   `style-src 'self'` ilman `unsafe-inline`ia. */
.ei-marginaalia { margin: 0; }
.virheellinen { border-color: var(--este); }
button.pieni, .painike.pieni { min-height: 0; padding: .2rem .6rem; }
.viesti-teksti { white-space: pre-wrap; }
input.kapea, select.kapea { width: 8rem; }
select.luonnollinen, input.luonnollinen { width: auto; }