/* Ridali timelapse — üks laadileht kogu liidesele.
   Ilma raamistikuta: leht peab avanema ka nõrgas mobiilses levis. */

:root {
  --taust: #f6f6f4;
  --kaart: #ffffff;
  --tekst: #1c1c1a;
  --tuhm: #62625d;
  --joon: #dcdcd6;
  --rohkem: #1f5f3f;
  --hoiatus: #8a5a00;
  --viga: #8f2020;
  --info: #1f4a6f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --taust: #17171a;
    --kaart: #1f1f23;
    --tekst: #ececea;
    --tuhm: #9b9b95;
    --joon: #33333a;
    --rohkem: #7fd0a5;
    --hoiatus: #e0b062;
    --viga: #ef8f8f;
    --info: #8fc0e8;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--taust);
  color: var(--tekst);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

a { color: var(--info); }

/* --- päis --- */

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--kaart);
  border-bottom: 1px solid var(--joon);
}

.brand {
  font-weight: 600;
  text-decoration: none;
  color: var(--tekst);
}

.top nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.top nav a {
  text-decoration: none;
  color: var(--tuhm);
}

.top nav a.aktiivne,
.top nav a:hover { color: var(--tekst); }

.valja { margin: 0; }

.valja button {
  background: none;
  border: 1px solid var(--joon);
  border-radius: 4px;
  color: var(--tuhm);
  padding: 0.3rem 0.6rem;
  font-size: 0.9rem;
  cursor: pointer;
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

h1 { font-size: 1.5rem; margin: 1rem 0 0.25rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }

.ajatempel { color: var(--tuhm); margin: 0 0 1.5rem; }

section {
  background: var(--kaart);
  border: 1px solid var(--joon);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* --- teated --- */

.teade {
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border: 1px solid currentColor;
}

.teade.ok { color: var(--rohkem); }
.teade.hoiatus { color: var(--hoiatus); }
.teade.viga { color: var(--viga); }
.teade.info { color: var(--info); }
.teade strong, .teade code, .teade em { color: var(--tekst); }

/* --- kirjeldusloendid --- */

dl {
  display: grid;
  grid-template-columns: minmax(10rem, 18rem) 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}

dt { color: var(--tuhm); }
dd { margin: 0; }

@media (max-width: 30rem) {
  dl { grid-template-columns: 1fr; gap: 0 0; }
  dt { margin-top: 0.6rem; }
}

/* --- tabelid --- */

.kerib { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}

th, td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--joon);
  white-space: nowrap;
}

th { color: var(--tuhm); font-weight: 500; }

.sundmused td:last-child { white-space: normal; min-width: 20rem; }

tr.kahvatu { color: var(--tuhm); }
tr.tase-warn td:nth-child(2) { color: var(--hoiatus); }
tr.tase-error td:nth-child(2) { color: var(--viga); }

.marge { color: var(--tuhm); font-size: 0.9rem; }

/* --- vormid --- */

.vorm { display: flex; flex-direction: column; max-width: 24rem; }

label { margin-top: 0.75rem; font-size: 0.9rem; color: var(--tuhm); }

input[type="text"], input[type="password"] {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid var(--joon);
  border-radius: 4px;
  background: var(--taust);
  color: var(--tekst);
}

.vorm button, .kaart button {
  margin-top: 1rem;
  padding: 0.55rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--joon);
  border-radius: 4px;
  background: var(--taust);
  color: var(--tekst);
  cursor: pointer;
}

.rida {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--tekst);
}

/* --- sisselogimisleht --- */

body.keskel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

.kaart {
  background: var(--kaart);
  border: 1px solid var(--joon);
  border-radius: 8px;
  padding: 1.5rem;
  width: 100%;
  max-width: 22rem;
}

.kaart h1 { margin-top: 0; font-size: 1.25rem; }
.kaart form { display: flex; flex-direction: column; }

footer {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  color: var(--tuhm);
  font-size: 0.85rem;
}

/* --- vahelehed ja navigatsioon (faas 3b) --- */

.vahelehed {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.vahelehed a {
  text-decoration: none;
  color: var(--tuhm);
  border: 1px solid var(--joon);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  background: var(--kaart);
}

.vahelehed a.aktiivne {
  color: var(--tekst);
  border-color: var(--tekst);
}

.vahelehed a.tuhm { opacity: 0.55; }

.kuunav, .paevanav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1rem;
}

.paevanav { margin-top: 1.5rem; }

/* --- kalendriruudustik --- */

.nadalapaevad, .nadal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.nadalapaevad {
  margin-bottom: 4px;
  color: var(--tuhm);
  font-size: 0.8rem;
  text-align: center;
}

.nadal { margin-bottom: 4px; }

.paev {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--joon);
  border-radius: 4px;
  background: var(--kaart);
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: var(--tuhm);
}

.paev.tyhi { border-color: transparent; background: none; }
.paev.tulevik { opacity: 0.35; }

.paev img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paev.tuhm img { filter: grayscale(1); opacity: 0.45; }

.paev .number {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 0.8rem;
  line-height: 1.2;
}

