/* ==========================================================================
   PROJECT ZERO — components.css
   Komponentit. Lataa tokens.css:n jälkeen. Ei riippuvuuksia.
   Luokkanimet suomeksi, käyttötarkoituksen mukaan.
   ========================================================================== */

/* --- Ylätunniste ---------------------------------------------------------- */
.ylatunniste {
  border-bottom: 1px solid var(--raja);
  background: var(--paperi);
}
.ylatunniste-sisalto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tila-4);
  min-height: 4rem;
  padding-block: var(--tila-3);
}
.tunnus {
  font-family: var(--fontti-ui);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--muste);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.tunnus:hover { color: var(--jarvi-tumma); }
.tunnus span { color: var(--jarvi); }

/* --- Navigaatio ----------------------------------------------------------- */
.valikkonappi {
  font-family: var(--fontti-ui);
  font-size: var(--koko-pieni);
  font-weight: 600;
  min-height: 44px;
  padding: var(--tila-2) var(--tila-4);
  background: transparent;
  color: var(--muste);
  border: 1px solid var(--raja);
  border-radius: var(--pyoristys);
  cursor: pointer;
}
.valikkonappi:hover { border-color: var(--kivi); background: var(--utu); }

.paavalikko ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.paavalikko a {
  display: block;
  font-family: var(--fontti-ui);
  font-size: var(--koko-pieni);
  font-weight: 600;
  text-decoration: none;
  color: var(--muste);
  padding: var(--tila-3) 0;
  border-bottom: 1px solid var(--raja);
}
.paavalikko a:hover { color: var(--jarvi); }
.paavalikko[hidden] { display: none; }

@media (min-width: 48rem) {
  .valikkonappi { display: none; }
  .paavalikko { display: block !important; }
  .paavalikko[hidden] { display: block; }
  .paavalikko ul { display: flex; gap: var(--tila-5); }
  .paavalikko a { padding: 0; border-bottom: 0; }
}

/* --- Murupolku ------------------------------------------------------------ */
.murupolku {
  font-family: var(--fontti-ui);
  font-size: var(--koko-pieni);
  color: var(--kivi);
  padding-top: var(--tila-5);
}
.murupolku ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--tila-2); }
.murupolku li + li::before { content: "/"; margin-right: var(--tila-2); color: var(--raja); }

/* --- Etusivun ovet -------------------------------------------------------- */
.ovet {
  list-style: none;
  margin: var(--tila-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--tila-3);
}
@media (min-width: 52rem) {
  .ovet { grid-template-columns: repeat(3, 1fr); gap: var(--tila-4); }
}
.ovi {
  display: block;
  padding: var(--tila-5);
  border: 1px solid var(--raja);
  border-left: var(--raja-paksu) solid var(--jarvi);
  text-decoration: none;
  color: var(--muste);
  background: var(--paperi);
  height: 100%;
}
.ovi:hover { background: var(--utu); }
.ovi b {
  display: block;
  font-family: var(--fontti-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--jarvi);
  margin-bottom: var(--tila-2);
}
.ovi span { display: block; font-size: var(--koko-pieni); color: var(--kivi); font-family: var(--fontti-ui); line-height: 1.5; }

/* --- Luottamusrivi -------------------------------------------------------- */
.luottamus {
  margin-top: var(--tila-7);
  padding-top: var(--tila-5);
  border-top: 1px solid var(--raja);
  font-family: var(--fontti-ui);
  font-size: var(--koko-pieni);
  color: var(--kivi);
}
.luottamus dl { margin: 0; display: grid; gap: var(--tila-3); }
@media (min-width: 48rem) { .luottamus dl { grid-template-columns: repeat(2, 1fr); gap: var(--tila-3) var(--tila-6); } }
.luottamus dt { font-weight: 600; color: var(--muste); }
.luottamus dd { margin: var(--tila-1) 0 0; line-height: 1.5; }

/* --- Osiolista etusivulla ------------------------------------------------- */
.osiot { list-style: none; padding: 0; margin: var(--tila-5) 0 0; }
.osiot li { padding: var(--tila-4) 0; border-bottom: 1px solid var(--raja); }
.osiot a { font-family: var(--fontti-ui); font-weight: 600; }
.osiot p { margin: var(--tila-1) 0 0; font-size: var(--koko-pieni); color: var(--kivi); font-family: var(--fontti-ui); }
.osiot .tulossa { color: var(--kivi); font-family: var(--fontti-ui); font-weight: 600; }

/* --- Sisällysluettelo ----------------------------------------------------- */
.sisallys {
  font-family: var(--fontti-ui);
  font-size: var(--koko-pieni);
  border-left: 2px solid var(--utu);
  padding-left: var(--tila-4);
  margin-bottom: var(--tila-6);
}
.sisallys h2 { font-size: var(--koko-pieni); margin: 0 0 var(--tila-2); color: var(--kivi); font-weight: 600; }
.sisallys ol { margin: 0; padding-left: var(--tila-4); }
.sisallys li { margin-bottom: var(--tila-1); }

