/* Koekeskus, ulkoasu A + B (1.11.2026). Tumma yläosa (VAPAA-kyltti, mittari), vaalea lukuosa.
   Atkinson Hyperlegible Next tekstiin, Chakra Petch numeroihin ja tunnukseen.
   Tekstisivuilla ladataan sivu.css:n jälkeen: muuttujat ja varjojen siistiminen alla. */
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:200 800;font-style:normal;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/chakra-petch-latin-400.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/chakra-petch-latin-700.woff2) format("woff2")}

:root{
  --pohja:#f6f7f9; --kortti:#ffffff; --ink:#0f1b2d; --himmea:#55627a; --viiva:#dfe4ec; --viiva-2:#c5cdd9;
  --sini:#13233d; --sini-pohja:#1b4fb8; --aurinko:#ffb81c; --amber-tumma:#7a5a10;
  --yo:#0b0f16; --paneeli:#141a24; --yo-viiva:#262e3b; --yo-himmea:#a3afc2; --yo-teksti:#eef1f5;
  --oikein:#13803d; --oikein-pohja:#e8f6ee; --vaarin:#c0262d; --vaarin-pohja:#fdeced;
  --fokus:#1b4fb8;
  --otsikko:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fontti:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --numero:"Chakra Petch",ui-monospace,"SF Mono",Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--pohja);color:var(--ink);font-family:var(--fontti);font-size:1.0625rem;line-height:1.55;font-weight:400;overflow-x:hidden}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ohita{position:absolute;left:8px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:10}
.ohita:focus{top:8px}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px}
.yla :focus-visible,.kp-yla :focus-visible{outline-color:var(--aurinko)}
a{color:var(--sini-pohja);text-underline-offset:3px}