/* Pisipildi peal peab number loetav olema ka heleda taeva vastu. */
.paev.on .number, .paev.tuhm .number {
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

.paev .silt {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.7rem;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

.paev .silt .hoiatus { color: #ffcf7a; }

.paev.tana { border-color: var(--info); border-width: 2px; }
.paev.on:hover { border-color: var(--tekst); }

/* --- mängija ja ajapaneel --- */

.mangija {
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.mangija video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
}

.ajapaneel { padding: 1rem; }

.kellarida {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.kell {
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Kaadrisamm on täpsustöö ja seda tehakse ka telefonis: nupud peavad olema
   sõrmega tabatavad, sest üks kaader edasi tähendab pildil sageli
   vaevumärgatavat muutust ja mööda klõpsimine on tüütu. */
.kaadrisamm {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}

.kaadrisamm button {
  margin: 0;
  min-width: 3.25rem;
  min-height: 2.75rem;
  font-size: 1.1rem;
  border: 1px solid var(--joon);
  border-radius: 4px;
  background: var(--taust);
  color: var(--tekst);
  cursor: pointer;
  /* Kiire topeltklõps ei tohi telefonis suumi tekitada. */
  touch-action: manipulation;
}

.kaadrisamm button:disabled {
  opacity: 0.35;
  cursor: default;
}

.liugur {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.liugur input[type="range"] {
  flex: 1;
  min-width: 0;
  /* Sõrmega tabatav ka telefonis. */
  height: 2rem;
}

.mine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.mine label { margin: 0; }

.mine input[type="text"] {
  padding: 0.4rem 0.5rem;
  font-size: 1rem;
  border: 1px solid var(--joon);
  border-radius: 4px;
  background: var(--taust);
  color: var(--tekst);
  width: 5.5rem;
}

/* Kopeerinupp on „Mine" kõrval, sest mõlemad tegelevad ajaga. Telefonis
   peab ta olema sõrmega tabatav — aadressirea käsitsi valimine on seal
   täpselt see tüütus, mida see nupp ära võtab. */
#kopeeri-link { min-height: 2.75rem; touch-action: manipulation; }

.mine button, .kiirvalikud button {
  margin: 0;
  padding: 0.45rem 0.8rem;
  font-size: 0.95rem;
  border: 1px solid var(--joon);
  border-radius: 4px;
  background: var(--taust);
  color: var(--tekst);
  cursor: pointer;
}

.kiirvalikud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-left: auto;
}

.ajapaneel .hoiatus {
  color: var(--hoiatus);
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
}

.jaanuke {
  display: block;
  max-width: 20rem;
  width: 100%;
  margin-top: 0.75rem;
  border-radius: 4px;
}

@media (max-width: 30rem) {
  .kiirvalikud { margin-left: 0; width: 100%; }
  .kell { font-size: 1.6rem; }
}

/* --- "hoia alles" ja kaitstud päevad (faas 4) --- */

/* Kaitstud märgis peab olema silmaga eristatav aegumishoiatusest: üks ütleb
   "see jääb alles", teine "see kaob varsti". Ilma eri kujuga oleks kalendri
   nurgas kaks sarnast silti ja need läheksid segamini. */
.kaitstud {
  display: inline-block;
  padding: 0 0.35rem;
  border-radius: 3px;
  background: var(--rohkem);
  color: var(--taust);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: none;
}

.kustumine {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.kustumine form { margin: 0; }

.kustumine button {
  padding: 0.35rem 0.8rem;
  font-size: 0.9rem;
  border: 1px solid var(--joon);
  border-radius: 4px;
  background: var(--taust);
  color: var(--tekst);
  cursor: pointer;
}

.kustumine button.kaitse { border-color: var(--rohkem); color: var(--rohkem); }
.kustumine button.vabasta { border-color: var(--hoiatus); color: var(--hoiatus); }

tr.hoiatav td { color: var(--hoiatus); }

.kaitstud-loend {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}

.kaitstud-paev {
  display: flex;
  gap: 0.9rem;
  padding: 0.75rem;
  background: var(--kaart);
  border: 1px solid var(--joon);
  border-radius: 6px;
}

.kaitstud-paev.lukus { border-color: var(--hoiatus); }

.kaitstud-paev .pilt {
  flex: 0 0 8rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--joon);
}

.kaitstud-paev .pilt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kaitstud-paev h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kaitstud-paev .kaamerad {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
}

.kaitstud-paev .kaamerad li { margin-bottom: 0.2rem; }
.kaitstud-paev .kaamerad .hoiatus { color: var(--hoiatus); }

@media (max-width: 30rem) {
  .kaitstud-paev { flex-direction: column; }
  .kaitstud-paev .pilt { flex: none; width: 100%; }
}

/* --- tellitav eelvaade (faas 4b) --- */

/* Eelvaade on ajutine ja seda peab silmaga näha olema: katkendlik ääris
   eristab teda päris videost, mida saab kaitsta ja mis läheb arhiivi. */
.eelvaade {
  border: 1px dashed var(--joon);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.eelvaade h2 { margin-top: 0; }

.eelvaade-nupp {
  margin: 0;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  min-height: 2.75rem;
  border: 1px solid var(--joon);
  border-radius: 4px;
  background: var(--taust);
  color: var(--tekst);
  cursor: pointer;
  touch-action: manipulation;
}

.eelvaade-seis {
  color: var(--info);
  font-size: 0.95rem;
  margin: 0.5rem 0;
}

/* Kaadritega, aga videota päev kalendris: avatav, aga pisipilti ei ole veel
   olemas (pisipilt sünnib kodeerimisel). Katkendlik ääris ütleb "pooleli",
   sama keel mis eelvaate paneelil. */
.paev.kaadritega {
  border-style: dashed;
  cursor: pointer;
}

.paev.kaadritega:hover { border-color: var(--tekst); }

/* Silt on tehtud tumeda pisipildi peale: valge tekst varjuga. Pisipildita
   lahtris on ta valgel taustal praktiliselt loetamatu, seega siin oma värv
   ja vari maha. */
.paev.kaadritega .silt {
  color: var(--tekst);
  text-shadow: none;
  left: 4px;
  right: 4px;
  bottom: 4px;
  text-align: right;
}