/* Tekstisivut (taksinkuljettajan-koe, esimerkkikysymykset). Ladataan tyyli.css:n jälkeen.
   Kaikki säännöt alkavat .sivu-teksti tai .artikkeli, jotta pelin tyylit eivät muutu. */
.sivu-teksti{max-width:46rem}
.sivu-teksti .ylapalkki{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sivu-teksti .ylapalkki a.merkki-nimi{color:inherit;text-decoration:none}
.sivu-teksti .ylalinkki{font-weight:800;font-size:.9375rem;color:var(--sini-pohja);text-underline-offset:4px;display:inline-block;padding:10px 4px;min-height:44px}

.artikkeli{padding:10px 0 18px;font-weight:400;line-height:1.65;overflow-wrap:break-word}
.artikkeli h1{font-size:clamp(1.9rem,7.4vw,2.9rem);line-height:1.1;text-align:left;margin:6px 0 14px;overflow-wrap:break-word;hyphens:manual}
.artikkeli h2{font-size:clamp(1.45rem,5.4vw,1.9rem);line-height:1.15;text-align:left;margin:2.2rem 0 .6rem;scroll-margin-top:12px}
.artikkeli h3{font-size:1.2rem;line-height:1.25;margin:1.4rem 0 .3rem}
.artikkeli p{margin:0 0 1rem}
.artikkeli strong{font-weight:800}
.artikkeli a{color:var(--sini-pohja);text-underline-offset:3px;font-weight:600}
.artikkeli ul,.artikkeli ol{margin:0 0 1rem;padding-left:1.3rem}
.artikkeli li{margin:0 0 .45rem}
.artikkeli li::marker{color:var(--sini-pohja);font-weight:800}
.artikkeli .ingressi{text-align:left;font-weight:600;font-size:1.1875rem;line-height:1.55;margin:0 0 1.2rem}
.artikkeli .paivays{margin:0 0 1rem;color:var(--himmea);font-size:.9375rem}

/* Vastaus heti: lyhyesti-laatikko */
.lyhyesti{background:var(--kortti);border:2px solid var(--viiva);border-left:8px solid var(--aurinko);border-radius:20px;box-shadow:0 4px 0 var(--viiva);padding:14px 18px 6px;margin:0 0 1.6rem}
.lyhyesti h2{margin:0 0 .5rem;font-size:1.25rem;text-align:left}
.lyhyesti ul{padding-left:1.2rem}

/* Sisällys */
.sisallys{background:#eaf2fb;border-radius:18px;padding:12px 18px 6px;margin:0 0 1.6rem}
.sisallys h2{font-size:1.1rem;margin:0 0 .4rem;text-align:left}
.sisallys ol{margin:0 0 .6rem;padding-left:1.3rem}
.sisallys li{margin:0 0 .25rem}
.sisallys a{font-weight:600}

/* Taulukko */
.taulukko-kehys{margin:0 0 1.2rem;border:2px solid var(--viiva);border-radius:18px;background:var(--kortti);overflow:hidden}
.artikkeli table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.9375rem;line-height:1.4}
.artikkeli th.luku,.artikkeli td.luku{width:5.4rem}
.artikkeli table.hinta th.luku,.artikkeli table.hinta td.luku{width:8.2rem}
.artikkeli thead th.luku{font-size:.8125rem;line-height:1.25}
.artikkeli caption{text-align:left;font-weight:800;padding:10px 12px 4px;color:var(--himmea);font-size:.875rem}
.artikkeli th,.artikkeli td{padding:9px 10px;text-align:left;vertical-align:top;border-top:1px solid var(--viiva)}
.artikkeli thead th{background:#eaf2fb;font-weight:800;border-top:0}
.artikkeli td.luku,.artikkeli th.luku{text-align:right;font-variant-numeric:tabular-nums}
.artikkeli tfoot td,.artikkeli tfoot th{font-weight:800;background:#fff8dc}

/* Vaiheet */
.artikkeli .vaiheet{list-style:none;padding:0;margin:0 0 1.4rem;counter-reset:v;display:grid;gap:12px}
.artikkeli .vaiheet li{counter-increment:v;position:relative;margin:0;padding:12px 14px 12px 3.6rem;background:var(--kortti);border:2px solid var(--viiva);border-radius:20px;box-shadow:0 4px 0 var(--viiva)}
.artikkeli .vaiheet li::before{content:counter(v);position:absolute;left:12px;top:12px;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--sini);color:#fff;font-family:var(--otsikko);font-weight:700;font-size:1.15rem}
.vaiheet strong{display:block;font-family:var(--otsikko);font-weight:600;font-size:1.1rem;margin-bottom:2px}
.vaiheet p{margin:0 0 .4rem}
.vaiheet p:last-child{margin-bottom:0}

/* Huomio */
.huomiolaatikko{background:#fff8dc;border:2px solid #f0d25a;border-radius:18px;padding:12px 16px 4px;margin:0 0 1.2rem}
.huomiolaatikko p{margin-bottom:.7rem}
.lahde{display:block;color:var(--himmea);font-size:.875rem;font-weight:600;line-height:1.4;margin:.35rem 0 1.1rem}
.artikkeli .lisaa{margin:1rem 0;padding:12px 16px;background:var(--kortti);border:2px dashed var(--viiva-2);border-radius:16px}

/* UKK */
.ukk details{background:var(--kortti);border:2px solid var(--viiva);border-radius:18px;margin:0 0 10px;box-shadow:0 3px 0 var(--viiva)}
.ukk summary{cursor:pointer;list-style:none;padding:13px 44px 13px 16px;font-family:var(--otsikko);font-weight:600;font-size:1.1rem;line-height:1.3;position:relative;min-height:48px}
.ukk summary::-webkit-details-marker{display:none}
.ukk summary::after{content:"+";position:absolute;right:16px;top:8px;font-size:1.7rem;font-weight:700;color:var(--sini-pohja);line-height:1.2}
.ukk details[open] summary::after{content:"\2212"}
.ukk .vastaus{padding:0 16px 8px}
.ukk .vastaus p{margin:0 0 .7rem}

/* Esimerkkikysymykset */
.kysymys{background:var(--kortti);border:2px solid var(--viiva);border-radius:22px;box-shadow:0 4px 0 var(--viiva);padding:14px 16px 8px;margin:0 0 16px}
.kysymys h3{margin:0 0 .4rem;font-size:1.05rem;font-family:var(--fontti);font-weight:800;color:var(--himmea);letter-spacing:.01em}
.kysymys .kys-teksti{font-weight:800;margin:0 0 .7rem;line-height:1.5}
.artikkeli .vaihtoehdot{list-style:none;padding:0;margin:0 0 .8rem;display:grid;gap:8px}
.artikkeli .vaihtoehdot li{margin:0;padding:9px 12px 9px 2.6rem;position:relative;background:var(--pohja);border:2px solid var(--viiva);border-radius:14px}
.artikkeli .vaihtoehdot li::before{content:attr(data-k);position:absolute;left:9px;top:8px;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:#fff;border:2px solid var(--viiva-2);font-family:var(--otsikko);font-weight:700;font-size:.875rem;color:var(--himmea)}
.kysymys details{margin:0 0 8px}
.kysymys summary{cursor:pointer;font-weight:800;color:var(--sini-pohja);padding:10px 0;min-height:44px;display:flex;align-items:center}
.kysymys .oikea{margin:0 0 .6rem;font-weight:800;color:#14803f}
.kysymys .peruste{margin:0 0 .6rem}
.kysymys .peruste-lahde{margin:0 0 .6rem;font-size:.875rem;color:var(--himmea);line-height:1.45}
.aihepiiri-otsikko{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.aihepiiri-otsikko .maara{font-family:var(--fontti);font-size:.9375rem;font-weight:800;color:var(--himmea)}

/* Lähteet */
.lahteet ul{padding-left:1.2rem}
.lahteet li{font-size:.9375rem;line-height:1.5;overflow-wrap:anywhere}
.lahteet .lukupvm{font-weight:800}

/* Alatunniste: lisälinkit */
.sivu-teksti .alatunniste .lisalinkit{margin-bottom:.4rem}

@media (min-width:700px){
  .artikkeli{font-size:1.125rem}
  .artikkeli table{font-size:1rem}
}