/* Yläpalkki kaikilla sivuilla */
.kp-yla{background:var(--yo);color:var(--yo-teksti);border-bottom:1px solid var(--yo-viiva)}
.kp-yla-sisa{max-width:46rem;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.kp-merkki{font-family:var(--numero);font-weight:700;font-size:.9375rem;letter-spacing:.06em;color:var(--yo-teksti);text-decoration:none;padding:8px 0}
.kp-nav{display:flex;gap:2px 14px;flex-wrap:wrap}
.kp-nav a{color:var(--yo-himmea);font-size:.875rem;text-decoration:none;padding:8px 0;min-height:40px;display:inline-flex;align-items:center}
.kp-nav a:hover,.kp-nav a[aria-current="page"]{color:var(--yo-teksti);text-decoration:underline}

/* Tumma yläosa (etusivu) */
.yla{background:var(--yo);color:var(--yo-teksti)}
.yla-sisa{max-width:46rem;margin:0 auto;padding:22px 16px 24px}
.kyltti{border:2px solid #2d333c;border-radius:8px;background:#05070a;padding:12px;text-align:center;max-width:26rem;margin:0 auto}
.kyltti b{display:block;font-family:var(--numero);font-weight:700;font-size:2.4rem;line-height:1.1;letter-spacing:.14em;color:var(--aurinko);text-shadow:0 0 16px rgba(255,184,28,.5)}
.kyltti small{display:block;font-family:var(--numero);font-size:.6875rem;letter-spacing:.25em;color:#8a7640;margin-top:2px}
.kicker{margin:22px 0 0;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--aurinko)}
.yla h1{font-size:clamp(1.9rem,8vw,2.6rem);line-height:1.08;font-weight:750;letter-spacing:-.02em;margin:8px 0 12px}
.yla .lead{margin:0;font-size:1.0625rem;line-height:1.5;color:#c3cddc}
.mittari{margin:18px 0;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--yo-viiva);border-radius:8px;overflow:hidden}
.mittari div{padding:10px;border-right:1px solid var(--yo-viiva);background:var(--paneeli);min-width:0}
.mittari div:last-child{border-right:0}
.mittari b{display:block;font-family:var(--numero);font-weight:700;font-size:1.5rem;line-height:1.2;color:var(--aurinko);font-variant-numeric:tabular-nums}
.mittari small{display:block;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--yo-himmea)}
.cta{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--aurinko);color:#111;padding:15px 18px;border-radius:10px;font-weight:750;font-size:1.0625rem;text-decoration:none;min-height:56px;border:0;width:100%;font-family:inherit;cursor:pointer}
.cta:hover{background:#ffc540}
.cta2{display:block;text-align:center;color:#fff;font-size:.9375rem;padding:14px 0 0;text-underline-offset:3px}
.mittari-selite{margin:10px 0 0;font-size:.8125rem;color:var(--yo-himmea)}

/* Vaalea lukuosa */
.osa{max-width:46rem;margin:0 auto;padding:24px 16px 6px}
.osa h2{font-size:1.1875rem;font-weight:750;margin:0 0 6px;line-height:1.25}
.osa .apu{margin:0 0 12px;color:var(--himmea);font-size:.9375rem}
.aiheet{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.aihe{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;background:#fff;border:1px solid var(--viiva);border-radius:10px;padding:12px 14px;color:var(--ink);text-decoration:none}
.aihe:hover{border-color:var(--viiva-2)}
.aihe b{font-size:.96875rem;font-weight:650;line-height:1.3}
.aihe small{grid-column:1/3;font-size:.8125rem;color:var(--himmea);margin-top:-4px}
.aihe em{font-style:normal;font-family:var(--numero);font-size:.875rem;color:var(--himmea);white-space:nowrap}
.palkki{grid-column:1/3;height:6px;background:#edf0f4;border-radius:3px;overflow:hidden}
.palkki i{display:block;height:100%;width:0;background:var(--aurinko)}
.peli-kortti{display:flex;gap:12px;align-items:center;border:1px dashed #b9c3d3;border-radius:10px;padding:12px 14px;font-size:.9375rem;color:var(--himmea);text-decoration:none;margin:0}
.peli-kortti b{color:var(--ink)}
.peli-kortti .piste{flex:none;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#ffd65c 0 35%,var(--yo) 37%)}
.linkit{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.linkit a{display:block;background:#fff;border:1px solid var(--viiva);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.linkit a b{display:block;font-weight:650}
.linkit a span{display:block;font-size:.875rem;color:var(--himmea)}

/* Harjoituskoe */
.koe-tila{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 8px;font-size:.875rem;color:var(--himmea)}
.koe-tila b{font-family:var(--numero);font-weight:700;color:var(--ink);font-size:1rem}
.koe-palkki{height:6px;background:#e3e7ee;border-radius:3px;overflow:hidden;margin:0 0 16px}
.koe-palkki i{display:block;height:100%;background:var(--aurinko);transition:width .2s}
.kys-kortti{background:#fff;border:1px solid var(--viiva);border-radius:12px;padding:16px}
.kys-aihe{margin:0 0 6px;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--himmea)}
.kys-kortti h2{font-size:1.1875rem;line-height:1.4;font-weight:700;margin:0 0 14px;outline:none}
.vaihto{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.vaihto button{display:grid;grid-template-columns:2rem 1fr;gap:10px;align-items:start;width:100%;text-align:left;background:var(--pohja);border:2px solid var(--viiva);border-radius:10px;padding:11px 12px;font:inherit;color:var(--ink);cursor:pointer;min-height:52px}
.vaihto button:hover:not(:disabled){border-color:var(--viiva-2);background:#fff}
.vaihto .kirjain{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:#fff;border:2px solid var(--viiva-2);font-family:var(--numero);font-weight:700;font-size:.9375rem;color:var(--himmea)}
.vaihto button:disabled{cursor:default}
.vaihto button.on-oikea{border-color:var(--oikein);background:var(--oikein-pohja)}
.vaihto button.on-oikea .kirjain{background:var(--oikein);border-color:var(--oikein);color:#fff}
.vaihto button.on-vaara{border-color:var(--vaarin);background:var(--vaarin-pohja)}
.vaihto button.on-vaara .kirjain{background:var(--vaarin);border-color:var(--vaarin);color:#fff}
.palaute{margin:14px 0 0;padding:12px 14px;border-radius:10px;border-left:6px solid var(--oikein);background:var(--oikein-pohja)}
.palaute.vaara{border-left-color:var(--vaarin);background:var(--vaarin-pohja)}
.palaute p{margin:0 0 .6rem}
.palaute .tulos-sana{font-weight:750}
.palaute .lahde{font-size:.875rem;color:var(--himmea);margin:0}
.koe-napit{display:grid;gap:10px;margin:16px 0 0}
.toissijainen{display:flex;justify-content:center;align-items:center;min-height:52px;padding:12px 16px;border-radius:10px;border:2px solid var(--viiva-2);background:#fff;color:var(--ink);font:inherit;font-weight:650;text-decoration:none;cursor:pointer}
.tulos-iso{font-family:var(--numero);font-weight:700;font-size:3rem;line-height:1;margin:6px 0 4px;color:var(--ink)}
.tulostaulu{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.tulostaulu li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;background:#fff;border:1px solid var(--viiva);border-radius:10px;padding:10px 14px}
.tulostaulu b{font-weight:650;font-size:.9375rem;line-height:1.3}
.tulostaulu em{font-style:normal;font-family:var(--numero);font-weight:700;white-space:nowrap}
.tulostaulu small{grid-column:1/3;font-size:.8125rem;color:var(--himmea)}
.tulostaulu .yli em{color:var(--oikein)}
.tulostaulu .ali em{color:var(--vaarin)}

/* Alatunniste */
.kp-ala{max-width:46rem;margin:24px auto 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--viiva);font-size:.875rem;color:var(--himmea)}
.kp-ala p{margin:0 0 .3rem}
.kp-ala a{color:var(--himmea);font-weight:650;display:inline-block;padding:6px 2px}

/* Tekstisivut: sivu.css:n pehmeät varjot ja pyöreydet koekeskuksen linjaan */
.sivu{max-width:46rem;margin:0 auto;padding:0 16px}
.paa{outline:none}
.artikkeli{font-weight:400}
.artikkeli h1,.artikkeli h2,.artikkeli h3{font-weight:750;letter-spacing:-.01em}
.artikkeli .ingressi{font-weight:400;color:#2a364b}
.artikkeli strong{font-weight:700}
.artikkeli a{font-weight:650}
.lyhyesti{border:1px solid var(--viiva);border-left:6px solid var(--aurinko);border-radius:10px;box-shadow:none}
.sisallys{background:#eef1f5;border-radius:10px}
.taulukko-kehys{border:1px solid var(--viiva);border-radius:10px}
.artikkeli thead th{background:#eef1f5;font-weight:700}
.artikkeli tfoot td,.artikkeli tfoot th{font-weight:700;background:#fff6df}
.artikkeli .vaiheet li{border:1px solid var(--viiva);border-radius:10px;box-shadow:none}
.artikkeli .vaiheet li::before{background:var(--sini);font-family:var(--numero)}
.huomiolaatikko{background:#fff6df;border:1px solid #f0d290;border-radius:10px}
.ukk details{border:1px solid var(--viiva);border-radius:10px;box-shadow:none}
.ukk summary{font-weight:650}
.kysymys{border:1px solid var(--viiva);border-radius:12px;box-shadow:none}
.kysymys h3{font-weight:700}
.kysymys .kys-teksti{font-weight:650}
.artikkeli .vaihtoehdot li{border:1px solid var(--viiva);border-radius:10px}
.artikkeli .vaihtoehdot li::before{font-family:var(--numero)}
.kysymys .oikea{font-weight:700;color:var(--oikein)}
.artikkeli .lisaa{border:1px dashed var(--viiva-2);border-radius:10px}
.lahteet .lukupvm{font-weight:700}
.kp-harjoittele{margin:0 0 1.4rem;padding:14px 16px;background:var(--yo);color:var(--yo-teksti);border-radius:10px}
.kp-harjoittele p{margin:0 0 .7rem}
.kp-harjoittele .cta{margin:0}

@media (min-width:700px){
  .yla-sisa{padding-top:30px;padding-bottom:30px}
  .aihe b{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.koe-palkki i{transition:none}}
.sivu .kp-ala{padding-left:0;padding-right:0}
.koe-h1{font-size:1.25rem;font-weight:750;line-height:1.3;margin:0 0 12px;letter-spacing:-.01em}
.artikkeli .cta,.artikkeli .cta:visited{color:#111;text-decoration:none}