/* --- Syylista (ongelmasivun ydinkomponentti) ------------------------------ */
.syyt { list-style: none; counter-reset: syy; padding: 0; margin: var(--tila-5) 0; }
.syyt > li {
  counter-increment: syy;
  position: relative;
  padding: var(--tila-4) 0 var(--tila-4) var(--tila-7);
  border-top: 1px solid var(--raja);
}
.syyt > li::before {
  content: counter(syy);
  position: absolute;
  left: 0;
  top: var(--tila-4);
  font-family: var(--fontti-ui);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--jarvi);
  line-height: 1.2;
}
.syyt h3 { margin-top: 0; }
.syyt > li > :last-child { margin-bottom: 0; }
.syy-toiminta {
  font-family: var(--fontti-ui);
  font-size: var(--koko-pieni);
  color: var(--muste);
  background: var(--utu);
  padding: var(--tila-3) var(--tila-4);
  margin-top: var(--tila-3);
}
.syy-toiminta b { color: var(--jarvi-tumma); }

/* --- Tulostettava tarkistuslista ------------------------------------------ */
.tulostettava {
  border: 1px solid var(--raja);
  padding: var(--tila-5);
  margin: var(--tila-6) 0;
}
.tulostettava h2 { margin-top: 0; }

/* --- Laskuri -------------------------------------------------------------- */
.laskuri { margin: var(--tila-6) 0; }
.laskuri-kentat { display: grid; gap: var(--tila-4); }
@media (min-width: 34rem) { .laskuri-kentat { grid-template-columns: 1fr 1fr; } }
.laskuri-kentat .leveä { grid-column: 1 / -1; }
.laskuri select { max-width: none; }
.radiorivi { display: flex; gap: var(--tila-4); align-items: center; }
.radiorivi label { display: flex; align-items: center; gap: var(--tila-2); margin: 0; min-height: 44px; }
.radiorivi input { width: auto; min-height: auto; }
.vinkki { font-size: var(--koko-pieni); color: var(--kivi); font-family: var(--fontti-ui); margin-top: var(--tila-1); }

.tulos[hidden] { display: none; }
.tulos-rivi { margin-bottom: var(--tila-4); }
.tulos-rivi:last-child { margin-bottom: 0; }
.tulos-otsikko {
  font-family: var(--fontti-ui);
  font-size: var(--koko-pieni);
  font-weight: 600;
  color: var(--kivi);
  margin: 0 0 var(--tila-1);
}
.tulos-selite { font-size: var(--koko-pieni); font-family: var(--fontti-ui); color: var(--muste); margin: var(--tila-2) 0 0; }

/* --- Virheilmoitus -------------------------------------------------------- */
.virhe {
  font-family: var(--fontti-ui);
  font-size: var(--koko-pieni);
  color: var(--puolukka);
  margin-top: var(--tila-2);
}
.virhe[hidden] { display: none; }

/* --- Kaaviot -------------------------------------------------------------- */
.kaavio { display: block; width: 100%; height: auto; }
.kaavio text { font-family: var(--fontti-ui); fill: var(--muste); }
.kaavio .selite { fill: var(--kivi); }

/* --- Alatunniste ---------------------------------------------------------- */
.alatunniste {
  border-top: 1px solid var(--raja);
  margin-top: var(--tila-9);
  padding-block: var(--tila-6) var(--tila-7);
  font-family: var(--fontti-ui);
  font-size: var(--koko-pieni);
  color: var(--kivi);
}
.alatunniste-ryhmat { display: grid; gap: var(--tila-5); }
@media (min-width: 48rem) { .alatunniste-ryhmat { grid-template-columns: repeat(3, 1fr); gap: var(--tila-6); } }
.alatunniste h2 { font-size: var(--koko-pieni); margin: 0 0 var(--tila-3); color: var(--muste); }
.alatunniste ul { list-style: none; margin: 0; padding: 0; }
.alatunniste li { margin-bottom: var(--tila-2); }
.alatunniste p { margin: 0 0 var(--tila-2); line-height: 1.5; }
.alatunniste-loppu { margin-top: var(--tila-6); padding-top: var(--tila-4); border-top: 1px solid var(--raja); }

/* --- Rakenteilla-huomautus ------------------------------------------------ */
.rakenteilla {
  background: var(--utu);
  border-left: var(--raja-paksu) solid var(--kivi);
  padding: var(--tila-4) var(--tila-5);
  margin-bottom: var(--tila-6);
  font-family: var(--fontti-ui);
  font-size: var(--koko-pieni);
}
.rakenteilla > :last-child { margin-bottom: 0; }
.rakenteilla p { margin-bottom: var(--tila-2); }

@media print {
  .ovet, .luottamus, .osiot, .sisallys, .rakenteilla { display: none; }
}