/* VARKE-hakukauden valmiuskello.
 *
 * Jaettu tiedosto kolmelle sivulle (laskuri + kaksi veturisivua). Tyylit EIVAT
 * ole kolmena kopiona sivujen omissa <style>-lohkoissa, koska kolme kopiota
 * ajautuu erilleen eika kukaan huomaa. Yksikkotesti vahtii etta kaikki kolme
 * sivua linkittavat taman tiedoston.
 *
 * Sivujen :root-muuttujat eroavat toisistaan (laskurisivulla on --green-300 ja
 * --ease, veturisivuilla ei), joten komponentti maarittelee omat muuttujansa
 * varmoilla oletusarvoilla eika oleta mitaan isantasivulta.
 *
 * Hallitseva idea: kello vastaa yhteen kysymykseen, "ehditaanko me". Siksi
 * suurin elementti on paivaluku ja kaikki muu on sen perustelu.
 */

.valmiuskello {
  --k-line: rgba(255, 255, 255, 0.10);
  --k-line-soft: rgba(255, 255, 255, 0.06);
  --k-teksti: #cbd5e1;
  --k-himmea: #94a3b8;
  --k-valkoinen: #ffffff;
  --k-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Tilavari. Yksi merkitys per vari: oranssi = toimi nyt, vihrea = auki,
     syaani = neutraali tieto. Kaikki yltavat yli 6:1 taustaa #0A0F14 vasten. */
  --k-tila: #94a3b8;

  display: block;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--k-line);
  border-left: 3px solid var(--k-tila);
  border-radius: 24px;
  padding: 24px 28px;
  margin: 8px 0 0;
}

.valmiuskello[data-kello-tila="ennen"]   { --k-tila: #FF5C00; }
.valmiuskello[data-kello-tila="auki"]    { --k-tila: #86efac; }
.valmiuskello[data-kello-tila="jalkeen"] { --k-tila: #00E5FF; }
.valmiuskello[data-kello-tila="tilaton"] { --k-tila: #94a3b8; }

/* Piilotus ei saa kaatua isantasivun display-julistuksiin. */
.valmiuskello [data-kello][hidden] { display: none; }

/* Kolme rivia, ei kahta palstaa. Kahden palstan versiossa paivalista jai
   oikeaan sarakkeeseen ja vasempaan jai 700 px kuollut aukko (mitattu kuvasta).
   Nyt mittari ja selitys jakavat ylarivin, ja lista + toimintarivi ottavat
   koko leveyden. Lista myos rivittyy vahemman kun se saa leveamman sarakkeen. */
.kello-tila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

/* Mittari: tilasana, suuri luku, luvun selite. */
.kello-sana {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-tila);
  margin: 0 0 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.kello-merkki {
  /* Piste ensimmaisen rivin kohdalle. align-items: center asetti sen
     kaksirivisessa tilasanassa ("Takautuvuusikkuna on sulkeutunut")
     rivien valiin, jolloin se nayttaa irralliselta. */
  margin-top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--k-tila);
  flex-shrink: 0;
}
.kello-luku {
  font-size: clamp(34px, 7vw, 48px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--k-tila);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin: 0;
}
.kello-luku-pvm { font-size: clamp(28px, 5.5vw, 38px); }
.kello-selite {
  font-size: 13px;
  color: var(--k-himmea);
  margin: 6px 0 0;
  line-height: 1.45;
  max-width: 22ch;
}

/* Selitys: lause, lisatieto, paivalista. */
.kello-selitys > *:first-child { margin-top: 0; }
.valmiuskello p { margin-top: 0; }
.kello-lause {
  font-size: 15.5px;
  color: var(--k-valkoinen);
  margin: 0 0 12px;
  line-height: 1.6;
}
.kello-lisa {
  font-size: 15px;
  color: var(--k-teksti);
  margin: 0 0 12px;
  line-height: 1.6;
}
.kello-lisa:last-child, .kello-lause:last-child { margin-bottom: 0; }
.kello-lisa strong, .kello-lause strong { color: var(--k-valkoinen); font-weight: 600; }

/* Isantasivun article ul -saannot vuotavat tanne: laskurisivulla jokainen
   li saa check_circle-ikonin ::beforella ja 32 px sisennyksen. Paivalistassa
   ne olisivat vaaria merkkeja (nama eivat ole valmiita asioita) ja tyonsivat
   paivamaarasarakkeen pois. Nollataan eksplisiittisesti. */
.kello-pisteet { list-style: none; margin: 0; padding: 0; }
.kello-pisteet li::before { content: none; display: none; }
.kello-pisteet li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  position: static;
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--k-line-soft);
  font-size: 14px;
  color: var(--k-teksti);
  line-height: 1.5;
}
.kello-pvm {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--k-valkoinen);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 88px;
}

.kello-toimi {
  margin: 0;
  font-size: 15px;
  color: var(--k-teksti);
}
.kello-toimi a {
  color: #ff9a4c;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 4px;
}
.kello-toimi a:hover { color: #FF5C00; }
.kello-toimi a:focus-visible { outline: 2px solid #00E5FF; outline-offset: 3px; }

.kello-huomio {
  margin: 0;
  font-size: 13px;
  color: var(--k-himmea);
  line-height: 1.5;
}

@media (min-width: 760px) {
  .kello-tila {
    grid-template-columns: minmax(200px, 0.75fr) 1.6fr;
    column-gap: 32px;
    row-gap: 18px;
  }
  /* stretch, jotta erotinviiva on tasan ylarivin korkuinen eika paaty
     keskelle tyhjaa sen mukaan kumpi palsta sattuu olemaan lyhyempi. */
  .kello-tila { align-items: stretch; }
  .kello-selitys {
    border-left: 1px solid var(--k-line-soft);
    padding-left: 32px;
  }
  /* Vain johtolause jaa mittarin viereen. Toinen kappale ja lista ottavat
     koko leveyden, muuten oikea palsta kasvaa mittaria korkeammaksi ja
     vasempaan jaa aukko (mitattu: 230 px kun molemmat kappaleet olivat oikealla). */
  .kello-lisa, .kello-pisteet, .kello-toimi, .kello-huomio { grid-column: 1 / -1; }
  .kello-selitys .kello-lause:last-child { margin-bottom: 0; }
  /* Paivamaarasarake saa oman kiintean leveyden vasta kun tilaa on. */
  .kello-pisteet li { gap: 20px; }
  .kello-pvm { min-width: 104px; }
}

@media (max-width: 600px) {
  .valmiuskello { padding: 20px 18px; border-radius: 20px; }
  .kello-pisteet li { display: block; padding: 10px 0; }
  .kello-pvm { display: block; margin-bottom: 2px; }
  .kello-selite { max-width: none; }
}

/* Tulostus: kello tulostuu siina tilassa jossa se ruudulla on. */
@media print {
  .valmiuskello {
    background: none;
    border: 1px solid #999;
    border-left: 3px solid #333;
    color: #000;
  }
  .kello-sana, .kello-luku { color: #000; }
  .kello-lause, .kello-lisa, .kello-pisteet li, .kello-pvm, .kello-selite { color: #000; }
}